@import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap";:root,[data-theme=light]{--ttk-bg:#e8eef5;--ttk-bg-elevated:#f7fafc;--ttk-ink:#142033;--ttk-muted:#5a6a80;--ttk-line:#c5d0de;--ttk-accent:#0b6e99;--ttk-accent-soft:#d3ebf5;--ttk-glow:radial-gradient(120% 80% at 10% 0%, #c9dff5 0%, transparent 55%), radial-gradient(90% 70% at 100% 20%, #bfe8df 0%, transparent 50%), var(--ttk-bg);--ttk-shadow:0 18px 50px #1420331a}[data-theme=dark]{--ttk-bg:#12141a;--ttk-bg-elevated:#1b1f2a;--ttk-ink:#eef1f7;--ttk-muted:#9aa3b5;--ttk-line:#2c3344;--ttk-accent:#6ee7b7;--ttk-accent-soft:#16352c;--ttk-glow:radial-gradient(110% 80% at 0% 0%, #24304a 0%, transparent 55%), radial-gradient(80% 60% at 100% 10%, #1c3a32 0%, transparent 45%), var(--ttk-bg);--ttk-shadow:0 22px 60px #00000073}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%}body{color:var(--ttk-ink);background:var(--ttk-glow);margin:0;font-family:DM Sans,system-ui,sans-serif;transition:background .35s,color .25s}button{font:inherit}.demo{max-width:920px;margin:0 auto;padding:2.5rem 1.25rem 4rem}.demo__nav{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:3.5rem;display:flex}.demo__brand{letter-spacing:-.02em;font-family:Fraunces,Georgia,serif;font-size:1.15rem;font-weight:600}.demo__hero{gap:1.25rem;margin-bottom:3rem;display:grid}.demo__hero h1{letter-spacing:-.03em;max-width:12ch;margin:0;font-family:Fraunces,Georgia,serif;font-size:clamp(2.4rem,6vw,4rem);line-height:1.05}.demo__hero p{max-width:38rem;color:var(--ttk-muted);margin:0;font-size:1.1rem;line-height:1.55}.demo__panel{background:var(--ttk-bg-elevated);border:1px solid var(--ttk-line);box-shadow:var(--ttk-shadow);border-radius:18px;gap:1.25rem;padding:1.5rem;display:grid}.demo__panel h2{margin:0;font-size:1rem;font-weight:600}.demo__meta{color:var(--ttk-muted);flex-wrap:wrap;gap:.75rem 1.25rem;font-size:.95rem;display:flex}.demo__meta strong{color:var(--ttk-ink);font-weight:600}.demo__row{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.demo__hint{color:var(--ttk-muted);margin:0;font-size:.9rem}.ttk-toggle--segmented{border:1px solid var(--ttk-line);background:color-mix(in srgb, var(--ttk-bg) 70%, transparent);border-radius:999px;padding:.25rem;display:inline-flex}.ttk-toggle__option{color:var(--ttk-muted);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:.45rem .9rem;transition:background .2s,color .2s}.ttk-toggle__option:hover{color:var(--ttk-ink)}.ttk-toggle__option.is-active{background:var(--ttk-accent-soft);color:var(--ttk-accent);font-weight:600}.ttk-toggle--cycle{border:1px solid var(--ttk-line);background:var(--ttk-bg-elevated);color:var(--ttk-ink);cursor:pointer;border-radius:999px;align-items:center;gap:.5rem;padding:.55rem 1rem;display:inline-flex}.ttk-toggle--cycle:hover{border-color:var(--ttk-accent)}.ttk-toggle__icon{font-size:1.05rem;line-height:1}