:root,:host{--palette-white: #ffffff;--palette-black: #000000;--palette-neutral-50: #fafafa;--palette-neutral-100: #f4f4f5;--palette-neutral-200: #e4e4e7;--palette-neutral-300: #d4d4d8;--palette-neutral-400: #a1a1aa;--palette-neutral-500: #71717a;--palette-neutral-600: #52525b;--palette-neutral-700: #3f3f46;--palette-neutral-800: #27272a;--palette-neutral-900: #18181b;--palette-neutral-950: #09090b;--palette-brand-50: #eef0fe;--palette-brand-100: #e0e3fd;--palette-brand-200: #c6cbfb;--palette-brand-300: #a4acf8;--palette-brand-400: #7c86f5;--palette-brand-500: #5661f0;--palette-brand-600: #414de0;--palette-brand-700: #3640c0;--palette-brand-800: #2e369b;--palette-brand-900: #2a317b;--palette-brand-950: #1a1e4a;--palette-emerald-100: #d1fae5;--palette-emerald-300: #6ee7b7;--palette-emerald-400: #34d399;--palette-emerald-500: #10b981;--palette-emerald-600: #059669;--palette-emerald-700: #047857;--palette-amber-100: #fef3c7;--palette-amber-300: #fcd34d;--palette-amber-400: #fbbf24;--palette-amber-500: #f59e0b;--palette-amber-600: #d97706;--palette-amber-800: #92400e;--palette-rose-400: #fb7185;--palette-rose-500: #f43f5e;--palette-rose-600: #e11d48;--palette-rose-700: #be123c;--palette-sky-100: #e0f2fe;--palette-sky-300: #7dd3fc;--palette-sky-400: #38bdf8;--palette-sky-600: #0284c7;--palette-sky-900: #0c4a6e;--radius-chip: 6px;--radius-panel: 10px;--radius-pill: 9999px;--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-24: 24px;--space-32: 32px;--font-sans: "Segoe UI", system-ui, sans-serif;--font-jp: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", var(--font-sans);--type-headword-size: 16px;--type-headword-leading: 22px;--type-headword-weight: 650;--type-reading-size: 12px;--type-reading-leading: 16px;--type-reading-weight: 500;--type-gloss-size: 13px;--type-gloss-leading: 18px;--type-gloss-weight: 400;--type-source-size: 12px;--type-source-leading: 16px;--type-source-weight: 400;--type-tag-size: 11px;--type-tag-leading: 14px;--type-tag-weight: 600;--type-tag-tracking: .04em;--type-ui-size: 14px;--type-ui-leading: 20px;--type-ui-weight: 500;--gradient-tile: linear-gradient( to bottom right, color-mix(in srgb, var(--palette-black) 6%, transparent), color-mix(in srgb, var(--palette-black) 31%, transparent) );--focus-ring-width: 2px;--focus-ring-offset: 2px;--result-row-min-height: 64px;--result-row-pad-block: var(--space-8);--result-row-pad-inline: var(--space-12);--result-row-gap: var(--space-4);--badge-tint: 15%;--color-surface: var(--palette-white);--color-surface-raised: var(--palette-neutral-50);--color-surface-overlay: var(--palette-neutral-100);--color-content: var(--palette-neutral-950);--color-content-secondary: var(--palette-neutral-600);--color-content-tertiary: var(--palette-neutral-500);--color-content-inverse: var(--palette-white);--color-line: rgba(0, 0, 0, .08);--color-line-strong: rgba(0, 0, 0, .16);--color-brand: var(--palette-brand-600);--color-brand-muted: var(--palette-brand-500);--color-brand-strong: var(--palette-brand-700);--color-brand-faint: rgba(86, 97, 240, .16);--color-success: var(--palette-emerald-600);--color-success-strong: var(--palette-emerald-700);--color-warning: var(--palette-amber-600);--color-warning-strong: var(--palette-amber-800);--color-danger: var(--palette-rose-600);--color-danger-strong: var(--palette-rose-700);--color-badge-brand: var(--palette-brand-700);--color-badge-success: var(--palette-emerald-700);--color-badge-warning: var(--palette-amber-800);--color-badge-danger: var(--palette-rose-700);--color-sky: var(--palette-sky-600);--color-badge-sky: var(--palette-sky-900);--color-highlight: rgba(245, 158, 11, .22);--color-link: var(--palette-brand-600);--color-link-hover: var(--palette-brand-700)}:host,:host([data-theme="dark"]),[data-theme=dark]{--color-surface: var(--palette-neutral-950);--color-surface-raised: #1c1c1e;--color-surface-overlay: #2c2c2e;--color-content: var(--palette-white);--color-content-secondary: var(--palette-neutral-400);--color-content-tertiary: var(--palette-neutral-500);--color-content-inverse: var(--palette-neutral-950);--color-line: rgba(255, 255, 255, .08);--color-line-strong: rgba(255, 255, 255, .16);--color-brand: var(--palette-brand-500);--color-brand-muted: var(--palette-brand-400);--color-brand-strong: var(--palette-brand-600);--color-brand-faint: rgba(86, 97, 240, .16);--color-success: var(--palette-emerald-500);--color-success-strong: var(--palette-emerald-400);--color-warning: var(--palette-amber-500);--color-warning-strong: var(--palette-amber-400);--color-danger: var(--palette-rose-500);--color-danger-strong: var(--palette-rose-400);--color-badge-brand: var(--palette-brand-300);--color-badge-success: var(--palette-emerald-300);--color-badge-warning: var(--palette-amber-300);--color-badge-danger: var(--palette-rose-400);--color-sky: var(--palette-sky-400);--color-badge-sky: var(--palette-sky-300);--color-highlight: rgba(251, 191, 36, .28);--color-link: var(--palette-brand-400);--color-link-hover: var(--palette-brand-300)}*,*:before,*:after{box-sizing:border-box}html{color-scheme:dark;scroll-behavior:smooth}html[data-theme=light]{color-scheme:light}body{margin:0;min-height:100vh;background:var(--color-surface);color:var(--color-content);font-family:var(--font-sans);font-size:var(--type-ui-size);line-height:var(--type-ui-leading);font-weight:var(--type-ui-weight)}:focus{outline:none}:focus-visible{outline:var(--focus-ring-width) solid var(--color-brand);outline-offset:var(--focus-ring-offset)}.skip{position:absolute;left:var(--space-16);top:calc(-1 * var(--space-32));z-index:20;padding:var(--space-8) var(--space-12);background:var(--color-surface-raised);color:var(--color-content);border-radius:var(--radius-chip)}.skip:focus{top:var(--space-16)}.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);padding:var(--space-12) var(--space-24);border-bottom:1px solid var(--color-line);background:color-mix(in srgb,var(--color-surface) 88%,transparent);-webkit-backdrop-filter:blur(var(--space-12));backdrop-filter:blur(var(--space-12))}.brand{display:flex;align-items:center;gap:var(--space-12);color:inherit;text-decoration:none;font-weight:var(--type-headword-weight)}.nav nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-8)}.nav nav a:not(.btn){color:var(--color-content-secondary);text-decoration:none;padding:var(--space-8)}.nav nav a:not(.btn):hover{color:var(--color-content)}.mark{width:calc(var(--space-32) + var(--space-4));height:calc(var(--space-32) + var(--space-4));border-radius:var(--radius-panel);background:var(--color-brand);display:flex;flex-direction:column;justify-content:center;gap:var(--space-4);padding:0 var(--space-8)}.mark span{display:block;height:var(--space-4);border-radius:var(--radius-pill);background:var(--color-content-inverse)}.mark span:first-child{width:calc(var(--space-16) + var(--space-4))}.mark span:last-child{width:var(--space-12)}.btn,button.ghost{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-8) var(--space-16);border-radius:var(--radius-panel);border:1px solid transparent;font:inherit;font-weight:var(--type-headword-weight);text-decoration:none;cursor:pointer;color:var(--color-content-inverse);background:var(--color-brand)}.btn:hover{background:var(--color-brand-strong)}.btn.ghost,button.ghost{color:var(--color-content);background:var(--color-surface-overlay);border-color:var(--color-line)}main{width:min(68rem,calc(100% - var(--space-32)));margin:0 auto;padding:calc(var(--space-32) + var(--space-8)) 0 var(--space-32)}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-32);align-items:center;margin-bottom:calc(var(--space-32) * 2)}.eyebrow{margin:0 0 var(--space-12);font-size:var(--type-tag-size);line-height:var(--type-tag-leading);font-weight:var(--type-tag-weight);letter-spacing:var(--type-tag-tracking);text-transform:uppercase;color:var(--color-brand-muted)}.hero h1,section h2{margin:0 0 var(--space-16);letter-spacing:-.03em;font-weight:750}.hero h1{font-size:clamp(2.1rem,4.5vw,3.4rem);line-height:1.08}.lede{margin:0 0 var(--space-12);font-size:var(--type-headword-size);line-height:1.45;color:var(--color-content-secondary);max-width:36rem}.lede.muted,.muted{color:var(--color-content-tertiary)}.cta{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-24)}.stage{margin:0}.stage-screen{position:relative;aspect-ratio:16 / 10;border-radius:var(--radius-panel);border:1px solid var(--color-line);background:var(--gradient-tile),radial-gradient(circle at 30% 20%,var(--color-brand-faint),var(--color-surface-raised) 55%);overflow:hidden}.stage-show{margin:0;position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-jp);font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:.12em;color:color-mix(in srgb,var(--color-content) 55%,transparent);pointer-events:none}.overlay{position:absolute;left:50%;bottom:var(--space-24);transform:translate(-50%);width:min(92%,36rem);text-align:center;text-shadow:0 var(--space-2) var(--space-8) color-mix(in srgb,var(--palette-black) 70%,transparent)}.line.study{margin:0;font-family:var(--font-jp);font-size:clamp(1.15rem,2.2vw,1.65rem);font-weight:650;line-height:1.35;padding-top:.85em}.line.gloss{margin:var(--space-8) 0 0;font-size:var(--type-gloss-size);line-height:var(--type-gloss-leading);color:var(--color-sky)}.word{position:relative;display:inline-block;margin:0 .06em;padding:0 .04em}.word .roma{position:absolute;left:50%;bottom:100%;transform:translate(-50%);font-family:var(--font-sans);font-size:.34em;font-weight:650;line-height:1.05;color:var(--color-warning);white-space:nowrap}.word.studying{background:var(--color-brand-faint);border-radius:var(--space-2)}.stage figcaption{margin-top:var(--space-12);font-size:var(--type-source-size);line-height:var(--type-source-leading);color:var(--color-content-tertiary)}section{margin-bottom:calc(var(--space-32) * 2)}section h2{font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.2}.band{padding:var(--space-32) var(--space-24);border:1px solid var(--color-line);border-radius:var(--radius-panel);background:var(--color-surface-raised)}.steps,.install{margin:0;padding-left:var(--space-24)}.steps li,.install li{margin-bottom:var(--space-16)}.steps li:last-child,.install li:last-child{margin-bottom:0}.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-16)}.cards li{padding:var(--space-16);border:1px solid var(--color-line);border-radius:var(--radius-panel);background:var(--color-surface-raised)}.cards h3{margin:0 0 var(--space-8);font-size:var(--type-headword-size);line-height:var(--type-headword-leading)}.cards p{margin:0;color:var(--color-content-secondary);font-size:var(--type-gloss-size);line-height:var(--type-gloss-leading)}.keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-12)}.keys div{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);color:var(--color-content-secondary)}kbd{display:inline-flex;align-items:center;min-height:var(--type-ui-leading);padding:0 var(--space-8);border:1px solid var(--color-line-strong);border-radius:var(--radius-chip);background:var(--color-surface-overlay);color:var(--color-content);font:inherit;font-size:var(--type-tag-size);font-weight:var(--type-tag-weight)}.install-lead{color:var(--color-content-secondary);max-width:40rem}code{font-size:.92em;padding:0 .25em;border-radius:var(--space-2);background:var(--color-surface-overlay)}.link{color:var(--color-link);text-underline-offset:.15em}.link:hover{color:var(--color-link-hover)}footer{border-top:1px solid var(--color-line);padding:var(--space-24);text-align:center;color:var(--color-content-tertiary);font-size:var(--type-source-size);line-height:var(--type-source-leading)}footer p{margin:0 0 var(--space-8)}@media(max-width:52rem){.hero,.cards,.keys{grid-template-columns:1fr}.nav{flex-wrap:wrap}}