:root{color-scheme:light;--paper:#f1f0e9;--ink:#252d2b;--muted:#57635e;--line:#c7ccc3;--accent:#315e45}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Helvetica Neue,Helvetica,Arial,sans-serif}::selection{background:#cad8bf}button,a,input,summary,textarea{-webkit-tap-highlight-color:transparent}button,textarea{font:inherit}button,a,summary,.upload{touch-action:manipulation}button{cursor:pointer;color:inherit;background:none;border:1px solid var(--line);padding:10px 15px;border-radius:4px;min-height:42px}button:hover,.upload:hover{background:#e0e4d8}button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}a{color:inherit;text-underline-offset:4px}header{max-width:1440px;margin:auto;padding:28px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.wordmark{text-decoration:none;font-weight:650;font-size:20px;letter-spacing:-.03em}header button{border:0}main{max-width:1440px;margin:auto;padding:44px 5% 30px;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px 56px}.intro{grid-column:1}h1{font-family:Georgia,serif;font-size:clamp(32px,4vw,58px);font-weight:400;letter-spacing:-.035em;line-height:1.06;margin:0 0 14px;text-wrap:balance}p{line-height:1.55;margin:0 0 14px}#subtitle{color:var(--muted);font-size:16px}.viewer{grid-column:1;min-width:0;position:relative}#stage{height:510px;position:relative;cursor:grab;touch-action:none}#stage:active{cursor:grabbing}canvas{display:block;width:100%;height:100%}#loading{position:absolute;inset:45% 10% auto;text-align:center;color:var(--muted)}.view-controls{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.view-controls button{font-size:13px;padding:9px 13px}#hint{font-size:12px;text-align:center;color:var(--muted);margin:14px 0 0}aside{grid-column:2;grid-row:1 / span 2;padding-top:8px}h2{font-size:16px;font-weight:600;margin:0}.screen-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.screen-heading span{font-size:11px;color:var(--muted)}.screens{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.screens button{padding:10px;background:transparent;border-color:transparent;text-align:left}.screens button[aria-pressed=true]{border-color:var(--accent);color:var(--ink);background:#e2e6d9}.screens img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;border:1px solid #aeb6a9}.screens span{display:block;font-size:12px;margin-top:9px}.upload{display:block;text-align:center;border:1px solid var(--line);padding:12px;cursor:pointer;border-radius:4px;margin-top:18px;font-size:14px}.upload input{position:absolute;width:1px;height:1px;opacity:0}.upload:focus-within{outline:3px solid var(--accent);outline-offset:3px}.small{font-size:12px;color:var(--muted);line-height:1.6}#upload-help{margin:9px 0 0}#status:empty{display:none}#status{margin-top:8px}.details{border-top:1px solid var(--line);padding-top:24px;margin-top:28px}.details h2{font-size:26px;letter-spacing:-.03em}.details p{margin-top:6px}.dimensions{font-size:21px;font-variant-numeric:tabular-nums}.dimensions span{font-size:12px}.details .small{margin-top:14px}details{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}summary{cursor:pointer;font-size:14px}details p{margin-top:12px}textarea{resize:vertical;width:100%;height:124px;border:1px solid var(--line);padding:10px;background:#fafaf5;color:var(--ink);font:11px/1.5 monospace}#copy{margin:8px 0;font-size:12px}#embed-open{display:block;font-size:12px}footer{max-width:1440px;margin:20px auto 0;padding:22px 5%;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}body.embed{background:transparent}body.embed header,body.embed .intro,body.embed aside,body.embed footer{display:none}body.embed main{display:block;padding:0;max-width:none}body.embed .viewer{height:100dvh;display:flex;flex-direction:column}body.embed #stage{flex:1;min-height:0;height:auto}body.embed .view-controls{padding:8px 8px 0}body.embed #hint{margin:9px 0 12px}body.embed .view-controls button{background:var(--paper)}body.embed .view-controls button[aria-pressed=true]{background:var(--ink)}@media(max-width:800px){header{padding:18px 6%}main{padding:30px 6%;grid-template-columns:1fr;gap:22px}.intro{grid-column:1}aside{grid-column:1;grid-row:auto;padding-top:18px;border-top:1px solid var(--line)}#stage{height:440px}.screens{grid-template-columns:repeat(4,1fr);gap:5px}.screens button{padding:5px}.screens span{font-size:10px}.details{margin-top:22px}footer{flex-direction:column;margin-top:0;padding:20px 6%}}@media(max-width:400px){#stage{height:390px}.view-controls button{padding:8px 10px;font-size:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Vendored into a gruvbox site: follow it rather than the viewer's own paper.
   The canvas clears to transparent, so the body colour is what shows behind
   the model, and its ink-black body still separates from this one. */
:root{color-scheme:dark;--paper:#282828;--ink:#ebdbb2;--muted:#a89984;--line:#504945;--accent:#8ec07c}
button:hover,.upload:hover{background:#3c3836}
button[aria-pressed=true],
body.embed .view-controls button[aria-pressed=true],
.screens button[aria-pressed=true]{background:#8ec07c;border-color:#8ec07c;color:#1d2021}
body.embed .view-controls button{background:#32302f}
#screen-caption{font-size:12px;text-align:center;color:var(--muted);margin:0 0 12px;letter-spacing:.3px}
body.embed #stage:focus-visible{outline:none}
body.embed #stage[data-keyboard]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}