/* Base document styles. Components own their layout; semantic tokens own materials. */
:root{--bg:var(--ecg-ui-bg,#0c121c);--panel:var(--ecg-ui-surface-end,#192535);--white:var(--ecg-ui-text,#e6edf7);--muted:var(--ecg-ui-muted,#adbacd);--cyan:var(--ecg-ui-accent,#55b8ef);--red:var(--ecg-ui-brand,#dc3949);--line:var(--ecg-ui-border-soft,#536579);--max:1160px;--ecg-font-pixel:var(--ecg-ui-font-family,'Segoe UI',Arial,sans-serif)}
*{box-sizing:border-box;margin:0;padding:0}
body{min-width:320px;min-height:100vh;background:var(--bg);color:var(--white);font:14px/1.5 var(--ecg-ui-font-family,'Segoe UI',Arial,sans-serif);overflow-x:clip;isolation:isolate}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}img{max-width:100%}[hidden]{display:none!important}
.top,main,footer{width:min(calc(100% - 44px),var(--max));margin-inline:auto}
.top{height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:7px}.brand img{width:72px;height:52px;object-fit:contain}.brand span{display:grid;line-height:1.1}.brand b{font-size:15px}.brand small{font-size:10px;letter-spacing:.3em;color:var(--cyan)}
.back{display:inline-flex;align-items:center;min-height:44px;color:var(--ecg-ui-silver,#cbd5e2);font-weight:700}.back:hover{color:var(--cyan)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ecg-ui-focus,#55b8ef);outline-offset:4px}
main{position:relative;isolation:isolate}.crumb{margin-bottom:24px;color:var(--muted);font-size:13px}.crumb b{padding-inline:9px;color:var(--muted)}
footer{display:flex;justify-content:space-between;gap:18px;padding:26px 0 38px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
body.page-exit:after{content:"";position:fixed;z-index:9999;inset:0;background:var(--bg);pointer-events:all;animation:pageDepthFade .36s ease forwards}
@keyframes pageDepthFade{0%,25%{opacity:0}100%{opacity:1}}
@media(max-width:520px){body{font-size:15px}.top,main,footer{width:calc(100% - 28px)}footer{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){body.page-exit:after{animation:none}}

.learning-page{position:relative;isolation:isolate;width:min(calc(100% - 44px),1160px);margin:auto;padding:45px 0 80px}
@media(max-width:650px){.learning-page{width:calc(100% - 28px);padding-top:30px}}
:root{--ecg-font-body:var(--ecg-ui-font-family);--ecg-cyan:var(--ecg-ui-accent);--ecg-red:var(--ecg-ui-brand);--ecg-muted:var(--ecg-ui-muted)}