@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;src:url(/fonts/nunito-latin.woff2) format("woff2");unicode-range:U+0000-00FF,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}
/* Bogstav's "Klat" look: warm paper, dark ink and five paints (Bogstav/App/Theme.swift). */
:root{color-scheme:light dark;
--page:#FFF6E9;--card:#FFFFFF;--ink:#2B2A4C;--muted:#6B6782;--line:#EADBCD;--edge:#EADBCD;--dash:#E4CDBB;
--accent:#EE5232;--accent-ink:#B8391C;
--tomato:#FF6B4A;--tomato-edge:#D9492B;--tomato-soft:#FFD9CF;--band:#FFE3DA;
--sun:#FFC53D;--sun-soft:#FFF0C2;--star-edge:#E0A100;--star-ink:#8A5A00;
--sea:#3BA7C9;--sea-soft:#D3ECF4;--moss:#7CC47F;--moss-edge:#4E9B53;--moss-soft:#E6F4E6;--plum:#9B6BD3;--plum-soft:#EEE3FA;
--rule-top:#E9DFF0;--rule-mid:#BFD9E8;--rule-base:rgba(43,42,76,.35);--guide:#F0E6EE;--dots:rgba(43,42,76,.45);--faint:#B9AEB8;
--shadow:0 1px 2px rgba(43,42,76,.05),0 12px 30px -14px rgba(43,42,76,.25);
--round:"Nunito",ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN","Apple SD Gothic Neo",system-ui,sans-serif;
--sans:"Nunito",ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Hiragino Maru Gothic ProN","Hiragino Sans","Apple SD Gothic Neo","Noto Sans",sans-serif}
@media (prefers-color-scheme:dark){:root{
--page:#1A1930;--card:#272645;--ink:#FFF6E9;--muted:#B7B2CC;--line:#3A3860;--edge:#12111F;--dash:#4A4870;
--accent:#FF7A5C;--accent-ink:#FF9578;--tomato-soft:#4A2924;--band:#45283A;
--sun-soft:#433715;--star-ink:#FFD36B;--sea-soft:#183D4C;--moss-soft:#1F3D28;--plum-soft:#33284F;
--rule-top:#35335A;--rule-mid:#2C5163;--rule-base:rgba(255,246,233,.35);--guide:#34324F;--dots:rgba(255,246,233,.5);--faint:#6D6990;
--shadow:0 1px 2px rgba(0,0,0,.3),0 14px 30px -14px rgba(0,0,0,.6)}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font:500 17px/1.6 var(--sans);overflow-x:hidden}
a{color:var(--accent-ink)}img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--sea);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--card);padding:8px 12px;border-radius:10px;z-index:10}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}.narrow{max-width:760px}
h1,h2,h3{font-family:var(--round);margin:0 0 .4em;font-weight:900;letter-spacing:-.025em;line-height:1.04}
h1{font-size:clamp(44px,6.2vw,80px);letter-spacing:-.035em}h2{font-size:clamp(34px,4.4vw,54px)}
h3{font-size:22px;font-weight:850;letter-spacing:-.01em;line-height:1.2}
h1 em,h2 em{font-style:normal;color:var(--accent)}
:lang(ko) h1,:lang(ko) h2,:lang(ko) h3,:lang(ko) .lead{word-break:keep-all}
:lang(ja) h1,:lang(ja) h2,:lang(ko) h1,:lang(ko) h2{letter-spacing:-.01em;line-height:1.18}
:lang(ja) h1,:lang(ko) h1{font-size:clamp(38px,5.2vw,64px)}
:lang(ja) h1 em,:lang(ja) h2 em{display:inline-block}h1,h2{text-wrap:balance}
:lang(ja){--round:"Nunito",ui-rounded,"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif}
.lead{font-size:clamp(18px,1.9vw,21px);color:var(--muted);max-width:36em;margin:0}.muted{color:var(--muted);font-size:15px}
/* header */
.top .wrap{display:flex;align-items:center;gap:22px;height:76px}
.brand{display:flex;align-items:center;gap:10px;font:900 24px var(--round);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand img{border-radius:9px;box-shadow:0 4px 10px -4px rgba(217,73,43,.55)}
.top nav{margin-left:auto}.top nav a{color:var(--ink);text-decoration:none;font-weight:750;font-size:16px}.top nav a:hover{color:var(--accent-ink)}
.pill{display:inline-flex;align-items:center;justify-content:center;background:var(--tomato);color:#fff;border-radius:999px;padding:10px 18px;font-weight:850;font-size:15px;text-decoration:none;white-space:nowrap;box-shadow:0 3px 0 var(--tomato-edge)}
.pill.soon{background:var(--tomato-soft);color:var(--accent-ink);box-shadow:none}
/* hero: school writing paper (top line, dashed middle line, base line) */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:40px 0 88px}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
background-image:linear-gradient(var(--rule-top) 2px,transparent 2px),repeating-linear-gradient(90deg,var(--rule-mid) 0 10px,transparent 10px 19px),linear-gradient(var(--rule-base) 2px,transparent 2px);
background-size:100% 120px,100% 2px,100% 120px;background-position:0 0,0 40px,0 80px;background-repeat:repeat,repeat-x,repeat;opacity:.55;
-webkit-mask-image:radial-gradient(75% 90% at 75% 45%,#000 30%,transparent 80%);mask-image:radial-gradient(75% 90% at 75% 45%,#000 30%,transparent 80%)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.actions{display:flex;align-items:center;gap:24px;margin:30px 0 24px;flex-wrap:wrap}
.pill.big{padding:0 28px;min-height:58px;font-size:17px;box-shadow:0 5px 0 var(--tomato-edge)}
.pill.big.soon{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 2px var(--line),0 4px 0 var(--edge)}
.more{font-weight:800;color:var(--ink);text-decoration:underline;text-decoration-color:var(--tomato);text-decoration-thickness:2.5px;text-underline-offset:6px}
.facts{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--muted);font-weight:700;font-size:15px}
.facts li{display:flex;align-items:center;gap:7px}.facts svg{width:18px;height:18px;color:var(--moss-edge)}
@media (prefers-color-scheme:dark){.facts svg{color:var(--moss)}}
/* hero art */
.hero-art{position:relative;min-height:680px;display:grid;place-items:center}
.chip{position:absolute;z-index:3;display:grid;place-items:center;width:74px;height:74px;border-radius:24px;font:900 44px/1 var(--round);color:#fff;box-shadow:0 5px 0 rgba(43,42,76,.18),var(--shadow)}
.chip.c1{left:4%;top:12%;transform:rotate(-9deg);background:var(--sea)}
.chip.c2{right:2%;top:30%;transform:rotate(8deg);background:var(--plum)}
.chip.c3{right:6%;bottom:12%;transform:rotate(-6deg);background:var(--moss)}
.hello{position:absolute;z-index:4;left:0;bottom:8%;display:flex;align-items:flex-end;gap:4px}
.hello .klat{width:92px;height:106px}
.bubble{margin-bottom:58px;background:var(--card);border-radius:22px 22px 22px 6px;padding:10px 15px;font:800 16px/1.25 var(--round);box-shadow:var(--shadow);max-width:150px}
.phone{position:relative;z-index:2;width:300px;height:624px;border-radius:54px;padding:11px;background:#1C1B2E;
box-shadow:0 0 0 1.5px #3A3954,0 2px 0 4px rgba(0,0,0,.04),0 50px 80px -30px rgba(43,42,76,.6)}
.phone::before{content:"";position:absolute;top:20px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#1C1B2E;z-index:3}
.screen{--s:.7128;height:100%;border-radius:44px;background:var(--page);color:var(--ink);overflow:hidden;position:relative}
.s390{position:absolute;left:0;top:0;width:390px;height:844px;transform:scale(var(--s));transform-origin:0 0}
/* Klat */
.klat{display:block;overflow:visible}.klat .body{fill:var(--tomato)}.klat .eye{fill:#fff}.klat .pupil{fill:#2B2A4C}
.klat .mouth{fill:none;stroke:#2B2A4C;stroke-width:3.4;stroke-linecap:round}.klat .o{fill:#2B2A4C}.klat .cheek{fill:#FFB0A0}
.klat .arm{fill:none;stroke:var(--tomato);stroke-width:7;stroke-linecap:round}.klat .rim{stroke:var(--card);stroke-width:6}
@media (prefers-reduced-motion:no-preference){.hello .arm{transform-origin:84px 62px;animation:wave 1.6s ease-in-out 1s 3}}
@keyframes wave{25%{transform:rotate(-14deg)}75%{transform:rotate(10deg)}}
/* the trace screen, drawn at 390 × 844 and scaled into the phone */
.trace{display:flex;flex-direction:column;gap:16px;padding:56px 16px 34px;font-family:var(--round)}
.tbar{display:flex;align-items:center;gap:10px}
.rb{flex:none;width:48px;height:48px;border-radius:24px;background:var(--card);display:grid;place-items:center;box-shadow:0 2px 6px rgba(43,42,76,.10)}
.rb svg{width:20px;height:20px}
.stepdots{flex:1;display:flex;align-items:center;justify-content:center;gap:10px}
.sd{display:grid;place-items:center;border-radius:50%}.sd svg{width:18px;height:18px}
.sd.done{width:36px;height:36px;background:var(--moss);color:#fff}
.sd.now{width:48px;height:48px;background:var(--tomato);color:#fff;box-shadow:0 0 0 5px var(--tomato-soft)}.sd.now svg{width:26px;height:26px}
.sd.next{width:36px;height:36px;background:var(--card);border:3px solid var(--line);color:var(--faint)}.sd.next svg{width:16px;height:16px}
.sl{width:18px;height:4px;border-radius:2px;background:var(--line)}.sl.on{background:var(--moss)}
.wordcard{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:28px;padding:10px 10px 10px 14px;box-shadow:0 3px 0 var(--edge)}
.pic{flex:none;width:64px;height:64px;border-radius:20px;background:var(--sun-soft);display:grid;place-items:center;font-size:40px;line-height:1}
.wc-text{flex:1;display:flex;align-items:baseline;gap:10px;min-width:0}
.wc-letter{font-size:44px;font-weight:900;line-height:1;color:var(--tomato)}.wc-word{font-size:28px;font-weight:850;line-height:1}.wc-word b{color:var(--tomato);font-weight:inherit}
.speak{flex:none;width:64px;height:64px;border-radius:32px;background:var(--ink);color:var(--page);display:grid;place-items:center}.speak svg{width:28px;height:28px}
.canvas{flex:1;background:var(--card);border-radius:36px;box-shadow:0 4px 0 var(--edge),0 10px 24px rgba(43,42,76,.06);position:relative;overflow:hidden}
.canvas>svg{position:absolute;left:0;top:14px;width:358px;height:440px}
.tbtns{display:flex;gap:12px}
.bigbtn{flex:1;height:72px;border-radius:36px;background:var(--card);box-shadow:0 3px 0 var(--edge);display:flex;align-items:center;justify-content:center;gap:10px;font-size:21px;font-weight:900}
.bigbtn .klat{width:30px;height:34px}.sqbtn{flex:none;width:72px;height:72px;border-radius:36px;background:var(--card);box-shadow:0 3px 0 var(--edge);display:grid;place-items:center}.sqbtn svg{width:28px;height:28px}
/* writing lines and letters (SVG) */
.r-top{stroke:var(--rule-top);stroke-width:2}.r-mid{stroke:var(--rule-mid);stroke-width:2.5;stroke-dasharray:10 9}.r-base{stroke:var(--rule-base);stroke-width:3}
.band{fill:none;stroke:var(--band);stroke-linecap:round;stroke-linejoin:round}.band.next{stroke:var(--guide)}
.dots{fill:none;stroke:var(--dots);stroke-width:5;stroke-linecap:round;stroke-dasharray:.1 13}
.paint{fill:none;stroke:var(--tomato);stroke-linecap:round;stroke-linejoin:round}
.paint.sea{stroke:var(--sea)}.paint.sun{stroke:var(--sun)}.paint.moss{stroke:var(--moss)}.paint.plum{stroke:var(--plum)}
.ink{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.start circle{fill:var(--sea)}.start text{fill:#fff;font:900 20px var(--round);text-anchor:middle}
.start.t circle{fill:var(--tomato)}.start.s circle{fill:var(--sun)}.start.s text{fill:#2B2A4C}
.arrow{fill:none;stroke:var(--sea);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.arrow.t{stroke:var(--tomato)}.arrow.ink{stroke:var(--ink)}
.trail{fill:var(--tomato);opacity:.55}
.pulse{fill:var(--sea);opacity:0}
/* hero motion: Klat's trail paints two thirds of the a, then Klat pops up and the next start dot pulses */
@media (prefers-reduced-motion:no-preference){
.hero .paint{stroke-dasharray:1;animation:paint 1.5s .6s cubic-bezier(.45,0,.3,1) backwards}
.hero .canvas .klat-on{animation:pop .4s 2s cubic-bezier(.3,1.6,.5,1) backwards}
.hero .trail{animation:rise .3s 2.1s backwards}
.pulse{animation:pulse 2.2s 2.4s ease-out infinite}
.chip{animation:float 6s ease-in-out infinite alternate}.chip.c2{animation-delay:-2s}.chip.c3{animation-delay:-4s}}
@keyframes paint{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.4)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes pulse{0%{transform:scale(1);opacity:.4}100%{transform:scale(2.1);opacity:0}}
@keyframes float{to{translate:0 -10px}}
.klat-on,.pulse{transform-box:fill-box;transform-origin:center}
/* sections */
.band-s{padding:96px 0 16px}.band-s h2{max-width:16em}.band-s .lead{margin-top:4px}
.shows{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 22px;margin-top:40px}
.shows article h3{margin:20px 0 6px}.shows article p{margin:0;color:var(--muted);font-size:16.5px;max-width:30em}
.vis{position:relative;height:240px;border-radius:30px;overflow:hidden;display:grid;place-items:center;background:var(--card);box-shadow:0 4px 0 var(--edge),var(--shadow)}
.vis>*{position:relative}
.vis>svg.letter{width:100%;height:100%}
.num{position:absolute;left:16px;top:14px;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:900 18px var(--round);color:var(--page);background:var(--ink)}
.shows>article,.parents>article,.sets>article,.hero-grid>*{min-width:0}
/* steps: watch, trace, write */
@media (prefers-reduced-motion:no-preference){
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:paint 1.4s cubic-bezier(.45,0,.3,1) forwards;animation-timeline:view();animation-range:entry 30% cover 50%}
.draw.d2{animation-range:entry 55% cover 60%}}
@supports not (animation-timeline:view()){.draw{stroke-dashoffset:0!important;animation:none!important}}
.vis-watch .klat{position:absolute;right:12%;bottom:12%;width:58px;height:66px;transform:rotate(14deg)}
.say{position:absolute;left:60px;top:12px;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--page);font:850 16px var(--round)}
.say .mini-pic{width:30px;height:30px;border-radius:10px;background:var(--sun-soft);display:grid;place-items:center;font-size:18px}
.say svg{width:18px;height:18px;color:var(--ink)}
.stars{display:inline-flex;gap:3px}.stars svg{width:22px;height:22px}.star{fill:var(--sun);stroke:var(--star-edge);stroke-width:1;stroke-linejoin:round}.star.off{fill:none;stroke:var(--dash)}
.vis-write .stars{position:absolute;right:16px;top:16px}
/* checks */
.vis-order .legend-n{position:absolute;right:16px;top:14px;display:flex;gap:6px}
/* kind */
.vis-again{gap:14px;align-content:center;justify-items:center}
.vis-again .klat{width:84px;height:97px}
.btn-show{display:flex;align-items:center;gap:10px;height:56px;padding:0 24px;border-radius:28px;background:var(--page);box-shadow:0 3px 0 var(--edge);font:900 18px var(--round)}
.btn-show .klat{width:26px;height:30px}
.vis-wide{grid-template-columns:1fr auto 1fr;align-items:center;padding:0 14px;gap:4px}
.vis-wide svg{width:100%;height:auto}.vis-wide .to{width:30px;height:30px;color:var(--muted)}
.vis-round{align-content:center;justify-items:center;gap:16px;padding:0 18px;text-align:center}
.vis-round .stars svg{width:44px;height:44px}.vis-round .stars svg:nth-child(2){width:58px;height:58px;margin-top:-14px}
.rdots{display:flex;gap:8px}.rdots i{width:16px;height:16px;border-radius:50%;background:var(--moss)}
.vis-round p{margin:0;font:900 22px/1.15 var(--round)}
.confetti{position:absolute;inset:0;width:100%;height:100%}
/* parents: words + letter grid panels */
.parents{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.panel{display:flex;flex-direction:column;background:var(--card);border-radius:32px;padding:28px;box-shadow:var(--shadow)}
.panel h3{margin:22px 0 6px}.panel p{margin:0;color:var(--muted);max-width:32em}
.panel-art{border-radius:24px;background:var(--page);padding:22px;min-height:420px;flex:1;display:grid;align-content:center;gap:16px;font-family:var(--round)}
.dict-top{display:flex;align-items:center;justify-content:center;gap:18px}
.dict-pic{width:112px;height:112px;border-radius:50%;background:var(--card);box-shadow:0 4px 0 var(--edge);display:grid;place-items:center;font-size:62px;line-height:1}
.speak.big{width:76px;height:76px;border-radius:50%;box-shadow:0 5px 0 #15142B}.speak.big svg{width:34px;height:34px}
@media (prefers-color-scheme:dark){.speak.big{box-shadow:0 5px 0 #8C86A8}}
.writing{background:var(--card);border-radius:28px;box-shadow:0 4px 0 var(--edge);padding:8px 0 0}
.writing svg{display:block;width:100%;height:auto}
.result{display:flex;align-items:center;gap:12px;background:var(--moss-soft);border-radius:24px;padding:10px 14px}
.result .ok{flex:none;width:44px;height:44px;border-radius:50%;background:var(--moss);display:grid;place-items:center;color:#fff}.result .ok svg{width:24px;height:24px}
.result b{flex:1;font:900 32px/1 var(--round)}.result .stars svg{width:22px;height:22px}
.lg-head{display:flex;align-items:center;gap:10px}
.av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:26px;line-height:1;background:var(--tomato-soft)}
.av.sea{background:var(--sea-soft)}
.lg-head b{flex:1;font:900 24px var(--round)}
.count{display:flex;align-items:center;gap:5px;height:40px;padding:0 13px;border-radius:20px;background:var(--sun-soft);color:var(--star-ink);font:900 18px var(--round)}.count svg{width:20px;height:20px}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.tab{display:grid;place-items:center;height:46px;border-radius:16px;background:var(--card);font:900 20px var(--round);box-shadow:0 2px 6px rgba(43,42,76,.08)}
.tab.on{background:var(--ink);color:var(--page)}.tab svg{width:24px;height:24px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tile{position:relative;height:72px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:var(--card);box-shadow:0 3px 0 var(--edge);font:900 32px/1 var(--round)}
.tile small{font-size:11px;letter-spacing:1px;color:var(--star-edge)}
.tile.next{border:3px solid var(--tomato);box-shadow:0 3px 0 var(--tomato-soft)}
.tile.todo{background:transparent;box-shadow:none;border:2px dashed var(--dash);color:var(--faint);font-weight:800}
.tile .klat{position:absolute;right:-8px;top:-14px;width:30px;height:34px}
.tile.c0{color:var(--tomato)}.tile.c1{color:var(--sun)}.tile.c2{color:var(--sea)}.tile.c3{color:var(--moss)}.tile.c4{color:var(--plum)}
.nextbtn{display:flex;align-items:center;justify-content:center;gap:14px;height:72px;border-radius:36px;background:var(--tomato);box-shadow:0 5px 0 var(--tomato-edge);color:#fff;font:900 40px/1 var(--round)}.nextbtn svg{width:26px;height:26px}
/* family */
.kids{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 18px;width:100%}
.kid{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 6px;border-radius:22px;background:var(--page);box-shadow:0 3px 0 var(--edge)}
.kid .av{width:54px;height:54px;font-size:30px}.kid b{font:900 18px var(--round)}
.kid small{display:flex;align-items:center;gap:3px;font:850 13px var(--round);color:var(--star-ink)}.kid small svg{width:14px;height:14px}
.kid-add{grid-column:span 2;display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:18px;border:2.5px dashed var(--dash);color:var(--muted);font:800 15px var(--round)}.kid-add svg{width:18px;height:18px}
.vis-left{grid-template-columns:auto auto;gap:6px;align-items:center;justify-content:center}
.vis-left svg.letter{width:150px;height:200px}
.mirror{display:grid;gap:10px}.mirror span{width:52px;height:52px;border-radius:50%;background:var(--page);box-shadow:0 3px 0 var(--edge);display:grid;place-items:center}.mirror svg{width:22px;height:22px}
.mirror span.go{background:var(--moss);box-shadow:0 3px 0 var(--moss-edge);color:#fff}
.gate{display:grid;gap:12px;justify-items:center;text-align:center;padding:0 20px;font-family:var(--round)}
.gate .for{display:flex;align-items:center;gap:6px;font:850 14px var(--round);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.gate .for svg{width:16px;height:16px}
.gate p{margin:0;font:800 17px/1.3 var(--round)}.gate p b{display:block;font-size:26px;font-weight:900;color:var(--plum)}
.digits{display:flex;gap:8px}.digits span{width:46px;height:54px;border-radius:14px;background:var(--page);box-shadow:inset 0 0 0 2.5px var(--line);display:grid;place-items:center;font:900 30px var(--round)}
/* letter sets */
.sets{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.set{background:var(--card);border-radius:28px;padding:22px;box-shadow:0 4px 0 var(--edge),var(--shadow);display:flex;flex-direction:column}
.set-head{display:flex;align-items:center;gap:14px}.set-head h3{margin:0;font-size:24px}.set-head p{margin:0;color:var(--muted);font-size:15px}
.glyph{flex:none;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;color:#fff;font:900 40px/1 var(--round);box-shadow:0 4px 0 rgba(43,42,76,.18)}
.glyph.t{background:var(--tomato)}.glyph.s{background:var(--sea)}.glyph.m{background:var(--moss)}
.abc{margin:18px 0 14px;font:900 22px/1.5 var(--round);letter-spacing:.06em;word-break:break-all;flex:1}
.abc span:nth-child(5n+1){color:var(--tomato)}.abc span:nth-child(5n+2){color:var(--star-edge)}.abc span:nth-child(5n+3){color:var(--sea)}.abc span:nth-child(5n+4){color:var(--moss-edge)}.abc span:nth-child(5n){color:var(--plum)}
@media (prefers-color-scheme:dark){.abc span:nth-child(5n+2){color:var(--sun)}.abc span:nth-child(5n+4){color:var(--moss)}}
.heard{display:flex;align-items:center;gap:8px;margin:0;padding:8px 14px;border-radius:999px;background:var(--page);font:800 16px var(--round)}.heard svg{width:18px;height:18px;flex:none}
.set p.note{margin:12px 0 0;color:var(--muted);font-size:15.5px}
/* privacy + price */
.duo{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:stretch;padding-top:96px;padding-bottom:16px}
.duo section{border-radius:34px;padding:40px}
.inkpanel{color:#FFF6E9;background:radial-gradient(80% 80% at 100% 0%,#4A3F86,transparent 60%),linear-gradient(150deg,#2B2A4C,#1C1B33);position:relative;overflow:hidden}
.inkpanel h2,.inkpanel h2 em{color:#FFF6E9}.inkpanel h2 em{color:var(--sun)}.inkpanel p{color:rgba(255,246,233,.88);max-width:32em}
@media (prefers-color-scheme:dark){.inkpanel{background:radial-gradient(80% 80% at 100% 0%,#5A4C9E,transparent 60%),linear-gradient(150deg,#3A3868,#2A2850)}}
.inkpanel .klat{position:absolute;right:28px;bottom:26px;width:64px;height:74px}
.nots{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-weight:750}
.nots li{display:flex;align-items:center;gap:8px}.nots svg{width:20px;height:20px;flex:none;color:var(--sun)}
.card-panel{background:var(--card);box-shadow:0 4px 0 var(--edge),var(--shadow)}.card-panel p{color:var(--muted)}
.icons{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}.icons img{width:60px;border-radius:14px}
/* faq */
.faq-band{padding-bottom:96px}.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:start}
.faq details{border-bottom:2px solid var(--line);padding:18px 0}.faq details:first-child{padding-top:4px}
.faq summary{font-weight:850;cursor:pointer;font-size:18.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--round)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;background:var(--tomato-soft);color:var(--accent-ink);display:grid;place-items:center;font-weight:900;font-size:21px;line-height:1}
.faq details[open] summary::after{content:"\2212"}.faq p{color:var(--muted);margin:10px 0 0}
.faq-klat{margin-top:18px;width:84px;height:97px}
/* other pages */
.wrap.page{padding:56px 24px 80px}.wrap.page h2{font-size:28px;margin-top:40px}.tips li{margin:8px 0}
/* footer (layout B) */
.site-footer{border-top:2px solid var(--line);padding:34px 0 40px;font-size:15px;color:var(--muted)}
.footer-top{display:flex;justify-content:space-between;gap:30px}
.footer-brand{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:850;text-decoration:none;font-family:var(--round)}
.footer-brand img{filter:grayscale(1);opacity:.5;border-radius:5px;box-shadow:0 0 0 1px var(--line)}.footer-brand:hover img{filter:none;opacity:1}
.footer-tagline,.footer-made{margin:6px 0 0}.footer-made a{color:inherit;text-decoration:none}.footer-made a:hover,.footer-made a:focus{color:var(--ink);text-decoration:underline}
.footer-side{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.footer-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}.footer-links a{color:var(--muted)}
details.language{position:relative}
details.language summary{list-style:none;display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--ink);font-weight:750}
details.language summary::-webkit-details-marker{display:none}details.language summary svg{width:18px;height:18px}details.language .chevron{width:14px;height:14px}
details.language ul{position:absolute;right:0;bottom:calc(100% + 8px);list-style:none;margin:0;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.16);min-width:200px;max-height:70vh;overflow:auto;z-index:5}
details.language li a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;color:var(--ink);text-decoration:none}
details.language li a:hover{background:var(--tomato-soft)}details.language li svg{width:16px;height:16px;color:var(--tomato)}
/* small screens */
@media (max-width:1000px){.shows,.sets{grid-template-columns:1fr 1fr}.parents{grid-template-columns:1fr}}
@media (max-width:900px){.hero-grid,.duo,.faq-grid{grid-template-columns:1fr}.hero{padding-top:24px}.hero-art{min-height:640px}.faq-grid{gap:8px}.faq-klat{display:none}}
@media (max-width:640px){.shows,.sets{grid-template-columns:1fr}.band-s{padding-top:72px}.duo section{padding:30px 22px}.nots{grid-template-columns:1fr}
.panel{padding:14px;border-radius:26px}.panel-art{padding:16px;min-height:0}.panel h3,.panel p{padding:0 6px}
.chip{width:58px;height:58px;font-size:34px;border-radius:19px}.chip.c1{left:0}.chip.c2{right:0}.chip.c3{right:2%}
.phone{width:270px;height:561px;border-radius:48px;padding:10px}.screen{--s:.641;border-radius:39px}
.hello{left:-4px;bottom:4%}.hello .klat{width:72px;height:83px}.bubble{font-size:14px;margin-bottom:44px;max-width:120px;padding:8px 12px}
.inkpanel .klat{display:none}.bubble{display:none}.hero-art{min-height:600px}}
@media (max-width:760px){.footer-top{flex-direction:column}.footer-side{align-items:flex-start}.footer-links{justify-content:flex-start}details.language ul{left:0;right:auto}.top nav{display:none}.top .pill{margin-left:auto}}
@media (max-width:420px){.wrap{padding:0 16px}.wrap.page{padding:40px 16px 64px}.tiles{gap:8px}.tile{height:62px;font-size:28px}.tabs{gap:5px}.tab{font-size:17px}
.dict-pic{width:92px;height:92px;font-size:50px}.panel-art{padding:12px}.result b{font-size:28px}.nextbtn{height:64px;font-size:34px}}