:root{
  color-scheme:light;
  --bg:#ecf2f8; --panel:#fff; --ink:#1b1b1b; --muted:#56606d;
  --line:#d3deea; --accent:#145ba6; --on-accent:#fff; --accent-soft:#dce8f5;
  --logo:#1d65af; --footer:#145ba6; --footer-ink:#fff;
  --warn:#92400e; --warn-bg:#fef3c7;
  --cm-orange:#e08538; --cm-orange-edge:#9e4f10; --cm-on-orange:#212121;
  --cm-orange-soft:#ffe6d9; --cm-orange-soft-hover:#ffdbc8;
  --ok:#1f6e3a; --ok-bg:#e3f2e7; --no:#9b1c1c; --no-bg:#fde8e8;
  --shadow:0 1px 2px rgba(15,23,42,.1),0 4px 14px rgba(15,23,42,.07);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;display:flex;flex-direction:column}
header{background:var(--panel);border-bottom:1px solid var(--line);padding:.75rem 1rem;display:flex;gap:.75rem;align-items:center;position:sticky;top:0;z-index:1}
header h1{font-size:1rem;margin:0;font-weight:650}
#logoLink{display:block;flex:none;line-height:0;border-radius:4px}
#logoLink:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#logo{display:block;height:30px;width:auto;flex:none}
#logo path{fill:var(--logo);fill-rule:evenodd;clip-rule:evenodd}
main{width:100%;max-width:820px;margin:0 auto;padding:1rem;flex:1 0 auto}
.draft{font-size:.85rem;color:var(--warn);background:var(--warn-bg);border-radius:.5rem;padding:.5rem .8rem;margin:0 0 1rem}
.intro h2{font-size:1.5rem;line-height:1.25;margin:.5rem 0 .3rem}
.intro p{color:var(--muted);margin:0 0 1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:.6rem;box-shadow:var(--shadow);padding:1.25rem 1.1rem}
.card.cm{border-left:5px solid var(--cm-orange)}
.top{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.8rem;min-height:1.6rem}
.back{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:.5rem;padding:.25rem .7rem;font:inherit;font-size:.9rem;cursor:pointer}
.back:hover{color:var(--ink);border-color:var(--muted)}
.dots{display:flex;gap:.35rem}
.dots i{width:.5rem;height:.5rem;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--accent)}
.card h3{font-size:1.25rem;line-height:1.3;margin:0 0 .3rem}
.sub{color:var(--muted);margin:0 0 1rem;font-size:.9rem;min-height:.2rem}
.choices{display:grid;gap:.6rem}
.choice{display:block;width:100%;text-align:left;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:.5rem;padding:.75rem .9rem;font:inherit;cursor:pointer}
.choice:hover,.choice:focus-visible{background:var(--accent-soft);border-color:var(--accent);outline:none}
.choice b{display:block;font-size:1rem;font-weight:600}
.choice span{display:block;color:var(--muted);font-size:.85rem;margin-top:.1rem}
.choice.pic{display:flex;align-items:center;gap:.8rem}
.choice.pic img{width:56px;height:56px;object-fit:contain;flex:none}
.ident{margin:.2rem 0 0;padding-left:1.2rem;color:var(--ink)}
.ident li{margin:.3rem 0}
.ident img{display:block;max-width:220px;height:auto;margin:.4rem 0 .2rem}
.ident .cap{display:block;color:var(--muted);font-size:.85rem}
.badge{display:inline-block;font-size:.8rem;font-weight:700;border-radius:.35rem;padding:.15rem .55rem;margin-bottom:.5rem}
.badge.ok{color:var(--ok);background:var(--ok-bg)} .badge.no{color:var(--no);background:var(--no-bg)}
.result p{margin:.6rem 0}
.result ul{margin:.5rem 0;padding-left:1.2rem}
.result a{color:var(--accent)}
.prod{display:block;width:100%;max-width:320px;height:auto;margin:.2rem 0 .6rem}
.alt{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.95rem}
.cmlogo{display:block;height:44px;width:auto;margin:.2rem 0 .6rem}
.btns{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.5rem}
.btn{display:inline-block;text-decoration:none;background:var(--panel);color:var(--accent);font-weight:600;border:1px solid var(--accent);border-radius:.5rem;padding:.55rem 1rem;font-size:15px;font-family:inherit;cursor:pointer}
.btn:hover{background:var(--accent-soft)}
.btn.cm{background:var(--cm-orange-soft);color:var(--cm-on-orange);border:1px solid var(--cm-orange-edge);font-weight:700;padding:.55rem 1rem}
.btn.cm:hover{background:var(--cm-orange-soft-hover);filter:none}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.result a.btn{color:var(--accent)}
.result a.btn.cm{color:var(--cm-on-orange)}
.btn.guide{background:var(--cm-orange-soft);color:var(--cm-on-orange);border:1px solid var(--cm-orange-edge);font-weight:700;padding:.55rem 1rem}
.btn.guide:hover{background:var(--cm-orange-soft-hover);filter:none}
.result a.btn.guide{color:var(--cm-on-orange)}
.box{border-radius:.5rem;padding:.7rem .85rem;margin-top:1rem;font-size:.9rem}
.box.warn{background:var(--warn-bg)} .box.info{background:var(--accent-soft)}
details{margin-top:1rem;border-top:1px solid var(--line);padding-top:.8rem;font-size:.9rem}
summary{cursor:pointer;font-weight:600;color:var(--accent)}
details ul{padding-left:1.2rem;margin:.5rem 0}
.restart{background:none;border:0;color:var(--muted);font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer;margin-top:1rem;padding:0}
.restart:hover{color:var(--ink)}
.foot{margin:1rem 0 0;font-size:.85rem;color:var(--muted)}
.foot a{color:var(--accent)}
#footer{background:var(--footer);color:var(--footer-ink);padding:1rem;font-size:.82rem;margin-top:2rem;display:flex;align-items:center;gap:1rem}
#footer nav{max-width:820px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;flex:1 1 auto;min-width:0}
.footer-egg{flex:none;color:var(--footer);font-size:.4rem}
#footer a{color:inherit;text-decoration:none}
#footer a:hover{text-decoration:underline}