/* Editorial presentation: functional scenes and their original status colors are retained. */
:root{--bg:#171716;--paper:#222220;--text:#f1eee5;--muted:#b2afa5;--line:#42423c;--accent:#d6b8d2;--green:var(--accent);--warm:#f1eee5}
body{background:var(--bg);color:var(--text);font-family:"Avenir Next","Segoe UI",sans-serif}
::selection{background:#d6b8d2;color:#25241f}
header{max-width:1160px;padding:22px 28px 18px;gap:20px}
.brand-logo{width:30px;height:30px}.brand .brand-name{font-size:18px;font-weight:500;letter-spacing:-.6px}
.manual-link{color:#c6c2b6;font-size:11px;letter-spacing:.2px}.manual-link:hover{color:var(--accent)}
main{max-width:1160px;padding:0 28px 30px}
.intro{padding:24px 0 28px;text-align:left;position:relative;max-width:760px}
.intro .eyebrow{font-size:9px;color:#b9a5b7;letter-spacing:2px;margin-bottom:12px}
.intro h1{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:clamp(36px,4.3vw,52px);line-height:1.06;letter-spacing:-1.6px}
.intro h1 br{display:none}.intro h1 em{display:block;color:var(--accent)}
.intro>p:last-child{font-size:12px;line-height:1.7;color:#b8b5ac;margin-top:14px}
.route-bar{margin-bottom:12px}.route-bar label{color:#c2beb3;font-size:11px;gap:12px}
select,.route-bar select{background:#242421;color:#ede9df;border:1px solid #4e4d44;border-radius:6px;padding:7px 28px 7px 11px}
button{border-radius:6px}button:hover{background:#ffffff08;border-color:#8b8370}
.route-bar button{border-color:#4e4d44;color:#ede9df;border-radius:6px;padding:7px 14px;font-size:11px}
.lesson{background:#f1eee5;border:1px solid #f1eee5;border-radius:9px;color:#282823;box-shadow:0 15px 35px #00000016}
.lesson-header{padding:20px 24px 18px;gap:16px}
.lesson-header .eyebrow{font-size:9px;color:#69675c;letter-spacing:1.5px;margin-bottom:5px}
.lesson-header h2{font:400 22px/1.2 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;letter-spacing:-.5px}
.watch-button{border:1px solid #c4c0b4;background:transparent;color:#454339;padding:8px 12px;font-size:11px;border-radius:5px;white-space:nowrap}
.watch-button:hover{background:#e5e0d4;border-color:#8c8778}.watch-button[aria-pressed=true]{background:#e4d7e2;border-color:#9a7897;color:#4e394d}
.stage{grid-template-columns:minmax(0,1.28fr) minmax(230px,1fr);gap:30px;padding:0 24px 22px}
.screen{background:radial-gradient(ellipse at 45% 30%,#30302c,#222220 80%);border:1px solid #35352f;border-radius:6px;padding:22px;min-height:265px;color:#eeeae0}
.ui-object{box-shadow:0 1px 1px #ffffff4d inset,0 16px 32px -16px #000b;transform:none;border-radius:6px}
.terminal-object,.panel-object{transform:none}.panel-object{max-width:310px}
.instruction h3{font:400 clamp(26px,2.8vw,33px)/1.12 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;letter-spacing:-.65px;margin-bottom:14px;color:#292922}
.instruction .eyebrow{color:#785a74;font-size:9px;letter-spacing:1.7px;margin-bottom:12px}
.instruction>p:not(.eyebrow){color:#5c5a51;font-size:13px;line-height:1.75;max-width:375px;margin-bottom:18px}
.primary{background:#292923;color:#f4f0e4;border:1px solid #292923;border-radius:5px;padding:10px 19px;font-size:12px;box-shadow:none}
.primary:hover{background:#454236;border-color:#454236}.primary:focus-visible{outline-color:#886382}
.feedback{color:#77536e;font-size:12px;line-height:1.6;margin-top:13px}
.lesson-footer{border-color:#d4d0c3;color:#6b685e;padding:10px 18px;font-size:11px}
.lesson-footer .quiet{color:#555247;border-radius:4px}.lesson-footer .quiet:hover{background:#e5dde3;border-color:transparent}
.progress-track{height:3px;background:#ded9ca}.progress-track div{background:#a582a1}
.step-details{margin-top:10px}details{border-color:#41413a}summary{color:#c0bcb0;font-size:12px;padding:15px 2px}summary:hover{color:#f1eee5}summary span{color:#a9a391}
#detailsText,#reference{color:#cec9bc;font-size:13px}.source-note{color:#b1ac9f}.source-link,.chapter-details>a{color:var(--accent)}
.settings label,.preferences p,.settings+p{color:#b6b0a2}.settings button{border-color:#565347;color:#d8cdd8}.settings button[aria-pressed=true]{background:#38303a;color:var(--accent)}
footer{max-width:1104px;padding:16px 0;margin:auto;border-color:#41413a;color:#aaa496;font-size:10px}
dialog{background:#232320;border-color:#696353;border-radius:9px;color:#efeadd;padding:24px}
dialog::backdrop{background:#10100ed9;backdrop-filter:blur(6px)}
.dialog-top h2{font:26px "Iowan Old Style",Palatino,Georgia,serif}.dialog-top p{color:#c2baaa}
nav button{padding:14px 8px;border-color:#444139;border-radius:0}nav button:hover{background:#2e2c25!important}
nav button .number{color:#aaa18d}nav button .title{font-size:13px;color:#e1dbce}nav button .indicator,nav button.current .title{color:var(--accent)}
nav button.current{background:#363038;border-left:2px solid var(--accent)}
.zoom{background:#292922ef;border-color:#686352;color:#d6b8d2;border-radius:50%}
.reference-recreation,#expandedScene{background:#292925;border-radius:6px}
.ui-control.focus-control{outline:2px solid #aa78a1;box-shadow:0 0 0 3px #d6b8d240;background:#d6b8d238}
.focus-control:after{color:#805278}.ui-menu-list .focus-control{background:#eadbea;color:#523e50}
@keyframes focusPulse{0%,100%{box-shadow:0 0 0 3px #d6b8d228}50%{box-shadow:0 0 0 6px #d6b8d250}}
.panel-object .focus-control{outline-color:#d6b8d2;background:#d6b8d215}.panel-object .focus-control:after{color:#d6b8d2;text-shadow:0 1px #181418}
.chart-context-hit{color:#d6b8d2!important;background:#16161266!important}.chart-context-hit:hover{background:#26231a66!important}.terminal-chart:has(button[draggable=true]){outline-color:#d6b8d2}
.welcome-object h4{font-family:"Iowan Old Style",Palatino,Georgia,serif;color:#f0ebdf;font-size:26px}.welcome-object p{color:#c5bfb0}.welcome-note{color:#aaa290}
.completion-check{background:#d6b8d2;color:#38301f}.completion-points span{background:#342d35;border-color:#685768;color:#e0cfdf}
.status-options button{background:#34342e;border-color:#6b685b;color:#e0dacb}.status-options .selected{background:#4b394b;border-color:#d6b8d2;color:#f0d9eb}
.device-symbol,.device-arrow{color:#d6b8d2}.mini-terminal{background:#30302b;border-color:#6b6553}.device-state,.device-flow>p{color:#c3baaa}
.issue-flow>label{color:#c4bcab}.issue-flow select{background:#36342c;color:#eee7d8;border-color:#6b6454}.issue-message{background:#33312a;border-color:#605a4d}.issue-answer{background:#383039;border-color:#94758f;color:#e8dce6}.issue-message>span,.issue-answer>span{color:#c5acc2}
.folder-result,.launch-object{color:#e8e1d1}.folder-result h4,.launch-object h4{font-family:"Iowan Old Style",Palatino,Georgia,serif}.folder-choice,.copy-confirm{background:#342d35;color:#d6b8d2;border-color:#79617b}.copy-labels,.launch-object p{color:#c3baa7}.copy-pair{color:#ded5c4;border-color:#625a4a}.copy-pair>span:nth-child(2),.launch-object button{color:#d6b8d2}.positions-summary{color:#c9c0ad}
.checklist{color:#ded6c4}.checklist .item{border-color:#575142}.checklist .item span{color:#d6b8d2}
.activation-result>span{background:#eadbea;color:#775271}.diagnostic-rows strong{color:#775671}
button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.ui-object button:focus-visible{outline-color:#8b6410}
@media(min-width:1300px){main{max-width:1160px}.intro{padding:24px 0 28px}.screen{min-height:265px}}
@media(min-width:621px) and (max-width:850px){.stage{grid-template-columns:minmax(0,1.12fr) minmax(205px,.88fr);gap:22px;padding:0 20px 20px}.screen{padding:14px;min-height:245px}.instruction h3{font-size:26px}.lesson-header{padding:18px 20px}.instruction>p:not(.eyebrow){font-size:12px}}
@media(max-width:620px){header{padding:16px 18px}.brand .brand-name{font-size:17px}.brand-logo{width:27px;height:27px}main{padding:0 16px 22px}.intro{padding:16px 2px 22px}.intro h1{font-size:36px}.intro .eyebrow{font-size:8px;letter-spacing:1.5px}.intro>p:last-child{font-size:11px}.lesson-header{padding:16px 16px;gap:10px}.lesson-header h2{font-size:19px}.watch-button{font-size:10px;padding:8px}.stage{grid-template-columns:1fr;gap:20px;padding:0 16px 20px}.screen{min-height:210px;padding:15px}.instruction h3{font-size:27px}.instruction>p:not(.eyebrow){font-size:13px;max-width:none}.instruction .eyebrow{font-size:9px}.lesson-footer{padding:10px 10px;font-size:10px}.lesson-footer .quiet{font-size:11px}.primary{padding:10px 17px}footer{margin:0 18px;padding:16px 0}.welcome-object h4{font-size:24px}dialog{padding:18px}.dialog-top h2{font-size:23px}}

/* A restrained mauve accent softens the editorial chrome, never MT5 status meanings. */
.lesson{border-radius:12px}.screen{border-radius:8px}.primary{border-radius:8px}.primary:hover{background:#4b3d49;border-color:#4b3d49}.intro h1 em{color:#d6b8d2}.completion-points span{border-radius:8px}

/* Mauve is part of the neutral palette: charcoal, paper, borders and interaction states. */
:root{--bg:#1b191c;--paper:#28242a;--text:#f3edf0;--muted:#bdb2ba;--line:#51464f;--warm:#f1ecee}
body{background:var(--bg)}
.lesson{background:#f1ecee;border-color:#ded3dc}.lesson-header .eyebrow{color:#71636d}.lesson-header h2,.instruction h3{color:#302830}
.instruction>p:not(.eyebrow){color:#625660}.lesson-footer{border-color:#d9ced6;color:#786873}.lesson-footer .quiet{color:#665661}.lesson-footer .quiet:hover{background:#e7dde5}
.screen{background:radial-gradient(ellipse at 40% 25%,#3b333c,#27232a 80%);border-color:#514650}
.primary{background:#463743;border-color:#463743;color:#faf0f7}.primary:hover{background:#5c4457;border-color:#5c4457}.primary:active{transform:translateY(1px);background:#705268}
.route-bar select,select{background:#2c262e;border-color:#675666}.route-bar button{border-color:#675666}.route-bar label,.manual-link{color:#cbbcc7}
.progress-track{background:#ded1db}.progress-track div{background:#aa7ea2}
summary{color:#c7b9c3}details,footer{border-color:#4c414b}footer{color:#bbaaB7}
.welcome-object p{color:#d0c0ce}.welcome-note{color:#b8a4b3}.intro>p:last-child{color:#c1b2bc}
dialog{background:#2b252d;border-color:#72616f}nav button{border-color:#50424e}nav button:hover{background:#3b303a!important}.zoom{background:#362b34ef;border-color:#8d7488}
.reference-recreation,#expandedScene{background:#302831}
.focus-control{animation:guidedFocus 2.8s ease-in-out 2}.focus-control:after{animation:guidedPointer 2.8s ease-in-out 2}
@keyframes guidedFocus{0%,100%{box-shadow:0 0 0 3px #d6b8d22b}45%{box-shadow:0 0 0 6px #d6b8d265}}
@keyframes guidedPointer{0%,100%{translate:0 0}45%{translate:-2px -2px}}
@keyframes sceneArrival{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.scene-arriving{animation:sceneArrival .28s ease-out}.feedback:not(:empty){display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border-radius:7px;background:#e6dbe4;border:1px solid #ceb9c9;color:#714b66;font-size:11px;animation:sceneArrival .25s ease-out}
.feedback.step-completed:before{content:'✓';font-size:13px;color:#78546f}.ui-object button:active{filter:brightness(.94)}
@media(prefers-reduced-motion:reduce){.scene-arriving,.focus-control,.focus-control:after,.feedback{animation:none!important}.primary:active{transform:none}}
/* r53g: aviso de estado único (Guía §7). Explicación bajo los ejemplos. */
.status-hint{max-width:640px;margin:12px auto 0;padding:0 44px;font-size:12px;line-height:1.6;color:#cec9bc;text-align:center}