:root{--cream: #f7f1e5;--ink: #3a3843;--clay: #d9765f;--sky: #9fc7d9;--sun: #f2c94c;--sage: #8fae8b;--wood: #c9a47a;--panel: #fcfaf4;--shadow: rgba(58, 56, 67, .9)}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}html,body,#root{height:100%;overflow:hidden}body{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;background:var(--cream);color:var(--ink)}canvas{touch-action:none}svg.ic{display:block}input[type=file]{display:none}#top{position:fixed;top:calc(12px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));right:calc(14px + env(safe-area-inset-right));display:flex;align-items:flex-start;gap:10px;pointer-events:none;z-index:10;flex-wrap:wrap}#top>*{pointer-events:auto}.logo{background:linear-gradient(135deg,#f2954f,#e0663f);color:#fff9ee;font-weight:900;font-size:24px;letter-spacing:-.02em;padding:7px 15px 9px;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--shadow);border:2px solid var(--ink);border-radius:12px;display:flex;align-items:center;gap:8px}.logo span{color:#a9dcf2}.logo svg{flex:0 0 auto}.modewrap{display:flex;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow);background:var(--panel);border-radius:12px;overflow:hidden}.modebtn{padding:8px 14px;font-weight:900;font-size:13px;cursor:pointer;background:transparent;border:none;letter-spacing:.02em;display:flex;align-items:center;gap:7px;color:var(--ink)}.modebtn.on{background:var(--sun)}.grow{flex:1}.pill{background:var(--panel);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow);padding:7px 12px;font-size:12.5px;font-weight:700;border-radius:12px;display:flex;align-items:center;gap:8px}.pill input[type=range]{width:100px}.pill select{border:none;background:none;font:inherit;font-weight:800}.pill .dim{font-size:10.5px;color:#8b8471;font-weight:800}.seg{display:flex;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden}.seg button{border:none;background:#fff;font-weight:900;font-size:11.5px;padding:4px 8px;cursor:pointer;color:var(--ink)}.seg button.on{background:var(--sky)}.iconbtn{background:var(--panel);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow);padding:8px 11px;font-weight:800;font-size:12.5px;cursor:pointer;border-radius:12px;display:flex;align-items:center;gap:7px;color:var(--ink)}.iconbtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}.iconbtn.off{opacity:.55}.iconbtn.live-on{background:var(--sun)}.suntog{box-shadow:none;border-width:1.5px;padding:4px 7px}#hotbar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translate(-50%);display:flex;gap:6px;z-index:10}.slot{width:60px;height:64px;background:var(--panel);border:2.5px solid var(--ink);box-shadow:0 4px 0 var(--shadow);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;gap:3px;transition:transform .08s;flex:0 0 auto}.slot:hover{background:#fbf3dc}.slot.on{background:var(--sun);transform:translateY(-7px);box-shadow:0 11px 0 var(--shadow)}.slot .key{position:absolute;top:3px;left:7px;font-size:9.5px;font-weight:900;color:#9b937f}.slot .lb{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}#drawer{position:fixed;left:50%;bottom:92px;transform:translate(-50%);background:var(--panel);border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--shadow);padding:10px;z-index:11;display:grid;grid-template-columns:repeat(6,78px);gap:6px;max-width:92vw;overflow:auto;border-radius:16px}.ditem{border:2px solid var(--ink);background:#fff;padding:7px 4px 5px;text-align:center;cursor:pointer;border-radius:10px}.ditem:hover{background:#fbf3dc}.ditem .lb{font-size:9px;font-weight:800;text-transform:uppercase;margin-top:2px}.ditem .dm{font-size:8.5px;color:#9b937f}.ditem svg{margin:0 auto}#layouts{position:fixed;right:14px;top:76px;width:264px;background:var(--panel);border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--shadow);padding:12px;z-index:12;border-radius:16px}#layouts h4{font-size:12px;font-weight:900;text-transform:uppercase;margin-bottom:8px}.litem{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);background:#fff;padding:8px 10px;cursor:pointer;border-radius:10px;margin:6px 0}.litem:hover{background:#fbf3dc}.litem .lb{font-size:12px;font-weight:800}.litem .dm{font-size:10px;color:#9b937f}.lnote{font-size:10px;color:#8b8471;margin-top:8px;line-height:1.5}@media (max-width: 640px){#layouts{left:0;right:0;top:auto;bottom:0;width:auto;border-radius:16px 16px 0 0}}#insp{position:fixed;right:14px;top:76px;width:232px;background:var(--panel);border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--shadow);padding:12px;z-index:10;max-height:calc(100vh - 210px);overflow:auto;border-radius:16px}#insp h3{font-size:13px;font-weight:900;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px}#insp h3 .dot{width:12px;height:12px;border:1.5px solid var(--ink);border-radius:4px}.frow{display:flex;align-items:center;gap:6px;margin:6px 0}.frow label{font-size:10.5px;font-weight:800;text-transform:uppercase;width:60px;color:#8b8471}.frow input[type=number]{flex:1;width:50px;border:2px solid var(--ink);border-radius:8px;padding:4px 6px;font:inherit;font-size:12.5px;background:#fff;-webkit-user-select:text;user-select:text;min-height:28px}.litbtn{flex:1;border:2px solid var(--ink);border-radius:8px;font-weight:800;padding:4px;cursor:pointer;background:#fff;color:var(--ink)}.litbtn.on{background:var(--sun)}.swatches{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0 4px}.sw{width:22px;height:22px;border:2px solid var(--ink);cursor:pointer;border-radius:7px}.sw.on{outline:3px solid var(--sun)}.irow{display:flex;gap:6px;margin-top:10px}.irow button{flex:1;border:2px solid var(--ink);background:#fff;font-weight:800;font-size:12px;padding:6px 4px;cursor:pointer;border-radius:9px;color:var(--ink)}.irow button:hover{background:#fbf3dc}.irow button.danger{color:var(--clay)}.irow button.danger:disabled{opacity:.4;cursor:not-allowed}.irow button.lockon{background:var(--sun)}#hints{position:fixed;left:14px;bottom:14px;background:#fcfaf4f0;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow);padding:9px 12px;font-size:12px;z-index:9;max-width:330px;line-height:1.6;border-radius:14px}#hints b{background:var(--sun);padding:0 5px;border:1px solid var(--ink);font-size:11px;border-radius:5px}#xhair{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;z-index:9;pointer-events:none}#xhair{transition:transform .12s}#xhair.aim{transform:translate(-50%,-50%) scale(1.45)}#xhair:before,#xhair:after{content:"";position:absolute;background:#fff;mix-blend-mode:difference}#xhair:before{left:7px;top:0;width:2px;height:16px}#xhair:after{top:7px;left:0;width:16px;height:2px}#compass{position:fixed;right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));width:64px;height:64px;z-index:9;pointer-events:none}.dimtag{background:var(--ink);color:var(--sun);font-size:11px;font-weight:800;padding:3px 9px;pointer-events:none;white-space:nowrap;border-radius:8px}.dimtag.dim-soft{opacity:.75}#toast{position:fixed;top:calc(76px + env(safe-area-inset-top));left:50%;transform:translate(-50%);background:var(--ink);color:#fff9ee;font-size:13px;font-weight:700;padding:8px 16px;z-index:20;border-radius:12px;max-width:90vw;text-align:center}.stick-zone{position:fixed;left:0;bottom:0;width:45vw;height:45vh;z-index:8;touch-action:none}.stick-base{position:absolute;left:34px;bottom:calc(34px + env(safe-area-inset-bottom));width:104px;height:104px;border-radius:50%;border:2px solid rgba(58,56,67,.5);background:#fcfaf459}.stick-knob{position:absolute;left:26px;top:26px;width:48px;height:48px;border-radius:50%;background:#fcfaf4d9;border:2px solid var(--ink)}.look-zone{position:fixed;right:0;bottom:0;width:55vw;height:70vh;z-index:7;touch-action:none}@media (max-width: 1024px){#insp{width:208px}.slot .lb{display:none}.slot{height:54px}}@media (max-width: 640px){#hints{display:none}.logo{font-size:17px;padding:5px 10px 7px}.pill input[type=range]{width:64px}#top{gap:6px}#hotbar{left:0;right:0;transform:none;justify-content:flex-start;overflow-x:auto;padding:8px 10px calc(8px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}.slot{width:46px;height:50px}#drawer{left:0;right:0;bottom:0;transform:none;max-width:none;border-radius:16px 16px 0 0;border-bottom:none;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));max-height:55vh;padding-bottom:calc(10px + env(safe-area-inset-bottom))}#insp{left:0;right:0;top:auto;bottom:0;width:auto;border-radius:16px 16px 0 0;border-bottom:none;max-height:55vh;padding-bottom:calc(12px + env(safe-area-inset-bottom))}}