@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/ba9851c3c22cd980-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/21350d82a1f187e9-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/df0a9ae256c0569c-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/8e9860b6e62d6359-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,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:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Inter Fallback;src:local("Arial");ascent-override:90.44%;descent-override:22.52%;line-gap-override:0.00%;size-adjust:107.12%}.__className_f367f3{font-family:Inter,Inter Fallback;font-style:normal}.__variable_f367f3{--font-inter:"Inter","Inter Fallback"}:root{color-scheme:light;--color-background-primary:oklch(98.51% 0 0);--color-background-secondary:oklch(97.02% 0 0);--color-surface-board:oklch(97.85% 0 0);--color-surface-card:oklch(98.78% 0 0);--color-surface-drawer:#ffffff;--color-bg-hover:oklch(0% 0 0/0.06);--color-bg-hover-soft:oklch(0% 0 0/0.04);--color-content-primary:oklch(0% 0 0/0.85);--color-content-secondary:oklch(0% 0 0/0.6);--color-content-tertiary:oklch(0% 0 0/0.75);--color-content-quaternary:oklch(0% 0 0/0.5);--color-content-inverse:#ffffff;--ds-border-width:0.5px;--color-border:oklch(0% 0 0/0.12);--color-border-subtle:oklch(0% 0 0/0.06);--color-border-prominent:oklch(0% 0 0/0.16);--color-border-focused:oklch(60.38% .1988 255.53/.7);--color-interactive-inverse:oklch(15.91% 0 0);--color-content-success:#2f9e63;--color-neutral-z2:oklch(94.01% 0 0);--color-neutral-z6:oklch(80.47% 0 0);--color-workflow-danger-soft:#c2554a;--glow-success:color-mix(in srgb,var(--color-content-success) 16%,transparent);--ring-danger:color-mix(in srgb,var(--color-workflow-danger-soft) 12%,transparent);--halo-a:oklch(68% .165 253/0.05);--halo-b:oklch(79.03% .093 68.98/0.05);--color-accent-trail:oklch(78.94% .1581 64.49);--key-side:var(--color-background-secondary);--key-side-pressed:var(--color-neutral-z2);--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:10px;--radius-full:999px;--spacing:4px;--shadow-sm:0 1px 2px rgba(20,20,22,0.05);--shadow-md:0 1px 2px rgba(20,20,22,0.04),0 6px 20px rgba(20,20,22,0.05);--shadow-floating-dialog:0 1px 2px rgba(20,20,22,0.06),0 12px 32px rgba(20,20,22,0.10);--shadow-knob:0 1px 2px rgba(20,20,22,0.18),0 2px 6px rgba(20,20,22,0.08);--motion-instant:50ms;--motion-fast:150ms;--motion-base:200ms;--motion-moderate:280ms;--motion-slow:380ms;--motion-deliberate:520ms;--ease-out:cubic-bezier(0.16,1,0.3,1);--ease-in:cubic-bezier(0.4,0,1,1);--ease-in-out:cubic-bezier(0.65,0,0.35,1);--ease-snappy:cubic-bezier(0.4,0,0.2,1);--ease-drawer:cubic-bezier(0.32,0.72,0,1);--text-xxs-450:.6875rem;--text-xxs-450--font-weight:450;--text-xxs-450--letter-spacing:.0025em;--text-xxs-450--line-height:1.27;--text-xxs-500:.6875rem;--text-xxs-500--font-weight:525;--text-xxs-500--letter-spacing:.0075em;--text-xxs-500--line-height:1.27;--text-xs-450:.75rem;--text-xs-450--font-weight:450;--text-xs-450--letter-spacing:.002em;--text-xs-450--line-height:1.33;--text-xs-500:.75rem;--text-xs-500--font-weight:525;--text-xs-500--letter-spacing:.005em;--text-xs-500--line-height:1.33;--text-sm-450:.8125rem;--text-sm-450--font-weight:450;--text-sm-450--letter-spacing:.00015em;--text-sm-450--line-height:1.38;--text-sm-500:.8125rem;--text-sm-500--font-weight:525;--text-sm-500--letter-spacing:.0025em;--text-sm-500--line-height:1.38;--text-base-450:.9375rem;--text-base-450--font-weight:450;--text-base-450--letter-spacing:0em;--text-base-450--line-height:1.33;--text-base-500:.9375rem;--text-base-500--font-weight:525;--text-base-500--letter-spacing:0em;--text-base-500--line-height:1.33;--text-content-p:.9375rem;--text-content-p--font-weight:450;--text-content-p--letter-spacing:0em;--text-content-p--line-height:1.6;--text-lg-450:1.0625rem;--text-lg-450--font-weight:450;--text-lg-450--letter-spacing:0em;--text-lg-450--line-height:1.29;--text-lg-500:1.0625rem;--text-lg-500--font-weight:525;--text-lg-500--letter-spacing:0em;--text-lg-500--line-height:1.29;--text-h4-450:1.1875rem;--text-h4-450--font-weight:450;--text-h4-450--letter-spacing:-.005em;--text-h4-450--line-height:1.32;--text-h4-500:1.1875rem;--text-h4-500--font-weight:525;--text-h4-500--letter-spacing:-.005em;--text-h4-500--line-height:1.32;--text-h3-450:1.3125rem;--text-h3-450--font-weight:450;--text-h3-450--letter-spacing:-.0075em;--text-h3-450--line-height:1.29;--text-h3-500:1.3125rem;--text-h3-500--font-weight:525;--text-h3-500--letter-spacing:-.0075em;--text-h3-500--line-height:1.29;--text-h2-450:1.5rem;--text-h2-450--font-weight:450;--text-h2-450--letter-spacing:-.04em;--text-h2-450--line-height:1.29;--text-h2-500:1.5rem;--text-h2-500--font-weight:525;--text-h2-500--letter-spacing:-.04em;--text-h2-500--line-height:1.29;--text-h1-450:1.75rem;--text-h1-450--font-weight:450;--text-h1-450--letter-spacing:-.04em;--text-h1-450--line-height:1.29;--text-h1-500:1.75rem;--text-h1-500--font-weight:525;--text-h1-500--letter-spacing:-.04em;--text-h1-500--line-height:1.29;--text-display:clamp(1.875rem,4.6vw,2.75rem);--text-display--font-weight:525;--text-display--letter-spacing:-0.04em;--text-display--line-height:1.08}:root.dark{color-scheme:dark;--color-background-primary:oklch(21.5% 0 0);--color-background-secondary:oklch(20% 0 0);--color-surface-board:oklch(20% 0 0);--color-surface-card:oklch(21.5% 0 0);--color-surface-drawer:oklch(23% 0 0);--color-bg-hover:oklch(100% 0 0/0.12);--color-bg-hover-soft:oklch(100% 0 0/0.06);--color-content-primary:oklch(100% 0 0/0.85);--color-content-secondary:oklch(100% 0 0/0.6);--color-content-tertiary:oklch(100% 0 0/0.75);--color-content-quaternary:oklch(100% 0 0/0.5);--color-content-inverse:oklch(20% 0 0);--color-border:oklch(100% 0 0/0.12);--color-border-subtle:oklch(100% 0 0/0.06);--color-border-prominent:oklch(100% 0 0/0.16);--color-border-focused:oklch(70% .14 251/.65);--color-interactive-inverse:oklch(96% 0 0);--color-content-success:oklch(71% 0.13 152);--color-neutral-z2:oklch(21.5% 0 0);--color-neutral-z6:oklch(40% 0 0);--color-workflow-danger-soft:oklch(70% 0.13 28);--glow-success:color-mix(in srgb,var(--color-content-success) 28%,transparent);--ring-danger:color-mix(in srgb,var(--color-workflow-danger-soft) 22%,transparent);--halo-a:oklch(68% .165 253/0.08);--halo-b:oklch(79.03% .093 68.98/0.07);--color-accent-trail:oklch(73% .16 65);--key-side:var(--color-background-primary);--key-side-pressed:var(--color-background-secondary);--shadow-sm:0 1px 3px rgba(0,0,0,0.6);--shadow-md:0 1px 2px rgba(0,0,0,0.35),0 6px 20px rgba(0,0,0,0.4);--shadow-floating-dialog:0 1px 2px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.65);--shadow-knob:0 0 0 0.5px oklch(100% 0 0/0.16),0 1px 2px rgba(0,0,0,0.5),0 2px 6px rgba(0,0,0,0.35)}:root{--vui-bg-page:var(--color-surface-card);--vui-bg-surface:var(--color-surface-drawer);--vui-bg-stage:var(--color-background-secondary);--vui-bg-bar:var(--color-background-secondary);--vui-bg-hover:var(--color-bg-hover);--vui-bg-tint:var(--color-bg-hover-soft);--vui-text-primary:var(--color-content-primary);--vui-text-secondary:var(--color-content-secondary);--vui-text-muted:var(--color-content-quaternary);--vui-text-tertiary:var(--color-content-tertiary);--vui-border:var(--color-border);--vui-border-subtle:var(--color-border-subtle);--vui-border-input:var(--color-border-prominent);--vui-hairline:var(--ds-border-width,0.5px);--vui-success:var(--color-content-success);--vui-neutral-z6:var(--color-neutral-z6);--vui-danger-soft:var(--color-workflow-danger-soft);--vui-bg-card:var(--color-surface-card);--vui-fill-primary:var(--color-interactive-inverse);--vui-on-fill:var(--color-content-inverse);--vui-focus:var(--color-border-focused);--vui-success-glow:var(--glow-success);--vui-danger-ring:var(--ring-danger);--vui-knob-shadow:var(--shadow-knob);--vui-halo-a:var(--halo-a);--vui-halo-b:var(--halo-b);--vui-trail:var(--color-accent-trail);--vui-key-side:var(--key-side);--vui-key-side-pressed:var(--key-side-pressed);--vui-font-sans:var(--font-inter),"Inter",-apple-system,BlinkMacSystemFont,sans-serif;--vui-font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;--vui-radius-md:var(--radius-md);--vui-radius-lg:var(--radius-xl);--vui-radius-canvas:var(--radius-xl);--vui-radius-full:var(--radius-full);--vui-shadow-sm:var(--shadow-sm);--vui-shadow-md:var(--shadow-md);--vui-shadow-lg:var(--shadow-floating-dialog);--vui-ease-out:var(--ease-out);--vui-ease-in:var(--ease-in);--vui-ease-snappy:var(--ease-snappy);--vui-ease-drawer:var(--ease-drawer);--vui-motion-fast:var(--motion-fast);--vui-motion-base:var(--motion-base);--vui-motion-moderate:var(--motion-moderate);--vui-motion-slow:var(--motion-slow);--vui-motion-instant:var(--motion-instant,50ms);--vui-motion-deliberate:var(--motion-deliberate,520ms);--vui-ease-in-out:var(--ease-in-out)}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-font-smoothing:antialiased}[hidden]{display:none!important}body{font-family:var(--vui-font-sans);font-size:var(--text-base-450);font-weight:var(--text-base-450--font-weight);letter-spacing:var(--text-base-450--letter-spacing);line-height:var(--text-base-450--line-height);background:var(--vui-bg-page);color:var(--vui-text-primary);min-height:100vh;padding-inline:40px}button{border:none;background:none;cursor:pointer;color:inherit}button,input{font-family:inherit}:focus{outline:none}:focus-visible{outline:1.5px solid var(--vui-focus);outline-offset:0}.header{position:-webkit-sticky;position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 0;background:color-mix(in srgb,var(--vui-bg-page) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:0}.header:after{content:"";position:absolute;left:calc(40px * -1);right:calc(40px * -1);bottom:0;border-bottom:var(--vui-hairline) solid var(--vui-border-subtle);pointer-events:none}.brand{display:inline-flex;align-items:center;min-width:max-content;color:var(--vui-text-primary);cursor:default;-moz-user-select:none;user-select:none;-webkit-user-select:none}.brand,.brand svg{flex:0 0 auto;height:24px}.brand svg{width:auto;overflow:visible}.brand path{fill:currentColor}.header-controls{gap:10px}.header-controls,.voice-switch{display:flex;align-items:center}.voice-switch{position:relative;gap:2px;height:30px;padding:0;background:var(--vui-bg-bar);border-radius:var(--vui-radius-full)}.voice-pill{position:absolute;top:0;left:0;height:100%;width:0;background:var(--vui-bg-surface);border:var(--vui-hairline) solid var(--vui-border);box-shadow:var(--vui-shadow-sm);transform:translateX(0);transition:transform var(--vui-motion-base) var(--vui-ease-out),width var(--vui-motion-base) var(--vui-ease-out);will-change:transform,width;z-index:0;pointer-events:none}.voice-btn,.voice-pill{border-radius:var(--vui-radius-full)}.voice-btn{position:relative;z-index:1;display:inline-flex;align-items:center;height:30px;font-size:var(--text-xs-500);font-weight:var(--text-xs-500--font-weight);letter-spacing:var(--text-xs-500--letter-spacing);padding:0 14px;color:var(--vui-text-tertiary);transition:color var(--vui-motion-fast) var(--vui-ease-snappy)}.voice-btn.is-active,.voice-btn:hover{color:var(--vui-text-primary)}.voice-select-wrap{position:relative;display:none;align-items:center;height:30px}.voice-select-trigger{display:inline-flex;align-items:center;gap:8px;width:max-content;height:30px;padding:0 12px;background:var(--vui-bg-surface);border:var(--vui-hairline) solid var(--vui-border);border-radius:var(--vui-radius-full);box-shadow:var(--vui-shadow-sm);color:var(--vui-text-primary);font-size:var(--text-xs-500);font-weight:var(--text-xs-500--font-weight);letter-spacing:var(--text-xs-500--letter-spacing);white-space:nowrap;transition:background var(--vui-motion-fast) var(--vui-ease-snappy),transform .12s var(--vui-ease-snappy)}.voice-select-trigger:hover,.voice-select-trigger[aria-expanded=true]{background:var(--vui-bg-hover)}.voice-select-trigger:active{transform:scale(.975)}.voice-select-label{display:inline-block;white-space:nowrap}.voice-select-chevron{width:6px;height:6px;flex:none;border-right:var(--vui-hairline) solid var(--vui-text-tertiary);border-bottom:var(--vui-hairline) solid var(--vui-text-tertiary);transform:translateY(-2px) rotate(45deg);pointer-events:none}.voice-select-popover{position:absolute;top:calc(100% + 4px);left:0;z-index:100;width:max-content;min-width:100%;padding:4px;background:var(--vui-bg-surface);border:var(--vui-hairline) solid var(--vui-border);border-radius:8px;box-shadow:var(--vui-shadow-lg);transform-origin:top left;animation:voice-popover-in .12s var(--vui-ease-snappy)}.voice-select-option{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-width:104px;height:32px;padding:0 8px;border-radius:6px;color:var(--vui-text-secondary);font-size:var(--text-xs-500);font-weight:var(--text-xs-500--font-weight);letter-spacing:var(--text-xs-500--letter-spacing);text-align:left;white-space:nowrap;transition:background var(--vui-motion-fast) var(--vui-ease-snappy),color var(--vui-motion-fast) var(--vui-ease-snappy)}.voice-select-option.is-selected,.voice-select-option:focus-visible,.voice-select-option:hover{background:var(--vui-bg-hover);color:var(--vui-text-primary)}.voice-select-check{width:10px;height:6px;flex:none;border-left:var(--vui-hairline) solid;border-bottom:var(--vui-hairline) solid;transform:translateY(-1px) rotate(-45deg)}@keyframes voice-popover-in{0%{opacity:0;transform:translateY(-2px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sound-gate{display:flex;align-items:center;gap:8px;flex:none;height:30px;font-size:var(--text-xs-500);font-weight:var(--text-xs-500--font-weight);letter-spacing:var(--text-xs-500--letter-spacing);padding:0 14px;background:var(--vui-bg-surface);border:var(--vui-hairline) solid var(--vui-border);border-radius:var(--vui-radius-full);box-shadow:var(--vui-shadow-sm);color:var(--vui-text-secondary);white-space:nowrap;transition:background var(--vui-motion-fast) var(--vui-ease-snappy),transform .12s var(--vui-ease-snappy)}.sound-gate:hover{background:var(--vui-bg-hover)}.sound-gate:active{transform:scale(.975)}.gate-label{white-space:nowrap}.gate-dot{width:7px;height:7px;flex:none;border-radius:var(--vui-radius-full);background:var(--vui-neutral-z6);transition:background var(--vui-motion-base) var(--vui-ease-out),box-shadow var(--vui-motion-base) var(--vui-ease-out)}.sound-gate.is-live .gate-dot{background:var(--vui-success);box-shadow:0 0 0 3px var(--vui-success-glow)}.theme-toggle{width:30px;height:30px;flex:none;display:grid;place-items:center;background:var(--vui-bg-surface);border:var(--vui-hairline) solid var(--vui-border);border-radius:var(--vui-radius-full);box-shadow:var(--vui-shadow-sm);color:var(--vui-text-secondary);transition:background var(--vui-motion-fast) var(--vui-ease-snappy),transform .12s var(--vui-ease-snappy)}.theme-toggle:hover{background:var(--vui-bg-hover)}.theme-toggle:active{transform:scale(.975)}.hero{position:relative;padding:84px 0 56px}.hero:before{content:"";position:absolute;inset:0 0 auto 0;height:340px;z-index:-1;pointer-events:none;background:radial-gradient(420px 240px at 38% 30%,var(--vui-halo-a),transparent 70%),radial-gradient(420px 240px at 62% 34%,var(--vui-halo-b),transparent 70%)}.hero-copy{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);align-items:end;grid-gap:calc(var(--spacing) * 12);gap:calc(var(--spacing) * 12);max-width:880px;margin:0 auto}.hero h1{text-align:left;font-size:var(--text-display);font-weight:var(--text-display--font-weight);letter-spacing:var(--text-display--letter-spacing);line-height:var(--text-display--line-height)}.hero p{max-width:340px;margin-left:auto;text-align:right;font-size:var(--text-content-p);font-weight:var(--text-content-p--font-weight);line-height:var(--text-content-p--line-height);color:var(--vui-text-secondary)}.principles-panel{max-width:880px;margin:0 auto;padding:80px 0 40px;border-top:var(--vui-hairline) solid var(--vui-border-subtle)}.principles-view{display:flex;flex-direction:column;gap:34px}.principle-list{grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:var(--vui-hairline) solid var(--vui-border-subtle)}.principle-item,.principle-list{display:grid;border-top:var(--vui-hairline) solid var(--vui-border-subtle)}.principle-item{grid-template-columns:36px minmax(0,1fr);grid-gap:14px;gap:14px;padding:20px 0}.principle-item:nth-child(-n+2){border-top:0}.principle-item:nth-child(2n){padding-left:28px;border-left:var(--vui-hairline) solid var(--vui-border-subtle)}.principle-index{font-family:var(--vui-font-mono);font-size:11px;color:var(--vui-text-muted);line-height:1.7}.principle-item h3{font-size:var(--text-base-500);font-weight:var(--text-base-500--font-weight);letter-spacing:var(--text-base-500--letter-spacing);line-height:1.25}.principle-item p{margin-top:6px;font-size:var(--text-sm-450);font-weight:var(--text-sm-450--font-weight);letter-spacing:var(--text-sm-450--letter-spacing);line-height:1.55;color:var(--vui-text-secondary)}.sound-review{display:flex;flex-direction:column;gap:22px;max-width:560px;margin:0 auto}.sound-review-heading h2{font-size:var(--text-h2-500);font-weight:var(--text-h2-500--font-weight);letter-spacing:var(--text-h2-500--letter-spacing);line-height:var(--text-h2-500--line-height)}.sound-review-heading p{margin-top:6px;font-size:var(--text-sm-450);line-height:1.55;color:var(--vui-text-secondary)}.voice-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:12px;gap:12px}.voice-note{padding:14px 16px;background:var(--vui-bg-card);border:var(--vui-hairline) solid var(--vui-border-subtle);border-radius:var(--vui-radius-lg)}.voice-note h3{font-size:var(--text-sm-500);font-weight:var(--text-sm-500--font-weight);letter-spacing:var(--text-sm-500--letter-spacing)}.voice-note p{margin-top:4px;font-size:var(--text-xs-450);line-height:1.45;color:var(--vui-text-secondary)}.voice-note .voice-note-label{color:var(--vui-text-muted)}.review-table{overflow:hidden;border:var(--vui-hairline) solid var(--vui-border-subtle);border-radius:var(--vui-radius-lg)}.review-row{display:grid;grid-template-columns:1fr auto;align-items:center;grid-gap:18px;gap:18px;padding:12px 14px;background:var(--vui-bg-card)}.review-row+.review-row{border-top:var(--vui-hairline) solid var(--vui-border-subtle)}.review-moment{font-size:var(--text-sm-500);font-weight:var(--text-sm-500--font-weight);letter-spacing:var(--text-sm-500--letter-spacing)}.review-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap}.review-play{min-height:28px;padding:0 11px;background:var(--vui-bg-surface);border:var(--vui-hairline) solid var(--vui-border);border-radius:var(--vui-radius-full);color:var(--vui-text-secondary);font-size:var(--text-xs-500);font-weight:var(--text-xs-500--font-weight);letter-spacing:var(--text-xs-500--letter-spacing);transition:background var(--vui-motion-fast) var(--vui-ease-snappy),color var(--vui-motion-fast) var(--vui-ease-snappy),transform .12s var(--vui-ease-snappy)}.review-play:hover{background:var(--vui-bg-hover);color:var(--vui-text-primary)}.review-play:active{transform:scale(.96)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));grid-gap:20px;gap:20px;max-width:880px;margin:0 auto;padding:0 0 80px}.card{background:transparent;border:0;box-shadow:none}.stage{height:248px;background:var(--vui-bg-stage);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--vui-radius-canvas)}.stage,.stage>*{position:relative}.stage>*{z-index:1}.stage>.ripple{z-index:0}.replay{position:absolute;bottom:12px;right:12px;font-size:var(--text-xxs-500);font-weight:var(--text-xxs-500--font-weight);letter-spacing:var(--text-xxs-500--letter-spacing);padding:5px 12px;background:var(--vui-bg-surface);border:var(--vui-hairline) solid var(--vui-border);border-radius:var(--vui-radius-full);box-shadow:var(--vui-shadow-sm);color:var(--vui-text-secondary);opacity:0;transition:opacity var(--vui-motion-fast) var(--vui-ease-snappy),transform .12s var(--vui-ease-snappy),background var(--vui-motion-fast) var(--vui-ease-snappy)}.stage:hover .replay{opacity:1}.replay:hover{background:var(--vui-bg-hover)}.replay:active{transform:scale(.96)}.card-meta{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:58px;padding:12px 2px 0;background:transparent}.card-meta>div:first-child{padding-right:42px}.card-meta h3{font-size:var(--text-sm-500);font-weight:var(--text-sm-500--font-weight);letter-spacing:var(--text-sm-500--letter-spacing);line-height:var(--text-sm-500--line-height)}.card-meta .desc{margin-top:3px;font-size:var(--text-xs-450);font-weight:var(--text-xs-450--font-weight);letter-spacing:var(--text-xs-450--letter-spacing);line-height:1.45;color:var(--vui-text-secondary)}.token{display:inline-block;font-family:var(--vui-font-mono);font-size:11px;color:var(--vui-text-muted);background:var(--vui-bg-tint);border:var(--vui-hairline) solid var(--vui-border);padding:2px 7px;border-radius:var(--radius-md,6px)}.adsr{width:76px;height:30px;flex:none;display:block;opacity:.85}.adsr-box{position:absolute;left:16px;bottom:14px;padding:4px 6px;border:var(--vui-hairline) solid var(--vui-border-subtle);border-radius:var(--radius-lg,8px)}.waveform-bars{position:absolute;z-index:4;top:14px;left:50%;transform:translateX(-50%) scale(.8);transform-origin:center;display:block;color:var(--vui-text-secondary);opacity:0;filter:blur(5px);mix-blend-mode:multiply;transition:opacity var(--vui-motion-slow) var(--vui-ease-out),filter var(--vui-motion-moderate) var(--vui-ease-out);pointer-events:none}.waveform-bars.playing{opacity:.56;filter:blur(0)}.confirmation-stage.is-resolved .waveform-bars{color:var(--vui-on-fill);opacity:.7;filter:blur(0);mix-blend-mode:screen}.confirmation-stage.is-waveform-exiting .waveform-bars,.confirmation-stage.is-waveform-exiting .waveform-bars.playing{opacity:0;filter:blur(5px);transition:opacity .56s var(--vui-ease-out),filter .56s var(--vui-ease-out)}.card .complete-confirm,.card .error-btn,.card .replay,.card .toast-trigger{box-shadow:none}.copy-btn{position:relative;top:auto;right:auto;flex:none;width:30px;height:30px;border-radius:var(--vui-radius-md);background:transparent;color:var(--vui-text-muted);transform:translateX(0);transition:background var(--vui-motion-fast) var(--vui-ease-snappy),color var(--vui-motion-fast) var(--vui-ease-snappy),transform .12s var(--vui-ease-snappy)}.copy-btn:hover{background:var(--vui-bg-tint);color:var(--vui-text-secondary)}.copy-btn:active{transform:scale(.96)}.copy-btn svg{position:absolute;inset:0;margin:auto;will-change:opacity,transform,filter;transition:opacity var(--vui-motion-base) var(--vui-ease-out),transform var(--vui-motion-moderate) var(--vui-ease-out),filter var(--vui-motion-base) var(--vui-ease-out)}.copy-btn .ic-copy{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}.copy-btn .ic-check{opacity:0;transform:translateX(-3px) scale(.94);filter:blur(2px);color:var(--vui-success)}.copy-btn .ic-check path{stroke-dasharray:28;stroke-dashoffset:28}.copy-btn[data-copied] .ic-copy{opacity:0;transform:translateX(3px) scale(.94);filter:blur(2px);transition-duration:.16s;transition-timing-function:var(--vui-ease-in)}.copy-btn[data-copied] .ic-check{opacity:1;transform:translateX(0) scale(1);filter:blur(0);transition-delay:20ms}.copy-btn[data-copied] .ic-check path{animation:copy-check-draw .22s var(--vui-ease-out) 20ms forwards}@keyframes copy-check-draw{to{stroke-dashoffset:0}}.ripple{position:absolute;border:1.5px solid var(--vui-text-primary);border-radius:var(--vui-radius-full);pointer-events:none;opacity:0;transform:scale(.55)}.ripple.fire{animation:ripple-out .56s var(--vui-ease-out) forwards}@keyframes ripple-out{0%{opacity:.04;transform:scale(.55)}to{opacity:0;transform:scale(1.55)}}.toggle{position:relative;width:56px;height:32px;background:var(--vui-neutral-z6);border-radius:var(--vui-radius-full);transition:background var(--vui-motion-base) var(--vui-ease-snappy)}.toggle:active .knob{width:28px}.toggle.is-on{background:var(--vui-fill-primary)}.knob{position:absolute;top:3px;left:3px;width:26px;height:26px;background:var(--vui-on-fill);border-radius:var(--vui-radius-full);box-shadow:var(--vui-knob-shadow);transition:transform var(--vui-motion-base) var(--vui-ease-snappy),width var(--vui-motion-fast) var(--vui-ease-snappy)}.toggle.is-on .knob{transform:translateX(24px)}.toggle.is-on:active .knob{transform:translateX(22px)}.toast-stage-inner{position:absolute;inset:0}.toast-trigger{position:absolute;top:50%;left:50%;transform:translate(-50%,-78%);font-size:var(--text-xs-500);font-weight:var(--text-xs-500--font-weight);letter-spacing:var(--text-xs-500--letter-spacing);padding:8px 16px;background:var(--vui-bg-surface);border:var(--vui-hairline) solid var(--vui-border);border-radius:var(--vui-radius-md);box-shadow:var(--vui-shadow-sm);transition:background var(--vui-motion-fast) var(--vui-ease-snappy),transform .12s var(--vui-ease-snappy)}.toast-trigger:hover{background:var(--vui-bg-hover)}.toast-trigger:active{transform:translate(-50%,-78%) scale(.97)}.toast-viewport{position:absolute;bottom:16px;left:50%;width:230px;height:0;transform:translateX(-50%)}.toast{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:9px;padding:11px 13px;background:var(--vui-bg-surface);border:var(--vui-hairline) solid var(--vui-border);border-radius:var(--radius-lg,8px);box-shadow:none;font-size:var(--text-xs-500);font-weight:var(--text-xs-500--font-weight);letter-spacing:var(--text-xs-500--letter-spacing);transform:translateY(calc(100% + 18px));transition:transform var(--vui-motion-slow) var(--vui-ease-out),opacity .18s var(--vui-ease-out)}.toast .t-dot{width:6px;height:6px;border-radius:var(--vui-radius-full);background:var(--vui-success);flex:none}.toast .t-sub{font-size:var(--text-xxs-450);font-weight:var(--text-xxs-450--font-weight);letter-spacing:var(--text-xxs-450--letter-spacing);color:var(--vui-text-muted);margin-left:auto}.toast.leaving{opacity:0;transform:translateY(8px) scale(.97);transition:transform .2s var(--vui-ease-in),opacity .2s var(--vui-ease-in)}.confirmation-stage{padding:0 40px;overflow:hidden;isolation:isolate}.complete-confirm{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 13px;background:var(--vui-fill-primary);border:var(--vui-hairline) solid transparent;border-radius:var(--vui-radius-md);color:var(--vui-on-fill);font-size:var(--text-xs-500);font-weight:var(--text-xs-500--font-weight);letter-spacing:var(--text-xs-500--letter-spacing);transition:transform .12s var(--vui-ease-snappy),opacity var(--vui-motion-fast),filter var(--vui-motion-base) var(--vui-ease-out)}.complete-confirm:hover{opacity:.92}.complete-confirm:active{transform:scale(.97)}.complete-confirm.is-loading{color:var(--vui-on-fill)}.complete-confirm.is-resolved{opacity:0;filter:blur(6px);transform:scale(.94);pointer-events:none}.complete-spinner{width:14px;height:14px;border-radius:var(--vui-radius-full);border:2px solid color-mix(in srgb,var(--vui-on-fill) 28%,transparent);border-top-color:var(--vui-on-fill);animation:confirm-spin .72s linear infinite}@keyframes confirm-spin{to{transform:rotate(1turn)}}.confirmation-success{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:var(--vui-success);border-radius:inherit;opacity:0;-webkit-clip-path:circle(0 at 50% 50%);clip-path:circle(0 at 50% 50%);pointer-events:none;transition:opacity var(--vui-motion-fast) var(--vui-ease-out),-webkit-clip-path .56s var(--vui-ease-out);transition:opacity var(--vui-motion-fast) var(--vui-ease-out),clip-path .56s var(--vui-ease-out);transition:opacity var(--vui-motion-fast) var(--vui-ease-out),clip-path .56s var(--vui-ease-out),-webkit-clip-path .56s var(--vui-ease-out)}.confirmation-stage.is-resolved .confirmation-success{opacity:1;-webkit-clip-path:circle(72% at 50% 50%);clip-path:circle(72% at 50% 50%)}.confirmation-check{width:72px;height:72px;color:var(--vui-on-fill);overflow:visible}.confirmation-check path{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:72;stroke-dashoffset:72}.confirmation-stage.is-resolved .confirmation-check path{animation:confirmation-check-draw .52s var(--vui-ease-out) .15s forwards}@keyframes confirmation-check-draw{to{stroke-dashoffset:0}}@media (prefers-reduced-motion:reduce){.confirmation-success{-webkit-clip-path:none;clip-path:none;transition:opacity var(--vui-motion-base) var(--vui-ease-out)}.confirmation-stage.is-resolved .confirmation-check path{animation:none;stroke-dashoffset:0}}.error-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}.error-field{font-size:var(--text-xs-450);font-weight:var(--text-xs-450--font-weight);letter-spacing:var(--text-xs-450--letter-spacing);background:var(--vui-bg-surface);border:var(--vui-hairline) solid var(--vui-border-input);border-radius:var(--vui-radius-md);color:var(--vui-text-muted);transition:border-color var(--vui-motion-base) var(--vui-ease-out),box-shadow var(--vui-motion-base) var(--vui-ease-out)}.error-btn,.error-field{width:196px;padding:9px 13px}.error-btn{border:var(--vui-hairline) solid transparent;font-size:var(--text-xs-500);font-weight:var(--text-xs-500--font-weight);letter-spacing:var(--text-xs-500--letter-spacing);background:var(--vui-fill-primary);color:var(--vui-on-fill);border-radius:var(--vui-radius-md);box-shadow:var(--vui-shadow-sm);transition:transform .12s var(--vui-ease-snappy),opacity var(--vui-motion-fast)}.error-btn:hover{opacity:.92}.error-btn:active{transform:scale(.97)}.error-wrap.shaking .error-field{border-color:var(--vui-danger-soft);box-shadow:0 0 0 3px var(--vui-danger-ring);animation:shake var(--vui-motion-slow) var(--vui-ease-snappy)}.error-msg{font-size:var(--text-xxs-450);font-weight:var(--text-xxs-450--font-weight);letter-spacing:var(--text-xxs-450--letter-spacing);color:var(--vui-danger-soft);height:14px;opacity:0;transition:opacity var(--vui-motion-base) var(--vui-ease-out)}.error-wrap.shaking .error-msg{opacity:1}@keyframes shake{0%,to{transform:translateX(0)}18%{transform:translateX(-7px)}38%{transform:translateX(6px)}58%{transform:translateX(-4px)}78%{transform:translateX(2px)}}.framework{max-width:560px;margin:0 auto;padding:72px 0 56px;display:flex;flex-direction:column;gap:20px}.framework-copy{text-align:left;max-width:400px}.framework-demo{width:100%;max-width:560px;align-self:flex-start}.fw-eyebrow{font-family:var(--vui-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--vui-text-muted);margin-bottom:14px}.framework h2{font-size:var(--text-h2-500);font-weight:var(--text-h2-500--font-weight);letter-spacing:var(--text-h2-500--letter-spacing);line-height:var(--text-h2-500--line-height);margin-bottom:10px}.fw-lede{font-size:var(--text-sm-450);font-weight:var(--text-sm-450--font-weight);letter-spacing:var(--text-sm-450--letter-spacing);line-height:1.55;color:var(--vui-text-secondary);max-width:400px;margin:0}.keyboard{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-gap:12px;gap:12px;margin-bottom:20px;width:100%}.keycap{position:relative;width:100%;aspect-ratio:1/1;height:auto;min-height:34px;background:var(--vui-bg-surface);border:var(--vui-hairline) solid var(--vui-border);border-radius:var(--vui-radius-lg);box-shadow:0 6px 0 var(--vui-key-side),0 7px 1px rgba(0,0,0,.04);font-size:clamp(18px,3vw,24px);font-weight:525;color:var(--vui-text-primary);-moz-user-select:none;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:transform 70ms ease,box-shadow 70ms ease}.keycap.pressed{transform:translateY(5px);box-shadow:0 1px 0 var(--vui-key-side-pressed),0 2px 1px rgba(0,0,0,.03);transition-duration:35ms}.keycap .hint{position:absolute;bottom:5px;right:7px;font-size:9px;font-weight:400}.kbd-note,.keycap .hint{font-family:var(--vui-font-mono);color:var(--vui-text-muted)}.kbd-note{font-size:11px;margin-bottom:28px}.kbd-note kbd{font-family:var(--vui-font-mono);font-size:10px;border:var(--vui-hairline) solid var(--vui-border);background:var(--vui-bg-surface);border-radius:var(--radius-sm,4px);padding:1px 5px}.rule-card{position:relative;width:100%;min-height:124px;margin:0;text-align:left;background:var(--vui-bg-card);border:var(--vui-hairline) solid var(--vui-border-subtle);border-radius:var(--vui-radius-lg);overflow:hidden}.rule-layer{position:absolute;inset:0;padding:18px 22px;opacity:0;pointer-events:none;transform:translateX(var(--from-x,0));transition:opacity var(--vui-motion-base) var(--vui-ease-out),transform var(--vui-motion-base) var(--vui-ease-out)}.rule-layer.active{opacity:1;pointer-events:auto;transform:translateX(0);transition-delay:30ms}.rule-layer.no-transition{transition:none}.rule-layer .rule-letter{font-family:var(--vui-font-mono);font-size:11px;letter-spacing:.1em;color:var(--vui-text-muted);margin-bottom:4px}.rule-layer h3{font-size:var(--text-base-500);font-weight:var(--text-base-500--font-weight);letter-spacing:var(--text-base-500--letter-spacing);margin-bottom:4px}.rule-layer .rule-desc{font-size:var(--text-sm-450);font-weight:var(--text-sm-450--font-weight);letter-spacing:var(--text-sm-450--letter-spacing);line-height:1.55;color:var(--vui-text-secondary)}@media (max-width:1024px){body{padding-inline:32px}.header:after{left:calc(32px * -1);right:calc(32px * -1)}.framework{gap:24px}.framework-copy{padding-top:0}.fw-lede{margin:0}.framework-demo{align-self:flex-start}}.principles{position:relative;max-width:880px;margin:0 auto;padding:32px 0;display:flex;align-items:center;justify-content:center}.principles:before{content:"";position:absolute;top:0;left:24px;right:24px;border-top:var(--vui-hairline) solid var(--vui-border-subtle)}.colophon{font-size:var(--text-xs-450);font-weight:var(--text-xs-450--font-weight);letter-spacing:var(--text-xs-450--letter-spacing);line-height:var(--text-xs-450--line-height);color:var(--vui-text-muted)}.colophon a{color:inherit;text-decoration:none;transition:color var(--vui-motion-fast) var(--vui-ease-snappy)}.colophon a:hover{color:var(--vui-text-primary);text-decoration:underline;text-underline-offset:2px}body.record-body{padding-inline:0;overflow:auto;background:var(--vui-bg-page)}body.record-body [aria-label="Open Next.js Dev Tools"]{display:none!important}.record-page{min-height:100vh;display:grid;grid-template-rows:auto 1fr;grid-gap:24px;gap:24px;padding:24px;background:var(--vui-bg-page)}.record-controls{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.record-control-group{gap:4px;padding:2px;background:var(--vui-bg-bar);border-radius:var(--vui-radius-full)}.record-chip,.record-control-group{display:inline-flex;align-items:center}.record-chip{justify-content:center;min-height:32px;padding:0 14px;border:var(--vui-hairline) solid transparent;border-radius:var(--vui-radius-full);color:var(--vui-text-secondary);font-size:var(--text-xs-500);font-weight:var(--text-xs-500--font-weight);letter-spacing:var(--text-xs-500--letter-spacing);transition:background var(--vui-motion-fast) var(--vui-ease-snappy),border-color var(--vui-motion-fast) var(--vui-ease-snappy),color var(--vui-motion-fast) var(--vui-ease-snappy),transform .12s var(--vui-ease-snappy)}.record-chip:hover{color:var(--vui-text-primary);background:var(--vui-bg-hover)}.record-chip.is-active{color:var(--vui-text-primary);background:var(--vui-bg-surface);border-color:var(--vui-border);box-shadow:var(--vui-shadow-sm)}.record-chip:active{transform:scale(.975)}.record-stage-shell{display:grid;place-items:center;min-height:0}.record-stage{position:relative;width:1200px;height:900px;flex:none;display:grid;place-items:center;overflow:hidden;background:var(--vui-bg-page);border:var(--vui-hairline) solid var(--vui-border-subtle);border-radius:0;isolation:isolate}.record-scene{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}.record-scene .waveform-bars{top:84px;transform:translateX(-50%) scale(1.05)}.record-scene--sound-gate .sound-gate{height:56px;gap:14px;padding:0 28px;font-size:24px;letter-spacing:0}.record-scene--sound-gate .gate-dot{width:14px;height:14px;box-shadow:0 0 0 6px var(--vui-success-glow)}.record-toggle{width:184px;height:104px}.record-toggle .knob{top:9px;left:9px;width:86px;height:86px}.record-toggle.is-on .knob{transform:translateX(80px)}.record-toggle.is-on:active .knob{transform:translateX(76px)}.record-toast-trigger{padding:17px 28px;font-size:22px;letter-spacing:0;transform:translate(-50%,-82%)}.record-toast-trigger:active{transform:translate(-50%,-82%) scale(.97)}.record-toast-viewport{bottom:340px;width:360px}.record-toast-viewport .toast{padding:16px 18px;font-size:20px;gap:14px}.record-toast-viewport .toast .t-dot{width:9px;height:9px}.record-toast-viewport .toast .t-sub{font-size:13px}.record-complete-confirm{min-width:156px;min-height:58px;padding:0 26px;font-size:22px;letter-spacing:0}.record-complete-confirm .complete-spinner{width:20px;height:20px}.record-scene .confirmation-check{width:120px;height:120px}.record-error-wrap{gap:16px}.record-error-btn,.record-error-field{width:320px;padding:16px 18px;font-size:20px;letter-spacing:0}.record-error-wrap .error-msg{height:22px;font-size:14px}.record-stage-voice-switch{display:inline-flex;align-items:center;gap:12px;padding:8px;background:var(--vui-bg-bar);border-radius:var(--vui-radius-full);z-index:2}.record-voice-chip{min-width:174px;height:64px;padding:0 28px;border:var(--vui-hairline) solid transparent;border-radius:var(--vui-radius-full);color:var(--vui-text-secondary);font-size:24px;font-weight:525;letter-spacing:0;transition:background var(--vui-motion-base) var(--vui-ease-out),border-color var(--vui-motion-base) var(--vui-ease-out),color var(--vui-motion-base) var(--vui-ease-out),transform .12s var(--vui-ease-snappy)}.record-voice-chip.is-active,.record-voice-chip:hover{color:var(--vui-text-primary)}.record-voice-chip.is-active{background:var(--vui-bg-surface);border-color:var(--vui-border);box-shadow:var(--vui-shadow-sm)}.record-voice-chip:active{transform:scale(.975)}.record-voice-wipe{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--vui-bg-surface) 0%,transparent) 18%,color-mix(in srgb,var(--vui-bg-surface) 92%,transparent) 48%,color-mix(in srgb,var(--vui-bg-surface) 0%,transparent) 82%,transparent 100%);transform:translateX(-115%);animation:record-voice-wipe .76s var(--vui-ease-drawer) forwards}@keyframes record-voice-wipe{0%{transform:translateX(-115%);opacity:0}18%{opacity:1}to{transform:translateX(115%);opacity:0}}@media (max-width:680px){body{padding-inline:20px}body.record-body{padding-inline:0}.header{padding:10px 0;gap:12px}.header:after{left:calc(20px * -1);right:calc(20px * -1)}.header-controls{gap:6px;flex:none}.voice-switch{display:none}.voice-select-wrap{display:inline-flex}.sound-gate{padding:0 10px;gap:6px}.hero{padding-top:64px}.hero-copy{grid-template-columns:1fr;align-items:start;gap:calc(var(--spacing) * 5)}.hero p{max-width:420px;margin-left:0;text-align:left}.grid,.principle-list,.review-row,.voice-notes{grid-template-columns:1fr}.review-row{gap:10px}.review-actions{justify-content:flex-start}.confirm-grid{grid-template-columns:1fr;width:min(100%,220px)}.principle-item:nth-child(2n){padding-left:0;border-left:none}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;transition-duration:.01ms!important}}