@font-face{font-family:Studio;src:local('Arial')}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#34332e;color:#f9f5e9;font-family:Studio,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:700 10px/1.1 Studio,Arial,sans-serif;letter-spacing:.09em;border:0;color:inherit;background:transparent;cursor:pointer;min-height:40px;padding:0 15px;border-radius:4px}button:hover{background:#ffffff18}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #ffd550;outline-offset:4px}.primary{background:#f4cd4f;color:#25251f}.primary:hover{background:#ffe279}a{color:inherit;text-decoration:none}#studio{width:100%;height:100%;position:relative;isolation:isolate}#wall{display:block;width:100%;height:100%;touch-action:none;cursor:none}#cover{position:absolute;inset:0;z-index:8;background:#222;transition:opacity .45s ease}#cover img{width:100%;height:100%;object-fit:cover;display:block}#cover:after{content:'';position:absolute;inset:70% 0 0;background:linear-gradient(transparent,#15130ee8);pointer-events:none}.cover-actions{position:absolute;bottom:4%;left:0;right:0;z-index:1;text-align:center}.cover-actions p{font-size:clamp(13px,1.2vw,18px);letter-spacing:.045em;margin:0 0 14px}.cover-actions button{min-width:190px;min-height:46px;font-size:12px}.cover-actions button span{margin-left:35px}#topbar{position:absolute;inset:max(15px,env(safe-area-inset-top)) 22px auto;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.12em;color:#fff;text-shadow:0 1px 5px #000}#topbar>a{background:#262622de;border-radius:4px;padding:12px}#topbar #mute{background:#262622de}.studio-title{background:#262622de;border-radius:4px;padding:12px}.studio-title i{margin:0 10px;color:#f4cd4f;font-style:normal}#hint{position:absolute;top:18%;left:0;right:0;text-align:center;pointer-events:none;font-size:11px;letter-spacing:.18em;color:#25251f}#controls{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:9px 18px;align-items:center;background:#252622f5;padding:12px 15px;border:1px solid #ffffff20;border-radius:10px;box-shadow:0 8px 30px #0003;width:max-content;max-width:calc(100% - 32px);transition:opacity .2s}#palette{display:flex;gap:8px;align-items:center}#palette button{padding:0;width:29px;min-height:29px;border-radius:50%;position:relative;background:var(--swatch);border:1px solid #ffffff40}#palette button[aria-pressed=true]{outline:1px solid #f6f1e4;outline-offset:4px}#palette button[aria-pressed=true]:after{content:'✓';color:var(--check);font-size:15px;letter-spacing:0}#palette button:focus-visible{outline:2px solid #ffd550;outline-offset:4px}.control-row{display:flex;align-items:center;gap:8px}.segments{display:flex;gap:2px}.segments button{padding:0 9px;min-height:34px;font-size:9px}.segments button[aria-pressed=true]{background:#e9e5d9;color:#252622}.divider{height:17px;width:1px;background:#ffffff25}.actions{display:flex;gap:3px}.actions button{font-size:9px;min-height:34px;padding:0 10px}#cursor{position:absolute;width:55px;height:55px;border:1px solid #fff9;box-shadow:0 0 0 1px #24231f55;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;display:none}body.painting #cursor{opacity:.25}body[data-mode=cover] #topbar,body[data-mode=cover] #controls,body[data-mode=cover] #hint{visibility:hidden}body[data-mode=present] #topbar,body[data-mode=present] #controls,body[data-mode=present] #hint,body[data-mode=result] #topbar,body[data-mode=result] #controls,body[data-mode=result] #hint{display:none}body[data-mode=present] #cursor,body[data-mode=result] #cursor{display:none!important}#result{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);text-align:center;background:#252622f2;border:1px solid #ffffff20;border-radius:8px;padding:18px 24px;width:max-content;max-width:calc(100% - 30px);animation:reveal .6s both}#result p{font-size:13px;letter-spacing:.2em;margin:0 0 14px}#result>div{display:flex;align-items:center;gap:12px}#physical{font-size:10px}dialog{border:1px solid #ffffff30;border-radius:10px;background:#272822;color:#f9f5e9;padding:22px;max-width:calc(100% - 32px)}dialog::backdrop{background:#0005}dialog h2{font-size:15px;letter-spacing:.09em;margin:0 0 12px}dialog p{font-size:12px;color:#c6c7bb;margin:0 0 22px}dialog form>div{display:flex;gap:12px;justify-content:flex-end}.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}[hidden]{display:none!important}@keyframes reveal{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@media(hover:hover){body.painting #controls:not(:hover){opacity:.22}}@media(max-width:1050px){#controls{width:600px}#palette{width:100%;justify-content:center}#controls{gap:12px 18px}}@media(max-width:600px){#cover img{object-fit:cover;object-position:50%;}#cover{background:#211b16}#cover img{object-fit:contain}#cover:after{inset:65% 0 0}.cover-actions{bottom:10%}#topbar{left:12px;right:12px}.studio-title{display:none}#controls{width:360px;max-width:calc(100% - 20px);padding:13px 10px;gap:9px;border-radius:10px}#palette{gap:10px}#palette button{width:28px;min-height:28px}.segments button{min-height:36px;padding:0 11px}.actions{width:100%;justify-content:space-between}.actions button{min-height:38px;padding:0 17px}#hint{top:20%;font-size:9px}#result{width:340px;padding:18px 12px}#result>div{flex-wrap:wrap;justify-content:center;gap:8px}#result button{font-size:9px;padding:0 12px}}@media(max-height:460px) and (min-width:601px){#controls{width:max-content;gap:8px;padding:8px}#palette{width:auto}#palette button{width:22px;min-height:22px}#palette{gap:6px}.segments button{padding:0 6px}.actions button{padding:0 7px}#topbar{top:8px}#hint{top:15%}.cover-actions{bottom:3%}.cover-actions p{margin-bottom:7px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:600px) and (orientation:portrait){#cover:before{content:"";position:absolute;inset:0;background:linear-gradient(#211b16b0,#211b16f5),url(wall.png) center/cover}#cover img{position:absolute;width:150%;max-width:none;left:-25%;top:42%;height:auto;transform:translateY(-50%);object-fit:contain;mask-image:linear-gradient(transparent,#000 12%,#000 85%,transparent)}.cover-actions{bottom:12%}}


/* Vector spray-can cursor: target stays at the exact paint coordinate. */
#cursor{--paint-color:#181918;--brush-diameter:55px;width:0;height:0;border:0;box-shadow:none;transform:none;z-index:2;pointer-events:none}
#cursor .cursor-footprint{position:absolute;left:0;top:0;width:var(--brush-diameter);height:var(--brush-diameter);transform:translate(-50%,-50%);border:1px solid #ffffff65;box-shadow:0 0 0 1px #18241b30;border-radius:50%;transition:opacity .12s}
#cursor .cursor-target{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#f6f2de;box-shadow:0 0 0 1px #17251d90}
#cursor .cursor-can{position:absolute;left:0;top:0;display:block;width:104px;height:122px;overflow:visible;filter:drop-shadow(2px 4px 2px #0004);transition:opacity .12s,translate .12s}
#cursor .cursor-mist{opacity:.28}
body.painting #cursor{opacity:1}
body.painting #cursor .cursor-can{opacity:.7;translate:1px 1px}
body.painting #cursor .cursor-mist{opacity:.7}
body.painting #cursor .cursor-footprint{opacity:.22}
body.painting #cursor .cursor-target{opacity:.5}

#result>div{flex-wrap:wrap;justify-content:center}
#result button{min-height:44px}
#result #share-status{max-width:480px;font-size:12px;line-height:1.5;letter-spacing:0;margin:12px auto 0;color:#ece8db}
#result #share-status:empty{display:none}
@media(max-width:600px){#result #share-art{width:100%}#result #share-status{font-size:11px}}