:root{
  --bg:#02050b; --panel:rgba(4,12,22,.82); --panel2:rgba(6,16,28,.92); --line:rgba(94,231,255,.22);
  --cyan:#5ee7ff; --orange:#ff8c42; --green:#69db7c; --gold:#ffd43b; --lav:#c4b5fd; --txt:#dfeaf5; --muted:#8aa0b4;
  --font:"IBM Plex Sans","Segoe UI",system-ui,sans-serif; --head:"Rajdhani","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:var(--bg);color:var(--txt);font-family:var(--font);font-size:14px;overflow:hidden}
#app{position:fixed;inset:0}
#app canvas{display:block;cursor:grab}
h1,h2,h3,h4{font-family:var(--head);letter-spacing:.04em;margin:0}
button{font-family:var(--head);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:12px;color:var(--cyan);background:rgba(94,231,255,.08);border:1px solid var(--line);border-radius:6px;padding:6px 10px;cursor:pointer;transition:background .15s,box-shadow .15s}
button:hover{background:rgba(94,231,255,.18);box-shadow:0 0 12px rgba(94,231,255,.25)}
button:disabled{opacity:.35;cursor:default;box-shadow:none}
button.warn{color:var(--orange);border-color:rgba(255,140,66,.35);background:rgba(255,140,66,.08)}
button.warn:hover{background:rgba(255,140,66,.2)}
button.ok{color:var(--green);border-color:rgba(105,219,124,.35);background:rgba(105,219,124,.08)}
button.ok:hover{background:rgba(105,219,124,.2)}
button.primary{background:var(--cyan);color:#02131a;border-color:var(--cyan)}
kbd{font-family:var(--head);font-size:11px;padding:1px 5px;border:1px solid rgba(255,255,255,.25);border-radius:4px;background:rgba(255,255,255,.06);color:#fff}
a.chip{display:inline-block;margin:2px 4px 2px 0;padding:2px 8px;border-radius:12px;border:1px solid var(--c,var(--line));color:var(--c,var(--cyan));font-size:12px;cursor:pointer;background:rgba(255,255,255,.03)}
a.chip:hover{background:rgba(255,255,255,.1)}
.muted{color:var(--muted)}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:rgba(94,231,255,.25);border-radius:4px}

/* top bar */
#topbar{position:fixed;top:0;left:0;right:0;height:52px;display:flex;align-items:center;gap:14px;padding:0 14px;background:linear-gradient(180deg,rgba(2,5,11,.92),rgba(2,5,11,.55) 80%,transparent);z-index:20;pointer-events:none}
#topbar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand b{font-family:var(--head);font-size:20px;letter-spacing:.18em;color:var(--cyan);text-shadow:0 0 14px rgba(94,231,255,.6)}
.brand .sub{color:var(--muted);font-size:12px}
.mark{width:14px;height:14px;border:2px solid var(--cyan);transform:rotate(45deg);box-shadow:0 0 10px var(--cyan),inset 0 0 6px var(--cyan)}
.search-wrap{position:relative;flex:1;min-width:150px;max-width:460px;margin-left:auto}
@media (max-width:1500px){.brand .sub{display:none}}
#search{width:100%;padding:7px 12px;background:rgba(4,12,22,.75);border:1px solid var(--line);border-radius:6px;color:var(--txt);font-family:var(--font);font-size:13px;outline:none}
#search:focus{border-color:var(--cyan);box-shadow:0 0 10px rgba(94,231,255,.3)}
#search-results{position:absolute;top:38px;left:0;right:0;background:var(--panel2);border:1px solid var(--line);border-radius:6px;overflow:hidden;z-index:30}
#search-results div{padding:7px 12px;cursor:pointer;display:flex;gap:8px;align-items:baseline}
#search-results div span{color:var(--muted);font-size:11px}
#search-results div:hover{background:rgba(94,231,255,.12)}
#search-results .none{color:var(--muted);cursor:default}
nav{display:flex;gap:6px;align-items:center}
nav a.doc{font-family:var(--head);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:12px;color:var(--gold);background:rgba(255,212,59,.08);border:1px solid rgba(255,212,59,.3);border-radius:6px;padding:6px 10px;text-decoration:none}
nav a.doc:hover{background:rgba(255,212,59,.2)}
nav a.lang{font-family:var(--head);font-weight:700;letter-spacing:.08em;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:6px 8px;text-decoration:none}
nav a.lang:hover{color:var(--txt);border-color:var(--cyan)}

/* simulation panel */
#sim{position:fixed;left:14px;top:64px;width:270px;max-height:calc(100vh - 150px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;z-index:15;backdrop-filter:blur(6px)}
#sim h2{font-size:15px;color:var(--cyan);letter-spacing:.14em;margin-bottom:8px}
#sim h3{font-size:12px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin:12px 0 6px}
.ctl{margin:6px 0}
.ctl label{display:block;font-size:12px;color:var(--txt)}
.ctl.row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.ctl input[type=range]{width:100%;accent-color:var(--gold)}
label.check{display:flex;align-items:center;gap:6px;cursor:pointer}
select{background:rgba(4,12,22,.9);color:var(--txt);border:1px solid var(--line);border-radius:4px;padding:2px 4px;font-family:var(--font)}
.scenarios{display:flex;flex-wrap:wrap;gap:5px}
.scenarios button{font-size:11px;padding:4px 8px}
#charges .charge{display:grid;grid-template-columns:82px 1fr 14px;align-items:center;gap:8px;margin:3px 0;cursor:pointer;font-size:12px}
#charges .charge:hover span{color:#fff}
#charges .charge span{color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#charges .charge i{display:block;height:7px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden}
#charges .charge b{display:block;height:100%;width:12%;background:var(--c);box-shadow:0 0 8px var(--c);transition:width .3s}
#charges .charge em{color:var(--gold);font-style:normal;font-size:12px}
#charges .charge.hot span{text-shadow:0 0 8px var(--c)}
#log{font-size:11.5px;line-height:1.35;color:var(--muted)}
#log div{padding:3px 0;border-top:1px dashed rgba(255,255,255,.07)}
#log div.ok{color:#b8f3c2}#log div.warn{color:#ffc79a}
#log b{color:#fff}

/* inspector */
#inspector{position:fixed;right:14px;top:64px;bottom:96px;width:min(440px,calc(100vw - 28px));background:var(--panel2);border:1px solid var(--line);border-radius:10px;z-index:16;backdrop-filter:blur(8px);display:flex;flex-direction:column;box-shadow:0 0 30px rgba(0,0,0,.5)}
#inspector-close{position:absolute;right:8px;top:8px;width:28px;height:28px;padding:0;border-radius:50%;font-size:16px;z-index:2}
#inspector-body{overflow:auto;padding:16px 18px 24px;flex:1}
.insp-head{border-left:3px solid var(--c);padding-left:12px;margin-bottom:10px}
.insp-type{font-family:var(--head);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.insp-head h2{font-size:26px;color:var(--c);text-shadow:0 0 16px color-mix(in srgb,var(--c) 60%,transparent);line-height:1.05;margin:2px 0 4px}
.insp-aka{font-size:12px;color:var(--muted);font-style:italic}
.insp-plain{font-size:14.5px;line-height:1.45;margin:8px 0}
.insp-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
#inspector section{margin:14px 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
#inspector h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
#inspector p{line-height:1.5;margin:6px 0;font-size:13.5px}
#inspector ul{margin:4px 0;padding-left:18px;line-height:1.45;font-size:13px}
#inspector ul.src{font-size:12px;color:var(--muted)}
section.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bar{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:center;font-size:11.5px;color:var(--muted);margin:3px 0}
.bar i{display:block;height:8px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden}
.bar b{display:block;height:100%;border-radius:4px;box-shadow:0 0 8px currentColor;transition:width .4s}
.stage-word{font-family:var(--head);font-size:14px;color:var(--gold);margin:4px 0 8px;letter-spacing:.04em}
.remedy{position:relative;padding:8px 10px 8px 12px;margin:6px 0;border-radius:6px;background:rgba(255,255,255,.04);border-left:3px solid var(--green);font-size:13px;line-height:1.45}
.remedy span{display:block;font-family:var(--head);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:2px}
.remedy.spiritual{border-left-color:var(--gold)}.remedy.spiritual span{color:var(--gold)}
blockquote{margin:8px 0;padding:8px 12px;border-left:3px solid rgba(255,255,255,.35);background:rgba(255,255,255,.04);font-style:italic;line-height:1.45;font-size:13.5px;border-radius:0 6px 6px 0}
blockquote cite{display:block;font-style:normal;font-family:var(--head);font-size:11px;letter-spacing:.12em;color:var(--muted);margin-top:4px}
.rel{margin:5px 0;font-size:12px}
.rel>span{display:inline-block;min-width:96px;color:var(--muted);font-family:var(--head);letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.voice{display:grid;grid-template-columns:82px 1fr;gap:8px;margin:6px 0;font-size:13px;line-height:1.45}
.voice-k{font-family:var(--head);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding-top:2px}
.voice-k.evagrius{color:#ffb347}.voice-k.cassian{color:#a78bfa}.voice-k.hesychast{color:#6ee7b7}.voice-k.others{color:#f472b6}
.circles{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:13px;line-height:1.45}
.circles>div{padding:8px 10px;border-radius:6px;background:rgba(255,255,255,.04)}
.circles span{display:block;font-family:var(--head);letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:var(--muted);margin-bottom:3px}
.circles>div:first-child span{color:var(--cyan)}.circles>div:last-child span{color:var(--gold)}

/* tooltip */
#tooltip{position:fixed;z-index:25;max-width:300px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;pointer-events:none;font-size:12.5px;line-height:1.4;box-shadow:0 4px 20px rgba(0,0,0,.5)}
#tooltip b{font-family:var(--head);font-size:15px;letter-spacing:.04em}
#tooltip .tt-type{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}

/* HUD */
#hud{position:fixed;left:14px;bottom:14px;z-index:15;font-size:12px;color:var(--muted);pointer-events:none}
#hud-status{font-family:var(--head);letter-spacing:.1em;text-transform:uppercase;font-size:12px;margin-bottom:4px}
#hud-status b{color:var(--gold)}
#hud-keys kbd{margin-right:2px}
#hud-enter{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:15;background:var(--panel2);border:1px solid var(--gold);color:var(--gold);padding:6px 14px;border-radius:20px;font-family:var(--head);letter-spacing:.1em;text-transform:uppercase;font-size:12px}
#quote{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);z-index:18;max-width:640px;text-align:center;font-family:var(--head);font-size:22px;line-height:1.3;color:#fff;text-shadow:0 0 20px rgba(255,255,255,.6);padding:14px 22px;pointer-events:none}
#quote cite{display:block;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:6px;font-style:normal}
#quote.show{animation:quote 6.5s ease forwards}
@keyframes quote{0%{opacity:0;transform:translate(-50%,10px)}8%{opacity:1;transform:translate(-50%,0)}85%{opacity:1}100%{opacity:0}}

/* tour bar */
#tour-bar{position:fixed;left:300px;right:470px;bottom:22px;max-width:760px;background:var(--panel2);border:1px solid var(--gold);border-radius:10px;padding:12px 16px;z-index:17;box-shadow:0 0 30px rgba(255,212,59,.15)}
.tour-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--head);letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--gold)}
#tour-text{font-size:15px;line-height:1.5;margin:8px 0}
.tour-nav{display:flex;justify-content:flex-end;gap:6px}
#tour-exit{font-size:10px;padding:3px 8px}
#tour-bar.witness{border-color:var(--wc,#ff9fb8);box-shadow:0 0 30px color-mix(in srgb,var(--wc,#ff9fb8) 20%,transparent);max-width:860px}
#tour-bar.witness .tour-head{color:var(--wc,#ff9fb8)}
#tour-bar.witness #tour-text{max-height:min(46vh,420px);overflow:auto;display:grid;gap:8px;font-size:14px}
#tour-text .part{padding:7px 10px;border-left:3px solid var(--wc,#ff9fb8);background:color-mix(in srgb,var(--wc,#ff9fb8) 7%,transparent);border-radius:0 6px 6px 0;line-height:1.45}
#tour-text .part span{display:block;font-family:var(--head);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--wc,#ff9fb8);margin-bottom:2px}
#tour-text .part:nth-child(1 of .part) span{color:#ffd1dc}
#tour-text .framing{color:var(--muted);font-style:italic;font-size:13px;margin:0}
#tours-list button.witness,#witness-list button.witness{border-color:var(--wc);color:var(--wc)}
#witness-list{display:grid;gap:8px}
#witness-list button{text-align:left;text-transform:none;letter-spacing:0;padding:10px 14px;display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
#witness-list button span{color:var(--muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
#btn-witness{color:#ff9fb8;border-color:rgba(255,159,184,.35);background:rgba(255,159,184,.08)}
#btn-witness.on{background:#ff9fb8;color:#2a0a14}
#btn-sim.on{background:rgba(94,231,255,.18);border-color:var(--cyan);color:var(--cyan)}

/* modals */
.modal{position:fixed;inset:0;z-index:40;background:rgba(1,3,8,.6);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.modal-box{position:relative;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 60px);overflow:auto;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:22px 24px;box-shadow:0 0 40px rgba(94,231,255,.15)}
#video-ask{z-index:70}
.modal-box.wide{width:min(820px,calc(100vw - 32px))}
.modal-box h2{font-size:24px;color:var(--cyan);letter-spacing:.1em;margin-bottom:6px}
.modal-box h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:16px 0 6px}
.modal-box p,.modal-box li{line-height:1.5;font-size:13.5px}
.modal-box .x{position:absolute;right:12px;top:12px;width:30px;height:30px;padding:0;border-radius:50%;font-size:16px}
#tours-list{display:grid;gap:8px;margin-top:12px}
#tours-list button{text-align:left;text-transform:none;letter-spacing:0;padding:10px 14px;display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
#tours-list button span{color:var(--muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
#diag-list{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin:12px 0}
#diag-list label{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.35;cursor:pointer;padding:4px 6px;border-radius:6px}
#diag-list label:hover{background:rgba(255,255,255,.05)}
#diag-list input{margin-top:3px;accent-color:var(--gold)}
.diag-actions{display:flex;gap:8px;margin:8px 0 12px}
.diag-hit{border-left:3px solid var(--c);padding:8px 12px;margin:10px 0;background:rgba(255,255,255,.03);border-radius:0 8px 8px 0}
.diag-hit h4{font-size:20px;color:var(--c)}.diag-hit h4 small{font-size:12px;color:var(--muted);margin-left:8px}
.lg{display:grid;grid-template-columns:18px 190px 1fr;gap:10px;align-items:baseline;margin:5px 0;font-size:13px}
.lg i{display:inline-block;width:12px;height:12px;border-radius:50%;box-shadow:0 0 8px currentColor}
.lg i.line{height:3px;border-radius:2px;width:18px}
.lg span{color:var(--muted);font-size:12px}
.layer-list{display:grid;gap:8px;margin-top:10px}
.layer-list label{display:flex;gap:8px;align-items:center;cursor:pointer}

/* intro */
#intro{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;overflow-y:auto;background:radial-gradient(ellipse at center,rgba(6,20,36,.85),rgba(2,5,11,.97));transition:opacity .9s}
#intro.gone{opacity:0;pointer-events:none}
.intro-box{max-width:600px;text-align:center;padding:30px;margin:auto}
.intro-mark{width:44px;height:44px;margin:0 auto 18px;border:2px solid var(--cyan);transform:rotate(45deg);box-shadow:0 0 30px var(--cyan),inset 0 0 20px var(--cyan);animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(405deg)}}
#intro h1{font-size:54px;letter-spacing:.3em;color:var(--cyan);text-shadow:0 0 30px rgba(94,231,255,.8);margin-left:.3em}
.intro-sub{font-family:var(--head);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-size:13px;margin:4px 0 18px}
.intro-box p{line-height:1.6;font-size:15px;color:#cfe0ee}
.intro-stance{text-align:left;font-size:14px!important;color:#b9cddc!important;border-left:2px solid var(--gold);padding:2px 0 2px 14px;margin:14px 0 6px}
#intro-enter{font-size:16px;padding:12px 30px;margin:20px 0 14px;background:var(--cyan);color:#02131a;border-color:var(--cyan);box-shadow:0 0 30px rgba(94,231,255,.5)}
.intro-video{display:block;margin:-4px 0 14px;font-family:var(--head);font-weight:600;letter-spacing:.08em;font-size:14px;color:var(--cyan);text-decoration:none;opacity:.85}
.intro-video:hover{opacity:1;text-shadow:0 0 12px rgba(94,231,255,.6)}
.intro-hint{color:var(--muted)!important;font-size:12px!important}
.intro-langs{display:flex;gap:26px;justify-content:center;margin:22px 0 4px}
.flag{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:var(--muted);font-family:var(--head);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:11px;opacity:.5;transition:opacity .2s,transform .2s}
.flag svg{width:64px;height:42px;border-radius:4px;border:1px solid rgba(255,255,255,.3);box-shadow:0 0 0 rgba(94,231,255,0);transition:box-shadow .2s,border-color .2s}
.flag:hover{opacity:1;transform:translateY(-2px)}
.flag.current{opacity:1;color:var(--cyan)}
.flag.current svg{border-color:var(--cyan);box-shadow:0 0 22px rgba(94,231,255,.6)}

/* no-WebGL fallback */
#nogl{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(6,20,36,.95),rgba(2,5,11,1));overflow:auto;padding:20px}
.nogl-box{max-width:640px;display:grid;gap:14px;text-align:left}
.nogl-box h1{font-size:40px;letter-spacing:.3em;color:var(--cyan);text-shadow:0 0 30px rgba(94,231,255,.8);text-align:center}
.nogl-box .intro-mark{margin:0 auto}
.nogl-box .intro-sub{text-align:center}
.nogl-box p,.nogl-box li{line-height:1.55;font-size:14.5px;color:#cfe0ee}
.nogl-box ul{padding-left:20px;display:grid;gap:8px}
.nogl-box code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:#bdf3ff;background:rgba(94,231,255,.1);padding:1px 5px;border-radius:4px}
.nogl-box a{color:var(--gold)}
/* the gate */
#gate-hud{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);width:min(880px,calc(100vw - 28px));background:var(--panel2);border:1px solid var(--gold);border-radius:12px;padding:12px 16px;z-index:18;display:grid;gap:10px;box-shadow:0 0 30px rgba(255,212,59,.15)}
.gate-top{display:flex;justify-content:space-between;gap:10px;font-family:var(--head);letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--gold)}
.gate-keys{color:var(--muted);letter-spacing:.06em;text-transform:none}
#gate-active{font-family:var(--head);font-size:22px;line-height:1.25;min-height:28px;color:#fff}
body.teach #gate-active{font-size:28px}
#gate-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
#gate-chips button{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:.02em;font-size:13px;color:var(--c);border-color:color-mix(in srgb,var(--c) 40%,transparent);background:color-mix(in srgb,var(--c) 8%,transparent);padding:6px 10px}
#gate-chips button:hover{background:color-mix(in srgb,var(--c) 22%,transparent)}
#gate-chips kbd{color:var(--c)}
.gate-actions{display:flex;flex-wrap:wrap;gap:6px}
.gate-actions button.quiet{margin-left:auto;color:var(--muted);border-color:rgba(255,255,255,.15);background:transparent}
.gate-actions .teach-only{display:none}
body.teach .gate-actions .teach-only{display:inline-block}
#gate-table{border-top:1px solid rgba(255,212,59,.3);padding-top:8px;display:grid;gap:6px}
.gate-table-h{display:flex;justify-content:space-between;align-items:center;font-family:var(--head);letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--gold)}
#gate-table-close{width:24px;height:24px;padding:0;border-radius:50%}
#gate-table-body{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:13px}
#gate-table-body div{padding:6px 10px;background:rgba(255,212,59,.06);border-radius:6px}
#gate-table-body span{display:block;font-family:var(--head);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
#gate-levels{display:grid;gap:8px;margin-top:12px}
#gate-levels button{text-align:left;text-transform:none;letter-spacing:0;padding:10px 14px;display:grid;gap:3px;font-size:15px}
#gate-levels button span{color:var(--muted);font-size:12.5px;font-family:var(--font);font-weight:400}
#btn-gate{color:var(--gold);border-color:rgba(255,212,59,.35);background:rgba(255,212,59,.08)}
body.gate #inspector,body.gate #tour-bar,body.gate #hud-enter{display:none!important}
.dbr-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:10px 0 14px}
.dbr-sum div{padding:8px 10px;border-radius:8px;background:rgba(105,219,124,.08);border:1px solid rgba(105,219,124,.25);display:grid}
.dbr-sum div.warn{background:rgba(255,140,66,.08);border-color:rgba(255,140,66,.3)}
.dbr-sum b{font-family:var(--head);font-size:26px;line-height:1}
.dbr-sum span{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-family:var(--head)}
.dbr{border-left:3px solid rgba(255,255,255,.2);padding:8px 12px;margin:8px 0;background:rgba(255,255,255,.03);border-radius:0 8px 8px 0;display:grid;gap:4px}
.dbr.ok{border-left-color:var(--green)}.dbr.warn{border-left-color:var(--orange)}
.dbr-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-family:var(--head);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.dbr-h .n{color:var(--gold);font-weight:700;font-size:16px}.dbr-h .out{color:#fff}.dbr-h .truth{color:var(--c);margin-left:auto}
.dbr .mod{font-size:15px;color:#fff;margin:0}.dbr .old{font-size:12.5px;color:var(--muted);font-style:italic;margin:0}.dbr .why{font-size:13px;margin:0}
.dbr blockquote{margin:2px 0 0;font-size:12.5px;padding:6px 10px}
/* teach mode */
body.teach #sim{display:none}
body.teach #tour-text{font-size:19px}
body.teach #hud-keys{display:none}

@media (max-width:900px){
  .brand .sub{display:none}
  .search-wrap{max-width:200px}
  #sim{width:220px;top:58px}
  #inspector{top:auto;bottom:0;right:0;left:0;width:100%;height:55vh;border-radius:12px 12px 0 0}
  #tour-bar{left:14px;right:14px;bottom:8px}
  #diag-list{grid-template-columns:1fr}
  #gate-chips{grid-template-columns:repeat(2,1fr)}
  #gate-table-body{grid-template-columns:1fr}
  #hud{display:none}
  #intro h1{font-size:34px}
}