:root{
  --bg:#070a12;--panel:#0c121d;--panel-2:#121b2a;--line:#1d2b3e;--line-2:#2a3d57;
  --text:#d9e3ef;--muted:#8697ad;--dim:#5b6c84;
  --dopa:#00ff88;--dead:#ff3355;--dat:#aa55ff;--comt:#ff8833;--vmat:#3388dd;--d2:#ffcc00;--active:#00e5ff;
  --caff:#d2691e;--exer:#3cb371;--sleep:#8e6fd1;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
body{background:radial-gradient(1100px 600px at 35% -10%,#0f1a2c 0%,var(--bg) 60%) fixed;color:var(--text);font-family:'Segoe UI',system-ui,-apple-system,'Noto Sans','Noto Sans CJK SC','Noto Sans Arabic',sans-serif;min-height:100vh;overflow-x:hidden}
.page{width:min(100% - 24px,1380px);margin:0 auto;padding-bottom:20px}

/* ── Header ── */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0 10px}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit;min-width:0}
.logo{width:64px;height:64px;flex-shrink:0;filter:drop-shadow(0 0 12px rgba(0,255,136,.35))}
.logo svg{width:100%;height:100%;display:block}
.brand-text{min-width:0}
h1{font-size:clamp(1.55rem,2.6vw,2.35rem);line-height:1.08;font-weight:800;letter-spacing:-.015em;background:linear-gradient(90deg,#f4f8fc 0%,#bfe3ff 55%,#7fffc8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:2px}
.sub{margin-top:6px;color:var(--muted);font-size:.9rem;line-height:1.35;max-width:70ch}

/* ── Strumenti nell'header: modalità ragazzi e lingua ── */
.tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
.kid-btn{display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:10px;border:1px solid var(--line-2);background:rgba(18,27,42,.85);color:var(--muted);font-weight:700;font-size:.78rem;font-family:inherit;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.kid-btn:hover{border-color:rgba(127,255,200,.5);color:var(--text)}
.kid-btn[aria-pressed=true]{background:rgba(127,255,200,.14);border-color:rgba(127,255,200,.6);color:#7fffc8}
.kid-btn .ki{font-size:1rem;line-height:1}
/* Levetta dentro il pulsante delle ricompense facili: è un interruttore, non una dose (si clicca comunque tutto il pulsante) */
.pu .sw{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);width:34px;height:18px;border-radius:9px;background:#1b2a3c;border:1px solid var(--line-2);pointer-events:none;transition:background .2s,border-color .2s}
.pu .sw .knob{position:absolute;top:2px;inset-inline-start:2px;width:12px;height:12px;border-radius:50%;background:#8697ad;transition:inset-inline-start .2s,background .2s}
.pu.on .sw{background:rgba(158,203,255,.35);border-color:rgba(158,203,255,.7)}
.pu.on .sw .knob{inset-inline-start:18px;background:#9ecbff;box-shadow:0 0 8px rgba(158,203,255,.8)}
#btn-scroll .in{padding-inline-end:46px}
/* Icona della cannabis: una foglia palmata vera al posto dell'emoji generica (che resta nel testo, invisibile) */
#btn-can .in i{color:transparent;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20transform='translate(12%2021)'%20fill='%237fd66a'%20stroke='%233f8f3a'%20stroke-width='.5'%20stroke-linejoin='round'%3E%3Cpath%20d='M0%200C1.7%20-3.0%201.7%20-7.8%200%20-10C-1.7%20-7.8%20-1.7%20-3.0%200%200Z'%20transform='rotate(-72)'/%3E%3Cpath%20d='M0%200C2.4%20-4.2%202.4%20-10.9%200%20-14C-2.4%20-10.9%20-2.4%20-4.2%200%200Z'%20transform='rotate(-48)'/%3E%3Cpath%20d='M0%200C2.9%20-5.1%202.9%20-13.3%200%20-17C-2.9%20-13.3%20-2.9%20-5.1%200%200Z'%20transform='rotate(-24)'/%3E%3Cpath%20d='M0%200C3.2%20-5.7%203.2%20-14.8%200%20-19C-3.2%20-14.8%20-3.2%20-5.7%200%200Z'%20transform='rotate(0)'/%3E%3Cpath%20d='M0%200C2.9%20-5.1%202.9%20-13.3%200%20-17C-2.9%20-13.3%20-2.9%20-5.1%200%200Z'%20transform='rotate(24)'/%3E%3Cpath%20d='M0%200C2.4%20-4.2%202.4%20-10.9%200%20-14C-2.4%20-10.9%20-2.4%20-4.2%200%200Z'%20transform='rotate(48)'/%3E%3Cpath%20d='M0%200C1.7%20-3.0%201.7%20-7.8%200%20-10C-1.7%20-7.8%20-1.7%20-3.0%200%200Z'%20transform='rotate(72)'/%3E%3C/g%3E%3Cpath%20d='M12%2021v3'%20stroke='%233f8f3a'%20stroke-width='1.2'%20stroke-linecap='round'/%3E%3C/svg%3E") center/1.5em no-repeat}
/* modalità ragazzi: via le sostanze */
body.kid #btn-nic,body.kid #btn-can,body.kid #btn-alc,body.kid #btn-coc{display:none}
/* Vista semplificata: via la pagina per biologi, le voci di legenda delle cose non disegnate e i pezzi avanzati dei testi */
body.simple .tabs [data-page=bio],body.simple .leg[data-tip=comt],body.simple .leg[data-tip=vmat2],body.simple .leg[data-tip=maob]{display:none}
body.simple .adv,body.simple adv{display:none}
#simple-btn[aria-pressed=true]{background:rgba(158,203,255,.14);border-color:rgba(158,203,255,.6);color:#9ecbff}
.lang{position:relative;flex-shrink:0}
.lang-btn{display:flex;align-items:center;gap:8px;padding:7px 10px 7px 8px;border-radius:10px;border:1px solid var(--line-2);background:rgba(18,27,42,.85);color:var(--text);font-weight:700;font-size:.78rem;font-family:inherit;letter-spacing:.5px;cursor:pointer;transition:border-color .2s}
.lang-btn:hover,.lang-btn[aria-expanded=true]{border-color:rgba(0,229,255,.5)}
.lang-btn .chev{color:var(--muted);font-size:.95rem;line-height:1;margin-top:-5px}
.flag{width:22px;height:15px;border-radius:2.5px;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.lang-menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:190px;max-height:min(60vh,440px);overflow:auto;background:rgba(10,16,28,.98);border:1px solid var(--line-2);border-radius:12px;padding:6px;list-style:none;z-index:40;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.lang-menu li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:.86rem;color:#d3dde9}
.lang-menu li:hover{background:rgba(0,229,255,.08)}
.lang-menu li.is-on{color:var(--active);background:rgba(0,229,255,.06)}

/* ── Layout ── */
#app{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:18px;align-items:start}
#stage{min-width:0;display:flex;flex-direction:column;gap:10px}
#canvas-wrap{position:relative;width:100%;aspect-ratio:3/2;max-height:74vh;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 70px rgba(0,229,255,.05)}
canvas{display:block;width:100%;height:100%;background:#080c14}
#btn-pause{position:absolute;top:10px;inset-inline-end:10px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(10,16,28,.6);color:#c8d6e5;cursor:pointer;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:0;transition:all .2s}
#btn-pause:hover{border-color:rgba(0,229,255,.5);color:var(--active)}
#btn-pause svg{width:14px;height:14px;fill:currentColor;display:block}
#btn-pause .ic-play{display:none;margin-left:2px}
#btn-pause.paused .ic-pause{display:none}
#btn-pause.paused .ic-play{display:block}

/* ── Toast di stato sotto il canvas ── */
#toasts{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.toast{--tc:#8fa3bb;--tc-glow:rgba(143,163,187,.35);position:relative;overflow:hidden;flex:1 1 240px;min-width:200px;border-radius:12px;border:1px solid;padding:9px 12px 10px;padding-inline-start:15px;animation:tin .28s ease-out;transition:border-color .3s,background .3s}
.toast[data-key=mode]{flex:1.7 1 300px}
.toast::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--tc);box-shadow:0 0 10px var(--tc)}
.toast.out{animation:tout .22s ease-in forwards}
/* Titolo del toast: icona e titolo restano sempre sulla stessa riga; se manca spazio va a capo il sottotitolo ("acceso da…") */
.toast .tt{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 8px;font-size:.82rem;font-weight:800;letter-spacing:.3px;color:var(--tc);margin-bottom:5px;text-shadow:0 0 12px var(--tc-glow)}
.toast .tt .tt-t{white-space:nowrap}
.toast .tt small{font-weight:700;font-size:.74rem;opacity:.85;font-variant-numeric:tabular-nums;white-space:nowrap;margin-inline-start:auto}
.tb{font-size:.8rem;line-height:1.45;color:#c3cfdd}
.tb p+p{margin-top:5px}
.tb b{color:#eef4fb;font-weight:700}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes tout{to{opacity:0;transform:translateY(6px)}}

/* ── Tooltip ── */
#tip{--tc:#8fa3bb;--tc-glow:rgba(143,163,187,.35);position:fixed;left:0;top:0;z-index:50;max-width:330px;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;border-radius:11px;border:1px solid;padding:9px 12px 10px;padding-inline-start:14px;background:rgba(9,14,24,.96);box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 24px var(--tc-glow);backdrop-filter:blur(8px)}
#tip::before{content:'';position:absolute;inset-inline-start:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--tc);box-shadow:0 0 8px var(--tc)}
#tip.show{opacity:1;transform:none}
#tip .tt{font-size:.8rem;font-weight:800;color:var(--tc);margin-bottom:4px;letter-spacing:.3px;text-shadow:0 0 12px var(--tc-glow)}
#tip .tb{font-size:.78rem}
[data-tip]{cursor:help}
button[data-tip],.seg button[data-tip]{cursor:pointer}

/* parole chiave colorate nei testi */
i[class^="c-"]{font-style:normal;font-weight:700}
.c-dopa{color:#00ff88}.c-dead{color:#ff5c7a}.c-dat{color:#c98cff}.c-comt{color:#ffa060}.c-vmat{color:#7ab8ff}.c-d2{color:#ffd54a}.c-act{color:#ffe27a}.c-fire{color:#00e5ff}.c-adhd{color:#ff9d55}.c-caff{color:#f0a060}.c-mph{color:#ff7fbf}.c-exer{color:#5fd68f}.c-sleep{color:#b39cf0}.c-scroll{color:#9ecbff}.c-tol{color:#aab8cc}

/* ── Sidebar ── */
#sidebar{display:flex;flex-direction:column;gap:12px;min-width:0}
.card{background:rgba(12,18,29,.75);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.card h2{font-size:.7rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--dim);font-weight:700}
.seg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{flex:1;padding:7px 0;border:0;background:transparent;color:var(--muted);font-weight:700;font-size:.85rem;font-family:inherit;border-radius:8px;cursor:pointer;transition:all .2s}
.seg button.adhd.is-on{background:rgba(255,136,51,.18);color:#ff9d55;box-shadow:inset 0 0 0 1px rgba(255,136,51,.4)}
.seg button.norm.is-on{background:rgba(0,229,255,.13);color:var(--active);box-shadow:inset 0 0 0 1px rgba(0,229,255,.4)}
.ctrl{display:flex;flex-direction:column;gap:6px}
.ctrl .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.78rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.8px}
.ctrl .lbl small{text-transform:none;letter-spacing:0;font-weight:400;color:var(--dim);font-size:.72rem}
.ctrl .val{font-size:.95rem;font-weight:700;color:#e2ebf5;font-variant-numeric:tabular-nums}
.acts{display:none;flex-wrap:wrap;gap:5px;margin-top:4px}
body.kid .acts{display:flex}
.acts button{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:4px 9px;border:1px solid var(--line-2);border-radius:999px;background:var(--panel-2);color:var(--muted);font-family:inherit;font-weight:600;font-size:.76rem;line-height:1.25;white-space:nowrap;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.acts button i{font-style:normal;font-size:.95rem;line-height:1}
.acts button:hover{border-color:rgba(0,255,136,.45);color:#fff}
.acts button.is-on{background:rgba(0,255,136,.12);border-color:rgba(0,255,136,.6);color:var(--dopa)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;outline:none;--pct:10%;--accent:var(--dopa);background:linear-gradient(90deg,var(--accent) var(--pct),#1b2a3c var(--pct));cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid #0b1220;box-shadow:0 0 10px var(--accent);cursor:pointer}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid #0b1220;cursor:pointer}
#speed{--accent:var(--active)}
.pu{position:relative;overflow:hidden;width:100%;padding:6px 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel-2);color:#c9d6e5;font-weight:600;font-size:.85rem;font-family:inherit;cursor:pointer;text-align:start;transition:border-color .2s,color .2s}
.pu:hover{border-color:rgba(0,229,255,.45);color:#fff}
.pu .fill{position:absolute;inset:0;width:0;border-radius:9px;transition:width .15s linear;pointer-events:none}
.pu .fill.caff{background:rgba(210,105,30,.28)}.pu .fill.mph{background:rgba(255,95,168,.26)}.pu .fill.exer{background:rgba(60,179,113,.28)}.pu .fill.sleep{background:rgba(142,111,209,.3)}
.pu .fill.scroll{background:rgba(158,203,255,.22);animation:scrollpulse 1.2s ease-in-out infinite}
.pu .fill.nic{background:rgba(212,180,106,.28)}.pu .fill.can{background:rgba(155,227,111,.26)}.pu .fill.alc{background:rgba(201,111,143,.28)}.pu .fill.coc{background:rgba(223,233,255,.22)}
@keyframes scrollpulse{0%,100%{opacity:.7}50%{opacity:1}}
/* quota di debito di sonno mascherata dalla caffeina: tratteggio arancio sul viola */
.pu .fill.sleep-mask{inset-inline-start:0;width:0;border-radius:0 9px 9px 0;background:repeating-linear-gradient(135deg,rgba(240,160,96,.5) 0 5px,rgba(142,111,209,.16) 5px 10px);transition:inset-inline-start .15s linear,width .15s linear}
.pu .in{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:1px;align-items:center;min-width:0}
.pu .in i{grid-row:1/3;font-style:normal;font-size:1.45rem;line-height:1;width:1.5em;text-align:center}
.pu .in span,.pu .in small{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start}
.pu .in span{align-self:end}
.pu .in small{align-self:start;color:var(--dim);font-weight:500;font-size:.7rem;line-height:1.2}
.meter{position:relative;height:32px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel-2);overflow:hidden}
.meter .fill{position:absolute;inset:0;width:100%;background:linear-gradient(90deg,rgba(0,204,102,.45),rgba(0,255,136,.25));transition:width .2s linear}
.meter .in{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:.8rem;font-weight:600;color:#c9d6e5}
.meter .in b{font-variant-numeric:tabular-nums;color:#e9fff3}
/* barra dei recettori D2: riempimento giallo e tacca di base (cervello × età) */
.meter.d2 .fill{width:0;background:linear-gradient(90deg,rgba(255,204,0,.42),rgba(255,204,0,.22))}
.meter.d2 .in b{color:#fff1b8}
.meter .mark{position:absolute;top:0;bottom:0;width:2px;inset-inline-start:0;background:var(--d2);box-shadow:0 0 7px rgba(255,204,0,.85);pointer-events:none;transition:inset-inline-start .2s linear}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px}
.leg{display:flex;align-items:center;gap:7px;font-size:.76rem;color:#a6b6c9}
.dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}
.gl-dat{width:9px;height:13px;border-radius:3px;background:#2a1650;border:1.5px solid var(--dat);flex-shrink:0}
.gl-vmat{width:12px;height:10px;border-radius:3px;border:1.5px dashed var(--vmat);flex-shrink:0}
.gl-mao{width:14px;height:9px;border-radius:5px;border:1.5px solid var(--dead);background:rgba(255,51,85,.15);flex-shrink:0}
.gl-d2{width:11px;height:11px;border-radius:50%;border:2px solid var(--d2);border-left-color:transparent;flex-shrink:0}
.gl-comt{width:11px;height:11px;border-radius:50%;background:conic-gradient(from 200deg,transparent 0 60deg,var(--comt) 60deg 360deg);flex-shrink:0}

/* ── Footer ── */
footer.credits{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;padding:18px 0 6px;font-size:.78rem;color:var(--dim)}
footer.credits a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:1px;transition:color .2s,border-color .2s}
footer.credits .fi{width:14px;height:14px;fill:currentColor;flex-shrink:0}
footer.credits .fi.heart{fill:#ff5c7a}
footer.credits a:hover{color:var(--active);border-color:var(--active)}
footer.credits .sep{color:var(--line-2)}
footer.credits .brand-name{color:var(--muted);font-weight:700;letter-spacing:.2px}
footer.credits .brand-name small{font-weight:600;color:var(--dim);margin-inline-start:2px}

@media(max-width:960px){#app{grid-template-columns:1fr}#sidebar{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
@media(max-width:600px){.top{flex-direction:column;align-items:stretch;gap:10px}.tools{align-self:flex-end}.logo{width:52px;height:52px}}

/* ── Pagine (schede sotto il titolo) ── */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{display:flex;align-items:center;gap:7px;padding:9px 14px 10px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--muted);font-family:inherit;font-weight:700;font-size:.86rem;letter-spacing:.2px;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s;border-radius:8px 8px 0 0}
.tabs button:hover{color:var(--text);background:rgba(255,255,255,.03)}
.tabs button[aria-selected=true]{color:var(--active);border-bottom-color:var(--active)}
.tabs .ti{font-size:.95rem;line-height:1}
.pg[hidden]{display:none}
/* Avviso: i valori sono indicativi */
.notice{display:flex;align-items:flex-start;gap:9px;margin-bottom:12px;padding:8px 12px;border-radius:10px;border:1px solid rgba(0,229,255,.18);background:rgba(0,229,255,.05);font-size:.78rem;line-height:1.4;color:var(--muted)}
.notice .ni{flex-shrink:0;font-size:.9rem;line-height:1.3}
.notice b{color:#d9e3ef}
.notice a,.doc a{color:var(--active);text-decoration:none;border-bottom:1px solid rgba(0,229,255,.35);cursor:pointer}
.notice a:hover,.doc a:hover{border-bottom-color:var(--active)}
/* Pagine di testo */
.doc{max-width:880px;margin:0 auto;padding:6px 4px 20px;font-size:.93rem;line-height:1.6;color:#c3cfdd}
.doc .lead{font-size:1.02rem;color:var(--text);margin-bottom:18px}
.doc section{margin-bottom:22px;padding:14px 18px 6px;border-radius:14px;border:1px solid var(--line);background:rgba(12,18,29,.6)}
.doc h2{font-size:1.05rem;font-weight:800;color:#eef4fb;margin-bottom:8px;letter-spacing:-.005em}
.doc h2 .ti{margin-inline-end:8px}
.doc p,.doc ul,.doc ol{margin-bottom:10px}
.doc ul,.doc ol{padding-inline-start:20px}
.doc li{margin-bottom:4px}
.doc b{color:#eef4fb;font-weight:700}
.doc .tw{overflow-x:auto;margin-bottom:12px;border-radius:10px;border:1px solid var(--line)}
.doc table{border-collapse:collapse;width:100%;font-size:.82rem;line-height:1.45;min-width:560px}
.doc th,.doc td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;text-align:start}
.doc th{background:rgba(255,255,255,.04);color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.8px;font-weight:700}
.doc tr:last-child td{border-bottom:0}
.doc td:first-child{color:#eef4fb;font-weight:700;white-space:nowrap}
.doc .refs{font-size:.8rem;color:var(--muted)}
.doc .refs li{margin-bottom:3px}
.doc .fid{font-family:ui-monospace,Consolas,monospace;letter-spacing:1px;color:var(--d2);white-space:nowrap}
.doc .fig{margin:6px 0 12px;padding:10px 8px;border-radius:12px;background:rgba(7,10,18,.55);border:1px solid var(--line);overflow-x:auto}
.doc .fig .figsvg{display:block;width:100%;height:auto;margin:0 auto;font-family:inherit}
.doc .gl{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px 18px;margin:4px 0 8px}
.doc .gl div{font-size:.86rem;line-height:1.45;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.025)}
.doc .gl i[class^="c-"]{display:block;margin-bottom:1px}
.doc .steps li{margin-bottom:6px}
.doc .kp{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 10px}
.doc .kp span{padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);background:rgba(18,27,42,.8);font-size:.82rem}