/* The lesson "قبل البث بعشر دقائق" at /learning/how-computers-show-pictures/. Its own stylesheet: the lesson
   is a chat app with its own class names, and it does not load site.css. */
@font-face{font-family:"Plex Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"Plex Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Plex Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"Plex Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Two themes, set by js/theme.js on <html>. The night one is the default; the day one
   overrides it below. Screens in the lesson (the monitor, the little stages, the frames,
   the lamps) are drawn dark in both: a screen is dark until its pixels light up. */
:root{
  color-scheme:dark;
  --bar:3.5rem;
  --bg:#040a15;
  --page:radial-gradient(70rem 34rem at 50% -8rem,rgba(0,150,255,.2),transparent 70%),radial-gradient(46rem 34rem at 110% 105%,rgba(1,52,110,.5),transparent 70%),#040a15;
  --panel:#0c1629;
  --panel-2:#081020;
  --cell:#17263f;
  --line:#22365a;
  --text:#eef3fa;
  --soft:#c9d5e6;
  --muted:#8fa3c0;
  --yellow:#ffd200;
  --accent-ink:#ffd200;      /* the yellow, when it is used for text */
  --blue:#3aa8ff;
  --red:#ff6b5e;
  --green:#3ddc97;
  --orange:#ff9838;
  --ax:#ff9838;
  --ay:#b39bff;
  --card:rgba(9,17,33,.92);
  --card-shadow:0 40px 120px -30px #000;
  --wash:rgba(255,255,255,.05);
  --wash-2:rgba(255,255,255,.08);
  --them:#132038;
  --me:#12385a;
  --me-line:#1f5a8c;
  --me-ink:#d9ecff;
  --me-hover:#184a77;
  --draft:#0a1730;
  --draft-line:#2c6aa3;
  --info:rgba(255,210,0,.07);
  --info-line:rgba(255,210,0,.3);
  --code:#060b16;
  --tk:#ff8a7a;
  --tn:#cfd6e4;
  --cr:#ff6b6b;--cg:#5fe08f;--cb:#6ab4ff;
  --tog:#07101f;
  --knob:#3a4a68;
  --wall-a:#33191b;--wall-b:#1f1214;
  --trail:rgba(255,210,0,.28);
  --pixel:#ffffff;
  --toast:#ffffff;--toast-ink:#111111;
  --static-off:#0e131d;      /* the noise behind the opening card */
  --static-lo:30;--static-span:80;
  --font:"Plex Arabic","SF Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  --mono:"SF Mono","Cascadia Mono",Menlo,Consolas,"Courier New",monospace;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#eaf4ff;
  --page:radial-gradient(52rem 30rem at 104% -6rem,rgba(255,214,110,.45),transparent 68%),radial-gradient(60rem 34rem at -8% 8%,rgba(125,196,255,.35),transparent 70%),linear-gradient(180deg,#cfe6ff 0%,#e9f4ff 46%,#f8fbff 100%);
  --panel:#ffffff;
  --panel-2:#f2f7fd;
  --cell:#e2ecf8;
  --line:#cbdaec;
  --text:#0b2545;
  --soft:#2c4667;
  --muted:#4f6988;
  --accent-ink:#8a5a00;
  --blue:#0a6fd1;
  --red:#c8362a;
  --green:#0a7a4b;
  --orange:#b35a00;
  --ax:#b35a00;
  --ay:#6b4fd8;
  --card:rgba(255,255,255,.94);
  --card-shadow:0 40px 90px -40px rgba(13,54,110,.55),0 2px 10px rgba(13,54,110,.08);
  --wash:rgba(13,54,110,.05);
  --wash-2:rgba(13,54,110,.08);
  --them:#eef4fb;
  --me:#d9eaff;
  --me-line:#a3c8f3;
  --me-ink:#0b3b6e;
  --me-hover:#c6defd;
  --draft:#f4f9ff;
  --draft-line:#7fb0e6;
  --info:rgba(255,210,0,.2);
  --info-line:rgba(190,140,0,.55);
  --code:#f1f6fc;
  --tk:#b8321f;
  --tn:#33475f;
  --cr:#c62828;--cg:#177a3a;--cb:#1565c0;
  --tog:#dbe6f3;
  --knob:#94a8c2;
  --wall-a:#f3cfcb;--wall-b:#fae6e3;
  --trail:rgba(255,196,0,.5);
  --pixel:#0b2545;
  --toast:#0b2545;--toast-ink:#ffffff;
  --static-off:#d7e5f4;
  --static-lo:170;--static-span:60;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
html{background:var(--bg);-webkit-text-size-adjust:100%;font-size:16px}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--page);line-height:1.75;overflow:hidden}
h1,h2,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
code{font-family:var(--mono)}
.hl{color:var(--accent-ink)}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px}

/* buttons */
.btn{font:inherit;font-weight:600;border:0;border-radius:13px;padding:.55em 1.3em;cursor:pointer;color:var(--text);background:var(--cell);transition:transform .12s,filter .15s,opacity .15s}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--yellow);color:#15130a;box-shadow:0 10px 30px -12px rgba(255,210,0,.7)}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.big{font-size:1.08rem;padding:.72em 1.8em}
.actions{display:flex;flex-wrap:wrap;gap:8px}

/* opening screen */
.lock{position:fixed;inset:var(--bar) 0 0 0;z-index:5;display:grid;place-items:center;padding:18px;background:var(--page);transition:opacity .5s,visibility .5s;overflow:auto}
.lock.gone{opacity:0;visibility:hidden}
.lock-bg{position:absolute;inset:0;width:100%;height:100%;opacity:.4}
.lock-card{position:relative;width:100%;max-width:520px;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:clamp(22px,5vw,38px);box-shadow:var(--card-shadow);animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.lock-top{display:inline-flex;gap:9px;align-items:center;font-size:.82rem;font-weight:600;color:var(--red);background:rgba(255,107,94,.1);border:1px solid rgba(255,107,94,.32);border-radius:99px;padding:.05em .95em}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--red);animation:pulse 1.3s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,107,94,.6)}100%{box-shadow:0 0 0 12px rgba(255,107,94,0)}}
h1{font-size:clamp(2.1rem,8vw,3.2rem);line-height:1.25;font-weight:600;margin-top:14px}
.lock-sub{color:var(--soft);font-size:1.03rem;margin-top:8px}
.lock-sub b{color:var(--text);font-weight:600}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 26px}
.facts li{font-size:.84rem;color:var(--soft);background:var(--wash);border:1px solid var(--line);border-radius:99px;padding:.05em .95em}
.facts b{color:var(--accent-ink);font-weight:600}
.lock-foot{font-size:.82rem;color:var(--muted);margin-top:18px}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* layout */
.app{height:calc(100vh - var(--bar));height:calc(100dvh - var(--bar));max-width:1140px;margin:0 auto;padding:14px;display:grid;gap:0 16px;
  grid-template-columns:minmax(0,1fr) minmax(330px,430px);grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"head side" "thread side"}
.head{grid-area:head;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0}
.who{display:flex;align-items:center;gap:12px;min-width:0}
.avatar{flex:none;width:44px;height:44px;border-radius:13px;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center}
.who b{display:block;font-weight:600;line-height:1.35}
.state{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);line-height:1.4}
.state i{width:8px;height:8px;border-radius:50%;background:var(--red)}
.state.part i{background:var(--orange)}
.state.live i{background:var(--green)}
.tools{display:flex;align-items:center;gap:8px}
.clock{font:600 1rem var(--mono);padding:.22em .7em;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);letter-spacing:.04em}
.clock.warn{color:var(--orange);border-color:rgba(255,152,56,.5)}
.clock.late{color:var(--red);border-color:rgba(255,107,94,.5)}
.clock.done{color:var(--green);border-color:rgba(61,220,151,.45)}
.icon{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.icon .wave{display:none}
.icon[aria-pressed="true"]{color:var(--accent-ink)}
.icon[aria-pressed="true"] .wave{display:block}
.icon[aria-pressed="true"] .mute{display:none}

.thread{grid-area:thread;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:16px 14px 30px;background:var(--panel);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:0 0 20px 20px}
.side{grid-area:side;display:flex;flex-direction:column;gap:14px;min-height:0;overflow-y:auto}
.box{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:14px}
.box-h{font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}

/* the display */
.monitor{position:relative;background:#04060a;border-radius:14px;padding:10px;box-shadow:inset 0 0 0 4px #0d121c}
.monitor canvas{display:block;width:100%;aspect-ratio:2/1}
.air{position:absolute;top:16px;inset-inline-end:18px;display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;line-height:1.5;padding:0 .7em;border-radius:6px;background:rgba(4,6,10,.8);color:#8f9bb3;border:1px solid #242c3e}
.air i{width:7px;height:7px;border-radius:50%;background:#8f9bb3}
.air.live{color:#fff;background:var(--red);border-color:var(--red)}
.air.live i{background:#fff;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.sys{display:grid;gap:6px}
.sys li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.88rem;padding:.35em .8em;border-radius:10px;background:var(--panel-2);border:1px solid var(--line)}
.sys em{font-style:normal;font-size:.74rem;font-weight:600;color:var(--red)}
.sys li.fix{border-color:rgba(255,210,0,.45)}
.sys li.fix em{color:var(--accent-ink)}
.sys li.on em{color:var(--green)}
.log li{font-size:.84rem;color:var(--soft);padding:.4em 0;border-top:1px dashed var(--line);line-height:1.6}
.log li:first-child{border-top:0}
.log b{display:block;color:var(--text);font-weight:600}
.log code{font-size:.76rem;color:var(--blue);unicode-bidi:isolate}
.log .empty{color:var(--muted)}

/* messages */
.msg{max-width:min(88%,470px);padding:.5em .95em;border-radius:16px;font-size:.95rem;animation:in .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.msg.them{align-self:flex-start;background:var(--them);border:1px solid var(--line);border-start-start-radius:5px}
.msg.me{align-self:flex-end;background:var(--me);border:1px solid var(--me-line);border-start-end-radius:5px}
.msg.rich{width:100%;max-width:min(100%,470px);padding:12px}
.msg.info{background:var(--info);border-color:var(--info-line)}
.msg.good{border-color:rgba(61,220,151,.5);background:rgba(61,220,151,.08)}
.msg.bad{border-color:rgba(255,152,56,.5);background:rgba(255,152,56,.07)}
.cap{display:block;font-size:.72rem;font-weight:600;color:var(--accent-ink)}
.msg code{font-size:.86em;background:var(--wash-2);padding:.05em .4em;border-radius:6px;unicode-bidi:isolate;direction:ltr;display:inline-block;line-height:1.5}
.msg.sent{display:flex;align-items:center;gap:10px}
.swatch{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);flex:none}
.note{align-self:center;font-size:.74rem;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);border-radius:99px;padding:0 1em;margin:6px 0;animation:in .3s both}
.note.alert{color:var(--orange);border-color:rgba(255,152,56,.4)}
.dots{display:inline-flex;gap:4px;padding:.45em 0}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:dot 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* reply being composed */
.msg.draft{width:100%;max-width:min(100%,470px);background:var(--draft);border:1.5px dashed var(--draft-line);padding:12px}
.draft-h{font-size:.78rem;font-weight:600;color:var(--blue);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.draft-n{font-size:.84rem;color:var(--orange);margin-top:10px}
.draft-f{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.msg.chips{background:none;border:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:100%}
.chipbtn{font:inherit;font-size:.92rem;font-weight:600;color:var(--me-ink);background:var(--me);border:1px solid var(--draft-line);border-radius:99px;padding:.3em 1.1em;cursor:pointer;transition:background .15s,transform .12s}
.chipbtn:hover{background:var(--me-hover)}
.chipbtn:active{transform:scale(.97)}

/* code */
.code{direction:ltr;text-align:left;font-family:var(--mono);font-size:.84rem;line-height:1.7;background:var(--code);border:1px solid var(--line);border-radius:12px;padding:6px;overflow-x:auto}
.ln{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .9em;width:100%;padding:.2em .55em;border-radius:8px}
.ln code{white-space:pre;background:none;padding:0;font-size:1em}
.ln .gl{font-family:var(--font);font-size:.78rem;color:var(--muted);margin-left:auto;direction:rtl;text-align:right;flex-basis:100%;line-height:1.5;padding-bottom:.15em}
.code.tight .gl{flex-basis:auto}
.t-k{color:var(--tk)}.t-f{color:var(--blue)}.t-n{color:var(--tn)}
.v{font-weight:700;color:var(--k)}
.a-x,.msg code.a-x{color:var(--ax)}
.a-y,.msg code.a-y{color:var(--ay)}
.row-h{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.78rem;font-weight:600;color:var(--muted);margin:0 0 8px;min-height:24px}
.pos{font:600 .8rem var(--mono);direction:ltr;unicode-bidi:isolate;color:var(--muted);white-space:nowrap}
.calc{font-size:.8rem;color:var(--soft);margin:2px 0 10px;line-height:1.7}
.calc code{font-size:.92em;background:var(--wash-2);padding:0 .45em;border-radius:6px;unicode-bidi:isolate;direction:ltr;display:inline-block}

/* live screens inside replies */
.stage{position:relative;background:#04060a;border-radius:12px;padding:8px;box-shadow:inset 0 0 0 3px #0d121c}
.stage canvas{display:block;width:100%;aspect-ratio:2/1}
.snap{display:block;width:200px;max-width:100%;aspect-ratio:2/1;border-radius:8px;background:#04060a}
.msg.sent.col{flex-direction:column;align-items:stretch;gap:6px}
.resol{font-size:.78rem;font-weight:600;color:var(--muted);margin-top:8px;text-align:center;min-height:1.75em}

/* pixels: memory meter and pixel shape */
.meter{margin:4px 0 10px}
.meter-h{display:flex;justify-content:space-between;gap:8px;font-size:.8rem;color:var(--soft)}
.meter-h code{font-size:.92em;background:var(--wash-2);padding:0 .45em;border-radius:6px;unicode-bidi:isolate;direction:ltr;display:inline-block}
.bar{height:10px;border-radius:99px;background:var(--cell);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;border-radius:99px;background:var(--blue);transition:width .12s,background .2s}
.bar.over i{background:var(--red)}
.shape{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--soft);margin-bottom:4px}
.shape u{display:block;height:22px;background:var(--pixel);border-radius:3px;text-decoration:none;transition:width .12s}

/* channel: five switches */
.bits{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;direction:ltr}
.bit{display:flex;flex-direction:column;align-items:center;gap:6px;font:inherit;color:inherit;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:10px 2px 8px;cursor:pointer}
.bit .tog{width:32px;height:56px;border-radius:99px;background:var(--tog);border:1px solid var(--line);position:relative;transition:background .15s,border-color .15s}
.bit .tog::after{content:"";position:absolute;left:4px;right:4px;bottom:4px;height:22px;border-radius:99px;background:var(--knob);transition:transform .18s,background .18s}
.bit[aria-pressed=true] .tog{background:rgba(255,210,0,.16);border-color:rgba(255,210,0,.55)}
.bit[aria-pressed=true] .tog::after{transform:translateY(-24px);background:var(--yellow)}
.bit b{font:700 1.1rem/1 var(--mono)}
.bit small{font:600 .76rem/1.2 var(--mono);color:var(--muted);min-height:1.2em}
.bit[aria-pressed=true] small{color:var(--accent-ink)}
.sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.sum div{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:6px 10px;font-size:.72rem;color:var(--muted);line-height:1.5}
.sum b{display:block;font:700 1.15rem/1.4 var(--mono);color:var(--text);direction:ltr;text-align:right}

/* wiring: board, arrow keys, instruction list */
.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;direction:ltr;max-width:330px;margin:0 auto}
.cell{position:relative;aspect-ratio:1;border-radius:22%;background:var(--cell);display:grid;place-items:center;font:700 .7rem var(--mono);color:#15130a;transition:background .15s}
.cell.wall{background:repeating-linear-gradient(45deg,var(--wall-a) 0 5px,var(--wall-b) 5px 10px);box-shadow:inset 0 0 0 1px rgba(255,107,94,.4)}
.cell.from{box-shadow:inset 0 0 0 2px var(--yellow)}
.cell.to{box-shadow:inset 0 0 0 2px var(--green)}
.cell.to svg{width:62%;height:62%}
.cell.trail{background:var(--trail)}
.cell.at::after{content:"";width:46%;height:46%;border-radius:50%;background:var(--yellow);box-shadow:0 0 14px var(--yellow)}
.cell.bump{background:var(--red)}
.keys{display:grid;grid-template-columns:repeat(4,1fr) auto auto;gap:6px;direction:ltr;margin-top:12px}
.key{font:700 1.25rem/1 var(--mono);color:var(--text);background:var(--cell);border:1px solid var(--line);border-radius:12px;padding:.55em 0;cursor:pointer}
.key.word{font:600 .8rem var(--font);padding:0 .9em;color:var(--soft)}
.key:active{transform:scale(.96)}
.seq{display:flex;flex-wrap:wrap;gap:5px;direction:ltr;min-height:42px;margin-top:10px;padding:6px;background:var(--code);border:1px solid var(--line);border-radius:12px;align-items:center}
.seq span{display:inline-flex;align-items:center;gap:3px;font:700 1rem/1 var(--mono);padding:.3em .45em;border-radius:8px;background:var(--cell)}
.seq span small{font:500 .62rem var(--mono);color:var(--muted)}
.seq span.now{background:var(--yellow);color:#15130a}
.seq span.now small{color:#15130a}
.seq span.bad{background:var(--red);color:#fff}
.seq em{font:400 .78rem var(--font);color:var(--muted);font-style:normal;direction:rtl;padding:0 .4em}
.msg.sent .arrows{font:700 1.05rem var(--mono);direction:ltr;letter-spacing:.12em}

/* motion: six frames */
.frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;direction:ltr;margin-top:10px}
.fr{position:relative;border:2px solid transparent;border-radius:10px;padding:0;background:#04060a;cursor:pointer;overflow:hidden;line-height:0}
.fr canvas{display:block;width:100%}
.fr b{position:absolute;top:4px;left:4px;font:700 .68rem/1.5 var(--mono);background:rgba(4,6,10,.85);color:#fff;border-radius:6px;padding:0 .5em}
.fr.sel{border-color:var(--yellow)}
.strip6{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;direction:ltr;width:260px;max-width:100%}
.strip6 canvas{display:block;width:100%;border-radius:4px;background:#04060a}

/* colour reply */
.lamps{position:relative;height:150px;border-radius:12px;background:#000;overflow:hidden;isolation:isolate}
.lamp{position:absolute;width:96px;height:96px;border-radius:50%;mix-blend-mode:screen;left:50%;top:50%}
.lamp.r{transform:translate(-50%,-78%)}
.lamp.g{transform:translate(-84%,-24%)}
.lamp.b{transform:translate(-16%,-24%)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.tile{border-radius:10px;height:48px;display:flex;align-items:flex-end;padding:3px 9px;font-size:.74rem;font-weight:600;color:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.08)}
.tile.dark{color:rgba(255,255,255,.75)}
.sl{display:grid;grid-template-columns:minmax(4.6em,auto) 1fr 3em;align-items:center;gap:10px;margin:12px 0}
.sl label{font-size:.84rem;font-weight:600;line-height:1.35}
.sl label small{display:block;font:600 .72rem var(--mono);color:var(--k);direction:ltr;text-align:right}
.sl output{font:600 .86rem var(--mono);text-align:center;background:var(--cell);border-radius:8px;color:var(--k);direction:ltr}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:99px;background:linear-gradient(to left,#0a0a0a,var(--k));margin:0;cursor:pointer;border:1px solid rgba(255,255,255,.1);outline-offset:6px}
input[type=range][dir=ltr]{background:linear-gradient(to right,#0a0a0a,var(--k))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:5px solid var(--k);box-shadow:0 4px 12px rgba(0,0,0,.5)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:5px solid var(--k);box-shadow:0 4px 12px rgba(0,0,0,.5)}
.c-r{color:var(--cr)}.c-g{color:var(--cg)}.c-b{color:var(--cb)}

/* report */
.rep-h{font-size:.76rem;font-weight:600;color:var(--accent-ink)}
.rep-l{font-size:1.25rem;font-weight:600;line-height:1.4;margin-bottom:10px}
.rep dl{display:grid;grid-template-columns:1fr auto;gap:0 12px;font-size:.9rem;margin-bottom:12px}
.rep dt,.rep dd{padding:.4em 0;border-top:1px dashed var(--line)}
.rep dt{color:var(--soft)}
.rep dd{font-weight:600;text-align:end}
.rep dd.ltr{direction:ltr;font-family:var(--mono);color:var(--accent-ink)}
.recap{display:grid;gap:5px;margin-bottom:14px}
.recap li{font-size:.82rem;color:var(--soft);background:var(--wash);border:1px solid var(--line);border-radius:10px;padding:.35em .8em;line-height:1.6}
.recap b{color:var(--text);font-weight:600}
.recap code{font-size:.74rem;color:var(--blue);background:none;padding:0}

.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,30px);background:var(--toast);color:var(--toast-ink);font-weight:600;font-size:.9rem;padding:.3em 1.2em;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:880px){
  .app{padding:0;gap:0;max-width:none;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"head" "side" "thread"}
  .head{border-radius:0;border-inline:0;border-top:0;padding:10px 12px}
  .avatar{width:40px;height:40px}
  .thread{border-radius:0;border-inline:0;border-bottom:0;padding:14px 10px 40px}
  .side{flex-direction:row;align-items:center;gap:10px;padding:8px 12px;background:var(--panel-2);border-bottom:1px solid var(--line);overflow:visible}
  .side .box{padding:0;border:0;background:none;border-radius:0}
  .side .box-h,.log{display:none}
  .side .box.screen{flex:none;width:150px}
  .side .box.status{flex:1;min-width:0}
  .monitor{padding:5px;border-radius:9px;box-shadow:inset 0 0 0 2px #0d121c}
  .air{top:8px;inset-inline-end:9px;font-size:.6rem;gap:4px;padding:0 .5em}
  .side .air{padding:3px;border-radius:50%;top:7px;inset-inline-end:8px}
  .side .air span{display:none}
  .air i{width:6px;height:6px}
  .sys{grid-template-columns:repeat(3,auto);justify-content:start;gap:4px}
  .sys li{font-size:.7rem;padding:0 .6em;gap:5px;border-radius:99px;line-height:1.8}
  .sys em{font-size:0;width:7px;height:7px;border-radius:50%;background:currentColor}
  .msg{max-width:92%}
  .msg.rich,.msg.draft{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- day theme: the few things a variable cannot say ---------- */
:root[data-theme="light"] .sl output{color:var(--text)}
:root[data-theme="light"] .cell.at::after{box-shadow:0 0 0 2px #8a5a00,0 0 12px var(--yellow)}
:root[data-theme="light"] .cell.from{box-shadow:inset 0 0 0 2px #c79a00}
:root[data-theme="light"] .box,:root[data-theme="light"] .head,:root[data-theme="light"] .thread{box-shadow:0 20px 44px -30px rgba(13,54,110,.45)}
:root[data-theme="light"] .msg.them{border-color:#d5e2f1}
:root[data-theme="light"] .msg.good{background:rgba(11,133,82,.09)}
:root[data-theme="light"] .msg.bad{background:rgba(179,90,0,.08)}
:root[data-theme="light"] .lock-top{background:rgba(200,54,42,.08);border-color:rgba(200,54,42,.35)}
:root[data-theme="light"] .lock-bg{opacity:.55}
:root[data-theme="light"] .tile{border-color:rgba(13,54,110,.15)}

/* ---------- the owlgit bar above the lesson: the way back, and the theme button ---------- */
.site{position:fixed;inset:0 0 auto 0;z-index:6;height:var(--bar);display:flex;align-items:center;gap:14px;padding:0 clamp(12px,3vw,28px);direction:ltr;
  font:500 .84rem/1 ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site .brand{line-height:0;border-radius:8px}
.site .brand img{height:1.9rem;width:auto;display:block;filter:drop-shadow(0 0 .7rem rgba(0,172,251,.5))}
:root[data-theme="light"] .site .brand img{filter:none}
.site .crumb{display:inline-flex;align-items:center;gap:.6ch;color:var(--muted);text-decoration:none;white-space:nowrap}
.site .crumb i{font-style:normal;color:var(--blue)}
.site .crumb:hover{color:var(--text)}
.site .theme{margin-left:auto;display:grid;place-items:center;width:2.3rem;height:2.3rem;padding:0;border-radius:50%;cursor:pointer;color:var(--text);background:var(--panel);border:1px solid var(--line);transition:transform .2s,border-color .2s}
.site .theme:hover{transform:rotate(18deg) scale(1.06);border-color:var(--blue)}
.site .theme svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.site .theme .moon{display:none}
:root[data-theme="light"] .site .theme .sun{display:none}
:root[data-theme="light"] .site .theme .moon{display:block}
body{padding-top:var(--bar)}   /* the bar is fixed; the app starts below it */
@media (max-width:880px){
  .site .crumb span{display:none}   /* on a phone the branch name alone is enough */
}