:root {
  --ink: #111318;
  --paper: #f4f2ea;
  --acid: #e9ff5b;
  --blue: #3157ff;
  --line: rgba(17,19,24,.18);
  --tray: #3157ff;
  --key: #e9ff5b;
  --print: #111318;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, select, textarea { font: inherit; color: inherit; }
button, select, label, input[type="color"] { cursor: pointer; }

.topbar {
  height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 28px; border-bottom: 1px solid var(--line); position: relative; z-index: 10;
}
.brand { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 11px; font-size: 1.05rem; font-weight: 900; letter-spacing: -.04em; }
.brand > span:last-child > span { color: var(--blue); }
.brand-mark { width: 29px; height: 29px; display: grid; grid-template-columns: repeat(2,1fr); gap: 3px; transform: rotate(-3deg); }
.brand-mark i { display: block; background: var(--ink); border-radius: 2px; box-shadow: inset 0 -2px rgba(255,255,255,.25); }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(3) { background: var(--blue); }
.dispatch { font-size: .72rem; letter-spacing: .13em; font-weight: 750; margin: 0; }
.bag { justify-self: end; border: 0; background: transparent; font-size: .78rem; font-weight: 850; letter-spacing: .1em; }
.bag span { background: var(--ink); color: white; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; margin-left: 6px; }

.builder { min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(0,1.45fr) minmax(380px,.75fr); }
.stage-panel { min-height: 720px; border-right: 1px solid var(--line); padding: 44px 42px 38px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.stage-copy { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 2; }
.eyebrow, .step { font-size: .68rem; font-weight: 900; letter-spacing: .16em; margin: 0 0 10px; }
h1 { font-size: clamp(3rem, 5.3vw, 6.7rem); line-height: .84; letter-spacing: -.075em; margin: 0; text-transform: uppercase; font-weight: 950; }
h1 span { color: var(--blue); }
.stage-note { font-size: .75rem; line-height: 1.55; font-weight: 700; text-align: right; margin: 9px 0 0; }

.stage-tabs { position:relative; z-index:4; display:flex; width:max-content; justify-self:center; margin:22px auto 0; border:1px solid var(--line); background:rgba(244,242,234,.85); backdrop-filter:blur(10px); }
.stage-panel { position:relative; }
.stage-tabs button { border:0; background:transparent; padding:9px 12px; font-size:.63rem; font-weight:900; letter-spacing:.1em; }
.stage-tabs button.active { background:var(--ink); color:white; }
.product-stage { min-height: 430px; display: grid; place-items: center; position: relative; padding: 64px; user-select: none; touch-action: none; }
.photo-stage { min-height:430px; position:relative; margin-top:18px; overflow:hidden; background:#10121a; }
.photo-stage[hidden] { display:none; }
.photo-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-stage span { position:absolute; right:14px; bottom:12px; background:rgba(17,19,24,.82); color:white; padding:8px 10px; font-size:.62rem; font-weight:850; letter-spacing:.1em; }
.product-shell {
  position: relative; padding: clamp(10px,1.3vw,18px); background: var(--tray); border-radius: clamp(14px,2vw,26px);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.2), inset 0 -9px 0 rgba(0,0,0,.14), 0 28px 45px rgba(17,19,24,.22), 0 4px 0 #111318;
  max-width: 100%; transition: background .2s, transform .15s; z-index: 2;
}
.product-shell:active { transform: translateY(1px); }
.key-grid { display: grid; gap: clamp(4px,.55vw,8px); }
.key {
  width: var(--key-size); aspect-ratio: 1; border: 0; border-radius: clamp(6px,.7vw,11px); background: var(--key); color: var(--print);
  display: grid; place-items: center; font-weight: 850; font-size: calc(var(--key-size) * .39); line-height: 1; overflow: hidden;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.16), inset 0 2px 1px rgba(255,255,255,.42), 0 4px 0 rgba(17,19,24,.75);
  transition: transform .08s, background .2s, color .2s; text-transform: none;
}
.key:hover { transform: translateY(-2px); }
.key:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.16), 0 1px 0 rgba(17,19,24,.75); }
.key svg { width: 54%; height: 54%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.key img { width: 58%; height: 58%; object-fit: contain; }
.resize-handle { position: absolute; right: -18px; bottom: -18px; width: 46px; height: 46px; border: 3px solid var(--paper); background: var(--ink); border-radius: 50%; display: grid; place-content: center; gap: 3px; transform: rotate(-45deg); box-shadow: 0 5px 14px rgba(0,0,0,.3); z-index: 5; }
.resize-handle span { display:block; width: 15px; height: 2px; background: white; border-radius: 2px; }
.dimension { position: absolute; font-size: .65rem; letter-spacing: .11em; font-weight: 850; color: rgba(17,19,24,.58); display: flex; align-items: center; gap: 8px; }
.dimension::before, .dimension::after { content:""; display:block; background: rgba(17,19,24,.25); }
.dimension-x { bottom: 25px; left: 18%; right: 18%; justify-content: center; }
.dimension-x::before, .dimension-x::after { height: 1px; flex: 1; }
.dimension-y { left: 16px; top: 20%; bottom: 20%; flex-direction: column; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); }
.dimension-y::before, .dimension-y::after { width: 1px; flex: 1; }
.keychain-ring { position: absolute; z-index: 1; top: 15%; right: 15%; width: 62px; height: 62px; border: 9px solid #bdc1c8; border-radius: 50%; box-shadow: inset 2px 2px 1px white, 3px 4px 8px rgba(0,0,0,.25); }
.keychain-ring span { position:absolute; width: 35px; height: 18px; left: -25px; bottom: -8px; border-radius: 9px; background:#aeb3bb; transform: rotate(42deg); z-index:-1; }
.size-readout { position: absolute; right: 0; bottom: 8px; display: flex; flex-direction: column; align-items: flex-end; }
.size-readout strong { font-size: 1.15rem; }
.size-readout span { font-size: .7rem; color: rgba(17,19,24,.6); }

.controls { background: #fff; padding: 31px 34px 0; overflow-y: auto; max-height: calc(100vh - 72px); }
.control-head, .control-head > div { display:flex; align-items:center; }
.control-head { justify-content:space-between; }
.step { display:inline-grid; place-items:center; width:28px; height:28px; background:var(--ink); color:white; border-radius:50%; margin:0 10px 0 0; letter-spacing:0; }
.controls h2 { display:inline; font-size:1.1rem; letter-spacing:-.03em; text-transform:uppercase; margin:0; }
.reset { border:0; background:transparent; font-size:.7rem; letter-spacing:.12em; font-weight:800; text-decoration:underline; text-underline-offset:4px; }
.dimension-inputs { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:end; margin-top:20px; }
.dimension-inputs label, .text-field > span { font-size:.65rem; font-weight:850; letter-spacing:.12em; }
.dimension-inputs label { display:grid; gap:6px; }
.dimension-inputs input { width:100%; border:1px solid var(--ink); border-radius:0; background:#fff; padding:11px 12px; font-weight:850; font-size:1.05rem; }
.dimension-inputs > span { padding-bottom:10px; font-weight:800; }
.helper { color:#686b73; font-size:.75rem; line-height:1.45; margin:8px 0 0; }
.control-section { border-top:1px solid var(--line); padding:22px 0; margin-top:22px; }
.text-field { display:grid; gap:7px; margin-top:16px; }
textarea { border:1px solid var(--ink); resize:none; padding:11px; border-radius:0; font-size:1rem; line-height:1.5; }
.icon-row { display:flex; gap:7px; flex-wrap:wrap; margin-top:13px; }
.icon-choice { width:37px; height:37px; background:white; border:1px solid var(--line); display:grid; place-items:center; }
.icon-choice:hover, .icon-choice:focus-visible { background:var(--acid); border-color:var(--ink); }
.icon-choice svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.upload-button { min-height:37px; border:1px dashed var(--ink); display:flex; align-items:center; padding:0 10px; font-size:.67rem; font-weight:850; letter-spacing:.07em; }
.source-note { margin:7px 0 0; font-size:.64rem; color:#777; }
.color-controls { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:15px; }
.color-controls label { border:1px solid var(--line); padding:9px; font-size:.62rem; font-weight:850; letter-spacing:.1em; display:flex; justify-content:space-between; align-items:center; }
.swatch-wrap { width:25px; height:25px; position:relative; border-radius:50%; overflow:hidden; border:1px solid rgba(0,0,0,.25); }
.swatch-wrap input { position:absolute; inset:-8px; width:45px; height:45px; border:0; padding:0; }
.select-row { display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid var(--line); padding:13px 0; }
.select-row span { display:grid; gap:2px; }
.select-row strong { font-size:.8rem; }
.select-row small { font-size:.68rem; color:#777; }
.select-row select { border:0; background:#f1f1ee; padding:8px; font-size:.72rem; font-weight:700; max-width:52%; }
.upgrade-card { margin-top:14px; background:var(--ink); color:white; min-height:64px; padding:11px 12px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; }
.upgrade-card input { position:absolute; opacity:0; }
.upgrade-check { width:21px; height:21px; border:1px solid white; display:grid; place-items:center; }
.upgrade-card input:checked + .upgrade-check { background:var(--acid); border-color:var(--acid); }
.upgrade-card input:checked + .upgrade-check::after { content:"✓"; color:var(--ink); font-weight:900; }
.upgrade-card span:nth-of-type(2) { display:grid; gap:2px; }
.upgrade-card strong { font-size:.7rem; letter-spacing:.08em; }
.upgrade-card small { color:#b8bbc2; font-size:.66rem; }
.upgrade-card b { color:var(--acid); font-size:.72rem; }
.checkout-bar { position:sticky; bottom:0; background:var(--acid); margin:0 -34px; padding:16px 34px; display:flex; align-items:center; justify-content:space-between; gap:14px; box-shadow:0 -10px 24px rgba(0,0,0,.06); }
.checkout-bar > div { display:grid; }
.checkout-bar small { font-size:.6rem; font-weight:850; letter-spacing:.1em; }
.checkout-bar strong { font-size:1.55rem; letter-spacing:-.06em; }
.checkout-bar button { background:var(--ink); color:white; border:0; padding:14px 17px; font-size:.75rem; font-weight:850; letter-spacing:.06em; }
.checkout-bar button span { color:var(--acid); margin-left:10px; }

.sound-strip { min-height:82px; background:var(--ink); color:white; display:grid; grid-template-columns:1.5fr repeat(3,1fr) 1.5fr; align-items:center; padding:0 30px; gap:26px; }
.sound-strip p { font-size:.68rem; letter-spacing:.15em; font-weight:850; }
.sound-strip > div { height:40px; display:flex; align-items:center; gap:3px; }
.sound-strip > div span { font-size:.65rem; font-weight:800; margin-right:7px; }
.sound-strip i { width:3px; height:var(--h); background:var(--acid); border-radius:2px; }
.sound-strip .fine-print { text-align:right; color:#a6a9b0; }

.real-product { background:#fff; display:grid; grid-template-columns:1fr 1.05fr .7fr; gap:18px; padding:54px 42px; border-top:1px solid var(--line); }
.real-product-copy { align-self:center; padding-right:28px; }
.real-product-copy h2 { font-size:clamp(2rem,3.2vw,4.2rem); line-height:.95; letter-spacing:-.06em; text-transform:uppercase; margin:0 0 20px; }
.real-product-copy > p:last-of-type { color:#5e626b; line-height:1.6; max-width:46ch; }
.real-product-copy ul { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:8px; font-size:.78rem; font-weight:750; }
.real-product-copy li::before { content:'↗'; color:var(--blue); margin-right:8px; }
.real-product figure { margin:0; position:relative; overflow:hidden; background:#111318; min-height:390px; }
.product-video video, .product-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.product-video figcaption { position:absolute; left:12px; bottom:12px; background:rgba(17,19,24,.85); color:#fff; padding:8px 10px; font-size:.67rem; letter-spacing:.07em; text-transform:uppercase; }

.toast { position:fixed; z-index:50; left:50%; bottom:26px; transform:translate(-50%,140%); width:min(390px,calc(100% - 28px)); background:var(--ink); color:white; padding:15px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; transition:transform .3s cubic-bezier(.2,.9,.3,1.2); box-shadow:0 15px 40px rgba(0,0,0,.3); }
.toast.show { transform:translate(-50%,0); }
.toast > span { color:var(--ink); background:var(--acid); width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:900; }
.toast div { display:grid; }
.toast strong { font-size:.75rem; letter-spacing:.08em; }
.toast small { color:#b7bac1; }
.toast button { border:0; background:transparent; color:white; font-size:1.4rem; }

dialog { width:min(430px,calc(100% - 30px)); border:0; padding:0; box-shadow:0 25px 80px rgba(0,0,0,.35); }
dialog::backdrop { background:rgba(17,19,24,.66); backdrop-filter:blur(4px); }
dialog form { padding:30px; position:relative; }
dialog h2 { font-size:1.7rem; margin:0 0 18px; text-transform:uppercase; }
.dialog-close { position:absolute; right:15px; top:12px; border:0; background:transparent; font-size:1.6rem; }
dialog input { width:100%; border:2px solid var(--ink); padding:13px; font-size:1.4rem; }
.quick-keys { display:flex; gap:7px; margin:10px 0 20px; }
.quick-keys button { width:38px; height:38px; border:1px solid var(--line); background:white; }
.save-key { width:100%; border:0; background:var(--blue); color:white; padding:14px; font-weight:850; letter-spacing:.08em; }

@media (max-width: 900px) {
  .topbar { grid-template-columns:1fr auto; padding:0 18px; height:62px; }
  .dispatch { display:none; }
  .builder { display:block; }
  .stage-panel { min-height:650px; border-right:0; border-bottom:1px solid var(--line); padding:30px 20px 20px; }
  .product-stage { padding:55px 40px; }
  .controls { max-height:none; padding:28px 20px 0; }
  .checkout-bar { margin:0 -20px; padding:15px 20px; }
  .sound-strip { grid-template-columns:repeat(3,1fr); padding:18px; gap:12px; }
  .sound-strip > p { grid-column:1/-1; }
  .sound-strip .fine-print { display:none; }
  .real-product { grid-template-columns:1fr 1fr; padding:38px 20px; }
  .real-product-copy { grid-column:1/-1; }
}

@media (max-width: 520px) {
  .stage-panel { min-height:590px; }
  .stage-copy { display:block; }
  h1 { font-size:3.5rem; }
  .stage-note { display:none; }
  .product-stage { min-height:360px; padding:55px 30px 45px; }
  .keychain-ring { width:46px; height:46px; border-width:7px; right:9%; }
  .color-controls { grid-template-columns:1fr; }
  .sound-strip { display:none; }
  .dimension-y { left:0; }
  .dimension-x { bottom:10px; }
  .stage-tabs { margin-top:18px; }
  .real-product { display:block; }
  .real-product figure { min-height:330px; margin-top:14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; }
}