/* Terminal theme ("live terminal") for the Fab Academy site.
   Load after bootstrap/css/bootstrap.css, instead of media/fabacademy.css.
   Restyles the existing markup; the pages keep their HTML. */

:root {
    --glass: #03140a;        /* dark green CRT glass */
    --glass-2: #062413;      /* raised glass (terminal window) */
    --well: #010a05;         /* code wells */
    --phosphor: #8dffb0;     /* lit phosphor, main text */
    --dim: #3f9e63;          /* half-lit phosphor, secondary text */
    --faint: #1f5c38;        /* barely lit, rules and borders */
    --glow: rgba(120, 255, 170, .35);
    --halo: #0a2e18;         /* the glow at the top of the glass */
    --measure: 72ch;
    --standard-margin: 10px;
    --large-margin: 20px;
}

html { background: var(--glass); position: relative; min-height: 100%; }
body {
    margin: 0 0 190px;
    background: radial-gradient(ellipse at 50% 0%, var(--halo) 0%, var(--glass) 60%) fixed;
    color: var(--phosphor);
    font: 300 15px/1.65 "Martian Mono", ui-monospace, monospace;
    font-variation-settings: "wdth" 87.5;
    text-shadow: 0 0 6px var(--glow);
    -webkit-font-smoothing: antialiased;
}
body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2000;
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px);
}
::selection { background: var(--phosphor); color: var(--glass); text-shadow: none; }

a, a:visited { color: inherit; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
a:hover, a:focus { background: var(--phosphor); color: var(--glass); text-shadow: none; text-decoration: none; }
:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }

/* ---------- navbar = status line */
.navbar-default {
    background: transparent; border: 0; border-bottom: 1px solid var(--faint);
    border-radius: 0; margin-bottom: 24px; min-height: 0;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a { color: var(--dim); font-size: 13px; text-shadow: none; }
.navbar-default .navbar-brand::before { content: "~/"; color: var(--faint); }
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus { background: var(--phosphor); color: var(--glass); }
.navbar-default .navbar-nav > li > a { text-decoration: none; }
.navbar-default .navbar-toggle { border-color: var(--faint); }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: var(--glass-2); }
.navbar-default .navbar-toggle .icon-bar { background: var(--phosphor); }
.navbar-default .navbar-collapse { border-color: var(--faint); }
.dropdown-menu {
    background: var(--glass-2); border: 1px solid var(--faint); border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .6); padding: 6px 0; max-height: 75vh; overflow-y: auto;
}
.dropdown-menu > li > a { color: var(--phosphor); font-size: 13px; text-decoration: none; white-space: normal; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--phosphor); color: var(--glass); }
.navbar-default .navbar-nav .open .dropdown-menu > li > a { color: var(--phosphor); }
.caret { border-top-color: currentColor; }

/* ---------- content sits on the glass; the week's task (the .jumbotron) gets the terminal window frame,
   so the assignment stands apart from the exercise, as the old box did */
body > .container { padding: 8px 28px 26px; }
@media (max-width: 767px) {
    body > .container { padding: 8px 16px 20px; }
}
.container .jumbotron,
body > .container .jumbotron {
    background: var(--glass); color: inherit;
    border: 1px solid var(--faint); border-radius: 14px;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, .55), 0 0 0 6px #020b05, 0 0 60px rgba(60, 200, 120, .08);
    padding: 20px 24px 12px; margin: 12px 6px 32px; width: auto !important;   /* pages set width: 100% inline */
}
.jumbotron h3 { margin-top: 0; }
.jumbotron hr { margin: 14px 0; }
@media (max-width: 767px) {
    body > .container .jumbotron { padding: 16px 16px 8px; margin: 10px 6px 24px; }
}
p, li { max-width: var(--measure); text-align: left; }
.jumbotron p { color: var(--dim); font-size: 15px; font-weight: 300; }
h1, .jumbotron h1 {
    text-align: left;
    font-weight: 800; font-size: clamp(30px, 5.6vw, 64px); line-height: 1;
    font-variation-settings: "wdth" 112.5; letter-spacing: -.02em; margin: 8px 0 12px;
    text-shadow: 0 0 18px var(--glow); color: var(--phosphor);
}
h2, h3, h4, h5 {
    font-family: inherit; color: var(--phosphor); font-variation-settings: "wdth" 112.5;
    line-height: 1.25; margin: 1.6em 0 .6em; text-align: left;   /* the old bootstrap.css justifies text */
}
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; }
h5 { font-size: 14px; font-weight: 500; }
h2::before { content: "## "; color: var(--faint); }
h3::before { content: "### "; color: var(--faint); }
h4::before { content: "#### "; color: var(--faint); }
hr { border: 0; border-top: 1px dashed var(--faint); margin: 28px 0; }
strong, b { font-weight: 700; }
ul { padding-left: 2.2ch; }
ul > li::marker { content: "- "; color: var(--dim); }
ol > li::marker { color: var(--dim); }

/* ---------- figures */
/* figures line up with the text, like output in a terminal (lists keep their indent) */
.pic { display: block; width: 100%; text-align: left; padding: 4px 0; line-height: 1;
       margin: var(--large-margin) 0; }
.container p img, .pic img, .pic video {
    display: block; max-width: 100%; height: auto; margin: 15px 0;
    padding: 4px; border: 1px solid var(--faint); border-radius: 8px;
    background: var(--well); box-shadow: 0 0 24px rgba(0, 0, 0, .5);
}
legend {
    display: block; width: 100%; margin: 8px 0 0; border: 0; text-align: left;
    color: var(--dim); font-size: 12px; line-height: 18px;
}
legend::before { content: "fig: "; color: var(--faint); }
video { max-width: 100%; }
#cv { border-radius: 14px; margin: 30px auto !important; text-align: center; border: 1px solid var(--faint); padding: 5px; display: block; }
.video-container.fluidMedia { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container.fluidMedia iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 1px solid var(--faint); }

/* ---------- code: prettify tokens by phosphor brightness
   (prefixed with html[data-theme] so it wins over prettify.css and github.css, which load later) */
pre, pre.prettyprint, code { font-family: inherit; font-variation-settings: "wdth" 87.5; text-shadow: none; }
html[data-theme="terminal"] pre, html[data-theme="terminal"] pre.prettyprint {
    background: var(--well) !important; color: var(--phosphor); border: 1px solid var(--faint) !important;
    border-radius: 8px; padding: 12px 14px !important; font-size: 12.5px; line-height: 1.55;
    overflow: auto; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere;
}
html[data-theme="terminal"] code { background: var(--well); color: var(--phosphor); border-radius: 4px; padding: 1px 5px; }
html[data-theme="terminal"] pre code { background: none; padding: 0; }
html[data-theme="terminal"] .prettyprint .kwd, html[data-theme="terminal"] .prettyprint .typ,
html[data-theme="terminal"] .prettyprint .tag { color: #c8ffd8; font-weight: 700; }
html[data-theme="terminal"] .prettyprint .str, html[data-theme="terminal"] .prettyprint .atv,
html[data-theme="terminal"] .prettyprint .lit { color: #8dffb0; }
html[data-theme="terminal"] .prettyprint .com { color: var(--dim); font-style: italic; }
html[data-theme="terminal"] .prettyprint .pln, html[data-theme="terminal"] .prettyprint .atn,
html[data-theme="terminal"] .prettyprint .dec, html[data-theme="terminal"] .prettyprint .var,
html[data-theme="terminal"] .prettyprint .fun { color: #b4ffc9; }
html[data-theme="terminal"] .prettyprint .pun, html[data-theme="terminal"] .prettyprint .opn,
html[data-theme="terminal"] .prettyprint .clo { color: #5fcf87; }
html[data-theme="terminal"] ol.linenums { margin: 0; padding-left: 5ch; color: var(--faint); }
html[data-theme="terminal"] ol.linenums li { background: none !important; list-style-type: decimal; max-width: none; }
html[data-theme="terminal"] ol.linenums li::marker { color: var(--faint); content: counter(list-item) "  "; }

/* ---------- nothing wider than the terminal window */
body > .container .container { width: auto; max-width: 100%; padding: 0; }
body > .container table:not(.stl-ascii table) { display: block; max-width: 100%; overflow-x: auto; }
body > .container iframe, body > .container video, body > .container img { max-width: 100%; }

/* ---------- tables */
table, .table, .tableizer-table, .tg { color: var(--phosphor); background: transparent; border-collapse: collapse; margin: 16px 0; }
table td, table th, .table > tbody > tr > td, .table > thead > tr > th,
.tg td, .tg th, .tableizer-table td, .tableizer-table th {
    border: 1px solid var(--faint) !important; padding: 6px 10px; background: transparent !important;
    color: var(--phosphor) !important; font-family: inherit !important; font-size: 13px;
}
table th, .tableizer-firstrow td, .tableizer-table th, .tg th { background: var(--phosphor) !important; color: var(--glass) !important; text-shadow: none; }
.table-responsive { border: 0; }

/* ---------- buttons */
.btn-primary, .btn-primary:visited {
    background: var(--phosphor); color: var(--glass); border: 0; border-radius: 4px;
    text-shadow: none; text-decoration: none; font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus { background: #c8ffd8; color: var(--glass); }

/* ---------- footer: after the content, one compact line (the credits stay in the original look) */
body { margin-bottom: 0; }
#footer {
    position: static; height: auto; min-height: 0; width: auto; margin: 28px 0 0;
    background: transparent; border-top: 1px solid var(--faint); padding: 14px 16px 22px;
    color: var(--dim); font-size: 11px; text-align: center;
}
#footer .license { display: none; }
#cclicense { margin: 0; font-size: 11px; text-align: center; }
#cclicense p { max-width: none; margin: 0 auto; text-align: center; }
#cclicense img { height: 14px !important; filter: grayscale(1) brightness(1.6) sepia(1) hue-rotate(80deg) saturate(3); }
.theme-switch { display: inline-block; margin: 0 0 8px; }

/* ---------- live terminal bits added by terminal.js */
.tty-cmd { color: var(--phosphor); margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tty-cmd .ps1 { color: var(--dim); }
.tty-caret {
    display: inline-block; width: .6em; height: 1.1em; background: var(--phosphor); vertical-align: -.18em;
    box-shadow: 0 0 8px var(--glow); animation: tty-blink 1.06s steps(1) infinite;
}
@keyframes tty-blink { 50% { opacity: 0; } }
.tty-shell { margin-top: 36px; padding-top: 14px; border-top: 1px dashed var(--faint); font-size: 14px; }
.tty-shell .out { margin: 0 0 10px; white-space: pre-wrap; max-width: none; }
.tty-shell .prompt { display: flex; align-items: baseline; }
.tty-shell label { color: var(--dim); white-space: pre; font-weight: 300; margin: 0; }
.tty-shell input {
    flex: none; width: 1ch; max-width: 100%; background: none; border: 0; outline: 0; padding: 0;
    color: var(--phosphor); font: inherit; text-shadow: inherit; caret-color: transparent;
}
.tty-shell .inv, .tty-inv { background: var(--phosphor); color: var(--glass); text-shadow: none; padding: 0 4px; }
/* 3D models: ASCII <-> solid with a glitch (stl-viewer.js) */
.stl-stage {
    position: relative; width: 100%; max-width: 640px; margin: 15px 0;
    border: 1px solid var(--faint); border-radius: 8px; background: var(--well); overflow: hidden; cursor: grab;
}
.stl-stage:active { cursor: grabbing; }
.stl-layer { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.stl-ascii { color: var(--phosphor); overflow: hidden; }
/* AsciiEffect draws with a <table>: keep the site's table styles off it */
.stl-ascii table { margin: 0 auto !important; border: 0 !important; background: none !important; }
.stl-ascii td { border: 0 !important; padding: 0 !important; background: none !important; color: inherit !important;
                font-size: inherit !important; font-family: inherit !important; line-height: inherit !important; text-shadow: inherit; }
.stl-stage[data-view="solid"] .stl-ascii,
.stl-stage[data-view="ascii"] .stl-solid { visibility: hidden; }
.stl-stage.glitch .stl-ascii, .stl-stage.glitch .stl-solid { visibility: visible; }
.stl-stage.glitch[data-view="solid"] .stl-solid,
.stl-stage.glitch[data-view="ascii"] .stl-ascii { animation: stl-glitch .5s steps(1) both; z-index: 1; }
.stl-stage.glitch { animation: stl-flicker .5s steps(1); }
@keyframes stl-glitch {
    0%   { clip-path: inset(12% 0 72% 0); transform: translateX(-8px); }
    12%  { clip-path: inset(58% 0 18% 0); transform: translateX(6px); }
    25%  { clip-path: inset(30% 0 44% 0); transform: translateX(-4px); }
    37%  { clip-path: inset(0 0 60% 0);   transform: translateX(10px); }
    50%  { clip-path: inset(70% 0 4% 0);  transform: translateX(-6px); }
    62%  { clip-path: inset(20% 0 30% 0); transform: translateX(3px); }
    75%  { clip-path: inset(0 0 22% 0);   transform: translateX(-2px); }
    87%  { clip-path: inset(6% 0 0 0);    transform: translateX(1px); }
    100% { clip-path: inset(0);           transform: none; }
}
@keyframes stl-flicker {
    0%, 50% { filter: brightness(1.5) contrast(1.3); }
    25%, 75% { filter: brightness(.8); }
    100% { filter: none; }
}
.stl-switch { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; gap: 4px; }
.stl-switch button {
    font: inherit; font-size: 11px; line-height: 1; padding: 5px 8px; cursor: pointer;
    background: var(--glass-2); color: var(--dim); border: 1px solid var(--faint); border-radius: 4px; text-shadow: none;
}
.stl-switch button[aria-pressed="true"] { background: var(--phosphor); color: var(--glass); border-color: var(--phosphor); }
.stl-switch button:hover { color: var(--phosphor); }

/* theme switch in the footer */
.theme-switch button {
    font: inherit; background: none; border: 1px solid var(--faint); color: var(--dim); border-radius: 4px;
    padding: 4px 10px; cursor: pointer; text-shadow: none;
}
.theme-switch button:hover { background: var(--phosphor); color: var(--glass); }

/* "motion off" in FabFarmOS */
html.fab-still .tty-caret { animation: none; }

/* ---------- home page: the live terminal (index.html, .home-terminal) */
.home-terminal .wrap { max-width: 1120px; margin: 0 auto; padding: 24px 16px 32px; }
.home-terminal .status {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
    color: var(--dim); font-size: 12px; padding-bottom: 16px;
}
.home-terminal .status nav { display: flex; gap: 20px; flex-wrap: wrap; }
.home-terminal .tty {
    background: var(--glass-2); border: 1px solid var(--faint); border-radius: 14px;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, .55), 0 0 0 6px #020b05, 0 0 60px rgba(60, 200, 120, .08);
    padding: 20px 22px 18px; min-height: 560px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 8px 28px; cursor: text;
}
.home-terminal .log { min-width: 0; font-size: 14px; }
.home-terminal .log p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-width: none; }
.home-terminal .log .boot { color: var(--dim); }
.home-terminal .log .cmd::before { content: "lucio@fabfarm:~$ "; color: var(--dim); }
.home-terminal .log .out { margin-bottom: 10px; }
.home-terminal .log .inv { background: var(--phosphor); color: var(--glass); text-shadow: none; padding: 0 4px; }
.home-terminal .log ol { list-style: none; margin: 0 0 10px; padding: 0; columns: 2 34ch; column-gap: 32px; }
.home-terminal .log ol li { break-inside: avoid; padding-left: 3.4ch; text-indent: -3.4ch; max-width: none; }
.home-terminal .log ol li::marker { content: none; }
.home-terminal .log ol li span { color: var(--dim); }
.home-terminal h1 { font-size: clamp(34px, 6.4vw, 72px); line-height: .95; margin: 6px 0 2px; }
.home-terminal .tagline { color: var(--dim); margin: 0 0 12px; }
.home-terminal .prompt { display: flex; align-items: baseline; }
.home-terminal .prompt label { color: var(--dim); white-space: pre; font-weight: 300; margin: 0; }
.home-terminal .prompt input {
    flex: none; width: 1ch; max-width: 100%; background: none; border: 0; outline: 0; padding: 0;
    color: var(--phosphor); font: inherit; text-shadow: inherit; caret-color: transparent;
}
.home-terminal .scan { align-self: start; min-width: 0; }
.home-terminal .scan .stl-stage { border: 0; background: transparent; max-width: none; margin: 0; }
.home-terminal .scan figure { margin: 0; }
.home-terminal .scan figcaption { color: var(--dim); font-size: 12px; margin-top: 6px; }
.home-terminal section { max-width: var(--measure); margin: 64px 0 0; }
.home-terminal section h2 { font-size: 20px; margin: 0 0 14px; }
.home-terminal .gitlog { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.home-terminal .gitlog li { display: grid; grid-template-columns: 11ch 1fr; gap: 16px; padding: 3px 0; border-bottom: 1px dashed var(--faint); max-width: none; }
.home-terminal .gitlog li::marker { content: none; }
.home-terminal .gitlog time { color: var(--dim); }
.home-terminal .gitlog a { text-decoration: none; }
@media (max-width: 860px) {
    .home-terminal .tty { grid-template-columns: 1fr; min-height: 0; padding: 16px; }
    .home-terminal .scan { order: -1; max-width: 340px; }
}

/* ---------- photos: ASCII first, then a glitch into the real image (terminal.js) */
.img-glitch { position: relative; display: table; margin: 15px 0; max-width: 100%; }
.container p .img-glitch img, .pic .img-glitch img, .img-glitch video { margin: 0; max-width: 100%; }
.img-glitch.pending img, .img-glitch.ascii img, .img-glitch.pending video, .img-glitch.ascii video { opacity: 0; }
.img-ascii {
    position: absolute; inset: 5px; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 4px;
    background: var(--well); color: var(--phosphor); overflow: hidden; white-space: pre; pointer-events: none;
    font-family: inherit; text-shadow: 0 0 4px var(--glow);
}
.img-glitch.ascii.glitch img, .img-glitch.ascii.glitch video { opacity: 1; animation: stl-glitch .5s steps(1) both; }
.img-glitch.glitch .img-ascii { animation: img-ascii-out .5s steps(1) both; }
.img-glitch.glitch { animation: stl-flicker .5s steps(1); }
@keyframes img-ascii-out {
    0%, 30% { opacity: 1; transform: translateX(4px); }
    45% { opacity: .6; transform: translateX(-6px); }
    70% { opacity: .3; transform: none; }
    100% { opacity: 0; }
}

/* ---------- menus: one line per item; Exercises opens as a two-column panel (no scrolling) */
.dropdown-menu > li > a { white-space: nowrap; padding: 4px 16px; line-height: 1.5; }
@media (min-width: 768px) {
    .dropdown-menu { max-height: none; overflow: visible; min-width: 30ch; padding: 10px 0; }
    #exercises.dropdown-menu { columns: 2; column-gap: 0; width: max-content; max-width: 92vw; }
    #exercises.dropdown-menu > li { break-inside: avoid; }
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { white-space: normal; padding-left: 24px; }
}

/* ---------- scrollbars in phosphor, everywhere */
html, .dropdown-menu, pre, body > .container table, .navbar-collapse {
    scrollbar-width: thin; scrollbar-color: var(--dim) var(--glass);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--glass); }
::-webkit-scrollbar-thumb { background: var(--faint); border: 2px solid var(--glass); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }
::-webkit-scrollbar-corner { background: var(--glass); }
.menu-date { color: var(--dim); }
.dropdown-menu > li > a:hover .menu-date, .dropdown-menu > li > a:focus .menu-date { color: var(--glass); }
.dropdown-menu > li { list-style: none; max-width: none; }
.dropdown-menu > li::marker { content: none; }

/* ---------- warning after code kept as history but wrong */
.code-warning {
    border: 1px solid var(--faint); border-left: 4px solid #ffd28d; border-radius: 6px;
    background: rgba(255, 210, 141, .06); color: #ffe2b0; padding: 8px 12px; margin: 10px 0 22px; font-size: 13px;
}
.code-warning strong { background: #ffd28d; color: var(--glass); text-shadow: none; padding: 0 5px; margin-right: 6px; font-weight: 600; }

/* ---------- search results (search / grep in the shells) */
.search-out { margin: 0 0 10px; }
.search-out .search-count { color: var(--dim); margin: 0 0 4px; }
.search-hit { margin: 0 0 3px; max-width: none; white-space: normal; overflow-wrap: anywhere; font-size: 13px; }
.search-hit a { color: var(--dim); }
.search-hit mark, .search-out mark { background: var(--phosphor); color: var(--glass); text-shadow: none; padding: 0 1px; }

/* status line while an STL downloads (stl-viewer.js) */
.stl-status { position: absolute; left: 12px; top: 10px; margin: 0; z-index: 2; font-size: 12px; color: var(--dim); max-width: none; }
.stl-classic { position: relative; display: inline-block; max-width: 100%; }

/* Phone widths only (desktop unchanged): the Gantt chart scrolls inside itself,
   long inline code wraps instead of widening the page. */
@media (max-width: 640px) {
    #ganttChart { max-width: 100%; overflow-x: auto; }
    p code, li code, td code, legend code { overflow-wrap: anywhere; white-space: normal; }
}

/* ---------- FabFarmOS (media/fabos.js): output of the shells, the drop-down console, toasts, overlays */
.fab-out { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-width: none; }
.fab-echo .ps1 { color: var(--dim); }
.fab-dim { color: var(--dim); }
.fab-hi { color: var(--phosphor); font-weight: 600; text-shadow: 0 0 10px var(--glow); }
.fab-dir { font-weight: 700; }
.fab-anim { white-space: pre; overflow: hidden; line-height: 1.25; margin: 2px 0 6px; cursor: default; }
.tty-shell .fab-out { margin: 0; }
.tty-shell .fab-echo { margin-top: 6px; }
.fabos-pw input { color: transparent !important; text-shadow: none !important; }

.fabos-drop {
    position: fixed; left: 0; right: 0; top: 0; height: 55vh; z-index: 1990;
    display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.5;
    background: var(--glass-2); background: color-mix(in srgb, var(--glass-2) 93%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--faint); box-shadow: 0 14px 50px rgba(0, 0, 0, .7), inset 0 0 80px rgba(0, 0, 0, .45);
    transform: translateY(-104%); visibility: hidden; transition: transform .22s ease-out, visibility 0s .22s;
}
.fabos-drop.open { transform: none; visibility: visible; transition: transform .22s ease-out; }
.fabos-bar {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 16px;
    border-bottom: 1px dashed var(--faint); color: var(--dim); font-size: 11px;
}
.fabos-bar button { font: inherit; background: none; border: 0; color: var(--dim); cursor: pointer; padding: 2px 0; text-shadow: none; }
.fabos-bar button:hover { color: var(--phosphor); }
.fabos-scroll { flex: 1; overflow-y: auto; padding: 10px 16px 14px; scrollbar-width: thin; scrollbar-color: var(--dim) transparent; }
.fabos-line, .home-terminal .prompt, .tty-shell .prompt { display: flex; align-items: baseline; }
.fabos-line label { color: var(--dim); white-space: pre; font-weight: 300; margin: 0; }
.fabos-line input {
    flex: none; width: 1ch; max-width: 100%; background: none; border: 0; outline: 0; padding: 0;
    color: var(--phosphor); font: inherit; text-shadow: inherit; caret-color: transparent;
}
.fabos-rain { position: absolute; left: 0; right: 0; bottom: 0; top: 26px; margin: 0; padding: 4px 16px;
              background: var(--glass-2); line-height: 1.2; cursor: pointer; }
.fabos-btn {
    position: fixed; right: 14px; bottom: 14px; z-index: 1989; font: 600 13px/1 "Martian Mono", ui-monospace, monospace;
    padding: 8px 10px; border-radius: 6px; cursor: pointer; background: var(--glass-2); color: var(--phosphor);
    border: 1px solid var(--faint); box-shadow: 0 0 18px rgba(0, 0, 0, .6); text-shadow: 0 0 6px var(--glow); opacity: .75;
}
.fabos-btn:hover, .fabos-btn:focus-visible, .fabos-btn[aria-expanded="true"] { opacity: 1; border-color: var(--dim); }

.fabos-toasts { position: fixed; top: 36px; right: 14px; z-index: 1995; display: flex; flex-direction: column; gap: 8px;
                align-items: flex-end; pointer-events: none; max-width: min(360px, calc(100vw - 28px)); }
.fabos-toast {
    background: var(--glass-2); border: 1px solid var(--dim); border-left: 4px solid var(--phosphor); border-radius: 6px;
    padding: 8px 12px; font-size: 12.5px; color: var(--phosphor); box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
    animation: fabos-in .25s ease-out; transition: opacity .4s, transform .4s;
}
.fabos-toast small { display: block; color: var(--dim); font-size: 11px; }
.fabos-toast.out { opacity: 0; transform: translateX(20px); }
@keyframes fabos-in { from { opacity: 0; transform: translateX(30px); } }

.fabos-screen { position: fixed; inset: 0; z-index: 1996; background: #000; overflow: hidden; padding: 16px; }
.fabos-screen-text { white-space: pre-wrap; color: var(--phosphor); font-size: 13px; line-height: 1.45; text-shadow: 0 0 6px var(--glow); }
.fabos-off::before {   /* the CRT turning off: the picture collapses to a line, then to a dot */
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 100vh; margin-top: -50vh;
    background: var(--phosphor); box-shadow: 0 0 40px var(--phosphor); animation: fabos-crt .8s ease-in forwards;
}
@keyframes fabos-crt {
    0% { transform: scale(1, 1); opacity: .9; }
    45% { transform: scale(1, .004); opacity: 1; }
    80% { transform: scale(.004, .004); opacity: 1; }
    100% { transform: scale(0, 0); opacity: 0; }
}
.fabos-wake { position: absolute; left: 0; right: 0; bottom: 30%; text-align: center; color: var(--faint); animation: tty-blink 1.6s steps(1) infinite; }
.fabos-saver { position: fixed; inset: 0; z-index: 1997; width: 100vw; height: 100vh; max-width: none; max-height: none; background: var(--glass); cursor: none; }

html.fabos-melt { overflow: hidden; }
html.fabos-melt body > :not(.fabos-screen):not(.fabos-toasts) { animation: fabos-melt 1.7s cubic-bezier(.3, 0, .8, .5) both; transform-origin: 50% 0; }
@keyframes fabos-melt {
    0% { transform: none; filter: none; }
    8% { transform: translateX(-10px) skewX(6deg); filter: hue-rotate(60deg) contrast(1.6); clip-path: inset(10% 0 60% 0); }
    16% { transform: translateX(12px); filter: invert(.2); clip-path: inset(50% 0 10% 0); }
    24% { transform: none; filter: none; clip-path: none; }
    100% { transform: translateY(85vh) scaleY(1.8) skewX(-10deg); filter: blur(4px) brightness(.4); opacity: 0; }
}
body.fabos-roll { animation: fabos-roll 1.2s ease-in-out; }
@keyframes fabos-roll { to { transform: rotate(360deg); } }
body.fabos-glitch { animation: stl-flicker .5s steps(1); }
/* "motion off" in FabFarmOS */
html.fab-still .fabos-drop, html.fab-still .fabos-drop.open { transition: none; }
html.fab-still .fabos-toast, html.fab-still .fabos-wake { animation: none; }
html.fab-still .fabos-off::before { display: none; }

/* ---------- phosphor colours, unlocked by root in FabFarmOS ("theme amber" / "theme blue"; set before paint in <head>) */
html[data-phosphor="amber"] {
    --glass: #140c02; --glass-2: #231503; --well: #0b0601; --phosphor: #ffc864; --dim: #b8812c; --faint: #5e4015;
    --glow: rgba(255, 190, 80, .35); --halo: #2e1d06;
}
html[data-phosphor="blue"] {
    --glass: #020c16; --glass-2: #041626; --well: #01060c; --phosphor: #8fd8ff; --dim: #3f86b8; --faint: #1d4566;
    --glow: rgba(120, 200, 255, .35); --halo: #07233a;
}
html[data-phosphor] .prettyprint .kwd, html[data-phosphor] .prettyprint .typ, html[data-phosphor] .prettyprint .tag,
html[data-phosphor] .prettyprint .str, html[data-phosphor] .prettyprint .atv, html[data-phosphor] .prettyprint .lit,
html[data-phosphor] .prettyprint .pln, html[data-phosphor] .prettyprint .atn, html[data-phosphor] .prettyprint .dec,
html[data-phosphor] .prettyprint .var, html[data-phosphor] .prettyprint .fun { color: var(--phosphor) !important; }
html[data-phosphor] .prettyprint .pun, html[data-phosphor] .prettyprint .opn, html[data-phosphor] .prettyprint .clo { color: var(--dim) !important; }
html[data-phosphor] .btn-primary:hover { background: var(--dim); }
html[data-phosphor] body > .container .jumbotron { box-shadow: inset 0 0 80px rgba(0, 0, 0, .55), 0 0 0 6px var(--well); }

/* ---------- the page prints like terminal output (terminal.js printReveal) */
.rv-wait { clip-path: inset(0 0 100% 0); }
.rv-lines { animation: rv-lines var(--rv-ms, 300ms) steps(var(--rv-steps, 4), end) both; }
.rv-type { animation: rv-type var(--rv-ms, 300ms) steps(var(--rv-steps, 20), end) both; position: relative; }
.rv-type::after {
    content: ""; display: inline-block; width: .55em; height: 1em; margin-left: .1em; vertical-align: -.12em;
    background: var(--phosphor); box-shadow: 0 0 8px var(--glow);
}
@keyframes rv-lines { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rv-type  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2em 0 0); } }

/* the blinking K on the About page (FabFarmOS: opens the LIST GAMES story) */
.cp200-k {
    font: inherit; font-weight: 700; line-height: 1; padding: 0 .25em; margin: 0; border: 0; cursor: pointer;
    background: var(--phosphor); color: var(--glass); text-shadow: none; animation: tty-blink 1.06s steps(1) infinite;
}
html.fab-still .cp200-k { animation: none; }

/* ---------- home boot screen: waits for the first key (home.js), nothing else shows meanwhile */
html.fab-gate body { overflow: hidden; }
html.fab-gate body > *:not(.boot-gate) { visibility: hidden; }
.boot-gate {
    position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at 50% 40%, #0a2e18 0%, var(--glass) 70%); cursor: pointer; padding: 16px;
}
.boot-gate-screen {
    margin: 0; padding: 28px 32px !important; max-width: 100%; white-space: pre-wrap; font-size: clamp(14px, 2.2vw, 20px) !important;
    background: var(--glass-2) !important; border: 1px solid var(--faint) !important; border-radius: 14px;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, .55), 0 0 0 6px #020b05, 0 0 60px rgba(60, 200, 120, .08);
    color: var(--phosphor); text-shadow: 0 0 6px var(--glow);
}
.boot-gate.out { animation: stl-flicker .4s steps(1) both, boot-gate-off .4s ease-in both; }
@keyframes boot-gate-off { to { opacity: 0; transform: scaleY(.02); } }