/* ---------------------------------------------------------------------
   Relentless Feather - shared lesson-stage shell (styles)

   Powers every unit stage built on the new workspace: 2-pane lesson +
   editor with a Run/preview flip, guided-typing trace, read-aloud, hover
   glossary, goal popup, warm-up gate, per-step "try it" boxes, code
   explainers, and the finish/completion box. Behavior lives in
   assets/js/rf-stage.js, driven by a window.RF_STAGE config per stage.
--------------------------------------------------------------------- */
:root{ --blue:#4e77bb; --purple:#694097; --pink:#ef3f6c; --navy:#003c64; --dark:#0A0E1A; --darkalt:#151B2D; --ls:17px; }
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--dark);color:#e5e7eb;display:flex;flex-direction:column;overflow:hidden}
body.readable .lesson-body{font-family:'Atkinson Hyperlegible',sans-serif}

.stage-header{display:flex;align-items:center;gap:14px;padding:10px 18px;background:linear-gradient(150deg,var(--blue),var(--purple) 60%,var(--pink));flex:none}
.stage-header img{height:26px}
.stage-header .st-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;color:#fff;font-size:.95rem}
.stage-header .st-sub{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:.15rem .55rem}
.stage-header-nav{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.header-btn{display:inline-flex;align-items:center;justify-content:center;line-height:1;box-sizing:border-box;height:32px;color:#fff;text-decoration:none;font-family:inherit;font-size:.82rem;font-weight:600;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);padding:0 .75rem;border-radius:999px;cursor:pointer;white-space:nowrap}
.progress-bar{height:4px;background:rgba(255,255,255,.25);flex:none}
.progress-fill{height:100%;background:#fff}

.lab{display:flex;flex:1;min-height:0;overflow:hidden}
.lab-lesson{flex:0 0 var(--lesson-split,42%);min-width:0;background:#fff;color:#16273B;display:flex;flex-direction:column;transition:flex-basis .32s cubic-bezier(.4,0,.2,1),opacity .32s;opacity:1}
.lab-editor{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;border-left:1px solid #1F2937}
.lab-preview{flex:0 0 0;min-width:0;background:#fff;overflow:hidden;opacity:0;transition:flex-basis .32s cubic-bezier(.4,0,.2,1),opacity .32s;border-left:1px solid #1F2937;display:flex;flex-direction:column}
body.mode-preview .lab-lesson{flex-basis:0;opacity:0;overflow:hidden;border:none}
body.mode-preview .lab-preview{flex-basis:50%;opacity:1}
/* draggable divider so learners can widen the lesson or the code side */
.lab-divider{flex:0 0 9px;align-self:stretch;cursor:col-resize;background:#eef2f7;position:relative;z-index:6;touch-action:none}
.lab-divider::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:3px;height:36px;border-radius:3px;background:#b9c6d6}
.lab-divider:hover,.lab-divider.dragging{background:#dbe6f3}
.lab-divider:hover::before,.lab-divider.dragging::before{background:var(--blue)}
body.mode-preview .lab-divider{display:none}
body.dragging-split, body.dragging-split *{user-select:none!important}
body.dragging-split .lab-lesson, body.dragging-split .lab-preview{transition:none}

.lab-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--darkalt);border-bottom:1px solid #1F2937;font-size:.72rem;font-weight:700;letter-spacing:.08em;color:#9aa4b2}
.lab-bar.preview-bar{background:#eef2f7;color:#5B6472;border-bottom:1px solid #dbe3ee}
.lab-actions{display:flex;gap:8px}
.lab-btn{font-family:inherit;font-weight:700;font-size:.78rem;border-radius:999px;padding:.4rem .85rem;cursor:pointer;border:none}
.lab-btn.run{background:linear-gradient(150deg,#ff5c8a,#ef3f6c);color:#fff;border:3px solid #fff;box-shadow:0 4px 14px rgba(239,63,108,.4)}
.lab-btn.ghost{background:transparent;border:1.5px solid #6B7280;color:#cbd5e1}
.lab-bar.preview-bar .lab-btn.ghost{border-color:#c3ccd8;color:#5B6472}

.lesson-toolbar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f3f6fa;border-bottom:1px solid #e6e9ef;flex-wrap:wrap}
.tool-btn{font-family:inherit;font-weight:600;font-size:.78rem;color:#3a4657;background:#fff;border:1px solid #d7dfea;border-radius:8px;padding:.35rem .6rem;cursor:pointer}
.tool-btn:hover{border-color:var(--blue)}
.tool-btn.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.tool-divider{width:1px;height:20px;background:#d7dfea;margin:0 4px}
.tool-sel{font-family:inherit;font-weight:600;font-size:.78rem;color:#3a4657;background:#fff;border:1px solid #d7dfea;border-radius:8px;padding:.32rem .4rem;max-width:140px}

.lab-lesson-scroll{overflow:auto;flex:1}
.lesson-body{padding:1.5rem 1.5rem 3rem;font-size:calc(var(--ls) + 1px);line-height:1.6}
.lesson-eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--pink);margin-bottom:.4rem}
.lesson-body h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.5rem;color:var(--navy);margin-bottom:.6rem}
.lesson-body > p{line-height:1.6;color:#3a4657;margin-bottom:.9rem}
.goal-btn{display:inline-flex;align-items:center;gap:.4rem;font-family:inherit;font-weight:700;font-size:.85rem;color:#fff;background:linear-gradient(150deg,var(--blue),var(--purple));border:none;border-radius:999px;padding:.5rem .95rem;cursor:pointer;margin-bottom:1.1rem}
.goal-overlay{position:fixed;inset:0;background:rgba(6,10,20,.55);display:none;align-items:center;justify-content:center;z-index:10000;padding:1.5rem}
.goal-overlay.show{display:flex}
.goal-modal{background:#fff;border-radius:16px;max-width:820px;width:100%;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 30px 70px rgba(0,0,0,.4);overflow:hidden}
.goal-modal-head{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.1rem;border-bottom:1px solid #eef2f7;font-family:'Plus Jakarta Sans',sans-serif;color:var(--navy);font-weight:700}
.goal-modal iframe{width:100%;height:68vh;border:none;background:#fff}
.lesson-step{border:1px solid #E6E9EF;border-radius:12px;padding:1rem 1.1rem;margin-bottom:.9rem;background:#F8FAFC}
.lesson-step h3{font-size:1.05em;color:var(--navy);margin-bottom:.35rem;display:flex;gap:.5rem;align-items:center}
.step-num{width:22px;height:22px;border-radius:50%;background:linear-gradient(150deg,var(--blue),var(--purple));color:#fff;font-size:.75rem;display:flex;align-items:center;justify-content:center;flex:none}
.lesson-step p{line-height:1.55;color:#3a4657}
.lesson-body code{font-family:'SF Mono','Monaco',monospace;background:#0f1729;color:#5AD1FF;padding:.1rem .38rem;border-radius:5px;font-size:.85em}
code[data-term]{cursor:help;border-bottom:2px dotted var(--blue)}
.tip-hint{font-size:.78em;color:#8a94a6;font-style:italic}
.land{background:#fff6ef;border:1px solid #f6d8c2;border-radius:10px;padding:.9rem 1rem;margin-bottom:1rem;color:#5a3a2a;line-height:1.55}
.did{background:#eef4ff;border:1px solid #d3e0f6;border-radius:10px;padding:.7rem .9rem;margin-top:.6rem;color:#2b3d5c;font-size:.9em;line-height:1.65}
.did+.goal-btn{margin-top:1.1rem}
/* stand-alone "let's try it" prompt, soft pink so it stands out from the steps */
.tryit{background:#fdeef4;border:1.5px solid #f6c9dd;border-radius:12px;padding:.9rem 1rem;margin:0 0 .9rem;color:#7a2348;line-height:1.55}
.tryit b{color:#c02a63}
/* "Do this" checklist: the numbered code actions for the stage, ticked off live */
.dothis{background:#effaf1;border:2px solid #bfe3c9;border-radius:12px;padding:.85rem 1rem .9rem;margin:0 0 1.2rem}
.dothis-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.55rem}
.dothis-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#1f7a44}
/* always-visible progress tracker pinned to the top of the lesson panel */
.dothis-sticky{position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:.55rem;background:#eef7f0;border-bottom:1px solid #cfe6d6;padding:.45rem .9rem;cursor:pointer}
.dothis-sticky .ds-label{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#1f7a44}
.dothis-sticky .ds-dots{display:flex;gap:.3rem;flex-wrap:wrap}
.dothis-sticky .ds-dots i{width:1.35rem;height:1.35rem;border-radius:50%;background:#d7e7dc;color:#1f7a44;font-size:.72rem;font-weight:700;font-style:normal;display:flex;align-items:center;justify-content:center}
.dothis-sticky .ds-dots i.done{background:#2e9e57;color:#fff}
.dothis-sticky .ds-dots i.current{background:#fff;color:#1f7a44;box-shadow:0 0 0 2px #2e9e57 inset}
.dothis-sticky .ds-count{margin-left:auto;font-size:.82rem;font-weight:800;color:#1f7a44;white-space:nowrap}
.dothis ol{margin:0;padding:0;list-style:none;counter-reset:dt}
.dothis li{position:relative;padding:.4rem 4.7rem .4rem 2.1rem;border-radius:8px;line-height:1.5;color:#274233;counter-increment:dt;margin:.15rem 0}
.dothis li code{background:#0f1729;color:#5AD1FF;padding:.05rem .3rem;border-radius:5px;font-size:.85em}
.dothis li::before{content:counter(dt);position:absolute;left:.4rem;top:.42rem;width:1.35rem;height:1.35rem;border-radius:50%;background:#cdeed6;color:#1f7a44;font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.dothis li.done{color:#6f9480;opacity:.7}
.dothis li.done code{opacity:.7}
.dothis li.done::before{background:#2e9e57;color:#fff}
.dothis li.done::after{content:'✓';position:absolute;right:.7rem;top:.34rem;font-size:1.05rem;font-weight:800;color:#2e9e57}
.dothis li.current{background:#fff;box-shadow:0 0 0 2px #2e9e57 inset}
.dothis li.current::after{content:'👈 do this';position:absolute;right:.55rem;top:.45rem;font-size:.72rem;color:#1f7a44;font-weight:700;white-space:nowrap}
.dothis-done{font-size:.82rem;font-weight:800;color:#1f7a44;white-space:nowrap}
/* the little "pop" when a task is newly checked off */
@keyframes rf-pop{0%{transform:scale(1)}35%{transform:scale(1.28)}70%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes rf-flash{0%{background:#c6f2d5}100%{background:transparent}}
.dothis li.just-done{animation:rf-flash .9s ease}
.dothis li.just-done::before{animation:rf-pop .5s cubic-bezier(.34,1.56,.64,1)}
.dothis-sticky .ds-dots i.just-done{animation:rf-pop .55s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion: reduce){ .dothis li.just-done, .dothis li.just-done::before, .dothis-sticky .ds-dots i.just-done, .task-inline .ti-check.just-done{ animation:none } }
/* inline single-task cards (shown in place of the old "Try it" boxes) */
.task-inline--ready{margin:1rem 0;border:2px solid #bfe3c9;background:#f2fbf4;border-radius:12px;padding:.75rem .85rem}
.task-inline .ti-head{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#1f7a44;margin-bottom:.5rem}
.task-inline .ti-row{position:relative;display:flex;gap:.6rem;align-items:flex-start;padding:.4rem 1.9rem .4rem .5rem;border-radius:8px;line-height:1.5;color:#274233}
.task-inline .ti-row.done::after{content:'✓';position:absolute;right:.6rem;top:.4rem;font-size:1.05rem;font-weight:800;color:#2e9e57}
.task-inline .ti-row + .ti-row{margin-top:.25rem}
.task-inline .ti-check{flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:50%;background:#cdeed6;color:#1f7a44;font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.task-inline .ti-label code{background:#0f1729;color:#5AD1FF;padding:.05rem .3rem;border-radius:5px;font-size:.85em}
.task-inline .ti-row.done{color:#6f9480}
.task-inline .ti-row.done .ti-label{opacity:.72}
.task-inline .ti-row.done .ti-check{background:#2e9e57;color:#fff}
.task-inline .ti-row.current{background:#fff;box-shadow:0 0 0 2px #2e9e57 inset}
.task-inline .ti-check.just-done{animation:rf-pop .55s cubic-bezier(.34,1.56,.64,1)}
body.hc .task-inline--ready{border:2px solid #0b5c2e;background:#eafaf0}
body.hc .task-inline .ti-head{color:#0b5c2e}
body.hc .task-inline .ti-row{color:#10231a}
body.hc .task-inline .ti-row.current{box-shadow:0 0 0 3px #0b5c2e inset}
/* finish + completion */
.finish{border:1.5px solid #d9c9ee;background:#f7f2fc;border-radius:12px;padding:1rem 1.1rem;margin-top:.5rem}
.finish h3{color:#5a2d92;font-size:1.05em;margin-bottom:.35rem;display:flex;gap:.5rem;align-items:center}
.finish p{line-height:1.55;color:#3a4657;margin-bottom:.6rem}
.finish-btn{font-family:inherit;font-weight:700;font-size:.85rem;color:#fff;background:linear-gradient(150deg,#9a63d6,#7a3fc0 55%,#552a8f);border:none;border-radius:8px;padding:.55rem 1.05rem;cursor:pointer}
.finish-btn:disabled{opacity:.7;cursor:default}
.finish-fb{margin-top:.55rem;font-size:.9rem;font-weight:600}
.finish-fb.ok{color:#1f7a4d}
.finish-fb.no{color:#b4324f}
/* big obvious "go to the next stage" button shown in the completion celebration */
.next-stage-btn{display:block;margin-top:.9rem;text-align:center;text-decoration:none;font-family:inherit;font-weight:700;font-size:1.05rem;color:#fff;background:linear-gradient(150deg,#2e9e57,#1f7a44);border-radius:12px;padding:.85rem 1rem;box-shadow:0 6px 18px rgba(31,122,68,.32)}
.next-stage-btn:hover{filter:brightness(1.06)}
.next-stage-btn b{font-weight:800}
body.hc .next-stage-btn{background:#0b5c2e;color:#fff}
.header-btn.nav-locked{opacity:.5}
.nation-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.7rem 0}
.nation{background:#fff;border:1px solid #e9edf3;border-radius:8px;padding:.5rem .6rem}
.nation b{display:block;color:var(--navy);font-size:.9em}
.nation span{color:#6a7488;font-size:.78em}
.show-btn{margin-top:.6rem;font-family:inherit;font-weight:600;font-size:.8rem;color:var(--purple);background:#f3eefb;border:1px solid #e0d3f2;border-radius:8px;padding:.35rem .7rem;cursor:pointer}
.show-code{margin-top:.5rem;background:#0f1729;color:#e6edf3;font-family:'SF Mono','Monaco',monospace;font-size:.82rem;padding:.7rem .85rem;border-radius:8px;white-space:pre;overflow:auto}
/* code explainer: defines the tags each step introduces (Duckett style) */
.explain{margin:.7rem 0 .95rem;background:#fff5ec;border:1px solid #f2ddc8;border-radius:10px;padding:.8rem .95rem .85rem}
.explain+.explain{margin-top:0}
.explain-label{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#c15e1c;margin-bottom:.45rem}
.explain dl{margin:0}
.explain dt{margin-top:.55rem;font-family:'SF Mono','Monaco',monospace;font-weight:700;color:var(--navy);font-size:.85em}
.explain dt:first-of-type{margin-top:0}
.explain dt code{font-family:inherit;background:#0f1729;color:#5AD1FF;padding:.06rem .32rem;border-radius:5px}
.explain dd{margin:.22rem 0 0;line-height:1.5;color:#3a4657;font-size:.92em}
.explain .term{font-family:'SF Mono','Monaco',monospace;color:#b5581c;font-weight:600}
.qgate{border:1.5px solid var(--purple);background:#f7f2fc;border-radius:12px;padding:1rem 1.1rem;margin-bottom:.9rem}
.qgate h3{color:var(--purple);font-size:1.05em;margin-bottom:.4rem}
.qgate p{color:#3a4657;margin-bottom:.6rem;line-height:1.5}
.qgate-row{display:flex;gap:.5rem}
.qgate input{flex:1;min-width:0;padding:.5rem .7rem;border:1.5px solid #d7cde9;border-radius:8px;font:inherit}
.qgate-btn{font-family:inherit;font-weight:700;font-size:.82rem;color:#fff;background:linear-gradient(150deg,var(--blue),var(--purple));border:none;border-radius:8px;padding:.5rem 1rem;cursor:pointer;white-space:nowrap}
.qgate-btn:disabled{opacity:.6;cursor:default}
.qgate-fb{margin-top:.55rem;font-size:.88rem;font-weight:600}
.qgate-fb.ok{color:#1f7a4d}
.qgate-fb.no{color:#b4324f}
.qgate.done{border-color:#b9ead0;background:#eafaf0}
.locked{display:none}
.reading{background:#fff2ab;border-radius:5px;box-shadow:0 0 0 4px #fff2ab}

#status{padding:8px 12px;font-size:.8rem;background:#0f1729;color:#9aa4b2;border-top:1px solid #1F2937;flex:none}
#status b{color:#5EF08A}
#preview{width:100%;height:100%;border:none;background:#fff;flex:1}

.rf-tip{position:fixed;z-index:9999;max-width:264px;background:#0f1729;color:#e6edf3;border:1px solid #2a3550;border-radius:10px;padding:.6rem .75rem;font-size:.82rem;line-height:1.45;box-shadow:0 12px 30px rgba(0,0,0,.4);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.rf-tip.show{opacity:1;transform:translateY(0)}
.rf-tip b{color:#5AD1FF;font-family:'SF Mono','Monaco',monospace}

.caption{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:10003;max-width:min(92vw,720px);background:rgba(10,14,26,.95);color:#fff;font-size:1.05rem;line-height:1.5;padding:.7rem 1.1rem;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.45);text-align:center}
.caption[hidden]{display:none}
.caption mark{background:#FFD866;color:#1a1400;border-radius:4px;padding:0 .12rem}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:10001}
.badge{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:10002;background:linear-gradient(150deg,var(--blue),var(--purple));color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.3rem;padding:1.1rem 2rem;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.4);text-align:center}

.glossary-overlay{position:fixed;inset:0;background:rgba(6,10,20,.55);display:none;align-items:center;justify-content:center;z-index:10000;padding:1.5rem}

.CodeMirror{height:100%!important;font-size:var(--ls);font-family:'SF Mono','Monaco','Courier New',monospace}
.cm-s-rf-theme.CodeMirror{background:var(--dark);color:#E5E7EB}
.cm-s-rf-theme .CodeMirror-gutters{background:var(--darkalt);border-right:1px solid #1F2937}
.cm-s-rf-theme .CodeMirror-linenumber{color:#6B7280}
.cm-s-rf-theme .CodeMirror-cursor{border-left:2px solid #6B9BD1}
.cm-s-rf-theme .CodeMirror-matchingbracket{color:#FFD866!important;font-weight:700}
.cm-s-rf-theme .cm-tag{color:#5AD1FF}.cm-s-rf-theme .cm-attribute{color:#5EF08A}.cm-s-rf-theme .cm-string{color:#FFD866}.cm-s-rf-theme .cm-property{color:#5EF08A}
/* trace typing: code ahead of the cursor is faded until you type it */
.cm-ghosted, .cm-ghosted span{ color:#5a6b80!important; font-style:italic; opacity:.5; }
/* the next character to type glows bright yellow so it is easy to find */
.cm-target, .cm-target span{ background:#FFD866; color:#1a1400!important; border-radius:3px; font-style:normal!important; opacity:1!important; }
.cm-target{ animation:targetPulse 1.15s ease-in-out infinite; }
@keyframes targetPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,216,102,.65) } 50%{ box-shadow:0 0 0 4px rgba(255,216,102,.18) } }

/* High-contrast mode for visual needs (toggle in the lesson toolbar) */
body.hc .lab-lesson{ background:#fff; }
body.hc .lesson-body{ color:#000; font-weight:500; }
body.hc .lesson-body h1, body.hc .lesson-step h3, body.hc .lesson-body > p, body.hc .lesson-step p,
body.hc .explain dt, body.hc .explain dd, body.hc .did, body.hc .land, body.hc .tryit,
body.hc .finish h3, body.hc .finish p, body.hc .qgate h3, body.hc .qgate p{ color:#000!important; }
body.hc .tip-hint{ color:#000!important; font-style:normal; }
body.hc .lesson-step{ background:#fff; border:2px solid #000; }
body.hc .explain{ background:#fff6ea; border:2px solid #9a4f10; }
body.hc .explain-label{ color:#7a3d00!important; }
body.hc .explain .term{ color:#7a3d00!important; }
body.hc .tryit{ background:#ffe9f1; border:2px solid #a11553; }
body.hc .tryit b{ color:#a11553; }
body.hc .dothis{ background:#e7f7ea; border:2px solid #0b5c2e; }
body.hc .dothis-label, body.hc .dothis-done{ color:#0b5c2e!important; }
body.hc .dothis-sticky{ background:#e7f7ea; border-bottom:2px solid #0b5c2e; }
body.hc .dothis-sticky .ds-label, body.hc .dothis-sticky .ds-count{ color:#0b5c2e; }
body.hc .dothis-sticky .ds-dots i{ background:#cfe6d6; color:#0b5c2e; }
body.hc .dothis-sticky .ds-dots i.done{ background:#0b5c2e; color:#fff; }
body.hc .dothis li{ color:#10231a; }
body.hc .dothis li.current{ box-shadow:0 0 0 3px #0b5c2e inset; }
body.hc .did{ background:#e6efff; border:2px solid #123a7a; }
body.hc .land{ background:#fff2e6; border:2px solid #a11553; }
body.hc .lesson-body code{ background:#000; color:#ffdf6b; }
body.hc code[data-term]{ border-bottom:2px solid #000; }
body.hc .qgate{ background:#f3ecff; border:2px solid #4a1d6e; }
body.hc .finish{ background:#eefaf0; border:2px solid #145a34; }
body.hc .nation{ border:1.5px solid #000; }
body.hc .nation b{ color:#000; } body.hc .nation span{ color:#333; }
body.hc .cm-s-rf-theme.CodeMirror{ background:#000; }
body.hc #status{ background:#000; color:#fff; }

@media (max-width:760px){ .lab{flex-direction:column} .lab-lesson{flex-basis:48%} .lab-divider{display:none} body.mode-preview .lab-preview{flex-basis:55%} .nation-grid{grid-template-columns:1fr} }