:root{color-scheme:light;--paper:#f1efe7;--ink:#252623;--pink:#ff8fac;--lime:#d6f76a}
/* Artwork is not selectable page text. Keyboard focus is still visible on Tab. */
#viewport{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#viewport:focus-visible:not(.keyboard-focus){outline:none}
#overview-image,#overview-canvas{position:absolute;inset:0;width:3200px;height:2000px;pointer-events:none}
#draft-sticker{outline:none;pointer-events:none}
#draft-box{position:absolute;border:2px solid var(--lime);transform-origin:center;cursor:move;z-index:2;touch-action:none}
.box-corner{position:absolute;width:8px;height:8px;background:var(--lime);border:1px solid #27331e;pointer-events:none}
.corner-tl{top:-5px;left:-5px}.corner-tr{top:-5px;right:-5px}.corner-bl{bottom:-5px;left:-5px}.corner-br{bottom:-5px;right:-5px}
#draft-box:before{content:'';position:absolute;bottom:100%;height:28px;left:50%;border-left:2px solid var(--lime);pointer-events:none}
#rotate-handle{position:absolute;left:50%;top:-30px;transform:translate(-50%,-50%);width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;padding:0;cursor:grab;touch-action:none}
#rotate-handle span{display:grid;place-items:center;width:32px;height:32px;background:var(--lime);color:#222c1e;border:1px solid #27331e;border-radius:50%;font:24px Arial,sans-serif;box-shadow:0 2px 4px #17231566;pointer-events:none}
#rotate-handle:active{cursor:grabbing}


*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'Noto Sans',Meiryo,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{cursor:wait;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,#viewport:focus-visible{outline:3px solid #bf2260;outline-offset:4px}[hidden]{display:none!important}
.wall-header{height:65px;margin:0 3.5%;display:flex;gap:24px;align-items:center;border-bottom:1px solid #c5c5bc}.wordmark{font-size:14px;letter-spacing:3px}.wordmark b{letter-spacing:0;border-left:1px solid #aaa99d;margin-left:10px;padding-left:12px;font-weight:900}.header-caption{font:10px monospace;letter-spacing:1.4px;margin:auto}.back-link{font-size:12px;border:0;background:none;padding:12px 0}.wall-intro{display:flex;align-items:center;justify-content:space-between;gap:4%;margin:28px 3.5% 25px}.eyebrow{font:10px monospace;letter-spacing:2px}h1{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-stretch:condensed;letter-spacing:-3px;font-size:clamp(48px,6.6vw,88px);font-weight:900;line-height:.94;margin:7px 0 0;white-space:nowrap}h1 span{display:block}h1 i{font-family:Arial,sans-serif;font-style:normal;color:#e75e84;position:absolute;transform:translate(185px,-73px) rotate(6deg);font-size:65px}.intro-copy{flex:1;padding-left:25px}.intro-copy p{font-size:17px;font-weight:700;margin:0 0 12px;line-height:1.6}.intro-copy small{font-size:11px;line-height:1.8;display:block;max-width:285px;color:#66665f}.entry-actions{display:flex;flex-direction:column;align-items:stretch;gap:9px}.primary{border:1px solid var(--ink);background:var(--ink);color:#fff;padding:15px 21px;font-size:13px;font-weight:700;text-align:center;box-shadow:3px 3px 0 var(--pink);white-space:nowrap}.primary:hover{background:#41433c}.text-button{background:none;border:0;font-size:12px;padding:10px 14px}.text-button span{margin-left:16px}.text-button:hover{text-decoration:underline}
.wall-frame{margin:0 3.5%;border:1px solid #34352f;background:#626663}.wall-topline{height:35px;background:var(--ink);color:#e8e9e0;display:flex;justify-content:space-between;align-items:center;padding:0 16px;font:10px monospace;letter-spacing:1px}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:9px}#viewport{height:clamp(390px,59vh,700px);position:relative;overflow:hidden;touch-action:none;cursor:grab;background:#50554f;isolation:isolate}#viewport:active{cursor:grabbing}#world{position:absolute;width:3200px;height:2000px;transform-origin:0 0;will-change:transform;background-color:#797f76;background-image:radial-gradient(ellipse at 32% 24%,#c2c2a238,transparent 58%),radial-gradient(ellipse at 68% 76%,#29392a45,transparent 47%),repeating-linear-gradient(0deg,transparent 0 396px,#424a4460 397px,#a2a89c88 399px,transparent 401px),repeating-linear-gradient(90deg,transparent 0 798px,#424a4480 799px,#a4ac9c77 801px,transparent 804px),repeating-linear-gradient(127deg,#ffffff04 0 1px,#00000004 1px 3px,transparent 3px 7px)}#world:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:radial-gradient(#152f20 0.6px,transparent .9px),radial-gradient(#d8dac4 0.8px,transparent 1.2px);background-size:9px 11px,13px 17px;background-position:0 0,5px 7px}.wall-paint{position:absolute;font-family:Impact,'Arial Narrow',sans-serif;font-size:170px;font-weight:900;line-height:.86;letter-spacing:-6px;transform:rotate(-8deg);color:#d6d9b4;opacity:.37}.wall-paint em{font-style:normal;color:#edc6c9}.paint-one{left:1020px;top:580px}.paint-two{left:1920px;top:1110px;font-size:140px;transform:rotate(8deg);opacity:.25}.wall-tag{position:absolute;font:18px monospace;letter-spacing:5px;color:#d4d8c6;opacity:.5}.tag-one{left:1180px;top:1420px;transform:rotate(-90deg)}.tag-two{left:1770px;top:670px;transform:rotate(-5deg)}.sticker{position:absolute;pointer-events:none;transform-origin:center;filter:drop-shadow(1px 3px 1px #15231588)}.sticker img{display:block;width:100%;height:100%;object-fit:contain}.sticker.draft{outline:2px dashed var(--lime);outline-offset:9px;filter:drop-shadow(5px 10px 4px #17271977);z-index:2147483647}.sticker.just-posted{animation:stick .28s ease-out}@keyframes stick{from{filter:drop-shadow(7px 13px 7px #17271977);opacity:.7}to{filter:drop-shadow(1px 3px 1px #15231588);opacity:1}}
#empty-wall{position:absolute;top:46%;left:20%;right:20%;text-align:center;color:#fff;font-size:15px;line-height:1.8;pointer-events:none;text-shadow:0 1px 6px #222}#status{position:absolute;top:18px;left:50%;transform:translateX(-50%);max-width:calc(100% - 28px);width:max-content;padding:10px 18px;background:var(--paper);color:var(--ink);font-size:12px;box-shadow:3px 3px 0 #26282355;z-index:3;pointer-events:none}#status:empty{display:none}#retry{position:absolute;top:95px;left:50%;transform:translateX(-50%);padding:10px 15px;background:var(--paper);border:1px solid var(--ink);z-index:3}.zoom-tools{position:absolute;bottom:18px;left:18px;display:flex;align-items:center;background:var(--paper);box-shadow:3px 3px 0 #20282040}.zoom-tools button{border:0;background:transparent;height:40px;min-width:40px;padding:0 12px;font-size:18px}.zoom-tools button:hover{background:#dcdfce}.zoom-tools output{font:11px monospace;min-width:42px;text-align:center}.zoom-tools #overview{font-size:11px;border-left:1px solid #c5c8bd}.latest{position:absolute;bottom:18px;right:18px;padding:12px 14px;border:0;background:var(--paper);font-size:11px;box-shadow:3px 3px 0 #20282040}.wall-caption{display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:35px;padding:9px 15px;background:var(--paper);font-size:10px;color:#686b5e;line-height:1.5}.move-toggle{display:flex;flex-direction:column;gap:3px}.move-toggle button{font-size:10px;min-height:32px;padding:7px 12px;border:1px solid #aeb1a2;background:transparent}.move-toggle button[aria-pressed=true]{background:var(--lime);border-color:var(--ink)}footer{display:flex;justify-content:space-between;gap:15px;margin:20px 3.5%;font:9px monospace;letter-spacing:1.5px;color:#707365}
@media(min-width:1500px){main{max-width:1550px;margin:auto}}
@media(max-width:760px){.wall-header{height:52px;gap:10px}.header-caption{display:none}.back-link{margin-left:auto}.wordmark{font-size:11px;letter-spacing:2px}.wall-intro{gap:12px;flex-wrap:wrap;margin-top:22px;margin-bottom:20px}.wall-intro>div:first-child{width:42%}h1{font-size:60px;letter-spacing:-2px}h1 i{font-size:45px;transform:translate(131px,-51px)}.intro-copy{padding-left:10px}.intro-copy p{font-size:13px;margin-bottom:7px}.intro-copy small{font-size:10px}.entry-actions{flex-direction:row;width:100%;align-items:center;margin-top:5px;gap:8px}.entry-actions .primary{flex:1;padding:13px 12px;font-size:12px}.entry-actions .text-button{font-size:11px;padding:10px 6px}#viewport{height:54dvh;min-height:340px}.zoom-tools{bottom:12px;left:10px}.zoom-tools button{min-width:37px;padding:0 8px}.latest{right:10px;bottom:61px;max-width:160px}.move-toggle{width:100%;flex-direction:row}.move-toggle button{flex:1;min-height:38px}.wall-topline{padding:0 10px;letter-spacing:0;font-size:10px}.wall-caption{font-size:10px;padding:8px 10px}footer{font-size:8px;letter-spacing:.5px}body.embedded .latest{display:none}}
@media(prefers-reduced-motion:reduce){.sticker.just-posted{animation:none}}
/* A clipping viewport must not scroll when a focused handle or button moves. */
#viewport{overflow:clip}
.zoom-tools,.latest{z-index:3}
/* In the maker top, keep page scrolling natural and hide the standalone shell. */
body.wall-preview{height:100dvh;overflow:hidden}
.wall-preview .wall-header,.wall-preview .wall-intro,.wall-preview footer,.wall-preview #placement{display:none}
.wall-preview main{max-width:none;margin:0}
.wall-preview .wall-frame{margin:0;border:0}
.wall-preview #viewport{height:calc(100dvh - 70px);min-height:0;touch-action:pan-y}
.wall-preview .wall-caption{height:35px}
@media(max-width:760px){
 .wall-preview .zoom-tools,.wall-preview .wall-caption{display:none}
 .wall-preview #viewport{height:calc(100dvh - 35px);cursor:default}
}
@media(max-width:760px){body.placing:not(.embedded) .wall-intro>div:first-child{width:100%}body.placing:not(.embedded) h1{font-size:40px}body.placing:not(.embedded) h1 span{display:inline;margin-left:8px}body.placing:not(.embedded) h1 i,body.placing:not(.embedded) .intro-copy{display:none}body.placing:not(.embedded) .wall-intro{margin-top:14px;margin-bottom:14px;gap:8px}body.placing:not(.embedded) #viewport{height:60dvh;min-height:320px}body.placing:not(.embedded) .entry-actions{margin-top:0}}

/* Screen-space actions follow the selected sticker without rotating with it. */
#placement{position:absolute;z-index:4;display:flex;align-items:stretch;gap:5px;width:max-content;max-width:calc(100% - 24px);padding:5px;background:#252b25;border:1px solid #e5f1ce66;border-radius:14px;box-shadow:0 4px 0 #15201566,0 8px 22px #10201640;cursor:default;touch-action:manipulation}
#placement button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 15px;border:0;border-radius:9px;font-size:12px;font-weight:700;line-height:1.3;transition:background .12s,transform .12s}
#placement button span{font:21px Arial,sans-serif;line-height:1}
#cancel{color:#f3f4ed;background:transparent}
#cancel:hover{background:#424b40}
#place{color:#25321d;background:var(--lime);box-shadow:inset 0 -2px 0 #8fba3f}
#place:hover{background:#e5ff95}
#placement button:active:not(:disabled){transform:translateY(1px)}
#placement button:focus-visible{outline-color:#fff;outline-offset:1px}
/* The editor dialog gives the wall all space below its compact header. */
body.embedded{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.embedded .wall-header{height:45px;flex-shrink:0}
body.embedded .wall-intro,body.embedded footer{display:none}
body.embedded main{display:flex;flex-direction:column;flex:1;min-height:0;max-width:none;margin:0;padding:10px 3.5% 12px}
body.embedded .wall-frame{display:flex;flex-direction:column;flex:1;min-height:0;margin:0}
body.embedded .wall-topline,body.embedded .wall-caption{flex-shrink:0}
body.embedded #viewport{height:auto;min-height:0;flex:1}
@media(max-width:760px){#placement button{padding:0 12px}body.embedded main{padding:8px 10px 10px}}
@media(prefers-reduced-motion:reduce){#placement button{transition:none}}