:root{--drop-track:#dbe2e8;--drop-track-shade-1:#182c4033;--drop-track-shade-2:#182c401f;--drop-track-hi:#ffffffd9;--drop-track-hi-2:#ffffffe6;--drop-wet:linear-gradient(180deg, #a9d3f5 0%, #cbe6fb 100%);--drop-focus:#2f7de1;--drop-tab-ink:#0e1a22;--drop-tab-muted:#5f707c;--water-body:#3d9bff;--water-body-a:.3;--water-rim:#0f5296;--water-rim-a:.55;--water-shadow:#0b2a47;--water-shadow-a:.28;--caustic:#d9f1ff}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--drop-track:#141b22;--drop-track-shade-1:#0000008c;--drop-track-shade-2:#00000080;--drop-track-hi:#ffffff0f;--drop-track-hi-2:#ffffff0a;--drop-wet:linear-gradient(180deg, #0f3556 0%, #134468 100%);--drop-focus:#6fb0ff;--drop-tab-ink:#fff;--drop-tab-muted:#8b9aa6;--water-body:#58b0ff;--water-body-a:.24;--water-rim:#a8dcff;--water-rim-a:.4;--water-shadow:#000;--water-shadow-a:.55;--caustic:#8fd0ff}}:root[data-theme=dark]{--drop-track:#141b22;--drop-track-shade-1:#0000008c;--drop-track-shade-2:#00000080;--drop-track-hi:#ffffff0f;--drop-track-hi-2:#ffffff0a;--drop-wet:linear-gradient(180deg, #0f3556 0%, #134468 100%);--drop-focus:#6fb0ff;--drop-tab-ink:#fff;--drop-tab-muted:#8b9aa6;--water-body:#58b0ff;--water-body-a:.24;--water-rim:#a8dcff;--water-rim-a:.4;--water-shadow:#000;--water-shadow-a:.55;--caustic:#8fd0ff}.toggle{--s:1;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:999px;flex:none;padding:0;display:block;position:relative}.toggle:focus-visible{outline:2px solid var(--drop-focus);outline-offset:max(3px, calc(6px * var(--s)))}.toggle .track,.toggle .wet,.drop-tabs .track{border-radius:inherit;box-shadow:inset 0 calc(3px * var(--s)) calc(9px * var(--s)) var(--drop-track-shade-1), inset 0 calc(1px * var(--s)) calc(2px * var(--s)) var(--drop-track-shade-2), inset 0 calc(-2px * var(--s)) calc(1px * var(--s)) var(--drop-track-hi), 0 max(1px, calc(1px * var(--s))) 0 var(--drop-track-hi-2);position:absolute;inset:0}.toggle .track,.drop-tabs .track{background:var(--drop-track);overflow:hidden}.toggle .wet{background:var(--drop-wet);opacity:0}.toggle .drop,.drop-tabs .drop{pointer-events:none;position:absolute;overflow:visible}.toggle .drop circle,.drop-tabs .drop circle{fill:#000}.toggle .f-body,.drop-tabs .f-body{flood-color:var(--water-body);flood-opacity:var(--water-body-a)}.toggle .f-rim,.drop-tabs .f-rim{flood-color:var(--water-rim);flood-opacity:var(--water-rim-a)}.toggle .f-shadow,.drop-tabs .f-shadow{flood-color:var(--water-shadow);flood-opacity:var(--water-shadow-a)}.toggle .f-caustic,.drop-tabs .f-caustic{lighting-color:var(--caustic)}.drop-tabs{--s:1;border-radius:999px;flex:none;display:block;position:relative}.drop-tabs-row{display:flex;position:absolute;inset:0}.drop-tab{min-width:0;color:var(--drop-tab-muted);font:inherit;font-size:max(12px, calc(32px * var(--s)));cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:999px;flex:1;padding:0;font-weight:500;transition:color .25s}.drop-tab:hover,.drop-tab[aria-current]{color:var(--drop-tab-ink)}.drop-tab:focus-visible{outline:2px solid var(--drop-focus);outline-offset:-4px}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--glass-fill:linear-gradient(135deg, #ffffff57 0%, #ffffff1a 46%, #fff3 100%);--glass-blur:blur(26px) saturate(1.7) brightness(1.05);--glass-rim:linear-gradient(140deg, #ffffffe6, #ffffff2e 32%, #ffffff0a 62%, #fff9);--glass-inner:inset 0 1px 1px #ffffff8c, inset 0 0 32px #ffffff1a;--glass-shadow:0 30px 70px #00192347, 0 4px 14px #0019231f;--glass-text:#fff;--ink:#0e1a22;--focus:#0b6fd6;--photo-veil:radial-gradient(120% 90% at 50% 40%, #ffffff0d 0%, #031c226b 100%);--drop-track:#ffffff42;--drop-track-shade-1:#00283c3d;--drop-track-shade-2:#00283c24;--drop-track-hi:#ffffffbf;--drop-track-hi-2:#ffffff80;--drop-wet:linear-gradient(180deg, #6eb9ff8c 0%, #a5d7ff66 100%);--font:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;--mono:"Geist Mono", ui-monospace, Menlo, monospace;--display:"Instrument Serif", Georgia, serif}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--glass-fill:linear-gradient(135deg, #ffffff21 0%, #ffffff08 46%, #ffffff14 100%);--glass-blur:blur(26px) saturate(1.5) brightness(.8);--glass-rim:linear-gradient(140deg, #ffffff80, #ffffff14 32%, #ffffff05 62%, #ffffff47);--glass-inner:inset 0 1px 1px #ffffff38, inset 0 0 32px #ffffff08;--glass-shadow:0 30px 70px #00000080, 0 4px 14px #0000004d;--glass-text:#fff;--ink:#eef4f8;--focus:#6fb0ff;--photo-veil:radial-gradient(120% 90% at 50% 40%, #00000059 0%, #00060abf 100%);--drop-track:#00000047;--drop-track-shade-1:#00000080;--drop-track-shade-2:#0006;--drop-track-hi:#ffffff24;--drop-track-hi-2:#ffffff14;--drop-wet:linear-gradient(180deg, #2878cd80 0%, #4691e161 100%)}}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--glass-fill:linear-gradient(135deg, #ffffff21 0%, #ffffff08 46%, #ffffff14 100%);--glass-blur:blur(26px) saturate(1.5) brightness(.8);--glass-rim:linear-gradient(140deg, #ffffff80, #ffffff14 32%, #ffffff05 62%, #ffffff47);--glass-inner:inset 0 1px 1px #ffffff38, inset 0 0 32px #ffffff08;--glass-shadow:0 30px 70px #00000080, 0 4px 14px #0000004d;--glass-text:#fff;--ink:#eef4f8;--focus:#6fb0ff;--photo-veil:radial-gradient(120% 90% at 50% 40%, #00000059 0%, #00060abf 100%);--drop-track:#00000047;--drop-track-shade-1:#00000080;--drop-track-shade-2:#0006;--drop-track-hi:#ffffff24;--drop-track-hi-2:#ffffff14;--drop-wet:linear-gradient(180deg, #2878cd80 0%, #4691e161 100%)}*{box-sizing:border-box}html,body{margin:0}body{min-height:100vh;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;background:#0f4a50 url(/assets/water-de81LnDE.jpg) 50%/cover no-repeat fixed;overflow-x:hidden}body:before{content:"";z-index:-1;background:var(--photo-veil);pointer-events:none;position:fixed;inset:0}h1,h2,p,dl,dd{margin:0}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.glass{background:var(--glass-fill);box-shadow:var(--glass-inner), var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);position:relative}.glass:before{content:"";border-radius:inherit;background:var(--glass-rim);-webkit-mask-composite:xor;pointer-events:none;padding:1.25px;position:absolute;inset:0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.demo{min-height:100vh;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100dvh;padding:48px 16px 64px;display:flex}.card{border-radius:24px;width:min(360px,100%);padding:6px 22px}.row{justify-content:space-between;align-items:center;gap:20px;padding:16px 0;display:flex}.row-text{min-width:0}.card .row-label,.card .row-vibe{color:var(--glass-text);text-shadow:0 1px 10px #001e2840}.row-vibe{opacity:.78;margin-top:4px;font-size:12.5px;line-height:1.4}.row-label{font-family:var(--display);font-size:26px;line-height:1;display:block}.sound{color:#fff;cursor:pointer;border:0;border-radius:50%;place-items:center;width:40px;height:40px;padding:0;display:grid;position:fixed;top:16px;right:16px}.sound[aria-pressed=false]{opacity:.7}.credit{color:#ffffffb8;text-shadow:0 1px 2px #0006;font-size:11px;text-decoration:none;position:fixed;bottom:12px;right:16px}.credit:hover{color:#fff;text-decoration:underline}@media (max-width:400px){.card{padding:4px 18px}.credit{position:static}}