:root{--room-1:#eceee9;--room-2:#dcdfda;--room-3:#c6cac4;--glass-1:#fdfdfc;--glass-2:#f1f3f0;--glass-3:#dcdfdc;--glass-rim:#fffffff2;--glass-edge:#1c222624;--glass-under:#1c222633;--slab-1:#ffffff80;--slab-2:#ffffff3d;--slab-base:#969e9b57;--slab-rim:#ffffffd9;--slab-edge:#1e242821;--ink:#14181c;--strong:#16191d;--muted:#4d545c;--faint:#565d66;--shade:28 34 38;--active-rgb:120 130 140;--active-text:#4d545c;--rx:34deg;--rz:-17deg;--s:1;--ease:cubic-bezier(.22, 1, .36, 1);--spring:cubic-bezier(.34, 1.32, .5, 1)}*,:before,:after{box-sizing:border-box}html,body{height:100%}body{color:var(--strong);background:var(--room-2);-webkit-font-smoothing:antialiased;margin:0;font-family:Plus Jakarta Sans,system-ui,-apple-system,sans-serif;overflow-x:hidden}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stage{z-index:1;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:clamp(8px,1.6vh,22px);min-height:100%;padding:clamp(18px,3.4vh,40px) clamp(14px,4vw,44px);display:flex;position:relative}.room{z-index:0;pointer-events:none;background:radial-gradient(120% 78% at 50% 118%, rgb(var(--shade) / .1), transparent 62%), linear-gradient(178deg, var(--room-1) 0%, var(--room-2) 58%, var(--room-3) 100%);position:fixed;inset:0}.room:after{content:"";background:radial-gradient(66% 46% at 50% 54%, rgb(var(--active-rgb) / .16), transparent 72%);opacity:0;transition:opacity .7s var(--ease), background .5s var(--ease);position:absolute;inset:0}.stage:not([data-mode=off]) .room:after{opacity:1}.scene{z-index:1;position:relative}.masthead,.readout,.hint{z-index:2;position:relative}.masthead{position:relative}.masthead__eyebrow{letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:0 0 6px;font-size:.72rem;font-weight:600}.masthead__title{letter-spacing:-.035em;color:var(--strong);margin:0;font-size:clamp(1.8rem,4.4vw,2.7rem);font-weight:800;line-height:1.02}.masthead__accent{color:var(--active-text);transition:color .5s var(--ease)}.scene{width:100%;height:calc(var(--s) * 384px);perspective:1250px;perspective-origin:50% 40%}.tray{width:470px;height:306px;transform-style:preserve-3d;transform:scale3d(var(--s), var(--s), var(--s)) rotateX(calc(var(--rx) + var(--py,0) * 3.2deg)) rotateZ(calc(var(--rz) + var(--px,0) * 2.4deg));margin:-153px 0 0 -235px;position:absolute;top:50%;left:50%}.floor{background:radial-gradient(42% 40% at 50% 54%, rgb(var(--shade) / .34), transparent 72%);position:absolute;inset:-160px -150px;transform:translateZ(-34px)}.floor--pool{background:radial-gradient(38% 36% at 50% 54%, rgb(var(--active-rgb) / .4), transparent 74%);opacity:0;transition:opacity .55s var(--ease), background .45s var(--ease)}.stage:not([data-mode=off]) .floor--pool{opacity:1}.slab{transform-style:preserve-3d;position:absolute;inset:0}.slab__top,.slab__base{border-radius:52px;display:block;position:absolute;inset:0}.slab__base{background:var(--slab-base);box-shadow:0 0 0 1px var(--slab-edge);transform:translateZ(-17px)}.slab__top{background:linear-gradient(158deg, var(--slab-1), var(--slab-2) 62%);box-shadow:inset 0 1.5px 0 var(--slab-rim), inset 0 0 0 1px var(--slab-edge), inset 0 -2px 2px rgb(var(--shade) / .1)}.rack{transform-style:preserve-3d;position:absolute;inset:0}.pill{--lift:13px;left:calc(var(--i) * 46px + 28px);top:calc(var(--i) * 84px + 26px);width:322px;height:78px;transform-style:preserve-3d;position:absolute}.pill__cast{border-radius:999px;position:absolute;inset:-2px;transform:translateZ(2px)}.pill__cast:before,.pill__cast:after{content:"";border-radius:999px;position:absolute;inset:-20px -24px}.pill__cast:before{background:radial-gradient(48% 44% at 50% 58%, rgb(var(--shade) / .34), transparent 72%);opacity:.9;transition:opacity .4s var(--ease)}.pill__cast:after{background:radial-gradient(50% 46% at 50% 54%, rgb(var(--liq-glow) / .58), transparent 74%);opacity:0;transition:opacity .5s var(--ease)}.pill.is-wet .pill__cast:after{opacity:1}.pill.is-wet .pill__cast:before{opacity:.55}.pill__halo{transform:translateZ(calc(var(--lift) - 1px));box-shadow:0 6px 16px rgb(var(--liq-glow) / .5), 0 14px 34px rgb(var(--liq-glow) / .34), 0 2px 5px rgb(var(--liq-glow) / .3);opacity:0;transition:opacity .5s var(--ease), transform .42s var(--spring);border-radius:999px;position:absolute;inset:0}.pill.is-wet .pill__halo{opacity:1}.pill__in{opacity:0;pointer-events:none;width:1px;height:1px;margin:0;position:absolute}.pill__face{cursor:pointer;-webkit-tap-highlight-color:transparent;background:linear-gradient(176deg, var(--glass-1), var(--glass-2) 46%, var(--glass-3));transform:translateZ(var(--lift));transition:transform .42s var(--spring);border-radius:999px;align-items:center;gap:13px;padding:0 20px 0 19px;display:flex;position:absolute;inset:0;overflow:hidden}.pill__face *{pointer-events:none}.pill:hover{--lift:21px}.pill:has(.pill__in:checked){--lift:26px}:is(.pill:active,.pill:has(.pill__in:checked):active){--lift:9px}.pill__liquid{border-radius:inherit;width:100%;height:100%;position:absolute;inset:0}.pill__sheen{border-radius:inherit;box-shadow:inset 0 1.5px 0 var(--glass-rim), inset 0 0 0 1px var(--glass-edge), inset 0 -3px 5px var(--glass-under);background:linear-gradient(104deg,#0000 22%,#ffffff4d 44%,#0000 66%);position:absolute;inset:0}.pill__glyph,.pill__name,.pill__dots{position:relative}.pill__glyph{width:24px;height:24px;color:var(--ink);transition:color .16s var(--ease);flex:none}.pill__glyph svg{width:100%;height:100%;display:block}.pill__glyph svg :not(.fill){fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round}.pill__glyph svg .fill{fill:currentColor;stroke:none}.pill__name{letter-spacing:-.012em;color:var(--ink);transition:color .16s var(--ease);white-space:nowrap;font-size:1.06rem;font-weight:600}.pill__dots{gap:4px;margin-left:auto;display:flex}.pill__dots i{background:rgb(var(--shade) / .38);width:4px;height:4px;transition:background .16s var(--ease);border-radius:50%}.pill.is-lit .pill__name,.pill.is-lit .pill__glyph{color:var(--liq-ink)}.pill.is-lit .pill__dots i{background:color-mix(in srgb, var(--liq-ink) 58%, transparent)}.pill.is-lit .pill__sheen{box-shadow:inset 0 1.5px 0 #ffffff8c, inset 0 0 0 1px #ffffff42, inset 0 -3px 5px rgb(var(--shade) / .16);background:linear-gradient(104deg,#0000 22%,#ffffff38 44%,#0000 66%)}.pill__in:focus-visible+.pill__face{outline:2px solid var(--liq-text);outline-offset:4px}.pill[data-key=sleep]{--liq-1:198 220 255;--liq-2:154 196 255;--liq-3:108 166 244;--liq-glow:91 155 245}.pill[data-key=dnd]{--liq-1:214 52 42;--liq-2:176 18 12;--liq-3:104 3 0;--liq-glow:230 58 47}.pill[data-key=personal]{--liq-1:232 158 73;--liq-2:205 117 10;--liq-3:150 80 11;--liq-glow:224 138 30}.pill[data-key=sleep]{--liq-ink:#0d1622;--liq-text:#1560c8}.pill[data-key=dnd]{--liq-ink:#fff;--liq-text:#c4170c}.pill[data-key=personal]{--liq-ink:#1c1204;--liq-text:#a05707}.readout{flex-direction:column;gap:2px;min-height:4.4em;display:flex}.readout__name{letter-spacing:-.03em;color:var(--active-text);transition:color .45s var(--ease);margin:0;font-size:clamp(1.4rem,3.4vw,1.9rem);font-weight:800}.readout__say{color:var(--muted);margin:0;font-size:.95rem;font-weight:500}.readout.is-turning .readout__name,.readout.is-turning .readout__say{animation:rise .42s var(--ease) both}.readout.is-turning .readout__say{animation-delay:50ms}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.hint{letter-spacing:.01em;color:var(--faint);margin:0;font-size:.8rem;font-weight:500}.stage[data-mode=off]{--active-rgb:120 130 140;--active-text:#4d545c}.stage[data-mode=sleep]{--active-rgb:91 155 245;--active-text:#1560c8}.stage[data-mode=dnd]{--active-rgb:230 58 47;--active-text:#c4170c}.stage[data-mode=personal]{--active-rgb:224 138 30;--active-text:#a05707}html:not(.js) .pill:has(.pill__in:checked) .pill__liquid{background:linear-gradient(176deg, rgb(var(--liq-1)), rgb(var(--liq-2)) 52%, rgb(var(--liq-3)))}:is(html:not(.js) .pill:has(.pill__in:checked) .pill__name,html:not(.js) .pill:has(.pill__in:checked) .pill__glyph){color:var(--liq-ink)}@media (width<=960px){:root{--s:.86}}@media (width<=800px){:root{--s:.74}}@media (width<=660px){:root{--s:.68;--rx:31deg;--rz:-14deg}}@media (width<=520px){:root{--s:.62}}@media (width<=420px){:root{--s:.58;--rx:29deg;--rz:-12deg}}@media (width<=660px){.pill__name{font-size:1.22rem}}@media (width<=420px){.pill__name{font-size:1.36rem}}@media (width>=961px) and (height<=800px){:root{--s:.84}}@media (width>=961px) and (height<=680px){:root{--s:.72}}@media (prefers-color-scheme:dark){:root{--room-1:#232526;--room-2:#131415;--room-3:#0b0b0c;--glass-1:#2b3033;--glass-2:#1e2226;--glass-3:#14171a;--glass-rim:#ffffff4d;--glass-edge:#ffffff1a;--glass-under:#0000007a;--slab-1:#ffffff1a;--slab-2:#ffffff09;--slab-base:#0a0b0cd9;--slab-rim:#ffffff2e;--slab-edge:#ffffff12;--ink:#eaedf1;--strong:#f2f4f7;--muted:#a2a9b3;--faint:#8d95a0;--shade:0 0 0;--active-text:#a2a9b3}.pill__halo{box-shadow:0 0 20px 1px rgb(var(--liq-glow) / .52), 0 0 54px 6px rgb(var(--liq-glow) / .34), 0 14px 40px 2px rgb(var(--liq-glow) / .26)}.pill__cast:before{background:radial-gradient(48% 44% at 50% 58%,#000000a8,#0000 72%)}.room:after{background:radial-gradient(74% 52% at 50% 52%, rgb(var(--active-rgb) / .22), transparent 70%)}.pill__sheen{background:linear-gradient(104deg,#0000 22%,#ffffff1a 44%,#0000 66%)}.pill[data-key=sleep]{--liq-text:#8dbdff}.pill[data-key=dnd]{--liq-text:#ff7a6d}.pill[data-key=personal]{--liq-text:#f0a542}.stage[data-mode=sleep]{--active-text:#8dbdff}.stage[data-mode=dnd]{--active-text:#ff7a6d}.stage[data-mode=personal]{--active-text:#f0a542}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.pill__face{transition:none}}