@font-face{font-family:Bodoni Moda Variable;font-style:normal;font-display:swap;font-weight:400 900;src:url(/assets/bodoni-moda-math-opsz-normal-CbZAXtrh.woff2)format("woff2-variations");unicode-range:U+302-303,U+305,U+307-308,U+310,U+312,U+315,U+31A,U+326-327,U+32C,U+32F-330,U+332-333,U+338,U+33A,U+346,U+34D,U+391-3A1,U+3A3-3A9,U+3B1-3C9,U+3D1,U+3D5-3D6,U+3F0-3F1,U+3F4-3F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE??}@font-face{font-family:Bodoni Moda Variable;font-style:normal;font-display:swap;font-weight:400 900;src:url(/assets/bodoni-moda-symbols-opsz-normal-d21etpfE.woff2)format("woff2-variations");unicode-range:U+1-C,U+E-1F,U+7F-9F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+28??,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B??,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F0??,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F7??,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB??}@font-face{font-family:Bodoni Moda Variable;font-style:normal;font-display:swap;font-weight:400 900;src:url(/assets/bodoni-moda-latin-ext-opsz-normal-CoJBavOu.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Bodoni Moda Variable;font-style:normal;font-display:swap;font-weight:400 900;src:url(/assets/bodoni-moda-latin-opsz-normal-X2BzlAjV.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Bodoni Moda Variable;font-style:italic;font-display:swap;font-weight:400 900;src:url(/assets/bodoni-moda-math-opsz-italic-CGdm0Lr_.woff2)format("woff2-variations");unicode-range:U+302-303,U+305,U+307-308,U+310,U+312,U+315,U+31A,U+326-327,U+32C,U+32F-330,U+332-333,U+338,U+33A,U+346,U+34D,U+391-3A1,U+3A3-3A9,U+3B1-3C9,U+3D1,U+3D5-3D6,U+3F0-3F1,U+3F4-3F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE??}@font-face{font-family:Bodoni Moda Variable;font-style:italic;font-display:swap;font-weight:400 900;src:url(/assets/bodoni-moda-symbols-opsz-italic-cRdvdvM-.woff2)format("woff2-variations");unicode-range:U+1-C,U+E-1F,U+7F-9F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+28??,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B??,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F0??,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F7??,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB??}@font-face{font-family:Bodoni Moda Variable;font-style:italic;font-display:swap;font-weight:400 900;src:url(/assets/bodoni-moda-latin-ext-opsz-italic-QSGu6YSm.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Bodoni Moda Variable;font-style:italic;font-display:swap;font-weight:400 900;src:url(/assets/bodoni-moda-latin-opsz-italic-BCRrlh7t.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/geist-cyrillic-ext-wght-normal-DjL33-gN.woff2)format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Geist Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/geist-cyrillic-wght-normal-BEAKL7Jp.woff2)format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/geist-vietnamese-wght-normal-6IgcOCM7.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Geist Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/geist-latin-ext-wght-normal-DC-KSUi6.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/geist-latin-wght-normal-BgDaEnEv.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Mono Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/geist-mono-cyrillic-ext-wght-normal-X_5orZeX.woff2)format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Geist Mono Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/geist-mono-cyrillic-wght-normal-DiZS0aHC.woff2)format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist Mono Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/geist-mono-symbols2-wght-normal-CO5SzqOn.woff2)format("woff2-variations");unicode-range:U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F}@font-face{font-family:Geist Mono Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/geist-mono-vietnamese-wght-normal-DadHysG0.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Geist Mono Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/geist-mono-latin-ext-wght-normal-Bwz-egvJ.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist Mono Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/geist-mono-latin-wght-normal-XN7g48iV.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--ground:#edf0f0;--paper:#f8f9f9;--paper-2:#f2f4f4;--ink:#1d2126;--ink-2:#4a525c;--ink-3:#5f6874;--staff:#c5ccd2;--hair:#dadfe3;--accent:#1d6b64;--accent-ink:#f4fbfa;--accent-soft:#d3e7e3;--clay:#a3564a;--clay-soft:#f2e2de;--shadow:0 1px 2px #1d21260f, 0 8px 24px -12px #1d21262e;--shadow-lift:0 2px 4px #1d21260f, 0 18px 40px -16px #1d212647;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-in-out:cubic-bezier(.77, 0, .175, 1);--ease-drawer:cubic-bezier(.32, .72, 0, 1);--slow:1;--serif:"Bodoni Moda Variable", "Bodoni 72", Didot, serif;--sans:"Geist Variable", system-ui, sans-serif;--mono:"Geist Mono Variable", ui-monospace, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root.is-slow{--slow:4}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}body{background:var(--ground);color:var(--ink);font:400 16px/1.6 var(--sans);font-feature-settings:"ss01";-webkit-font-smoothing:antialiased;caret-color:var(--accent);margin:0}::selection{background:var(--accent-soft);color:var(--ink)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}a{color:var(--ink);-webkit-text-decoration-color:var(--staff);text-decoration-color:var(--staff);text-underline-offset:.22em;text-decoration-thickness:1px}@media (hover:hover) and (pointer:fine){a:hover{-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}}code,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.86em}code{background:var(--paper-2);white-space:nowrap;border-radius:4px;padding:.05em .3em}svg{flex:none;width:16px;height:16px}button{font:inherit;color:inherit}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip{background:var(--ink);color:var(--paper);z-index:50;border-radius:8px;padding:8px 12px;position:absolute;top:-60px;left:16px}.skip:focus{top:12px}html{scrollbar-color:var(--staff) transparent}.page{grid-template-columns:236px minmax(0,760px);gap:56px;max-width:1120px;margin:0 auto;padding:0 32px;display:grid}.rail{flex-direction:column;align-self:start;height:100vh;padding:48px 0 32px;display:flex;position:sticky;top:0}.rail-title{font:italic 500 24px/1.1 var(--serif);font-variation-settings:"opsz" 28;letter-spacing:-.01em;text-decoration:none}.rail-list{border-left:1px solid var(--staff);gap:2px;margin:28px 0 0;padding:0 0 0 14px;list-style:none;display:grid}.rail-list a{color:var(--ink-3);padding:5px 0;font-size:14.5px;text-decoration:none;transition:color .15s;display:block;position:relative}.rail-list a[aria-current=true]{color:var(--ink)}.rail-list a[aria-current=true]:before{content:"";background:var(--accent);width:1px;position:absolute;top:7px;bottom:7px;left:-15px}@media (hover:hover) and (pointer:fine){.rail-list a:hover{color:var(--ink)}}.column{min-width:0;padding:56px 0 40px}.masthead{border-bottom:1px solid var(--staff);margin-bottom:8px;padding-bottom:40px}h1{font:400 clamp(56px, 9vw, 96px)/.95 var(--serif);font-variation-settings:"opsz" 96;letter-spacing:-.035em;margin:0 0 24px}.intro{max-width:56ch;color:var(--ink-2);margin:0;font-size:17px}.intro em{font-family:var(--serif);color:var(--ink);font-size:1.08em;font-style:italic}.globals{flex-wrap:wrap;gap:12px 28px;margin-top:28px;display:flex}.sw{cursor:pointer;color:var(--ink-2);-webkit-user-select:none;user-select:none;align-items:center;gap:10px;font-size:14.5px;display:inline-flex}.sw input{opacity:0;width:1px;height:1px;position:absolute}.sw-track{background:var(--staff);border-radius:99px;width:34px;height:20px;transition:background-color .15s;position:relative}.sw-track:after{content:"";background:var(--paper);width:16px;height:16px;transition:transform .2s var(--ease-out);border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #0000002e}.sw input:checked+.sw-track{background:var(--accent)}.sw input:checked+.sw-track:after{transform:translate(14px)}.sw input:focus-visible+.sw-track{outline:2px solid var(--accent);outline-offset:2px}.demo{padding:72px 0 8px}.demo+.demo{border-top:1px solid var(--hair)}.demo-head{flex-wrap:wrap;align-items:baseline;gap:4px 16px;display:flex}h2{font:400 40px/1.05 var(--serif);font-variation-settings:"opsz" 48;letter-spacing:-.025em;margin:0}.marking{font:italic 400 17px/1.3 var(--serif);font-variation-settings:"opsz" 14;color:var(--ink-3);margin:0}.lede{color:var(--ink-2);max-width:58ch;margin:14px 0 24px}.stage{background:var(--paper);box-shadow:var(--shadow);contain:layout paint;border-radius:18px;position:relative;overflow:clip}.stage-bar{border-bottom:1px solid var(--hair);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px;display:flex}.bar-actions{flex-wrap:wrap;gap:8px;display:flex}.stage-body{place-items:center;min-height:260px;padding:28px 20px;display:grid;position:relative}.seg{background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--hair);border-radius:11px;padding:3px;display:inline-flex}.seg button{color:var(--ink-3);cursor:pointer;background:0 0;border:0;border-radius:8px;align-items:center;gap:6px;padding:6px 12px 6px 9px;font-size:14px;transition:background-color .15s,color .15s,box-shadow .15s;display:inline-flex}.seg button svg{opacity:.55}.seg button[aria-checked=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px #1d21261a, 0 0 0 1px var(--hair)}.seg button[aria-checked=true] svg{opacity:1}.seg button[data-set=bad][aria-checked=true] svg{color:var(--clay)}.seg button[data-set=good][aria-checked=true] svg{color:var(--accent)}.btn{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border:0;border-radius:10px;padding:10px 16px;font-size:15px;font-weight:500}.btn-primary{background:var(--ink);color:var(--paper)}.btn-quiet{background:var(--paper-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair);padding:7px 12px;font-size:14px}.icon-btn{width:36px;height:36px;color:var(--ink-2);cursor:pointer;background:0 0;border:0;border-radius:9px;place-items:center;display:inline-grid}.icon-btn svg{width:18px;height:18px}.btn,.icon-btn,.seg button,.card{transition-property:transform,background-color,color,box-shadow;transition-duration:calc(.16s * var(--slow));transition-timing-function:var(--ease-out)}.btn:active,.icon-btn:active,.seg button:active{transform:scale(.97)}@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:#2c3239}.btn-quiet:hover,.icon-btn:hover{background:#e7ebeb}}.score{margin:18px 0 0}.score svg{width:100%;height:auto;display:block;overflow:visible}.score .ruler line{stroke:var(--staff);stroke-width:1px}.score .ruler text{font:400 11px var(--mono);fill:var(--ink-3)}.score .lane-l{font:italic 400 13px var(--serif);fill:var(--ink-2)}.score .budget{stroke:var(--clay);stroke-width:1px;stroke-dasharray:2 3;opacity:.7}.score .budget-t{font:400 11px var(--mono);fill:var(--clay)}.score .staff{stroke:var(--hair);stroke-width:1px}.score .ph-bad{stroke:var(--clay);stroke-width:1.3px;stroke-dasharray:4 3;fill:none}.score .ph-good{stroke:var(--accent);stroke-width:2px;fill:none;stroke-linecap:round}.score .rest{stroke:var(--ink-3);stroke-width:1px;stroke-dasharray:1 3}.score .note-t{font:400 11px var(--mono);fill:var(--ink-3)}.score g.lane{transition:opacity .2s}.demo[data-mode=good] .score g.lane-bad path,.demo[data-mode=bad] .score g.lane-good path{opacity:.4}.score figcaption{color:var(--ink-3);margin-top:6px;font-size:13px}.notes{border-collapse:collapse;width:100%;margin:26px 0 0;font-size:14.5px;line-height:1.5}.notes caption{text-align:left;font:italic 400 19px/1.3 var(--serif);font-variation-settings:"opsz" 18;color:var(--ink);padding-bottom:10px}.notes th,.notes td{text-align:left;vertical-align:top;border-top:1px solid var(--hair);padding:10px 14px 10px 0}.notes thead th{font:500 12.5px var(--sans);letter-spacing:.02em;color:var(--ink-3);border-top:0;padding-bottom:6px}.notes tbody th{width:128px;color:var(--ink);font-weight:500}.notes td{width:41%;color:var(--ink-2);transition:color .2s,opacity .2s}.demo[data-mode=good] .notes .c-bad,.demo[data-mode=bad] .notes .c-good{color:var(--ink-3)}.demo[data-mode=good] .notes .c-bad code,.demo[data-mode=bad] .notes .c-good code{background:0 0}.demo[data-mode=good] .notes thead .c-good{color:var(--accent)}.demo[data-mode=bad] .notes thead .c-bad{color:var(--clay)}.press-body{grid-auto-flow:row;gap:18px}.press-out{min-height:1.4em;color:var(--ink-3);margin:0;font-size:13px}.btn-hold{background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--hair);color:var(--clay);position:relative;overflow:hidden}.hold-fill{background:var(--clay);color:#fff7f5;clip-path:inset(0 100% 0 0);pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.demo[data-mode=good] .hold-fill{transition:clip-path calc(.2s * var(--slow)) var(--ease-out)}.demo[data-mode=good] .btn-hold.is-holding .hold-fill{clip-path:inset(0);transition:clip-path calc(2s * var(--slow)) linear}.demo[data-mode=bad] .press-body .btn{transition:all calc(.3s * var(--slow)) ease-in;transform:none}.demo[data-mode=bad] .press-save:active{background:#3a424b}.demo[data-mode=bad] .hold-fill{transition:clip-path calc(2s * var(--slow)) linear}.demo[data-mode=bad] .btn-hold.is-holding .hold-fill{clip-path:inset(0)}.toast-body{align-items:end;min-height:340px}.toasts{width:min(340px,100% - 32px);height:64px;margin:0;padding:0;list-style:none;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.toasts:before{content:"";height:var(--gap-fill,0px);position:absolute;bottom:100%;left:0;right:0}.toast{background:var(--paper);min-height:52px;box-shadow:var(--shadow-lift), 0 0 0 1px var(--hair);touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;border-radius:12px;align-items:center;gap:10px;padding:13px 14px;font-size:14.5px;display:flex;position:absolute;bottom:0;left:0;right:0}.toast .dot,.sheet-opts .dot{background:hsl(var(--h,168) 35% 52%);border-radius:50%;flex:none;width:8px;height:8px}.toast .t-sub{color:var(--ink-3);margin-left:auto;font-size:13px}.demo[data-mode=good] .toast{transition:transform calc(.4s * var(--slow)) ease, opacity calc(.4s * var(--slow)) ease}.demo[data-mode=good] .toast.is-dragging{cursor:grabbing;transition:none}.demo[data-mode=bad] .toasts{flex-direction:column;gap:8px;height:auto;display:flex;bottom:20px}.demo[data-mode=bad] .toast{animation:drop calc(.5s * var(--slow)) ease-in both;cursor:default;position:relative}@keyframes drop{0%{opacity:0;transform:translateY(-40px)}}.sheet-body{padding:24px 16px}.phone{width:270px;height:440px;box-shadow:var(--shadow-lift);background:#23282e;border-radius:38px;padding:9px}.phone-screen{background:var(--ground);border-radius:30px;width:100%;height:100%;position:relative;overflow:hidden}.phone-app{gap:14px;padding:44px 18px 18px;display:grid}.phone-title{font:400 26px/1.1 var(--serif);font-variation-settings:"opsz" 28;letter-spacing:-.02em;margin:0}.phone-rows{gap:8px;margin:0;padding:0;list-style:none;display:grid}.phone-rows li{background:var(--paper);height:44px;box-shadow:0 0 0 1px var(--hair);border-radius:10px}.phone-rows li:nth-child(2){width:82%}.phone-rows li:nth-child(4){width:64%}.sheet-backdrop{opacity:0;pointer-events:none;background:#14181c61;position:absolute;inset:0}.sheet-backdrop.is-on{pointer-events:auto}.sheet{background:var(--paper);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:22px 22px 0 0;padding:10px 18px 22px;position:absolute;bottom:0;left:0;right:0;transform:translateY(100%);box-shadow:0 -10px 30px -14px #00000059}.sheet-grip{background:var(--staff);border-radius:3px;width:36px;height:5px;margin:0 auto 14px}.sheet-title{margin:0 0 10px;font-weight:600}.sheet-opts{margin:0 0 14px;padding:0;list-style:none}.sheet-opts li{border-top:1px solid var(--hair);align-items:center;gap:12px;padding:11px 0;font-size:15px;display:flex}.sheet-close{width:100%}.demo[data-mode=bad] .sheet{transition:bottom calc(.3s * var(--slow)) ease-in;cursor:default;bottom:-100%;transform:none}.demo[data-mode=bad] .sheet.is-open{bottom:0}.list-body{place-items:start center;min-height:340px}.rows{width:min(420px,100%);margin:0;padding:0;list-style:none;position:relative}.row{background:var(--paper);box-shadow:0 0 0 1px var(--hair), 0 1px 2px #0000000a;border-radius:12px;align-items:center;gap:12px;margin-bottom:8px;padding:10px 8px 10px 14px;display:flex}.row .r-mark{width:18px;height:18px;box-shadow:inset 0 0 0 1.5px var(--staff);border-radius:6px;flex:none}.row .r-t{flex:1;font-size:15px}.row .r-x{width:30px;height:30px;color:var(--ink-3)}.row .r-x svg{width:14px;height:14px}.row.is-leaving{pointer-events:none}.morph-body{min-height:320px}.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%;max-width:560px;margin:0;padding:0;list-style:none;display:grid}.card{text-align:left;background:var(--paper-2);width:100%;box-shadow:0 0 0 1px var(--hair);cursor:pointer;border:0;border-radius:16px;gap:2px;padding:8px 8px 12px;display:grid}.card:active{transform:scale(.97)}.cover{aspect-ratio:16/10;background:radial-gradient(120% 90% at 20% 15%, var(--a), var(--b));border-radius:10px;display:block}.card .cover{margin-bottom:8px}.card-t{font:400 19px/1.15 var(--serif);font-variation-settings:"opsz" 20;letter-spacing:-.01em;transform-origin:0 0;padding:0 2px;display:block}.card-m{color:var(--ink-3);padding:0 2px;font-size:12.5px}.card.is-source .cover,.card.is-source .card-t{visibility:hidden}.detail{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:22px;padding:18px;display:grid;position:absolute;inset:14px}.detail[hidden]{display:none}.detail-surface{background:var(--paper);box-shadow:var(--shadow-lift), 0 0 0 1px var(--hair);border-radius:18px;position:absolute;inset:0}.detail-cover{transform-origin:0 0;border-radius:12px;position:relative}.detail-text{position:relative}.detail-t{font:400 34px/1.05 var(--serif);font-variation-settings:"opsz" 36;letter-spacing:-.02em;transform-origin:0 0;margin:0;display:inline-block}.detail-m{color:var(--ink-3);margin:8px 0 12px;font-size:12.5px}.detail-p{color:var(--ink-2);max-width:34ch;margin:0;font-size:15px}.detail-close{background:var(--paper-2);position:absolute;top:10px;right:10px}.ticker-body{gap:6px}.tick-label{color:var(--ink-3);letter-spacing:.02em;margin:0;font-size:13px}.ticker{font:400 clamp(56px, 12vw, 88px)/1 var(--serif);font-variation-settings:"opsz" 96;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;height:1em;display:flex;overflow:hidden}.ticker .col{width:.62em;height:1em;position:relative;overflow:hidden}.ticker .col.is-off{width:0}.ticker .strip{text-align:center;will-change:transform;flex-direction:column;display:flex}.ticker .strip span{height:1em;display:block}.ticker .comma{text-align:center;width:.28em}.ticker .comma.is-off{width:0;overflow:hidden}.demo[data-mode=good] .ticker .strip{transition:transform calc(.3s * var(--slow)) var(--ease-out)}.demo[data-mode=good] .ticker .col,.demo[data-mode=good] .ticker .comma{transition:opacity calc(.2s * var(--slow)) ease}.ticker .is-off{opacity:0}.ticker-bad{font:400 clamp(56px, 12vw, 88px)/1 var(--sans);font-variant-numeric:proportional-nums;letter-spacing:-.03em;font-weight:300}.tip-body{align-content:start;gap:30px;min-height:400px;padding-top:64px}.touch-note{color:var(--ink-3);text-align:center;max-width:34ch;margin:0;font-size:13px;display:none}@media (hover:none){.touch-note{display:block}}.toolbar{background:var(--paper);box-shadow:0 0 0 1px var(--hair), 0 2px 8px -4px #0000001f;border-radius:12px;gap:4px;padding:5px;display:flex}.tip{background:var(--ink);color:var(--paper);white-space:nowrap;pointer-events:none;opacity:0;transform-origin:50% 100%;transform:translate(var(--x,0), var(--y,0)) scale(.97);border-radius:7px;padding:5px 9px;font-size:12.5px;position:absolute;top:0;left:0}.tip.is-open{opacity:1;transform:translate(var(--x,0), var(--y,0)) scale(1)}.demo[data-mode=good] .tip{transition:opacity calc(.125s * var(--slow)) var(--ease-out), transform calc(.125s * var(--slow)) var(--ease-out)}.tip.is-instant{transition-duration:0s!important}.demo[data-mode=bad] .tip{transform-origin:50%;transform:translate(var(--x,0), var(--y,0)) scale(0);transition:all calc(.3s * var(--slow)) ease-in}.demo[data-mode=bad] .tip.is-open{transform:translate(var(--x,0), var(--y,0)) scale(1)}.tip-copy{color:var(--ink-2);margin:0}.hc-trigger{text-decoration-style:dotted;-webkit-text-decoration-color:var(--ink-3);text-decoration-color:var(--ink-3)}.hcard{background:var(--paper);width:232px;box-shadow:var(--shadow-lift), 0 0 0 1px var(--hair);opacity:0;pointer-events:none;transform:translate(var(--x,0), var(--y,0)) scale(.96);transform-origin:var(--ox,50%) var(--oy,0%);border-radius:14px;padding:10px 10px 14px;position:absolute;top:0;left:0}.hcard.is-open{opacity:1;pointer-events:auto;transform:translate(var(--x,0), var(--y,0)) scale(1)}.hcard-cover{aspect-ratio:16/7;margin-bottom:10px}.hcard-t{font:400 18px/1.2 var(--serif);font-variation-settings:"opsz" 18;margin:0 4px}.hcard-p{color:var(--ink-2);margin:4px 4px 0;font-size:13.5px;line-height:1.45}.demo[data-mode=good] .hcard{transition:opacity calc(.2s * var(--slow)) var(--ease-out), transform calc(.2s * var(--slow)) var(--ease-out)}.demo[data-mode=bad] .hcard{transform-origin:50%;transform:translate(var(--x,0), var(--y,0)) scale(0);transition:all calc(.3s * var(--slow)) ease-in}.demo[data-mode=bad] .hcard.is-open{transform:translate(var(--x,0), var(--y,0)) scale(1)}.view-body{padding:20px 16px}.mail{background:var(--paper-2);width:min(420px,100%);height:300px;box-shadow:0 0 0 1px var(--hair);contain:paint;border-radius:16px;position:relative;overflow:hidden}.mail-pane{view-transition-name:mail-pane;background:var(--paper-2);padding:14px;position:absolute;inset:0}.mail-head{align-items:center;gap:6px;height:36px;margin-bottom:8px;display:flex}.mail-head .h{font-size:15px;font-weight:600}.mail-list{gap:6px;margin:0;padding:0;list-style:none;display:grid}.mail-row{text-align:left;background:var(--paper);width:100%;box-shadow:0 0 0 1px var(--hair);cursor:pointer;border:0;border-radius:11px;gap:1px;padding:10px 12px;display:grid}.mail-row .s{justify-self:start;font-size:14.5px;font-weight:500}.mail-row .p{color:var(--ink-3);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.mail-subject{font:400 26px/1.1 var(--serif);font-variation-settings:"opsz" 28;letter-spacing:-.015em;margin:6px 0 10px}.mail-body{color:var(--ink-2);margin:0;font-size:14.5px}.mail-meta{color:var(--ink-3);margin:0 0 12px;font-size:12.5px}.demo[data-mode=bad] .mail-pane{view-transition-name:none}.mail-pane.bad-out{animation:bad-out calc(.45s * var(--slow)) ease-in-out both}.mail-pane.bad-in{animation:bad-in calc(.45s * var(--slow)) ease-in-out both}@keyframes bad-out{to{transform:translate(-100%)}}@keyframes bad-in{0%{transform:translate(100%)}}::view-transition-group(mail-pane){animation-duration:calc(.24s * var(--slow));animation-timing-function:var(--ease-out)}::view-transition-group(mail-subject){animation-duration:calc(.24s * var(--slow));animation-timing-function:var(--ease-out)}::view-transition-old(mail-pane){animation:vt-out calc(.24s * var(--slow)) var(--ease-out) both}::view-transition-new(mail-pane){animation:vt-in calc(.24s * var(--slow)) var(--ease-out) both}::view-transition-old(mail-subject){animation-duration:calc(.24s * var(--slow));animation-timing-function:var(--ease-out);height:100%}::view-transition-new(mail-subject){animation-duration:calc(.24s * var(--slow));animation-timing-function:var(--ease-out);height:100%}@keyframes vt-out{to{opacity:0;transform:translateX(calc(-24px * var(--dir,1)))}}@keyframes vt-in{0%{opacity:0;transform:translateX(calc(24px * var(--dir,1)))}}:root.vt-back{--dir:-1}.acc-body{place-items:start center}.acc{background:var(--paper);width:min(480px,100%);box-shadow:0 0 0 1px var(--hair);border-radius:14px}.acc-item+.acc-item{border-top:1px solid var(--hair)}.acc h3{font:inherit;margin:0}.acc-btn{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:15px 16px;font-size:15px;font-weight:500;display:flex}.acc-btn svg{color:var(--ink-3)}.acc-btn[aria-expanded=true] svg{transform:rotate(180deg)}.acc-panel{overflow:hidden}.acc-panel p{color:var(--ink-2);margin:0;padding:0 16px 16px;font-size:14.5px}.demo[data-mode=good] .acc-btn svg{transition:transform calc(.22s * var(--slow)) var(--ease-out)}.demo[data-mode=bad] .acc-btn svg{transition:transform calc(.6s * var(--slow)) linear}.demo[data-mode=bad] .acc-panel{transition:max-height calc(.6s * var(--slow)) ease-in;max-height:0}.demo[data-mode=bad] .acc-panel.is-open{max-height:1000px}.tabs-body{align-content:center;gap:20px}.tabs{position:relative}.tablist,.tablist-active{border-radius:12px;gap:2px;padding:4px;display:flex}.tablist{background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--hair)}.tablist button,.tablist-active span{white-space:nowrap;background:0 0;border:0;border-radius:9px;padding:8px 14px;font-size:14.5px;font-weight:500}.tablist button{color:var(--ink-3);cursor:pointer}.tablist-active{pointer-events:none;clip-path:var(--clip,inset(0 100% 0 0));position:absolute;inset:0}.tablist-active span{background:var(--ink);color:var(--paper);border-radius:9px}.demo[data-mode=good] .tablist-active{transition:clip-path calc(.25s * var(--slow)) var(--ease-in-out)}.demo[data-mode=good] .tablist-active.is-instant{transition:none}.tab-line{background:var(--ink);border-radius:2px;height:2px;display:none;position:absolute;bottom:-6px}.demo[data-mode=bad] .tablist-active{display:none}.demo[data-mode=bad] .tab-line{transition:left calc(.4s * var(--slow)) ease-in, width calc(.4s * var(--slow)) ease-in;display:block}.demo[data-mode=bad] .tablist button[aria-selected=true]{color:var(--ink)}.tabpanel{background:var(--paper-2);width:min(440px,100%);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink-2);border-radius:12px;min-height:64px;padding:16px;font-size:14.5px}.tabpanel p{margin:0}.tabpanel.bad-fade{animation:fade-in calc(.3s * var(--slow)) ease-in both}@keyframes fade-in{0%{opacity:0}}.vocab{border-top:1px solid var(--staff);margin-top:72px;padding:80px 0 16px}.terms{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:8px 0 0;display:grid}.terms div{border-top:1px solid var(--hair);break-inside:avoid;padding:14px 0}.terms dt{font:italic 400 20px/1.2 var(--serif);font-variation-settings:"opsz" 20}.terms dd{color:var(--ink-2);margin:4px 0 0;font-size:14.5px;line-height:1.5}.terms dd .seen{color:var(--ink-3);margin-top:4px;font-size:12.5px;display:block}.terms dd .seen a{color:var(--ink-3)}.foot{border-top:1px solid var(--hair);color:var(--ink-3);margin-top:64px;padding-top:20px;font-size:13.5px}.foot a{color:var(--ink-2)}.fps{z-index:60;background:var(--ink);color:var(--paper);border-radius:8px;padding:6px 10px;font-size:12px;position:fixed;bottom:12px;right:12px}:root.rm .btn:active,:root.rm .icon-btn:active,:root.rm .seg button:active,:root.rm .card:active{transform:none}:root.rm .demo[data-mode=good] .toast{transition-property:opacity}:root.rm .demo[data-mode=good] .tip,:root.rm .demo[data-mode=good] .hcard{transform:translate(var(--x,0), var(--y,0));transition-property:opacity}:root.rm .demo[data-mode=good] .acc-btn svg,:root.rm .demo[data-mode=good] .tablist-active,:root.rm .demo[data-mode=good] .ticker .strip,:root.rm .sw-track:after{transition:none}:root.rm ::view-transition-old(mail-pane){animation:vt-fade-out calc(.15s * var(--slow)) ease both}:root.rm ::view-transition-new(mail-pane){animation:vt-fade-in calc(.15s * var(--slow)) ease both}@keyframes vt-fade-out{to{opacity:0}}@keyframes vt-fade-in{0%{opacity:0}}@media (width<=900px){.page{grid-template-columns:minmax(0,1fr);gap:0;padding:0 16px}.rail{z-index:20;-webkit-backdrop-filter:blur(12px)saturate(140%);border-bottom:1px solid var(--hair);background:#edf0f0f2;height:auto;margin:0 -16px;padding:0;position:sticky;top:0}.rail-title{display:none}.rail-list{scrollbar-width:none;scroll-snap-type:x proximity;border:0;gap:4px;margin:0;padding:8px 16px;display:flex;overflow-x:auto}.rail-list::-webkit-scrollbar{display:none}.rail-list li{scroll-snap-align:start;flex:none}.rail-list a{white-space:nowrap;border-radius:99px;padding:6px 12px;font-size:14px}.rail-list a[aria-current=true]{background:var(--paper);box-shadow:0 0 0 1px var(--hair)}.rail-list a[aria-current=true]:before{display:none}html{scroll-padding-top:64px}.column{padding-top:36px}}@media (prefers-reduced-transparency:reduce){.rail{background:var(--ground);-webkit-backdrop-filter:none}}@media (width<=600px){h1{font-size:64px}h2{font-size:32px}.demo{padding-top:56px}.intro{font-size:16px}.stage{border-radius:16px;margin:0 -4px}.stage-body{padding:22px 14px}.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.card{border-radius:13px;padding:6px 6px 10px}.card-t{font-size:15px}.card-m{font-size:11px}.detail{grid-template-columns:1fr;align-content:start;gap:12px;padding:14px;inset:10px}.detail-t{font-size:26px}.detail-p{font-size:14px}.morph-body{min-height:380px}.notes thead{display:none}.notes caption{display:block}.notes,.notes tbody,.notes tr,.notes th,.notes td{width:auto;display:block}.notes tr{border-top:1px solid var(--hair);padding:10px 0}.notes th,.notes td{border:0;padding:2px 0}.notes td:before{content:attr(data-l);min-width:88px;color:var(--ink-3);font-size:12px;display:inline-block}.demo[data-mode=good] .notes td.c-bad,.demo[data-mode=bad] .notes td.c-good{display:none}.terms{grid-template-columns:1fr}.tablist button,.tablist-active span{padding:8px 10px;font-size:14px}}:root{view-transition-name:none}