@layer reset,base,theme,components,utilities;@layer theme{:root{color-scheme:light dark;--bg-canvas: #faf7f2;--bg-surface: #ffffff;--bg-surface-alt: #f3ede3;--bg-tint: #fff1eb;--text-primary: #1a1614;--text-secondary: #544b45;--text-muted: #6f645d;--border-subtle: #e4dad0;--writing-pad-bg: #ffffff;--writing-pad-border: #d6cabd;--writing-ink: #1a1614;--accent-primary: #c93b2b;--accent-primary-hover: #ad2f21;--accent-secondary: #0f766e;--accent-gold: #b45309;--on-accent: #ffffff;--shadow-card: 0 8px 28px rgb(26 22 20 / .06)}@media(prefers-color-scheme:dark){:root{--bg-canvas: #12100f;--bg-surface: #1c1917;--bg-surface-alt: #161312;--bg-tint: #2b1a17;--text-primary: #f5f1ec;--text-secondary: #cbc1b8;--text-muted: #a1958b;--border-subtle: #332c28;--writing-pad-bg: #221e1c;--writing-pad-border: #665c54;--writing-ink: #fff9f2;--accent-primary: #ff6b57;--accent-primary-hover: #ff8473;--accent-secondary: #2dd4bf;--accent-gold: #f59e0b;--on-accent: #180b09;--shadow-card: 0 12px 32px rgb(0 0 0 / .38)}}@supports (color: light-dark(white,black)){:root{--bg-canvas: light-dark(#faf7f2, #12100f);--bg-surface: light-dark(#ffffff, #1c1917);--bg-surface-alt: light-dark(#f3ede3, #161312);--bg-tint: light-dark(#fff1eb, #2b1a17);--text-primary: light-dark(#1a1614, #f5f1ec);--text-secondary: light-dark(#544b45, #cbc1b8);--text-muted: light-dark(#6f645d, #a1958b);--border-subtle: light-dark(#e4dad0, #332c28);--writing-pad-bg: light-dark(#ffffff, #221e1c);--writing-pad-border: light-dark(#d6cabd, #665c54);--writing-ink: light-dark(#1a1614, #fff9f2);--accent-primary: light-dark(#c93b2b, #ff6b57);--accent-primary-hover: light-dark(#ad2f21, #ff8473);--accent-secondary: light-dark(#0f766e, #2dd4bf);--accent-gold: light-dark(#b45309, #f59e0b);--on-accent: light-dark(#ffffff, #180b09);--shadow-card: light-dark( 0 8px 28px rgb(26 22 20 / .06), 0 12px 32px rgb(0 0 0 / .38) )}}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}}@layer reset{:where(html,body){margin:0;padding:0}:where(h1,h2,h3,h4,p,figure,blockquote,dl,dd){margin:0}:where(ul,ol){margin:0;padding:0;list-style:none}:where(img,svg,picture,video){display:block;max-inline-size:100%}:where(button,input,textarea,select){font:inherit;color:inherit}}@layer base{html{box-sizing:border-box;scroll-behavior:smooth;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:var(--bg-canvas);color:var(--text-primary);line-height:1.55}:where(main,section,article,header,footer,nav,div,aside,form){box-sizing:border-box}body{min-block-size:100dvh;background-color:var(--bg-canvas);color:var(--text-primary)}a{color:var(--accent-primary);text-underline-offset:.18em}:focus-visible{outline:3px solid var(--accent-secondary);outline-offset:3px}h1,h2,h3{line-height:1.15;letter-spacing:-.02em;color:var(--text-primary)}h1{font-size:clamp(2.15rem,4.4vw,3.6rem);max-inline-size:16ch}h2{font-size:clamp(1.65rem,3vw,2.45rem)}h3{font-size:1.2rem}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.92em;background-color:var(--bg-surface-alt);padding:.1em .4em;border-radius:.35rem;border:1px solid var(--border-subtle)}}@layer components{.skip-link{position:absolute;inset-block-start:-100%;inset-inline-start:1rem;z-index:200;padding:.7rem 1rem;border-radius:.6rem;background-color:var(--accent-primary);color:var(--on-accent);font-weight:700;text-decoration:none}.skip-link:focus{inset-block-start:1rem}.container{inline-size:min(1120px,100% - 2rem);margin-inline:auto}.section{padding-block:clamp(3.25rem,6vw,5.5rem)}.section-alt{background-color:var(--bg-surface-alt);border-block:1px solid var(--border-subtle)}.eyebrow{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-primary);margin-block-end:.65rem}.lead{font-size:clamp(1.05rem,1.5vw,1.24rem);color:var(--text-secondary);max-inline-size:56ch;margin-block-start:1rem}.section-heading{max-inline-size:64ch;margin-block-end:2.25rem}.section-heading p+h2{margin-block-start:.25rem}.section-heading h2+p{margin-block-start:.8rem;color:var(--text-secondary)}.button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.62rem 1.05rem;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .14s ease,border-color .14s ease,transform .14s ease}.button:active{transform:translateY(1px)}.button:disabled{opacity:.48;cursor:not-allowed;transform:none}.button-lg{padding:.82rem 1.4rem;font-size:1rem}.button-primary{background-color:var(--accent-primary);color:var(--on-accent)}.button-primary:hover{background-color:var(--accent-primary-hover)}.button-secondary{background-color:var(--bg-surface);color:var(--text-primary);border-color:var(--border-subtle)}.button-secondary:hover{border-color:var(--accent-primary)}.button-ghost{background-color:transparent;color:var(--text-secondary);border-color:var(--border-subtle)}.button-ghost:hover{color:var(--text-primary);border-color:var(--text-secondary)}.site-header{position:sticky;inset-block-start:0;z-index:40;background-color:color-mix(in srgb,var(--bg-canvas) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-block-end:1px solid var(--border-subtle)}.site-header-inner{inline-size:min(1120px,100% - 2rem);margin-inline:auto;min-block-size:4.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--text-primary);flex-shrink:0}.brand-mark{display:grid;place-items:center;inline-size:2.35rem;block-size:2.35rem;border-radius:.75rem;background-color:var(--accent-primary);color:var(--on-accent);font-weight:800;font-size:1.2rem}.brand-text{display:flex;flex-direction:column;line-height:1.1}.brand-name{font-weight:800;font-size:1.05rem}.brand-domain{font-size:.76rem;color:var(--text-muted)}.site-nav{display:flex;align-items:center;gap:1rem}.site-nav-links,.site-nav-actions{display:none;align-items:center;gap:1.25rem}.site-nav-links a{color:var(--text-secondary);text-decoration:none;font-weight:600;white-space:nowrap}.site-nav-links a:hover{color:var(--text-primary)}.menu-toggle{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .9rem;border-radius:999px;border:1px solid var(--border-subtle);background-color:var(--bg-surface);color:var(--text-primary);font-weight:600;cursor:pointer;anchor-name:--menu-button}.site-header.is-wide .site-nav-links,.site-header.is-wide .site-nav-actions{display:flex}.site-header.is-wide .menu-toggle{display:none}.site-menu{position:fixed;margin:0;padding:.9rem;inline-size:min(18rem,100vw - 2rem);inset-block-start:4.75rem;inset-block-start:anchor(--menu-button bottom);inset-inline-end:1rem;inset-inline-start:auto;border-radius:1rem;border:1px solid var(--border-subtle);background-color:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-card)}.site-menu:is(:popover-open,.\:popover-open){display:flex;flex-direction:column;align-items:stretch;gap:.5rem}.site-menu a{padding:.55rem .75rem;border-radius:.65rem;text-decoration:none;color:var(--text-primary);font-weight:600}.site-menu a.button-primary{color:var(--on-accent)}.site-menu a:not(.button-primary):hover{background-color:var(--bg-surface-alt)}.hero-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}@media(min-width:880px){.hero-grid{grid-template-columns:1.12fr .88fr;gap:3rem}}.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-block-start:1.65rem}.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.2rem,1fr));gap:1rem;margin-block-start:2rem;padding-block-start:1.4rem;border-block-start:1px solid var(--border-subtle)}.hero-stats dt{font-size:.82rem;color:var(--text-muted);font-weight:600}.hero-stats dd{font-size:1.65rem;font-weight:800;color:var(--text-primary)}.device-frame{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:1.5rem;padding:1.4rem;box-shadow:var(--shadow-card)}.device-status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-block-end:1.25rem}.pill{display:inline-flex;align-items:center;padding:.25rem .7rem;border-radius:999px;font-size:.8rem;font-weight:700;background-color:var(--bg-surface-alt);color:var(--text-secondary);border:1px solid var(--border-subtle)}.pill-accent{background-color:var(--bg-tint);color:var(--accent-primary);border-color:color-mix(in srgb,var(--accent-primary) 30%,transparent)}.phrase-stage{background-color:var(--bg-surface-alt);border:1px solid var(--border-subtle);border-radius:1.15rem;padding:1.35rem}.phrase-kicker{font-size:.8rem;color:var(--text-muted);font-weight:600}.phrase-hanzi{margin-block-start:.6rem;font-size:clamp(1.75rem,3vw,2.35rem);font-weight:800;line-height:1.25}.phrase-jyutping{margin-block-start:.35rem;font-size:1.08rem;font-weight:700;color:var(--accent-secondary)}.phrase-english{margin-block-start:.25rem;color:var(--text-secondary)}.tone-pills{display:flex;flex-wrap:wrap;gap:.45rem;margin-block-start:1rem}.tone-chip{font-size:.78rem;font-weight:700;padding:.22rem .58rem;border-radius:.5rem;background-color:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-secondary);transition:background-color .14s ease,color .14s ease,border-color .14s ease}.tone-chip.is-active{background-color:var(--accent-primary);border-color:var(--accent-primary);color:var(--on-accent)}.tone-lab-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-block-end:1.25rem}.stage-controls{display:flex;flex-wrap:wrap;gap:.65rem;margin-block-start:1.2rem}.audio-status,.tone-feedback,.form-note{min-block-size:1.35rem;margin-block-start:.75rem;font-size:.88rem;color:var(--accent-secondary);font-weight:600}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1.25rem}.tone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1rem}.unit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:1rem}.card{container-type:inline-size;display:flex;flex-direction:column;gap:.85rem;padding:1.25rem;border-radius:1.15rem;background-color:var(--bg-surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card)}.card-badge,.unit-index{display:inline-flex;align-self:flex-start;padding:.24rem .65rem;border-radius:999px;font-size:.78rem;font-weight:800;background-color:var(--bg-tint);color:var(--accent-primary)}.card-body{display:flex;flex-direction:column;gap:.55rem}.card-body p{color:var(--text-secondary)}.card-example{font-size:.9rem;color:var(--text-primary);padding-block-start:.45rem;border-block-start:1px dashed var(--border-subtle)}@container (min-width: 340px){.card{padding:1.45rem}}.tone-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.82rem;font-weight:700}.tone-number{color:var(--accent-primary)}.tone-chao{color:var(--text-muted)}.tone-word{display:flex;align-items:baseline;gap:.65rem;flex-wrap:wrap}.tone-hanzi{font-size:2rem;font-weight:800}.tone-jyut{font-weight:800;color:var(--accent-secondary)}.tone-gloss{color:var(--text-secondary);font-size:.92rem}.contour-svg{inline-size:100%;block-size:40px;color:var(--accent-primary);background-color:var(--bg-surface-alt);border-radius:.7rem;padding:.3rem}.tone-card.is-playing{border-color:var(--accent-primary)}.cta-banner{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center;padding:clamp(1.5rem,3.5vw,2.5rem);border-radius:1.5rem;background-color:var(--bg-tint);border:1px solid color-mix(in srgb,var(--accent-primary) 26%,var(--border-subtle))}@media(min-width:820px){.cta-banner{grid-template-columns:1.15fr .85fr}}.cta-copy p+h2{margin-block-start:.2rem}.cta-copy h2+p{margin-block-start:.65rem;color:var(--text-secondary)}.waitlist-form{display:flex;flex-direction:column;gap:.75rem}.waitlist-field{display:flex;flex-direction:column;gap:.3rem}.waitlist-label{font-weight:700;font-size:.95rem;color:var(--text-primary)}.waitlist-help{font-size:.85rem;color:var(--text-secondary)}.waitlist-form input[type=email]{inline-size:100%;min-block-size:48px;padding:.78rem 1rem;font-size:max(1rem,1em);border-radius:.85rem;border:1.5px solid var(--border-subtle);background-color:var(--bg-surface);color:var(--text-primary)}.waitlist-form input[type=email][aria-invalid=true]{border-color:var(--accent-primary)}.waitlist-field-error{font-size:.86rem;font-weight:700;color:var(--accent-primary)}.waitlist-turnstile{min-block-size:65px;display:flex;flex-direction:column;gap:.35rem}.waitlist-turnstile-hint{padding:.65rem .85rem;border-radius:.75rem;border:1px dashed var(--border-subtle);background-color:var(--bg-surface);color:var(--text-secondary);font-size:.84rem}.form-note.is-error{color:var(--accent-primary)}.faq-wrap{max-inline-size:52rem}.faq-list{display:flex;flex-direction:column;gap:.85rem}.faq-list details{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:1rem;padding:1rem 1.2rem}.faq-list summary{font-weight:700;cursor:pointer;list-style-position:outside}.faq-list details p{margin-block-start:.65rem;color:var(--text-secondary)}.site-footer{padding-block:2rem;border-block-start:1px solid var(--border-subtle)}.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}.footer-meta{font-size:.9rem;color:var(--text-muted);margin-block-start:.25rem}.footer-nav{display:flex;flex-wrap:wrap;gap:1rem}.footer-nav a{color:var(--text-secondary);text-decoration:none;font-weight:600}@keyframes canto-reveal{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.preview-studio{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:1.5rem;padding:clamp(1.1rem,2.5vw,1.75rem);box-shadow:var(--shadow-card)}.preview-tablist{display:flex;overflow-x:auto;gap:.35rem;border-block-end:1px solid var(--border-subtle);margin-block-end:1.25rem;scrollbar-width:none}.preview-tablist::-webkit-scrollbar{display:none}.preview-tablist [role=tab]{position:relative;flex:none;min-block-size:44px;padding:.65rem 1.05rem;border:0;background:transparent;color:var(--text-secondary);font-weight:700;cursor:pointer;white-space:nowrap}.preview-tablist [role=tab]:hover{color:var(--text-primary)}.preview-tablist [role=tab][aria-selected=true]{color:var(--accent-primary)}.preview-tablist [role=tab][aria-selected=true]:after{content:"";position:absolute;inset:auto 0 0;border-block-end:3px solid var(--accent-primary)}.preview-panels{display:grid;grid-template-columns:1fr}.preview-panel-card{background-color:var(--bg-surface-alt);border:1px solid var(--border-subtle);border-radius:1.15rem;padding:clamp(1.1rem,2.5vw,1.5rem)}.preview-panel-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-block-end:1rem}.preview-flashcard-body{padding-block:.5rem .25rem}.preview-hanzi{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;line-height:1.2}.preview-english{margin-block-start:.45rem;font-size:1.12rem;font-weight:700;color:var(--text-primary)}.preview-tip{margin-block-start:.35rem;color:var(--text-secondary);max-inline-size:62ch}.quiz-prompt{font-size:1.08rem;font-weight:700;color:var(--text-primary)}.quiz-clue{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-block-start:.75rem;padding:.7rem .95rem;border-radius:.85rem;background-color:var(--bg-surface);border:1px solid var(--border-subtle)}.quiz-clue-hanzi{font-size:1.4rem;font-weight:800}.quiz-clue-jyut{font-weight:700;color:var(--accent-secondary)}.quiz-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:.65rem;margin-block-start:1rem}.quiz-option{min-block-size:46px;padding:.7rem 1rem;border-radius:.85rem;border:1px solid var(--border-subtle);background-color:var(--bg-surface);color:var(--text-primary);font-weight:600;text-align:start;cursor:pointer;transition:border-color .14s ease,background-color .14s ease}.quiz-option:hover{border-color:var(--accent-primary)}.quiz-option.is-correct{border-color:var(--accent-secondary);background-color:color-mix(in srgb,var(--accent-secondary) 14%,var(--bg-surface))}.quiz-option.is-wrong{border-color:var(--accent-primary);background-color:var(--bg-tint)}.quiz-feedback{margin-block-start:.9rem;padding:.7rem .95rem;border-radius:.75rem;background-color:var(--bg-surface);border-inline-start:4px solid var(--accent-secondary);color:var(--text-secondary);font-weight:600}.builder-answer{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-block-size:3.4rem;margin-block-start:.9rem;padding:.65rem .85rem;border-radius:.95rem;background-color:var(--bg-surface);border:1px dashed var(--border-subtle)}.builder-placeholder{color:var(--text-muted);font-size:.94rem}.builder-bank{display:flex;flex-wrap:wrap;gap:.55rem;margin-block-start:.85rem}.builder-tile{min-block-size:42px;padding:.45rem .9rem;border-radius:.75rem;border:1px solid var(--border-subtle);background-color:var(--bg-surface);color:var(--text-primary);font-weight:700;cursor:pointer}.builder-tile:hover{border-color:var(--accent-primary)}.builder-tile.is-picked{background-color:var(--bg-tint);border-color:var(--accent-primary);color:var(--accent-primary)}.builder-tile.is-used{opacity:.42}.writing-char-strip{display:flex;overflow-x:auto;gap:.5rem;padding-block-end:.35rem;margin-block-end:1rem;scrollbar-width:thin}.writing-char-chip{flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-inline-size:54px;min-block-size:54px;padding:.35rem .65rem;border-radius:.85rem;border:1.5px solid var(--writing-pad-border);background-color:var(--writing-pad-bg);color:var(--text-primary);cursor:pointer;transition:border-color .14s ease,background-color .14s ease}.writing-char-chip:hover{border-color:var(--accent-primary)}.writing-char-chip.is-active{border-color:var(--accent-primary);background-color:var(--bg-tint)}.writing-char-chip.is-done{border-color:var(--accent-secondary)}.writing-chip-hanzi{font-size:1.25rem;font-weight:800;line-height:1.15}.writing-chip-jyut{font-size:.72rem;font-weight:700;color:var(--text-secondary)}.writing-char-chip.is-active .writing-chip-jyut{color:var(--text-primary)}.writing-workspace{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:start}@media(min-width:700px){.writing-workspace{grid-template-columns:minmax(230px,280px) minmax(0,1fr)}}.writing-pad-shell{display:flex;flex-direction:column;align-items:center;gap:.5rem}.writing-canvas{display:block;inline-size:100%;max-inline-size:280px;aspect-ratio:1 / 1;border-radius:1rem;border:2px solid var(--writing-pad-border);background-color:var(--writing-pad-bg);color:var(--writing-ink);cursor:crosshair;touch-action:none}.writing-stroke-status{font-size:.86rem;font-weight:700;color:var(--text-secondary)}.writing-details{display:flex;flex-direction:column;gap:.65rem}.writing-char-header{display:flex;align-items:center;gap:.9rem}.writing-char-large{display:inline-flex;align-items:center;justify-content:center;inline-size:3.8rem;block-size:3.8rem;border-radius:1rem;background-color:var(--writing-pad-bg);border:1.5px solid var(--writing-pad-border);font-size:2.2rem;font-weight:800;color:var(--accent-primary)}.writing-sample-word{font-size:.9rem;color:var(--text-secondary);margin-block-start:.15rem}.unit-card-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.unit-badges{display:inline-flex;align-items:center;gap:.45rem;flex-wrap:wrap}.unit-cefr{display:inline-flex;align-items:center;padding:.16rem .55rem;border-radius:999px;font-size:.74rem;font-weight:800;letter-spacing:.02em;color:var(--accent-primary);background-color:color-mix(in srgb,var(--accent-primary) 13%,transparent);border:1px solid color-mix(in srgb,var(--accent-primary) 28%,transparent)}.unit-cefr-cando{margin:0 0 .45rem;font-size:.84rem;line-height:1.45;color:var(--text-secondary)}.unit-cantonese{font-weight:700;font-size:.9rem;color:var(--accent-secondary)}.unit-details{margin-block-start:auto;padding-block-start:.6rem;border-block-start:1px dashed var(--border-subtle)}.unit-details summary{list-style:none;display:flex;align-items:center;gap:.45rem;font-size:.88rem;font-weight:700;color:var(--accent-primary);cursor:pointer;min-block-size:32px}.unit-details summary:before{content:"▸";display:inline-block;transition:rotate .2s ease}.unit-details[open]>summary:before{rotate:90deg}.unit-details-body{padding-block-start:.55rem;display:flex;flex-direction:column;gap:.5rem}.unit-lesson-list{display:flex;flex-direction:column;gap:.25rem;font-size:.88rem;color:var(--text-primary);font-weight:600}.unit-grammar-tip{font-size:.84rem;color:var(--text-secondary);background-color:var(--bg-surface-alt);padding:.5rem .7rem;border-radius:.6rem}details::details-content{interpolate-size:allow-keywords;overflow:clip;contain:layout}details:not([open])::details-content{block-size:0}@media(prefers-reduced-motion:no-preference){details::details-content{transition:block-size,content-visibility,display;transition-duration:.26s;transition-timing-function:ease-in-out;transition-behavior:allow-discrete}@supports ((animation-timeline: view()) and (animation-range: entry)){.reveal{animation:canto-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 28%}}@supports not ((animation-timeline: view()) and (animation-range: entry)){.reveal.js-ready{opacity:0;transform:translateY(14px);transition:opacity .42s ease,transform .42s ease}.reveal.js-ready.is-visible{opacity:1;transform:translateY(0)}}}}@layer utilities{.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}}