/* 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:13px;color:#000;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font-family:var(--ui);font-size:13px;color:#000}
input,textarea,select{font-family:var(--ui);font-size:13px}

/* ================= 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:13px}
#rb .tag{font-weight:800;letter-spacing:.08em;font-size:11px;background:#2B2410;color:#FFF9D6;padding:3px 7px;border-radius:3px;white-space:nowrap}
#rb button,#rb select{font-family:inherit;font-size:13px;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:12px;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:14px;padding:14px 14px 90px}
body.notes-open #notes{transform:none}
#notes h2{font-size:15px;margin:0 0 4px}
#notes .intro{font-size:13px;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:13px;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:12.5px;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:12px;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:13px;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:13px;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:12px;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:10px;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}
.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:12px;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:12px}
.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:15px;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:12px;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:12px;color:#444;line-height:1.4}
.ph{background:#FFFFE1;border:1px dashed #b39b00;padding:1px 4px;font-size:11px;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:14px;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:12px;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:17px;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:11px;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:12px}
  .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:18px;margin:0}
.aolhead .v{font-size:11px;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:14px;font-weight:700;min-height:22px;margin:6px 0 2px}
.connsub{text-align:center;font-size:12px;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:12px;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:12px}
.preview{padding:8px;display:flex;flex-direction:column;gap:8px}
.preview .lab{font-size:11px;color:#555;text-transform:uppercase;letter-spacing:.06em}
.bud{display:flex;align-items:center;gap:6px;font-size:13px}
.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:12px}
.from{font-size:12px;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:12.5px;overflow:auto}
.board .bh{background:linear-gradient(#3a5ea8,#1f3f86);color:#fff;padding:5px 8px;font-weight:700;font-size:12px;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:13px}
.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:11px;line-height:1.35;color:#333;word-break:break-word}
.post .who .nm{font-weight:700;font-size:12px;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:10.5px;color:#777;margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.via{display:inline-block;font-size:10px;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:12px;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:12.5px;background:#FFFFE8}
.rec .src{font-size:11px;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:12.5px}
.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:12.5px;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:13px;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:14px}
.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:18px;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:84px;padding:4px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:1px dotted transparent;cursor:pointer;font-size:12px}
.dicon svg{width:32px;height:32px;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:9px;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:12px;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:12px;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:13px}
.buddy .me small{display:block;font-size:11px}
.buddy .list{height:300px;overflow:auto;padding:4px 2px;margin-top:3px}
.buddy .grp{font-weight:700;font-size:12px;padding:3px 4px}
.buddy .row{display:flex;gap:6px;align-items:center;padding:2px 4px 2px 18px;font-size:12.5px;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:11px}
.av{display:inline-grid;place-items:center;background:#6b8fd6;color:#fff;font-weight:700;font-size:10px;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:12px;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:13px;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:11px;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:12px}
.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:17px;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:12px;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:12px;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:11px;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:18px;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:13px;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:15px;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:14px;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:13px}
.led{width:8px;height:8px;border-radius:50%;background:#1d3a1d}
.led.on{background:#39ff62;box-shadow:0 0 8px #39ff62}
.big-hi{font-size:18px;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:13px;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:12px;font-weight:700;margin:2px 0 3px}
.imlog{height:150px;overflow-y:auto;padding:6px;font-size:13px;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:12px}
.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:12px}
.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:14px;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:15px;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}
.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:11px;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:13px;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:11px;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:12.5px;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:18px;padding:0 3px;letter-spacing:1px}
.face{font-size:16px;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:13px;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:12px;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:13px}
.mhdr{padding:6px 8px;border-bottom:1px solid #ccc;font-size:12px;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:12px}
.btable{width:100%;border-collapse:collapse;font-size:12.5px}
.btable th{background:linear-gradient(#3a5ea8,#1f3f86);color:#fff;text-align:left;padding:4px 8px;font-size:12px}
.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:13px}
.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:12px;max-width:90%}
.w.max{left:0 !important;top:0 !important;width:100% !important;height:calc(100% - 32px) !important;max-width:none}
.w.max .wb{overflow:auto}
.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:12px}
.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:11px;color:#555}
.calgrid .dd{height:30px;background:#fff;border:1px solid #d0d0d0;cursor:pointer;font-size:12px}
.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:12.5px;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}
  .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:12px;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:11.5px}

/* ---- round 2 fixes ---- */
.donebox{background:#FFFFE1;border:1px solid #000;padding:6px 8px}
.plbl{cursor:pointer}
.fgrid .ci small{color:#555;font-size:10.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:13px}
.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:12.5px}
@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:10.5px}
  .post .who .nm{font-size:11px}
  .post{grid-template-columns:96px 1fr}
}
@media (max-width:760px){ .tbb{width:28px;height:24px;font-size:13px} .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:12px}
.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:11.5px;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} }