:root{--yellow:#ffe500;--ink:#0a0a0a;--ink-soft:#0a0a0a9e;--page:#f5f5f5;--wall-light:#e6e6e4;--wall-dark:#c6c6c4;--canvas-depth:7px;--hang:calc(var(--canvas-depth) / 2);--canvas-area:#050505;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.15 0 0 0 0 0.13 0.5 0 0 0 -0.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--sans:"Helvetica Neue", Helvetica, Arial, sans-serif;--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--travel:.85s cubic-bezier(.22, .8, .2, 1);--reveal:1.25s cubic-bezier(.22, .8, .2, 1);--frame:12px;font-family:var(--sans);color:var(--ink);background:var(--page);font-size:15px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}html,body{overscroll-behavior-x:none}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible,label:focus-within{outline:2px solid var(--ink);outline-offset:2px}.app{height:100%;padding:var(--frame);flex-direction:column;display:flex}.app[data-dropping] .home,.app[data-dropping] .editor{outline:4px solid var(--yellow);outline-offset:-4px}.pill{white-space:nowrap;border-radius:999px;min-height:36px;padding:0 16px;font-size:15px}.pill-dark{background:var(--ink);color:#fff}.pill-light{color:var(--ink);background:#fff}.pill-small{min-height:28px;padding:0 12px;font-size:13px;box-shadow:0 1px 6px #00000040}.link{white-space:nowrap;min-height:36px}.link:hover:not(:disabled){text-underline-offset:3px;text-decoration:underline}.wordmark{white-space:nowrap;font-size:16px;font-weight:500}.home,.crop-screen{background:radial-gradient(ellipse 75% 70% at 50% 42%, var(--wall-light), var(--wall-dark));border-radius:20px;flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.home>.home-nav{z-index:8;position:absolute;top:0;left:0;right:0}:is(.home:has(.wall[data-scrolls])>.home-nav,.home:has(.wall[data-walked])>.home-nav){background:var(--wall-light)}.home-nav{flex-wrap:wrap;flex:none;align-items:center;gap:8px 24px;min-height:56px;padding:8px 16px;display:flex}.home-status{color:var(--ink-soft)}.home-actions,.editor-actions{align-items:center;gap:20px;margin-left:auto;display:flex}.editor-save{align-items:center;gap:6px;display:flex}.editor-save>span{margin-right:4px}.wall{flex:1;min-height:0;position:relative;overflow:hidden}.wall[data-scrolls]{overflow:hidden auto}.wall-inner{min-height:100%;transform-style:preserve-3d;position:relative}.room-back,.room-side,.room-ceiling,.room-floor,.track,.spot{pointer-events:none;display:block;position:absolute}.room-back{background:var(--grain), radial-gradient(ellipse 80% 70% at 50% 18%, #fffdf880, transparent 70%), linear-gradient(to bottom, #e3e1dc, #dddbd5 70%, #d2d0ca);overflow:hidden;box-shadow:inset 0 -2px #2e2b278c,inset 0 -46px 50px -38px #28241e29,inset 70px 0 80px -60px #28241e24,inset -70px 0 80px -60px #28241e24,inset 0 60px 70px -50px #28241e1a}.work-pool{background:radial-gradient(50% 46% at 50% 40%,#fffaeeb8,#fff8ea4d 58%,#0000);display:block;position:absolute}.room-side[data-side=left]{transform-origin:100%;background:var(--grain), linear-gradient(to left, #28241e29, transparent 18%), linear-gradient(to bottom, #dcdad4, #d3d1cb 80%, #c9c7c1);transform:rotateY(90deg);box-shadow:inset 0 -2px #2e2b2759}.room-side[data-side=right]{transform-origin:0;background:var(--grain), linear-gradient(to right, #28241e29, transparent 18%), linear-gradient(to bottom, #dcdad4, #d3d1cb 80%, #c9c7c1);transform:rotateY(-90deg);box-shadow:inset 0 -2px #2e2b2759}.room-ceiling{transform-origin:bottom;background:var(--grain), linear-gradient(to top, #28241e24, transparent 25%), #e9e8e4;transform:rotateX(-90deg)}.track{height:6px;transform:translateZ(var(--out));background:linear-gradient(#4a4845,#1d1c1b 40%,#121211)}.spot{width:16px;height:24px;transform:translateZ(var(--out)) rotateX(-28deg);transform-origin:top;background:linear-gradient(90deg,#111,#3a3937 45%,#111);border-radius:3px 3px 8px 8px}.room-floor{transform-origin:top;background:var(--grain), repeating-linear-gradient(90deg, #1e1c1912 0 1px, transparent 1px 25%), repeating-linear-gradient(to bottom, #1e1c190f 0 1px, transparent 1px 420px), radial-gradient(ellipse 55% 16% at 50% 0, #fffcf480, transparent), linear-gradient(to bottom, #1e1b162e, transparent 3%), var(--mottle), linear-gradient(to bottom, #c4c1ba, #a7a49d 30%, #95928b);transform:rotateX(90deg)}.bench{pointer-events:none;height:46px;transform:translateZ(var(--out));transform-style:preserve-3d;--half:46px;position:absolute}.bench i{display:block;position:absolute}.bench-top{height:calc(var(--half) * 2);transform-origin:top;transform:translateZ(calc(var(--half) * -1)) rotateX(90deg);background:var(--grain), repeating-linear-gradient(90deg, #5a462d0f 0 1px, transparent 1px 9px, #5a462d0a 9px 10px, transparent 10px 23px), linear-gradient(to bottom, #c3bdae, #cdc7b9);top:0;left:0;right:0}.bench-front{height:12px;transform:translateZ(var(--half));background:var(--grain), linear-gradient(to bottom, #aaa395, #958e80);top:0;left:0;right:0}.bench-end{width:calc(var(--half) * 2);transform-origin:0;height:12px;transform:translateZ(var(--half)) rotateY(90deg);background:#8f8b81;top:0}.bench-end[data-side=left]{left:0}.bench-end[data-side=right]{left:100%}.bench-leg{background:#7d7a71;width:10px;height:34px;top:12px}.bench-leg[data-at$=left]{left:6%}.bench-leg[data-at$=right]{right:6%}.bench-leg[data-at^=front]{transform:translateZ(calc(var(--half) - 8px))}.bench-leg[data-at^=back]{transform:translateZ(calc(8px - var(--half)))}.bench-shadow{height:calc(var(--half) * 2);transform-origin:top;transform:translateZ(calc(var(--half) * -1)) rotateX(90deg);background:radial-gradient(closest-side,#00000052,#00000029 70%,#0000);top:45px;left:-4%;right:-4%}.work-shade{pointer-events:none;box-shadow:var(--cast-x) 5px 8px 0 #00000042, var(--cast-x) 14px 26px 2px #00000024;background:#0003;transition:opacity .3s;display:block;position:absolute;transform:translateZ(1px)}.work-shade[data-gone]{opacity:0}.home[data-arriving] .work-shade{animation:cast var(--reveal) backwards;animation-delay:var(--hang-delay)}@keyframes cast{0%{opacity:0}}.work{transform-origin:50%;transform-style:preserve-3d;transition:transform var(--travel);cursor:grab;display:block;position:absolute}.wall:not([data-scrolls]) .work{touch-action:none}.wall[data-scrolls] .work{touch-action:pan-y}.work[data-focused]{cursor:default}.work[data-choosing],.work[data-dimmed]{cursor:pointer}.work[data-carried]{cursor:grabbing;transition:none}.work:focus-visible{outline:none}.work:focus-visible .work-card:before{content:"";transform:translateZ(calc(var(--canvas-depth) / 2 + 1px));border:2px solid var(--ink);position:absolute;inset:-6px}.wall[data-rearranging] .work:not([data-carried]){transition:transform var(--travel), left .45s cubic-bezier(.22, .8, .2, 1), top .45s cubic-bezier(.22, .8, .2, 1), width .45s cubic-bezier(.22, .8, .2, 1), height .45s cubic-bezier(.22, .8, .2, 1)}.wall[data-rearranging] .work-shade,.wall[data-rearranging] .work-pool,.wall[data-rearranging] .spot{transition:opacity .3s,left .45s cubic-bezier(.22,.8,.2,1),top .45s cubic-bezier(.22,.8,.2,1),width .45s cubic-bezier(.22,.8,.2,1),height .45s cubic-bezier(.22,.8,.2,1)}.work-hang{width:100%;height:100%;transform-style:preserve-3d;transform-origin:50%;transform:translateZ(var(--hang));transition:transform var(--travel);display:block}.work:not([data-focused],[data-dimmed]):hover .work-hang{transform:translateZ(calc(var(--hang) + 34px))}.work[data-chosen] .work-hang,.work[data-chosen]:not([data-focused],[data-dimmed]):hover .work-hang{transform:translateZ(calc(var(--hang) + 56px))}.work[data-focused] .work-hang{transform:none}.work[data-carried] .work-hang,.work[data-carried]:not([data-focused],[data-dimmed]):hover .work-hang{transform:translateZ(calc(var(--hang) + 70px))}.home[data-arriving] .work-hang{animation:hang var(--reveal) backwards;animation-delay:var(--hang-delay)}@keyframes hang{0%{transform:translateZ(calc(var(--hang) + 90px)) translateY(-36px)}}.work-card{width:100%;height:100%;transform-style:preserve-3d;transition:transform var(--travel);display:block;position:relative}.work-card[data-flipped]{transform:rotateY(180deg)}.work-edge{background-image:linear-gradient(rgb(0 0 0/var(--edge-shade)), rgb(0 0 0/var(--edge-shade))), var(--front);background-size:auto, var(--w) var(--h);transition:filter var(--travel);background-color:#dcdad5;display:block;position:absolute}.work-edge[data-side=left],.work-edge[data-side=right]{--edge-shade:.22;width:var(--canvas-depth);height:100%;margin-left:calc(var(--canvas-depth) / -2);top:0;transform:rotateY(90deg)}.work-edge[data-side=left]{background-position:0 0,0;left:0}.work-edge[data-side=right]{background-position:0 0,100%;left:100%}.work-edge[data-side=top],.work-edge[data-side=bottom]{width:100%;height:var(--canvas-depth);margin-top:calc(var(--canvas-depth) / -2);left:0;transform:rotateX(90deg)}.work-edge[data-side=top]{--edge-shade:.04;background-position:0 0,top;top:0}.work-edge[data-side=bottom]{--edge-shade:.45;background-position:0 0,bottom;top:100%}.work[data-dimmed] .work-face,.work[data-dimmed] .work-edge{filter:blur(calc(7px * var(--sharp)))}.work-check{transform:translateZ(calc(var(--canvas-depth) / 2 + 1px));border:1px solid var(--ink);width:24px;height:24px;color:var(--ink);background:#fff;justify-content:center;align-items:center;font-size:15px;line-height:1;display:flex;position:absolute;top:8px;left:8px}.work[data-chosen] .work-check{background:var(--yellow)}.work[data-chosen] .work-card:after{content:"";transform:translateZ(calc(var(--canvas-depth) / 2 + 1px));box-shadow:inset 0 0 0 5px var(--yellow), inset 0 0 0 6px var(--ink);position:absolute;inset:0}.work-face{width:calc(100% * var(--sharp));height:calc(100% * var(--sharp));backface-visibility:hidden;transform-origin:0 0;transition:filter var(--travel);display:block;position:absolute;top:0;left:0;overflow:hidden}.work-front{transform:translateZ(calc(var(--canvas-depth) / 2)) scale(calc(1 / var(--sharp)))}.work-front img,.work-back img{object-fit:cover;width:100%;height:100%;display:block}.work-back{transform:translateX(var(--w)) rotateY(180deg) translateZ(calc(var(--canvas-depth) / 2)) scale(calc(1 / var(--sharp)));background:var(--yellow);color:var(--ink);font-family:var(--mono);text-align:left}.work-back-name,.work-back-count{left:calc(8px * var(--sharp));font-size:calc(9px * var(--sharp));background:var(--yellow);padding:calc(1px * var(--sharp)) calc(3px * var(--sharp));line-height:1.2;position:absolute}.work-back-name{top:calc(8px * var(--sharp))}.work-back-count{bottom:calc(8px * var(--sharp))}.wall-empty{text-align:center;width:min(560px,100% - 48px);position:absolute;left:50%;transform:translate(-50%)translateZ(2px)}.wall-empty h1{letter-spacing:-.01em;margin:0 0 8px;font-size:40px;font-weight:500}.wall-empty p{color:var(--ink-soft);margin:0}.wall-front{z-index:6;pointer-events:none;width:100%;position:absolute;top:0;left:0}.wall-front>*{pointer-events:auto}.wall-flip{z-index:6;position:absolute}.wall-open{z-index:6;position:absolute;transform:translate(-50%)}.crop-stage{flex:1;min-height:0;padding:8px 40px 40px;display:flex}.crop-fit{flex:1;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex}.crop-frame{touch-action:none;-webkit-user-select:none;user-select:none;position:relative;box-shadow:0 10px 30px #00000040}.crop-frame canvas{width:100%;height:100%;display:block}.crop-dim{pointer-events:none;position:absolute;inset:0;overflow:hidden}.crop-shade{position:absolute;box-shadow:0 0 0 100vmax #d6d6d4cc}.crop-box{outline:2px solid var(--yellow);border:1px solid var(--ink);cursor:move;position:absolute}.crop-handle{position:absolute}.crop-handle:after{content:"";border:1px solid var(--ink);background:#fff;width:12px;height:12px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.crop-handle:focus-visible:after{background:var(--yellow)}.crop-handle[data-edge=n],.crop-handle[data-edge=s]{cursor:ns-resize;height:44px;left:22px;right:22px}.crop-handle[data-edge=e],.crop-handle[data-edge=w]{cursor:ew-resize;width:44px;top:22px;bottom:22px}.crop-handle[data-edge=n]{top:-22px}.crop-handle[data-edge=s]{bottom:-22px}.crop-handle[data-edge=w]{left:-22px}.crop-handle[data-edge=e]{right:-22px}.crop-handle[data-edge=nw],.crop-handle[data-edge=ne],.crop-handle[data-edge=sw],.crop-handle[data-edge=se]{width:44px;height:44px}.crop-handle[data-edge=nw]{cursor:nwse-resize;top:-22px;left:-22px}.crop-handle[data-edge=ne]{cursor:nesw-resize;top:-22px;right:-22px}.crop-handle[data-edge=sw]{cursor:nesw-resize;bottom:-22px;left:-22px}.crop-handle[data-edge=se]{cursor:nwse-resize;bottom:-22px;right:-22px}.editor{background:var(--yellow);min-height:0;animation:wipe-open var(--reveal) both;border-radius:20px;flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}@keyframes wipe-open{0%{clip-path:inset(0 100% 0 0 round 20px)}to{clip-path:inset(0 round 20px)}}.editor-nav{flex-wrap:wrap;flex:none;align-items:center;gap:4px 24px;min-height:52px;padding:6px 12px 6px 16px;display:flex}.editor-status{font-family:var(--mono);font-size:13px}.editor-body{flex:1;gap:8px;min-height:0;padding:0 8px 8px;display:flex}.title-column{flex-direction:row-reverse;flex:none;justify-content:flex-end;align-items:flex-end;gap:2px;min-width:0;display:flex;overflow:hidden}.title-big{writing-mode:vertical-rl;letter-spacing:-.02em;white-space:nowrap;cursor:text;text-underline-offset:.1em;outline:none;align-self:stretch;min-width:.82em;font-weight:500;line-height:.82;text-decoration-line:underline;text-decoration-color:#0000;text-decoration-thickness:3px;transform:rotate(180deg)}.title-big:hover,.title-big:focus{text-decoration-color:#0a0a0a59}.title-small{writing-mode:vertical-rl;font-family:var(--mono);white-space:nowrap;font-size:12px;transform:rotate(180deg)}.panel{width:300px;min-height:0;font-family:var(--mono);cursor:grab;flex-direction:column;flex:none;gap:8px;font-size:13px;display:flex;overflow-y:auto}.panel[data-dragging]{cursor:grabbing;-webkit-user-select:none;user-select:none}.layers li{cursor:default}@media (width>=900px){.panel[data-floating]{z-index:5;background:var(--yellow);max-height:100%;padding:8px;position:absolute;box-shadow:0 10px 30px #0006}.panel[data-floating] .card-layers{flex:none}.panel[data-floating] .layers{flex:none;max-height:216px}}.card{border:1px solid var(--ink);flex:none;padding:8px 10px 10px}.card h2{justify-content:space-between;margin:0 0 8px;font-size:13px;font-weight:400;display:flex}.note{margin:0;line-height:1.4}.row{flex-wrap:wrap;gap:4px;display:flex}.row+.row{margin-top:4px}.card .row button{border:1px solid var(--ink);min-height:32px;padding:0 8px;font-family:inherit;font-size:12px}.card .row button:hover:not(:disabled),.card .row button[aria-pressed=true]{background:var(--ink);color:var(--yellow)}.slider{margin:10px 0;display:block}.slider-name{margin-bottom:4px;display:block}.slider-track{align-items:center;gap:8px;font-size:12px;display:flex}.slider input{min-width:0;accent-color:var(--ink);flex:1}.card-layers{flex-direction:column;flex:120px;min-height:120px;display:flex}.layers{flex:1;min-height:0;margin:0 -10px -10px;padding:0;list-style:none;overflow-y:auto}.layers li{touch-action:none;-webkit-user-select:none;user-select:none;align-items:center;height:36px;padding:0 10px;display:flex}.layers li:hover{background:#0a0a0a14}.layers li[data-selected]{background:var(--ink);color:var(--yellow)}.layers li[data-target=above]{box-shadow:inset 0 2px 0 var(--ink)}.layers li[data-target=below]{box-shadow:inset 0 -2px 0 var(--ink)}.layers li[data-dragging]{opacity:.5}.layer-pick{text-align:left;flex:1;align-items:center;gap:8px;min-width:0;height:100%;font-family:inherit;font-size:12px;display:flex}.layer-pick canvas{background:var(--wall-dark);pointer-events:none;flex:none}.layer-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tray{flex-wrap:wrap;gap:6px;display:flex}.tray:empty{display:none}.tray-item{position:relative}.tray-mark{border:1px solid var(--ink);background:var(--wall-dark);touch-action:none;cursor:grab;justify-content:center;align-items:center;width:60px;height:60px;display:flex}.tray-delete{background:var(--ink);width:24px;height:24px;color:var(--yellow);opacity:0;font-size:15px;line-height:1;position:absolute;top:0;right:0}.tray-item:hover .tray-delete,.tray-delete:focus-visible{opacity:1}@media (hover:none){.tray-delete{opacity:1}}.tray-mark canvas,.traveling canvas{pointer-events:none;display:block}.traveling{z-index:10;pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed}.stage{background:var(--canvas-area);flex:1;justify-content:center;align-items:center;min-width:0;min-height:0;padding:24px;display:flex;position:relative}.stage canvas{touch-action:none;-webkit-user-select:none;user-select:none;max-width:100%;max-height:100%;display:block}.progress{transform-origin:0;background:#fff;height:3px;position:absolute;top:0;left:0;right:0}@media (width<=899px){:root{--frame:0px}.home,.crop-screen,.editor{border-radius:0}.editor-body{flex-direction:column}.title-column{display:none}.stage{order:-1;padding:12px}.panel{width:auto;height:228px}.home-actions,.editor-actions{flex-wrap:wrap;gap:8px 14px}.crop-stage{padding:8px 24px 24px}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}