:root{
  --bg:#f8fafc;--fg:#0F172A;--muted:#52606D;--card:#fff;--border:#DDE3E6;
  --accent:#2a496e;--accent-soft:#E6EDF6;--on-accent:#fff;
  --hero-a:#1f3856;--hero-b:#2a496e;--shadow:0 1px 2px rgba(15,23,42,.06),0 4px 14px rgba(15,23,42,.06);
  --radius:16px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0E151D;--fg:#F1F5F9;--muted:#9FB0BF;--card:#16212D;--border:#26323C;--accent:#8FB2DB;--accent-soft:#1D2D42;--on-accent:#0E1B2B;--hero-a:#16263A;--hero-b:#2a496e;--shadow:none}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 "League Spartan",system-ui,sans-serif;-webkit-text-size-adjust:100%}
h1,h2,.brand{font-family:Georgia,"Times New Roman",serif}
.wrap{max-width:560px;margin:0 auto;padding:0 16px}
.hero{background:linear-gradient(145deg,var(--hero-a),var(--hero-b));color:#fff;padding:20px 0 56px;border-radius:0 0 28px 28px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.1rem;letter-spacing:.2px}
.logo{height:56px;width:auto;display:block}
.langs{display:flex;background:rgba(255,255,255,.16);border-radius:999px;padding:3px}
.langs button{min-width:48px;min-height:44px;border:0;border-radius:999px;background:transparent;color:#fff;font:600 .85rem Georgia,serif;cursor:pointer;transition:background .2s}
.langs button[aria-pressed=true]{background:#fff;color:var(--hero-a)}
h1{margin:0;font-size:1.9rem;line-height:1.15;font-weight:700}
.hero p{margin:8px 0 0;opacity:.85}
.body{margin-top:-28px;padding-bottom:56px}
section{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);padding:16px;margin-bottom:14px}
h2{margin:0 0 12px;font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:10px;color:var(--muted)}
h2 i{font-style:normal;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.seg{display:flex;background:var(--bg);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;min-height:48px;border:0;border-radius:9px;background:transparent;color:var(--fg);font:600 1rem "League Spartan",sans-serif;cursor:pointer;transition:background .2s,color .2s}
.seg button[aria-pressed=true]{background:var(--card);box-shadow:0 1px 4px rgba(15,23,42,.18);color:var(--accent)}
.models{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.model{min-height:72px;padding:12px 14px;line-height:1.2;border:1.5px solid var(--border);border-radius:14px;background:var(--card);color:var(--fg);font:700 1.2rem Georgia,serif;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.model:active{transform:scale(.98)}
.model[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.guide{display:flex;align-items:center;gap:14px;min-height:72px;padding:14px;border-radius:14px;background:var(--accent);color:var(--on-accent);text-decoration:none;transition:filter .2s,transform .15s}
.guide:hover{filter:brightness(1.08)}
.guide:active{transform:scale(.985)}
.guide .ic{flex:none;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.2);display:grid;place-items:center}
.guide svg{width:24px;height:24px;stroke:currentColor}
.guide b{display:block;font:600 1.05rem/1.25 Georgia,serif}
.guide div span{font-size:.85rem;opacity:.85}
.guide .go{margin-left:auto;flex:none}
.guide+.guide{margin-top:10px}
.empty,.hint{color:var(--muted);margin:0;padding:14px;border:1.5px dashed var(--border);border-radius:14px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}