:root{--blue:#1f5fbf;--blue-hi:#2b74e0;--blue-deep:#143f86;--blue-ink:#0d2b5e;--sky:#e8f1ff;--sky-2:#d6e6ff;--sun:#ffc83d;--sun-soft:#fff3cc;--coral:#ff7a59;--coral-soft:#ffe4dc;--mint:#2fb38a;--mint-soft:#dcf5ec;--grape:#8a63d2;--grape-soft:#ece4fb;--bg:#fbfaf6;--card:#fff;--ink:#16213a;--ink-soft:#46516b;--ink-faint:#7a849a;--line:#e4e8f0;--danger:#c2341b;--r-md:14px;--r-lg:20px;--r-xl:28px;--shadow-sm:0 2px 8px #0d2b5e12;--shadow-md:0 10px 28px #0d2b5e1a;--shadow-lg:0 22px 50px #0d2b5e24;--glow:0 0 0 4px #ffc83de6;--ease:cubic-bezier(.2, .8, .2, 1);--font-head:"Fredoka", "Nunito", system-ui, sans-serif;--font-body:"Nunito", system-ui, sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{margin:0}body{font-family:var(--font-body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:1.06rem;line-height:1.55;overflow-x:hidden}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--font-head);letter-spacing:-.01em;font-weight:600;line-height:1.15}button{cursor:pointer;font-family:inherit}:focus-visible{box-shadow:var(--glow);border-radius:12px;outline:none}ul,ol{margin:0;padding:0;list-style:none}.wrap{max-width:1180px;margin:0 auto;padding:0 28px}.eyebrow{font-family:var(--font-head);letter-spacing:.06em;text-transform:uppercase;color:var(--blue);font-size:.9rem;font-weight:600;display:inline-block}.btn{min-height:48px;transition:transform .14s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);border:0;border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:14px 26px;font-size:1.05rem;font-weight:800;text-decoration:none;display:inline-flex}.btn:active:not(:disabled){transform:translateY(2px)}.btn-start{background:var(--sun);color:var(--blue-ink);font-family:var(--font-head);font-weight:600;box-shadow:0 4px #d9a300}.btn-start:hover:not(:disabled){filter:brightness(1.05)}.btn-start.big{min-height:64px;box-shadow:0 6px 0 #d9a300, var(--shadow-md);padding:18px 40px;font-size:1.5rem}.btn-start:disabled{opacity:.7;cursor:wait}.btn-primary{background:var(--blue);color:#fff;box-shadow:0 4px 0 var(--blue-deep);min-height:56px;padding:14px 30px;font-size:1.15rem}.btn-primary:hover:not(:disabled){background:var(--blue-hi)}.btn-primary:disabled{background:var(--line);color:var(--ink-faint);box-shadow:none;cursor:not-allowed}.btn-quiet{background:var(--sky);color:var(--blue-deep);font-size:.98rem}.btn-quiet:hover:not(:disabled){background:var(--sky-2)}.btn-quiet:disabled{opacity:.5;cursor:not-allowed}.nav{z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);background:#ffffffeb;position:sticky;top:0}.nav-in{align-items:center;gap:16px;max-width:1180px;margin:0 auto;padding:10px 28px;display:flex}.nav-home{color:var(--blue-ink);align-items:center;gap:10px;min-width:0;min-height:44px;text-decoration:none;display:flex}.nav-home img{object-fit:contain;flex:none;width:44px;height:44px}.nav-name{font-family:var(--font-head);font-size:1.08rem;font-weight:600;line-height:1.15}.nav-right{align-items:center;gap:14px;margin-left:auto;display:flex}.nav-start .btn{min-height:44px;padding:10px 22px}.lang{background:var(--sky);border-radius:999px;gap:2px;padding:4px;display:inline-flex}.lang button{color:var(--blue-deep);background:0 0;border:0;border-radius:999px;min-height:44px;padding:8px 14px;font-size:.92rem;font-weight:800}.lang button[aria-pressed=true]{background:var(--blue);color:#fff;box-shadow:var(--shadow-sm)}.hero{background:linear-gradient(180deg, var(--sky) 0%, var(--bg) 100%);padding:56px 0 64px;overflow:hidden}.hero-grid{grid-template-columns:1.15fr .85fr;align-items:center;gap:48px;display:grid}.hero h1{color:var(--blue-ink);margin:10px 0 18px;font-size:clamp(2.5rem,5.4vw,4.2rem);font-weight:700}.hero h1 em{color:var(--blue);background:linear-gradient(transparent 62%, var(--sun) 62%, var(--sun) 92%, transparent 92%);padding:0 4px;font-style:normal}.lead{color:var(--ink-soft);max-width:34em;font-size:1.25rem}.hero-cta{margin-top:28px}.meta{flex-wrap:wrap;gap:10px;margin-top:26px;display:flex}.meta li{color:var(--blue-deep);box-shadow:var(--shadow-sm);background:#fff;border-radius:999px;align-items:center;gap:6px;padding:7px 14px;font-size:.95rem;font-weight:700;display:inline-flex}.meta li svg{color:var(--mint)}.hero-art{aspect-ratio:1;justify-self:center;width:100%;max-width:420px;position:relative}.hero-disc{box-shadow:var(--shadow-lg);border:10px solid var(--sun);background:#fff;border-radius:50%;place-items:center;display:grid;position:absolute;inset:10%}.hero-disc img{width:78%;height:auto}.bubble{color:var(--blue-ink);font-family:var(--font-head);box-shadow:var(--shadow-md);white-space:nowrap;background:#fff;border-radius:18px;padding:10px 16px;font-size:1.05rem;font-weight:600;animation:5s ease-in-out infinite float;position:absolute}.bubble:after{content:"";border:8px solid #0000;border-top-color:#fff;border-bottom:0;position:absolute;bottom:-8px;left:22px}.b1{background:var(--coral);color:#fff;top:2%;left:-6%}.b1:after{border-top-color:var(--coral)}.b2{background:var(--mint);color:#fff;animation-delay:-1.6s;top:44%;right:-10%}.b2:after{border-top-color:var(--mint)}.b3{background:var(--grape);color:#fff;animation-delay:-3.2s;bottom:4%;left:-2%}.b3:after{border-top-color:var(--grape)}.mic-badge{background:var(--blue);color:#fff;width:74px;height:74px;box-shadow:var(--shadow-md);border:5px solid #fff;border-radius:50%;place-items:center;display:grid;position:absolute;bottom:8%;right:6%}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@media (prefers-reduced-motion:reduce){.bubble{animation:none}html{scroll-behavior:auto}}.band{padding:64px 0}.band.tint{background:#fff}.band-h{color:var(--blue-ink);max-width:24ch;margin-top:8px;font-size:clamp(1.8rem,3.4vw,2.5rem)}.band-sub{color:var(--ink-soft);max-width:40em;margin-top:12px;font-size:1.15rem}.steps{counter-reset:s;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;display:grid}.step{border-radius:var(--r-xl);box-shadow:var(--shadow-sm);border-top:8px solid var(--blue);background:#fff;padding:28px 26px;position:relative}.step.s2{border-top-color:var(--sun)}.step.s3{border-top-color:var(--coral)}.step svg{color:var(--blue)}.step.s2 svg{color:#d9a300}.step.s3 svg{color:var(--coral)}.step h3{color:var(--blue-ink);margin:12px 0 6px;font-size:1.6rem}.step p{color:var(--ink-soft)}.step-n{font-family:var(--font-head);color:var(--sky-2);font-size:2.6rem;font-weight:700;line-height:1;position:absolute;top:18px;right:22px}.why{grid-template-columns:.9fr 1.1fr;align-items:start;gap:40px;display:grid}.pills{flex-wrap:wrap;gap:10px;margin-top:22px;display:flex}.pills li{background:var(--mint-soft);color:#11684d;border-radius:999px;align-items:center;gap:8px;padding:9px 16px;font-weight:800;display:inline-flex}.pills.light li{color:#fff;background:#ffffff29}.topics{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;display:grid}.topic{border-radius:var(--r-lg);box-shadow:var(--shadow-sm);background:#fff;align-items:center;gap:14px;padding:18px 20px;display:flex}.topic-icon{background:var(--sky);width:52px;height:52px;color:var(--blue);border-radius:16px;flex:none;place-items:center;display:grid}.t2 .topic-icon{background:var(--coral-soft);color:var(--coral)}.t3 .topic-icon{background:var(--mint-soft);color:var(--mint)}.t4 .topic-icon{background:var(--grape-soft);color:var(--grape)}.t5 .topic-icon{background:var(--sun-soft);color:#c48f00}.t6 .topic-icon{background:var(--sky);color:var(--blue-hi)}.topic-n{font-family:var(--font-head);color:var(--ink-faint);font-size:1.1rem;font-weight:700}.topic-name{font-family:var(--font-head);color:var(--blue-ink);font-size:1.18rem;font-weight:600;line-height:1.2}.tips{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;display:grid}.tip{background:var(--bg);border-radius:var(--r-lg);gap:14px;padding:20px;display:flex}.tip svg{color:var(--blue);flex:none;margin-top:2px}.tip h3{color:var(--blue-ink);margin-bottom:4px;font-size:1.2rem}.tip p{color:var(--ink-soft);font-size:1rem}.example{background:var(--sky);border-radius:var(--r-xl);margin-top:44px;padding:32px}.example-h{color:var(--blue-ink);margin-top:6px;font-size:1.7rem}.example-q{color:var(--blue-deep);margin-top:10px;font-size:1.12rem;font-weight:800}.example-grid{grid-template-columns:.7fr 1.3fr;gap:18px;margin-top:18px;display:grid}.ex{border-radius:var(--r-lg);box-shadow:var(--shadow-sm);background:#fff;padding:22px}.ex-tag{border-radius:999px;align-items:center;gap:6px;padding:5px 12px;font-size:.92rem;font-weight:800;display:inline-flex}.ex-short .ex-tag{background:var(--coral-soft);color:#b1401f}.ex-great .ex-tag{background:var(--mint-soft);color:#11684d}.ex-quote{color:var(--ink);margin-top:12px;font-size:1.12rem}.ex-short .ex-quote{font-family:var(--font-head);color:var(--ink-faint);font-size:2rem}.ex-note{color:var(--ink-soft);margin-top:12px;font-size:.98rem;font-style:italic}.private-wrap{padding-top:64px}.private{background:linear-gradient(135deg, var(--blue), var(--blue-deep));color:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);align-items:flex-start;gap:22px;padding:36px;display:flex}.private>svg{color:var(--sun);flex:none}.private h2{font-size:1.9rem}.private p{opacity:.94;max-width:44em;margin-top:8px;font-size:1.12rem}.final{text-align:center}.final .band-h,.final .band-sub{margin-left:auto;margin-right:auto}.footer{text-align:center;color:var(--ink-faint);border-top:1px solid var(--line);max-width:none;padding:28px;font-size:.92rem}.error{color:var(--danger);margin-top:14px;font-weight:700}.dots{gap:6px;display:flex}.dots li{background:var(--sky);width:30px;height:30px;color:var(--blue-deep);border-radius:50%;place-items:center;font-size:.85rem;font-weight:800;display:grid}.dots li.past{background:var(--mint);color:#fff}.dots li.now{background:var(--blue);color:#fff;box-shadow:0 0 0 3px var(--sun)}.stage{padding-top:20px;padding-bottom:28px}.split{animation:rise .36s var(--ease);grid-template-columns:1.25fr 1fr;align-items:start;gap:22px;display:grid}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.q-panel{flex-direction:column;gap:12px;min-width:0;display:flex}.q-count{font-family:var(--font-head);color:var(--blue);font-size:1.02rem;font-weight:600}.video-box{border-radius:var(--r-lg);aspect-ratio:16/9;box-shadow:var(--shadow-md);background:#0d1a33;position:relative;overflow:hidden}.video-box video{object-fit:contain;background:#0d1a33;width:100%;height:100%;display:block}.video-play{color:#fff;font-family:var(--font-head);background:#0d1a3359;border:0;flex-direction:column;justify-content:center;align-items:center;gap:10px;font-size:1.25rem;font-weight:600;display:flex;position:absolute;inset:0}.video-play-disc{background:var(--sun);width:86px;height:86px;color:var(--blue-ink);box-shadow:var(--shadow-lg);border-radius:50%;place-items:center;padding-left:6px;display:grid}.video-replay{color:var(--blue-deep);min-height:44px;box-shadow:var(--shadow-sm);background:#fffffff2;border:0;border-radius:999px;align-items:center;gap:6px;padding:9px 16px;font-weight:800;display:inline-flex;position:absolute;top:12px;right:12px}.q-card{border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border-left:8px solid var(--sun);background:#fff;padding:18px 22px}.q-card-label{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;font-weight:800}.q-card h1{color:var(--blue-ink);margin-top:4px;font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:600}.a-panel{border-radius:var(--r-xl);box-shadow:var(--shadow-md);background:#fff;flex-direction:column;gap:14px;min-width:0;padding:20px;display:flex}.tabs{background:var(--sky);border-radius:999px;grid-template-columns:1fr 1fr;gap:6px;padding:5px;display:grid}.tab{min-height:46px;color:var(--blue-deep);background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;gap:8px;font-size:1.02rem;font-weight:800;display:inline-flex}.tab[aria-selected=true]{box-shadow:var(--shadow-sm);color:var(--blue);background:#fff}.tab:disabled{cursor:not-allowed;opacity:.6}.tab-badge{background:var(--sun);color:var(--blue-ink);text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 8px;font-size:.7rem}.rec-stage{text-align:center;flex-direction:column;align-items:center;gap:8px;padding:10px 0 4px;display:flex}.mic-wrap{place-items:center;display:grid;position:relative}.mic{z-index:1;background:var(--coral);color:#fff;width:112px;height:112px;box-shadow:0 6px 0 #d6553a, var(--shadow-md);transition:transform .14s var(--ease);border:0;border-radius:50%;place-items:center;display:grid;position:relative}.mic:hover{transform:scale(1.04)}.mic:active{transform:translateY(3px)}.mic.recording{background:var(--danger);box-shadow:0 6px #8f2412}.ring{background:#ff7a5959;border-radius:50%;width:112px;height:112px;animation:1.8s ease-out infinite pulse;position:absolute}.ring+.ring{animation-delay:.9s}@keyframes pulse{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}.rec-label{font-family:var(--font-head);color:var(--blue-ink);margin-top:6px;font-size:1.35rem;font-weight:600}.rec-sub{color:var(--ink-soft);font-size:.98rem}.rec-clock{font-family:var(--font-head);color:var(--danger);font-size:1.6rem;font-weight:600}.rec-clock small{color:var(--ink-faint);font-size:1rem}.waveform{--bar:#ff7a59;width:100%;height:48px}.say-it{background:var(--sun-soft);border-radius:var(--r-md);text-align:left;width:100%;margin-top:10px;padding:12px 16px}.say-it span{color:#7a5a00;font-size:.95rem;font-weight:800}.say-it ul{flex-wrap:wrap;gap:6px 16px;margin-top:4px;display:flex}.say-it li{color:var(--ink);font-size:.98rem;font-weight:700}.say-it li:before{content:"✓ ";color:var(--mint);font-weight:900}.saved{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.saved-head{gap:8px;display:flex}.chip{background:var(--sky);color:var(--blue-deep);border-radius:999px;align-items:center;gap:5px;padding:6px 12px;font-size:.92rem;font-weight:800;display:inline-flex}.chip.ok{background:var(--mint-soft);color:#11684d}.clip{width:100%}.type-stage{flex-direction:column;gap:10px;display:flex}.input{resize:vertical;border:2px solid var(--line);border-radius:var(--r-md);width:100%;min-height:220px;font:inherit;color:var(--ink);background:var(--bg);padding:14px 16px;font-size:1.08rem}.input:focus{border-color:var(--blue);background:#fff;outline:none}.actions{justify-content:flex-end;display:flex}.actions .btn{width:100%}.done{text-align:center;flex-direction:column;align-items:center;gap:18px;max-width:640px;margin:56px auto;display:flex}.done-mark{background:var(--mint);color:#fff;width:104px;height:104px;box-shadow:0 0 0 12px var(--mint-soft);border-radius:50%;place-items:center;display:grid}.done h1{color:var(--blue-ink);margin-top:10px;font-size:clamp(2rem,5vw,3rem)}.done>p{color:var(--ink-soft);font-size:1.18rem}.done-list{text-align:left;grid-template-columns:1fr 1fr;gap:8px 20px;display:grid}.done-list li{align-items:center;gap:8px;font-weight:700;display:flex}.done-list svg{color:var(--mint);flex:none}.done-care{text-align:left;background:var(--coral-soft);border-radius:var(--r-md);color:#7d2f1a;align-items:flex-start;gap:10px;padding:14px 18px;font-weight:700;display:flex}.done-care svg{flex:none;margin-top:3px}@media (max-width:980px){.split,.hero-grid{grid-template-columns:1fr}.hero-art{max-width:320px}.why{grid-template-columns:1fr;gap:8px}.topics,.tips{grid-template-columns:1fr 1fr}}@media (max-width:720px){.wrap{padding:0 16px}.nav-in{flex-wrap:wrap;gap:10px;padding:8px 16px}.nav-home{flex:1 1 0}.nav-name{font-size:.92rem}.nav-home img{width:38px;height:38px}.nav-start{display:none}.nav-right{display:contents}.lang{flex:none}.lang button{padding:8px 11px;font-size:.85rem}.dots{order:3;justify-content:center;width:100%}.hero-art{max-width:280px}.hero{padding:32px 0 40px}.lead{font-size:1.12rem}.btn-start.big{width:100%;font-size:1.35rem}.bubble{padding:8px 12px;font-size:.9rem}.b1{left:0}.b2{right:0}.band{padding:44px 0}.steps,.topics,.tips,.example-grid,.done-list{grid-template-columns:1fr}.example{padding:22px 18px}.private{flex-direction:column;padding:26px 22px}.a-panel{padding:16px}.tab-badge{display:none}}.preview-badge{z-index:50;background:var(--blue-ink);color:#fff;font:800 .82rem/1.2 var(--font-body);pointer-events:none;white-space:nowrap;border-radius:999px;padding:8px 16px;position:fixed;bottom:14px;left:50%;transform:translate(-50%);box-shadow:0 6px 20px #0003}
