@font-face{font-family:"Paper Mono";src:url("/ascii/paper-mono.woff2") format("woff2");font-weight:100 800;font-display:swap}
:root{color-scheme:dark;--bg:#131518;--ink:#e8ebef;--text:#c3c9d1;--muted:#8c95a1;--well:#1a1d21;font-family:"Paper Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-synthesis:none;font-variant-ligatures:none}
*{box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
h1,h2,p,ol{margin:0;padding:0;font-size:inherit;font-weight:400}
ol{list-style:none}
a,button,code{font:inherit;color:inherit}
a{text-decoration:none}
button{border:0;border-radius:0;background:none;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
a:hover,button:hover{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
::selection{background:var(--ink);color:var(--bg)}

.gallery{display:grid;grid-template-columns:180px minmax(0,1fr);grid-template-rows:max-content minmax(0,1fr);gap:28px 40px;width:100%;height:100svh;max-width:1500px;margin:auto;padding:32px}
.masthead{grid-column:1;grid-row:1}
.pieces{grid-column:1;grid-row:2;align-self:start;min-width:0}
.masthead h1{color:var(--ink);white-space:nowrap}
.home{color:var(--muted)}
.home:hover{color:var(--ink)}
.slash{color:var(--muted)}
.label{display:flex;justify-content:space-between;margin:0 0 10px;color:var(--muted)}
.pieces ol{display:grid;gap:2px;margin:0 -10px}
.pieces button,.reorder-ghost button{display:flex;align-items:center;width:100%;min-height:32px;padding:4px 10px;text-align:left;white-space:nowrap}
.pieces button[aria-pressed=true]{background:var(--well);color:var(--ink)}
.pieces button:focus-visible{outline-offset:0}
.number{min-width:2ch;margin-right:2ch;color:var(--muted);font-variant-numeric:tabular-nums}
[aria-pressed=true] .number{color:var(--text)}

.piece{grid-column:2;grid-row:2;min-width:0;min-height:0;display:grid;place-items:center}
.stage{position:relative;width:100%;height:100%;max-height:720px;min-height:0;margin:0}
canvas{display:block;width:100%;height:100%}
#status{position:absolute;inset:0;display:grid;place-items:center;padding:24px;color:var(--muted);text-align:center;pointer-events:none}
#status:empty{display:none}

.command{grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 16px;min-width:0;min-height:1.6em;padding:0}
/* Keep the command row in the layout when a landscape hides its controls. */
.command[hidden]{display:grid;visibility:hidden;height:1.6em}
.command code{display:block;min-width:0;min-height:1.6em;color:var(--ink);white-space:nowrap;overflow-wrap:normal;overflow-x:auto;line-height:1.6;scrollbar-width:thin}
.command button{min-width:7ch;min-height:1.6em;color:var(--muted);text-align:right;white-space:nowrap}
.command button:hover{color:var(--ink)}
.noscript{grid-column:2;margin-top:16px;color:var(--muted)}

@media(max-width:900px){
.gallery{grid-template-columns:minmax(0,1fr);grid-template-rows:max-content max-content max-content minmax(0,1fr);gap:16px;padding:24px 20px}
.masthead{grid-column:1;grid-row:1}
.command{grid-column:1;grid-row:2}
.pieces{grid-column:1;grid-row:3;position:static}
.piece{grid-column:1;grid-row:4}
.label{display:block;margin:0 0 6px}
.pieces ol{grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 4px;margin:0 -6px}
.pieces button{min-height:32px;padding:4px 6px;line-height:1.4;white-space:normal}
.number{margin-right:.75ch;flex-shrink:0}
.stage{max-height:min(56vw,600px)}
.noscript{grid-column:1;margin-top:0}
}

@media(max-width:600px){
.gallery{gap:14px;padding:20px 16px}
.command{column-gap:12px}
.pieces ol{grid-template-columns:repeat(auto-fit,minmax(144px,1fr))}
.number{margin-right:.5ch}
.stage{max-height:min(82vw,420px)}
}

@media(max-width:360px){.pieces ol{grid-template-columns:repeat(2,minmax(0,1fr))}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.reorder-ready .pieces button{cursor:grab;user-select:none}
.is-reordering,.is-reordering *{cursor:grabbing!important;user-select:none}
.pieces li{position:relative}
.pieces .is-dragging{outline:1px dashed #454c56;outline-offset:-1px;background:var(--well)}
.pieces .is-dragging button{opacity:0}
.reorder-ghost{position:fixed;z-index:10;list-style:none;pointer-events:none;background:var(--well);color:var(--ink);outline:1px solid #454c56;box-shadow:0 8px 24px #0005;will-change:transform;transform-origin:center}
.reorder-ghost button{height:100%;color:var(--ink)}
@media(max-width:900px){.reorder-ghost button{padding:4px 6px;line-height:1.4;white-space:normal}}
@media(prefers-reduced-motion:reduce){.reorder-ghost{box-shadow:none}}

@media(max-width:360px){
.pieces button{min-height:26px;padding:3px 6px}
}

/* Stage dimensions always come from the remaining viewport, including rotating models. */
.stage.rotating{height:100%;max-height:1008px}
@media(max-width:900px){.stage.rotating{max-height:min(78.4vw,840px)}}
@media(max-width:600px){.stage.rotating{max-height:min(114.8vw,588px)}}

/* Short windows use more list columns so every item remains accessible. */
@media(min-width:901px) and (max-height:850px){
.gallery{grid-template-columns:300px minmax(0,1fr);padding:24px;gap:20px 32px}
.pieces ol{grid-template-columns:repeat(2,minmax(0,1fr))}
.number{margin-right:.75ch}
}
@media(min-width:601px) and (max-width:900px) and (max-height:500px){
.gallery{padding:12px 16px;gap:8px}
.pieces ol{grid-template-columns:repeat(5,minmax(0,1fr))}
.pieces button{min-height:26px;padding:3px 6px}
}

@media(min-width:901px) and (max-height:450px){
.gallery{grid-template-columns:420px minmax(0,1fr);padding:16px;gap:16px 24px}
.pieces ol{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px) and (max-height:650px){
.gallery{padding:12px 16px;gap:8px}
.pieces button{min-height:26px;padding:3px 6px}
}
@media(min-width:361px) and (max-width:600px) and (max-height:650px){
.pieces ol{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:360px) and (max-height:400px){
.pieces ol{grid-template-columns:repeat(3,minmax(0,1fr))}
}