/* U-Case Build Studio, site design candidate 2026-10-07.
   Cool graphite throughout, one accent (the brand's muted signal red) for the primary action and the selection tick.
   Selected states use light neutrals, not colour. The rendered stage backdrop belongs to the viewer and is unchanged. */
:root{
  color-scheme:dark;
  --bg-0:#111316;--bg-1:#16191d;--bg-2:#1c2025;--bg-3:#23282e;--bg-4:#2c3238;
  --line-1:#252a30;--line-2:#323840;--line-3:#4a525b;
  --text-1:#eef0f2;--text-2:#b7bdc4;--text-3:#8e959d;
  --select:#e6e9ec;
  --accent:#b07ffd;--accent-fill:#9068cf;--accent-fill-hover:#9e72e4;
  --focus:#e9edf1;
  --font-ui:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:Manrope,'DM Sans',system-ui,sans-serif;
  --head-h:56px;--panel-w:400px;--stage-h:46svh;
  --r-row:14px;--r-tile:10px;--r-media:7px;--r-control:9px;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
  --t-press:120ms;--t-ui:180ms;--t-sheet:320ms;--t-sheet-out:200ms;
  /* Layers: stage overlays 1-3, loading 5, sticky mobile stage 10. The details sheet uses the top layer. */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg-0);color:var(--text-1);font:400 14px/1.5 var(--font-ui);-webkit-font-smoothing:antialiased;font-synthesis:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:progress}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h1,h2,h3,p{margin:0}
.eyebrow{font:600 11px/1.3 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}

/* Masthead */
.masthead{height:var(--head-h);display:flex;align-items:center;gap:18px;padding:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left));background:var(--bg-0);border-bottom:1px solid var(--line-1)}
.brand{font:800 21px/1 var(--font-display);letter-spacing:-.06em;color:var(--text-1);text-decoration:none}
.brand>span{color:var(--accent)}
.masthead-label{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);padding-left:18px;border-left:1px solid var(--line-2);line-height:20px}
.masthead-tag{margin-left:auto;font-size:12px;color:var(--text-3);padding:4px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2)}

/* Two columns: the PC owns the room, the configuration is a working column. */
.studio{display:grid;grid-template-columns:minmax(0,1fr) var(--panel-w);height:calc(100dvh - var(--head-h))}

/* Stage: same backdrop colours as the viewer's rendered gradient, so nothing flashes before the canvas paints. */
.stage{position:relative;overflow:hidden;min-height:0;background:radial-gradient(ellipse at 48% 42%,#434951 0%,#30353c 45%,#1c2026 100%)}
#viewport{position:absolute;inset:0;touch-action:none}
#viewport:focus-visible{outline-offset:-4px}
canvas{display:block;width:100%;height:100%}
.stage-title{position:absolute;z-index:1;top:28px;left:32px;max-width:calc(100% - 64px);pointer-events:none;transition:opacity var(--t-ui) var(--ease-out)}
.stage.inspecting .stage-title{opacity:0}
.stage-title h1{margin-top:8px;font:600 clamp(22px,1rem + 1.1vw,32px)/1.15 var(--font-display);letter-spacing:-.025em;color:var(--text-1)}
.stage-meta{margin-top:6px;font-size:13px;color:var(--text-2)}
.stage-meta b{font-weight:600;color:var(--text-1)}
.stage-meta span[aria-hidden]{padding:0 6px;color:var(--text-3)}

.view-tools{position:absolute;z-index:2;left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:2px;padding:4px;max-width:calc(100% - 140px);overflow-x:auto;scrollbar-width:none;border-radius:12px;background:rgba(19,22,26,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 30px rgba(0,0,0,.25)}
.view-tools::-webkit-scrollbar{display:none}
.view-tools button{flex:none;min-height:36px;padding:0 13px;border:0;border-radius:8px;background:transparent;color:var(--text-2);font-size:13px;font-weight:500;white-space:nowrap;transition:background-color var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out),transform var(--t-press) var(--ease-out)}
.view-tools button.active{background:var(--select);color:var(--bg-0)}
.view-tools .view-special{margin-left:7px;position:relative}
.view-tools .view-special::before{content:"";position:absolute;left:-5px;top:9px;bottom:9px;width:1px;background:rgba(255,255,255,.14)}
.zoom-tools{position:absolute;z-index:2;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:rgba(19,22,26,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.zoom-tools button{width:40px;height:40px;border:0;background:transparent;color:var(--text-1);font-size:19px;line-height:1;transition:background-color var(--t-ui) var(--ease-out)}
.zoom-tools button+button{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
#reset{font-size:17px}
.gesture{position:absolute;z-index:1;left:32px;bottom:34px;font-size:12px;color:var(--text-3);pointer-events:none}
.gesture-touch{display:none}
@media (pointer:coarse){.gesture-fine{display:none}.gesture-touch{display:inline}}
#toast{position:absolute;z-index:3;left:50%;bottom:84px;transform:translate(-50%,6px);max-width:min(440px,calc(100% - 32px));padding:10px 14px;border-radius:10px;background:rgba(238,240,242,.96);color:var(--bg-0);font-size:13px;font-weight:500;text-align:center;opacity:0;pointer-events:none;transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out)}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* Part markers. Dots track their part every frame; labels and lines follow small drift in place and step aside
   during a real drag. Lines: a 45° leg off the dot, then a level run; faint and dashed over the PC, solid beyond it,
   drawn outwards when they appear. No backdrop blur: the canvas changes every frame. */
.markers{position:absolute;inset:0;z-index:2;pointer-events:none}
.marker-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 1.2px rgba(0,0,0,.9))}
.marker-lines path{fill:none;stroke-width:1;stroke-linejoin:round}
.marker-lines .inner{stroke:rgba(238,240,242,.55);stroke-dasharray:3 3;transition:opacity 160ms var(--ease-out)}
.marker-lines .outer{stroke:rgba(238,240,242,.8);stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 300ms var(--ease-out) calc(var(--i) * 30ms),opacity 120ms linear}
.marker{position:absolute;left:-16px;top:-16px;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;pointer-events:auto;transition:opacity 160ms linear}
.marker-dot{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#f1f3f5;box-shadow:0 0 0 3px rgba(17,19,22,.55),0 0 0 4px rgba(255,255,255,.3),0 2px 10px rgba(0,0,0,.55);transition:transform var(--t-ui) var(--ease-out)}
.marker.linked .marker-dot{transform:scale(1.35)}
.marker:active .marker-dot{transform:scale(.85)}
.marker-label{position:absolute;left:0;top:0;padding:6px 11px 7px;border-radius:8px;background:rgba(19,22,26,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);white-space:nowrap;cursor:pointer;pointer-events:auto;transition:opacity 200ms var(--ease-out) calc(160ms + var(--i) * 30ms),box-shadow var(--t-ui) var(--ease-out)}
.marker-label small{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.marker-label strong{display:block;margin-top:1px;font-size:13px;font-weight:600;color:var(--text-1)}
.markers.moving .marker-label,.markers.dots-only .marker-label,.marker-label.off{opacity:0;pointer-events:none;transition:opacity 90ms linear 0s}
.marker-lines .knee{fill:#eef0f2;transition:opacity 160ms var(--ease-out) calc(80ms + var(--i) * 30ms)}
.markers.moving .inner,.markers.dots-only .inner,.inner.off,.markers.moving .knee,.markers.dots-only .knee,.knee.off{opacity:0;transition-duration:90ms;transition-delay:0s}
.markers.moving .outer,.markers.dots-only .outer,.outer.off{opacity:0;stroke-dashoffset:1;transition:opacity 90ms linear 0s,stroke-dashoffset 0s linear 90ms}

/* Loading: first load covers the stage; later loads keep the previous build visible (viewer behaviour). */
#loading{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(ellipse at 48% 42%,#434951 0%,#30353c 45%,#1c2026 100%);font-size:13px;color:var(--text-2);text-align:center;padding:24px}
#loading strong{font:600 16px/1.3 var(--font-display);color:var(--text-1)}
.spinner{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:var(--accent);animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loading.transition-loading{background:rgba(17,19,22,.18);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:none;justify-content:flex-end;padding-bottom:96px;gap:0}
/* veil v2 (Claude-1, 2026-10-29; owner: picking liquid cooling flashed the stage): a part that loads quickly just swaps, with no
   veil; a slow one fades the veil in after .45 s instead of dimming and blurring the stage for a frame or two */
#loading.transition-loading{animation:veil-in .24s var(--ease-out,ease-out) .45s both}
@keyframes veil-in{from{opacity:0}to{opacity:1}}
#loading.transition-loading .spinner{display:none}
#loading.transition-loading strong{display:none}
#loading.transition-loading #load-detail{padding:8px 14px;border-radius:999px;background:rgba(17,19,22,.82);color:var(--text-1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}

/* Panel */
.panel{display:flex;flex-direction:column;min-height:0;background:var(--bg-1);border-left:1px solid var(--line-1)}
.panel-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:28px 24px 28px;scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
.panel-head h2{margin-top:8px;font:600 23px/1.2 var(--font-display);letter-spacing:-.02em}
.panel-lede{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--text-2);max-width:36ch}
#case-adjustments{margin-top:14px;padding:11px 13px;border-radius:10px;background:var(--bg-3);box-shadow:inset 3px 0 0 var(--select);font-size:13px;line-height:1.5;color:var(--text-1)}
#case-adjustments:empty{display:none}

.sheet{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.sheet-row{border-radius:var(--r-row);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-1);scroll-margin:12px 0 12px;transition:box-shadow var(--t-ui) var(--ease-out),background-color var(--t-ui) var(--ease-out)}
.sheet-row.open{background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2),0 12px 32px rgba(0,0,0,.22)}
.row-toggle{display:grid;grid-template-columns:22px minmax(0,1fr) 76px 12px;align-items:center;gap:12px;width:100%;min-height:76px;padding:12px 16px 12px 14px;border:0;border-radius:var(--r-row);background:none;text-align:left}
.row-index{align-self:start;padding-top:2px;font-size:11px;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
.row-label{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.row-value{display:block;margin-top:3px;font:600 15px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--text-1);overflow-wrap:anywhere}
.row-spec{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--text-2)}
.row-spec:empty{display:none}
.row-thumb{display:grid;place-items:center;width:76px;height:48px}
.row-thumb img{width:100%;height:100%;object-fit:contain}
.row-thumb .cpu-symbol{width:42px;height:42px;font-size:11px;letter-spacing:.06em;border-width:2px}
.row-thumb .finish-chip{width:26px;height:26px}
.chevron{justify-self:end;width:8px;height:8px;margin-top:-4px;border-right:1.5px solid var(--text-2);border-bottom:1.5px solid var(--text-2);transform:rotate(45deg);transition:transform var(--t-ui) var(--ease-out)}
.open>.row-toggle .chevron{transform:translateY(4px) rotate(-135deg)}
.row-body{padding:2px 14px 18px}
.open>.row-toggle{grid-template-columns:22px minmax(0,1fr) 12px;min-height:52px}
.open>.row-toggle .row-spec,.open>.row-toggle .row-thumb,.open:not([data-row=fans])>.row-toggle .row-value{display:none}
.open>.row-toggle .row-label{color:var(--text-1)}
.row-body:not([hidden]){animation:reveal var(--t-ui) var(--ease-out)}
@keyframes reveal{from{opacity:0;transform:translateY(-6px)}}
.row-note{margin-top:12px;padding:0 4px;font-size:12.5px;line-height:1.55;color:var(--text-2)}
.group-label{margin:4px 4px 10px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.options+.group-label,.row-note+.group-label{margin-top:18px}
.row-actions{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:10px;padding:0 4px}
.row-actions button,.row-actions a{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0;border:0;background:none;color:var(--text-2);font-size:13px;font-weight:500;text-decoration:none;transition:color var(--t-ui) var(--ease-out)}
.row-actions .inspect::before{content:"";width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor}
.row-actions button:disabled{opacity:.5}

/* Options: one quiet card each, with room between them. The selected card gets a light ring and the accent tick. */
.options{display:grid;gap:10px}
.option{display:flex;flex-direction:column;border-radius:12px;background:rgba(255,255,255,.022);box-shadow:inset 0 0 0 1px var(--line-1);transition:background-color var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out)}
.option:has(>.tile[aria-pressed=true]),.finish-tile[aria-pressed=true]{background:var(--bg-3);box-shadow:inset 0 0 0 1.5px var(--select)}
.tile{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:16px;width:100%;min-height:84px;padding:12px 14px;border:0;border-radius:12px 12px 0 0;background:none;text-align:left;transition:transform var(--t-press) var(--ease-out)}
.large .tile{grid-template-columns:112px minmax(0,1fr)}
.tile-media{position:relative;display:grid;place-items:center;aspect-ratio:16/10;border-radius:var(--r-media);background:radial-gradient(ellipse at 50% 46%,#3c424a 0%,#2a2f35 62%,#22272c 100%)}
.tile-media img{width:100%;height:100%;object-fit:contain}
.tile-copy{display:block;min-width:0}
.tile-brand{display:block;margin-bottom:4px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.tile-copy strong{display:block;font-size:14.5px;line-height:1.3;font-weight:600;overflow-wrap:anywhere}
.tile-copy small{display:block;margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--text-2)}
.tile-status::before{content:" · "}
.tile-status{color:var(--text-3)}
.tick{position:absolute;top:-6px;left:-6px;width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg-3);opacity:0;transform:scale(.5);transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out)}
.tick::after{content:"";position:absolute;left:6.5px;top:3.5px;width:4px;height:8px;border:solid #fff;border-width:0 1.75px 1.75px 0;transform:rotate(45deg)}
[aria-pressed=true] .tick{opacity:1;transform:none}
.tile:disabled .tile-media{opacity:.6}
.tile[aria-disabled=true]{cursor:not-allowed}
.tile[aria-disabled=true] .tile-media,.tile[aria-disabled=true] .tile-copy,.tile[aria-disabled=true]>.finish-chip{opacity:.45}
.tile[aria-disabled=true]::after{content:attr(title);grid-column:2;margin-top:-8px;font-size:12px;line-height:1.45;color:var(--text-2)}
.option-details{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;padding:0 14px;border:0;border-top:1px solid var(--line-1);border-radius:0 0 12px 12px;background:none;color:var(--text-2);font-size:12.5px;font-weight:500;text-align:left;transition:color var(--t-ui) var(--ease-out),background-color var(--t-ui) var(--ease-out)}
.option-details::after{content:"";width:6px;height:6px;margin-right:2px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}

.cpu-symbol{display:grid;place-items:center;width:40px;height:40px;border-radius:5px;border:2px solid #59616a;background:linear-gradient(140deg,#c9d0d6 0%,#8d969f 48%,#5d666f 100%);color:#1a1f24;font:700 11px/1 var(--font-ui);letter-spacing:.06em;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.details-media .cpu-symbol{letter-spacing:.16em}

/* Finish and lighting */
.finishes{margin-bottom:6px}
/* Fan positions are buttons the viewer creates (#fan-slots > button[data-fan]); styled here as on/off toggles. */
#fan-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
#fan-slots button{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-control);background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text-2);font-size:13px;font-weight:500;text-align:left;transition:box-shadow var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out),transform var(--t-press) var(--ease-out)}
#fan-slots button::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-3);transition:background-color var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out)}
#fan-slots button[aria-pressed=true]{color:var(--text-1);box-shadow:inset 0 0 0 1.5px var(--select)}
#fan-slots button[aria-pressed=true]::before{background:var(--select);box-shadow:none}
.finish-tile{grid-template-columns:28px minmax(0,1fr) 18px;min-height:60px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.022);box-shadow:inset 0 0 0 1px var(--line-1)}
.finish-tile .tick{position:relative;top:auto;left:auto;box-shadow:none}
.finish-chip{flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.finish-chip.black{background:linear-gradient(145deg,#3a3f45,#16191c)}
.finish-chip.white{background:linear-gradient(145deg,#f4f5f3,#c9ccc8)}
.lighting{display:block;margin-top:16px}
.lighting .group-label{margin-bottom:12px}
.light-name{margin-left:6px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-1)}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatches button{width:32px;height:32px;padding:0;border:3px solid var(--bg-2);border-radius:50%;box-shadow:0 0 0 1px var(--line-3);transition:box-shadow var(--t-ui) var(--ease-out),transform var(--t-press) var(--ease-out)}
.swatches button[aria-pressed=true]{box-shadow:0 0 0 2px var(--select)}
.swatches .off{background:linear-gradient(135deg,#2a2f35 46%,#59616a 47% 53%,#2a2f35 54%)}
.swatches .white{background:#e4e8ec}.swatches .red{background:#d0414b}.swatches .cyan{background:#36dfff}.swatches .violet{background:#bd6aff}.swatches .warm{background:#ffd19a}

/* Preview settings: they change the view, not the build. */
.preview-controls,.inside{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-1)}
.preview-controls h3,.inside h3{font:600 15px/1.3 var(--font-display);letter-spacing:-.01em}
.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.preview-controls .setting:first-of-type{margin-top:8px}
.setting label,.setting-label{font-size:13.5px;color:var(--text-1)}
/* 50x32 hit area around a 46x26 track. */
.switch{position:relative;flex:none;width:50px;height:32px;padding:0;border:0;border-radius:999px;background:none}
.switch::before{content:"";position:absolute;inset:3px 2px;border-radius:999px;background:var(--line-3);transition:background-color var(--t-ui) var(--ease-out)}
.switch>span{position:absolute;top:6px;left:5px;width:20px;height:20px;border-radius:50%;background:var(--text-1);transition:transform var(--t-ui) var(--ease-out),background-color var(--t-ui) var(--ease-out)}
.switch[aria-checked=true]::before{background:var(--select)}
.switch[aria-checked=true]>span{transform:translateX(20px);background:var(--bg-0)}
#lcd-note,#motion-note{display:block;font-size:12px;line-height:1.5;color:var(--text-3)}
#lcd-note{margin:-4px 0 6px}
.motion-setting{margin-top:12px}
.motion-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:10px 0 8px;padding:4px;border-radius:12px;background:var(--bg-0);box-shadow:inset 0 0 0 1px var(--line-2)}
.motion-modes button{min-height:36px;border:0;border-radius:8px;background:transparent;color:var(--text-2);font-size:13px;font-weight:500;transition:background-color var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out)}
.motion-modes button[aria-pressed=true]{background:var(--select);color:var(--bg-0)}
.motion-modes button:disabled{cursor:default;opacity:.45}
.motion-modes button[aria-pressed=true]:disabled{opacity:1}
.inside #inside-description{margin-top:8px;font-size:13px;line-height:1.6;color:var(--text-2)}
.disclaimer{margin-top:14px;padding:11px 13px;border-radius:10px;background:var(--bg-2);font-size:12.5px;line-height:1.55;color:var(--text-2)}
.about{margin-top:20px;padding-top:14px;border-top:1px solid var(--line-1)}
.about summary{display:flex;align-items:center;justify-content:space-between;min-height:40px;list-style:none;font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer}
.about summary::-webkit-details-marker{display:none}
.about summary::after{content:"+";font-size:17px;color:var(--text-3)}
.about[open] summary::after{content:"−"}
#build-summary{margin-top:6px;padding:12px 13px;border-radius:10px;background:var(--bg-2);font-size:12.5px;line-height:1.65;color:var(--text-2);white-space:pre-line}
.about-note{margin-top:12px;font-size:12px;line-height:1.55;color:var(--text-3)}
#revision{display:block;margin-top:6px;font-variant-numeric:tabular-nums}
.quiet{background:var(--bg-3)}

/* Footer actions: one primary action, everything else quiet. */
.panel-foot{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:14px 24px max(14px,env(safe-area-inset-bottom));background:var(--bg-1);border-top:1px solid var(--line-1)}
.primary,.secondary{min-height:46px;border:0;border-radius:var(--r-control);font-size:14px;font-weight:600;transition:background-color var(--t-ui) var(--ease-out),transform var(--t-press) var(--ease-out)}
.primary{padding:0 18px;background:var(--accent-fill);color:#fff}
.secondary{padding:0 16px;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text-1);font-weight:500}
.icon-only{width:46px;padding:0;font-size:18px}
.primary:disabled,.secondary:disabled{opacity:.5}
.footnote{grid-column:1/-1;font-size:12px;color:var(--text-3);text-align:center}

/* Details sheet */
.details-sheet{position:fixed;inset:0 0 0 auto;width:min(480px,100%);max-width:100%;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-left:1px solid var(--line-2);background:var(--bg-1);color:var(--text-1);overflow-y:auto;overscroll-behavior:contain;box-shadow:-24px 0 80px rgba(0,0,0,.45)}
.details-sheet[open]{animation:sheet-in var(--t-sheet) var(--ease-drawer)}
.details-sheet.closing{animation:sheet-out var(--t-sheet-out) cubic-bezier(.4,0,1,1) forwards}
.details-sheet::backdrop{background:rgba(8,10,12,.38);animation:fade var(--t-sheet) var(--ease-out)}
.details-sheet.closing::backdrop{animation:fade-out var(--t-sheet-out) linear forwards}
@keyframes sheet-in{from{transform:translateX(100%)}}
@keyframes sheet-out{to{transform:translateX(100%)}}
@keyframes fade{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
.details-head{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 16px;background:var(--bg-1);border-bottom:1px solid var(--line-1)}
.details-head h2{margin-top:6px;font:600 22px/1.2 var(--font-display);letter-spacing:-.02em}
.details-close{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2);font-size:22px;line-height:1;transition:background-color var(--t-ui) var(--ease-out),transform var(--t-press) var(--ease-out)}
.details-body{padding:20px 24px 28px}
.details-media{display:grid;place-items:center;aspect-ratio:16/10;border-radius:12px;background:radial-gradient(ellipse at 50% 46%,#40464e 0%,#2a2f35 62%,#20252a 100%)}
.details-media img{width:100%;height:100%;object-fit:contain}
.details-media .cpu-symbol{width:120px;height:120px;font-size:20px;border-width:5px}
.details-description{margin-top:18px;font-size:15px;line-height:1.65;color:var(--text-1)}
.details-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0 0;padding:0}
.details-specs div{padding:12px 13px;border-radius:10px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-1)}
.details-specs .wide{grid-column:1/-1}
.details-specs dt{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.details-specs dd{margin:4px 0 0;font-size:14px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.details-note{margin-top:16px;padding:2px 0 2px 13px;box-shadow:inset 2px 0 0 var(--line-3);font-size:13px;line-height:1.6;color:var(--text-2)}
.details-source{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:13.5px;font-weight:500;color:var(--text-1);text-underline-offset:3px}
.details-checked{display:block;margin-top:4px;font-size:12px;color:var(--text-3)}
.details-unavailable{margin-top:16px;padding:11px 13px;border-radius:10px;background:var(--bg-3);font-size:13px;color:var(--text-1)}
.details-body .primary{width:100%;margin-top:22px}
.details-body .primary.is-selected{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text-2);opacity:1}
html.sheet-open{overflow:hidden}

/* Interaction feedback: pressed scale, hover only where hover exists. */
button:active:not(:disabled):not([aria-disabled=true]):not(.marker){transform:scale(.97)}
.tile:active:not(:disabled):not([aria-disabled=true]),.row-toggle:active{transform:scale(.985)}
.view-tools button:active:not(:disabled){transform:scale(.95)}
.zoom-tools button:active:not(:disabled){transform:none;background:rgba(255,255,255,.12)}
@media (hover:hover) and (pointer:fine){
  .view-tools button:not(.active):not(:disabled):hover{background:rgba(255,255,255,.08);color:var(--text-1)}
  .zoom-tools button:not(:disabled):hover{background:rgba(255,255,255,.08)}
  .row-toggle:hover .chevron{border-color:var(--text-1)}
  .sheet-row:not(.open):hover{background:var(--bg-3)}
  .option:not(:has(>.tile[aria-pressed=true],>.tile[aria-disabled=true])):hover,.finish-tile:not([aria-pressed=true]):not([aria-disabled=true]):hover{background:rgba(255,255,255,.045)}
  .option-details:hover{color:var(--text-1);background:rgba(255,255,255,.03)}
  .row-actions button:not(:disabled):hover,.row-actions a:hover{color:var(--text-1)}
  .secondary:not(:disabled):hover,.details-close:hover{background:var(--bg-4)}
  .marker:hover .marker-dot,.marker:focus-visible .marker-dot{transform:scale(1.3)}
  .marker-label:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
  .primary:not(:disabled):not(.is-selected):hover{background:var(--accent-fill-hover)}
  .swatches button:not(:disabled):not([aria-pressed=true]):hover{box-shadow:0 0 0 1px var(--text-2)}
  .about summary:hover{color:var(--text-1)}
  #fan-slots button:not([aria-pressed=true]):hover{box-shadow:inset 0 0 0 1px var(--line-3);color:var(--text-1)}
}

/* Width tiers */
@media (min-width:1440px){:root{--panel-w:440px}.panel-scroll{padding:32px 28px}.panel-foot{padding-left:28px;padding-right:28px}.stage-title{top:32px;left:40px}.gesture{left:40px}}
@media (max-width:1279px){.gesture{display:none}}
@media (max-width:1023px){:root{--panel-w:360px}.panel-scroll{padding:24px 18px}.panel-foot{padding-left:18px;padding-right:18px}.stage-title{left:24px;top:22px}.view-tools{max-width:calc(100% - 96px)}.view-tools button{padding:0 10px}}

/* Stacked: phones and portrait tablets. The PC stays pinned on top while the configuration scrolls beneath it. */
@media (max-width:1023px) and (orientation:portrait){ /* phone v2: portrait only; landscape phones keep two columns (below) */
  :root{--head-h:52px;--stage-h:max(46svh,250px)}
  .masthead{gap:14px;padding:0 16px}
  .brand{font-size:19px}
  .masthead-label{padding-left:14px;font-size:11px}
  .studio{display:block;height:auto}
  .stage{position:sticky;top:0;z-index:10;height:var(--stage-h);box-shadow:0 1px 0 var(--line-1),0 10px 30px rgba(0,0,0,.35)}
  .stage-title{top:14px;left:16px;max-width:calc(100% - 160px)}
  .stage-title .eyebrow{display:none}
  .stage-title h1{margin-top:0;font-size:18px}
  .stage-meta{margin-top:2px;font-size:12px}
  .view-tools{left:12px;right:12px;bottom:12px;transform:none;max-width:none;width:auto;justify-content:flex-start;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);padding-right:24px}
  .view-tools button{min-height:36px;padding:0 12px}
  .zoom-tools{right:12px;top:12px;transform:none;flex-direction:row}
  .zoom-tools button{width:38px;height:38px}
  .zoom-tools button+button{box-shadow:inset 1px 0 0 rgba(255,255,255,.08)}
  .gesture{display:none}
  #toast{bottom:64px}
  #loading.transition-loading{padding-bottom:64px}
  .panel{border-left:0}
  .panel-scroll{overflow:visible;padding:22px 16px 8px}
  .panel-head h2{font-size:21px}
  .sheet-row{scroll-margin-top:calc(var(--stage-h) + 12px)}
  .panel-foot{padding:14px 16px max(18px,env(safe-area-inset-bottom))}
  .details-sheet{inset:auto 0 0 0;width:100%;height:auto;max-height:88dvh;border-left:0;border-top:1px solid var(--line-2);border-radius:18px 18px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.5)}
  .details-sheet[open]{animation-name:sheet-up}
  .details-sheet.closing{animation-name:sheet-down}
  .details-head{padding:18px 18px 14px;border-radius:18px 18px 0 0}
  .details-head::before{content:"";position:absolute;top:7px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--line-3)}
  .details-body{padding:16px 18px max(24px,env(safe-area-inset-bottom))}
}
@keyframes sheet-up{from{transform:translateY(100%)}}
@keyframes sheet-down{to{transform:translateY(100%)}}
@media (max-width:720px) and (orientation:portrait){.masthead-tag{display:none}}
@media (max-width:360px){.row-toggle{grid-template-columns:18px minmax(0,1fr) 56px 10px;gap:10px;padding:12px 12px 12px 12px}.row-thumb{width:56px;height:36px}.view-tools button{padding:0 10px;font-size:12.5px}}
@media (min-width:600px) and (max-width:1023px) and (orientation:portrait){.panel-scroll,.panel-foot{max-width:640px;margin:0 auto;width:100%}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .spinner{animation:none!important}
  button:active,.tile:active,.row-toggle:active{transform:none!important}
}

/* Progressive build: quiet graphite scaffolding, selected parts keep authored colours. */
.build-journey{margin-top:18px;padding:14px 16px;border:1px solid #ffffff18;border-radius:12px;background:#ffffff04}
.build-journey strong{font-size:12px;font-weight:600}
.build-journey progress{display:block;width:100%;height:3px;margin:10px 0;accent-color:#b8c7b5;border:0;border-radius:3px;overflow:hidden}
.build-journey progress::-webkit-progress-bar{background:#ffffff14}
.build-journey progress::-webkit-progress-value{background:#b8c7b5;transition:width .25s ease}
.build-journey p{font-size:11px;line-height:1.5;color:#9da3aa;margin:0 0 12px}
.journey-actions{display:flex;gap:8px;flex-wrap:wrap}
.journey-actions button{border:1px solid #ffffff24;background:#ffffff08;color:#e1e4e7;padding:8px 12px;border-radius:7px;font:inherit;font-size:11px;cursor:pointer}
.journey-actions button:first-child{background:#d9dfd7;color:#202521;border-color:transparent}
.journey-actions button:focus-visible{outline:2px solid #c5d3c1;outline-offset:3px}
.journey-actions button:disabled{opacity:.4;cursor:wait}
/* catalog-photos v1 (Claude 2026-10-18): real product photos sit in white wells; Studio renders keep the graphite well. */
.tile-media:has(>img.photo),.row-thumb:has(>img.photo),.details-media:has(>img.photo){background:#fff}
.row-thumb:has(>img.photo){border-radius:6px}
.tile-media>img.photo{border-radius:var(--r-media)}
.row-thumb>img.photo{border-radius:6px}
.details-media>img.photo{border-radius:12px}
.details-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.details-more img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:#fff;border-radius:8px}
.details-credit{display:block;margin-top:2px;font-size:11.5px;line-height:1.4;color:var(--text-3)}

/* showcase v1 (Claude, P1.4/P1.5): Power on and RGB effects */
.power-on{position:absolute;z-index:2;right:20px;top:20px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 12px;border:0;border-radius:999px;background:rgba(19,22,26,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 8px 24px rgba(0,0,0,.28);color:var(--text-1);font-size:13px;font-weight:600;letter-spacing:.01em;transition:box-shadow var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out)}
.power-on svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round}
.power-on:active{transform:scale(.96)}
@media (hover:hover){.power-on:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 0 0 4px rgba(176,127,253,.18),0 8px 24px rgba(0,0,0,.28)}}
.power-on:focus-visible{outline:2px solid var(--select);outline-offset:3px}
.rgb-effect-setting{margin-top:16px}
.rgb-effects{grid-template-columns:repeat(4,1fr)}
.rgb-effect-setting .setting{margin-top:4px}
#rgb-effect-note{display:block;margin-top:6px;color:var(--text-3,var(--text-2));font-size:12px;line-height:1.4}
@media (max-width:720px){.power-on{top:auto;right:auto;left:16px;bottom:76px;width:44px;min-height:44px;padding:0;justify-content:center}.power-on span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* build sheet v1 (Claude, P1.9): print-only A4 sheet */
#build-sheet{display:none}
@media print{
  @page{size:A4;margin:0}
  html,body{margin:0!important;padding:0!important;background:#fff!important;background-image:none!important}
  html::before,html::after,body::before,body::after{display:none!important}
  body>*:not(#build-sheet){display:none!important}
  #build-sheet{display:block;box-sizing:border-box;width:210mm;min-height:296mm;padding:13mm 14mm;background:#fff;color:#15181b;font:10pt/1.45 var(--font-ui)}
  #build-sheet .bs-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #15181b;padding-bottom:8px;margin-bottom:14px}
  #build-sheet .bs-eyebrow{margin:0;font:600 8pt/1.2 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:#6b7280}
  #build-sheet h1{margin:2px 0 0;font:800 22pt/1.1 var(--font-display)}
  #build-sheet .bs-date{margin:0;color:#6b7280}
  #build-sheet .bs-hero{display:grid;grid-template-columns:1fr 42mm;gap:8mm;align-items:center;margin-bottom:8px}
  #build-sheet .bs-shot{width:100%;height:72mm;object-fit:cover;border-radius:6px}
  #build-sheet .bs-qr svg{width:38mm;height:38mm;display:block}
  #build-sheet .bs-qr p{margin:6px 0 0;font-size:8.5pt;color:#374151}
  #build-sheet .bs-parts{width:100%;border-collapse:collapse}
  #build-sheet .bs-parts th,#build-sheet .bs-parts td{padding:3px 6px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:middle}
  #build-sheet .bs-parts thead th{font:600 7.5pt/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:#6b7280}
  #build-sheet .bs-parts tbody th{width:32mm;font-weight:600}
  #build-sheet .bs-img{width:22mm}
  #build-sheet .bs-img img{width:16mm;height:10mm;object-fit:contain;background:#fff}
  #build-sheet .bs-parts td span{color:#4b5563;font-size:8.5pt}
  #build-sheet .bs-power{margin-top:10px}
  #build-sheet .bs-power h2{margin:0 0 2px;font:700 10pt/1.2 var(--font-display)}
  #build-sheet .bs-note{margin-top:10px;font-size:8pt;color:#4b5563}
  #build-sheet .bs-link{font-size:7pt;color:#6b7280;word-break:break-all}
  #build-sheet tr,#build-sheet .bs-hero{break-inside:avoid}
}
/* build sheet v1: the footer holds four actions (Save, Copy link, Build sheet, download) */
.panel-foot{grid-template-columns:minmax(0,1fr) auto auto auto}
#airflow-note{display:block;margin:-4px 0 4px;color:var(--text-3);font-size:12px;line-height:1.4}
/* kiosk v1 (Claude, P1.10): ?kiosk=1 */
.kiosk-phone{display:none}
.kiosk .kiosk-phone{display:inline-flex;align-items:center;position:absolute;z-index:2;left:20px;bottom:24px;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--accent-fill);color:#fff;font-size:14px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.kiosk .gesture,.kiosk #save,.kiosk #copy-link,.kiosk #download,.kiosk #build-sheet-print{display:none}
.kiosk .panel-foot{grid-template-columns:1fr}
.kiosk-qr{border:0;border-radius:18px;padding:28px;background:#fff;color:#15181b;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.kiosk-qr::backdrop{background:rgba(8,10,12,.72)}
.kiosk-qr svg{width:min(60vmin,320px);height:auto;display:block;margin:0 auto}
.kiosk-qr p{margin:14px 0 16px;font-size:16px}
.kiosk-qr button{min-height:44px;padding:0 22px;border:0;border-radius:999px;background:#15181b;color:#fff;font-weight:600}
/* clips v1 (Claude, P1.8) */
.clip-setting{margin-top:12px}
.clip-formats{grid-template-columns:repeat(2,1fr)}
#clip-status{display:block;color:var(--text-3);font-size:12px;line-height:1.4}
@media (max-width:720px),(max-height:500px) and (orientation:landscape){.panel-foot{grid-template-columns:1fr 1fr auto}.panel-foot #save{grid-column:1/-1}} /* phone v2.1: Save build on its own row on landscape phones too (Claude-2's task 33) */
/* a11y (Claude, P1.11): 44 px touch targets for the power-panel disclosures (Lighthouse target-size) */
#power-planning summary{display:flex;align-items:center;min-height:44px;cursor:pointer}
/* shop v1 (Claude, C1): the shop's call to action takes the first full row of the panel footer; its note shows only when set */
.panel-foot .shop-cta{grid-column:1/-1;min-height:48px}
.shop-cta-note{grid-column:1/-1;margin:0;font-size:12px;line-height:1.4;color:var(--text-2)}
.shop-cta-note:empty{display:none}
/* chooser v1 (Claude, B2 + B7): spacious per-category chooser with side-by-side comparison, studio/chooser/chooser.mjs.
   Selected cards use the light-neutral ring (never colour); rows that differ in the comparison get a thin accent bar. */
.chooser{width:min(1120px,94vw);height:min(780px,90dvh);max-width:none;max-height:none;margin:auto;padding:0;border:0;border-radius:18px;background:var(--bg-1);color:var(--text-1);box-shadow:0 0 0 1px var(--line-2),0 30px 80px rgba(0,0,0,.5);overflow:hidden}
.chooser[open]{display:flex;flex-direction:column;animation:reveal var(--t-sheet) var(--ease-out)}
.chooser::backdrop{background:rgba(8,10,12,.55);animation:fade var(--t-sheet) var(--ease-out)}
.chooser-head{display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line-1)}
.chooser-head>div{flex:1;min-width:0}
.chooser-kicker{margin:0 0 2px;color:var(--text-3);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.chooser-head h2{margin:0;font:700 22px/1.2 var(--font-display);letter-spacing:-.02em}
.chooser-search{width:min(280px,40vw);min-height:44px;padding:0 14px;border:0;border-radius:var(--r-control);background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text-1);font:inherit}
.chooser-close{width:44px;height:44px;border:0;border-radius:50%;background:var(--bg-3);color:var(--text-1);font-size:24px;line-height:1}
.chooser-close:hover{background:var(--bg-4)}
.chooser-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:24px}
.chooser-grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.chooser-card{display:flex;flex-direction:column;border-radius:var(--r-row);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-1);overflow:hidden;transition:box-shadow var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out)}
@media (hover:hover){.chooser-card:hover{box-shadow:inset 0 0 0 1px var(--line-3);transform:translateY(-2px)}}
.chooser-card.is-selected{outline:2px solid var(--select);outline-offset:-2px}
.chooser-card.is-unavailable{opacity:.62}
.chooser-media{aspect-ratio:16/10;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 30%,var(--bg-4),var(--bg-2))}
.chooser-media img{width:100%;height:100%;object-fit:contain;padding:10px}
.chooser-copy{flex:1;padding:14px 16px 6px}
.chooser-brand{margin:0;color:var(--text-3);font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.chooser-copy h3{margin:2px 0 4px;font:700 17px/1.25 var(--font-display);letter-spacing:-.01em}
.chooser-meta{margin:0 0 10px;color:var(--text-2);font-size:13px}
.chooser-specs{display:grid;gap:4px;margin:0;font-size:13px}
.chooser-specs div{display:flex;justify-content:space-between;gap:12px;padding-top:4px;border-top:1px solid var(--line-1)}
.chooser-specs dt{color:var(--text-3)}.chooser-specs dd{margin:0;text-align:right;color:var(--text-1);overflow-wrap:anywhere}
.chooser-unavailable{margin:10px 0 0;color:var(--text-2);font-size:12px}
.chooser-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px 16px}
.chooser-actions .primary,.chooser-actions .secondary{min-height:44px;font-size:13px}
.chooser-actions .is-selected{color:var(--text-2)}
.chooser-pick{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:auto;color:var(--text-2);font-size:13px;cursor:pointer}
.chooser-pick input{width:18px;height:18px;accent-color:var(--select)}
.chooser-empty{color:var(--text-2)}
.chooser-compare{margin-top:28px;padding-top:20px;border-top:1px solid var(--line-1)}
.chooser-compare h3{margin:0 0 12px;font:700 18px/1.2 var(--font-display)}
.chooser-table{width:100%;border-collapse:collapse;font-size:14px}
.chooser-table th,.chooser-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line-1);vertical-align:top}
.chooser-table thead th{color:var(--text-1);font-family:var(--font-display);font-weight:700}
.chooser-table tbody th{color:var(--text-3);font-weight:500;width:28%}
.chooser-table tr.differs th{box-shadow:inset 3px 0 0 var(--accent)}
.chooser-table tr.differs td{color:var(--text-1);font-weight:600}
.chooser-compare-note{margin:10px 0 0;color:var(--text-3);font-size:12px}
.chooser :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:720px){
  .chooser{width:100%;height:100dvh;border-radius:0}
  .chooser-head{flex-wrap:wrap;padding:14px 16px}.chooser-search{order:3;width:100%}
  .chooser-scroll{padding:16px}
  .chooser-grid{grid-template-columns:1fr;gap:12px}
  .chooser-card{display:grid;grid-template-columns:120px minmax(0,1fr)}
  .chooser-media{aspect-ratio:auto;grid-row:span 2}
  .chooser-actions{grid-column:1/-1;padding-top:0}
  .chooser-compare{overflow-x:auto}.chooser-table{min-width:520px}
}
@media (prefers-reduced-motion:reduce){.chooser[open],.chooser::backdrop{animation:none}.chooser-card{transition:none}}
/* quickstart v1 (Claude, B1): optional starting point; the grey draft stays unless the customer starts from the suggestion */
.quickstart-open{display:block;margin-top:8px;min-height:44px;padding:0;border:0;background:none;color:var(--text-1);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:4px;cursor:pointer}
.quickstart-open:hover{text-decoration-color:var(--text-1)}
.chooser.quickstart{width:min(640px,94vw);height:auto;max-height:90dvh}
.quickstart-form{display:grid;gap:18px}
.quickstart-question{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}
.quickstart-question legend{margin-bottom:8px;padding:0;font:700 15px/1.3 var(--font-display)}
.quickstart-option{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2);font-size:14px;cursor:pointer;transition:box-shadow var(--t-ui) var(--ease-out)}
.quickstart-option input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.quickstart-option:has(input:checked){background:var(--select);color:var(--bg-0);box-shadow:none}
.quickstart-option:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.quickstart-form .primary{justify-self:start}
.quickstart-note{margin:0;color:var(--text-3);font-size:13px}
.quickstart-result{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-1)}
.quickstart-result h3{margin:0 0 6px;font:700 18px/1.2 var(--font-display)}
.quickstart-result>p{margin:0 0 12px;color:var(--text-2)}
.quickstart-parts{display:grid;gap:0;margin:0 0 12px;padding:0;list-style:none}
.quickstart-parts li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line-1);font-size:14px}
.quickstart-parts span{color:var(--text-3)}.quickstart-parts strong{text-align:right;font-weight:600}
.quickstart-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
/* fit v1 (Claude, B3): labels for the 3D fit dimensions; red only when a part is over the case's published limit */
.fit-layer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fit-label{position:absolute;left:0;top:0;padding:5px 9px;border-radius:7px;background:rgba(17,19,22,.88);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text-1);font:600 12px/1.3 var(--font-ui);white-space:nowrap;will-change:transform}
.fit-label.is-over{background:var(--accent-fill);box-shadow:none;color:#fff}
.fit-label.is-unknown{color:var(--text-2)}
/* assemble v1 (Claude, A3): "Watch it build" sits under Power on (desktop) and beside it (mobile icon row) */
.build-it{top:68px}
.build-it:disabled{opacity:.55}
@media (max-width:720px){.build-it{top:auto;left:68px}}
/* pick v1 (Claude): the card for a part tapped in 3D, near the tap point */
.pick-card{position:absolute;z-index:3;min-width:220px;max-width:280px;padding:12px;border-radius:12px;background:rgba(22,25,29,.94);box-shadow:inset 0 0 0 1px var(--line-2),0 12px 32px rgba(0,0,0,.4);backdrop-filter:blur(8px);animation:reveal var(--t-ui) var(--ease-out)}
.pick-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.pick-head strong{display:block;font:700 15px/1.25 var(--font-display)}
.pick-label{display:block;color:var(--text-3);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.pick-close{flex:none;width:32px;height:32px;margin:-4px -4px 0 0;border:0;border-radius:50%;background:var(--bg-3);color:var(--text-1);font-size:18px;line-height:1}
.pick-card .primary{width:100%;min-height:40px;font-size:13px}
@media (prefers-reduced-motion:reduce){.pick-card{animation:none}}
/* tour v1 (Claude): the guided tour's card, bottom-left of the stage above the camera views */
.tour-card{position:absolute;z-index:3;left:24px;bottom:84px;width:min(380px,calc(100% - 48px));padding:16px 18px;border-radius:14px;background:rgba(22,25,29,.94);box-shadow:inset 0 0 0 1px var(--line-2),0 16px 40px rgba(0,0,0,.45);backdrop-filter:blur(8px);animation:reveal var(--t-ui) var(--ease-out)}
.tour-head{display:flex;gap:10px;align-items:baseline;margin-right:36px;color:var(--text-3);font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.tour-count{color:var(--text-2);font-variant-numeric:tabular-nums}
.tour-card h3{margin:4px 0 2px;font:700 19px/1.25 var(--font-display);letter-spacing:-.01em}
.tour-spec{margin:0;color:var(--text-2);font-size:13px}
.tour-about{margin:8px 0 0;color:var(--text-1);font-size:14px;line-height:1.45}
.tour-nav{display:flex;gap:8px;margin-top:14px}.tour-nav .primary,.tour-nav .secondary{min-height:42px;font-size:13px}
.tour-end{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:var(--bg-3);color:var(--text-1);font-size:20px;line-height:1}
@media (max-width:720px){.tour-card{left:12px;right:12px;width:auto;bottom:64px;padding:14px}}
@media (prefers-reduced-motion:reduce){.tour-card{animation:none}}
/* poster v1 (Claude, 2026-10-19): the opening pose as a 4 KB WebP while the 3D loads; the 3D lands on it, then it fades. */
#stage-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:4;pointer-events:none;transition:opacity .45s ease}
#stage-poster.gone{opacity:0}
.has-poster #loading{background:linear-gradient(to top,rgba(17,19,22,.7),rgba(17,19,22,0) 30%);justify-content:flex-end;padding-bottom:28px;gap:2px}
.has-poster #loading .spinner{display:none}
.has-poster #loading strong{font-size:13px} /* small, but an error message still shows here */
@media (max-width:720px){.has-poster #loading{padding-bottom:14px}}
@media (prefers-reduced-motion:reduce){#stage-poster{transition:none}}

/* phone v2 (Claude, 2026-10-20): Claude-2's phone pass (docs/arui_studio_phone.md, defects 1-9; 10 is in viewer.mjs) */
/* 2: the poster fills the canvas by height, as the camera's vertical field of view does; the sides show the stage */
#stage-poster{left:50%;right:auto;width:auto;max-width:none;transform:translateX(-50%)}
@media (max-width:1023px) and (orientation:portrait){
  .panel-bar{padding:12px 16px} /* parts-ux B4 */
  /* 3: the camera-views bar sits in its own strip under the canvas, not over the PC */
  .stage{height:calc(var(--stage-h) + 56px)}
  #viewport{bottom:56px}
  #stage-poster{height:calc(100% - 56px)}
  .sheet-row{scroll-margin-top:calc(var(--stage-h) + 68px)}
  /* 1: the tour card is a bottom sheet over the panel, so the PC it describes stays in view */
  .tour-card{position:fixed;left:0;right:0;bottom:0;width:auto;padding:16px 16px max(14px,env(safe-area-inset-bottom));border-radius:18px 18px 0 0;box-shadow:inset 0 1px 0 var(--line-2),0 -20px 60px rgba(0,0,0,.5);animation-name:sheet-up}
}
/* 7: the guided tour and the exploded view come first in the bar, on every phone (v2.1: landscape too) */
@media (max-width:1023px) and (orientation:portrait),(max-height:500px) and (orientation:landscape){
  .view-tools [data-special=tour]{order:-2}
  .view-tools [data-special=exploded]{order:-1}
  .view-tools [data-special]{margin-left:0;margin-right:7px}
  .view-tools [data-special]::before{left:auto;right:-5px}
}
/* 4, 5, 6: landscape phones keep two columns with a narrower panel, the phone overlay positions and the notch insets */
@media (max-height:500px) and (orientation:landscape){
  :root{--panel-w:300px;--head-h:44px}
  .panel-scroll{padding:18px max(14px,env(safe-area-inset-right)) 8px 14px}
  .panel-foot{padding-left:14px;padding-right:max(14px,env(safe-area-inset-right))}
  .stage-title{top:12px;left:max(16px,env(safe-area-inset-left));max-width:calc(100% - 140px)}
  .stage-title .eyebrow{display:none}
  .stage-title h1{margin-top:0;font-size:18px}
  .stage-meta{margin-top:2px;font-size:12px}
  .gesture{display:none}
  /* 3 (v2.1): the views bar gets its own strip under the canvas here too (it covered 16-19% of the PC) */
  #viewport{bottom:52px}
  #stage-poster{height:calc(100% - 52px)}
  .power-on{top:auto;right:auto;left:max(16px,env(safe-area-inset-left));bottom:62px;width:44px;min-height:44px;padding:0;justify-content:center}
  .power-on span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .build-it{top:auto;left:calc(max(16px,env(safe-area-inset-left)) + 52px)}
  .zoom-tools{right:12px;top:12px;transform:none;flex-direction:row}
  .zoom-tools button+button{box-shadow:inset 1px 0 0 rgba(255,255,255,.08)}
  .view-tools{left:max(12px,env(safe-area-inset-left));right:12px;bottom:4px;transform:none;max-width:none;width:auto;justify-content:flex-start;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);padding-right:24px}
  #toast{bottom:64px}
  /* the whole panel scrolls, so the Save / Copy link / Sheet block follows the options instead of filling the short column */
  .panel{overflow-y:auto;overscroll-behavior:contain}
  .panel-scroll{flex:none;overflow:visible}
  /* 1: the tour card docks over the panel column */
  .tour-card{position:fixed;left:auto;right:0;bottom:0;width:var(--panel-w);padding:14px max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) 14px;border-radius:18px 18px 0 0;animation-name:sheet-up}
}
/* 8: tap targets of at least 44 px on touch screens; hit areas grow where the look must stay */
@media (pointer:coarse){
  .part-search input{min-height:40px;font-size:16px} /* parts-ux B4; 16 px: no zoom on focus in iOS */
  .options:not(.finishes) .option-details{width:32px;height:32px;top:13px;right:13px} /* parts-ux B2 */
  .chip{min-height:36px;padding:0 13px} /* parts-ux B3 */
  .view-tools button{position:relative}
  .view-tools button::after{content:"";position:absolute;inset:-4px 0}
  .zoom-tools button{width:44px;height:44px}
  .switch::after{content:"";position:absolute;inset:-6px 0}
  .motion-modes button,.journey-actions button,.row-actions button,.row-actions a,.about summary{min-height:44px}
  .tour-end,.pick-close{width:44px;height:44px}
  .brand{display:inline-block;padding:13px 0;margin:-13px 0}
}
/* 9: no text under 12 px on phones */
@media (max-width:1023px) and (orientation:portrait),(max-height:500px) and (orientation:landscape){
  .row-index,.row-label,.eyebrow,.masthead-label,.build-journey p,.journey-actions button,#fit-note{font-size:12px}
}

/* parts-ux B1+B2 (Claude-1, 2026-10-25; owner: a wider parts panel on demand, about 40-45 %, and two parts per row).
   "Wide view" (in .panel-bar, outside the scroll) toggles :root.parts-wide on two-column layouts only; the viewer's ResizeObserver refits the 3D. No width
   animation. Part cards stack image over text; two per row, three or four when the row body is wide (container query). */
.panel-bar{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 24px;border-bottom:1px solid var(--line-1)}
@media (min-width:1440px){.panel-bar{padding-left:28px;padding-right:28px}}
@media (max-width:1023px){.panel-bar{padding-left:18px;padding-right:18px}}
.panel-wide{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 12px 0 10px;border:0;border-radius:999px;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text-2);font:500 12px/1 var(--font-ui);transition:color var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out)}
.panel-wide svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.panel-wide[aria-pressed=true]{color:var(--text-1);box-shadow:inset 0 0 0 1.5px var(--select)}
@media (hover:hover){.panel-wide:hover{color:var(--text-1);box-shadow:inset 0 0 0 1px var(--line-3)}.panel-wide[aria-pressed=true]:hover{box-shadow:inset 0 0 0 1.5px var(--select)}}
@media (min-width:1024px) and (min-height:501px),(orientation:landscape) and (min-height:501px){:root.parts-wide{--panel-w:43vw}}
@media (max-width:1023px) and (orientation:portrait),(max-height:500px){.panel-wide{display:none}}
.row-body{container-type:inline-size}
.options:not(.finishes){grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:460px){.options:not(.finishes){grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:680px){.options:not(.finishes){grid-template-columns:repeat(4,minmax(0,1fr))}}
.options:not(.finishes)>.option{position:relative}
.options:not(.finishes) .tile{grid-template-columns:minmax(0,1fr);align-content:start;gap:8px;flex:1;min-height:0;padding:10px 10px 11px;border-radius:12px}
.options:not(.finishes) .tile-copy strong{font-size:14px}
.options:not(.finishes) .tile-copy small{margin-top:3px;font-size:12px;line-height:1.45}
.options:not(.finishes) .tile[aria-disabled=true]::after{grid-column:1;margin-top:-4px}
.options:not(.finishes) .option-details{position:absolute;top:15px;right:15px;justify-content:center;width:28px;height:28px;min-height:0;padding:0;border:0;border-radius:50%;background:rgba(17,19,22,.68);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--text-1);font-size:0}
.options:not(.finishes) .option-details::after{content:"i";width:auto;height:auto;margin:0;border:0;transform:none;font:600 13px/1 var(--font-display)}
@media (hover:hover){.options:not(.finishes) .option-details:hover{background:rgba(17,19,22,.9);color:#fff}}

/* parts-ux B3 (Claude-1, 2026-10-25): quiet group headings (small caps + hairline) and one wrapping row of filter chips */
.options-head{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:10px 2px 0;font:600 11px/1.3 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.options-head::after{content:"";flex:1;height:1px;background:var(--line-1)}
.options-head:first-child,.options-head[hidden]+.options-head{margin-top:0}
.option[data-filtered]{display:none}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:2px 0 10px}
.chip-set{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 11px;border:0;border-radius:999px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text-2);font:500 12px/1 var(--font-ui);white-space:nowrap;transition:color var(--t-ui) var(--ease-out),background-color var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out)}
.chip small{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.chip[aria-pressed=true]{background:var(--select);color:var(--bg-0);box-shadow:none}
.chip[aria-pressed=true] small{color:inherit;opacity:.65}
@media (hover:hover){.chip:not([aria-pressed=true]):hover{color:var(--text-1);box-shadow:inset 0 0 0 1px var(--line-3)}}
.chip:disabled{opacity:.4;cursor:default}
@media (max-width:720px){.chips,.chip-set{flex-wrap:nowrap}.chips{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}.chips::-webkit-scrollbar{display:none}} /* phones: one line that scrolls */

/* parts-ux B4 (Claude-1, 2026-10-25): "Find a part" in the panel bar; results grouped by section in a popover under the bar */
.panel-bar{position:relative;z-index:6}
.part-search{flex:1;min-width:0;display:flex;align-items:center}
.part-search>svg{position:absolute;margin-left:11px;fill:none;stroke:var(--text-3);stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.part-search input{width:100%;min-height:32px;padding:0 12px 0 33px;border:0;border-radius:999px;background:var(--bg-0);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text-1);font:500 13.5px/1 var(--font-ui);transition:box-shadow var(--t-ui) var(--ease-out)}
.part-search input::placeholder{color:var(--text-3)}
.part-search input:focus{box-shadow:inset 0 0 0 1px var(--line-3)}
.part-pop{position:absolute;left:12px;right:12px;top:calc(100% - 2px);max-height:min(62vh,520px);overflow-y:auto;overscroll-behavior:contain;padding:6px;border-radius:14px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2),0 22px 48px rgba(0,0,0,.5);scrollbar-width:thin}
.part-pop ul{margin:0;padding:0;list-style:none}
.part-group{display:flex;align-items:center;gap:10px;padding:10px 10px 5px;font:600 10.5px/1.3 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.part-group::after{content:"";flex:1;height:1px;background:var(--line-1)}
.part-option{display:grid;gap:2px;padding:8px 10px;border-radius:9px;cursor:pointer}
.part-option[aria-selected=true]{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.part-brand{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.part-option b{font-size:13.5px;font-weight:600;color:var(--text-1)}
.part-option small{font-size:12px;color:var(--text-2)}
.part-note{margin:0;padding:8px 10px;font-size:13px;line-height:1.5;color:var(--text-2)}
.part-note:has(>.part-count){padding:0}
.part-count{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.part-link{padding:0;border:0;background:none;color:var(--text-1);font:600 13px/1.5 var(--font-ui);text-decoration:underline;text-underline-offset:3px}
.option.found{animation:part-found 1.6s var(--ease-out)}
@keyframes part-found{0%,45%{box-shadow:inset 0 0 0 2px var(--select),0 0 0 5px rgba(255,255,255,.07)}}
@media (hover:hover){.part-option:hover{background:var(--bg-3)}}
@media (prefers-reduced-motion:reduce){.option.found{animation:none;box-shadow:inset 0 0 0 2px var(--select)}}
.option.brand-in-head .tile-brand{display:none} /* parts-ux B3: named by the heading above */

/* ARUI brand (2026-11-04): the masthead logo is an image; a shop with brand.name replaces it with its own name.
   The "3D Studio" label takes a light tint of whichever accent the shop has. */
.brand img{display:block;height:23px;width:auto}
.masthead-label{color:color-mix(in srgb,var(--accent) 62%,#fff)}
@media (max-width:719px){.brand img{height:19px}}