/* The RMDW Academy platform in the rmdw.ai look (2026-10-27). Loaded last: it swaps the RMDW/OS tokens for
   paper, ink and one crimson, flattens the bevels into rules, drops the sunset wallpaper, and turns the
   menu bar and taskbar into the site's meta row and an ink status bar. The markup and scripts are unchanged. */

:root {
  --ink: #0d0c0e; --cream: #ecE8df; --face: #ecE8df; --hi: transparent; --lt: transparent; --sh: rgba(13, 12, 14, .35); --dk: #0d0c0e;
  --paper: #fff; --text: #0d0c0e; --mut: rgba(13, 12, 14, .72);
  --crimson: #d6283c; --crimson2: #d6283c; --crimsonD: #a71d2e; --gold: #d6283c; --hl: rgba(214, 40, 60, .22);
  --serif: "Anton", "Impact", "Arial Narrow", sans-serif;
  --raised: inset 0 0 0 2px #0d0c0e;
  --sunken: inset 0 0 0 1px rgba(13, 12, 14, .3);
  --pressed: inset 0 0 0 2px #d6283c;
  --redraise: inset 0 0 0 2px #0d0c0e;
  --tb: 50px; --mb: 64px;
}
body { background: var(--cream); font-size: 16px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: rgba(13, 12, 14, .35); box-shadow: none; }
.os-wall { display: none; }

/* top: the site's meta row */
.os-mb { height: 64px; padding: 0; gap: 0; background: var(--cream); box-shadow: none; border-bottom: 2px solid var(--ink); }
.os-mb__back { display: none; }
.os-mb__brand { height: 100%; padding: 0 22px; margin: 0; gap: 12px; border-right: 1px solid var(--ink); font: 700 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.os-mb__brand img { display: block; height: 48px; width: auto; }
.os-mb__mark { display: none; }
.os-mb__items { height: 100%; gap: 0; margin-left: auto; }
.os-mb__a { height: 100%; padding: 0 20px; border-left: 1px solid var(--ink); font: 600 12.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: none !important; }
.os-mb__a:hover, .os-mb__brand:hover { background: var(--ink); color: var(--cream) !important; }
.os-mb__go { background: var(--crimson); color: #fff !important; }
.os-mb__jah { display: none; }

/* bottom: an ink status bar */
.os-task { height: var(--tb); background: var(--ink); color: var(--cream); box-shadow: none; padding: 0 8px; gap: 8px; }
.os-task .btn.ghost, .os-task .os-btn { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(236, 232, 223, .5); }
.os-task .btn.ghost:hover { background: var(--cream); color: var(--ink); filter: none; }
.os-task .btn:not(.ghost) { box-shadow: none; }
.os-startbtn img { filter: none; }
.os-task__sep { box-shadow: none; background: rgba(236, 232, 223, .3); width: 1px; }
.os-taskwin { background: transparent !important; box-shadow: inset 0 0 0 1px rgba(236, 232, 223, .3) !important; color: var(--cream); font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.os-taskwin img { filter: none; }
.os-tray { box-shadow: none; color: var(--cream); font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.os-tray b { color: #ff6b7d; }

/* windows: ruled panels with an ink title strip */
.desk { padding-top: 34px; gap: 28px; }
.win { padding: 0; background: var(--cream); box-shadow: none; border: 2px solid var(--ink); animation: none; }
.win-title { height: 34px; padding: 0 6px 0 12px; background: var(--ink); gap: 10px; }
.win-title img { width: 18px; height: 18px; }
.win-title > span:not(.win-btns) { font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tbtn { background: transparent; box-shadow: none; color: var(--cream); width: 26px; height: 26px; font: 700 13px/1 var(--mono); }
.tbtn[data-win="min"] { display: none; }
.tbtn:hover { background: var(--crimson); }
.win-status span { background: transparent; box-shadow: none; border-top: 1px solid var(--ink); padding: 8px 12px; font: 600 11.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.win-body { padding: 24px 26px 26px; }

/* buttons: the site's sn-btn */
.btn { min-height: 0; padding: 15px 22px; background: var(--crimson); color: #fff; box-shadow: inset 0 0 0 2px var(--ink); font: 700 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.btn:hover { background: var(--ink); }
.btn:active:not(:disabled) { box-shadow: inset 0 0 0 2px var(--ink); }
.btn.ghost, .os-btn { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); font-weight: 700; }
.btn.ghost:hover, .os-btn:hover { background: var(--ink); color: var(--cream); filter: none; }
.btn[disabled], .btn:disabled { background: rgba(214, 40, 60, .45); color: #fff; box-shadow: none; }
.btn.ghost[disabled] { background: transparent; color: rgba(13, 12, 14, .35); text-shadow: none; box-shadow: inset 0 0 0 2px rgba(13, 12, 14, .25); }

/* type */
.eyebrow { font: 700 12px/1.4 var(--mono); letter-spacing: .1em; color: var(--ink); }
.h { font: 400 clamp(34px, 4vw, 58px)/.98 var(--serif); letter-spacing: 0; text-transform: uppercase; color: var(--ink); }
.h em, h2 em { font-style: normal; color: var(--crimson); }
.p { color: var(--ink); font-size: 17px; }
.marker { font-family: var(--mono); font-weight: 700; font-size: 15px; transform: none; text-transform: uppercase; }

/* the setup wizard */
.wiz-side { background: var(--ink); }
.wiz-side::after { display: none; }
.wiz-side h3 { font: 400 32px/1 var(--serif); text-transform: uppercase; }
.wiz-side p { color: rgba(236, 232, 223, .7); }
.wiz-steps li { color: rgba(236, 232, 223, .65); font: 600 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.wiz-steps li::before { border-color: rgba(236, 232, 223, .65); }
.wiz-steps li.done::before { background-color: var(--cream); }
.wiz-steps li.on::before { background: var(--crimson); border-color: var(--crimson); }
.wiz-foot { border-top: 2px solid var(--ink); box-shadow: none; }
.wiz-prog { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }
.wiz-page .h { font-size: clamp(32px, 3.4vw, 48px); }
.opt { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); font-size: 16px; }
.opt::before { box-shadow: inset 0 0 0 2px var(--ink); }
.opt.on { background: #fff; box-shadow: inset 0 0 0 3px var(--crimson); }
.tile { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.tile::before { box-shadow: inset 0 0 0 1px var(--ink); }
.tile.on { background: #fff; box-shadow: inset 0 0 0 2px var(--crimson); }
.group { border: 1px solid var(--ink); box-shadow: none; }
.group legend { font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.f { font: 700 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.f input, .f select, .f textarea { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); padding: 12px; font: 16px var(--sans); text-transform: none; letter-spacing: 0; }
.found { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.dlg-ic { background: var(--crimson); box-shadow: none; color: #fff; font-family: var(--mono); }
.xp-bar { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }

@media (max-width: 900px) {
  :root { --mb: 56px; }
  .os-mb { height: 56px; overflow-x: auto; }
  .os-mb__brand { padding: 0 14px; }
  .os-mb__brand img { height: 40px; }
  .os-mb__brand span { display: none; }
  .os-mb__a { padding: 0 12px; font-size: 11px; }
  .os-mb__a.os-mb__hide { display: none; }
}

/* the Academy files (files.js): a page icon instead of a folder, a kind tag, locked files dimmed */
.files .ic { width: 24px; height: 30px; margin-top: 0; background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.files .ic::before { left: auto; right: 0; top: 0; width: 8px; height: 8px; background: var(--ink); }
.files li.core .ic { background: var(--crimson); box-shadow: inset 0 0 0 2px var(--ink); }
.files li.core .ic::before { background: var(--ink); }
.files b .chip { display: inline-block; margin-left: 8px; padding: 2px 7px; vertical-align: 3px; font: 700 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--crimson); }
.files b .chip.gold { background: var(--ink); color: var(--cream); }
.files li.locked b, .files li.locked small { opacity: .62; }
.files .check-row { margin-top: 10px; }
.files .check-row .btn { padding: 10px 16px; font-size: 12px; }