:root{color-scheme:light;--bg:#f6f7fb;--surface:#fff;--ink:#18243e;--ink2:#43516d;--muted:#70809c;--stroke:#e2e8f1;--navy:#1b2a50;--blue:#345de6;--blueTint:#edf1ff;--red:#b93847;--redTint:#fff0f1;--green:#167858;--greenTint:#ebf9f3;--shadow:0 24px 75px rgba(33,54,100,.08)}
*{box-sizing:border-box}html{height:100%}body{margin:0;min-height:100%;background:radial-gradient(1000px 550px at 90% 0%,#eef2ff,transparent 75%),var(--bg);color:var(--ink);font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #8da7ff;outline-offset:2px}
.progress-track{height:4px;position:fixed;top:0;left:0;right:0;background:transparent;z-index:60}.progress-fill{height:100%;width:0;background:var(--blue);transition:width .2s}
.topbar{height:72px;display:flex;gap:17px;align-items:center;border-bottom:1px solid var(--stroke);padding:0 clamp(18px,4.2vw,70px);background:rgba(255,255,255,.86);backdrop-filter:blur(12px)}
.logo{font-weight:850;letter-spacing:.045em;font-size:15px;white-space:nowrap}.logo span:last-child{color:var(--blue)}.logo-mark{background:var(--blue);color:#fff;border-radius:8px;margin-right:8px;padding:6px 10px}.top-subtitle{font-size:13px;color:var(--muted);border-left:1px solid var(--stroke);padding-left:16px}.position{margin-left:auto;font-size:12px;background:var(--blueTint);color:var(--blue);padding:6px 12px;border-radius:20px;font-weight:700;white-space:nowrap}
.icon-btn{border:1px solid var(--stroke);background:#fff;color:var(--ink);border-radius:9px;width:37px;height:37px;display:grid;place-items:center}
.stage{max-width:1250px;width:100%;padding:clamp(20px,3.7vw,52px) clamp(20px,4vw,54px) 25px;margin:0 auto;min-height:calc(100vh - 152px);outline:none}
.kicker{font-size:11px;text-transform:uppercase;color:var(--blue);letter-spacing:.15em;font-weight:800;margin-bottom:11px}.h1{font-size:clamp(30px,3.4vw,51px);line-height:1.13;letter-spacing:-.05em;font-weight:850;margin:0 0 11px}.summary{font-size:clamp(14px,1.25vw,17px);color:var(--ink2);margin:0;max-width:80ch}.meta-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:17px}.tag{display:inline-flex;border-radius:7px;background:#f0f3f8;color:#52617d;padding:5px 9px;font-size:11px;font-weight:750;letter-spacing:.025em}.tag.real{background:#e6f6ed;color:#116b4e}.tag.sim{background:#fff3dd;color:#856123}.tag.red{background:var(--redTint);color:var(--red)}.tag.green{background:var(--greenTint);color:var(--green)}
.topic-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr);gap:20px;margin-top:26px}.card{border:1px solid var(--stroke);background:var(--surface);border-radius:17px;box-shadow:var(--shadow)}.lab-card{padding:24px}.info-card{padding:23px;align-self:start}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}.section-head h2{margin:0;font-size:17px;letter-spacing:-.018em}.mode-switch{display:flex;gap:3px;background:#f2f4fa;border-radius:9px;padding:4px;border:1px solid var(--stroke)}.mode-btn{font-size:12px;font-weight:750;border:0;background:transparent;padding:9px 13px;border-radius:7px;color:var(--muted)}.mode-btn.active.bad{background:var(--redTint);color:var(--red);box-shadow:0 1px 4px #00000013}.mode-btn.active.good{background:var(--greenTint);color:var(--green);box-shadow:0 1px 4px #00000013}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:14px}.label{display:block;font-size:12px;font-weight:750;color:var(--ink2);margin-bottom:7px}.field{width:100%;border:1px solid #cfd9e9;background:#fbfcff;border-radius:8px;color:var(--ink);padding:11px 12px;min-height:44px}.field:focus{border-color:var(--blue);outline:2px solid #cdd9ff}.hint{color:var(--muted);font-size:12px;margin:14px 0}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}.btn{border:1px solid var(--stroke);border-radius:9px;background:#fff;color:var(--ink);padding:10px 16px;font-size:13px;font-weight:800}.btn:hover{border-color:#b7c4e1}.btn.blue{color:#fff;background:var(--blue);border-color:var(--blue)}.btn.blue:hover{background:#254acc}.btn.ghost{background:#f6f8fd}.btn[disabled]{opacity:.55}
.output{margin-top:21px;border:1px dashed #c9d3e6;border-radius:12px;min-height:125px;padding:17px;background:#fbfcff}.output-empty{display:grid;place-items:center;text-align:center;min-height:95px;color:var(--muted);font-size:13px}.output.bad{background:#fff9f9;border-style:solid;border-color:#f5c8cc}.output.good{background:#f8fffb;border-style:solid;border-color:#bce4ce}.output h3{font-size:16px;margin:8px 0 6px}.output p{margin:0;font-size:13px;color:var(--ink2)}.output ul{margin:10px 0 8px;padding-left:22px;color:var(--ink2);font-size:13px}.output li{overflow-wrap:anywhere}.status{font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}.status.bad{color:var(--red)}.status.good{color:var(--green)}.frame{width:100%;height:132px;border:1px solid var(--stroke);background:#fff;border-radius:8px;margin:12px 0}
.info-section+.info-section{border-top:1px solid var(--stroke);margin-top:17px;padding-top:18px}.info-section h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 7px;color:var(--muted)}.info-section p{margin:0;color:var(--ink2);font-size:13px}.info-section.danger h3{color:var(--red)}.info-section.safe h3{color:var(--green)}.details-link{border:0;background:none;color:var(--blue);font-weight:800;margin-top:17px;padding:0;font-size:13px}.code-wrap{margin-top:16px}.code-card{border:1px solid var(--stroke);border-radius:10px;overflow:hidden;margin-top:10px;background:#111b32}.code-card .c-head{background:#22304b;color:#b8c5e1;font-size:11px;padding:9px 12px;font-weight:800}.code-card pre{overflow:auto;white-space:pre-wrap;word-break:break-word;color:#e5efff;font-size:12px;line-height:1.65;padding:12px;margin:0}.code-card.bad{border-color:#f5bac2}.code-card.good{border-color:#93d6bc}.tiny-note{font-size:11px;color:var(--muted);margin:12px 0 0}
.cover,.end{max-width:820px;margin:7vh auto 0;text-align:center}.cover .eyebrow{letter-spacing:.23em;color:var(--blue);font-size:12px;font-weight:850;text-transform:uppercase}.cover .title{font-size:clamp(48px,7vw,91px);font-weight:900;line-height:1.05;letter-spacing:-.065em;margin:20px 0}.cover .title span{color:var(--blue)}.cover p,.end p{font-size:18px;color:var(--ink2);max-width:650px;margin:0 auto 25px}.cover-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:22px 0 30px}.cover-chips .tag{font-size:12px;padding:8px 11px}.cover-start{padding:14px 26px;font-size:14px}.presenters{color:var(--muted);font-size:12px;margin-top:42px}.end .check-big{font-size:58px;color:var(--green);margin-bottom:12px}.end h2{font-size:48px;margin:0 0 15px;letter-spacing:-.05em}.end-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px auto}.end-list article{text-align:left;padding:17px;border-radius:12px;border:1px solid var(--stroke);background:#fff;font-size:13px;color:var(--ink2)}.end-list strong{display:block;color:var(--ink);font-size:14px;margin-bottom:5px}
.navigation{padding:12px clamp(18px,4.2vw,70px);min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--stroke);background:#fff}.nav-btn{padding:10px 16px;border-radius:9px;background:#fff;color:var(--ink2);border:1px solid var(--stroke);font-weight:800;font-size:13px}.nav-btn.primary{background:var(--navy);border-color:var(--navy);color:white}.keyboard-tip{color:#9aa7be;font-size:12px;text-align:center}kbd{border:1px solid var(--stroke);padding:1px 5px;border-radius:4px;background:#f6f8fb}
.drawer{position:fixed;z-index:50;top:0;bottom:0;left:0;width:min(360px,90vw);overflow:auto;background:#fff;border-right:1px solid var(--stroke);box-shadow:10px 0 60px #20345b27;padding:24px;transform:translateX(-110%);transition:transform .22s}.drawer.open{transform:translateX(0)}.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:18px;border-bottom:1px solid var(--stroke)}.drawer-cat{margin-top:20px;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.09em}.drawer-topic{padding:9px 10px;margin-top:2px;background:transparent;border:0;width:100%;text-align:left;color:var(--ink2);border-radius:7px;font-size:13px}.drawer-topic:hover,.drawer-topic.active{background:var(--blueTint);color:var(--blue);font-weight:800}.drawer-topic small{float:right;font-size:10px;opacity:.65}.scrim{position:fixed;inset:0;background:rgba(9,22,49,.35);z-index:49}
@media(max-width:970px){.topic-layout{grid-template-columns:1fr}.info-card{display:grid;grid-template-columns:repeat(2,1fr);gap:0 20px}.info-card>.info-section:nth-of-type(2){border-top:0;padding-top:0;margin-top:0}.info-card>.details-link,.info-card>.code-wrap,.info-card>.tiny-note{grid-column:1/-1}.stage{min-height:calc(100vh - 152px)}}
@media(max-width:640px){.top-subtitle,.keyboard-tip{display:none}.topbar{height:64px;gap:10px}.logo{font-size:12px}.logo-mark{margin-right:3px}.position{font-size:10px}.stage{min-height:calc(100vh - 140px)}.lab-card,.info-card{padding:18px}.info-card{display:block}.info-card>.info-section:nth-of-type(2){border-top:1px solid var(--stroke);padding-top:18px;margin-top:17px}.section-head{align-items:start}.mode-switch{width:100%}.mode-btn{flex:1}.cover{margin:5vh auto 0}.cover p,.end p{font-size:16px}.end-list{grid-template-columns:1fr}.navigation{height:75px}.nav-btn{min-width:120px}.h1{font-size:31px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}