*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --bg:#ffffff; --bg-sec:#f5f5f3; --bg-success:#edfbf2; --bg-info:#e6f1fb; --bg-warn:#fef9ec;
  --text:#1a1a1a; --text-sec:#666660; --text-hint:#999994;
  --text-success:#1a7a3c; --text-info:#185fa5; --text-warn:#b45309;
  --border:rgba(0,0,0,0.10); --border-success:rgba(26,122,60,0.25); --border-info:rgba(24,95,165,0.25);
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
body { font-family:var(--font); background:#f0ede6; color:var(--text); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; }
.page { max-width:680px; width:100%; background:var(--bg); border-radius:16px; border:0.5px solid var(--border); padding:2.5rem; }
.dots { display:flex; gap:6px; justify-content:center; margin-bottom:1.5rem; flex-wrap:wrap; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--border); transition:background .3s,transform .2s; }
.dot.active { background:#185fa5; transform:scale(1.3); }
.dot.done { background:#1a7a3c; }
#stage { min-height:400px; display:flex; align-items:center; justify-content:center; }
.btn-row { display:flex; gap:10px; justify-content:center; margin-top:1.5rem; }
.btn { padding:9px 24px; border-radius:8px; font-size:13px; font-family:var(--font); cursor:pointer; }
.btn-sec { border:0.5px solid rgba(0,0,0,.18); background:var(--bg-sec); color:var(--text-sec); }
.btn-pri { border:0.5px solid var(--border-info); background:var(--bg-info); color:var(--text-info); font-weight:500; }
.btn:disabled { opacity:.3; cursor:default; }
.step-label { text-align:center; font-size:12px; color:var(--text-hint); margin-top:10px; }
.slide { display:flex; flex-direction:column; align-items:center; gap:18px; padding:0.5rem 0; width:100%; }
.card { background:var(--bg-sec); border-radius:10px; padding:0.9rem 1.4rem; text-align:center; max-width:400px; width:100%; }
.card-green { background:var(--bg-success); border:0.5px solid var(--border-success); }
.card-blue { background:var(--bg-info); border:0.5px solid var(--border-info); }
.title { font-size:20px; font-weight:500; color:var(--text); text-align:center; }
.desc { font-size:13px; color:var(--text-sec); text-align:center; max-width:520px; line-height:1.65; }
.card-warn { background:var(--bg-warn); border:0.5px solid rgba(180,83,9,0.25); }
.feature-list { display:flex; flex-direction:column; gap:12px; max-width:520px; width:100%; }
.feature-item { display:flex; gap:12px; align-items:flex-start; }
.feature-icon { width:34px; height:34px; border-radius:50%; background:var(--bg-info); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px; }
.feature-item h3 { font-size:14px; font-weight:500; margin-bottom:2px; }
.feature-item p { font-size:13px; color:var(--text-sec); line-height:1.55; }
.stat-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.stat-box { text-align:center; padding:0.8rem 1rem; border-radius:10px; background:var(--bg-sec); border:0.5px solid var(--border); min-width:100px; }
.stat-box .val { font-size:20px; font-weight:500; color:var(--text); margin-bottom:3px; }
.stat-box .val.blue { color:var(--text-info); }
.stat-box .val.green { color:var(--text-success); }
.stat-box .lbl { font-size:11px; color:var(--text-hint); }
.mod-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:520px; width:100%; }
.mod-card { background:var(--bg-sec); border:0.5px solid var(--border); border-radius:10px; padding:0.85rem; text-align:center; }
.mod-card .icon { font-size:24px; margin-bottom:4px; }
.mod-card .name { font-size:12px; font-weight:500; }
.mod-card .hint { font-size:10px; color:var(--text-hint); margin-top:3px; line-height:1.4; }
.flow { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; max-width:520px; }
.flow-step { background:var(--bg-sec); border:0.5px solid var(--border); border-radius:8px; padding:6px 10px; font-size:11px; color:var(--text-sec); }
.flow-arrow { color:var(--text-hint); font-size:14px; }
.src-table { width:100%; max-width:520px; font-size:12px; border-collapse:collapse; }
.src-table th, .src-table td { padding:7px 10px; text-align:left; border-bottom:0.5px solid var(--border); }
.src-table th { font-size:10px; color:var(--text-hint); text-transform:uppercase; letter-spacing:.05em; font-weight:500; }
.mock-dark { background:#0f1923; border-radius:10px; padding:1rem; width:100%; max-width:520px; }
.mock-bar { display:flex; gap:6px; margin-bottom:10px; }
.mock-dot { width:9px; height:9px; border-radius:50%; }
.mock-row { display:flex; gap:6px; align-items:center; padding:6px 0; border-top:0.5px solid rgba(255,255,255,.08); font-size:11px; color:#cbd5e1; }
.pill-ok { background:rgba(34,197,94,.15); color:#4ade80; border-radius:5px; padding:2px 7px; font-size:10px; }
.pill-warn { background:rgba(251,191,36,.15); color:#fbbf24; border-radius:5px; padding:2px 7px; font-size:10px; }
.link-list { display:flex; flex-direction:column; gap:8px; max-width:520px; width:100%; }
.link-item { display:flex; justify-content:space-between; gap:10px; align-items:center; background:var(--bg-sec); border-radius:8px; padding:8px 12px; font-size:12px; }
.link-item a { color:var(--text-info); text-decoration:none; word-break:break-all; }
.link-item a:hover { text-decoration:underline; }
.emoji-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.emoji-slice { display:flex; flex-direction:column; align-items:center; gap:4px; }
.slice-label { font-size:11px; color:var(--text-sec); font-weight:500; }
.slice-hint { font-size:10px; color:var(--text-hint); }
.bite-row { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; align-items:flex-end; }
.bite-item { display:flex; flex-direction:column; align-items:center; gap:3px; }
.bite-label { font-size:10px; color:var(--text-hint); }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
@keyframes pop { 0%{transform:scale(0.4);opacity:0} 60%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
@keyframes fadeup { 0%{opacity:0;transform:translateY(10px)} 100%{opacity:1;transform:translateY(0)} }
.anim-pop { animation:pop .4s ease-out both; }
.anim-fadeup { animation:fadeup .4s ease-out both; }