/* ARUI Studio skin "Obsidian" (Claude-1, 2026-10-28; owner: darker, a real design change, premium, more realistic). Loaded
   over site.css only with ?skin=obsidian (skins/skin.mjs). The machine stands alone in a black studio under one spotlight,
   on a glossy floor (look.mjs reflection); the stage is the whole screen. The configuration floats over it as a smoked-glass
   sheet; the build's name is set large and light, like a car configurator's. Rows are a spec sheet (hairlines, no boxes);
   part photos sit on light product cards so white-background maker photos and our renders read as one set. */
:root[data-skin=obsidian]{
  color-scheme:dark;
  --bg-0:#050506;--bg-1:#0a0b0d;--bg-2:#101114;--bg-3:#16171b;--bg-4:#1f2126;
  --line-1:rgba(255,255,255,.065);--line-2:rgba(255,255,255,.11);--line-3:rgba(255,255,255,.2);
  --text-1:#f5f5f7;--text-2:#a8aab2;--text-3:#72757e;
  --select:#f5f5f7;--focus:#f5f5f7;
  --glass:rgba(12,13,16,.62);--glass-line:rgba(255,255,255,.085);--glass-top:rgba(255,255,255,.08);
  --glass-blur:blur(28px) saturate(160%);
  --deep:0 30px 90px rgba(0,0,0,.62),0 8px 24px rgba(0,0,0,.4);
  --r-row:18px;--r-tile:14px;--r-media:10px;--r-control:999px;
}
[data-skin=obsidian] body{background:var(--bg-0)}
[data-skin=obsidian] ::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)}
[data-skin=obsidian] .stage-title .eyebrow,[data-skin=obsidian] .panel-head .eyebrow{display:none}

/* Stage: a black studio, one pool of light (skin.mjs paints the same into the 3D backdrop) */
[data-skin=obsidian] .stage,:where([data-skin=obsidian]) #loading{background:radial-gradient(ellipse 62% 74% at 38% 40%,#2a2b31 0%,#141519 38%,#08080a 78%,#050506 100%)}
/* :where: the first load only; the light "Updating your build" veil and the poster keep site.css's own (an opaque one blacked out a frame per part change) */
[data-skin=obsidian] .stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 40% 45%,transparent 55%,rgba(0,0,0,.55) 100%)} /* lens vignette */
[data-skin=obsidian] .stage-title{z-index:2}
[data-skin=obsidian] .stage-title h1{margin-top:0;font-weight:300;letter-spacing:-.045em;color:var(--text-1)}
[data-skin=obsidian] .stage-meta{color:var(--text-2);letter-spacing:.01em}
[data-skin=obsidian] .stage-meta b{font-weight:500}
[data-skin=obsidian] .gesture{color:var(--text-3)}

/* Floating controls: smoked-glass pills */
[data-skin=obsidian] .view-tools,[data-skin=obsidian] .zoom-tools,[data-skin=obsidian] .power-on{background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 0 0 1px var(--glass-line),inset 0 1px 0 var(--glass-top),0 16px 40px rgba(0,0,0,.45);color:var(--text-1)}
[data-skin=obsidian] .view-tools{border-radius:999px;padding:5px}
[data-skin=obsidian] .view-tools button{border-radius:999px;color:var(--text-2)}
[data-skin=obsidian] .view-tools button.active{background:var(--text-1);color:#0a0a0c}
[data-skin=obsidian] .view-tools .view-special::before{background:var(--line-2)}
[data-skin=obsidian] .zoom-tools{border-radius:999px}
[data-skin=obsidian] .zoom-tools button+button{box-shadow:inset 0 1px 0 var(--line-1)}
@media (hover:hover){
  [data-skin=obsidian] .view-tools button:not(.active):not(:disabled):hover{background:rgba(255,255,255,.07);color:var(--text-1)}
  [data-skin=obsidian] .zoom-tools button:not(:disabled):hover{background:rgba(255,255,255,.06)}
  [data-skin=obsidian] .power-on:hover{box-shadow:inset 0 0 0 1px var(--line-3),inset 0 1px 0 var(--glass-top),0 0 0 5px color-mix(in srgb,var(--accent) 18%,transparent),0 16px 40px rgba(0,0,0,.45)}
}

/* Part markers */
[data-skin=obsidian] .marker-dot{background:var(--text-1);box-shadow:0 0 0 4px rgba(255,255,255,.14),0 0 18px rgba(255,255,255,.35)}
[data-skin=obsidian] .marker-label{background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 0 0 1px var(--glass-line),0 10px 28px rgba(0,0,0,.5);color:var(--text-1)}
[data-skin=obsidian] .pick-card,[data-skin=obsidian] .tour-card{background:rgba(12,13,16,.82);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 0 0 1px var(--glass-line),var(--deep)}

/* Panel: a spec sheet. Big light heading, rows split by hairlines, the open row a soft lifted surface */
[data-skin=obsidian] .panel-bar{border-bottom-color:var(--line-1)}
[data-skin=obsidian] .part-search input{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line-1)}
[data-skin=obsidian] .part-search input:focus{box-shadow:inset 0 0 0 1px var(--line-3)}
[data-skin=obsidian] .panel-wide{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
[data-skin=obsidian] .panel-head h2{margin-top:0;font-weight:300;font-size:30px;letter-spacing:-.04em}
[data-skin=obsidian] .panel-lede{color:var(--text-3)}
[data-skin=obsidian] .sheet-row{background:transparent;box-shadow:inset 0 -1px 0 var(--line-1);border-radius:0}
[data-skin=obsidian] .sheet-row.open{margin:6px -10px;padding:0 10px 10px;border-radius:var(--r-row);background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--line-1),inset 0 1px 0 var(--glass-top)}
[data-skin=obsidian] .row-toggle{border-radius:0}
[data-skin=obsidian] .row-index{color:var(--text-3);font-weight:500}
[data-skin=obsidian] .row-label{letter-spacing:.14em;color:var(--text-3)}
[data-skin=obsidian] .row-value{font-weight:500;font-size:16px;letter-spacing:-.015em}
[data-skin=obsidian] .row-spec{color:var(--text-3)}
@media (hover:hover){[data-skin=obsidian] .sheet-row:not(.open) .row-toggle:hover .row-value{color:#fff}}

/* Options: light product cards inside a dark sheet; multiply drops the photos' white */
[data-skin=obsidian] .option,[data-skin=obsidian] .finish-tile{border-radius:var(--r-tile);background:rgba(255,255,255,.028);box-shadow:inset 0 0 0 1px var(--line-1)}
[data-skin=obsidian] .option:has(>.tile[aria-pressed=true]),[data-skin=obsidian] .finish-tile[aria-pressed=true]{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px var(--text-1),0 14px 34px rgba(0,0,0,.45)}
@media (hover:hover){
  [data-skin=obsidian] .option:not(:has(>.tile[aria-pressed=true],>.tile[aria-disabled=true])):hover,[data-skin=obsidian] .finish-tile:not([aria-pressed=true]):not([aria-disabled=true]):hover{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line-3)}
}
[data-skin=obsidian] .tile-media,[data-skin=obsidian] .details-media{background:radial-gradient(ellipse at 50% 38%,#f7f7f8 0%,#e4e5e8 62%,#d3d4d8 100%)}
[data-skin=obsidian] .tile-media img,[data-skin=obsidian] .details-media img{mix-blend-mode:multiply}
[data-skin=obsidian] .tile-brand{letter-spacing:.14em;color:var(--text-3)}
[data-skin=obsidian] .tick{box-shadow:0 0 0 3px var(--bg-1)}
[data-skin=obsidian] .options:not(.finishes) .option-details{background:rgba(10,10,12,.72);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}

/* Filters and modes */
[data-skin=obsidian] .chip{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text-2)}
[data-skin=obsidian] .chip[aria-pressed=true]{background:var(--text-1);color:#0a0a0c;box-shadow:none}
[data-skin=obsidian] .chip[aria-pressed=true] small{color:rgba(10,10,12,.6)}
[data-skin=obsidian] .motion-modes{background:rgba(255,255,255,.05);box-shadow:none}
[data-skin=obsidian] .motion-modes button[aria-pressed=true]{background:var(--text-1);color:#0a0a0c}

/* Journey */
[data-skin=obsidian] .build-journey{border-color:var(--line-1);background:rgba(255,255,255,.03)}
[data-skin=obsidian] .build-journey progress{accent-color:var(--accent)}
[data-skin=obsidian] .build-journey progress::-webkit-progress-bar{background:var(--line-2)}
[data-skin=obsidian] .build-journey progress::-webkit-progress-value{background:var(--accent)}

/* Footer: one glowing primary, the rest ghost pills */
[data-skin=obsidian] .panel-foot{background:linear-gradient(180deg,transparent,rgba(5,5,6,.5));border-top-color:var(--line-1)}
[data-skin=obsidian] .primary{min-height:52px;border-radius:999px;background:var(--accent-fill);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 34px color-mix(in srgb,var(--accent) 38%,transparent);letter-spacing:.01em}
[data-skin=obsidian] .secondary{border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
@media (hover:hover){
  [data-skin=obsidian] .primary:not(:disabled):hover{background:var(--accent-fill-hover);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 44px color-mix(in srgb,var(--accent) 50%,transparent)}
  [data-skin=obsidian] .secondary:not(:disabled):hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line-3)}
}

/* Sheets and dialogs */
[data-skin=obsidian] .details-sheet{background:rgba(10,11,13,.92);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-left-color:var(--line-1);box-shadow:var(--deep)}
[data-skin=obsidian] .details-sheet::backdrop,[data-skin=obsidian] .chooser::backdrop{background:rgba(0,0,0,.5)}
[data-skin=obsidian] .panel-scroll{scrollbar-color:var(--line-2) transparent}

/* Desktop: the stage is the whole screen; brand floats over it; the panel is a glass sheet on the right */
@media (min-width:1024px) and (min-height:600px){
  :root[data-skin=obsidian]{--float:20px;--float-top:76px;--cover:calc(var(--panel-w) + var(--float) * 2)}
  [data-skin=obsidian] .masthead{position:absolute;z-index:20;top:0;left:0;right:0;height:64px;background:linear-gradient(180deg,rgba(5,5,6,.7),rgba(5,5,6,0));border-bottom:0}
  [data-skin=obsidian] .masthead-tag{background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 0 0 1px var(--glass-line)}
  [data-skin=obsidian] .studio{display:block;position:relative;height:100dvh}
  [data-skin=obsidian] .stage{position:absolute;inset:0}
  [data-skin=obsidian] .panel{position:absolute;z-index:4;top:var(--float-top);right:var(--float);bottom:var(--float);width:var(--panel-w);border:0;border-radius:26px;overflow:hidden;background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 0 0 1px var(--glass-line),inset 0 1px 0 var(--glass-top),var(--deep)}
  [data-skin=obsidian] .panel-foot{background:transparent}
  /* title v2 (Claude-1, 2026-10-29): long case names (Corsair FRAME 4000D RS ARGB) ran under Power / Watch it build; the title now
     stops before them (left 48 + buttons about 156 + gap 24) and wraps in balanced lines */
  [data-skin=obsidian] .stage-title{top:104px;left:48px;max-width:calc(100% - var(--cover) - 228px)}
  [data-skin=obsidian] .stage-title h1{text-wrap:balance}
  [data-skin=obsidian] .stage-title h1{font-size:clamp(46px,1.6rem + 2.6vw,76px);line-height:.98}
  [data-skin=obsidian] .stage-meta{margin-top:16px;font-size:14px}
  [data-skin=obsidian] .view-tools{left:calc((100% - var(--cover)) / 2);bottom:30px;max-width:calc(100% - var(--cover) - 80px)}
  [data-skin=obsidian] .power-on{right:calc(var(--cover) + 4px);top:var(--float-top)}
  [data-skin=obsidian] .build-it{top:calc(var(--float-top) + 52px)}
  [data-skin=obsidian] .zoom-tools{right:calc(var(--cover) + 4px)}
  [data-skin=obsidian] .gesture{left:48px}
}

/* Phone: a black page; the sticky stage ends in a rounded edge over it */
@media (max-width:1023px) and (orientation:portrait){
  [data-skin=obsidian] .masthead{background:var(--bg-0);border-bottom:0}
  [data-skin=obsidian] .stage{border-radius:0 0 26px 26px;box-shadow:0 18px 40px rgba(0,0,0,.7)}
  [data-skin=obsidian] .stage-title h1{font-size:27px;line-height:1.02}
  [data-skin=obsidian] .panel{background:var(--bg-0)}
  [data-skin=obsidian] .panel-head h2{font-size:26px}
}
@media (min-width:1024px) and (min-height:600px){[data-skin=obsidian] .gesture{display:none}} /* the dock says it; the hint ran under it */

/* Key specs on the stage (skin.mjs builds the list from the parts rows): a column at the lower left, desktop only */
[data-skin=obsidian] .skin-specs{display:none}
@media (min-width:1024px) and (min-height:600px){
  [data-skin=obsidian] .skin-specs{position:absolute;z-index:2;left:48px;bottom:112px;display:grid;gap:18px;margin:0;max-width:210px;pointer-events:none;transition:opacity var(--t-ui) var(--ease-out)}
  [data-skin=obsidian] .stage.inspecting .skin-specs{opacity:0}
  [data-skin=obsidian] .skin-specs div{display:grid;gap:5px;padding-left:14px;box-shadow:inset 1px 0 0 var(--line-3)}
  [data-skin=obsidian] .skin-specs dt{font:600 10.5px/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
  [data-skin=obsidian] .skin-specs dd{margin:0;font:400 15px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--text-1)}
}

/* Amethyst tone (?skin=amethyst): the same studio, its light and glass tinted with the brand violet */
[data-tone=amethyst] .stage,:where([data-tone=amethyst]) #loading{background:radial-gradient(ellipse 62% 74% at 38% 40%,#3a3247 0%,#1a1720 38%,#09080b 78%,#050506 100%)}
:root[data-tone=amethyst]{--glass:rgba(16,13,22,.62);--glass-line:rgba(205,184,255,.1);--glass-top:rgba(205,184,255,.1)}
[data-tone=amethyst] .skin-specs div{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}
[data-tone=amethyst] .chip[aria-pressed=true],[data-tone=amethyst] .view-tools button.active{background:#ece4ff}