:root{--cream:#fff4e0;--peach:#f8d9b2;--clay:#e89a6b;--umber:#a66a44;--ink:#3b2a22;--sans:"Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;font-family:var(--sans);color:var(--ink);background:var(--cream);touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overflow:hidden}#scene{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block;position:fixed;inset:0}#hud{pointer-events:none;flex-direction:column;gap:16px;padding:24px;display:flex;position:fixed;inset:0}#top-row{justify-content:space-between;align-items:center;gap:12px;display:flex}#title{letter-spacing:-.5px;color:var(--ink);text-shadow:0 2px #fff9;font-size:28px;font-weight:800}#stage{color:var(--ink);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);letter-spacing:.2px;background:#ffffffbf;border:2px solid #3b2a2226;border-radius:999px;padding:6px 12px;font-size:16px;font-weight:800}#bar-wrap{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff8c;border:2px solid #3b2a2226;border-radius:999px;width:min(420px,60vw);height:22px;position:relative;overflow:hidden}#bar-fill{background:linear-gradient(90deg, var(--clay), #f6c89a);width:0%;height:100%;transition:width .12s ease-out}#bar-label{color:var(--ink);letter-spacing:.5px;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex;position:absolute;inset:0}#tools{pointer-events:auto;gap:12px;margin-top:auto;display:flex}.tool{color:var(--ink);cursor:pointer;background:#ffffffbf;border:2px solid #3b2a221f;border-radius:14px;flex-direction:column;align-items:center;gap:2px;padding:10px 14px;font-family:inherit;transition:transform .12s,box-shadow .12s,background .12s;display:flex;box-shadow:0 3px #3b2a2214}.tool:hover{background:#fff;transform:translateY(-1px)}.tool.active{background:var(--clay);color:#fff;border-color:var(--umber);box-shadow:0 3px 0 var(--umber)}.tool-ico{font-size:22px;line-height:1}.tool-name{text-transform:lowercase;letter-spacing:.5px;font-size:11px;font-weight:700}#hint{color:#3b2a228c;letter-spacing:.3px;font-size:12px;font-weight:600}#brush-cursor{pointer-events:none;opacity:0;filter:drop-shadow(0 4px 6px #3b2a2259);z-index:10;width:56px;height:56px;transition:opacity .12s ease-out,transform 60ms ease-out;position:fixed;top:0;left:0;transform:translate(-50%,-80%)rotate(-18deg)scale(.9)}#brush-cursor.visible{opacity:1}#brush-cursor.scrubbing{transform:translate(-50%,-80%)rotate(-6deg)scale(1)}#next-btn{letter-spacing:.3px;color:#fff;background:linear-gradient(180deg, #f0a372, var(--clay));border:3px solid var(--umber);box-shadow:0 6px 0 var(--umber), 0 12px 24px #a66a4459;cursor:pointer;opacity:0;pointer-events:none;z-index:20;border-radius:22px;padding:16px 30px;font-family:inherit;font-size:18px;font-weight:800;transition:opacity .32s ease-out,transform .32s cubic-bezier(.34,1.56,.64,1);position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px)}#next-btn.visible{opacity:1;pointer-events:auto;transform:translate(-50%)}#next-btn:hover{filter:brightness(1.05)}#next-btn:active{box-shadow:0 2px 0 var(--umber), 0 4px 12px #a66a4459;transform:translate(-50%,4px)}