:root{--jam: #c2577e;--jam-dark: #9e3f63;--gold: #e0b25c;--cream: #fff8ee;--ink: #4a3a42;--shadow: 0 6px 24px rgba(90, 50, 60, .18)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;font-family:Nunito,Varela Round,ui-rounded,Segoe UI,system-ui,sans-serif;color:var(--ink)}#app{position:fixed;inset:0}.viewport-container{position:absolute;inset:0}.viewport-canvas{display:block;width:100%;height:100%;touch-action:none}.ui-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.dim-label{position:absolute;top:0;left:0;background:#fff8eef2;border:1.5px solid var(--jam);color:var(--ink);font-size:13px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow)}.dim-label-sub{font-size:10px;font-weight:600;color:var(--jam);text-align:center}.toolbar{position:absolute;top:14px;left:14px;right:14px;display:flex;align-items:center;gap:10px;pointer-events:none}.toolbar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:8px;background:var(--cream);border-radius:999px;padding:8px 16px 8px 12px;font-weight:800;font-size:15px;box-shadow:var(--shadow);user-select:none}.brand .jar{font-size:20px}.tool-group{display:flex;gap:4px;background:var(--cream);border-radius:999px;padding:5px;box-shadow:var(--shadow)}.tool-btn{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:none;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;transition:background .12s ease,color .12s ease,transform .06s ease}.tool-btn:hover{background:#f7e8d8}.tool-btn:active{transform:scale(.94)}.tool-btn.active{background:var(--jam);color:#fff}.tool-btn svg{width:21px;height:21px}.tool-btn .key-hint{position:absolute;bottom:1px;right:5px;font-size:8.5px;font-weight:800;opacity:.6}.tool-btn:disabled{opacity:.35;cursor:default}.tool-btn:disabled:hover{background:transparent}.spacer{flex:1;pointer-events:none}.play-btn{display:flex;align-items:center;gap:8px;border:none;border-radius:999px;padding:13px 30px;font-family:inherit;font-size:17px;font-weight:800;color:#fff;background:linear-gradient(135deg,#e06a93,var(--jam) 55%,var(--jam-dark));box-shadow:0 8px 26px #c2577e73;cursor:pointer;transition:transform .08s ease,box-shadow .12s ease}.play-btn:hover{transform:scale(1.05);box-shadow:0 10px 30px #c2577e8c}.play-btn.playing{background:linear-gradient(135deg,#8a7ad1,#7a68c9 55%,#5f4fae);box-shadow:0 8px 26px #7a68c973}.palette{position:absolute;bottom:16px;left:50%;transform:translate(-50%);display:flex;gap:7px;background:var(--cream);border-radius:999px;padding:8px 12px;box-shadow:var(--shadow);pointer-events:auto;max-width:calc(100vw - 32px);overflow-x:auto}.swatch{position:relative;width:34px;height:34px;flex:0 0 auto;border:2.5px solid rgba(74,58,66,.18);border-radius:999px;cursor:pointer;transition:transform .08s ease,border-color .1s ease;display:flex;align-items:center;justify-content:center;font-size:14px;padding:0}.swatch:hover{transform:scale(1.15)}.swatch.active{border-color:var(--ink);transform:scale(1.12);box-shadow:0 0 0 3px #c2577e59}.hud-hint{position:absolute;top:84px;left:50%;transform:translate(-50%);background:#281c22b8;color:#ffefdd;font-size:13px;font-weight:700;padding:7px 16px;border-radius:999px;pointer-events:none;display:none}.fade-overlay{position:absolute;inset:0;background:#ff5a1f;opacity:0;pointer-events:none;transition:opacity .18s ease}.fade-overlay.active{opacity:.85}.firstrun{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#3c283059;backdrop-filter:blur(3px);z-index:30}.firstrun-card{background:var(--cream);border-radius:26px;padding:30px 36px;max-width:420px;box-shadow:0 20px 60px #3c1e2866;text-align:center}.firstrun-card h1{margin:0 0 6px;font-size:24px}.firstrun-card p.tagline{margin:0 0 20px;font-size:14px;opacity:.75}.firstrun-steps{display:flex;flex-direction:column;gap:12px;text-align:left;margin-bottom:22px}.firstrun-step{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:12px 16px;font-weight:700;font-size:14.5px}.firstrun-step .num{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 auto;border-radius:999px;background:var(--jam);color:#fff;font-weight:800}.firstrun-step .hint{display:block;font-size:12px;font-weight:600;opacity:.65}.firstrun-btn{border:none;border-radius:999px;background:linear-gradient(135deg,#e06a93,var(--jam));color:#fff;font-family:inherit;font-size:16px;font-weight:800;padding:12px 34px;cursor:pointer;box-shadow:0 8px 22px #c2577e66;transition:transform .08s ease}.firstrun-btn:hover{transform:scale(1.05)}.hidden{display:none!important}