*{box-sizing:border-box}html,body{height:100%;width:100%;overflow:hidden}body{margin:0;background:#030403;color:#e0ddcc;font:13px Arial,sans-serif}button,input{font:inherit}button{background:#1c1f19d9;color:#d8d7c5;border:1px solid #8a8c6a50;border-radius:3px;padding:12px 18px;cursor:pointer;touch-action:manipulation}button:hover{background:#363c2e}button:focus-visible{outline:2px solid #c6c9a5;outline-offset:3px}button:disabled{opacity:.6;cursor:wait}[hidden]{display:none!important}#view{position:fixed;inset:0}canvas{display:block}#view canvas{touch-action:none}body.mouse-locked #view canvas{cursor:none}
header{position:fixed;top:max(22px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));z-index:2;pointer-events:none}.header-actions{display:flex;flex-direction:column;gap:9px;align-items:flex-end}.header-actions button{pointer-events:auto;min-width:88px;padding:10px 14px;font-size:11px;backdrop-filter:blur(9px)}.desktop-hint,.header-coordinate{font-size:9px;color:#d1d0b598;letter-spacing:.03em;text-shadow:0 1px 5px #000}#sound[aria-pressed=false]{color:#b7b7a3}
footer{position:fixed;z-index:2;left:max(24px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));display:flex;gap:8px}footer button{min-height:44px;background:#171c16d9;backdrop-filter:blur(8px);font-size:12px}#run[aria-pressed=true]{background:#a8ae81;color:#161a12;border-color:#a8ae81}#cross{position:fixed;left:50%;top:50%;width:3px;height:3px;transform:translate(-50%,-50%);border-radius:50%;background:#eee8ce80;z-index:2;pointer-events:none}body.editing header,body.editing footer,body.editing #stick,body.editing #cross{visibility:hidden;pointer-events:none}
#loading{z-index:60;background:radial-gradient(ellipse at 50% 47%,#0b0e09 0,#030403 60%)}.arrival{width:min(320px,calc(100vw - 40px));position:relative;text-align:left;transform:translateY(-6px)}#loading-copy{white-space:pre;font:16px/1.5 TraceTerminal,GulimChe,monospace;letter-spacing:0;color:#a8ad8a;margin:0 0 20px;min-height:24px;text-shadow:0 0 5px #8f9a6220;font-synthesis:none}#loading-letters span{opacity:1;animation:none}#loading-letters:after{content:'';display:inline-block;width:8px;height:2px;margin-left:2px;background:#b6be91;vertical-align:-2px;animation:terminal-cursor .85s steps(1,end) infinite}.loading-track{height:1px;width:100%;background:#272b20;position:relative;overflow:hidden;box-shadow:0 0 14px #8f9b2e0a}.loading-fill{height:100%;background:#a5ab88;transform:scaleX(0);transform-origin:left;transition:transform .45s ease;box-shadow:0 0 10px #c3cc8f66}.loading-track:after{content:'';position:absolute;inset:0;width:28%;background:linear-gradient(90deg,transparent,#c2caa36b,transparent);animation:loading-whisper 2.8s linear infinite}#loading-error{font-size:11px;line-height:1.8;color:#a5a591;max-width:280px;margin:22px auto 14px}#retry{font-size:11px;background:transparent;padding:9px 18px}.failed .loading-track:after{animation:none}.failed #loading-letters:after{display:none}.reduced-motion #loading-letters span{animation:none;opacity:1}.reduced-motion .loading-track:after,.reduced-motion #loading-letters:after{animation:none}body.booting header,body.booting footer,body.booting #cross,body.booting #stick{visibility:hidden}
@keyframes terminal-cursor{0%,49%{opacity:1}50%,100%{opacity:0}}@keyframes loading-whisper{from{transform:translateX(-110%)}to{transform:translateX(470%)}}
.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#090d09b8;backdrop-filter:blur(8px);padding:20px}.overlay article{width:min(480px,100%);max-height:94dvh;overflow:auto;overscroll-behavior:contain;padding:28px;background:#20251cf5;border:1px solid #89906a66;border-radius:7px;box-shadow:0 20px 90px #0008}h2{font-size:25px;font-weight:400;letter-spacing:.1em;margin:12px 0}small{font-size:10px;letter-spacing:.12em;color:#a9af91}p{font-size:12px;line-height:1.8;color:#b7bda6}.note{font-size:10px;color:#8f997f}#tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));width:100%;max-height:52vh;aspect-ratio:2.6/3.2;background-size:100% 100%;margin:18px auto;border:3px solid #efe8c0;overflow:hidden;box-shadow:0 0 0 2px #292d1f}#tiles button{min-height:0;position:relative;background:#191b080a;border:1.5px solid #f1edc2;box-shadow:inset 0 0 0 1px #303619b3;border-radius:0;padding:0}#tiles button:not(:disabled):hover,#tiles button:not(:disabled):focus-visible{background:#f1f7b744;outline:3px solid #f3f5c4;outline-offset:-4px}#tiles button:disabled{cursor:not-allowed;background:#151c1266;border-color:#aab687;opacity:1}#tiles img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}#tiles button:disabled:after{content:attr(data-occupied-label);position:absolute;bottom:3px;left:0;right:0;font-size:9px;background:#151a12b3;color:#dfe7c4;padding:2px}#pad{width:100%;height:auto;background-color:#a1a784;background-size:100% 100%;touch-action:none;border:1px solid #889570}.tools{display:flex;align-items:center;gap:7px;margin:12px 0;flex-wrap:wrap}.tools input[type=range]{width:70px}.tools button{padding:9px 11px;font-size:11px}#editor button{touch-action:manipulation;min-height:44px}#editor #tiles button{min-height:0}#save{display:block;width:100%;min-height:52px;position:sticky;bottom:0;z-index:2;margin:14px 0;background:#bdc29c;color:#171e12;border:0;box-shadow:0 3px 18px #0007}#close{width:100%;margin:6px 0 18px}details{font-size:10px;color:#879278}summary{cursor:pointer;font-size:10px}a{color:#b8c392}.audio-credits{font-size:10px;padding-left:16px;line-height:1.8}
#toast{display:none;position:fixed;z-index:65;top:95px;left:50%;transform:translateX(-50%);width:max-content;max-width:85vw;background:#141c12ec;border:1px solid #83926744;padding:12px 18px;color:#d1d8bf;font-size:11px;line-height:1.7;pointer-events:none}#stick{display:none} @media(pointer:coarse){.desktop-hint{display:none}header{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}footer{left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom))}footer button{padding:12px 15px}#stick{display:block;position:fixed;z-index:2;left:24px;bottom:max(88px,calc(env(safe-area-inset-bottom) + 80px));width:100px;height:100px;border-radius:50%;border:1px solid #c9d5b52b;background:#e0efc407;touch-action:none}#stick i{display:block;position:absolute;left:33px;top:33px;width:34px;height:34px;border-radius:50%;background:#c0d2a136}.overlay{padding:14px}.overlay article{padding:22px}.arrival{width:min(320px,calc(100vw - 40px))}#loading-copy{font-size:16px;letter-spacing:0}}
@media(prefers-reduced-motion:reduce){#loading-letters span{animation:none;opacity:1}.loading-track:after,#loading-letters:after{animation:none}.loading-fill{transition:none}}
/* Restrained worn-metal controls; vector details stay crisp at touch sizes. */
button{border-radius:1px;border:1px solid #a7a38b52;background:linear-gradient(130deg,#23261fbd,#101610d9);color:#d1d0b9;letter-spacing:.035em;transition:border-color .18s,background .18s,color .18s}button:hover{border-color:#c6c4a691;background:linear-gradient(130deg,#30372ac9,#182117eb)}
.trace-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:44px;padding:12px 16px;border:1px solid #b7b0996b;background:linear-gradient(125deg,#1c221bc9,#101610df);box-shadow:inset 0 0 0 1px #070d0740,0 3px 16px #0002;text-shadow:0 1px 5px #0007;backdrop-filter:blur(7px);color:#d4d2b9;font-size:12px;font-weight:400;letter-spacing:.07em}.trace-button:before,.trace-button:after{content:'';position:absolute;pointer-events:none;width:5px;height:5px;border-color:#cecaab8f;border-style:solid}.trace-button:before{top:-1px;left:-1px;border-width:1px 0 0 1px}.trace-button:after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}.trace-button:hover{border-color:#dad8bca8;color:#eee9cb;background:linear-gradient(125deg,#303a2bcf,#131d12e8)}.trace-button:active{transform:translateY(1px)}.button-icon{width:17px;height:17px;flex:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.72}.shortcut{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;margin-left:8px;padding:0 4px;border:1px solid #acae904d;background:#080e074a;color:#a9af91;font:10px Arial,sans-serif;letter-spacing:0;line-height:1}.button-label{white-space:nowrap}#run[aria-pressed=true]{background:linear-gradient(125deg,#3f5031b5,#1a2819dc);border-color:#bac894bd;color:#dde6bd;box-shadow:inset 0 0 12px #bbce6a0a}#run[aria-pressed=true] .button-icon{opacity:1;color:#ccdfa5}#run[aria-pressed=true] .shortcut{border-color:#cbdc9a73;color:#e2ebc4}#save{background:linear-gradient(125deg,#313d29e8,#182516f0);border:1px solid #bdcda38c;color:#e0e8ce;box-shadow:0 3px 18px #0005}.header-actions .sound-button{font-size:11px;padding:10px 14px;min-height:38px}#close{background:#131c12b3}
@media(pointer:coarse){.shortcut{display:none}.trace-button{gap:8px;padding:12px 14px;font-size:11px;letter-spacing:.035em}.button-icon{width:16px;height:16px}.header-actions .sound-button{min-height:44px}}
@media(prefers-reduced-motion:reduce){button{transition:none}.trace-button:active{transform:none}}
/* Worn acetate, floating over the real wall rather than a framed app card. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
footer{gap:7px}.trace-button{min-height:32px;padding:7px 10px;gap:7px;background:#11170f55;border-color:#b7b09942;box-shadow:none;font-size:11px;letter-spacing:.035em;backdrop-filter:blur(4px)}.trace-button:hover{background:#2932226b;border-color:#d0cdb879}.trace-button:before{display:none}.trace-button:after{inset:-5px;width:auto;height:auto;border:0;background:transparent;pointer-events:auto}.button-icon{width:14px;height:14px}.shortcut{min-width:16px;height:16px;margin-left:3px;padding:0 3px;font-size:9px;background:#080c061a;border-color:#b5b49d36}#run[aria-pressed=true]{background:#536b353d;border-color:#b7c68b91;color:#e0e8c6;box-shadow:none}.header-actions .sound-button{min-height:30px;min-width:74px;font-size:10px;padding:7px 10px;background:#11170f55}.desktop-hint,.header-coordinate{font-size:9px}
#toast{top:90px;border:0;border-radius:0;box-shadow:none;background:#10160c69;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);color:#eee9d5;text-shadow:0 1px 5px #000,0 0 14px #000b;font-size:12px;font-weight:400;letter-spacing:.02em;padding:13px 22px;line-height:1.8}
#editor{background:#080b06a3;backdrop-filter:blur(6px) saturate(.65);-webkit-backdrop-filter:blur(6px) saturate(.65);padding:24px}#editor .editor-surface{position:relative;isolation:isolate;width:min(390px,100%);max-height:94dvh;overflow:auto;overscroll-behavior:contain;padding:20px 22px 16px;background:none;border:0;border-radius:0;box-shadow:none}#editor .editor-surface:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('./acetate-grain-v1.webp') center/520px;opacity:.16}.editor-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px;padding:0 0 2px}.editor-heading h2{margin:0;font-family:'Noto Serif KR','Batang',serif;font-size:21px;line-height:1.5;font-weight:400;letter-spacing:.15em;color:#e5ddc5;text-shadow:0 1px 10px #000}#editor .close-editor{display:grid;place-items:center;width:32px;min-height:32px;margin:0;padding:6px;border:0;background:transparent;color:#d2c9ae;box-shadow:none;position:relative}#editor .close-editor:after{content:'';position:absolute;inset:-6px}#editor .close-editor:hover{background:#cabd8b0c;color:#fff7db}.close-editor svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1}
#tiles{margin:0 auto 10px;width:100%;max-height:48dvh;border:1px solid #ddd0a0a6;box-shadow:0 8px 40px #0003}#tiles button{border:1px solid #f4e6b694;box-shadow:inset 0 0 0 1px #25200d3b;background:#17140809}#tiles button:not(:disabled):hover,#tiles button:not(:disabled):focus-visible{background:#e4d8ac2b;outline:2px solid #f5e8bc;outline-offset:-3px}#pad{border:0;box-shadow:0 8px 30px #0003;background-size:100% 100%;outline:1px solid #c8bd9066;outline-offset:0}
#editor .tools{display:flex;align-items:center;gap:13px;margin:13px 0 12px;flex-wrap:wrap;justify-content:space-between;color:#c5bda4}#editor .tools label{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:10px;letter-spacing:.05em}#editor .tools svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.85}#color{width:24px;height:24px;border:0;padding:0;background:none;cursor:pointer}#color::-webkit-color-swatch-wrapper{padding:2px}#color::-webkit-color-swatch{border:1px solid #e8d9ab6b;border-radius:50%}#color::-moz-color-swatch{border:1px solid #e8d9ab6b;border-radius:50%}.stroke-control{flex:1;min-width:170px}.tools #size{width:76px;min-width:45px;flex:1;accent-color:#bfb28c;height:18px;cursor:pointer}#size-value{font:10px monospace;min-width:15px;text-align:center;color:#cbc2a5}.stroke-sample{display:grid;place-items:center;width:26px;height:26px;flex:none;background:#b8ac7959;border-radius:50%}#stroke-preview{display:block;width:6px;height:6px;max-width:24px;max-height:24px;border-radius:50%;background:#29231e}.edit-actions{display:flex;gap:4px;margin-left:auto}#editor .tool-action{display:grid;place-items:center;min-height:32px;min-width:32px;padding:6px;border:0;background:none;box-shadow:none;position:relative}#editor .tool-action:hover{background:#d0c08d0d;color:#f5e7c0}#editor .tool-action:after{content:'';position:absolute;inset:-5px}.tools .tool-action svg{width:18px;height:18px}#editor #save{position:static;display:block;width:148px;min-height:34px;margin:10px auto 0;padding:8px 14px;border:1px solid #c4b99066;border-radius:0;background:#2c34214a;box-shadow:none;color:#e0d6b8;font-size:11px;font-weight:400;letter-spacing:.12em;backdrop-filter:blur(4px)}#editor #save:hover{border-color:#ded3ae9c;background:#5e63442e}#editor .trace-echo{margin:22px 0 18px;font-family:'Noto Serif KR','Batang',serif;font-size:10px;line-height:2;letter-spacing:.025em;text-align:center;color:#c1b89cbd;text-shadow:0 1px 9px #000}#editor details{margin-top:12px;font-size:9px;opacity:.65}#editor summary{font-size:9px;color:#a7a28c}#editor details[open]{opacity:1}
@media(pointer:coarse){.trace-button{min-height:34px;padding:8px 10px;gap:6px;font-size:10px}.header-actions .sound-button{min-height:32px;font-size:10px;padding:8px 10px}#editor{padding:12px}#editor .editor-surface{padding:16px 12px;max-height:96dvh}.editor-heading h2{font-size:20px}.editor-heading{margin-bottom:16px}#editor .close-editor{min-width:36px;min-height:36px}#editor .tools{gap:10px}#editor .tool-action{min-width:36px;min-height:36px}.stroke-control{min-width:165px}#editor #save{min-height:38px;margin-top:8px}#editor .trace-echo{font-size:10px;margin:18px 0 14px;line-height:1.9}}
#editor #save{position:relative}#editor #save:after{content:'';position:absolute;inset:-5px;pointer-events:auto}#editor .tools label{min-height:32px}.tools #size{height:26px}
/* No button chrome in any state. Wall grid lines belong to the surface overlay. */
button,button:hover,button:active,button:focus-visible,button:disabled{border:0!important;outline:0!important;box-shadow:none!important}button:before,button:after{border:0!important;box-shadow:none!important}.shortcut{border:0!important}button:focus-visible{background-color:#d2d5a82e!important;color:#fff4d1!important}#tiles{position:relative}#tiles:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background-image:linear-gradient(to right,#f4e6b694 1px,transparent 1px),linear-gradient(to bottom,#f4e6b694 1px,transparent 1px);background-size:calc(100% / var(--grid-cols,5)) 100%,100% calc(100% / var(--grid-rows,5));background-repeat:repeat}#color::-webkit-color-swatch{border:0}#color::-moz-color-swatch{border:0}
/* A restrained old-camera finish, applied once to the complete world image. */
#view{isolation:isolate;z-index:0;overflow:hidden}#view canvas{filter:none}#view:before,#view:after{content:'';position:absolute;inset:0;pointer-events:none}#view:before{z-index:1;background:radial-gradient(ellipse at 50% 46%,transparent 36%,#0b10061c 82%,#060a0730 100%),linear-gradient(180deg,#9a915c05,#38432705)}#view:after{z-index:2;opacity:.025;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22192%22%20height%3D%22192%22%20viewBox%3D%220%200%20192%20192%22%3E%3Cfilter%20id%3D%22grain%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%20seed%3D%2217%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23grain%29%22%20opacity%3D%221%22%2F%3E%3C%2Fsvg%3E");background-size:192px 192px;animation:film-grain-shift .8s steps(1,end) infinite}
@keyframes film-grain-shift{0%,100%{background-position:0 0}25%{background-position:47px -19px}50%{background-position:-29px 53px}75%{background-position:71px 31px}}
@media(pointer:coarse){#view:after{opacity:.045}}@media(prefers-reduced-motion:reduce){#view:after{animation:none}}
#toast.plain{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none;padding:0;color:#eee9d5;text-shadow:0 1px 5px #000,0 0 16px #0008}#editor .edit-actions{width:100%;margin-left:0;justify-content:space-between;gap:8px}#editor .tool-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 4px;font-size:10px;letter-spacing:.02em;color:#c9c0a5}#editor .tool-action span{white-space:nowrap}#editor #eraser[aria-pressed=true]{color:#fff0c3;background:#cfc09a0c}#editor #eraser[aria-pressed=true] span{text-decoration:underline;text-underline-offset:4px}#pad.erasing{cursor:cell}#stroke-preview.erasing{background-image:repeating-conic-gradient(#d4cbaa77 0% 25%,transparent 0% 50%);background-size:4px 4px;box-shadow:inset 0 0 0 1px #e1d5b5a6}
/* The arrival notice is a physical sheet on a generated clipboard, not a UI card. */
#notice{position:fixed;inset:0;z-index:55;margin:0;width:100%;height:100%;max-width:none;max-height:none;padding:16px;overflow:auto;overscroll-behavior:contain;border:0;background:transparent;color:#373025;outline:0}#notice[open]{display:grid;place-items:center}#notice::backdrop{background:#060705c9;backdrop-filter:blur(5px) saturate(.6);-webkit-backdrop-filter:blur(5px) saturate(.6)}.notice-board{position:relative;flex:none;width:min(430px,calc(100vw - 32px),calc((100dvh - 32px)*.666667));min-width:min(320px,calc(100vw - 32px));aspect-ratio:2/3;filter:drop-shadow(0 14px 30px #0009)}.notice-art{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.notice-paper{position:absolute;inset:25% 13% 9%;display:flex;flex-direction:column;text-align:center;font-family:'Batang','Noto Serif KR',serif}#notice-title{margin:0 0 8%;color:#3a3023;font:600 clamp(20px,5vw,28px)/1.2 Georgia,serif;letter-spacing:.22em;padding-left:.22em}#notice-copy p{margin:0 0 7%;color:#514734;font-size:clamp(11px,3.2vw,13px);font-weight:400;line-height:1.95;letter-spacing:-.035em;word-break:keep-all}#notice-copy .notice-last{color:#342d22}#notice-confirm{display:block;align-self:stretch;flex:none;margin:auto 0 0;min-height:44px;padding:12px;color:#3f3527;background:transparent;border:0;border-radius:0;font:12px 'Batang','Noto Serif KR',serif;letter-spacing:.22em;text-shadow:none;cursor:pointer}#notice-confirm:hover,#notice-confirm:focus-visible{background:transparent!important;color:#17130e!important;text-decoration:underline;text-underline-offset:5px}#notice-confirm:active{color:#726448!important}@media(max-height:510px){#notice[open]{align-items:start}.notice-board{width:min(360px,calc(100vw - 32px))}}
.notice-environment{margin:auto 0 0;color:#776b56;font:9px/1.8 Arial,sans-serif;letter-spacing:.035em}.notice-environment span{color:#564a35;font-size:10px}#notice-confirm{margin:4px 0 0}
.notice-environment .notice-requirement{font-size:9px;color:#776b56}.notice-environment{flex-shrink:0}
#tiles button.prop-occupied:after{content:attr(data-occupied-label);background:#201f17c9;color:#d0c19a}#tiles button.prop-occupied{background:repeating-linear-gradient(135deg,#25271e9c 0 5px,#76745c46 5px 7px)}
/* Small unobtrusive utilities. Pointer/touch targets remain at least 40px high. */
.utility-actions{display:flex;gap:5px}.header-actions .utility-actions button{min-width:0;min-height:40px;padding:7px 10px;font-size:10px;border:0;background:#1b20194d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:2px}.header-actions .utility-actions button:hover{background:#353c2b80}
.utility-dialog{width:min(350px,calc(100vw - 32px));max-height:90dvh;overflow:auto;padding:24px;color:#d5d5bf;background:#1d241bc9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:0;border-radius:2px;font-size:12px}.utility-dialog::backdrop{background:#080c0870;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.utility-dialog h2{font:18px TraceTerminal,GulimChe,monospace;letter-spacing:.03em;margin:0 0 16px}.utility-dialog input{display:block;width:100%;margin:9px 0;padding:12px;border:0;background:#080e0866;color:#e3e3cc;font:16px TraceTerminal,monospace}.utility-dialog button,.utility-dialog a{display:inline-block;padding:12px;border:0;background:transparent;font-size:12px;color:#d5d5bf;text-decoration:none;cursor:pointer}.utility-dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.utility-dialog .utility-note{font-size:10px;color:#aab39c}.utility-dialog [role=status]{color:#d1bea1;font-size:11px}.photo-dialog{width:min(600px,calc(100vw - 24px));text-align:center;padding:15px}.photo-dialog img{display:block;max-width:100%;max-height:67dvh;object-fit:contain;margin:auto;box-shadow:0 8px 25px #0005}.photo-dialog .utility-dialog-actions{justify-content:center}
#editor .grid-help{font-size:11px;line-height:1.9;color:#c9c2aa;margin:8px 0 12px;letter-spacing:0}#editor .selection-tools{display:flex;justify-content:flex-end;gap:12px}#editor .selection-tools button,#editor #back-to-selection{background:transparent;border:0;box-shadow:none;font-size:11px;padding:5px 8px}#editor #tiles button.selected{background:#e5e7b964;box-shadow:inset 0 0 0 2px #f7f3c2;color:#fff}#editor #tiles button.selected:before{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff5c9;text-shadow:0 1px 5px #15190a;font-size:16px}#selection-status,#paint-status{min-height:20px;font-size:11px;color:#d1c6a5;margin:8px 0;line-height:1.8}#editor #begin-painting{display:block;width:100%;background:#c0c59b;color:#151b12;border:0;min-height:46px;margin:12px 0}#editor #begin-painting:disabled{background:#7e846843;color:#b0b59a;cursor:not-allowed}.paint-step-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px}#paint-selection-size{font-size:10px;color:#aaa991}.drawing-area{display:flex;justify-content:center;align-items:center;width:100%;overflow:hidden}#editor #pad{max-width:100%;flex:none;max-height:none;object-fit:fill;background-repeat:no-repeat}#editor article.wide-painting{width:min(850px,100%)}#editor .tools{justify-content:space-between}#editor #grid-selection #tiles{max-height:48dvh}#editor #save{position:relative;bottom:auto;margin-bottom:4px}@media(max-width:500px){#editor .paint-step-heading{align-items:flex-start;gap:5px}#paint-selection-size{max-width:130px;text-align:right;line-height:1.6}}
/* Surface lines and hit targets share the actual face grid, including 2-column pillars. */
#editor #tiles{flex:none;max-width:100%;max-height:none;aspect-ratio:auto}
#editor #tiles button{min-width:0;overflow:hidden}
#editor .drawing-area{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#aaa28366 #151b1240;overscroll-behavior-x:contain}
#editor #pad{max-width:none;margin-inline:auto}
#paint-pan{display:flex;align-items:center;gap:12px;margin:12px 0;color:#c5bda4;font-size:10px}
#paint-pan-range{flex:1;min-width:0;accent-color:#bfb28c;height:28px;touch-action:pan-y}
#loading-copy{white-space:normal;overflow-wrap:anywhere;font-family:TraceTerminal,monospace;font-size:clamp(12px,3.5vw,16px)}
html:not([lang=ko]) .notice-paper{inset:25% 10% 7%}html:not([lang=ko]) #notice-copy p{font-size:clamp(10px,2.6vw,12px);line-height:1.55;margin-bottom:5%;word-break:normal;overflow-wrap:anywhere}html:not([lang=ko]) .notice-environment{font-size:8px;line-height:1.5}html:not([lang=ko]) #notice-confirm{min-height:36px;padding:8px}#editor #save{width:auto;min-width:148px;max-width:100%}.header-actions .utility-actions{flex-wrap:wrap;justify-content:flex-end;max-width:min(85vw,400px)}
/* Desktop painting fits the viewport; canvas pixels/drafts stay untouched on resize. */
@media(min-width:720px) and (pointer:fine){
#editor{padding:16px;overflow:hidden}
#editor .editor-surface{display:flex;flex-direction:column;width:min(850px,100%);height:min(900px,calc(100dvh - 32px));max-height:none;min-height:0;padding:16px 22px;overflow:hidden}
#editor article.wide-painting{width:min(1120px,100%)}
#editor .editor-heading{flex:none;margin:0 0 10px}
#editor #grid-selection,#editor #painting{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
#editor .grid-help{flex:none;margin:0 0 8px;line-height:1.6}
#editor .selection-tools,#editor .paint-step-heading,#editor #selection-status,#editor #paint-status,#editor #begin-painting,#editor #save,#editor .tools,#paint-pan{flex:none}
#editor #grid-selection #tiles{margin:8px auto;max-height:none}
#editor #begin-painting{margin:4px 0 0;min-height:40px}
#editor .paint-step-heading{margin:0 0 8px;min-height:32px}
#editor .drawing-area{flex:1;min-height:0;overflow:hidden}
#editor #pad{flex:none;max-width:none}
#editor .tools{gap:8px;margin:8px 0 4px}
#editor .edit-actions{width:auto;margin-left:auto;gap:6px}
#editor #paint-status{min-height:0;margin:4px 0;line-height:1.5;font-size:10px;overflow-wrap:anywhere}
#editor #paint-status:empty{display:none}
#editor #save{margin:4px auto 0;min-height:34px}
#editor .trace-echo{flex:none;margin:10px 0 4px;line-height:1.5}
#editor .note{flex:none;margin:4px 0 0;font-size:9px;line-height:1.4}
#editor .editor-surface>details{display:none}
#paint-pan{margin:4px 0 0}
}
@media(min-width:720px) and (pointer:fine) and (max-height:560px){
#editor{padding:8px}
#editor .editor-surface{height:calc(100dvh - 16px);padding:10px 16px}
#editor .editor-heading{margin-bottom:5px}
#editor .editor-heading h2{font-size:17px;line-height:1.2}
#editor .trace-echo{display:none}
#editor .tools{margin-top:4px;gap:5px}
#editor .paint-step-heading{margin-bottom:4px}
}
/* Compact borderless drawing tools; remains in the viewport-fitted editor flow. */
#editor .paint-tool-picker{display:flex;flex-wrap:wrap;gap:3px;width:100%;align-items:center}
#editor .paint-tool-picker .tool-action{flex:1 0 52px;min-width:0;max-width:100px;min-height:36px;padding:5px 3px;flex-direction:column;gap:3px;font-size:9px;line-height:1.2}
#editor .paint-tool-picker .tool-action:after{inset:0}
#editor .paint-tool-picker .tool-action[aria-pressed=true]{background:#cfc09a16;color:#fff0c3}
#editor .paint-tool-picker .tool-action[aria-pressed=true] span{text-decoration:underline;text-underline-offset:3px}
#pad[data-tool=fill]{cursor:cell}#pad[data-tool=eyedropper]{cursor:copy}
@media(max-width:500px){#editor .paint-tool-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}#editor .paint-tool-picker .tool-action{max-width:none;width:100%;font-size:9px}#editor .tools{gap:8px}}
@media(min-width:720px) and (pointer:fine) and (max-height:560px){#editor .paint-tool-picker .tool-action{flex-direction:row;min-height:28px;gap:4px}#editor .paint-tool-picker .tool-action svg{width:14px;height:14px}}
#editor .paint-tool-picker .tool-action span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* Keep the coordinate text's understated appearance with a usable tap target. */
#area-coordinate{pointer-events:auto;min-width:0;min-height:24px;padding:3px 0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:9px;font-weight:400;line-height:normal;cursor:copy}
#area-coordinate:hover{background:transparent;color:#e4dec7}
#artwork-viewer{background:#060905b8;backdrop-filter:blur(8px);padding:18px}
#artwork-viewer .artwork-surface{display:flex;flex-direction:column;width:min(940px,100%);height:min(850px,calc(100dvh - 36px));min-height:0;padding:18px 22px;background:#1b1c15a8;border:0;border-radius:0;box-shadow:none;overflow:hidden}
.artwork-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;margin-bottom:12px}.artwork-heading h2{font:17px/1.5 Batang,serif;letter-spacing:.12em;margin:0;color:#e2d8bc}#artwork-close{background:transparent;min-width:36px;min-height:36px;padding:0;font-size:27px;font-weight:200;color:#c9bfa4}
.artwork-stage{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;min-width:0;overflow:hidden}#artwork-canvas{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:#aaa080;background-size:100% 100%;box-shadow:0 10px 38px #0004}
.artwork-caption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;flex:none;padding-top:12px;color:#b6ad91;font:10px/1.8 TraceTerminal,monospace}.artwork-appreciation{display:flex;align-items:center;gap:14px}#artwork-like{display:flex;align-items:center;gap:7px;min-height:38px;padding:6px 4px;background:transparent;color:#c7b99b;font-size:11px;cursor:pointer}#artwork-like svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2}#artwork-like[aria-pressed=true]{color:#c18e7d;cursor:default;opacity:1}#artwork-like[aria-pressed=true] svg{fill:#b17d6d66}#artwork-status{margin:8px 0 0;min-height:0;font-size:11px;flex:none}#artwork-status:empty{display:none}
@media(max-width:500px){#artwork-viewer{padding:12px}#artwork-viewer .artwork-surface{height:min(780px,calc(100dvh - 24px));padding:12px}.artwork-caption{gap:8px;font-size:9px}}
#artwork-hint{position:fixed;z-index:2;pointer-events:none;transform:translate(-50%,-100%);font:10px/1.5 Arial,sans-serif;letter-spacing:.06em;color:#e2dcc5b3;text-shadow:0 1px 5px #000,0 0 12px #0008;white-space:nowrap;background:none;border:0;padding:3px 5px}
body.editing #artwork-hint,body.booting #artwork-hint{display:none}
#editor[aria-busy=true] #save{cursor:progress;color:#eee2bf;opacity:.85}
.room-graffiti-status{font-size:9px;line-height:1.6;letter-spacing:.02em;color:#d1d0b598;text-shadow:0 1px 5px #000;max-width:min(85vw,400px);text-align:right;pointer-events:none}
.room-graffiti-status.has-graffiti{color:#9dca8a;font-weight:700;text-shadow:0 1px 5px #000,0 0 7px #7ebf7330;animation:room-graffiti-pulse 3.2s ease-in-out infinite}
@keyframes room-graffiti-pulse{0%,100%{opacity:.65}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.room-graffiti-status.has-graffiti{animation:none}}