:root {
  --bg: #ebe6dc;
  --ink: #1d1c19;
  --muted: #5e5a52;
  --line: #d0cbc0;
  --panel: #f7f4ee;
  --button: #1d1c19;
  --button-ink: #f7f4ee;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 "Liberation Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a { color: inherit; }

.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.brand { font-weight: 650; letter-spacing: 0.01em; }

.top nav { display: flex; gap: 16px; }

.top a { text-decoration: none; }

.top a:hover { text-decoration: underline; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  padding: 16px;
  align-items: start;
}

.stage canvas {
  width: 100%;
  height: min(74vh, 780px);
  background: var(--panel);
  border: 1px solid var(--line);
  display: block;
  cursor: crosshair;
  touch-action: none;
}

.caption, .note, .hint {
  color: var(--muted);
  margin: 8px 0 0;
  font-size: 13px;
}

.tools {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 12px;
  display: grid;
  gap: 14px;
}

.tools h2 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.swatches, .modes, .models, .row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.swatch, .modes button, .models button, .ghost {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 6px 8px;
  cursor: pointer;
}

.swatch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chip {
  width: 14px;
  height: 14px;
  border: 1px solid var(--ink);
  display: inline-block;
}

.swatch[aria-pressed="true"],
.modes button[aria-pressed="true"],
.models button[aria-pressed="true"] {
  border-color: var(--ink);
  outline: 1px solid var(--ink);
}

label {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

label span { font-size: 13px; }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  padding: 8px;
}

textarea { min-height: 64px; resize: vertical; }

.pay {
  width: 100%;
  border: 0;
  background: var(--button);
  color: var(--button-ink);
  padding: 10px 12px;
  cursor: pointer;
}

.pay:disabled { opacity: 0.45; cursor: default; }

.price { margin: 0 0 8px; font-variant-numeric: tabular-nums; }

.error { color: #8d2b22; min-height: 1.2em; margin: 8px 0 0; }

.sheet {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

.sheet h1 { font-size: 22px; font-weight: 650; margin: 0 0 16px; }

dl {
  margin: 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  border-top: 1px solid var(--line);
}

dt, dd {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

dt { color: var(--muted); }

dd { font-variant-numeric: tabular-nums; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.actions button, .ghost {
  border: 1px solid var(--ink);
  background: var(--panel);
  padding: 8px 10px;
  cursor: pointer;
}

.queue { list-style: none; margin: 0; padding: 0; }

.queue li {
  border-top: 1px solid var(--line);
  padding: 8px 0;
}

.queue li:last-child { border-bottom: 1px solid var(--line); }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .stage canvas { height: 68vh; }
  dl { grid-template-columns: 1fr; }
  dt { padding-bottom: 0; }
}

/* A small toy console. Shared geometry and controls on every device. */
:root { --bg:#eeeee8; --ink:#252725; --muted:#686c67; --line:#cacdc4; --panel:#f9f9f3; --blue:#3047cd; --acid:#e4fa75; --button:#3047cd; --button-ink:#fff; }
html { scroll-behavior:smooth; }
body { font-family:"Helvetica Neue",Arial,sans-serif; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; transition:background .15s,transform .15s; }
button:active:not(:disabled) { transform:translateY(2px); }
button:disabled { cursor:default; opacity:.35; }
:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.icon { width:24px; height:24px; display:block; flex-shrink:0; }
[data-icon] { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.top { height:82px; padding:0 4%; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; text-decoration:none; font-size:26px; font-weight:800; letter-spacing:-1.5px; }
.brand-icon { color:var(--blue); margin-right:10px; }
.brand-icon .icon { width:35px; height:35px; stroke-width:1.8; }
.brand-to { font-weight:400; }
.brand-dot { font:8px/1.3 monospace; letter-spacing:1px; max-width:60px; margin-left:13px; padding-left:13px; border-left:1px solid var(--line); }
.top nav { height:100%; align-items:center; gap:30px; font-size:12px; }
.top nav a,.top nav button { height:100%; display:flex; align-items:center; gap:12px; position:relative; background:none; border:0; padding:0; text-decoration:none; }
.top nav span { color:var(--muted); font:10px monospace; }
.top nav .icon { width:17px; height:17px; }
.nav-active:after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:3px; background:var(--blue); }
.header-note { font:10px monospace; display:flex; align-items:center; gap:8px; color:var(--muted); }
.header-note i,.live-dot { width:6px; height:6px; background:var(--blue); display:inline-block; }
.playground main { margin:0 4%; }
.intro { display:flex; justify-content:space-between; align-items:flex-end; padding:30px 0 27px; gap:35px; }
.eyebrow { font:10px/1.5 "Courier New",monospace; letter-spacing:.9px; margin:0 0 13px; }
h1 { font-size:clamp(44px,5.5vw,82px); letter-spacing:-4px; line-height:.98; font-weight:900; margin:0; }
.title-cutout { color:var(--blue); display:inline-block; }
.intro-manual { border-left:1px solid var(--line); padding:0 0 3px 25px; margin:0 8% 4px 0; }
.manual-label { font:9px monospace; letter-spacing:1px; color:var(--muted); }
.intro-manual p { font-size:22px; line-height:1.2; font-weight:500; letter-spacing:-.7px; margin:13px 0 21px; }
.manual-steps { display:flex; gap:16px; font:9px monospace; color:var(--blue); }
.play-area { height:530px; position:relative; overflow:hidden; border:9px solid var(--blue); border-top-width:41px; border-radius:16px 16px 0 0; background:#dadcf0; box-shadow:inset 0 0 0 1px #202e7a35; }
.play-area:before { content:""; pointer-events:none; position:absolute; inset:18px; border:1px solid #777fad24; }
#view { display:block; width:100%; height:100%; cursor:crosshair; touch-action:manipulation; position:relative; }
/* Labels live inside the play surface; the printed bezel is decorative. */
.scene-heading { position:absolute; top:17px; left:20px; z-index:1; font:10px monospace; letter-spacing:1px; display:flex; gap:9px; align-items:center; pointer-events:none; color:#353e6b; }
.scene-number { color:#747a9a; margin-left:9px; }
.save-status { position:absolute; top:17px; right:21px; z-index:1; font:10px monospace; color:#505a7d; }
.tool-rail { position:absolute; top:65px; left:20px; padding:6px; background:#f5f6ef; box-shadow:3px 3px 0 #253c9e33; border:1px solid #6f79b4; border-radius:5px; display:flex; flex-direction:column; gap:5px; }
.tool-rail button { width:49px; min-height:45px; border:1px solid transparent; background:transparent; border-radius:2px; display:grid; justify-items:center; align-content:center; gap:3px; color:#42496c; }
.tool-rail .icon { width:21px; height:21px; }
.tool-rail small { font:8px monospace; letter-spacing:.2px; }
.tool-rail button[aria-pressed=true] { background:var(--acid); border-color:#7e8c40; color:#222b17; box-shadow:0 2px 0 #b0bf6f; }
.tool-rail button:hover:not([aria-pressed=true]):not(:disabled) { background:#e0e4ef; }
.rail-divider { height:1px; background:var(--line); margin:2px 4px; }
.object-label { position:absolute; right:30px; top:86px; width:185px; padding:13px 0; border-block:1px solid #7c83aa; pointer-events:none; color:#3e466c; }
.object-label .eyebrow { font-size:9px; color:#626d92; margin:0; }
.object-label h2 { font-size:20px; letter-spacing:-.7px; margin:9px 0 5px; font-weight:600; }
.object-label #dimensions { font:10px monospace; }
.specimen-code { display:block; font:8px monospace; margin-top:15px; color:#707b9e; }
.scene-bottom-left { position:absolute; bottom:22px; left:20px; display:flex; flex-direction:column; gap:10px; }
.dice-button { display:flex; gap:12px; align-items:center; min-height:44px; border:1px solid #767faa; border-radius:3px; background:#f3f4f9; padding:10px 12px; font-size:11px; box-shadow:0 2px 0 #8a94bc; }
.dice-button .icon { width:21px; height:21px; }
.dice-button [data-icon=arrow] .icon { width:15px; height:15px; }
.dice-button:hover { background:white; }
.scene-hint { color:#626d92; font-size:10px; }
.palette-dock { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:9px; }
.palette-label { font:9px monospace; letter-spacing:.4px; color:#535d85; }
.swatches { display:flex; background:#f5f6ef; border:1px solid #7b84af; border-radius:3px; padding:5px; gap:3px; box-shadow:0 3px 0 #8a94bc55; }
.swatch { border:1px solid transparent; padding:5px 7px; width:49px; min-height:52px; border-radius:2px; background:transparent; display:flex; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.chip { border:1px solid #0003; width:24px; height:21px; display:block; border-radius:2px; box-shadow:inset 0 -3px 0 #0002; }
.swatch-name { font-size:8px; color:#555b64; }
.swatch[aria-pressed=true] { outline:none; border-color:#8b94b8; background:#dee3f6; }
.view-controls { position:absolute; right:21px; bottom:23px; background:#f2f4fa; border:1px solid #767faa; border-radius:3px; display:flex; box-shadow:0 2px 0 #8a94bc; }
.view-controls button { background:none; border:0; padding:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:#45507a; }
.view-controls .icon { width:17px; height:17px; }
#reset-view { font:10px monospace; min-width:45px; }
.axis-label { position:absolute; right:24px; bottom:83px; font:9px monospace; color:#697599; }
.toast { position:absolute; top:52px; left:50%; transform:translate(-50%,-6px); background:#26336c; color:#fff; padding:10px 17px; border:1px solid #fff4; border-radius:3px; font-size:12px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:3; max-width:70%; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.creation-bar { display:flex; align-items:center; justify-content:space-between; border:9px solid var(--blue); border-top:1px solid #6c7ce1; padding:18px 22px; border-radius:0 0 14px 14px; gap:20px; background:var(--blue); color:#fff; box-shadow:0 5px 0 #223598; }
.creation-message { display:flex; align-items:center; gap:14px; }
.mini-cube .icon { width:28px; height:28px; }
.creation-message strong { font-size:13px; font-weight:500; display:block; }
.creation-message div>span { display:block; font-size:11px; color:#d5ddff; margin-top:5px; }
.creation-stats { display:flex; gap:13px; align-items:center; font:10px monospace; color:#d5ddff; }
.stat-divider { height:11px; width:1px; background:#8494e6; }
.print-action { display:flex; gap:22px; align-items:center; }
.print-action>div { display:flex; flex-direction:column; text-align:right; }
.print-action strong { font-size:25px; font-weight:500; letter-spacing:-1px; white-space:nowrap; }
.print-action div>span { font:9px monospace; color:#d5ddff; margin-top:3px; }
.primary { display:flex; justify-content:space-between; gap:25px; align-items:center; border:1px solid #1115; background:var(--acid); color:#26331d; border-radius:3px; padding:15px 21px; min-height:48px; font-size:13px; font-weight:600; box-shadow:0 3px 0 #1c2e8955; }
.primary:hover:not(:disabled) { background:#f0ffad; }
.primary .icon { width:20px; height:20px; }
.inspiration { display:grid; grid-template-columns:235px 1fr; gap:22px; padding:38px 0 30px; }
.inspiration-heading .eyebrow { color:var(--muted); font-size:9px; margin:0 0 10px; }
.inspiration-heading h2 { font-size:31px; font-weight:700; letter-spacing:-1.3px; margin:0 0 24px; }
.text-button { display:flex; align-items:center; gap:18px; min-height:44px; border:0; border-bottom:1px solid #9fa695; border-radius:0; background:none; padding:0; font-size:12px; }
.text-button .icon { width:18px; height:18px; }
.models { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border:1px solid #b7bdaf; background:#e4e7db; }
.models button { position:relative; border:0; border-right:1px solid #b7bdaf; border-radius:0; padding:0; background:transparent; text-align:left; overflow:hidden; min-width:0; transition:background .2s; }
.models button:last-child { border-right:0; }
.models button:hover { background:#f2f4e9; }
.models button[aria-pressed=true] { outline:none; background:#f6f7ee; box-shadow:inset 0 -3px var(--blue); }
.models canvas { width:100%; height:auto; aspect-ratio:2 / 1; display:block; }
.model-card-bottom { padding:0 12px 13px; display:flex; justify-content:space-between; align-items:center; gap:5px; }
.model-card-bottom strong { font-size:11px; font-weight:500; }
.model-card-bottom small { display:block; font-size:9px; color:#636c5e; margin-top:3px; }
.model-card-bottom>span .icon { width:15px; height:15px; }
.model-index { position:absolute; top:10px; left:12px; font:9px monospace; color:#636c5e; letter-spacing:1px; }
.footer { margin:0 4%; border-top:1px solid var(--line); padding:20px 0 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; font:9px monospace; color:#636c5e; }
.footer a { text-decoration:none; min-height:44px; display:flex; align-items:center; }
dialog { border:2px solid var(--blue); background:var(--bg); color:var(--ink); border-radius:7px; padding:36px; width:min(500px,calc(100% - 24px)); max-height:90dvh; box-shadow:8px 8px 0 #182a7340; }
dialog::backdrop { background:#17214d99; }
dialog h2 { font-size:32px; line-height:1.12; letter-spacing:-1.3px; margin:10px 0 24px; font-weight:600; }
.close-dialog { position:absolute; right:8px; top:8px; width:44px; height:44px; border:0; background:none; display:flex; align-items:center; justify-content:center; }
.close-dialog .icon { width:20px; height:20px; }
.checkout-summary { display:flex; justify-content:space-between; padding:15px 0; border-block:1px solid var(--line); }
dialog .note { font-size:11px; margin-bottom:20px; }
dialog label { margin-bottom:14px; }
dialog label span { font-size:12px; }
input,select,textarea { border-radius:3px; padding:12px; min-height:44px; font-size:16px; background:#fcfcf7; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
dialog .hint { font-size:11px; line-height:1.6; }
.how-steps { list-style:none; padding:0; margin:0 0 25px; }
.how-steps li { display:flex; gap:20px; padding:15px 0; border-top:1px solid var(--line); }
.how-steps li>span { color:var(--blue); font:12px monospace; margin-top:3px; }
.how-steps h3 { margin:0; font-size:16px; font-weight:500; }
.how-steps p { font-size:13px; color:var(--muted); margin:7px 0; }
.sheet { margin-top:60px; background:var(--panel); border:1px solid var(--line); padding:30px; border-radius:5px; }
.order-heading { font-size:40px!important; letter-spacing:-1.8px; line-height:1.1; margin:16px 0!important; }
.order-progress { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; margin:28px 0; font-size:12px; }
.order-progress progress { width:100%; height:7px; border:0; overflow:hidden; accent-color:var(--blue); }
.order-progress progress::-webkit-progress-bar { background:#e7e8de; }
.order-progress progress::-webkit-progress-value { background:var(--blue); transition:width .3s; }
.order-back { margin-top:25px; text-decoration:none; }.sheet .note { line-height:1.7; font-size:12px; }
@media(min-width:1600px) { .playground main,.footer { max-width:1500px; margin-inline:auto; } .play-area { height:560px; } }
@media(max-width:1100px) { .header-note { display:none; } .intro-manual { margin-right:0; } .creation-stats { display:none; } .inspiration { grid-template-columns:200px 1fr; gap:15px; } .object-label { right:22px; width:155px; } .object-label h2 { font-size:17px; } }
@media(max-width:760px) {
 .top { height:70px; padding:0 18px; }.brand { font-size:24px; }.brand-icon .icon { width:30px; height:30px; }.brand-dot { display:none; }.top nav { gap:16px; }.top nav a { display:none; }.top nav button { font-size:12px; min-height:44px; }.top nav .icon { width:16px; height:16px; }
 .playground main { margin:0 14px; }.intro { padding:24px 3px; gap:20px; align-items:flex-end; }.intro .eyebrow { font-size:8px; letter-spacing:.3px; } h1 { font-size:clamp(34px,7.5vw,55px); letter-spacing:-2px; }.intro-manual { max-width:170px; padding-left:16px; }.intro-manual p { font-size:16px; margin:10px 0; }.manual-label { font-size:8px; }.manual-steps { display:none; }
 .play-area { height:570px; border-width:6px; border-top-width:20px; border-radius:10px 10px 0 0; }.play-area:before { inset:12px; }
 .scene-heading { top:15px; left:15px; font-size:9px; letter-spacing:.3px; }.scene-number { display:none; }.save-status { top:15px; right:15px; font-size:9px; }
 .object-label { right:15px; top:42px; width:auto; text-align:right; border:0; padding:0; }.object-label .eyebrow { font-size:8px; }.object-label h2 { font-size:14px; margin:6px 0; }.object-label #dimensions { font-size:9px; }.specimen-code { display:none; }
 .tool-rail { left:12px; right:12px; bottom:87px; top:auto; flex-direction:row; justify-content:space-between; gap:3px; padding:5px; border-radius:3px; box-shadow:0 3px 0 #253c9e33; }
 .tool-rail button { width:calc((100% - 15px)/6); min-width:44px; height:49px; min-height:49px; padding:0; gap:4px; }.tool-rail .icon { width:21px; height:21px; }.tool-rail small { font-size:8px; }.rail-divider { display:none; }
 .scene-bottom-left { left:13px; bottom:166px; }.dice-button { padding:9px 10px; font-size:11px; gap:8px; }.dice-button [data-icon=arrow] { display:none; }.scene-hint { display:none; }
 .palette-dock { bottom:13px; left:13px; transform:none; align-items:flex-start; gap:5px; }.palette-label { font-size:8px; }.swatches { padding:3px; gap:1px; }.swatch { width:44px; min-height:48px; padding:4px; }.chip { width:22px; height:20px; }.swatch-name { font-size:8px; }
 .view-controls { right:13px; bottom:19px; box-shadow:none; }.view-controls button { width:38px; min-width:44px; height:44px; }#reset-view { min-width:44px; width:44px; font-size:9px; }.axis-label { display:none; }
 .toast { top:103px; padding:8px 12px; font-size:11px; width:max-content; max-width:90%; }
 .creation-bar { border-width:6px; border-top:1px solid #6c7ce1; padding:14px 12px 17px; flex-wrap:wrap; gap:17px; border-radius:0 0 8px 8px; }.creation-message { width:100%; gap:11px; }.creation-message strong { font-size:12px; }.creation-message div>span { font-size:10px; }.mini-cube .icon { width:24px; height:24px; }.print-action { width:100%; justify-content:space-between; gap:12px; }.print-action>div { text-align:left; }.print-action strong { font-size:25px; }.primary { padding:13px 20px; font-size:13px; min-height:49px; }
 .inspiration { grid-template-columns:1fr; padding:30px 0 24px; gap:18px; }.inspiration-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; }.inspiration-heading .eyebrow { font-size:8px; }.inspiration-heading h2 { font-size:27px; margin:0; }.text-button { font-size:11px; gap:10px; }.models { grid-template-columns:repeat(2,minmax(0,1fr)); }.models button:nth-child(2) { border-right:0; }.models button:nth-child(-n+2) { border-bottom:1px solid #b7bdaf; }.models canvas { height:auto; }.model-card-bottom { padding:0 12px 14px; }.model-card-bottom strong { font-size:12px; }.model-card-bottom small { font-size:10px; }
 .footer { margin:0 17px; font-size:8px; }.footer>span:nth-child(2) { display:none; } dialog { padding:32px 22px 24px; }
}
@media(max-width:480px) { .intro-manual { display:none; } h1 { font-size:clamp(36px,10.6vw,51px); letter-spacing:-2.3px; }.intro { padding:25px 3px; }.play-area { height:550px; } }
@media(max-width:370px) { .playground main { margin-inline:9px; }.tool-rail { left:7px; right:7px; gap:0; padding:3px; }.palette-dock { left:8px; }.view-controls { right:8px; }.view-controls button { min-width:44px; }#reset-view { display:none; }.scene-bottom-left { left:8px; }.swatches { gap:0; padding-inline:1px; }.swatch { width:44px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation:none!important; transition:none!important; } }

@media(min-width:371px) and (max-width:389px) { #reset-view { display:none; } }