:root{--abyss:#04141a;--pale:#dcf0ea;--dim:#3d6a61;--line:#14333a;--foam:#bfe8dc}*{box-sizing:border-box;margin:0;padding:0}html,body{overscroll-behavior:none;height:100%}body{background:linear-gradient(180deg, #0a1c22 0%, var(--abyss) 55%, #020c10 100%);color:var(--pale);font-family:system-ui,Segoe UI,sans-serif;overflow:hidden}#cv{touch-action:none;cursor:pointer;width:100%;height:100%;position:fixed;inset:0}.mark{pointer-events:none;-webkit-user-select:none;user-select:none;position:fixed;top:24px;left:28px}.mark h1{letter-spacing:12px;color:var(--foam);font-size:28px;font-weight:200}.mark .tag{letter-spacing:5px;color:var(--dim);margin-top:4px;font-size:11px;display:block}.crosslink{letter-spacing:2px;color:var(--dim);font-size:12px;text-decoration:none;position:fixed;top:30px;right:28px}.crosslink:hover,.crosslink:focus-visible{color:var(--pale)}#cue{letter-spacing:10px;text-transform:uppercase;color:var(--foam);opacity:.75;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:15px;font-weight:200;transition:opacity 1.2s;position:fixed;top:18%;left:50%;transform:translate(-50%)}#hint{letter-spacing:2px;color:var(--dim);pointer-events:none;-webkit-user-select:none;user-select:none;text-align:center;padding:0 16px;font-size:12px;transition:opacity .8s;position:fixed;bottom:92px;left:50%;transform:translate(-50%)}#hint.gone{opacity:0}.palette{bottom:max(20px, env(safe-area-inset-bottom));border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);-webkit-user-select:none;user-select:none;background:#04141ab3;border-radius:999px;align-items:center;gap:14px;padding:10px 18px;display:flex;position:fixed;left:50%;transform:translate(-50%)}.palette label{letter-spacing:2px;color:var(--dim);align-items:center;gap:7px;font-size:11px;display:flex}.palette input[type=range]{width:80px;accent-color:var(--foam)}.palette select{color:var(--dim);letter-spacing:2px;cursor:pointer;background:0 0;border:none;font-family:inherit;font-size:12px}.palette select:hover{color:var(--pale)}.palette select option{background:var(--abyss);color:var(--pale)}.palette button{color:var(--dim);letter-spacing:2px;cursor:pointer;background:0 0;border:none;border-radius:999px;padding:6px 9px;font-family:inherit;font-size:13px}.palette button:hover{color:var(--pale)}.palette button:focus-visible{outline:2px solid var(--foam);outline-offset:2px}.palette button.on{color:var(--abyss);background:var(--foam)}#play{color:var(--pale);font-size:15px}#rec.rec-on{color:#ff6b7d}@media (width<=700px){.palette{border-radius:22px;flex-wrap:wrap;justify-content:center;max-width:94vw}}