.stage{position:relative;height:calc(100svh - var(--bar));min-height:460px;background:var(--ink);overflow:hidden;cursor:grab;touch-action:pan-y;isolation:isolate}.stage:active{cursor:grabbing}.stage>canvas{display:block;width:100%;height:100%}.stage-blind:after{content:"this browser will not draw him — but every word on this screen is still exactly what he is.";position:absolute;inset:0;display:grid;place-items:center;padding:40px;color:#a49b88;font-size:12px;text-align:center}.stage-over{position:absolute;inset:0;pointer-events:none}.stage-over>*{pointer-events:auto}.door-say,.guy-say,.wall-head{animation:rise-in .22s steps(3) both}.guy-build{animation:drop-in .22s steps(3) both .06s}.rail-wrap{animation:rise-in .3s steps(3) both .1s}.stage-over .legend,.stage-over .corner{animation:flash-in .3s steps(2) both .18s}.door-say{position:absolute;left:28px;top:28px;background:var(--paper);border:1px solid var(--mist);padding:24px 26px 22px;max-width:min(50ch,calc(100vw - 56px));display:flex;flex-direction:column;gap:var(--gap);align-items:flex-start}.door-say .hero{margin:6px 0 0}.door-lede{color:var(--graphite);font-size:15px;margin:12px 0 6px}.door-form{display:flex;flex-direction:column;gap:var(--gap);width:100%}.door-field{flex:1 1 200px;min-width:0}.door-hint{min-height:2.6em;margin:0;max-width:46ch}.door-hint i{font-style:normal;color:var(--ink)}.rail-wrap{position:absolute;left:0;right:0;bottom:0;padding:0 0 22px}.rail-cap{margin:0 0 6px 28px;width:fit-content;padding:3px 7px;font-size:10px;letter-spacing:3px;text-transform:uppercase;background:var(--scrim);color:#a49b88}.rail{display:flex;gap:8px;padding:6px 28px 2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}.rail-cell{flex:none;width:96px;text-decoration:none;display:block;position:relative;transition:transform .1s steps(2)}.rail-cell:hover{transform:translateY(-4px)}.rail-cell:active{transform:translateY(-1px)}.rail-tile{width:96px;height:96px;background:var(--void);border:1px solid var(--void);line-height:0;display:block}.rail-tile .still{width:100%;height:100%;display:block}.rail-cell b{position:absolute;left:1px;right:1px;bottom:1px;padding:2px 5px;font-size:9px;letter-spacing:2px;font-weight:400;line-height:1.4;background:var(--scrim);color:#cfc7b4}.rail-cell:hover b{color:var(--paper)}.guy-say{position:absolute;left:28px;top:28px;background:var(--paper);border:1px solid var(--mist);padding:22px 24px;max-width:min(46ch,calc(100vw - 56px));min-width:min(340px,calc(100vw - 56px));display:flex;flex-direction:column;gap:var(--gap);align-items:flex-start}.guy-say .guy-name{margin:4px 0 0;animation:rise-in .26s steps(3) both .04s}.guy-epithet{color:var(--graphite);font-size:14px;margin:6px 0 0}.guy-quirk{margin:0}.guy-chips{margin-top:10px;gap:0}.guy-actions{flex-wrap:wrap}.guy-actions{margin-top:12px}.star{font-size:13px}.guy-build{position:absolute;right:28px;top:28px;background:var(--paper);border:1px solid var(--mist);padding:16px 18px;width:250px;max-width:calc(100vw - 56px)}.bars{display:flex;flex-direction:column;gap:6px;margin-top:10px}.bar-row{display:grid;grid-template-columns:5.5ch 1fr 2ch;gap:8px;align-items:center}.bar-k{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--smoke)}.bar-v{font-size:11px;color:var(--ink);text-align:right}.bar-track{display:block;height:8px;background:var(--shell);border:1px solid var(--mist)}.bar-fill{display:block;height:100%;background:var(--ink)}.wall-page{position:relative;height:calc(100svh - var(--bar));overflow:hidden}.wall-box{position:absolute;inset:0;background:var(--bone);overflow:hidden;cursor:grab;touch-action:none}.wall-box.dragging{cursor:grabbing}.wall-field{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}.wall-cell{position:absolute;border:1px solid var(--void);background:var(--ink);line-height:0}.wall-cell .still{display:block;width:100%;height:100%}.wall-cell.on{outline:2px solid var(--screen);outline-offset:1px}@keyframes cell-in{0%{opacity:0}to{opacity:1}}.wall-cell .still{animation:cell-in .2s steps(3) both}.wall-cell .cap{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;font-size:9px;letter-spacing:1px;color:#cfc7b4;background:var(--scrim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.wall-head{position:absolute;left:24px;top:24px;z-index:3;background:var(--paper);border:1px solid var(--mist);padding:14px 16px;max-width:min(56ch,calc(100vw - 48px));display:flex;flex-direction:column;gap:8px;align-items:flex-start}.wall-head .row{gap:10px}.wall-head .hint{margin:0}.wall-hint{position:absolute;right:0;bottom:0;z-index:3;margin:0;pointer-events:none;padding:5px 10px;background:var(--scrim);color:#a49b88}.stage-over .corner{transition:opacity .3s steps(3),color .3s steps(3)}.stage-over .corner.loud{color:#efe9dc;padding:7px 12px}.stage-over .corner.used{opacity:.5}.door-over .legend{inset:0 0 auto auto}.kept-page,.design-page{padding:40px 20px 96px}.kept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}.kept-card{display:flex;flex-direction:column;gap:6px}.kept-open{display:flex;flex-direction:column;gap:6px;text-decoration:none}.kept-card .screen{aspect-ratio:1 / 1}.kept-card b{font-family:var(--display);font-weight:700;font-size:13px;color:var(--ink)}.kept-post{align-self:flex-start;font-size:10px;letter-spacing:2px;color:var(--smoke);text-decoration:none;border-bottom:1px solid var(--mist);padding-bottom:1px}.kept-post:hover{color:var(--ink);border-bottom-color:var(--ink)}.kept-empty{padding:40px 0;display:flex;flex-direction:column;align-items:flex-start;gap:22px}.kept-empty .hint{max-width:70ch}.doc-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:8px}.doc-head .title{margin-right:auto}.design-page section{max-width:900px}.design-page section+section{margin-top:var(--section)}.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}.swatch{border:1px solid var(--mist);display:flex;flex-direction:column}.swatch .chip{height:52px}.swatch .meta{padding:6px 8px;background:var(--bone);flex:1}@media(max-width:900px){.door-say,.guy-say{inset:auto 0 0;max-width:none;padding:16px 16px 18px;border-width:1px 0 0}.stage>canvas{height:calc(100% - var(--sheet, 0px))}.guy-build{display:none}.rail-cell,.rail-tile{width:76px}.rail-tile{height:76px}.rail-cap{margin-left:16px}.rail{padding-left:16px;padding-right:16px}.wall-head{left:12px;top:12px;right:12px;max-width:none}.rail-wrap,.stage-over .corner{display:none}.stage-over .legend{inset:0 0 auto auto}}@media(max-height:640px){.rail-wrap{display:none}}