@font-face{font-family:Nunito;src:url('./fonts/Nunito.ttf');font-weight:200 1000;font-display:swap}@font-face{font-family:Noto;src:url('./fonts/NotoSans.ttf')}@font-face{font-family:Arabic;src:url('./fonts/Arabic.woff2')}@font-face{font-family:Hindi;src:url('./fonts/Devanagari.woff2')}
@font-face{font-family:CJK;src:url('./fonts/PanCJK.woff2')}
:root{--page:#f4faf5;--panel:#fff;--ink:#183e32;--muted:#496057;--line:#bfd6c6;--accent:#1f614d;--button:#fff;--leaf:#429e7a;--coral:#ed6b59;--butter:#ffedb8;color-scheme:light;font-family:Nunito,Noto,Arabic,Hindi,CJK,sans-serif;color:var(--ink);background:var(--page)}:root[data-theme=dark]{--page:#101b19;--panel:#1c2d27;--ink:#e3f4e8;--muted:#acc5b6;--line:#426250;--accent:#8bd4ae;--button:#10271b;--butter:#303326;color-scheme:dark}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:4px}button,input,select{font:inherit}button,select{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);padding:10px 16px;cursor:pointer}button:hover{border-color:var(--accent)}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--coral);outline-offset:3px}.primary{background:var(--accent);color:var(--button);font-weight:800;min-height:56px;border:0}.masthead{max-width:1200px;margin:auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-weight:900;font-size:23px;text-decoration:none;display:flex;align-items:center;gap:10px}.brand img{width:38px;height:38px;border-radius:10px}nav{display:flex;gap:18px;align-items:center}nav details{position:relative}nav details>div{position:absolute;z-index:10;inset-inline-end:0;min-width:180px;background:var(--panel);border:1px solid var(--line);padding:16px;display:grid;gap:12px}.hero{max-width:1200px;margin:auto;display:grid;grid-template-columns:.78fr 1.22fr;align-items:start;gap:42px;padding:40px 24px 30px}.hero-copy{padding-block:28px}.hero h1{font-size:clamp(34px,4.6vw,62px);line-height:1.04;letter-spacing:-.035em;margin:0 0 20px;font-weight:900}.hero p{font-size:18px;line-height:1.55;color:var(--muted)}.console{border:2px solid var(--accent);border-radius:32px 32px 16px 16px;background:var(--panel);padding:24px;position:relative}.readout{display:flex;justify-content:space-between;align-items:center;gap:10px;direction:ltr}.readout output{font-size:clamp(38px,5vw,60px);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.03em}.readout small{font-size:14px}.status{margin:0;color:var(--muted);font-size:14px;min-height:22px}.track{height:24px;display:flex;align-items:center;gap:3px;direction:ltr;margin-block:10px}.track i{height:5px;flex:1;background:var(--line);border-radius:2px}.track.active i{background:var(--leaf);animation:beat .6s ease-in-out infinite alternate}.track.active i:nth-child(3n){animation-delay:.3s}.track.active i:nth-child(2n){animation-delay:.1s}@keyframes beat{to{height:22px}}@media(prefers-reduced-motion:reduce){.track.active i{animation:none;height:14px}}label{display:grid;gap:6px;margin-block:12px;font-weight:700}input[type=range]{width:100%;accent-color:var(--accent);min-height:24px}.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{flex:1}.presets{display:flex;gap:6px;margin-block:8px;direction:ltr}.presets button{padding:7px 5px;font-size:13px;flex:1}.transport{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-block:14px 6px}.limits{font-size:12px;color:var(--muted);margin:8px 0}.notice{background:var(--butter);padding:14px;border-radius:10px;line-height:1.5}.extras{max-width:1152px;margin:20px auto;padding:0 24px}.extras>details{border-block-start:1px solid var(--line);padding-block:20px}.extras summary{font-size:23px;font-weight:800;cursor:pointer}.extras .row{margin-block:14px}.lessons{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.lesson{border:1px solid var(--line);border-radius:14px;padding:18px}.reading{max-width:780px;margin:45px auto;padding:0 24px;line-height:1.75}.reading h1{line-height:1.1;font-size:42px}.reading>p{white-space:pre-line}.reading section{margin-block:36px}.facts{padding:16px;background:var(--butter);border-radius:14px}.devices{max-width:1152px;margin:40px auto;padding:24px;border-block:1px solid var(--line)}.device-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}.device-list>a,.device-list>span{padding:12px;border:1px solid var(--line);border-radius:12px}.device-list small{display:block;color:var(--muted);font-size:12px}.guide-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.guide-list a{padding:16px;border-block-end:1px solid var(--line)}footer{padding:32px 24px;background:var(--accent);color:var(--button)}footer nav{flex-wrap:wrap}footer .languages{display:flex;gap:12px;flex-wrap:wrap;margin-block:18px}footer .devices{margin:20px 0;padding:20px 0}.app-shell{max-width:1080px;padding:20px;margin:auto}.app-shell>header{display:flex;align-items:center;gap:12px;margin-block-end:20px}.app-shell h1{font-size:25px;margin-inline-end:auto}.app-shell .console{max-width:740px;margin:auto}.app-shell .extras{padding:0}.error{border:1px solid var(--coral);padding:12px;border-radius:12px}.hidden{display:none!important}@media(max-width:700px){.masthead{padding:12px 16px;gap:10px}.brand{font-size:19px}.brand img{width:30px;height:30px}.masthead nav>a{display:none}.hero{display:block;padding:12px 16px}.hero-copy{padding:4px 0}.hero h1{font-size:34px;margin:8px 0}.hero p{font-size:14px;line-height:1.4;margin:8px 0 16px}.console{padding:16px;border-radius:24px 24px 12px 12px}.readout output{font-size:42px}label{margin-block:8px}.track{margin-block:6px;height:18px}.transport{margin-block:10px 0}.extras{padding:0 16px}.reading h1{font-size:32px}.app-shell{padding:12px}.app-shell>header{flex-wrap:wrap}.app-shell>header h1{width:100%}.app-shell select{max-width:170px}}

dialog{max-width:min(480px,calc(100% - 32px));border:1px solid var(--accent);border-radius:20px;padding:24px;background:var(--panel);color:var(--ink);line-height:1.6}dialog::backdrop{background:#071a12a8}dialog button{min-width:110px}
