/* ============================================================================
   aliens-text.css — ATLE (Aliens Text Learning Experience)
   Full Enterprise UI — Matching ACLE Design System (Dark/Light Theme)
   Version: 26.07.01 | Date: 2026-04-13
   Central asset: /Aliens/ATLE/assets/css/aliens-text.css
   ============================================================================ */

/* ===== DESIGN TOKENS (ACLE MATCHING) ===== */
:root{
    --brand:#22c55e;--teal:#0ea5e9;--purple:#7c6aff;
    --red:#ef4444;--yellow:#f59e0b;
    --gradient:linear-gradient(135deg,#22c55e,#0ea5e9);
    --bg:#0a0e17;--bg2:#111827;--bg3:#1a2332;
    --surface:#151d2b;--surface2:#1e293b;
    --glass:rgba(21,29,43,.78);
    --t1:#e2e8f0;--t2:#94a3b8;--t3:#64748b;
    --link:#58a6ff;--link-hover:#79c0ff;
    --border:#1e293b;--border2:#2d3748;--border-glow:rgba(34,197,94,.15);
    --code-bg:#0d1117;--code-text:#e6edf3;
    --blockquote-border:#3b434b;--blockquote-text:#94a3b8;
    --table-stripe:#111827;--table-border:#1e293b;
    --glow:0 0 20px rgba(34,197,94,.15);
    --radius:8px;--radius-sm:6px;
    --spring:cubic-bezier(.16,1,.3,1);
    --smooth:cubic-bezier(.4,0,.2,1);
    --font-body:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --font-heading:'Space Grotesk',var(--font-body);
    --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
    --topbar-h:56px;--panel-w:360px;--content-max:900px
}

/* ===== LIGHT THEME ===== */
body.light-theme{
    --bg:#f8fafc;--bg2:#ffffff;--bg3:#f1f5f9;
    --surface:#ffffff;--surface2:#f1f5f9;
    --glass:rgba(248,250,252,.88);
    --t1:#0f172a;--t2:#475569;--t3:#64748b;
    --link:#0969da;--link-hover:#0550ae;
    --border:#e2e8f0;--border2:#cbd5e1;--border-glow:rgba(34,197,94,.12);
    --code-bg:#f6f8fa;--code-text:#1f2328;
    --blockquote-border:#d0d7de;--blockquote-text:#656d76;
    --table-stripe:#f6f8fa;--table-border:#d0d7de;
    --glow:0 0 16px rgba(34,197,94,.08);
    --brand:#16a34a;--teal:#0284c7
}

/* ===== RESET + BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--bg);color:var(--t1);line-height:1.6;
    min-height:100vh;overflow-x:hidden;transition:background .4s ease,color .4s ease}
::selection{background:var(--brand);color:#fff}
a{color:inherit;text-decoration:none}

/* ===== BACKGROUND EFFECTS (ACLE-STYLE) ===== */
.bg-grid{position:fixed;inset:0;background-image:
    linear-gradient(rgba(34,197,94,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,197,94,.03) 1px,transparent 1px);
    background-size:60px 60px;pointer-events:none;z-index:0}
body.light-theme .bg-grid{background-image:
    linear-gradient(rgba(15,23,42,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.03) 1px,transparent 1px)}
.bg-glow{position:fixed;width:600px;height:600px;border-radius:50%;
    filter:blur(120px);opacity:.07;pointer-events:none;z-index:0}
.bg-glow-1{top:-200px;left:-100px;background:#22c55e}
.bg-glow-2{bottom:-200px;right:-100px;background:#0ea5e9}
body.light-theme .bg-glow{opacity:.04}

/* ===== TOP BAR ===== */
#atle-topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:100;
    display:flex;align-items:center;justify-content:space-between;padding:0 20px;
    background:var(--glass);border-bottom:1px solid var(--border);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    transition:background .3s var(--smooth),border-color .3s var(--smooth)}
.atle-brand{display:flex;align-items:center;gap:10px;min-width:0}
.atle-logo{font-size:1.4rem;flex-shrink:0}
.atle-title{font-family:var(--font-heading);font-weight:700;font-size:.85rem;
    letter-spacing:3px;text-transform:uppercase;
    background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;white-space:nowrap}
body.light-theme .atle-title{background:linear-gradient(135deg,#16a34a,#0284c7);
    -webkit-background-clip:text;background-clip:text}
.atle-sep{color:var(--t3);margin:0 4px;flex-shrink:0}
.atle-context{font-size:.78rem;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atle-tools{display:flex;align-items:center;gap:6px;flex-shrink:0}
.atle-btn{width:36px;height:36px;border:1px solid var(--border);background:var(--surface);
    border-radius:var(--radius);color:var(--t2);font-size:1rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .25s var(--smooth)}
.atle-btn:hover{background:var(--surface2);color:var(--t1);border-color:rgba(34,197,94,.4);
    box-shadow:var(--glow)}
.atle-btn.active{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3);color:var(--brand)}

/* ===== COURSE INDEX PANEL (LEFT SIDEBAR) ===== */
#course-panel{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:var(--panel-w);
    background:var(--bg2);border-right:1px solid var(--border);z-index:90;
    overflow-y:auto;overflow-x:hidden;transform:translateX(-100%);
    transition:transform .35s var(--spring);padding:16px 0}
#course-panel.open{transform:translateX(0)}
.cp-header{padding:8px 20px 12px;display:flex;align-items:center;gap:10px;
    border-bottom:1px solid var(--border);margin-bottom:8px}
.cp-title{font-family:var(--font-heading);font-size:.85rem;font-weight:700;
    color:var(--t1);letter-spacing:1px;text-transform:uppercase;flex:1}
.cp-close{width:28px;height:28px;border:1px solid var(--border);background:transparent;
    border-radius:var(--radius-sm);color:var(--t3);cursor:pointer;font-size:.7rem;
    display:flex;align-items:center;justify-content:center;transition:all .2s}
.cp-close:hover{color:var(--red);border-color:var(--red)}
.cp-search{margin:0 12px 10px;position:relative}
.cp-search input{width:100%;padding:8px 12px 8px 32px;border:1px solid var(--border);
    border-radius:var(--radius-sm);background:var(--surface);color:var(--t1);
    font-size:.8rem;font-family:var(--font-body);outline:none;transition:border-color .2s}
.cp-search input:focus{border-color:rgba(34,197,94,.4)}
.cp-search .cp-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);
    color:var(--t3);font-size:.75rem}
.cp-module{margin:0}
.cp-module-head{display:flex;align-items:center;gap:8px;padding:8px 16px;cursor:pointer;
    font-size:.82rem;font-weight:600;color:var(--t1);transition:background .2s;user-select:none}
.cp-module-head:hover{background:var(--surface2)}
.cp-module-head .cp-arrow{color:var(--brand);font-size:.65rem;transition:transform .2s;flex-shrink:0}
.cp-module-head.expanded .cp-arrow{transform:rotate(90deg)}
.cp-module-head .cp-count{margin-left:auto;font-size:.65rem;font-weight:600;
    padding:2px 7px;border-radius:12px;background:rgba(34,197,94,.1);color:var(--brand)}
.cp-submodule{padding-left:12px;display:none}
.cp-submodule.show{display:block}
.cp-sub-head{display:flex;align-items:center;gap:6px;padding:6px 16px;cursor:pointer;
    font-size:.78rem;font-weight:500;color:var(--t2);transition:all .2s;user-select:none}
.cp-sub-head:hover{color:var(--t1);background:var(--surface)}
.cp-sub-head .cp-arrow{color:var(--teal);font-size:.55rem;transition:transform .2s;flex-shrink:0}
.cp-sub-head.expanded .cp-arrow{transform:rotate(90deg)}
.cp-sub-head .cp-count{margin-left:auto;font-size:.6rem;padding:1px 6px;
    border-radius:10px;background:rgba(14,165,233,.08);color:var(--teal)}
.cp-lessons{padding-left:8px;display:none}
.cp-lessons.show{display:block}
.cp-lesson{display:flex;align-items:center;gap:8px;padding:5px 16px 5px 24px;
    font-size:.76rem;color:var(--t2);cursor:pointer;text-decoration:none;
    transition:all .15s;border-left:2px solid transparent}
.cp-lesson:hover{color:var(--t1);background:var(--surface);border-left-color:var(--brand)}
.cp-lesson.current{color:var(--brand);font-weight:600;background:rgba(34,197,94,.06);
    border-left-color:var(--brand)}
.cp-lesson .cp-num{font-family:var(--font-heading);font-size:.65rem;font-weight:700;
    width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;
    background:rgba(34,197,94,.08);color:var(--brand);flex-shrink:0}
.cp-lesson.current .cp-num{background:var(--brand);color:#fff}

/* ===== TOOLS PANEL (RIGHT SIDEBAR) ===== */
#tools-panel{position:fixed;top:var(--topbar-h);right:0;bottom:0;width:320px;
    background:var(--bg2);border-left:1px solid var(--border);z-index:90;
    overflow-y:auto;transform:translateX(100%);
    transition:transform .35s var(--spring);padding:20px}
#tools-panel.open{transform:translateX(0)}
.tp-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;
    padding-bottom:12px;border-bottom:1px solid var(--border)}
.tp-title{font-family:var(--font-heading);font-size:.85rem;font-weight:700;
    letter-spacing:1px;text-transform:uppercase;flex:1;color:var(--t1)}
.tp-section{margin-bottom:20px}
.tp-section h3{font-size:.78rem;font-weight:600;color:var(--t2);text-transform:uppercase;
    letter-spacing:1px;margin-bottom:10px}
.tp-tool{display:flex;align-items:center;gap:10px;padding:10px 14px;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    cursor:pointer;transition:all .25s;margin-bottom:6px}
.tp-tool:hover{border-color:rgba(34,197,94,.3);transform:translateY(-1px);box-shadow:var(--glow)}
.tp-tool .tp-icon{font-size:1.2rem;flex-shrink:0}
.tp-tool .tp-label{font-size:.82rem;font-weight:500;color:var(--t1)}
.tp-tool .tp-desc{font-size:.7rem;color:var(--t3);margin-top:2px}

/* ===== MAIN LAYOUT ===== */
#atle-main{max-width:var(--content-max);margin:0 auto;
    padding:calc(var(--topbar-h) + 32px) 32px 120px;
    transition:margin .35s var(--spring),padding .35s var(--spring);position:relative;z-index:1}
body.index-mode #atle-main{margin-left:var(--panel-w);max-width:calc(100% - var(--panel-w))}
body.tools-mode #atle-main{margin-right:320px;max-width:calc(100% - 320px)}
body.index-mode.tools-mode #atle-main{margin-left:var(--panel-w);margin-right:320px;
    max-width:calc(100% - var(--panel-w) - 320px)}

/* ===== READING PROGRESS BAR ===== */
#reading-progress{position:fixed;top:var(--topbar-h);left:0;right:0;height:3px;z-index:99;
    background:var(--border)}
#reading-progress .bar{height:100%;width:0;background:var(--gradient);
    transition:width .15s linear;border-radius:0 2px 2px 0}

/* ===== LOADING STATE ===== */
.atle-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:16px;padding:120px 20px;color:var(--t3)}
.atle-spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--brand);
    border-radius:50%;animation:atleSpin .8s linear infinite}
@keyframes atleSpin{to{transform:rotate(360deg)}}
.atle-loading p{font-size:.85rem}

/* ===== ERROR STATE ===== */
.atle-error{display:none;text-align:center;padding:80px 20px;color:var(--t3)}
.atle-error p{font-size:.9rem;margin-bottom:8px}
.atle-error .atle-err-detail{font-size:.78rem;color:var(--red);font-family:var(--font-mono)}

/* ===== DOCUMENT INFO HEADER ===== */
.doc-header{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.doc-breadcrumb{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--t3);
    margin-bottom:8px;flex-wrap:wrap}
.doc-breadcrumb a{color:var(--brand);transition:opacity .2s}
.doc-breadcrumb a:hover{opacity:.7}
.doc-breadcrumb .sep{opacity:.3}
.doc-meta{display:flex;align-items:center;gap:16px;font-size:.72rem;color:var(--t3);margin-top:8px}
.doc-meta .tag{padding:2px 8px;border-radius:12px;background:rgba(34,197,94,.08);
    color:var(--brand);font-weight:600}

/* ===== MARKDOWN BODY — GITHUB STYLE ===== */
.markdown-body{font-size:16px;line-height:1.6;word-wrap:break-word;color:var(--t1)}
.markdown-body h1,.markdown-body h2,.markdown-body h3,
.markdown-body h4,.markdown-body h5,.markdown-body h6{
    margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25;
    font-family:var(--font-heading)}
.markdown-body h1{font-size:2em;padding-bottom:.3em;border-bottom:1px solid var(--border)}
.markdown-body h2{font-size:1.5em;padding-bottom:.3em;border-bottom:1px solid var(--border)}
.markdown-body h3{font-size:1.25em}
.markdown-body h4{font-size:1em}
.markdown-body h5{font-size:.875em}
.markdown-body h6{font-size:.85em;color:var(--t3)}
.markdown-body p{margin-top:0;margin-bottom:16px}
.markdown-body strong{font-weight:600}
.markdown-body em{font-style:italic}
.markdown-body del{text-decoration:line-through;color:var(--t3)}
.markdown-body a{color:var(--link);text-decoration:none}
.markdown-body a:hover{text-decoration:underline;color:var(--link-hover)}
.markdown-body ul,.markdown-body ol{padding-left:2em;margin-top:0;margin-bottom:16px}
.markdown-body li{margin-bottom:4px}
.markdown-body li+li{margin-top:.25em}
.markdown-body li>p{margin-top:16px}
.markdown-body ul ul,.markdown-body ul ol,.markdown-body ol ul,.markdown-body ol ol{margin-bottom:0}
.markdown-body .task-list-item{list-style:none;position:relative;padding-left:6px}
.markdown-body .task-list-item input[type="checkbox"]{margin:0 .5em 0 -1.3em;vertical-align:middle;
    accent-color:var(--brand)}
.markdown-body blockquote{padding:0 1em;margin:0 0 16px 0;
    border-left:.25em solid var(--blockquote-border);color:var(--blockquote-text)}
.markdown-body blockquote>:first-child{margin-top:0}
.markdown-body blockquote>:last-child{margin-bottom:0}
.markdown-body hr{height:.25em;padding:0;margin:24px 0;background-color:var(--border);border:0;border-radius:2px}
.markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;
    background-color:var(--code-bg);border-radius:var(--radius-sm);font-family:var(--font-mono);
    color:var(--code-text)}
.markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;
    background-color:var(--code-bg);border-radius:var(--radius);
    border:1px solid var(--border);margin-bottom:16px;position:relative}
.markdown-body pre code{padding:0;margin:0;font-size:100%;white-space:pre;
    background:transparent;border:0;display:inline;overflow:visible;word-wrap:normal}
.markdown-body pre .copy-btn{position:absolute;top:8px;right:8px;padding:4px 8px;
    font-size:.7rem;border:1px solid var(--border);border-radius:var(--radius-sm);
    background:var(--surface);color:var(--t3);cursor:pointer;opacity:0;transition:opacity .2s}
.markdown-body pre:hover .copy-btn{opacity:1}
.markdown-body pre .copy-btn:hover{color:var(--brand);border-color:var(--brand)}
.markdown-body table{border-spacing:0;border-collapse:collapse;margin-bottom:16px;
    display:block;width:max-content;max-width:100%;overflow:auto}
.markdown-body table th,.markdown-body table td{padding:6px 13px;border:1px solid var(--table-border)}
.markdown-body table th{font-weight:600;background:var(--bg2)}
.markdown-body table tr{background-color:var(--bg);border-top:1px solid var(--table-border)}
.markdown-body table tr:nth-child(2n){background-color:var(--table-stripe)}
.markdown-body img{max-width:100%;border-radius:var(--radius);border:1px solid var(--border)}
.markdown-body kbd{display:inline-block;padding:3px 5px;font:11px var(--font-mono);
    line-height:10px;color:var(--t1);vertical-align:middle;
    background-color:var(--bg2);border:solid 1px var(--border);
    border-bottom-color:var(--border2);border-radius:var(--radius-sm);
    box-shadow:inset 0 -1px 0 var(--border2)}
.markdown-body details{margin-bottom:16px}
.markdown-body details summary{cursor:pointer;font-weight:600;color:var(--link)}
.markdown-body details summary:hover{color:var(--link-hover)}
.markdown-body>*:first-child{margin-top:0!important}
.markdown-body>*:last-child{margin-bottom:0!important}

/* ===== LESSON NAVIGATION (PREV/NEXT) ===== */
#lesson-nav{position:fixed;bottom:0;left:0;right:0;z-index:80;
    display:none;align-items:center;justify-content:space-between;
    padding:10px 24px;background:var(--glass);
    border-top:1px solid var(--border);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    transition:all .3s var(--smooth)}
#lesson-nav.show{display:flex}
body.index-mode #lesson-nav{left:var(--panel-w)}
body.tools-mode #lesson-nav{right:320px}
.nav-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;
    border:1px solid var(--border);border-radius:var(--radius);
    background:var(--surface);color:var(--t2);font-size:.82rem;font-weight:500;
    cursor:pointer;transition:all .25s;text-decoration:none;font-family:var(--font-body)}
.nav-btn:hover{border-color:rgba(34,197,94,.3);color:var(--t1);
    transform:translateY(-1px);box-shadow:var(--glow)}
.nav-btn .arrow{font-size:.7rem;color:var(--brand)}
.nav-info{font-size:.72rem;color:var(--t3);text-align:center}

/* ===== TABLE OF CONTENTS (IN-DOCUMENT) ===== */
#toc{margin-bottom:24px;padding:16px;background:var(--surface);
    border:1px solid var(--border);border-radius:var(--radius)}
#toc h2{font-family:var(--font-heading);font-size:.9rem;font-weight:700;
    margin:0 0 10px;padding:0;border:none;color:var(--t1);letter-spacing:1px;text-transform:uppercase}
#toc ul{list-style:none;padding:0;margin:0}
#toc li{margin:0}
#toc a{display:block;padding:4px 0 4px 8px;font-size:.82rem;color:var(--t2);
    transition:color .15s;border-left:2px solid transparent}
#toc a:hover{color:var(--brand);border-left-color:var(--brand)}
#toc a.depth-2{padding-left:20px;font-size:.78rem}
#toc a.depth-3{padding-left:32px;font-size:.75rem;color:var(--t3)}

/* ===== KEYBOARD SHORTCUTS OVERLAY ===== */
#kb-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);
    display:none;align-items:center;justify-content:center;
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#kb-overlay.show{display:flex}
.kb-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;
    padding:28px 32px;max-width:480px;width:90%;max-height:80vh;overflow-y:auto}
.kb-card h2{font-family:var(--font-heading);font-size:1.1rem;margin-bottom:16px;
    background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text}
.kb-row{display:flex;align-items:center;justify-content:space-between;
    padding:6px 0;border-bottom:1px solid var(--border);font-size:.82rem}
.kb-row:last-child{border:none}
.kb-key{font-family:var(--font-mono);font-size:.75rem;padding:3px 8px;
    background:var(--surface);border:1px solid var(--border);border-radius:4px;
    color:var(--brand);font-weight:600}

/* ===== PDF / BOOK EXPORT OVERLAYS ===== */
.export-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);
    display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.export-overlay.show{display:flex}
.export-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;
    padding:28px 32px;max-width:400px;width:90%;text-align:center}
.export-card h2{font-family:var(--font-heading);font-size:1rem;margin-bottom:12px;color:var(--t1)}
.export-card p{font-size:.82rem;color:var(--t2);margin-bottom:16px}
.export-progress{width:100%;height:4px;background:var(--border);border-radius:2px;margin-bottom:12px}
.export-progress .fill{height:100%;background:var(--gradient);border-radius:2px;
    width:0;transition:width .3s}
.export-status{font-size:.75rem;color:var(--t3)}

/* ===== TOAST NOTIFICATIONS ===== */
#toast{position:fixed;top:calc(var(--topbar-h) + 12px);right:20px;z-index:300;
    padding:10px 18px;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);font-size:.82rem;color:var(--t1);
    box-shadow:0 8px 24px rgba(0,0,0,.3);transform:translateX(120%);
    transition:transform .35s var(--spring);pointer-events:none}
#toast.show{transform:translateX(0);pointer-events:auto}

/* ===== SCROLL BAR ===== */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--t3)}
#course-panel::-webkit-scrollbar{width:5px}
#course-panel::-webkit-scrollbar-thumb{background:var(--border2)}

/* ===== PRINT ===== */
@media print{
    #atle-topbar,#course-panel,#tools-panel,#lesson-nav,#reading-progress,
    .bg-grid,.bg-glow,.atle-tools,#toast,#toc{display:none!important}
    #atle-main{padding:0;max-width:100%;margin:0!important}
    body{background:#fff;color:#000}
    .markdown-body{color:#000}
    .markdown-body pre,.markdown-body code{border:1px solid #ddd}
    .markdown-body a{color:#0969da}
    .markdown-body a::after{content:" (" attr(href) ")";font-size:.7em;color:#666}
}

/* ===== MOBILE ===== */
@media(max-width:768px){
    :root{--topbar-h:48px;--panel-w:85vw}
    #atle-main{padding:calc(var(--topbar-h) + 16px) 16px 100px}
    .atle-title{font-size:.72rem;letter-spacing:2px}
    .atle-context{max-width:30vw;font-size:.7rem}
    .markdown-body{font-size:14px}
    .markdown-body h1{font-size:1.6em}
    .markdown-body h2{font-size:1.3em}
    .markdown-body pre{font-size:80%;padding:12px}
    .markdown-body table{font-size:.85rem}
    body.index-mode #atle-main,body.tools-mode #atle-main,
    body.index-mode.tools-mode #atle-main{margin-left:0;margin-right:0;max-width:100%}
    body.index-mode #lesson-nav{left:0}
    body.tools-mode #lesson-nav{right:0}
    #tools-panel{width:85vw}
}

/* ===== REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
        transition-duration:.01ms!important}
}