/* Mister Blocks — "toy workshop": ink-navy frame, crisp white floor, chunky outlined pieces with solid offset shadows.
   Shared by every page: tokens, base type, header, footer, buttons, panels, toggles. Pages only add their own layout. */
:root{
  --ink:#141b34;          /* outlines, header, studio */
  --paper:#ffffff;        /* page */
  --wash:#f4f6fb;         /* quiet fills */
  --text:#141b34; --muted:#5a6280; --line:#d9deea;
  --red:#e3342f; --yellow:#ffc531; --sky:#2f80ed; --green:#1f9d55;
  --ok:#1f9d55; --warn:#c2410c;
  --font-display:'Bricolage Grotesque','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Figtree','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --wrap:1200px; --r:14px; --hard:4px 4px 0 var(--ink);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{color-scheme:dark; --paper:#0e1328; --wash:#151c38; --text:#eef1fb; --muted:#a3abc8; --line:#2a3358; --hard:4px 4px 0 #000}
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{background:var(--paper);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--font-display);margin:0;text-wrap:balance;line-height:1.05;letter-spacing:-.02em}
h2{font-size:clamp(26px,3.4vw,38px);font-weight:800}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
a{color:var(--sky)}
img{max-width:100%}
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.muted{color:var(--muted)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}

/* header: the same dark bar on every page */
.site-header{background:var(--ink);color:#fff;position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top,0px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.02em;white-space:nowrap}
.logo{width:40px;height:40px;flex:none;background:url(/logo.svg) center/contain no-repeat}
.brand em{font-style:normal;color:var(--yellow)}
.brand:hover .logo{animation:hop .45s ease}
@keyframes hop{40%{transform:translateY(-4px) rotate(-6deg)}100%{transform:none}}
.site-nav{display:flex;align-items:center;gap:18px}
.site-nav a:not(.btn){color:#c9d0ea;text-decoration:none;font-weight:600;font-size:15px}
.site-nav a:not(.btn):hover{color:#fff}
@media (max-width:420px){.site-nav .nav-link{display:none}}

main.wrap{display:flex;flex-direction:column;gap:22px;padding-top:28px;padding-bottom:56px}

/* buttons: chunky pieces that press down */
button,.btn{font:inherit;font-weight:700;border:0;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;min-height:44px;padding:0 18px;color:var(--text);background:var(--paper)}
.btn,button.primary{background:var(--red);color:#fff;border:2px solid var(--ink);box-shadow:var(--hard);transition:transform .08s,box-shadow .08s}
.btn:hover,button.primary:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active,button.primary:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.yellow{background:var(--yellow);color:var(--ink)}
.site-header .btn{box-shadow:3px 3px 0 #000;border-color:#000}
.btn.btn-sm{min-height:40px;padding:0 14px;font-size:15px}
.btn input{position:absolute;opacity:0;width:1px;height:1px}
button.ghost{background:var(--paper);color:var(--text);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
button.ghost:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
button:disabled{opacity:.45;cursor:default;transform:none !important}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,.btn:focus-within,label:focus-within{outline:3px solid var(--sky);outline-offset:2px}

/* panels: outlined pieces with a solid shadow */
.panel{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--hard);padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.status{font-size:15px;color:var(--muted);margin:0}
.status:empty{display:none}
.status b{color:var(--text)} .status.err b{color:var(--warn)}

/* pill toggles (checkbox inside a label) */
.toggle{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border-radius:999px;border:2px solid currentColor;font-weight:600;font-size:14px;cursor:pointer;user-select:none;opacity:.92}
.toggle input{appearance:none;-webkit-appearance:none;width:30px;height:18px;border-radius:999px;background:rgba(127,137,170,.45);position:relative;margin:0;cursor:pointer;transition:background .15s;flex:none}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}
.toggle input:checked{background:var(--green)} .toggle input:checked::after{transform:translateX(12px)}
label.chk{display:inline-flex;gap:8px;align-items:center;color:var(--muted);font-size:14px;min-height:44px}
input[type=range]{accent-color:var(--red)}

/* dark studio: where models are shown */
.studio{background:radial-gradient(ellipse 75% 65% at 50% 60%,#34457e 0%,#1e2852 48%,var(--ink) 100%);color:#fff}

/* footer: the same dark bar on every page */
.site-footer{background:var(--ink);color:#aab3d4;font-size:13px}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:center;padding-top:24px;padding-bottom:max(28px,env(safe-area-inset-bottom,0px))}
.site-footer p{margin:0;max-width:72ch}
.site-footer .brand{font-size:17px}

@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* sliders: one thick track with a small tick for each step drawn inside it; the handle sits on top */
.slider{position:relative}
.slider::before{content:"";position:absolute;left:0;right:0;top:50%;height:8px;margin-top:-4px;border-radius:999px;background:rgba(127,137,170,.45)}
.ticks{position:absolute;left:0;right:0;top:50%;height:8px;margin-top:-4px;padding:0 13px;display:flex;justify-content:space-between;pointer-events:none}
.ticks i{width:2px;height:8px;background:rgba(255,255,255,.8)}
.ticks.sparse i{position:absolute;top:0}
input[type=range]{-webkit-appearance:none;appearance:none;position:relative;z-index:1;display:block;width:100%;height:30px;margin:0;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:8px;background:transparent}
input[type=range]::-moz-range-track{height:8px;background:transparent}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:#fff;border:4px solid var(--red);box-shadow:0 2px 6px rgba(0,0,0,.35)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--red);box-shadow:0 2px 6px rgba(0,0,0,.35)}
input[type=range]:focus-visible{outline:3px solid var(--sky);outline-offset:4px;border-radius:999px}

/* the card that names a brick you point at in the 3D view */
.mb-tip{position:fixed;z-index:50;pointer-events:none;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;max-width:280px;
  background:var(--ink);color:#fff;border:2px solid #fff;border-radius:12px;padding:10px 12px;box-shadow:4px 4px 0 rgba(20,27,52,.35);font-size:14px;line-height:1.35}
.mb-tip[hidden]{display:none}
.mb-tip i{grid-row:1/3;width:26px;height:26px;border-radius:6px;border:2px solid #fff}
.mb-tip b{font-family:var(--font-display);font-size:16px}
.mb-tip span{white-space:pre-line;color:#c9d1ee;font-size:13px}

/* the brick you clicked in the 3D view (guide and build pages) */
.pick .sw{flex:none;position:relative;background:#888;border:3px solid var(--ink);margin-top:8px}
.pick .sw::before,.pick .sw::after{content:"";position:absolute;background:inherit;border:3px solid var(--ink);border-bottom:0;border-radius:3px 3px 0 0}
.pick{flex:none;border-color:var(--ink);background:#fffbea}
.pick .num{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin:0}
.pick-top{display:flex;gap:14px;align-items:center}
.pick-top>div{flex:1;min-width:0}
.pick h2{font-size:26px;margin:2px 0}
.pick-top p{margin:0}
.pick .sw{width:56px;height:38px;border-width:3px;border-radius:6px}
.pick .sw::before,.pick .sw::after{width:15px;height:8px;top:-10px;border-width:3px}
.pick .sw::before{left:6px}.pick .sw::after{right:6px}
.pick-x{min-height:36px;width:36px;padding:0;border:2px solid var(--line);background:var(--paper);font-size:20px;line-height:1}
.pick dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:4px 0 0;font-size:15px}
.pick dt{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.pick dd{margin:0}
.pick .go{align-self:flex-start}

/* gallery cards (home page and /builds) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:22px}
.build-card{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;color:inherit;text-decoration:none;display:flex;flex-direction:column;box-shadow:var(--hard);transition:transform .12s,box-shadow .12s}
.build-card:hover,.build-card:focus-visible{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.build-card .thumb{position:relative;aspect-ratio:4/3;border-bottom:2px solid var(--ink);overflow:hidden}
.build-card .render{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.build-card:hover .render{transform:scale(1.06)}
.build-card .pile{position:absolute;right:10px;bottom:10px;width:30%;aspect-ratio:1;object-fit:cover;border:2px solid #fff;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.build-card .loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px}
.build-card .loading i{width:18px;height:12px;border-radius:3px;background:var(--yellow);animation:hop 1s infinite ease-in-out}
.build-card .loading i:nth-child(2){background:var(--red);animation-delay:.15s}.build-card .loading i:nth-child(3){background:var(--sky);animation-delay:.3s}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.build-card .loading i{animation:none}.build-card:hover .render{transform:none}}
.build-card .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.build-card b{font-family:var(--font-display);font-size:20px;line-height:1.15}
.build-card small{color:var(--muted);font-family:var(--font-mono);font-size:12px;letter-spacing:.04em}
.build-card .badge.guide{background:var(--sky);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 18px}
.chips button{min-height:38px;padding:0 16px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);font-weight:700;box-shadow:none}
.chips button[aria-pressed="true"]{background:var(--ink);color:#fff}
.badge{align-self:flex-start;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:6px;padding:1px 7px}

/* the header and footer span the window on every page, so the logo and nav never move between pages */
.site-header .wrap,.site-footer .wrap{max-width:none}