/* Onboarding mockup. Windows 98 primitives, self-contained so the world's
   mobile !important rules never fight it. Palette matches css/win98.css. */
:root{
  --face:#C0C0C0; --hilite:#FFFFFF; --light:#DFDFDF; --shadow:#808080; --dark:#000;
  --navy:#000080; --navy2:#1084D0; --off:#808080; --off2:#B5B5B5; --teal:#008080;
  --ui:'Tahoma','MS Sans Serif','Geneva','Verdana','DejaVu Sans',sans-serif;
  --mono:'Lucida Console','Courier New',ui-monospace,monospace;
  --rb-h:44px; --notes-w:340px;
  --note-bg:#FFF9D6; --note-ink:#2B2410; --note-line:#E3D48A;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:#1b1b1b;font-family:var(--ui);font-size:15.5px;color:#000;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font-family:var(--ui);font-size:15.5px;color:#000}
input,textarea,select{font-family:var(--ui);font-size:15.5px}

/* ================= review bar (outside the mockup, deliberately not Win98) ================= */
#rb{position:fixed;top:0;left:0;right:0;height:var(--rb-h);z-index:1000;display:flex;align-items:center;gap:8px;
  padding:0 10px;background:var(--note-bg);color:var(--note-ink);border-bottom:1px solid #b8a84e;
  font-family:-apple-system,'Segoe UI',system-ui,sans-serif;font-size:15.5px}
#rb .tag{font-weight:800;letter-spacing:.08em;font-size:13px;background:#2B2410;color:#FFF9D6;padding:3px 7px;border-radius:3px;white-space:nowrap}
#rb button,#rb select{font-family:inherit;font-size:15.5px;height:30px;border:1px solid #b8a84e;background:#fff;color:var(--note-ink);border-radius:6px;padding:0 10px;cursor:pointer}
#rb button:hover{background:#FFF3A8}
#rb button[aria-pressed="true"]{background:#2B2410;color:#FFF9D6;border-color:#2B2410}
#rb select{max-width:260px}
#rb .grp{display:flex;gap:0}
#rb .grp button{border-radius:0}
#rb .grp button:first-child{border-radius:6px 0 0 6px}
#rb .grp button:last-child{border-radius:0 6px 6px 0;border-left:0}
#rb .sp{flex:1}
#rb .brk{display:none}
#rb .lbl{font-size:14.5px;opacity:.75;white-space:nowrap}
#rb #rb-notes{font-weight:700}
#rb button{white-space:nowrap}
@media (max-width:760px){
  :root{--rb-h:80px}
  #rb{gap:5px;padding:5px 6px;flex-wrap:wrap;align-content:center}
  #rb .tag,#rb .hide-sm{display:none}
  #rb .lbl{display:none}
  #rb .brk{display:block;flex-basis:100%;height:0}
  #rb select{flex:1 1 150px;max-width:none;min-width:0}
  #rb button,#rb select{padding:0 8px}
  #rb .sp{display:none}
}

/* ================= notes drawer ================= */
#notes{position:fixed;top:var(--rb-h);left:0;bottom:0;width:var(--notes-w);z-index:900;background:var(--note-bg);color:var(--note-ink);
  border-right:1px solid #b8a84e;overflow-y:auto;transform:translateX(-100%);transition:transform .18s ease;
  font-family:-apple-system,'Segoe UI',system-ui,sans-serif;font-size:17px;padding:14px 14px 90px}
body.notes-open #notes{transform:none}
#notes h2{font-size:18px;margin:0 0 4px}
#notes .intro{font-size:15.5px;line-height:1.45;margin-bottom:12px;opacity:.85}
.nb{border:1px solid var(--note-line);border-radius:8px;background:#fff;margin:0 0 10px;padding:10px 11px;opacity:.72}
.nb.cur{opacity:1;border-color:#2B2410;box-shadow:0 0 0 2px #2B2410}
.nb h3{font-size:15.5px;margin:0 0 3px;display:flex;gap:6px;align-items:baseline;cursor:pointer}
.nb h3 .n{font-weight:800;opacity:.5;min-width:18px}
.nb p{font-size:15px;line-height:1.45;margin:0 0 8px;color:#4a4020}
.nb .rx{display:flex;gap:5px;margin-bottom:7px}
.nb .rx button{font-family:inherit;font-size:14.5px;border:1px solid var(--note-line);background:#fff;border-radius:14px;padding:4px 10px;cursor:pointer;color:var(--note-ink)}
.nb .rx button[aria-pressed="true"]{background:#2B2410;color:#FFF9D6;border-color:#2B2410}
.nb textarea,#notes .gen textarea{width:100%;min-height:58px;resize:vertical;border:1px solid var(--note-line);border-radius:6px;padding:7px;font-family:inherit;font-size:15.5px;line-height:1.4;background:#FFFEF5;color:var(--note-ink)}
#notes .gen{margin-top:16px}
#notes .gen label{display:block;font-weight:700;font-size:15.5px;margin:10px 0 4px}
@media (min-width:761px){ body.notes-open #stage{left:var(--notes-w)} }
@media (max-width:760px){ #notes{width:100%} }

/* ================= stage ================= */
#stage{position:fixed;top:var(--rb-h);left:0;right:0;bottom:0;overflow:hidden;background:var(--teal)}
#stage.wall-clouds{background:linear-gradient(#5B9BD8,#A9CBEA 60%,#D7E6F2)}
#stage.wall-tiles{background-color:#3a6ea5;background-image:linear-gradient(45deg,rgba(255,255,255,.08) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.08) 75%),linear-gradient(45deg,rgba(255,255,255,.08) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.08) 75%);background-size:32px 32px;background-position:0 0,16px 16px}
#stage.wall-houndstooth{background-color:#6d2e46;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.18) 0 6px,transparent 6px 12px),repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 6px,transparent 6px 12px)}
#stage.wall-setup{background:radial-gradient(ellipse at 30% 20%,#1a4fb8,#000060 70%)}
#stage.black{background:#000}
@media (max-width:760px){ #stage{overflow-y:auto;-webkit-overflow-scrolling:touch} }
.scene{position:absolute;inset:0}
@media (max-width:760px){ .scene{position:relative;inset:auto;min-height:100%;padding:10px 8px 90px} }

/* ================= Win98 primitives ================= */
.raised{border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);border-right:2px solid var(--dark);border-bottom:2px solid var(--dark);box-shadow:inset -1px -1px 0 var(--shadow),inset 1px 1px 0 var(--light)}
.sunken{border-top:2px solid var(--shadow);border-left:2px solid var(--shadow);border-right:2px solid var(--hilite);border-bottom:2px solid var(--hilite);box-shadow:inset 1px 1px 0 var(--dark),inset -1px -1px 0 var(--light)}
.w{position:absolute;background:var(--face);display:flex;flex-direction:column;padding:3px;
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);border-right:2px solid var(--dark);border-bottom:2px solid var(--dark);
  box-shadow:inset -1px -1px 0 var(--shadow),inset 1px 1px 0 var(--light);max-width:calc(100vw - 16px)}
.w.pop{animation:pop .12s steps(3)}
@keyframes pop{from{transform:scale(.94);opacity:.4}to{transform:none;opacity:1}}
.tb{height:22px;flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:0 2px 0 4px;background:linear-gradient(90deg,var(--navy),var(--navy2));
  color:#fff;font-weight:700;font-size:14.5px;user-select:none;-webkit-user-select:none;cursor:default;touch-action:none}
.w.blur .tb{background:linear-gradient(90deg,var(--off),var(--off2))}
.tb .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.tb svg{width:14px;height:14px;flex:0 0 auto}
.tbb{width:17px;height:15px;flex:0 0 auto;background:var(--face);padding:0;display:grid;place-items:center;font-size:12px;font-weight:700;line-height:1;cursor:pointer;
  border-top:1px solid var(--hilite);border-left:1px solid var(--hilite);border-right:1px solid var(--dark);border-bottom:1px solid var(--dark);box-shadow:inset -1px -1px 0 var(--shadow)}
.tbb:active{border-top-color:var(--dark);border-left-color:var(--dark);border-right-color:var(--hilite);border-bottom-color:var(--hilite)}
.tbb + .tbb.x{margin-left:2px}
.tbb svg{width:10px;height:9px;display:block;shape-rendering:crispEdges}
@media (max-width:760px){ .tbb svg{width:14px;height:12px} }
.menubar{display:flex;gap:0;padding:2px 0 1px}
.menubar span{padding:2px 7px}
.menubar span:hover{background:var(--navy);color:#fff}
.wb{flex:1;min-height:0;display:flex;flex-direction:column}
.status{display:flex;gap:2px;margin-top:2px}
.status > div{padding:2px 6px;font-size:14.5px;border-top:1px solid var(--shadow);border-left:1px solid var(--shadow);border-right:1px solid var(--hilite);border-bottom:1px solid var(--hilite);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status > div:first-child{flex:1}

.btn{min-width:78px;height:25px;white-space:nowrap;padding:0 12px;background:var(--face);cursor:pointer;
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);border-right:2px solid var(--dark);border-bottom:2px solid var(--dark);box-shadow:inset -1px -1px 0 var(--shadow),inset 1px 1px 0 var(--light)}
.btn:active:not(:disabled){border-top-color:var(--dark);border-left-color:var(--dark);border-right-color:var(--hilite);border-bottom-color:var(--hilite);box-shadow:inset 1px 1px 0 var(--shadow);padding-top:2px}
.btn.def{outline:1px solid #000;outline-offset:0}
.btn:focus-visible{outline:1px dotted #000;outline-offset:-5px}
.btn:disabled{color:var(--shadow);text-shadow:1px 1px 0 #fff;cursor:default}
.btn.big{height:32px;font-weight:700;min-width:96px}
.btn.sm{height:21px;min-width:0;padding:0 7px;font-size:14.5px}
.link{color:#0000EE;text-decoration:underline;cursor:pointer;background:none;border:0;padding:0;font:inherit}

.field{background:#fff;padding:3px 5px;height:23px;width:100%;outline:none;
  border-top:2px solid var(--shadow);border-left:2px solid var(--shadow);border-right:2px solid var(--hilite);border-bottom:2px solid var(--hilite);box-shadow:inset 1px 1px 0 var(--dark)}
textarea.field{height:auto;min-height:60px;resize:vertical;line-height:1.35}
.field:disabled{background:var(--face);color:var(--shadow)}
select.field{padding:1px 2px}
.well{background:#fff;border-top:2px solid var(--shadow);border-left:2px solid var(--shadow);border-right:2px solid var(--hilite);border-bottom:2px solid var(--hilite);box-shadow:inset 1px 1px 0 var(--dark)}
fieldset.gb{border:0;padding:12px 10px 10px;margin:10px 0 6px;position:relative;
  box-shadow:inset 1px 1px 0 var(--shadow),inset -1px -1px 0 var(--hilite),1px 1px 0 var(--hilite),-1px -1px 0 var(--shadow) inset}
fieldset.gb{border:2px groove #f4f4f4;box-shadow:none;margin:10px 1px 6px;padding:8px 10px 10px}
fieldset.gb legend{padding:0 4px;margin-left:6px;background:var(--face)}
.sep{height:0;border-top:1px solid var(--shadow);border-bottom:1px solid var(--hilite);margin:8px 0}

/* checkboxes and radios, drawn */
.ck,.rd{display:flex;align-items:flex-start;gap:6px;cursor:pointer;margin:4px 0;line-height:1.35}
.ck input[type=checkbox],.rd input[type=radio]{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:13px;height:13px;margin-top:1px;background:#fff;
  border-top:1px solid var(--shadow);border-left:1px solid var(--shadow);border-right:1px solid var(--hilite);border-bottom:1px solid var(--hilite);box-shadow:inset 1px 1px 0 var(--dark),inset -1px -1px 0 var(--light);cursor:pointer;position:relative}
.rd input[type=radio]{border-radius:50%}
.ck input[type=checkbox]:checked::after{content:"";position:absolute;left:3px;top:0px;width:3px;height:7px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(40deg)}
.rd input[type=radio]:checked::after{content:"";position:absolute;left:3px;top:3px;width:5px;height:5px;border-radius:50%;background:#000}
.ck input:focus-visible,.rd input:focus-visible{outline:1px dotted #000;outline-offset:2px}

/* tabs */
.tabs{display:flex;gap:0;padding:4px 4px 0;position:relative;z-index:1;flex-wrap:wrap}
.tab{padding:3px 10px 4px;background:var(--face);cursor:pointer;margin-right:-2px;position:relative;top:2px;
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);border-right:2px solid var(--dark);border-bottom:0;border-radius:3px 3px 0 0;box-shadow:inset -1px 0 0 var(--shadow)}
.tab[aria-selected="true"]{top:0;padding-bottom:6px;z-index:2;margin:0 -1px}
.tabpane{padding:12px;margin:0 4px 4px;border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);border-right:2px solid var(--dark);border-bottom:2px solid var(--dark);box-shadow:inset -1px -1px 0 var(--shadow);min-height:240px}

/* ================= wizard layout ================= */
.wiz{width:600px}
.wiz .wz{display:flex;min-height:330px}
.wiz .art{flex:0 0 164px;background:#008080;display:flex;align-items:flex-start;justify-content:center;padding:14px 8px;margin:10px 0 0 10px;border-top:1px solid var(--shadow);border-left:1px solid var(--shadow);border-right:1px solid var(--hilite);border-bottom:1px solid var(--hilite)}
.wiz .art svg{width:140px;height:auto;image-rendering:pixelated}
.wiz .main{flex:1;padding:14px 16px 8px;min-width:0}
.wiz h1{font-size:18px;font-weight:700;margin:0 0 8px}
.wiz p{line-height:1.45;margin:0 0 9px}
.wiz .foot{display:flex;justify-content:flex-end;gap:6px;padding:10px 10px 8px;border-top:1px solid var(--shadow);box-shadow:0 1px 0 var(--hilite) inset;margin-top:4px}
.wiz .foot .left{margin-right:auto;display:flex;align-items:center;gap:6px;font-size:14.5px;color:#333}
.dots{display:flex;gap:3px}
.dots i{width:8px;height:8px;background:#fff;border:1px solid var(--shadow)}
.dots i.on{background:var(--navy)}
.hint{font-size:14.5px;color:#444;line-height:1.4}
.ph{background:#FFFFE1;border:1px dashed #b39b00;padding:1px 4px;font-size:13px;color:#6b5800;font-family:-apple-system,system-ui,sans-serif;border-radius:2px;white-space:nowrap}
@media (max-width:760px){
  .wiz{width:auto}
  .wiz .wz{flex-direction:column;min-height:0}
  .wiz .art{flex:0 0 auto;margin:8px 8px 0;padding:8px}
  .wiz .art svg{width:84px}
}

/* mobile: windows stack in the flow */
@media (max-width:760px){
  .scene .w{position:relative !important;left:auto !important;top:auto !important;width:auto !important;max-width:none;margin:0 0 12px}
}

/* ================= boot ================= */
.boot{position:absolute;inset:0;background:#000;color:#C0C0C0;font-family:var(--mono);font-size:17px;padding:18px 22px;cursor:pointer;line-height:1.35;white-space:pre-wrap}
.boot b{color:#fff}
.boot .energy{position:absolute;right:22px;top:18px;color:#3bd16f;font-weight:700;text-align:right;font-size:14.5px;line-height:1.2}
.splash{position:absolute;inset:0;cursor:pointer;overflow:hidden;
  background:radial-gradient(ellipse 30% 12% at 22% 30%,rgba(255,255,255,.9),transparent 70%),radial-gradient(ellipse 26% 10% at 70% 22%,rgba(255,255,255,.85),transparent 70%),
  radial-gradient(ellipse 40% 14% at 55% 70%,rgba(255,255,255,.75),transparent 70%),radial-gradient(ellipse 22% 9% at 15% 80%,rgba(255,255,255,.7),transparent 70%),
  linear-gradient(#3F7FD0,#8DB8E6 55%,#C9DDF1)}
.splash .logo{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:18px;white-space:nowrap}
.splash .logo svg{width:92px;height:92px;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.25))}
.splash .word{font-family:'Franklin Gothic Medium','Arial Narrow',Arial,sans-serif;color:#fff;text-shadow:2px 2px 0 rgba(0,0,40,.35)}
.splash .word small{display:block;font-size:20.5px;letter-spacing:.02em;font-style:italic;opacity:.95}
.splash .word big{display:block;font-size:46px;font-weight:700;line-height:1;letter-spacing:-.01em}
.splash .word big em{font-style:normal;color:#FFD35A;margin-left:6px}
.splash .bar{position:absolute;left:0;right:0;bottom:0;height:10px;background:linear-gradient(90deg,#000080,#1084D0,#77BC1F,#FDB913,#E8483C,#000080);background-size:200% 100%;animation:bar 1.3s linear infinite}
@keyframes bar{to{background-position:-200% 0}}
.splash .cr{position:absolute;left:14px;bottom:18px;color:#fff;font-size:13px;opacity:.85}
@media (max-width:760px){.splash .logo{gap:10px}.splash .logo svg{width:52px;height:52px}.splash .word big{font-size:28px}.splash .word small{font-size:14.5px}
  .boot,.splash{position:absolute;inset:0}}

/* ================= sign on (AOL-ish) ================= */
.aolhead{background:linear-gradient(#FFE9A8,#FFD35A);display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #b08a1c}
.aolhead svg{width:48px;height:48px}
.aolhead h2{font-size:21.5px;margin:0}
.aolhead .v{font-size:13px;color:#6b5000;margin-top:2px}
.form-row{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:8px;margin:8px 0}
@media (max-width:760px){.form-row{grid-template-columns:1fr;gap:3px}}

/* connecting */
.panes{display:flex;gap:14px;justify-content:center;padding:18px 12px 8px}
.pane{width:118px;height:96px;display:grid;place-items:center;background:#000040;position:relative;overflow:hidden}
.pane svg{width:56px;height:56px;opacity:.18;transition:opacity .2s}
.pane.lit svg{opacity:1}
.pane.lit{background:#000080}
.pane.done::after{content:"";position:absolute;right:6px;bottom:6px;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='%2300e000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat}
.pane .blink{position:absolute;left:8px;top:8px;width:6px;height:6px;border-radius:50%;background:#00ff66;opacity:0}
.pane.lit .blink{animation:blink .25s steps(2) infinite}
@keyframes blink{50%{opacity:1}}
.connline{text-align:center;font-size:17px;font-weight:700;min-height:22px;margin:6px 0 2px}
.connsub{text-align:center;font-size:14.5px;color:#333;min-height:18px}
@media (max-width:760px){.panes{gap:6px}.pane{width:30%;height:72px}.pane svg{width:38px;height:38px}}

/* message box inside a window */
.mb{display:flex;gap:14px;padding:16px 16px 10px;align-items:flex-start}
.mb .ico{width:34px;height:34px;flex:0 0 auto}
.mb p{line-height:1.45;margin:0 0 6px}
.mbfoot{display:flex;justify-content:center;gap:8px;padding:6px 10px 12px}
.shade{position:absolute;inset:0;background:rgba(0,0,0,.001);z-index:40}

/* screen name */
.sn-check{min-height:20px;font-size:14.5px;margin-top:5px;font-family:var(--mono)}
.sn-check.ok{color:#006000}
.sn-check.bad{color:#A00000}
.sn-check.wait{color:#444}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 8px}
.chips .btn{min-width:0;height:22px;padding:0 7px;font-family:var(--mono);font-size:14.5px}
.preview{padding:8px;display:flex;flex-direction:column;gap:8px}
.preview .lab{font-size:13px;color:#555;text-transform:uppercase;letter-spacing:.06em}
.bud{display:flex;align-items:center;gap:6px;font-size:15.5px}
.bud img,.bud .av{width:20px;height:20px;flex:0 0 auto;object-fit:cover}
.bud b{font-weight:700}
.sig{font-family:var(--mono);font-size:14.5px}
.from{font-size:14.5px;color:#555}

/* photo */
.ph-grid{display:flex;gap:14px;align-items:flex-start}
.bigav{width:104px;height:104px;flex:0 0 auto;display:grid;place-items:center;background:#fff;padding:2px}
.bigav img,.bigav svg{width:96px;height:96px;object-fit:cover;display:block}
.icons12{display:grid;grid-template-columns:repeat(6,40px);gap:4px;margin:6px 0 0 19px}
.icons12 button{width:40px;height:40px;padding:3px;background:#fff;border:1px solid var(--shadow);cursor:pointer;display:grid;place-items:center}
.icons12 button[aria-pressed="true"]{outline:2px solid var(--navy);outline-offset:-2px;background:#E6ECFF}
.icons12 svg{width:30px;height:30px}
@media (max-width:760px){.ph-grid{flex-direction:column}.icons12{grid-template-columns:repeat(6,1fr);margin-left:0}.icons12 button{width:auto}}

/* board thread (old-school forum) */
.board{background:#fff;font-size:15px;overflow:auto}
.board .bh{background:linear-gradient(#3a5ea8,#1f3f86);color:#fff;padding:5px 8px;font-weight:700;font-size:14.5px;display:flex;justify-content:space-between;gap:8px}
.board .bh span:last-child{font-weight:400;opacity:.85;white-space:nowrap}
.board .subj{padding:7px 8px;background:#E8EEF8;border-bottom:1px solid #b7c3dd;font-weight:700;font-size:15.5px}
.post{display:grid;grid-template-columns:112px 1fr;border-bottom:1px solid #d5dbe6}
.post .who{background:#F2F4F8;padding:7px 6px;border-right:1px solid #d5dbe6;font-size:13px;line-height:1.35;color:#333;word-break:break-word}
.post .who .nm{font-weight:700;font-size:14.5px;color:#000080;cursor:pointer;text-decoration:none}
.post .who .nm:hover{text-decoration:underline}
.post .who .real{color:#555}
.post .who img,.post .who .av{width:36px;height:36px;display:block;margin:4px 0;object-fit:cover}
.post .who .rank{color:#666}
.post .who.admin .nm{color:#B00000}
.post .who.admin .rank{color:#B00000;font-weight:700}
.post .txt{padding:8px 9px;line-height:1.45}
.post .meta{font-size:12.5px;color:#777;margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.via{display:inline-block;font-size:12px;padding:0 4px;border:1px solid #9aa7c2;background:#EEF2FA;color:#334;border-radius:2px}
.via.slack{border-color:#b28bb6;background:#F6EEF7;color:#4A154B}
.post.op .txt{font-weight:400}
.board.down .post{opacity:.35;filter:grayscale(1)}
.board .gone{padding:22px 10px;text-align:center;color:#555;font-style:italic}
.board.example{position:relative}
.board.example::after{content:"EXAMPLE";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-18deg);font-size:54px;font-weight:900;color:rgba(160,0,0,.12);letter-spacing:.1em;pointer-events:none}
@media (max-width:760px){.post{grid-template-columns:84px 1fr}}

/* both-ways diagram */
.sync{display:flex;align-items:center;gap:8px;justify-content:center;margin:8px 0 10px}
.sync .end{padding:5px 8px;background:#fff;font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:5px}
.sync .end.sl{color:#4A154B}
.sync .pipe{position:relative;width:74px;height:18px}
.sync .pipe::before{content:"";position:absolute;left:0;right:0;top:8px;border-top:2px dotted #000}
.sync .pipe i{position:absolute;top:5px;width:8px;height:8px;background:#000080;animation:flow 1.6s linear infinite}
.sync .pipe i.b{background:#4A154B;animation:flowb 1.6s linear infinite;animation-delay:.8s}
@keyframes flow{from{left:0}to{left:66px}}
@keyframes flowb{from{left:66px}to{left:0}}

/* record + assistant */
.rec dl{display:grid;grid-template-columns:120px 1fr;gap:6px 10px;line-height:1.4}
.rec dt{color:#444}
.rec .fill{line-height:1.8}
.rec .fill u{text-decoration:none;border-bottom:1px solid #000;padding:0 3px;font-family:var(--mono);font-size:15px;background:#FFFFE8}
.rec .src{font-size:13px;color:#555;margin-top:10px}
.rec .quote{background:#fff;padding:8px;line-height:1.5;margin:6px 0}
.transcript{background:#fff;padding:8px;min-height:120px;line-height:1.45;font-size:15px}
.transcript .a{color:#000080}
.transcript .u{margin:0 0 6px}
.transcript .a{margin:0 0 6px}
.asst{position:absolute;width:250px;z-index:30}
.asst .balloon{background:#FFFFE1;border:1px solid #000;border-radius:10px;padding:10px 11px 9px;font-size:15px;line-height:1.4;position:relative;box-shadow:2px 2px 0 rgba(0,0,0,.3)}
.asst .balloon::after{content:"";position:absolute;bottom:-12px;left:44px;border:6px solid transparent;border-top:7px solid #000}
.asst .balloon::before{content:"";position:absolute;bottom:-10px;left:45px;border:5px solid transparent;border-top:6px solid #FFFFE1;z-index:1}
.asst .opts{margin:7px 0 2px;display:flex;flex-direction:column;gap:3px}
.asst .opts button{display:flex;gap:6px;align-items:flex-start;text-align:left;background:none;border:0;padding:2px 0;cursor:pointer;font:inherit;color:#000}
.asst .opts button::before{content:"";flex:0 0 auto;width:9px;height:9px;margin-top:4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#6aa0ff,#0033aa)}
.asst .opts button:hover{color:#0000EE;text-decoration:underline}
.asst textarea{width:100%;min-height:56px;margin:6px 0 5px;background:#fff;border:1px solid #7a7a7a;padding:4px;font:inherit;resize:vertical}
.asst .row{display:flex;justify-content:space-between;align-items:center;gap:6px}
.asst .char{width:112px;height:112px;margin:6px 0 0 8px;cursor:pointer;background:var(--face);padding:4px;display:grid;place-items:center}
.asst .char svg{width:96px;height:96px;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px)}}
.asst .char .lid{animation:blinkeye 4.2s infinite;transform-origin:center;transform-box:fill-box}
@keyframes blinkeye{0%,94%,100%{transform:scaleY(0)}96%{transform:scaleY(1)}}
.asst .typing::after{content:"...";animation:dots 1s steps(4) infinite;display:inline-block;width:14px;overflow:hidden;vertical-align:bottom}
@keyframes dots{from{width:0}to{width:14px}}
@media (max-width:760px){.asst{position:relative;width:auto;margin:0 0 12px;left:auto !important;top:auto !important}.asst .char{margin-left:20px}}

/* settings ticks */
.ticks{list-style:none;margin:8px 0 0;padding:0}
.ticks li{display:flex;gap:8px;align-items:center;padding:3px 0;color:#808080}
.ticks li.done{color:#000}
.ticks li .tk{width:14px;height:14px;display:grid;place-items:center}
.ticks li.now{font-weight:700;color:#000}
.hourglass{width:14px;height:14px;display:inline-block;animation:spin 1.2s steps(8) infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* welcome hub */
.welc{width:640px}
.welc .wtop{background:#000;color:#fff;padding:14px 18px 12px;display:flex;align-items:flex-end;gap:12px}
.welc .wtop svg{width:40px;height:40px}
.welc .wtop small{display:block;font-size:15.5px;font-style:italic;color:#cfd8ff}
.welc .wtop big{display:block;font-size:26px;font-weight:700;font-family:'Franklin Gothic Medium','Arial Narrow',Arial,sans-serif;letter-spacing:-.01em}
.welc .wtop big em{font-style:normal;color:#FFD35A}
.welc .wmid{display:flex;min-height:260px}
.welc .wl{flex:0 0 230px;background:#000;padding:10px 0}
.welc .wl button{display:flex;gap:9px;align-items:center;width:100%;text-align:left;background:none;border:0;color:#fff;padding:9px 16px;cursor:pointer;font-size:17px}
.welc .wl button svg{width:26px;height:26px;flex:0 0 auto}
.welc .wl button:hover,.welc .wl button.on{background:#1f3f86;color:#FFD35A}
.welc .wr{flex:1;background:linear-gradient(#fff,#E8EEF8);padding:18px 20px}
.welc .wr h3{font-size:21.5px;margin:0 0 8px;color:#000080}
.welc .wr p{line-height:1.5;margin:0 0 8px}
.welc .wbot{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 6px}
@media (max-width:760px){.welc{width:auto}.welc .wmid{flex-direction:column}.welc .wl{flex:0 0 auto}}

/* desktop */
.icons{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;flex-wrap:wrap;gap:2px;max-height:calc(100% - 50px);align-content:flex-start;z-index:1}
.dicon{width:96px;padding:4px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:1px dotted transparent;cursor:pointer;font-size:14.5px}
.dicon svg{width:44px;height:44px;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.35))}
.dicon span{color:#fff;text-align:center;line-height:1.2;padding:1px 3px;text-shadow:1px 1px 0 rgba(0,0,0,.6)}
.dicon:hover span,.dicon:focus-visible span{background:var(--navy);text-shadow:none}
.dicon.new span::after{content:" NEW";font-size:11px;color:#FFD35A;font-weight:700}
.taskbar{position:absolute;left:0;right:0;bottom:0;height:32px;background:var(--face);border-top:2px solid var(--hilite);display:flex;align-items:center;gap:4px;padding:2px 3px;z-index:50}
.taskbar .start{display:flex;align-items:center;gap:4px;font-weight:700;height:24px;padding:0 6px;min-width:0}
.taskbar .start svg{width:18px;height:18px}
.taskbar .tray{margin-left:auto;display:flex;align-items:center;gap:8px;padding:0 8px;height:24px;font-size:14.5px;border-top:1px solid var(--shadow);border-left:1px solid var(--shadow);border-right:1px solid var(--hilite);border-bottom:1px solid var(--hilite)}
.taskbar .task{height:24px;min-width:0;max-width:160px;padding:0 8px;display:flex;align-items:center;gap:5px;font-size:14.5px;overflow:hidden;white-space:nowrap}
.taskbar .task svg{width:14px;height:14px}
.buddy{width:220px}
.buddy .me{background:linear-gradient(#FFE9A8,#FFD35A);display:flex;gap:8px;align-items:center;padding:8px}
.buddy .me img,.buddy .me .av{width:34px;height:34px;object-fit:cover}
.buddy .me b{font-family:var(--mono);font-size:15.5px}
.buddy .me small{display:block;font-size:13px}
.buddy .list{height:300px;overflow:auto;padding:4px 2px;margin-top:3px}
.buddy .grp{font-weight:700;font-size:14.5px;padding:3px 4px}
.buddy .row{display:flex;gap:6px;align-items:center;padding:2px 4px 2px 18px;font-size:15px;cursor:default}
.buddy .row:hover{background:var(--navy);color:#fff}
.buddy .row img,.buddy .row .av{width:16px;height:16px;object-fit:cover}
.buddy .row.away{color:#808080;font-style:italic}
.buddy .row.flash{font-weight:700;animation:flash .5s steps(2) 6}
@keyframes flash{50%{background:#FFD35A}}
.buddy .row .star{color:#B00000;font-size:13px}
.buddy .row .bl-nm{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.buddy .row .bl-nm > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buddy .row .bl-real{font-size:13px;color:#606060;font-style:normal}
.buddy .row:hover .bl-real{color:#dfe6ff}
.imwho{display:flex;gap:8px;align-items:center;padding:3px 4px 5px}
.imwho .av,.imwho img{width:24px;height:24px}
.imwho .real{font-size:13px;color:#555}
.imwho .star{color:#B00000;font-size:13px}
.av{display:inline-grid;place-items:center;background:#6b8fd6;color:#fff;font-weight:700;font-size:12px;font-family:var(--ui)}

/* hover profile card */
.card{position:absolute;z-index:80;width:250px;background:#FFFFE1;border:1px solid #000;box-shadow:3px 3px 0 rgba(0,0,0,.35);font-size:14.5px;line-height:1.4;pointer-events:none}
.card.pinned{pointer-events:auto}
.card .ch{display:flex;gap:8px;padding:8px;border-bottom:1px solid #d9d29a}
.card .ch img,.card .ch .av{width:48px;height:48px;object-fit:cover;border:1px solid #000}
.card .ch b{font-family:var(--mono);font-size:15.5px;display:block}
.card .ch .admin{color:#B00000;font-weight:700}
.card dl{padding:6px 8px 8px;display:grid;grid-template-columns:78px 1fr;gap:3px 6px}
.card dt{color:#6b5800}
.card .foot{padding:4px 8px 6px;border-top:1px solid #d9d29a;font-size:13px;color:#555}
@media (max-width:760px){.card{position:relative;width:auto;left:auto !important;top:auto !important;margin:0 0 12px}}

/* control panel */
.cp{width:620px}
.cp .addr{display:flex;align-items:center;gap:6px;padding:3px 2px;font-size:14.5px}
.cp .addr .field{height:21px;padding:1px 4px;display:flex;align-items:center;gap:4px}
.cp .body{display:flex;min-height:320px;background:#fff}
.cp .web{flex:0 0 190px;background:linear-gradient(#fff,#E8EEF8 60%,#cfd9ee);padding:14px 12px;border-right:1px solid #cfd9ee}
.cp .web svg{width:44px;height:44px}
.cp .web h3{font-size:20.5px;margin:6px 0 8px;color:#000;font-family:'Franklin Gothic Medium','Arial Narrow',Arial,sans-serif;font-weight:400;border-bottom:2px solid #000080;padding-bottom:4px}
.cp .web p{font-size:14.5px;line-height:1.45;margin:0 0 8px}
.cp .grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;padding:12px;align-content:start}
.cp .ci{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:1px dotted transparent;padding:6px 2px;cursor:pointer;font-size:14.5px;text-align:center;line-height:1.25}
.cp .ci svg{width:34px;height:34px}
.cp .ci:hover span,.cp .ci.sel span{background:var(--navy);color:#fff}
.cp .ci.sel{border-color:#000}
@media (max-width:760px){.cp{width:auto}.cp .body{flex-direction:column}.cp .web{flex:0 0 auto}}

.props{width:430px}
.props .pfoot{display:flex;justify-content:flex-end;gap:6px;padding:4px 4px 6px}
.lb{background:#fff;height:128px;overflow:auto;padding:1px}
.lb div{padding:1px 4px;display:flex;justify-content:space-between;gap:6px;cursor:default}
.lb div.sel{background:var(--navy);color:#fff}
.lb div .snd{font-size:13px;opacity:.8}
.monitor{width:190px;margin:4px auto 10px;position:relative}
.monitor .scr{width:150px;height:110px;margin:0 auto;border:10px solid #C0C0C0;outline:2px solid #000;box-shadow:inset 0 0 0 1px #000;background:var(--teal)}
.monitor .base{width:70px;height:10px;margin:2px auto 0;background:#C0C0C0;border:2px solid #000;border-top:0}
.monitor .scr.wall-clouds{background:linear-gradient(#5B9BD8,#D7E6F2)}
.monitor .scr.wall-tiles{background:#3a6ea5}
.monitor .scr.wall-houndstooth{background:#6d2e46}
.monitor .scr.wall-setup{background:radial-gradient(#1a4fb8,#000060)}
.toast{position:absolute;left:110px;bottom:44px;z-index:70}
.toast .w{position:relative}
@media (max-width:760px){.toast{position:relative;right:auto;bottom:auto}}

.hide{display:none !important}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mb8{margin-bottom:8px}
.row{display:flex;gap:8px;align-items:center}
.muted{color:#555}
.mono{font-family:var(--mono)}
.ok{color:#006000}
.cp .addr svg{width:14px;height:14px;flex:0 0 auto}

.pf{margin:2px 0 6px}
.pf .field{margin:2px 0 0 19px;width:calc(100% - 19px)}
#rb .vgrp{display:none}
#rb .vgrp.on{display:flex}
/* Win98 logon (version B of sign on) */
.logon .lg{display:flex;gap:14px;padding:16px 16px 8px}
.logon .lg svg.key{width:44px;height:44px;flex:0 0 auto}
/* "Click here to begin" (version B of the welcome) */
.begin{position:absolute;left:78px;bottom:4px;z-index:60;display:flex;align-items:center;pointer-events:none}
.begin .arrow{font-size:21.5px;color:#000;margin-right:2px;animation:nudge 1s ease-in-out infinite}
.begin .tip{background:#FFFFE1;border:1px solid #000;padding:4px 10px;font-size:15.5px;white-space:nowrap;overflow:hidden;width:190px;box-shadow:2px 2px 0 rgba(0,0,0,.3)}
.begin .tip span{display:inline-block;animation:scrolltxt 6s linear infinite;padding-left:100%}
@keyframes scrolltxt{to{transform:translateX(-100%)}}
@keyframes nudge{50%{transform:translateX(-4px)}}
.startmenu{position:absolute;left:2px;bottom:32px;z-index:70;width:250px;display:flex;background:var(--face)}
.startmenu .side{width:26px;background:linear-gradient(#000080,#1084D0);color:#fff;writing-mode:vertical-rl;transform:rotate(180deg);font-weight:700;font-size:18px;padding:8px 3px;letter-spacing:.02em}
.startmenu .side em{font-style:normal;color:#FFD35A}
.startmenu ul{list-style:none;flex:1;padding:2px 0}
.startmenu li{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer}
.startmenu li svg{width:24px;height:24px}
.startmenu li:hover{background:var(--navy);color:#fff}
.startmenu li.sep{padding:0;margin:3px 2px;border-top:1px solid var(--shadow);border-bottom:1px solid var(--hilite)}
.startmenu li.hi{font-weight:700}
.stickynote{position:absolute;width:210px;background:#FFF68F;padding:12px 12px 14px;box-shadow:3px 4px 0 rgba(0,0,0,.25);font-family:'Comic Sans MS','Chalkboard SE',cursive;font-size:17px;line-height:1.4;transform:rotate(-2deg);z-index:5}
@media (max-width:760px){.begin,.startmenu,.stickynote{position:relative;left:auto;bottom:auto;margin:0 0 12px}.startmenu{width:auto}}
.props .tabpane{max-height:calc(100vh - 270px);overflow:auto}
.props{z-index:60}

/* ---- v2 ---- */
.w.min{display:none !important}
.power{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#111}
.pbtn{width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f1ead8,#cfc6ad);border:3px solid #8f876f;box-shadow:0 4px 0 #6f6853,0 0 0 8px #2a2a2a;cursor:pointer;display:grid;place-items:center}
.pbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #6f6853,0 0 0 8px #2a2a2a}
.pbtn svg{width:46px;height:46px}
.plbl{color:#9a9a9a;font-family:var(--mono);font-size:15.5px}
.led{width:8px;height:8px;border-radius:50%;background:#1d3a1d}
.led.on{background:#39ff62;box-shadow:0 0 8px #39ff62}
.big-hi{font-size:21.5px;font-weight:700;margin:0 0 8px}
.field.em{height:auto;padding:5px 7px;margin:4px 0 2px;background:#FFFFE8;color:#333}
.bigchar{width:130px;height:130px;display:grid;place-items:center;cursor:pointer}
.bigchar svg{width:120px !important;height:120px;animation:bob 2.6s ease-in-out infinite}
.bigchar .lid{animation:blinkeye 4.2s infinite;transform-origin:center;transform-box:fill-box}
.charname{color:#fff;font-weight:700;text-align:center;margin-top:6px;text-shadow:1px 1px 0 #000}
.wiz .art{flex-direction:column;align-items:center}
.chatlog{height:300px;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:86%;padding:7px 10px;line-height:1.45;font-size:15.5px;position:relative}
.msg.a{align-self:flex-start;background:#FFFFE1;border:1px solid #000;border-radius:10px 10px 10px 2px}
.msg.u{align-self:flex-end;background:#DCE6FF;border:1px solid #6b7fb3;border-radius:10px 10px 2px 10px}
.msg.typing{padding:6px 10px}
.rcard{background:#fff;border:1px solid #808080;padding:7px 9px;margin:6px 0;line-height:1.55}
.rcard u{text-decoration:none;border-bottom:1px solid #000;background:#FFFFE8;padding:0 2px}
.dots3 i{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:#555;animation:d3 1s infinite}
.dots3 i:nth-child(2){animation-delay:.15s}.dots3 i:nth-child(3){animation-delay:.3s}
@keyframes d3{50%{opacity:.2}}
.reply{min-height:40px;margin-top:8px}
.reply .row{align-items:stretch}
.reply textarea{flex:1;min-height:48px}
.chips2{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pickas{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.aspick{display:flex;align-items:center;gap:8px}
.aspick svg{width:36px;height:36px}
.away-hd{background:#FFFFE1;border:1px solid #b3a400;padding:3px 6px;font-size:14.5px;font-weight:700;margin:2px 0 3px}
.imlog{height:150px;overflow-y:auto;padding:6px;font-size:15.5px;line-height:1.45}
.iml b.them{color:#0000C0}
.iml b.me{color:#C00000}
.imtool{display:flex;gap:10px;align-items:center;padding:3px 4px;font-size:14.5px}
.imin{height:auto;margin:0}
.mailbar{display:flex;gap:6px;align-items:center;padding:4px 2px}
.maillist{margin:0 6px 4px;background:#fff}
.mrow{display:grid;grid-template-columns:90px 1fr 60px;gap:8px;padding:2px 6px;font-size:14.5px}
.mrow.sel{background:var(--navy);color:#fff}
.mrow.sel .muted{color:#dde}
.cmp{display:grid;grid-template-columns:60px 1fr;gap:4px 6px;align-items:center;padding:4px}
.lnk{color:#0000EE;text-decoration:underline}
.taskbar .tasks{display:flex;gap:3px;flex:1;min-width:0;overflow:hidden}
.taskbar .task span{overflow:hidden;text-overflow:ellipsis}
.btn.down,.btn.task.down{border-top-color:var(--dark);border-left-color:var(--dark);border-right-color:var(--hilite);border-bottom-color:var(--hilite);box-shadow:inset 1px 1px 0 var(--shadow);background:repeating-conic-gradient(#c0c0c0 0% 25%,#fff 0% 50%) 0 0/2px 2px;font-weight:700}
.trayspk{background:none;border:0;padding:0;cursor:pointer;display:grid;place-items:center}
@media (max-width:760px){ .taskbar{position:relative} .bigchar{width:84px;height:84px}.bigchar svg{width:78px !important;height:78px} .chatlog{height:260px} }
@media (max-width:760px){ .scene{display:flex;flex-direction:column} .taskbar{order:99;position:sticky;bottom:0;margin-top:auto} .startmenu{order:98} }

#nsn{color:#000}

/* ---- v3 ---- */
.clickon{position:absolute;left:0;right:0;bottom:44px;text-align:center;color:#fff;font-size:17px;text-shadow:1px 1px 0 rgba(0,0,40,.5);animation:blinkslow 1.2s steps(2) infinite}
@keyframes blinkslow{50%{opacity:0}}
.alt{margin-top:12px;padding-top:8px;border-top:1px solid var(--shadow);box-shadow:0 1px 0 var(--hilite) inset}
.alt .row{align-items:center}
.lead{font-size:18px;line-height:1.55}
.lead p{margin:0 0 10px}
.rcard{white-space:pre-line}
.blank{display:inline-block;min-width:60px;text-decoration:none;border-bottom:1px solid #000;background:#FFFFE8;padding:0 2px}
.blank.typing::after{content:"_";animation:blinkslow .6s steps(2) infinite}
/* A long answer wraps with the sentence instead of dropping to its own line. The finish-line blank
   starts empty, so it keeps a width to write into until the answer types in. */
.rcard .blank{display:inline;min-width:0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.rcard .blank.wide{display:inline-block;min-width:140px}
.bigchar svg{image-rendering:pixelated}
.bigchar .gus{animation:gusbob 1.4s steps(2) infinite}
@keyframes gusbob{50%{transform:translateY(-.5px)}}
.aspick svg{width:36px;height:36px}
.start-here{display:inline-block;background:#FFD35A;color:#000;font-weight:700;font-size:13px;letter-spacing:.08em;padding:2px 6px;margin-bottom:8px}
.gobtn{margin-top:12px;min-width:180px}
.tourtip{position:absolute;z-index:120;width:270px;background:#FFFFE1;border:1px solid #000;padding:9px 11px 8px;box-shadow:3px 3px 0 rgba(0,0,0,.35);font-size:15.5px;line-height:1.4}
.tourtip::before{content:"";position:absolute;left:-13px;top:14px;border:6px solid transparent;border-right:7px solid #000}
.tourtip::after{content:"";position:absolute;left:-11px;top:15px;border:5px solid transparent;border-right:6px solid #FFFFE1}
.tourtip p{margin:3px 0 8px}
.tt-n{font-size:13px;color:#6b5800;float:right}
.dicon.lit{outline:2px dashed #FFD35A;outline-offset:2px}
.icons.free{display:block;width:100%;height:calc(100% - 50px)}
.icons.free .dicon{position:absolute}
.dicon.dragging{opacity:.75;z-index:5}
.doc{padding:12px;line-height:1.55;background:#fff;min-height:160px}
.doc p{margin:0 0 8px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;padding:10px;background:#fff;min-height:200px;align-content:start}
.ci.dim{opacity:.55}
.paint{display:flex;gap:4px;padding:4px}
.ptools{display:flex;flex-direction:column;gap:3px}
.ptools .btn.on{border-top-color:var(--dark);border-left-color:var(--dark);border-right-color:var(--hilite);border-bottom-color:var(--hilite);background:#e8e8e8}
.pcan{background:#fff;border:2px inset #808080;cursor:crosshair;max-width:100%;touch-action:none}
.pcols{display:flex;gap:2px;padding:2px 4px 4px 34px}
.pcols button{width:20px;height:20px;border:2px inset #808080;padding:0;cursor:pointer}
.np{height:auto;min-height:220px;font-family:var(--mono);font-size:15px;border-radius:0}
.mines{display:inline-block;padding:6px;background:var(--face);margin:4px}
.mhead{display:flex;justify-content:space-between;align-items:center;padding:4px 5px;margin-bottom:6px}
.lcd{background:#000;color:#f00;font-family:var(--mono);font-size:21.5px;padding:0 3px;letter-spacing:1px}
.face{font-size:19px;width:28px;height:28px;padding:0}
.mgrid{display:grid;grid-template-columns:repeat(9,22px)}
.mc{width:22px;height:22px;padding:0;font-weight:700;font-size:15.5px;background:var(--face);border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #808080;border-bottom:2px solid #808080;cursor:pointer;line-height:1}
.mc.o{border:1px solid #9a9a9a;background:#c8c8c8;cursor:default}
.mc.n1{color:#0000ff}.mc.n2{color:#008000}.mc.n3{color:#ff0000}.mc.n4{color:#000080}.mc.n5{color:#800000}.mc.n6{color:#008080}
.mailmain{display:flex;gap:4px;padding:0 4px 4px;min-height:300px}
.folders{flex:0 0 140px;background:#fff;padding:4px 0}
.fo{display:flex;gap:5px;align-items:center;padding:3px 6px;font-size:14.5px;cursor:pointer}
.fo svg{width:16px;height:16px}
.fo.sel{background:var(--navy);color:#fff}
.mailright{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.mailright .maillist{margin:0;height:110px;overflow:auto}
.mrow{cursor:pointer}
.mrow.unread{font-weight:700}
.mailread{background:#fff;flex:1;overflow:auto;font-size:15.5px}
.mhdr{padding:6px 8px;border-bottom:1px solid #ccc;font-size:14.5px;line-height:1.6;background:#f4f4f4}
.mbody{padding:10px;line-height:1.5}
.bview{height:420px;overflow:auto;background:#fff}
.crumbs{padding:6px 8px;background:#E8EEF8;border-bottom:1px solid #b7c3dd;font-size:14.5px}
.btable{width:100%;border-collapse:collapse;font-size:15px}
.btable th{background:linear-gradient(#3a5ea8,#1f3f86);color:#fff;text-align:left;padding:4px 8px;font-size:14.5px;white-space:nowrap}
.btable td{padding:6px 8px;border-bottom:1px solid #d5dbe6;vertical-align:top}
.btable tr[data-b],.btable tr[data-t]{cursor:pointer}
.btable tr[data-b]:hover td,.btable tr[data-t]:hover td{background:#F2F6FF}
.bname{font-weight:700;font-size:15.5px}
.replybox{padding:8px;border-top:1px solid #d5dbe6;background:#F2F4F8}
.replybox .row{margin-top:6px}
.iml.sys{color:#6b5800;background:#FFFFE1;padding:3px 5px;margin:4px 0;font-style:italic}
@media (max-width:760px){.mailmain{flex-direction:column}.folders{flex:0 0 auto}.bview{height:360px}}
.row > .btn,.row > span > .btn{flex-shrink:0}

body.student #rb,body.student #notes{display:none}
body.student #stage{top:0;left:0}

/* ---- round 1 fixes ---- */
.tip98{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:9999;background:#FFFFE1;color:#000;border:1px solid #000;padding:4px 8px;font-family:var(--ui);font-size:14.5px;max-width:90%}
.w.max{left:0 !important;top:0 !important;width:100% !important;height:calc(100% - 32px) !important;max-width:none}
.w.max{display:flex;flex-direction:column}
.w.max .wb{overflow:auto;flex:1;display:flex;flex-direction:column;min-height:0}
.w.max .wb > .well{flex:1}
.w.max .mailmain{flex:1;min-height:0}
.w.max .mailright .maillist{height:auto;flex:0 0 35%}
.taskbar .showdesk{min-width:0;width:26px;height:24px;padding:0;display:grid;place-items:center}
.taskbar .showdesk svg{width:18px;height:18px}
.blfoot{display:flex;gap:4px;padding:3px 2px}
.blfoot .btn svg{width:12px;height:12px;vertical-align:-2px}
.addr{display:flex;align-items:center;gap:6px;padding:3px 2px;font-size:14.5px}
.addr .field{height:21px;padding:1px 4px;display:flex;align-items:center;gap:4px}
.addr svg{width:14px;height:14px;flex:0 0 auto}
.calhead{display:flex;justify-content:space-between;align-items:center;padding:6px 4px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:6px;background:#fff}
.calgrid .dh{text-align:center;font-weight:700;font-size:13px;color:#555}
.calgrid .dd{height:30px;background:#fff;border:1px solid #d0d0d0;cursor:pointer;font-size:14.5px}
.calgrid .dd.ev{background:#DDE6FF;border-color:#000080;font-weight:700}
.calgrid .dd.sel{background:var(--navy);color:#fff}
.calday{background:#fff;margin-top:4px;padding:8px;min-height:80px;font-size:15px;line-height:1.45}
.calday p{margin:4px 0 0}
.pvrow{display:flex;gap:10px;align-items:flex-start}
.pvchecks{flex:0 0 150px}
.pvcard{position:relative;width:auto;flex:1;box-shadow:none;pointer-events:none}
@media (max-width:760px){
  .icons{position:relative;top:auto;left:auto;display:grid;grid-template-columns:repeat(4,1fr);max-height:none;margin:0 0 10px;background:rgba(0,0,0,.08);padding:6px 0}
  .dicon{width:auto}
  .taskbar .task span{display:none}
  .taskbar .task{max-width:34px;padding:0 6px}
  .startmenu{position:fixed;left:6px;right:auto;bottom:40px;width:260px;z-index:500;max-height:calc(100% - 50px);overflow-y:auto}
  .boot .energy{display:none}
  .icons12{gap:8px}
  .pvrow{flex-direction:column}
}
.fgrid .ci{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:1px dotted transparent;padding:6px 2px;cursor:pointer;font-size:14.5px;text-align:center;line-height:1.25}
.fgrid .ci svg{width:34px;height:34px}
.fgrid .ci:hover span{background:var(--navy);color:#fff}
.pvcard .foot{display:none}
.pvcard dl{font-size:14px}

/* ---- round 2 fixes ---- */
.donebox{background:#FFFFE1;border:1px solid #000;padding:6px 8px}
.plbl{cursor:pointer}
.fgrid .ci small{color:#555;font-size:12.5px}
.addr .btn.sm{margin-right:6px}
.card.tapped{position:relative;width:auto;margin:0 0 12px;pointer-events:auto}
.ptools{display:grid;grid-template-columns:repeat(2,26px);gap:2px;align-content:start}
.ptools .btn.sm{width:26px;height:24px;padding:0;min-width:0;font-size:15.5px}
.pbar{display:flex;gap:6px;align-items:center;padding:3px 4px}
.pcur{width:30px;height:30px;padding:4px;background:#c0c0c0}
.pcur i{display:block;width:100%;height:100%;border:1px solid #000}
.pcols{display:grid;grid-template-columns:repeat(9,18px);gap:2px;padding:0}
.pcols button{width:18px;height:16px}
.monitor .scr.wall-houndstooth{background-color:#6d2e46;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.3) 0 3px,transparent 3px 6px),repeating-linear-gradient(-45deg,rgba(255,255,255,.12) 0 3px,transparent 3px 6px)}
.monitor .scr.wall-tiles{background-color:#3a6ea5;background-image:linear-gradient(45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.12) 75%);background-size:10px 10px}
.doc{font-family:var(--mono);font-size:15px}
@media (max-width:760px){
  .wiz .foot{position:sticky;bottom:0;background:var(--face);z-index:5}
  .post .who{word-break:normal;overflow-wrap:anywhere;font-size:12.5px}
  .post .who .nm{font-size:13px}
  .post{grid-template-columns:96px 1fr}
}
@media (max-width:760px){ .tbb{width:28px;height:24px;font-size:15.5px} .tb{height:30px} }

/* v4: the setup window resizes and opens bigger */
.wiz{width:700px;resize:both;overflow:auto;min-width:520px;min-height:380px}
.wiz .wz{flex:1;min-height:380px}
.wiz .main{display:flex;flex-direction:column}
.wiz .chatlog{flex:1;height:auto;min-height:320px}
@media (max-width:760px){ .wiz{resize:none;min-width:0;min-height:0} .wiz .chatlog{min-height:260px} }
/* v5: the check-in window keeps its height; the chat scrolls */
.wiz .wz{min-height:0}
.wiz .chatlog{min-height:160px;flex:1 1 auto;overflow-y:auto}
.wiz .main{min-height:0;overflow:hidden}
.vframe{background:#000;aspect-ratio:16/9;margin:4px}
.vframe iframe{width:100%;height:100%;border:0;display:block}
.vbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 6px 5px;font-size:14.5px}
.menubar span.hasmenu{cursor:pointer}
.dropmenu{position:absolute;z-index:50;background:var(--face);min-width:140px;display:flex;flex-direction:column;padding:2px}
.dropmenu button{background:none;border:0;text-align:left;padding:4px 18px;font:inherit;cursor:pointer}
.dropmenu button:hover{background:var(--navy);color:#fff}
.dropmenu .dsep{border-top:1px solid var(--shadow);border-bottom:1px solid var(--hilite);margin:3px 2px}
.fgrid.small{min-height:70px;grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
.mty{display:flex;gap:6px;padding:4px}
.mtyc{flex:0 0 90px;display:grid;place-items:center;background:#008080}
.mtyc svg{width:80px;height:80px}
.mtyc .lid{animation:blinkeye 4.2s infinite;transform-origin:center;transform-box:fill-box}
.mty .chatlog{flex:1}
#realbox{position:fixed;top:calc(var(--rb-h) + 8px);right:10px;z-index:1100;width:340px;max-width:calc(100vw - 20px);background:var(--note-bg);color:var(--note-ink);border:1px solid #b8a84e;border-radius:8px;padding:12px 14px;font:13px/1.45 -apple-system,system-ui,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.25)}
#realbox ul{margin:4px 0 10px 18px;padding:0}
#realbox button{font:inherit;border:1px solid #b8a84e;background:#fff;border-radius:6px;padding:4px 10px;cursor:pointer}
/* round 4 fixes */
.boot pre{white-space:pre-wrap;word-break:break-word;margin:0}
@media (max-width:760px){
  .boot{font-size:14px;padding:12px}
  .wiz{max-height:none}
  .wiz .foot{position:sticky;bottom:0}
  #stage{padding-bottom:0}
  .taskbar .showdesk{width:38px;height:28px}
  .taskbar .showdesk svg{width:22px;height:22px}
}
@media (max-width:760px){ .wiz{overflow:visible;height:auto !important} .wiz .main{overflow:visible} }
.wiz .reply,.wiz .main>.row{flex:0 0 auto}
/* v5.1, Pranav's notes */
.clickon{animation:none;left:50%;right:auto;transform:translateX(-50%);display:inline-block;padding:6px 16px;background:#000080;color:#FFD35A;font-weight:700;font-size:19px;border:2px solid #fff;box-shadow:2px 2px 0 rgba(0,0,0,.4);text-shadow:none;white-space:nowrap}
.tabpane{position:relative;z-index:0}
.tab[aria-selected="true"]{margin:0 -1px -2px;padding-bottom:8px;z-index:3;background:var(--face);box-shadow:none}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--face)}
.via.can{background:#e6f2e6;color:#1d5a1d}

/* Suggestion Box */
/* the note and the box themselves: see "Suggestion Box, photographed" further down */
.sbx-list{max-height:420px;overflow:auto;background:#fff}
.sbx-item{padding:8px 10px;border-bottom:1px solid #ddd;line-height:1.45}
.sbx-meta{font-size:13px;color:#555;margin-bottom:3px}
.mhtml{display:block;width:100%;height:100%;min-height:360px;border:0;background:#fff}

/* Phones: the taskbar stays on the bottom edge of the screen, like Windows, and text boxes are 16px
   because iPhone Safari zooms the whole page into any text box smaller than that. */
@media (pointer:coarse){ input:not([type=checkbox]):not([type=radio]),textarea,select{font-size:16px !important} }
@media (max-width:760px){
  #stage{overflow-x:hidden}
  .scene .w{min-width:0;max-width:100% !important}
  .scene .w .wb{min-width:0;overflow-wrap:anywhere}
  .taskbar{position:fixed !important;left:0;right:0;bottom:0;top:auto;margin:0;z-index:400}
  .scene{padding-bottom:40px}
  input:not([type=checkbox]):not([type=radio]),textarea,select{font-size:16px !important}
}
@media (max-width:360px){ .icons{grid-template-columns:repeat(3,1fr)} .dicon span{overflow-wrap:anywhere} }
.clock{white-space:nowrap}

/* ---------------- 1998 extras */
/* shut down */
.shut{position:fixed;inset:0;z-index:99995;background:#000;cursor:default}
.shut .shut1{position:absolute;inset:0}
.shutmsg{position:absolute;left:0;right:0;bottom:22%;text-align:center;color:#0a1f6a;font-weight:700;font-size:20px}
.safe{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background:#000}
.safe p{color:#FF9A1F;font-family:var(--mono);font-size:30px;line-height:1.5;text-align:center;font-weight:700;letter-spacing:.02em}
.safe small{position:absolute;bottom:24px;color:#555;font-family:var(--mono);font-size:13px}
@media (max-width:760px){ .safe p{font-size:21px} }
/* screen saver */
.saver{position:fixed;inset:0;z-index:99996;background:#000;cursor:none}
/* blue screen */
.bsod{position:fixed;inset:0;z-index:99997;background:#0000AA;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:17px;line-height:1.5;cursor:default;padding:16px}
.bsin{max-width:640px}
.bst{text-align:center;margin-bottom:22px}
.bst span{background:#AAAAAA;color:#0000AA;padding:1px 8px;font-weight:700}
.bsod p{margin:0 0 18px}
.bsc{text-align:center}
.cur{animation:blinkslow 1s steps(2) infinite}
/* desktop right-click menu and selection box */
.ctxmenu{position:absolute;z-index:600;background:var(--face);min-width:170px;padding:2px}
.ctxmenu .it{padding:4px 22px;cursor:default;white-space:nowrap}
.ctxmenu .it.b{font-weight:700}
.ctxmenu .it:hover{background:var(--navy);color:#fff}
.ctxmenu .sep{margin:3px 2px;border-top:1px solid var(--shadow);border-bottom:1px solid var(--hilite)}
.marquee{position:absolute;z-index:5;border:1px dotted #fff;outline:1px dotted #000;outline-offset:-1px;pointer-events:none}
.dicon.sel span{background:var(--navy);color:#fff;text-shadow:none}
.dicon.sel svg{filter:brightness(.6) sepia(1) hue-rotate(190deg) saturate(3)}
/* window zoom outline */
.zoomr{position:fixed;z-index:99990;border:2px solid #808080;outline:1px solid #fff;pointer-events:none;transition:left .17s linear,top .17s linear,width .17s linear,height .17s linear}
/* hourglass */
body.busy, body.busy *{cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24' viewBox='0 0 16 24'%3E%3Cpath d='M1 1h14v3l-5 7v2l5 7v3H1v-3l5-7v-2L1 4z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M4 4h8l-4 6zM3.5 21h9L8 17z' fill='%23000'/%3E%3C/svg%3E") 8 12, wait !important}
/* 56k */
body.dialup img.dl56{animation:dl56 1.8s steps(10,end) both}
@keyframes dl56{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.recv{padding:12px}
.recv .pbar{height:16px;margin-top:8px;background:#fff;padding:2px}
.recv .pbar i{display:block;height:100%;background:repeating-linear-gradient(90deg,#000080 0 9px,transparent 9px 11px);animation:pfill .65s steps(8,end) both}
@keyframes pfill{from{width:0}to{width:100%}}

/* setup step 2: the Slack photo downloads at 56k */
.dlcap{font-size:12.5px;color:#333;margin-top:4px;max-width:104px;line-height:1.3;min-height:16px}
img.slow56{animation:dl56 7s steps(28,end) both,unblur 7s steps(7,end) both !important}
@keyframes unblur{from{filter:blur(5px)}to{filter:blur(0)}}
.zoomb{display:inline-flex;align-items:center;margin-top:4px;text-decoration:none;color:#000}


/* Reminder: four equal buttons on the right, like a Windows 98 dialog */
.remw .mbfoot{justify-content:flex-end;align-items:center;flex-wrap:wrap}
.remw .mbfoot .btn,.remw .mbfoot .zoomb{margin:0;height:25px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-size:inherit;line-height:1}

/* Buddy List: offer desktop notifications */
.blnote{padding:2px 4px 4px;font-size:13px}
.blnote .link{font-size:13px;text-align:left}

/* A message in its own window */
.msgw .mailread{min-height:380px;max-height:70vh}
.msgw .mhtml{min-height:360px}
.w.max.msgw .mailread{max-height:none;flex:1;display:flex;flex-direction:column}
.w.max.msgw .mhtml{flex:1}

/* Menus and resizing (2026-09-25) */
.menubar span.on{background:var(--navy);color:#fff}
.dropmenu{box-shadow:1px 1px 0 var(--dark)}
.dropmenu button:disabled{color:var(--shadow);text-shadow:1px 1px 0 var(--hilite);cursor:default}
.dropmenu button:disabled:hover{background:none;color:var(--shadow)}
.rsz{position:absolute;z-index:4;touch-action:none}
.rsz-r{top:0;right:-2px;width:6px;height:100%;cursor:ew-resize}
.rsz-b{left:0;bottom:-2px;height:6px;width:100%;cursor:ns-resize}
.rsz-c{right:1px;bottom:1px;width:13px;height:13px;cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 0 46%,var(--hilite) 46% 53%,var(--shadow) 53% 61%,transparent 61% 68%,var(--hilite) 68% 75%,var(--shadow) 75% 83%,transparent 83%)}
.w.max .rsz{display:none}

.w.sized .wb{overflow:auto;flex:1;display:flex;flex-direction:column;min-height:0}
.w.sized .wb > .well{flex:1}
.w.sized .mailmain{flex:1;min-height:0}
.w.sized .mailright .maillist{height:auto;flex:0 0 35%}
.wiz{resize:none}
@media (max-width:760px){ .rsz{display:none} .w.sized{height:auto !important} }

/* Pranav's IM notes (2026-09-25): smileys, stickers, big emoji, typing */
.imtyping{font-size:13px;color:var(--shadow);font-style:italic;padding:2px 4px 0;min-height:18px}
.imtools{display:flex;gap:4px;padding:2px 0 3px;position:relative}
.emopick{position:absolute;left:0;bottom:100%;z-index:30;background:var(--face);display:grid;grid-template-columns:repeat(8,30px);gap:2px;padding:4px}
.emopick button{background:none;border:1px solid transparent;font-size:19px;line-height:1;padding:3px 0;cursor:pointer}
.emopick button:hover{border-color:var(--navy);background:#fff}
.emopick.big{grid-template-columns:repeat(4,52px)}
.emopick.big button{font-size:36px;padding:4px 0}
.imbig{font-size:46px;line-height:1.15;padding:2px 0 2px 8px}
/* Week 0 as a WordPad document: headings and lists instead of Notepad caps (Alex, 2026-09-26) */
.weekw .doc{font-family:'Times New Roman',Georgia,serif;font-size:17px;line-height:1.5;padding:16px 20px}
.weekw .doc h3{font-size:24px;margin:0 0 2px}
.weekw .doc .sub{color:#444;margin:0 0 14px}
.weekw .doc h4{font-family:Arial,sans-serif;font-size:15px;text-transform:uppercase;letter-spacing:.04em;color:#000080;margin:16px 0 6px;border-bottom:1px solid #c0c0c0;padding-bottom:3px}
.weekw .doc ol,.weekw .doc ul{margin:0 0 6px;padding-left:24px}
.weekw .doc li{margin:0 0 6px}
.slist{margin:6px 0 10px;padding-left:22px}.slist li{margin:0 0 6px}
@media (max-width:760px){.sync .pipe{width:36px}.sync .end{font-size:13.5px;overflow-wrap:normal;word-break:keep-all}}
/* Suggestion Box (Alex's pick, 2026-09-27): the whole CC0 photo of a real box under its sign, a paper label taped
   on, a note chip you drag onto the photo. Built from world-hq/sbox-options/final/index.html. */
.sbx2{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 16px 4px;font-size:15px;line-height:1.35}
.sbx2-prompt{margin:0;text-align:center;max-width:470px}
.sbx2-box{position:relative;padding:6px;border:1px solid transparent}
.sbx2-box img{display:block;width:240px;height:320px;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none;
  box-shadow:inset 0 0 0 1px #000;border:2px solid;border-color:#808080 #fff #fff #808080}
.sbx2-box.hot{outline:1px dotted #000;outline-offset:-3px}
.sbx2-hint{margin:0;height:18px;font-size:13px;color:#404040;text-align:center}
.sbx2-box.hot+.sbx2-hint{color:#000080;font-weight:700}
.sbx2-compose{width:100%;max-width:480px;display:flex;flex-direction:column;gap:9px}
.sbx2-compose textarea{width:100%;height:68px;resize:none;font-size:15px}
.sbx2-sign{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:14px}
.sbx2-sign label{display:flex;align-items:center;gap:5px}
.sbx2-foot{display:flex;align-items:center;gap:12px;min-height:44px}   /* keeps its height while the note is out */
.sbx2-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;background:#c0c0c0;font-size:14px;cursor:grab;user-select:none;touch-action:none;
  border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset 1px 1px 0 #dfdfdf,inset -1px -1px 0 #808080}
.sbx2-chip.held{position:fixed;z-index:99999;margin:0;cursor:grabbing;transform-origin:top left;box-shadow:inset 1px 1px 0 #dfdfdf,inset -1px -1px 0 #808080,3px 4px 8px rgba(0,0,0,.35)}
.sbx2-chip.gone{visibility:hidden}
.sbx2-paper{position:relative;width:19px;height:24px;flex:0 0 auto;background:repeating-linear-gradient(#fff 0 3px,#cfe0f2 3px 4px);border:1px solid #6b4a24}
.sbx2-paper::after{content:"";position:absolute;top:0;right:0;border-width:0 6px 6px 0;border-style:solid;border-color:#c0c0c0 #c0c0c0 #6b4a24 #6b4a24}
.sbx2-hint2{font-size:13px;color:#404040}
.sbx2-acts{width:100%;gap:8px;padding:6px 0 8px}

/* Realism layer (2026-09-26) */
/* 1. CRT glass: faint scanlines, a slight vignette, rounded screen corners. realism.js adds the
   element; Control Panel > Display > Background > CRT screen effect hides it. Nothing moves. */
.crtglass{position:fixed;inset:0;pointer-events:none;z-index:2147483000;border-radius:18px/24px;
  box-shadow:0 0 0 80px #000,inset 0 0 70px rgba(0,0,0,.28),inset 0 0 8px rgba(0,0,0,.45);
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,.075) 0 1px,transparent 1px 3px),
    linear-gradient(135deg,rgba(255,255,255,.045),transparent 38%),
    radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(0,0,0,.16) 100%)}
.crtglass[hidden]{display:none}
@media (max-width:760px){.crtglass{border-radius:12px/16px;box-shadow:0 0 0 80px #000,inset 0 0 40px rgba(0,0,0,.24),inset 0 0 6px rgba(0,0,0,.4)}}
@media print{.crtglass{display:none}}

/* 2. Taskbar: Quick Launch after Start, a dial-up icon in the tray */
.taskbar .qlaunch{display:flex;align-items:center;gap:1px;height:24px;flex:0 0 auto}
.qlgrip,.qlsep{width:2px;height:22px;border-left:1px solid var(--shadow);border-right:1px solid var(--hilite);margin:0 3px}
.qlgrip{position:relative;width:5px;margin:0 3px 0 2px;border-left:1px solid var(--shadow)}
.qlgrip::after{content:"";position:absolute;left:1px;top:1px;bottom:1px;width:2px;border-left:1px solid var(--hilite);border-right:1px solid var(--shadow)}
.taskbar .qlb,.taskbar .showdesk.qlb{width:24px;height:24px;min-width:0;padding:0;margin:0;display:grid;place-items:center;cursor:pointer;background:none;
  border:1px solid transparent;box-shadow:none;outline:none}
.taskbar .qlb:hover{border-color:var(--hilite) var(--shadow) var(--shadow) var(--hilite)}
.taskbar .qlb:active{border-color:var(--shadow) var(--hilite) var(--hilite) var(--shadow);padding:1px 0 0 1px}
.taskbar .qlb:focus-visible{outline:1px dotted #000;outline-offset:-3px}
.taskbar .qlb svg{width:18px;height:18px}
.traydun{display:grid;place-items:center;cursor:default}
.traydun svg{width:16px;height:16px;display:block}
.traydun.tx{--dun-a:#7CFC00;--dun-b:#D8FF9A}
@media (max-width:760px){
  .taskbar .ql-web,.taskbar .ql-mail,.taskbar .qlgrip{display:none}
  .taskbar .qlaunch{height:28px}
  .taskbar .showdesk.qlb{width:34px;height:28px}
  .taskbar .showdesk.qlb svg{width:22px;height:22px}
  .taskbar .tray{gap:6px;padding:0 6px}
}

/* 3. Cohort 4 Web as Internet Explorer 4: big buttons with labels, Address with a dropdown and
   Links, and the Windows logo throbber that turns while a page is loading (.wload is on screen). */
.webtb.ie4{flex-wrap:nowrap;gap:0;align-items:stretch;padding:2px 2px 3px;margin:0 2px 3px;border-top:1px solid var(--hilite);border-bottom:1px solid var(--shadow);box-shadow:0 1px 0 var(--hilite)}
.iebtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:50px;padding:2px 5px;background:none;border:1px solid transparent;font-size:13.5px;line-height:1.1;cursor:pointer;color:#000}
.iebtn svg{width:24px;height:24px;flex:0 0 auto}
.iebtn:hover:not(:disabled){border-color:var(--hilite) var(--shadow) var(--shadow) var(--hilite)}
.iebtn:active:not(:disabled){border-color:var(--shadow) var(--hilite) var(--hilite) var(--shadow);padding:3px 4px 1px 6px}
.iebtn:focus-visible{outline:1px dotted #000;outline-offset:-3px}
.iebtn:disabled{color:var(--shadow);text-shadow:1px 1px 0 #fff;cursor:default}
.iebtn:disabled svg{filter:grayscale(1) opacity(.5)}
.webw:not(.nofav) #wfv{border-color:var(--shadow) var(--hilite) var(--hilite) var(--shadow);background:repeating-conic-gradient(#fff 0 25%,var(--face) 0 50%) 0 0/2px 2px}
.webw.nofav .webfav{display:none}
#wnw span{white-space:normal;max-width:78px;text-align:center}
.webtb.ie4 .tsep{margin:2px 3px}
.webw .menubar{align-items:center;padding-right:2px}
.throb{margin-left:auto;flex:0 0 auto;width:40px;height:28px;display:grid;place-items:center;background:#000;perspective:90px;
  border:1px solid;border-color:var(--shadow) var(--hilite) var(--hilite) var(--shadow)}
.throb svg{width:22px;height:22px}
.webw:has(.wload) .throb svg{animation:throb 1.2s linear infinite}
@keyframes throb{to{transform:rotateY(360deg)}}
.webaddr .field{position:relative;padding-right:19px;min-width:0}
.webaddr .field span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ddarr{position:absolute;right:0;top:0;bottom:0;width:17px;background:var(--face);border:1px solid;border-color:var(--light) var(--dark) var(--dark) var(--light);box-shadow:inset -1px -1px 0 var(--shadow),inset 1px 1px 0 var(--hilite)}
.ddarr::after{content:"";position:absolute;left:50%;top:50%;margin:-2px 0 0 -4px;border:4px solid transparent;border-top:4px solid #000;border-bottom:0}
.webaddr .links{flex:0 0 auto;padding:0 4px 0 9px;border-left:1px solid var(--shadow);box-shadow:inset 1px 0 0 var(--hilite);align-self:stretch;display:flex;align-items:center}
@media (max-width:760px){
  .webtb.ie4{flex-wrap:wrap;row-gap:2px}
  .iebtn{min-width:0;padding:2px 3px;font-size:12px}
  .iebtn svg{width:22px;height:22px}
  #wnw span{max-width:52px}
  .webtb.ie4 .tsep{margin:2px 1px}
  .throb{width:34px;height:26px}
}

/* 4. The welcome window, like Windows 98's: the logo on a sky, CONTENTS, a coloured bar on each item */
.welc .wtop{position:relative;color:#000;padding:16px 18px 14px;
  background:
    radial-gradient(ellipse 150px 34px at 16% 34%,rgba(255,255,255,.85),transparent 70%),
    radial-gradient(ellipse 230px 46px at 62% 70%,rgba(255,255,255,.7),transparent 70%),
    radial-gradient(ellipse 160px 30px at 90% 22%,rgba(255,255,255,.65),transparent 70%),
    linear-gradient(#7FB0E2,#C9DFF4 70%,#DCEAF7)}
.welc .wtop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#C8302A,#C8302A 40%,rgba(200,48,42,0))}
.welc .wtop svg{width:54px;height:54px;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.25))}
.welc .wtop small{color:#10205e}
.welc .wtop big{color:#000}
.welc .wtop big em{color:#A82A14}
.welc .wmid{background:
    radial-gradient(ellipse 260px 70px at 78% 30%,rgba(255,255,255,.55),transparent 70%),
    radial-gradient(ellipse 200px 60px at 30% 85%,rgba(255,255,255,.5),transparent 70%),
    linear-gradient(160deg,#C9DCEF,#E8F0F8 55%,#D3E2F1)}
.welc .wl{background:none;padding:12px 0 12px 10px;flex-basis:250px}
.welc .wl::before{content:"CONTENTS";display:block;background:#000;color:#fff;font-size:13px;font-weight:700;letter-spacing:.32em;padding:3px 12px;margin:0 0 4px}
.welc .wl button{color:#000;font-weight:700;font-size:16px;padding:8px 12px;border-left:6px solid #6FA8DC;border-bottom:1px solid #9FB4CA;box-shadow:0 1px 0 rgba(255,255,255,.8)}
.welc .wl button:nth-child(2){border-left-color:#D8281E}
.welc .wl button:nth-child(3){border-left-color:#2E9E3E}
.welc .wl button:nth-child(4){border-left-color:#1F5FC9}
.welc .wl button:nth-child(5){border-left-color:#E8B400}
.welc .wl button svg{width:22px;height:22px}
.welc .wl button:hover,.welc .wl button.on{background:rgba(255,255,255,.8);color:#000080}
.welc .wr{background:linear-gradient(165deg,rgba(255,255,255,.92),rgba(236,243,250,.8) 60%,rgba(214,228,242,.7));margin:12px 12px 12px 14px;border:1px solid #B7C9DC}
.welc .wr h3{color:#000}
.welc .wbot{background:#E6EEF7;border-top:1px solid #B7C9DC}
@media (max-width:760px){.welc .wl{padding:10px 10px 4px}.welc .wr{margin:8px 10px 10px}.welc .wbot{flex-wrap:wrap;gap:6px}.welc .wbot .btn{margin-left:auto}}

/* 5. First-run Setup Program (realism.js), like an old CD-ROM installer */
.setupx{position:fixed;inset:0;z-index:2147482000;background:#000;color:#fff;display:flex;flex-direction:column;gap:6vh;padding:7vh 7vw;overflow:auto;font-family:var(--ui)}
.sx-head{display:flex;align-items:center;gap:18px 26px;flex-wrap:wrap}
.sx-plate{display:inline-flex;align-items:center;gap:14px;padding:10px 22px 10px 14px;border:3px solid #fff;box-shadow:0 0 0 3px #000,0 0 0 5px #9aa}
.sx-plate svg{width:64px;height:64px;flex:0 0 auto;background:#fff;padding:4px;border:2px solid #000}
.sx-plate b{font-size:clamp(28px,4.6vw,52px);font-family:'Arial Black','Franklin Gothic Medium',Arial,sans-serif;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.5);line-height:1.05}
.sx-sub{font-size:clamp(26px,4.2vw,48px);font-weight:700;color:#D6E4EE;font-family:'Franklin Gothic Medium','Arial Narrow',Arial,sans-serif;line-height:1}
.sx-body{display:flex;gap:5vw;align-items:flex-start}
.sx-gauges{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,24px);gap:6px 10px;padding:10px 12px;background:#B8C8D0;border:2px solid;border-color:#E8F0F4 #5a6a72 #5a6a72 #E8F0F4}
.sx-gauges span{position:relative;height:84px;background:#6f7f86;border:2px solid;border-color:#3a464b #E8F0F4 #E8F0F4 #3a464b}
.sx-gauges i{position:absolute;left:3px;right:3px;bottom:3px}
.sx-gauges .g1{height:74%;background:#3BD13B}
.sx-gauges .g2{height:8%;background:#9FB0B8}
.sx-gauges .g3{height:20%;background:#E0301E}
.sx-gauges em{font-style:normal;text-align:center;color:#000;font-weight:700;font-size:15px}
.sx-box{flex:0 1 560px;min-width:0;background:#B8C8D0;color:#000;padding:14px 20px 12px;font-size:17px;border:2px solid;border-color:#E8F0F4 #5a6a72 #5a6a72 #E8F0F4}
.sx-f{min-height:1.4em;font-family:var(--mono);font-size:16px}
.sx-bar{height:30px;margin:10px 0 8px;background:#fff;padding:2px;border:2px solid;border-color:#5a6a72 #fff #fff #5a6a72}
.sx-bar i{display:block;height:100%;width:0;background:#3E6BF0}
.sx-pct{text-align:center;font-weight:700}
.sx-skip{position:absolute;right:24px;bottom:24px}
@media (max-width:760px){
  .setupx{padding:40px 16px 90px;gap:28px}
  .sx-gauges{display:none}
  .sx-plate svg{width:44px;height:44px}
  .sx-skip{right:16px;bottom:20px}
}
@media (prefers-reduced-motion:reduce){.webw:has(.wload) .throb svg{animation:none;opacity:.75}}

/* Message Board rework (2026-09-26): phpBB / early vBulletin, circa 2000 (Alex picked sketch B). */
.fb{--steel:#006699;--steel-dk:#004C73;--cat1:#EAF0F8;--cat2:#C6D3E2;--catb:#7F9DB9;--catt:#1B3A5C;--line:#D1D7DC;--ra:#EFEFEF;--rb:#DEE3E7;--lnk:#00449E;
  font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13.5px;color:#000;padding:8px;height:min(560px,68vh)}
.fb .link{color:var(--lnk);font-family:inherit}
.fb a{color:var(--lnk)}
.fb-head{background:var(--steel);color:#fff;padding:6px 9px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.fb-head b{font-size:15px}
.fb-head span{font-size:12px;opacity:.9}
.fb-crumbs{background:var(--steel);color:#fff;padding:5px 8px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-size:13px}
.fb-crumbs .link{color:#fff;text-decoration:underline;font-weight:700}
.fb-crumbs b{color:#fff}
.fb-crumbs>span:last-child,.fb-foot>span{display:flex;gap:6px}
.fb-btn{font-weight:700;font-size:13px;padding:3px 10px}
.fb-t{width:100%;border-collapse:collapse;border:1px solid var(--catb);margin-bottom:10px}
.fb-t td,.fb-t th{border:1px solid var(--line);padding:6px 7px;vertical-align:top;text-align:left}
.fb-cat td{background:linear-gradient(var(--cat1),var(--cat2));border-color:var(--catb);color:var(--catt);font-weight:700;font-size:13.5px;padding:6px 8px}
.fb-h th{background:var(--steel);border-color:var(--steel-dk);color:#fff;font-size:12px;font-weight:700;padding:3px 6px;white-space:nowrap}
.fb-t tr[data-b]:nth-child(odd) td,.fb-t tr[data-t]:nth-child(odd) td{background:var(--ra)}
.fb-t tr[data-b]:nth-child(even) td,.fb-t tr[data-t]:nth-child(even) td{background:var(--rb)}
.fb-t tr[data-b],.fb-t tr[data-t]{cursor:pointer}
.fb-t tr[data-b]:hover td,.fb-t tr[data-t]:hover td{background:#FFFBE0}
.fb-ic{width:28px;text-align:center!important;padding:6px 3px!important}
.fb-fold,.fb-mi{vertical-align:middle}
.fb-mi{margin-right:5px}
.fb-name{font-weight:700;font-size:13.5px;text-align:left}
.fb-desc{color:#444;font-size:12px;margin-top:2px}
.fb-from{display:inline-block;font-size:12px;color:#4A154B;background:#F6EEF7;border:1px solid #D7BFD9;padding:0 4px;border-radius:2px;white-space:nowrap}
.fb-n{width:56px;text-align:center!important}
.fb-by{width:120px;font-size:12.5px}
.fb-last{width:150px;font-size:12px;white-space:nowrap}
.fb-mini{display:none;color:#444;font-size:12px;margin-top:3px}
.fb-pin{color:#B00000;font-weight:700}
.fb-box{background:var(--ra);border:1px solid var(--line);padding:6px 8px;font-size:12.5px;margin-bottom:6px}
.fb-adm{color:#CC0000;font-weight:700}
.fb-legend{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:12px;color:#333}
.fb-stats{font-size:12px;color:#555;margin-top:6px}
.fb-sub{padding:4px 2px 8px}
.fb-sub b{font-size:14.5px}
.fb-empty{padding:10px;color:#555}
.fb-subj{font-weight:700;font-size:15px;padding:6px 8px;border:1px solid var(--catb);border-bottom:0;background:linear-gradient(var(--cat1),var(--cat2));color:var(--catt)}
.fb-thread{border:1px solid var(--catb);margin-bottom:8px}
.fb-post{display:grid;grid-template-columns:150px 1fr;border-top:1px solid var(--line)}
.fb-post:first-child{border-top:0}
.fb-post:nth-child(odd){background:#fff}
.fb-post:nth-child(even){background:#F5F7F9}
.fb-user{padding:8px;border-right:1px solid var(--line);font-size:12px;color:#444;line-height:1.4;overflow-wrap:anywhere}
.fb-user .nm{display:block;color:var(--lnk);font-weight:700;font-size:13.5px;cursor:pointer}
.fb-user img.av{width:48px!important;height:48px!important}
.fb-user .av{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;margin:5px 0;object-fit:cover}
.fb-rank.adm{color:#CC0000;font-weight:700}
.fb-us{font-size:12px}
.fb-via{display:inline-block;font-size:12px;color:#7A5C00;background:#FFF3D6;border:1px solid #E9D9A6;padding:0 4px;border-radius:2px}
.fb-msg{padding:8px 10px;min-width:0}
.fb-ph{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;color:#444;padding-bottom:5px;margin-bottom:7px;border-bottom:1px dashed var(--line)}
.fb-tools{display:flex;gap:10px}
.fb-tools .link,.fb-tools a{font-size:12px}
.fb-body{line-height:1.5;overflow-wrap:anywhere}
.fb-quote{margin:4px 0 8px}
.fb-ql{font-size:12px;color:#555;font-weight:700}
.fb-qb{background:#F3F3F3;border:1px solid #BDC4CC;padding:6px 8px;font-size:12.5px}
.fb-pics{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fb-pics:empty{display:none}
.fb-pic{padding:0;border:1px solid #999;background:#fff;cursor:zoom-in;line-height:0;max-width:260px}
.fb-pic img{max-width:100%;height:auto}
.fb-pic.big{max-width:100%;cursor:zoom-out}
.fb-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0}
.fb-nav{font-size:12.5px}
.fb-mod{font-size:12.5px;color:#B00000;margin:4px 0}
.fb-closed{padding:8px;background:var(--ra);border:1px solid var(--line);font-size:13px}
.fb-reply{border:1px solid var(--catb);background:var(--ra);padding:0 8px 8px;margin-top:6px}
.fb-rh{background:var(--steel);color:#fff;font-weight:700;font-size:12px;margin:0 -8px 8px;padding:3px 8px}
.fb-reply .row{margin-top:6px}
.fb-form{width:100%;border-collapse:collapse;border:1px solid var(--catb)}
.fb-form th,.fb-form td{border:1px solid var(--line);padding:7px 8px;vertical-align:top;text-align:left}
.fb-form th{background:var(--rb);color:var(--catt);width:130px;font-size:13px;white-space:nowrap}
.fb-form td{background:var(--ra)}
.fb-form .field{width:100%}
.fb-icons{display:flex;flex-wrap:wrap;gap:4px 12px}
.fb-icons label{display:inline-flex;align-items:center;gap:3px;cursor:pointer;font-size:12px}
.fb-compose{display:flex;gap:8px;align-items:flex-start}
.fb-compose textarea{flex:1;min-width:0}
.fb-smilies{border:1px solid var(--line);background:#fff;padding:4px;display:grid;grid-template-columns:repeat(3,30px);gap:3px}
.fb-smilies div{grid-column:1/-1;font-size:12px;font-weight:700;color:var(--catt);text-align:center}
.fb-sm{width:30px;height:30px;font-size:17px;border:1px solid #bbb;background:#f7f7f7;cursor:pointer;padding:0}
.fb-note{font-size:12.5px;color:#444;margin:8px 0}
@media (max-width:760px){
  .fb{padding:6px;height:calc(100% - 4px)}
  .fb-t .fb-n,.fb-t .fb-last,.fb-t .fb-by{display:none}
  .fb-mini{display:block}
  .fb-post{grid-template-columns:1fr}
  .fb-user{border-right:0;border-bottom:1px dashed var(--line);display:grid;grid-template-columns:40px 1fr;column-gap:8px;align-items:center}
  .fb-user .av,.fb-user img.av{grid-row:1/span 4;grid-column:1;width:40px!important;height:40px!important;margin:0}
  .fb-user>*:not(.av){grid-column:2}
  .fb-form,.fb-form tbody,.fb-form tr,.fb-form th,.fb-form td{display:block;width:100%}
  .fb-form th{border-bottom:0}
  .fb-compose{flex-direction:column}
  .fb-smilies{grid-template-columns:repeat(6,36px)}
  .fb-sm{width:36px;height:36px}
  .fb-last,.fb-desc,.fb-mini,.fb-us,.fb-from,.fb-ph,.fb-tools .link,.fb-tools a,.fb-legend,.fb-stats,.fb-via{font-size:12.5px}
}

/* 2026-09-26, C4C - world Mara feedback: tour balloon on one row (19), Recycle Bin (35), the Open button
   on a site that can't be framed (37). */
.tourtip{width:330px}
.tt-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tt-row .link,.tt-row .btn{white-space:nowrap}
.binw .fgrid .ci.sel,.docsw .fgrid .ci.sel{background:#000080;color:#fff}
.binw .binbar{display:flex;gap:6px;padding:4px 6px}
.dicon.binover,.binw.binover .fgrid{outline:1px dotted #fff;background:rgba(0,0,128,.35)}
/* Board buttons: Post Reply and Post New Topic side by side on the right, not spread across the bar (8). */
.fb-crumbs .fb-acts{display:flex;gap:6px;margin-left:auto}

/* ===== 2026-09-26, C4C - world Wonka experience: Wonka's picture (the Condescending Wonka still), his
   orientation buttons, and Wonka dropping by a window's title bar. */
/* Room to breathe (Alex: "it doesn't look great with the buttons being squished so much"). */
.wkchips{display:flex;flex-wrap:wrap;gap:10px;padding:12px 10px 14px;margin:0 4px;border-bottom:1px solid var(--shadow);box-shadow:0 1px 0 var(--hilite)}
.wkchips .btn{padding:5px 16px;min-height:30px}
.montyw .imlog{height:280px !important;padding:8px 10px}
.montyw .imlog .iml{margin:0 0 8px;line-height:1.45}
.montyw > .wb > .row{padding:10px 8px 4px !important;gap:8px}
.montyw .hint{padding:4px 10px 8px !important}
.wkdck{display:flex;gap:6px;align-items:center;padding:0 10px 10px;font-size:14px}
.wkdrop{position:absolute;right:36px;bottom:100%;margin-bottom:0;display:flex;align-items:flex-end;gap:2px;z-index:3;pointer-events:none;animation:wkin .35s steps(4)}
.wkdrop > *{pointer-events:auto}
.wkdrop img{flex:0 0 auto;width:175px;height:140px;display:block}
.wkdrop.bye{animation:wkout .35s steps(4) forwards}
.wkbal{position:relative;flex:0 0 260px;align-self:flex-start;background:#FFFFE1;border:1px solid #000;border-radius:10px;padding:8px 11px 9px;font-size:14.5px;line-height:1.4;color:#000;box-shadow:2px 2px 0 rgba(0,0,0,.25)}
.wkbal b{display:block;font-size:12.5px;color:#7A1F10;margin-bottom:2px}
.wkbal p{margin:0 0 7px}
.wkbal .row{display:flex;gap:10px;align-items:center}
.wkbal .link{font-size:13px}
.wkbal::before{content:"";position:absolute;right:-11px;top:22px;border:6px solid transparent;border-left:11px solid #000;border-right:0}
.wkbal::after{content:"";position:absolute;right:-9px;top:23px;border:5px solid transparent;border-left:10px solid #FFFFE1;border-right:0}
@keyframes wkin{from{transform:translateY(-40px);opacity:0}to{transform:none;opacity:1}}
@keyframes wkout{to{transform:translateY(-40px);opacity:0}}
/* Sign On: a gap between the welcome paragraphs (the reset leaves them touching). Alex: "spacing is weird here". */
.aolhead + div > p:not(.hint),.logon .lg p:not(.hint){margin:0 0 10px}
/* The tour's balloons are Wonka talking: his face at the top left of each one. */
.tourtip{width:388px;padding-left:58px;background-image:url(wonka-head.png);background-repeat:no-repeat;background-size:44px 44px;background-position:8px 10px}
/* Classroom > Week 0 as a Windows 98 "web view" folder (Alex, 2026-09-26: "a little more presentable this whole folder") */
.classw{min-width:0}
.fgrid.wk0{display:flex;gap:0;padding:0;min-height:300px;align-items:stretch}
.wk0 .wvside{flex:0 0 190px;padding:14px 14px 12px;background:linear-gradient(#fff,#fff 60%,#eef2fb);border-right:1px solid #c0c0c0;font-size:14px;line-height:1.45;color:#222}
.wk0 .wvico svg{width:40px;height:40px}
.wk0 .wvside h3{font-family:Verdana,Tahoma,sans-serif;font-size:22px;margin:6px 0 0;color:#000}
.wk0 .wvsub{margin:0;color:#555}
.wk0 .wvside hr{border:0;height:2px;margin:10px 0;background:linear-gradient(90deg,#000080,#1084d0 60%,transparent)}
.wk0 .wvside p{margin:0 0 8px}
.wk0 .wvitems{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:12px;align-content:start;background:#fff}
.wk0 .wvi{align-items:flex-start;text-align:left;padding:6px;border:1px dotted transparent}
.wk0 .wvi:hover,.wk0 .wvi:focus-visible{border-color:#000080;background:#eef2fb}
.wk0 .wvi:hover span.nm{background:none;color:#000}
.wk0 .thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#000;border:2px solid;border-color:#808080 #fff #fff #808080;overflow:hidden}
.wk0 .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wk0 .thumb i{position:absolute;right:6px;bottom:5px;width:24px;height:18px;background:rgba(0,0,0,.65);color:#fff;font-style:normal;font-size:11px;display:grid;place-items:center;border:1px solid #fff}
.wk0 .docico{display:grid;place-items:center;width:100%;aspect-ratio:16/9;background:#fffde8;border:2px solid;border-color:#808080 #fff #fff #808080}
.wk0 .docico svg{width:44px;height:44px}
.wk0 .wvi .nm{font-weight:700;font-size:14.5px;line-height:1.3;margin-top:4px}
.wk0 .wvi small{color:#555;font-size:13px}
@media (max-width:760px){.fgrid.wk0{flex-direction:column}.wk0 .wvside{flex:none;border-right:0;border-bottom:1px solid #c0c0c0}.wk0 #wvinfo{display:none}.wk0 .wvitems{grid-template-columns:repeat(2,1fr)}}

/* Onboarding as one chat with Wonka (2026-09-26, session "C4C - world Wonka onboarding") */
.scene[data-scene="desktop"] .icons{transition:opacity 1.4s}
.scene.meeting .icons{opacity:0;pointer-events:none}
.montyw.meet .imlog{height:400px !important;font-size:16px}
.montyw.meet .mtyc{flex:0 0 130px}
.montyw.meet .mtyc svg{width:120px;height:120px}
.montyw.meet .hint,.montyw.meet .wkdck{display:none}
.montyw .iml .rcard{margin:2px 0 4px;white-space:pre-line}
.montyw .iml .rcard .blank{display:inline;min-width:0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.montyw .iml .rcard .blank.wide{display:inline-block;min-width:140px}
.montyw .iml .rcard .blank.typing::after{content:"_";animation:blinkslow .6s steps(2) infinite}
@media (max-width:760px){ .montyw.meet .imlog{height:300px !important} }

/* 2026-09-26 (evening), session "C4C - Wonka onboarding" round 2: the Week 0 quests at the end of the chat as a list */
.montyw .iml .rcard .wkquests{margin:2px 0 2px 20px;padding:0;white-space:normal}
.montyw .iml .rcard .wkquests li{margin:3px 0}
.scene.meeting.touring .icons{opacity:1;pointer-events:auto}
/* Desktop icons on a grid (Pranav's 39): every icon the same height, so the columns line up in rows the way
   Windows 98's did. Two lines of label fit ("Suggestion Box NEW", "My Documents"). Phones keep their own grid. */
@media (min-width:761px){
  .icons:not(.free) .dicon{height:98px;justify-content:flex-start}
}
/* Setup 3 in Alex's words, and "See how it'll look" with his own post in Slack and on the board (2026-09-26 evening) */
.seelbl{margin:4px 0 4px;font-weight:bold}
.slackmock{background:#fff;border:1px solid #808080;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Lato,sans-serif;font-size:15px;color:#1d1c1d;margin-bottom:12px}
.slackmock .sm-ch{padding:8px 12px;border-bottom:1px solid #e2e2e2;font-weight:800}
.slackmock .sm-msg{display:flex;gap:8px;padding:10px 12px;line-height:1.45}
.slackmock .sm-msg img{width:36px !important;height:36px !important;max-height:none !important;object-fit:cover;border-radius:6px;flex:none;align-self:flex-start}
.slackmock .sm-t{color:#616061;font-size:12px}
/* The tour's Win98 transitions, and Wonka on the Buddy List (2026-09-26 evening) */
.wktr{position:absolute;inset:0;z-index:9000;pointer-events:none;overflow:hidden}
.wktr > i{display:block;transition:opacity .05s steps(1)}
.wktr canvas{width:100%;height:100%;display:block}
.buddy .wkrow img{width:16px;height:16px;border-radius:2px;flex:none}
.wkim .imwho img{border-radius:3px}
/* Setup 3 spacing (Alex: "better spacing here"): the two choices in a group box, radios level with their text */
.sbopts{margin:16px 0 0;padding:8px 12px;border:1px solid #808080;box-shadow:1px 1px 0 #fff inset,1px 1px 0 #fff}
.sbopts .rd{align-items:center;gap:8px;margin:6px 0}
.sbopts .rd input{margin:0;flex:none}
.sblinks{margin:16px 0 0}
/* Alex's notes, 2026-09-26 night: Setup 3 spacing, Wonka's entrance, skip the slow typing, the big tour button */
.lead .sblinks{margin-top:20px}
.sbopts .rd{align-items:flex-start}
.sbopts .rd input{margin-top:4px}
.wkin{position:absolute;inset:0;z-index:8000;background:rgba(0,0,40,.55);pointer-events:none;animation:wkfade .3s both}
.wkin.out{animation:wkfadeout .6s both}
.wkin-drop{position:absolute;left:50%;top:50%;width:260px;margin:-104px 0 0 -130px;animation:wkdrop 1.3s cubic-bezier(.3,1.4,.5,1) .45s both}
.wkin-hw{position:absolute;right:16px;bottom:44px;background:#FFFFE1;border:1px solid #000;padding:8px 12px;font-size:14px;line-height:1.35;box-shadow:3px 3px 0 rgba(0,0,0,.35)}
@keyframes wkdrop{0%{transform:translateY(-120vh) rotate(-900deg) scale(.3)}70%{transform:translateY(0) rotate(12deg) scale(1.08)}85%{transform:rotate(-7deg) scale(.97)}100%{transform:none}}
@keyframes wkfade{from{opacity:0}to{opacity:1}}
@keyframes wkfadeout{from{opacity:1}to{opacity:0}}
.wkpop{animation:wkpop .45s steps(6) both}
@keyframes wkpop{from{transform:scale(.12)}to{transform:none}}
.wkskip{text-align:right;padding:2px 8px 0}
.wktourgo{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 8px 4px}
.wktourgo .wkbig{font-size:18px;font-weight:bold;padding:10px 22px}
.wkim .wktourbar{display:flex;align-items:center;gap:12px;padding:8px 4px 4px;margin-top:6px;border-top:1px solid #808080;box-shadow:0 1px 0 #fff inset}
.wkim .wktourbar span{flex:1;font-weight:bold}

/* 2026-09-27: the cast (Wonka as the film still or the 1964 drawing, and Mr. Bean) and Wonka's list */
.mtyc{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding-top:6px}
.montyw.meet .mtyc svg{width:120px;height:96px}
.mtyc svg + svg{margin-top:-2px}
.mtyc.wkswap svg{animation:wkswap .6s cubic-bezier(.3,1.5,.5,1) both}
@keyframes wkswap{0%{transform:scale(.2) rotate(-25deg);opacity:0}100%{transform:none;opacity:1}}
.wkarrive{position:absolute;left:50%;top:-300px;width:220px;margin-left:-110px;z-index:8000;pointer-events:none;animation:wkarrive 1.4s cubic-bezier(.3,1.3,.5,1) both}
@keyframes wkarrive{0%{top:-300px;transform:rotate(-540deg)}60%{top:40%;transform:rotate(0)}80%{top:40%;opacity:1}100%{top:40%;opacity:0;transform:scale(.3)}}
.iml b.them.bean{color:#6b4f1d}
.buddy .beanrow.hide{display:none}
.wkclip{width:118px;margin-top:6px;background:#FFF7A8;background-image:repeating-linear-gradient(#FFF7A8 0 15px,#9fc3e6 15px 16px);border:1px solid #b9a94a;box-shadow:2px 3px 0 rgba(0,0,0,.35);padding:4px 6px 6px;font:12px/16px "Comic Sans MS","Comic Neue",cursive;color:#1b1b6b;transform:rotate(-2deg);animation:wkclip .7s cubic-bezier(.3,1.4,.5,1) both}
.wkclip b{display:block;font-size:12px;border-bottom:1px solid #d9534f;margin-bottom:2px}
.wkclip ul{list-style:none;margin:0;padding:0}
.wkclip li{position:relative;padding-left:14px}
.wkclip li::before{content:"";position:absolute;left:0;top:3px;width:9px;height:9px;border:1px solid #1b1b6b}
.wkclip li.done{text-decoration:line-through;text-decoration-color:#c0392b;color:#6a6a8a}
.wkclip li.done::after{content:"\2713";position:absolute;left:0;top:-5px;color:#c0392b;font-size:17px;font-weight:bold;animation:wktick .35s ease-out both}
@keyframes wkclip{0%{transform:translateY(160px) rotate(12deg);opacity:0}100%{transform:rotate(-2deg);opacity:1}}
@keyframes wktick{0%{transform:scale(2.4);opacity:0}100%{transform:none;opacity:1}}
@media (max-width:760px){ .montyw.meet .mtyc{flex-basis:96px} .montyw.meet .mtyc svg{width:90px;height:72px} .wkclip{width:92px;font-size:11px;line-height:15px;background-image:repeating-linear-gradient(#FFF7A8 0 14px,#9fc3e6 14px 15px)} }
/* 2026-09-27: the tour's way forward, said plainly and big (Alex: "make it more visually clear how to move on with the tour") */
.wktourgo .wkbig{height:auto;min-height:44px;line-height:1.2}
.wkim .wktourbar .wknext,.tourtip .wkgo{height:auto;min-height:36px;font-size:16px;font-weight:bold;padding:6px 14px;animation:wkgo 1.6s ease-in-out infinite}
@keyframes wkgo{0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,0)}50%{box-shadow:0 0 0 4px rgba(255,215,0,.9)}}
.tourtip .tt-row{flex-wrap:wrap;gap:6px}
.montyw:not(.meet) .wkclip{width:84px;font-size:10px;line-height:14px;padding:3px 4px;background-image:repeating-linear-gradient(#FFF7A8 0 13px,#9fc3e6 13px 14px)}
/* 2026-09-27: more whimsy (Alex: "i LOVE the transitions ... can you do more stuff like that?") */
.wktr .wkerr{position:absolute;width:300px;max-width:80%;font-size:14px}
.wkerrb{display:flex;gap:10px;align-items:flex-start;padding:12px 12px 6px}
.wkerrb b{font-size:28px;line-height:1;color:#c00}
.wkerrf{text-align:center;padding:4px 0 10px}
.wkgears{position:absolute;inset:0;z-index:8000;display:grid;place-items:center;background:rgba(0,0,40,.35);pointer-events:none;animation:wkfade .2s both}
.wkgears.out{animation:wkfadeout .3s both}
.wkgears svg{width:min(520px,90%);filter:drop-shadow(3px 3px 0 rgba(0,0,0,.5))}
.wkgears .g1>g{animation:wkspin 1.1s cubic-bezier(.5,0,.3,1) both}
.wkgears .g2>g{animation:wkspin2 1.1s cubic-bezier(.5,0,.3,1) both}
@keyframes wkspin{to{transform:rotate(200deg)}}
@keyframes wkspin2{to{transform:rotate(-300deg)}}
.wkshake{animation:wkshake .5s steps(8) .45s}
@keyframes wkshake{0%,100%{transform:none}25%{transform:translate(-5px,2px)}50%{transform:translate(4px,-3px)}75%{transform:translate(-3px,-1px)}}
/* the factory film transition: an iris opens on 1927 sepia footage, flicker and grain, an intertitle, iris closes */
.wkfilm{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.wkfilm video{width:min(78vw,720px);aspect-ratio:4/3;object-fit:cover;filter:sepia(.75) contrast(1.15) brightness(.95);clip-path:circle(0% at 50% 50%);animation:wkiris 2.5s ease-in-out both, wkflick .12s steps(2) infinite}
@keyframes wkiris{0%{clip-path:circle(0% at 50% 50%)}18%{clip-path:circle(75% at 50% 50%)}85%{clip-path:circle(75% at 50% 50%)}100%{clip-path:circle(0% at 50% 50%)}}
@keyframes wkflick{0%{opacity:.92}50%{opacity:1}}
.wkgrain{position:absolute;inset:0;pointer-events:none;opacity:.18;background:repeating-radial-gradient(circle at 17% 32%,#fff 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,transparent 0 37%,rgba(255,255,255,.5) 37% 37.2%,transparent 37.2% 100%);animation:wkgrain .2s steps(3) infinite}
@keyframes wkgrain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}}
.wkcard{position:absolute;inset:0;display:grid;place-items:center;background:#000;opacity:0;transition:opacity .15s}
.wkcard span{border:3px double #e8e0c8;padding:18px 28px;color:#e8e0c8;font:bold 26px/1.3 Georgia,"Times New Roman",serif;letter-spacing:.08em;text-align:center;max-width:80%}
.wktr.wkcardon .wkcard{opacity:1}
.wktr.wkfilmout{animation:wkfadeout .35s both}
/* Mr. Bean's reactions: a comic bubble over his picture */
.mtyc{position:relative}
.beanbub{position:absolute;left:4px;right:4px;top:0;background:#fff;border:2px solid #000;border-radius:12px;padding:4px 7px;font:italic 12px/1.25 "Comic Sans MS","Comic Neue",cursive;color:#222;text-align:center;box-shadow:2px 2px 0 rgba(0,0,0,.35);z-index:3;animation:beanpop .25s cubic-bezier(.3,1.6,.5,1) both}
.beanbub::after{content:"";position:absolute;left:50%;top:-9px;margin-left:-6px;border:7px solid transparent;border-bottom-color:#000;border-top:0}
.beanbub.out{animation:wkfadeout .35s both}
@keyframes beanpop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
/* Wonka's list as a little Win98 window (Alex: "this feels liek itsnot in windows98") */
.wkclip{width:120px;margin-top:6px;padding:2px;background:#C0C0C0;background-image:none;border:0;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf;font:11px/1.3 Tahoma,"MS Sans Serif",sans-serif;color:#000;transform:none;animation:wkclip .35s ease-out both}
.wkclip-tb{background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-weight:bold;padding:2px 4px;margin-bottom:2px}
.wkclip ul{background:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px #808080,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;padding:4px 4px 5px}
.wkclip li{padding:2px 0 2px 17px;min-height:15px}
.wkclip li.wait{display:none}
.wkclip li::before{top:3px;width:11px;height:11px;border:0;background:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px #808080,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}
.wkclip li.done{text-decoration:none;color:#000}
.wkclip li.done::after{content:"";left:3px;top:5px;width:5px;height:3px;border-left:2px solid #000;border-bottom:2px solid #000;transform:rotate(-45deg);font-size:0;animation:none}
.wkclip li:not(.wait){animation:wkli .25s ease-out both}
@keyframes wkli{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes wkclip{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.montyw:not(.meet) .wkclip{width:86px;font-size:10px;padding:2px;background-image:none}
/* 2026-09-27: Wonka's tour, bigger and weirder (Alex: "go even bigger with the highlights and weirdness"). */
.wkgears .g1>g{animation-duration:2s}.wkgears .g2>g{animation-duration:2s}
.wkshake{animation:wkshake 1.2s steps(14) .4s}
.tourtip.wktip{z-index:9000}
.tourtip.wktip p{margin:4px 0 10px}
.tourtip .wknextbig{display:block;width:100%;min-height:44px;font-size:17px;margin:2px 0 8px}
.tourtip.wktip .tt-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap}
.wkspot{position:absolute;inset:0;z-index:110;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(circle at var(--x,50%) var(--y,50%),transparent 0 62px,rgba(0,0,30,.55) 90px)}
.dicon.lit.wkboing{animation:wkboing .9s cubic-bezier(.3,1.8,.5,1) both;z-index:111;position:relative}
.dicon.lit.wkboing::after{content:"";position:absolute;inset:-6px;border:3px solid;border-image:linear-gradient(90deg,#FF5F45,#FFD35A,#77BC1F,#0F86D6,#800080) 1;animation:wkrainbow 1.2s linear infinite}
@keyframes wkboing{0%{transform:scale(.4) rotate(-20deg)}60%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1.15)}}
@keyframes wkrainbow{to{filter:hue-rotate(360deg)}}
.wkstar{position:absolute;z-index:9100;pointer-events:none;font-style:normal;font-size:20px;text-shadow:1px 1px 0 #000;animation:wkstar 1.1s ease-out both}
@keyframes wkstar{0%{transform:translate(-50%,-50%) scale(.2)}70%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2) rotate(180deg);opacity:0}}
.w.wkshown{z-index:8500 !important;box-shadow:0 0 0 3px #FFD35A,0 0 22px 6px rgba(255,211,90,.7);animation:wkpopin .45s cubic-bezier(.3,1.5,.5,1) both}
@keyframes wkpopin{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.wkcard small{font-size:.6em;letter-spacing:.12em}
.wkcandy{position:absolute;top:-24px;z-index:8600;width:12px;height:12px;border-radius:50%;box-shadow:inset -2px -2px 0 rgba(0,0,0,.25),1px 1px 0 #000;pointer-events:none;animation:wkcandy 2s cubic-bezier(.4,.1,.7,1) both}
.wkcandy.wrap{width:22px;height:11px;border-radius:5px;background-image:repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.6) 3px 5px)}
@keyframes wkcandy{to{transform:translateY(calc(100vh + 40px)) rotate(var(--r))}}
.iml b.them.maja{color:#4b2a6b}
.buddy .majarow.hide{display:none}
.iml.majatr{margin:-2px 0 6px 18px;padding:3px 8px;border-left:3px solid #4b2a6b;background:#f3eefa;font-size:.95em}
.iml.majatr i{color:#4b2a6b;font-weight:bold;font-style:normal;font-size:.85em;text-transform:uppercase;letter-spacing:.04em}
/* Pranav's round (Sept 27): the staff preview note you can't miss */
.wkpreview{background:#FFFFE1;border:2px solid #000;box-shadow:3px 3px 0 rgba(0,0,0,.35);padding:10px 12px;font-size:15px;line-height:1.4}
.wkpreview > b:first-child{display:block;color:#a00;font-size:16px;letter-spacing:.05em;margin-bottom:4px}
.buddy .wonkarow.hide{display:none}
/* Maja's zoomies (the cat version of the gear change) */
.wkzoom{position:absolute;inset:0;z-index:8000;pointer-events:none;background:rgba(0,0,40,.25);animation:wkfade .2s both}
.wkzoom.out{animation:wkfadeout .3s both}
.wkpaw{position:absolute;font-style:normal;font-size:26px;opacity:.85;transform:rotate(90deg);animation:wkli .2s ease-out both}
.wkzcat{position:absolute;top:30%;width:190px;left:-220px;animation:wkzcat 1.6s cubic-bezier(.5,0,.5,1) both}
@keyframes wkzcat{0%{left:-220px;transform:scaleX(1)}45%{left:calc(100% + 20px);transform:scaleX(1)}50%{left:calc(100% + 20px);transform:scaleX(-1)}100%{left:-220px;transform:scaleX(-1) rotate(-8deg)}}
/* an action in the chat, IRC /me style */
.iml.wkact{color:#6a5a2a;font-style:italic;padding-left:14px}
.wkclip{transform-origin:top left;animation:wkswing .6s cubic-bezier(.3,1.5,.5,1) both}
@keyframes wkswing{from{transform:rotate(-25deg) translate(-30px,40px);opacity:0}to{transform:none;opacity:1}}

/* Message Board Back and Forward (2026-09-27) */
.boardw .fb-navbar{display:flex;gap:4px;padding:3px 4px 5px}
.boardw .fb-navbar .btn{min-width:0}

/* Help > About (2026-09-27) */
.about{display:flex;gap:14px;padding:14px 14px 6px;font-size:14.5px;line-height:1.4}
.about p{margin:0 0 8px}
.about-logo svg{width:48px;height:48px}

/* Suggestion Box, opened: which notes can be answered on the Message Board (2026-09-27) */
.sbx-show{display:flex;gap:10px;align-items:center;margin-left:auto;font-size:13px}
.sbx-show label{display:flex;gap:4px;align-items:center}
.sbx-tag{display:inline-block;padding:0 5px;border:1px solid #808080;background:#eee;font-size:12px;color:#333}
.sbx-tag.pub{background:#FFFFE1;border-color:#000;color:#000;font-weight:700}
.sbx-tag.done{background:#e3f2e3;border-color:#3a7d44;color:#1f5a28}

.mbw .sel{user-select:text;-webkit-user-select:text;font-family:inherit}