:root{--night:#14111f;--night-deep:#0d0b16;--milk:#efeaf7;--faint:#8d84a6;--line:#2c2740;--glow:#ffc86b;--ember:#ff7a59;--violet:#b48cff;--mist:#6fe3b2;--wisp:#1fe0c2}*{box-sizing:border-box;margin:0;padding:0}html,body{overscroll-behavior:none;height:100%}body{background:radial-gradient(120% 90% at 50% 10%, var(--night) 0%, var(--night-deep) 100%);color:var(--milk);font-family:system-ui,Segoe UI,sans-serif;overflow:hidden}#cv{touch-action:none;cursor:crosshair;width:100%;height:100%;position:fixed;inset:0}.mark{pointer-events:none;-webkit-user-select:none;user-select:none;position:fixed;top:22px;left:28px}.mark h1{letter-spacing:1px;color:var(--milk);font-family:Georgia,Iowan Old Style,Times New Roman,serif;font-size:30px;font-style:italic;font-weight:400}.mark .tag{letter-spacing:4px;text-transform:uppercase;color:var(--faint);margin-top:2px;font-size:11px;display:block}.crosslink{letter-spacing:2px;color:var(--faint);font-size:12px;text-decoration:none;position:fixed;top:30px;right:28px}.crosslink:hover,.crosslink:focus-visible{color:var(--milk)}#hint{color:var(--faint);pointer-events:none;-webkit-user-select:none;user-select:none;font-family:Georgia,serif;font-size:20px;font-style:italic;transition:opacity .8s;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}#hint.gone{opacity:0}.palette{bottom:max(20px, env(safe-area-inset-bottom));border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);-webkit-user-select:none;user-select:none;background:#14111fb8;border-radius:999px;align-items:center;gap:8px;padding:10px 16px;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 12px 40px #00000073}.palette .sep{background:var(--line);width:1px;height:20px}.palette button{color:var(--faint);letter-spacing:1px;cursor:pointer;background:0 0;border:none;border-radius:999px;padding:8px 10px;font-family:inherit;font-size:14px}.palette button:hover{color:var(--milk)}.palette button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}#play{color:var(--milk);font-size:16px}#eraser.active,#play.on,#mirror.active,#garden.active{color:var(--night);background:var(--milk)}#rec.rec-on{color:#ff5c5c}.ink{padding:8px}.ink i{border-radius:50%;width:16px;height:16px;transition:transform .15s;display:block}.ink[data-ink=glow] i{background:var(--glow);box-shadow:0 0 10px var(--glow)}.ink[data-ink=ember] i{background:var(--ember);box-shadow:0 0 10px var(--ember)}.ink[data-ink=violet] i{background:var(--violet);box-shadow:0 0 10px var(--violet)}.ink[data-ink=mist] i{background:var(--mist);box-shadow:0 0 10px var(--mist)}.ink[data-ink=wisp] i{background:var(--wisp);box-shadow:0 0 10px var(--wisp)}.ink[data-ink=coal] i{background:#ff4d6d;box-shadow:0 0 10px #ff4d6d}.ink[data-ink=chime] i{background:#9fd8e8;box-shadow:0 0 10px #9fd8e8}.ink.active i{outline:2px solid var(--milk);outline-offset:3px;transform:scale(1.35)}#bpm{width:90px;accent-color:var(--violet)}#mood{color:var(--faint);cursor:pointer;background:0 0;border:none;font-family:Georgia,serif;font-size:14px;font-style:italic}#mood:hover{color:var(--milk)}#mood option{background:var(--night);color:var(--milk);font-style:normal}@media (width<=640px){.mark h1{font-size:24px}.palette{flex-wrap:wrap;justify-content:center;gap:4px;max-width:94vw;padding:8px 10px}#bpm{width:70px}}@media (prefers-reduced-motion:reduce){#hint,.ink i{transition:none}}