/* self-hosted fonts (SIL Open Font License) */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/chakra-petch-1-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/chakra-petch-2-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/chakra-petch-3-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/chakra-petch-4-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/chakra-petch-5-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/chakra-petch-6-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/chakra-petch-7-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/chakra-petch-8-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-1-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-2-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/jetbrains-mono-1-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/jetbrains-mono-2-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/silkscreen-1-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/silkscreen-2-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/silkscreen-3-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/silkscreen-4-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* base reset */
html,body{margin:0}
:root{padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
img{max-width:100%}

/* Layout: sticky 3D stage on the left, scrolling build sheet on the right.
   One accent system only: the LED-wall sweep red -> magenta -> violet -> blue. Single dark look by design. */
:root{
  color-scheme: dark;
  --bg:#06050a; --bg-2:#0c0a13; --panel:#100e19; --panel-2:#171424; --panel-3:#1f1b30;
  --line:#2a2540; --line-2:#40385f;
  --fg:#f5f2ff; --fg-2:#bcb5d6; --fg-3:#8179a0;
  --red:#ff2140; --mag:#ff22b4; --vio:#9340ff; --blu:#3a4dff; --cy:#27e4ff;
  --grad:linear-gradient(90deg,var(--red),var(--mag) 46%,var(--vio) 72%,var(--blu));
  --ok:#3dffa2; --warn:#ffc53d; --bad:#ff5a78;
  --amd:#ff4336; --intel:#2fb1ff; --nvidia:#8fe815;
  --f-display:'Silkscreen','Courier New',monospace;
  --f-ui:'Chakra Petch','Segoe UI',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --hdr-h:60px;
  --gut-l:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 8px)}
body{background:var(--bg); color:var(--fg); font-family:var(--f-ui); font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:60; background:var(--bg)}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--cy); outline-offset:2px}
.px{font-family:var(--f-display); letter-spacing:.02em}

/* ---------- header ---------- */
.hdr{position:sticky; top:env(safe-area-inset-top, 0px); z-index:50; background:rgba(6,5,10,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.hdr::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--grad)}
.hdr-in{height:var(--hdr-h); display:flex; align-items:center; gap:24px; padding-left:var(--gut-l); padding-right:var(--gut-r)}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--f-display); font-weight:700; font-size:22px; letter-spacing:.04em; transform:skewX(-10deg)}
.logo-mark{width:26px; height:18px; background:
  linear-gradient(var(--red),var(--red)) 0 0/14px 4px no-repeat,
  linear-gradient(var(--mag),var(--mag)) 6px 7px/20px 4px no-repeat,
  linear-gradient(var(--blu),var(--blu)) 0 14px/10px 4px no-repeat}
.logo b{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav{display:flex; gap:4px; margin-left:8px}
.nav a{padding:8px 12px; text-decoration:none; color:var(--fg-2); font-weight:600; font-size:14px; letter-spacing:.06em; text-transform:uppercase; border-bottom:2px solid transparent}
.nav a:hover{color:var(--fg)}
.nav a.is-active{color:var(--fg); border-bottom-color:var(--mag)}
.cart-btn{margin-left:auto; display:flex; align-items:center; gap:10px; padding:8px 14px; background:var(--panel-2); border:1px solid var(--line-2); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:13px; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.cart-btn:hover{border-color:var(--mag); background:var(--panel-3)}
.cart-count{min-width:22px; padding:1px 6px; text-align:center; background:var(--grad); color:#fff; font-family:var(--f-mono); font-size:12px; font-weight:600}

/* ---------- configurator grid ---------- */
.cfg{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(380px,.95fr); align-items:start}
.stage{position:sticky; top:calc(var(--hdr-h) + env(safe-area-inset-top, 0px)); height:calc(100dvh - var(--hdr-h) - env(safe-area-inset-top, 0px)); min-height:420px; overflow:hidden; background:radial-gradient(120% 90% at 30% 40%, #2a0a2c 0%, #12081f 45%, var(--bg) 100%); border-right:1px solid var(--line)}
#gl{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab}
#gl:active{cursor:grabbing}
.stage-top{position:absolute; top:14px; left:var(--gut-l); right:16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; pointer-events:none}
.tag{display:inline-flex; align-items:center; gap:7px; padding:4px 10px; font-family:var(--f-display); font-size:11px; letter-spacing:.06em; text-transform:uppercase; background:rgba(6,5,10,.72); border:1px solid var(--line-2)}
.tag-live i{width:7px; height:7px; background:var(--red); box-shadow:0 0 8px var(--red)}
.stage-focus{padding:4px 10px; font-size:13px; font-weight:600; letter-spacing:.04em; background:rgba(6,5,10,.72); border:1px solid var(--line-2); color:var(--fg-2)}
.stage-focus b{color:var(--fg); font-weight:600}
.stage-msg{position:absolute; inset:0; display:grid; place-items:center; padding:24px; text-align:center; color:var(--fg-2); font-family:var(--f-display); font-size:13px; letter-spacing:.06em; pointer-events:none}
.stage-tools{position:absolute; left:var(--gut-l); right:16px; bottom:14px; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.stage-tools button{padding:7px 11px; font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; background:rgba(8,7,14,.78); border:1px solid var(--line-2); color:var(--fg-2); backdrop-filter:blur(6px)}
.stage-tools button:hover{color:var(--fg); border-color:var(--fg-3)}
.stage-tools button[aria-pressed="true"]{color:#fff; border-color:var(--mag); box-shadow:inset 0 -2px 0 var(--mag)}
.stage-tools .sep{width:1px; height:22px; background:var(--line-2); margin:0 4px}
.stage-hint{position:absolute; right:16px; top:14px; margin:0; font-family:var(--f-mono); font-size:11px; color:var(--fg-3); background:rgba(6,5,10,.6); padding:4px 8px; pointer-events:none}

/* ---------- build sheet ---------- */
.panel{min-width:0; display:flex; flex-direction:column; gap:18px; padding:22px var(--gut-r) 0 22px; background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px), var(--bg-2)}
.crumbs{font-family:var(--f-mono); font-size:11px; color:var(--fg-3); letter-spacing:.04em}
.crumbs b{color:var(--fg-2); font-weight:400}
.title{margin:0; display:flex; flex-direction:column; gap:6px; line-height:1}
.title .eyebrow{font-family:var(--f-display); font-size:12px; letter-spacing:.1em; color:var(--mag); text-transform:uppercase}
.title .name{font-family:var(--f-display); font-weight:700; font-size:clamp(26px,2.6vw,36px); letter-spacing:.01em; transform:skewX(-8deg); transform-origin:left; text-wrap:balance}
.lede{margin:0; color:var(--fg-2); max-width:58ch}
.dashes{height:6px; background:
  linear-gradient(var(--red),var(--red)) 0 0/38px 3px no-repeat,
  linear-gradient(var(--mag),var(--mag)) 46px 0/90px 3px no-repeat,
  linear-gradient(var(--vio),var(--vio)) 144px 0/14px 3px no-repeat,
  linear-gradient(var(--blu),var(--blu)) 166px 0/54px 3px no-repeat}
.presets{display:flex; flex-wrap:wrap; gap:8px}
.presets-label{width:100%; font-family:var(--f-mono); font-size:11px; color:var(--fg-3); letter-spacing:.06em; text-transform:uppercase}
.chip{padding:6px 12px; background:var(--panel); border:1px solid var(--line-2); font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--fg-2)}
.chip:hover{color:var(--fg); border-color:var(--fg-3)}
.chip[aria-pressed="true"]{color:#fff; border-color:var(--mag); background:linear-gradient(90deg,rgba(255,33,64,.22),rgba(58,77,255,.22))}

.acc{display:flex; flex-direction:column; gap:8px}
.sec{background:var(--panel); border:1px solid var(--line); min-width:0}
.sec.is-open{border-color:var(--line-2)}
.sec-h{width:100%; display:grid; grid-template-columns:34px minmax(0,1fr) auto 14px; align-items:center; gap:10px; padding:11px 12px; background:none; border:0; text-align:left}
.sec-h:hover{background:var(--panel-2)}
.sec-ico{width:34px; height:34px; display:grid; place-items:center; background:var(--panel-3); color:var(--fg-2)}
.sec.is-open .sec-ico{background:var(--grad); color:#fff}
.sec-ico svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:square}
.sec-t{min-width:0; display:flex; flex-direction:column; gap:1px}
.sec-cat{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3)}
.sec-sel{font-weight:600; overflow-wrap:anywhere}
.sec-price{font-family:var(--f-mono); font-size:13px; color:var(--fg-2); white-space:nowrap; font-variant-numeric:tabular-nums}
.sec-caret{width:8px; height:8px; border-right:2px solid var(--fg-3); border-bottom:2px solid var(--fg-3); transform:rotate(45deg); transition:transform .15s}
.sec.is-open .sec-caret{transform:rotate(225deg)}
.sec-b{padding:4px 12px 12px; display:flex; flex-direction:column; gap:6px}
.sec-tools{display:flex; flex-wrap:wrap; gap:6px; padding:4px 0 6px}
.seg{padding:4px 10px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:none; border:1px solid var(--line-2); color:var(--fg-3)}
.seg:hover{color:var(--fg)}
.seg[aria-pressed="true"]{color:#fff; border-color:var(--fg-2); background:var(--panel-3)}
.sec-note{margin:0; font-size:12px; color:var(--fg-3)}

.opt{position:relative; display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 10px; background:var(--bg-2); border:1px solid var(--line); cursor:pointer}
.opt:hover{border-color:var(--line-2); background:var(--panel-2)}
.opt input{position:absolute; opacity:0; pointer-events:none}
.opt-dot{width:14px; height:14px; border:2px solid var(--fg-3); display:block}
.opt.is-sel{border-color:transparent; background:linear-gradient(var(--panel-2),var(--panel-2)) padding-box, var(--grad) border-box; box-shadow:0 0 18px -6px var(--mag)}
.opt.is-sel .opt-dot{border-color:#fff; background:var(--grad); box-shadow:inset 0 0 0 2px var(--panel-2)}
.opt:has(input:focus-visible){outline:2px solid var(--cy); outline-offset:2px}
.opt-main{min-width:0; display:flex; flex-direction:column; gap:2px}
.opt-name{font-weight:600; overflow-wrap:anywhere}
.opt-specs{font-family:var(--f-mono); font-size:11.5px; color:var(--fg-3); overflow-wrap:anywhere}
.opt-price{font-family:var(--f-mono); font-size:12.5px; white-space:nowrap; color:var(--fg-2); font-variant-numeric:tabular-nums; text-align:right}
.opt-price.up{color:var(--fg)} .opt-price.down{color:var(--ok)}
.opt.is-off{cursor:not-allowed; opacity:.55}
.opt.is-off:hover{border-color:var(--line); background:var(--bg-2)}
.opt-why{font-size:11.5px; color:var(--warn)}
.brand{display:inline-block; margin-right:6px; padding:0 5px; font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.06em; vertical-align:2px; border:1px solid currentColor}
.brand.amd{color:var(--amd)} .brand.intel{color:var(--intel)} .brand.nvidia{color:var(--nvidia)}
.swatch{display:inline-block; width:38px; height:8px; margin-right:8px; vertical-align:1px}

.service{display:flex; gap:12px; align-items:flex-start; padding:12px; background:var(--panel); border:1px solid var(--line)}
.service input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--mag)}
.service label{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; cursor:pointer}
.service b{font-weight:600}
.service span{font-size:12.5px; color:var(--fg-3)}
.service .sec-price{align-self:center}

.summary{position:sticky; bottom:0; z-index:4; margin:0 calc(-1 * var(--gut-r)) 0 -22px; padding:14px var(--gut-r) calc(14px + env(safe-area-inset-bottom, 0px)) 22px; background:rgba(12,10,19,.94); backdrop-filter:blur(10px); border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:10px}
.summary::before{content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--grad)}
.power{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; font-size:12px; color:var(--fg-2)}
.power-bar{grid-column:1/-1; height:6px; background:var(--panel-3); position:relative}
.power-bar i{position:absolute; inset:0 auto 0 0; background:var(--grad); max-width:100%}
.power-state{font-family:var(--f-mono); font-size:11.5px}
.power-state.ok{color:var(--ok)} .power-state.warn{color:var(--warn)} .power-state.bad{color:var(--bad)}
.total-row{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px 16px}
.total{display:flex; flex-direction:column; gap:2px}
.total small{font-size:11px; color:var(--fg-3); letter-spacing:.08em; text-transform:uppercase}
.total strong{font-family:var(--f-mono); font-weight:600; font-size:25px; line-height:1.05; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.cta{flex:1 1 200px; padding:13px 18px; border:0; background:var(--grad); color:#fff; font-weight:700; font-size:15px; letter-spacing:.1em; text-transform:uppercase; clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%); text-shadow:0 1px 0 rgba(0,0,0,.35)}
.cta:hover{filter:brightness(1.12) saturate(1.1)}
.cta:active{transform:translateY(1px)}

/* ---------- single components ---------- */
.band{border-top:1px solid var(--line); background:var(--bg)}
.band-in{max-width:1180px; margin:0 auto; padding-block:44px; padding-left:var(--gut-l); padding-right:var(--gut-r); display:flex; flex-direction:column; gap:18px}
.band h2{margin:0; font-family:var(--f-display); font-weight:700; font-size:clamp(20px,2.2vw,28px); transform:skewX(-8deg); transform-origin:left; text-wrap:balance}
.band p{margin:0; color:var(--fg-2); max-width:64ch}
.tabs{display:flex; flex-wrap:wrap; gap:6px}
.plist{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:8px}
.pitem{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:12px; background:var(--panel); border:1px solid var(--line)}
.pitem:hover{border-color:var(--line-2)}
.pitem .opt-specs{grid-column:1}
.pitem-buy{grid-column:2; grid-row:1 / span 2; display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.pitem-price{font-family:var(--f-mono); font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap}
.add{padding:5px 10px; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; background:none; border:1px solid var(--mag); color:var(--fg)}
.add:hover{background:var(--mag); color:#fff}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px}
.fact{padding:16px; background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; gap:6px}
.fact b{font-family:var(--f-display); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg)}
.fact span{color:var(--fg-2); font-size:14px}
.foot{padding:20px var(--gut-r) 28px var(--gut-l); border-top:1px solid var(--line); color:var(--fg-3); font-size:12px; font-family:var(--f-mono)}

/* ---------- cart drawer & toasts ---------- */
.scrim{position:fixed; inset:0; z-index:70; background:rgba(3,2,6,.6)}
.drawer{position:fixed; top:0; right:0; bottom:0; z-index:80; width:min(440px,100%); display:flex; flex-direction:column; background:var(--panel); border-left:1px solid var(--line-2); padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px)}
.drawer-h{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px var(--gut-r) 14px 18px; border-bottom:1px solid var(--line)}
.drawer-h h2{margin:0; font-family:var(--f-display); font-size:18px}
.x{width:34px; height:34px; background:var(--panel-3); border:1px solid var(--line-2); font-size:18px; line-height:1}
.drawer-b{flex:1; overflow:auto; padding:14px var(--gut-r) 14px 18px; display:flex; flex-direction:column; gap:10px}
.empty{color:var(--fg-3); padding:24px 0}
.citem{padding:12px; background:var(--bg-2); border:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.citem-h{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.citem-h b{overflow-wrap:anywhere}
.citem ul{margin:0; padding:0; list-style:none; font-family:var(--f-mono); font-size:11.5px; color:var(--fg-3); display:flex; flex-direction:column; gap:2px}
.link{align-self:flex-start; padding:0; background:none; border:0; color:var(--fg-3); font-size:12px; text-decoration:underline}
.link:hover{color:var(--bad)}
.drawer-f{padding:14px var(--gut-r) 16px 18px; border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:10px}
.drawer-note{margin:0; font-size:12px; color:var(--fg-3)}
.toasts{position:fixed; left:50%; top:calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 12px); transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:8px; width:min(520px, calc(100% - 32px)); pointer-events:none}
.toast{padding:10px 14px; background:var(--panel-3); border:1px solid var(--mag); box-shadow:0 8px 30px -8px rgba(255,34,180,.5); font-size:13.5px; animation:toast .25s ease-out}
.toast b{font-weight:600}
@keyframes toast{from{transform:translateY(-8px); opacity:0}}

@media (max-width: 980px){
  .cfg{grid-template-columns:minmax(0,1fr)}
  .stage{height:46dvh; min-height:300px; z-index:6; border-right:0; border-bottom:1px solid var(--line-2)}
  .panel{padding-left:var(--gut-l)}
  .summary{margin-left:calc(-1 * var(--gut-l)); padding-left:var(--gut-l)}
  .stage-hint{display:none}
  .nav a{padding:8px 8px; font-size:12px}
}
@media (max-width: 620px){
  .nav{display:none}
  .stage{height:42dvh}
  .stage-tools [data-cam], .stage-tools [data-view="rotate"]{display:none}
  .summary{gap:8px; padding-top:10px; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px))}
  .power{grid-template-columns:minmax(0,1fr) auto}
  .power span:first-child{display:none}
  .power-bar{grid-column:1; grid-row:1}
  .power-state{grid-column:2; grid-row:1}
  .total-row{flex-wrap:nowrap; align-items:center}
  .total small{font-size:10px}
  .total strong{font-size:19px}
  .cta{flex:1 1 130px; padding:11px 10px; font-size:13px; letter-spacing:.06em}
  .stage-tools button{padding:6px 8px; font-size:11px}
  .stage-tools .sep{display:none}
  .opt{grid-template-columns:18px minmax(0,1fr)}
  .opt-price{grid-column:2; text-align:left}
  .sec-h{grid-template-columns:34px minmax(0,1fr) 14px}
  .sec-h .sec-price{grid-column:2; grid-row:2}
  .sec-h .sec-caret{grid-column:3; grid-row:1}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .toast{animation:none} .sec-caret{transition:none} }