@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/pixelify-400.woff2') format('woff2');
}
:root{
  --face:#c0c0c0; --desk:#008080; --navy:#000080; --tb:40px;
  /* colors: these are the Windows 98 scheme; themes.css swaps them per theme (html[data-theme]) */
  --text:#000; --dim:#606060; --sub:#404040; --gray:#808080; --field:#fff; --hitx:#fff; --line:#000; --link:#000080; --err:#a00000;
  --b1:#0a0a0a; --b2:#fff; --b3:#808080; --b4:#dfdfdf;   /* bevel: darkest, lightest, shade, light */
  --cap1:#000080; --cap2:#1084d0; --off1:#808080; --off2:#b8b8b8; --captx:#fff;   /* title bars: active, inactive */
  --tip:#ffffe1; --code:#e4e4e4; --well:#808080; --wall:#006868; --wall2:#006060; --brandsh:#004848;
  --icotx:#fff; --icosh:1px 1px #000;   /* text on the desktop */
  --drop:3px 3px 0 rgba(0,0,0,.35);
  --dither:repeating-conic-gradient(#c0c0c0 0 25%,#fff 0 50%) 0 0/2px 2px;
  --font:"Pixelify Sans",Tahoma,"MS Sans Serif",Verdana,Geneva,sans-serif;
  --read:Tahoma,Verdana,"DejaVu Sans",Geneva,sans-serif;
  --raised: inset -1px -1px var(--b1), inset 1px 1px var(--b2), inset -2px -2px var(--b3), inset 2px 2px var(--b4);
  --sunken: inset -1px -1px var(--b2), inset 1px 1px var(--b3), inset -2px -2px var(--b4), inset 2px 2px var(--b1);
  --pressed: inset -1px -1px var(--b2), inset 1px 1px var(--b1), inset -2px -2px var(--b4), inset 2px 2px var(--b3);
  --etched: 0 0 0 1px var(--b3), 1px 1px 0 1px var(--b2), inset 1px 1px 0 var(--b2);
  /* density: compact values for a mouse; html.touch below swaps them for fingers */
  --fs:14px; --ctl:28px; --bpy:3px; --bpx:12px; --fpy:5px; --fpx:6px; --chk:18px; --chkrow:26px;
  --title:28px; --tbw:26px; --tbh:22px; --gly:10px; --grip:24px; --cell:5px;
  --icw:96px; --ich:104px; --ics:40px; --lbl:12.5px; --mi:42px; --smw:270px; --taskmin:46px;
  --lamp:12px; --spark:64px; --bar:22px; --monofs:12px;
  --tbt:calc(var(--tb) + env(safe-area-inset-bottom,0px));   /* taskbar incl. home-indicator inset */
}
html.touch{
  --tb:58px; --fs:16px; --ctl:44px; --bpy:8px; --bpx:18px; --fpy:9px; --fpx:10px; --chk:26px; --chkrow:44px;
  --title:44px; --tbw:44px; --tbh:36px; --gly:14px; --grip:44px; --cell:12px;
  --icw:112px; --ich:126px; --ics:52px; --lbl:14px; --mi:54px; --smw:310px; --taskmin:112px;
  --lamp:16px; --spark:88px; --bar:26px; --monofs:13.5px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--desk);
  font:var(--fs)/1.3 var(--font);color:var(--text);
  overscroll-behavior:none;-webkit-user-select:none;user-select:none;
  touch-action:pan-x pan-y;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}   /* pan only: no pinch or double-tap zoom of the page */
input,textarea,select,.selectable,pre{-webkit-user-select:text;user-select:text}
svg{display:block}
.ic{display:inline-flex;flex:none}

/* ---------- controls ---------- */
.btn{font:inherit;color:var(--text);background:var(--face);border:0;border-radius:0;box-shadow:var(--raised);
  min-width:78px;min-height:var(--ctl);padding:var(--bpy) var(--bpx);cursor:default;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn.sm{min-width:0;padding:var(--bpy) calc(var(--bpx) - 3px)}
.btn:active:not(:disabled),.btn.on{box-shadow:var(--pressed);padding:calc(var(--bpy) + 1px) calc(var(--bpx) - 1px) calc(var(--bpy) - 1px) calc(var(--bpx) + 1px)}
.btn:disabled{color:var(--gray);text-shadow:1px 1px var(--b2)}
.btn.def{box-shadow:0 0 0 1px var(--line),var(--raised)}
.btn:focus-visible{outline:1px dotted var(--text);outline-offset:-5px}
.field{font:inherit;color:var(--text);background:var(--field);border:0;border-radius:0;box-shadow:var(--sunken);padding:var(--fpy) var(--fpx);min-height:var(--ctl);width:100%}
select.field{padding:4px 2px}
.field:focus{outline:none}
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:var(--chk);height:var(--chk);margin:0;flex:none;background:var(--field);box-shadow:var(--sunken);position:relative}
input[type=checkbox]:checked::after{content:"";position:absolute;inset:3px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 5l3 3 5-6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
label.chk{display:flex;align-items:center;gap:8px;min-height:var(--chkrow)}
fieldset.group{border:0;margin:0;padding:14px 10px 10px;box-shadow:var(--etched);min-width:0;position:relative;margin-top:8px}
fieldset.group>legend{padding:0 4px;background:var(--face);margin-left:4px}
.col>fieldset.group{flex:none}
.row{display:flex;gap:8px;align-items:center}
.col{display:flex;flex-direction:column;gap:8px}
.grow{flex:1;min-width:0}
.pad{padding:10px}
.muted{color:var(--dim)}
.mono{font-family:"Lucida Console",Consolas,Menlo,monospace;font-size:var(--monofs)}
.sep{width:2px;align-self:stretch;margin:2px 3px;box-shadow:inset 1px 0 var(--b3),inset -1px 0 var(--b2)}
.hsep{height:2px;margin:3px 0;box-shadow:inset 0 1px var(--b3),inset 0 -1px var(--b2)}

.progress{height:var(--bar);padding:2px;background:var(--field);box-shadow:var(--sunken);overflow:hidden}
.progress>div{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--navy) 0 9px,transparent 9px 11px)}
.progress.warn>div{background:repeating-linear-gradient(90deg,#c08000 0 9px,transparent 9px 11px)}
.progress.crit>div{background:repeating-linear-gradient(90deg,#c00000 0 9px,transparent 9px 11px)}
canvas.spark{width:100%;height:var(--spark);display:block;background:#000;box-shadow:var(--sunken)}

.lamp{width:var(--lamp);height:var(--lamp);border-radius:50%;border:1px solid var(--line);background:var(--gray);flex:none}
.lamp.on{background:#00d000;box-shadow:inset -2px -2px #008000,inset 1px 1px #90ff90}
.lamp.bad{background:#ff2020;box-shadow:inset -2px -2px #900000}
.lamp.mid{background:#f0c000}

.tabs{display:flex;padding:0 4px;margin-bottom:-2px;position:relative;z-index:1;gap:0}
.tabs button{font:inherit;color:var(--text);background:var(--face);border:0;padding:6px 14px;min-height:calc(var(--ctl) + 2px);margin-top:3px;box-shadow:inset -1px 0 var(--b1),inset 1px 1px var(--b2),inset -2px 0 var(--b3),inset 2px 2px var(--b4);cursor:default;border-radius:0}
.tabs button.on{margin-top:0;padding-top:8px;box-shadow:inset -1px 0 var(--b1),inset 1px 1px var(--b2),inset -2px 0 var(--b3),inset 2px 2px var(--b4);position:relative;top:0}
.tabpanel{background:var(--face);box-shadow:var(--raised);padding:10px;flex:1;min-height:0;overflow:auto;position:relative}

.list{background:var(--field);box-shadow:var(--sunken);overflow:auto;min-height:0;overscroll-behavior:contain}
table.tbl{width:100%;border-collapse:collapse}
table.tbl th{position:sticky;top:0;background:var(--face);box-shadow:var(--raised);text-align:left;font-weight:normal;padding:calc(var(--cell) - 1px) 8px;white-space:nowrap}
table.tbl td{padding:var(--cell) 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
table.tbl tr.sel td{background:var(--navy);color:var(--hitx)}
table.tbl td.ico{width:26px;padding-right:0}
table.tbl td.r,table.tbl th.r{text-align:right}
.props{width:100%;border-collapse:collapse}
.props td{padding:3px 6px;vertical-align:top}
.props td:first-child{color:var(--sub);white-space:nowrap;width:1%}
pre.log{margin:0;background:#000;color:#c0c0c0;padding:8px;overflow:auto;white-space:pre-wrap;word-break:break-word;box-shadow:var(--sunken);flex:1;min-height:0}
.statusbar{display:flex;gap:3px;padding:3px 0 0;flex:none}
.statusbar>div{box-shadow:inset 1px 1px var(--b3),inset -1px -1px var(--b2);padding:3px 8px;min-height:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.toolbar{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:4px;flex:none}

/* ---------- windows ---------- */
#desktop{position:fixed;inset:0 0 calc(var(--tbt) + var(--kb,0px)) 0;overflow:hidden}
#wallpaper{position:absolute;right:24px;bottom:18px;color:var(--wall);font:bold 34px var(--font);letter-spacing:1px;pointer-events:none;text-align:right}
#wallpaper small{display:block;font-size:14px;color:var(--wall2);font-weight:normal}
.win{position:absolute;background:var(--face);box-shadow:var(--raised),var(--drop);padding:3px;display:flex;flex-direction:column;min-width:220px;min-height:150px;max-height:100%}
.win .title{height:var(--title);display:flex;align-items:center;gap:6px;padding:2px 3px;color:var(--captx);font-weight:bold;
  background:linear-gradient(90deg,var(--off1),var(--off2));touch-action:none;flex:none;cursor:default}
.win.active .title{background:linear-gradient(90deg,var(--cap1),var(--cap2))}
.win .title .t{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tbtns{display:flex;gap:2px;margin-left:4px}
.tbtn{width:var(--tbw);height:var(--tbh);background:var(--face);border:0;border-radius:0;box-shadow:var(--raised);display:flex;align-items:center;justify-content:center;padding:0;color:var(--text)}
.tbtn:active{box-shadow:var(--pressed)}
.tbtn.x{margin-left:3px}
.tbtn svg{width:var(--gly);height:var(--gly)}
.win .client{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;overflow:auto;position:relative;margin-top:3px;overscroll-behavior:contain;container-type:inline-size}
.win .grip{position:absolute;right:1px;bottom:1px;width:var(--grip);height:var(--grip);touch-action:none;cursor:nwse-resize;z-index:5;
  background:linear-gradient(135deg,transparent 0 50%,var(--b3) 50% 56%,transparent 56% 66%,var(--b3) 66% 72%,transparent 72% 82%,var(--b3) 82% 88%,transparent 88%)}
.win.max .grip,.win.snap .grip{display:none}
.win.max,.win.snap{box-shadow:var(--raised)}
/* a tap on a background window's iframe (terminal, music) raises the window instead of vanishing into the frame */
.win:not(.active) iframe{pointer-events:none}
/* where a dragged window will land: the inverted checker outline Windows drew while dragging */
.snapghost{position:absolute;z-index:99999;pointer-events:none;padding:6px;mix-blend-mode:difference;
  background:repeating-conic-gradient(#fff 0 25%,#000 0 50%) 0 0/4px 4px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.win.fixed .grip{display:none}
/* split screen: the seam between two snapped halves, drag it to resize both */
.splitbar{position:absolute;width:calc(var(--grip) / 2);transform:translateX(-50%);touch-action:none;cursor:ew-resize;display:flex;align-items:center;justify-content:center}
.splitbar.h{width:auto;height:calc(var(--grip) / 2);transform:translateY(-50%);cursor:ns-resize}
.splitbar::after{content:'';width:6px;height:min(60px,40%);background:var(--face);box-shadow:var(--raised)}
.splitbar.h::after{width:min(60px,40%);height:6px}

/* ---------- desktop icons ---------- */
#icons{position:absolute;left:6px;top:6px;bottom:6px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,var(--ich));grid-auto-columns:var(--icw);gap:2px;align-content:start;justify-content:start}
.dicon{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 2px;text-align:center;color:var(--icotx);cursor:default;border:0;background:none;font:inherit;width:var(--icw);height:var(--ich)}
.dicon .ic{filter:drop-shadow(1px 1px 0 rgba(0,0,0,.4))}
.dicon .ic svg{width:var(--ics);height:var(--ics)}
.dicon span.lb{display:block;text-shadow:var(--icosh);padding:1px 3px;line-height:1.2;max-width:calc(var(--icw) - 4px);overflow-wrap:anywhere;font-size:var(--lbl)}
.dicon.sel span.lb{background:var(--navy);color:var(--hitx);outline:1px dotted #ff0;text-shadow:none}
.dicon.sel .ic{filter:brightness(.55) sepia(1) hue-rotate(190deg) saturate(6)}

/* ---------- taskbar + start ---------- */
#taskbar{position:fixed;left:0;right:0;bottom:var(--kb,0px);height:var(--tbt);background:var(--face);box-shadow:inset 0 1px var(--b4),inset 0 2px var(--b2);display:flex;align-items:flex-start;gap:4px;padding:4px max(4px,env(safe-area-inset-right,0px)) 0 max(4px,env(safe-area-inset-left,0px));z-index:100000}
#taskbar .startbtn{font-weight:bold;min-width:84px;min-height:calc(var(--tb) - 8px);padding:2px 10px;flex:none}
#taskbar .tasks{display:flex;gap:3px;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior:contain}
#taskbar .tasks::-webkit-scrollbar{display:none}
#taskbar .sep{align-self:auto;height:calc(var(--tb) - 12px)}
.taskbtn{flex:0 1 180px;min-width:var(--taskmin);justify-content:flex-start;min-height:calc(var(--tb) - 8px);overflow:hidden;white-space:nowrap}
.taskbtn span.tx{overflow:hidden;text-overflow:ellipsis}
.taskbtn.on{box-shadow:var(--pressed);background:var(--dither);font-weight:bold}
.tray{margin-left:auto;box-shadow:var(--sunken);padding:5px 10px;display:flex;gap:10px;align-items:center;min-height:calc(var(--tb) - 8px);flex:none}
.startmenu{position:fixed;left:2px;bottom:calc(var(--tbt) + var(--kb,0px));width:var(--smw);max-width:calc(100vw - 4px);max-height:calc(100% - var(--tbt) - var(--kb,0px) - 4px);overflow:auto;background:var(--face);box-shadow:var(--raised),var(--drop);padding:3px 3px 3px 0;display:flex;z-index:100001}
.startmenu .side{width:30px;flex:none;background:linear-gradient(0deg,var(--cap1),var(--cap2));color:#c0c0c0;position:relative;margin-right:3px;min-height:260px}
.startmenu .side div{position:absolute;left:3px;bottom:8px;writing-mode:vertical-rl;transform:rotate(180deg);font:bold 22px var(--font);color:var(--captx);white-space:nowrap}
.startmenu .side b{color:#c0c0c0;font-weight:normal}
.startmenu .items{flex:1;min-width:0;display:flex;flex-direction:column}
.mi{display:flex;align-items:center;gap:12px;padding:6px 8px;min-height:var(--mi);border:0;background:none;font:inherit;text-align:left;cursor:default;color:var(--text)}
.mi:hover,.mi:active{background:var(--navy);color:var(--hitx)}
.mi.disabled{color:var(--gray)}
.mhd{padding:5px 10px 2px;color:var(--dim);font-size:.85em}
.themes{display:flex;gap:4px;padding:2px 8px 6px}
.thsw{flex:1;min-width:0;height:calc(var(--ctl) + 8px);padding:4px;border:0;border-radius:0;background:var(--face);box-shadow:var(--raised);cursor:default}
.thsw.on{box-shadow:var(--pressed);background:var(--dither)}
.thsw>span{display:flex;align-items:center;justify-content:center;height:100%}
.thsw i{display:block;width:60%;height:64%;border-top:3px solid}
.balloon{position:fixed;right:10px;bottom:calc(var(--tbt) + var(--kb,0px) + 8px);max-width:300px;background:var(--tip);border:1px solid var(--line);padding:9px 12px 9px 10px;z-index:300000;box-shadow:2px 2px 0 rgba(0,0,0,.3);display:flex;gap:9px;align-items:flex-start}

/* ---------- dialogs / login ---------- */
.overlay{position:fixed;inset:0 0 var(--kb,0px) 0;z-index:500000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.18);padding:12px}
.dialog{position:relative;min-width:300px;max-width:min(480px,100%);min-height:0}
.dialog .body{display:flex;gap:14px;padding:14px 14px 8px;align-items:flex-start}
.dialog .body .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;white-space:pre-wrap;overflow-wrap:anywhere}
.dialog .btns{display:flex;justify-content:center;gap:8px;padding:8px 10px 10px;flex-wrap:wrap}
html.touch .dialog .btns{gap:14px}
html.touch .dialog{max-width:min(540px,100%)}
.dialog .frow{display:flex;align-items:center;gap:8px}
.dialog .frow>label{width:110px;flex:none}
.dialog .frow.stack{flex-direction:column;align-items:stretch;gap:3px}
.dialog .frow.stack>label{width:auto}
#login{position:fixed;inset:0 0 var(--kb,0px) 0;background:var(--desk);display:flex;align-items:center;justify-content:center;padding:12px;z-index:400000}
#login .brand{position:absolute;left:24px;bottom:22px;color:var(--icotx);font:bold 40px var(--font);text-shadow:3px 3px var(--brandsh)}
#login .brand small{display:block;font:14px var(--font);text-shadow:1px 1px var(--brandsh);opacity:.85}

.drop{outline:2px dashed var(--navy);outline-offset:-6px;background:color-mix(in srgb,var(--navy) 8%,transparent)}
.hidden{display:none!important}
.big{font-size:16px;font-weight:bold}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 10px}
.badge{display:inline-block;min-width:18px;padding:0 5px;background:#c00000;color:#fff;font-size:11px;text-align:center;border-radius:9px;margin-left:6px}

/* ---------- narrow windows (portrait halves, small windows) ---------- */
@container (max-width:520px){
  table.tbl .opt{display:none}
  .toolbar .sep{display:none}
}

/* ---------- Claude chat ---------- */
.chat{display:flex;flex:1;min-height:0;gap:4px;padding:3px;position:relative}
.chat .side{width:230px;flex:none;display:flex;flex-direction:column;gap:4px}
.chat .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.chat .only-narrow{display:none}
.chathead{font-weight:bold;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 4px}
.chatlist{flex:1}
.chatlist button{display:flex;align-items:center;gap:8px;width:100%;border:0;border-radius:0;background:none;font:inherit;text-align:left;padding:var(--cell) 8px;color:var(--text);cursor:default}
.chatlist button.on{background:var(--navy);color:var(--hitx)}
.chatlist .tx{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chatlist .tx small{display:block;opacity:.7;font-size:.8em}
.chatlist .hd{padding:8px 8px 2px;color:var(--dim);font-size:.85em}
/* the transcript is for reading, so it uses the plain system face of the era rather than the pixel face of the chrome */
.chatlog{flex:1;padding:12px 14px;display:flex;flex-direction:column;gap:12px;font-family:var(--read);line-height:1.5}
.chatlog>*{flex:none}
.msg.you{align-self:flex-end;max-width:85%;background:var(--tip);border:1px solid var(--line);padding:7px 11px;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:2px 2px 0 rgba(0,0,0,.3)}
.msg.claude{max-width:72ch;overflow-wrap:anywhere}
.msg.streaming{white-space:pre-wrap}
.msg.streaming::after{content:"";display:inline-block;width:.55em;height:1em;background:var(--text);vertical-align:text-bottom;margin-left:2px;animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.md>:last-child{margin-bottom:0}
.md p{margin:0 0 .7em}
.md h3,.md h4{font-size:1em;margin:1em 0 .35em}
.md h3{font-size:1.1em}
.md>:first-child{margin-top:0}
.md ul,.md ol{margin:0 0 .7em;padding-left:1.5em}
.md li{margin:.15em 0}
.md code{font-family:"Lucida Console",Consolas,Menlo,monospace;font-size:.9em;background:var(--code);padding:0 3px}
.md pre,.tool pre,.ask pre{margin:0 0 .7em;background:#000;color:#c0c0c0;padding:8px 10px;overflow:auto;white-space:pre-wrap;word-break:break-word;box-shadow:var(--sunken);max-height:320px}
.md pre code{background:none;padding:0;font-size:inherit}
.md a{color:var(--link)}
.md .tblwrap{overflow-x:auto;margin:0 0 .7em}
.md table{border-collapse:collapse}
.md th,.md td{border:1px solid var(--b3);padding:3px 8px;text-align:left;vertical-align:top}
.md th{background:var(--face);font-weight:normal}
.tool{align-self:flex-start;max-width:100%;background:var(--face);box-shadow:var(--raised);font-family:var(--font)}
.tool>button{display:flex;align-items:center;gap:8px;width:100%;min-height:var(--ctl);padding:2px 10px;border:0;border-radius:0;background:none;font:inherit;color:var(--text);text-align:left;cursor:default}
.tool .tx{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tool .more{display:none;padding:0 6px 6px}
.tool.open .more{display:block}
.tool.open .tx{white-space:pre-wrap;overflow-wrap:anywhere}
.tool pre{margin:0 0 4px}
.ask{align-self:flex-start;width:min(600px,100%);background:var(--face);box-shadow:var(--raised),var(--drop);padding:3px;font-family:var(--font)}
.ask .cap{min-height:calc(var(--title) - 6px);display:flex;align-items:center;padding:2px 8px;color:var(--captx);font-weight:bold;background:linear-gradient(90deg,var(--cap1),var(--cap2))}
.ask.answered .cap{background:linear-gradient(90deg,var(--off1),var(--off2))}
.ask .askbody{padding:12px 10px 6px}
.ask pre.cmd{margin:0;max-height:220px}
.ask details summary{min-height:var(--chkrow);display:flex;align-items:center;cursor:default}
.ask .btns{display:flex;flex-wrap:wrap;gap:10px;padding:8px 10px 10px;align-items:center;min-height:calc(var(--ctl) + 18px)}
.ask .opts{gap:6px}
.btn.opt{justify-content:flex-start;text-align:left;width:100%}
.btn.opt.on{background:var(--dither)}
.ask .field.need{outline:2px solid #d00000;outline-offset:1px}
.note{align-self:center;color:var(--dim);text-align:center;max-width:60ch}
.note.err{color:var(--err)}
.welcome{display:flex;gap:14px;align-items:flex-start;margin:auto;max-width:52ch;font-family:var(--font)}
.composer{display:flex;gap:6px;align-items:flex-end;flex:none}
.composer textarea{resize:none;line-height:1.35;font-family:var(--read);max-height:200px}
.composer .cpic{min-width:var(--ctl);padding:0 4px;flex:none}
.cpics{display:flex;flex-wrap:wrap;gap:8px;flex:none;padding-top:6px}
.cpicx{position:relative;width:72px;height:72px;background:var(--well);box-shadow:var(--sunken);display:flex;align-items:center;justify-content:center}
.cpicx img,.mpics img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.cpicx button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--face);color:var(--text);font:bold 14px/1 var(--font);cursor:default}
.mpics{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.mpics img{max-height:160px;max-width:min(240px,100%)}
.msg.you .mpics:last-child{margin-bottom:0}
.mpicn{display:flex;align-items:center;gap:6px}
.chat.drop .chatlog{outline:2px dashed var(--navy);outline-offset:-4px}
.progress.busy{height:12px;flex:none}
.progress.busy>div{width:28%;animation:marq 1.6s steps(14) infinite}
@keyframes marq{from{margin-left:-28%}to{margin-left:100%}}
.modelcell{flex:none;max-width:45%}
/* ---------- Notes (the window reuses the .chat layout: side list + main) ---------- */
.notepad{flex:1;min-height:0;overflow:auto;background:var(--well);box-shadow:var(--sunken);padding:12px;touch-action:none;overscroll-behavior:contain}
.npage{position:relative;width:var(--pw,100%);aspect-ratio:1000/1414;margin:0 auto 12px;background:#fff;box-shadow:3px 3px 0 rgba(0,0,0,.4);cursor:crosshair}
.npage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.npage canvas.live{mix-blend-mode:multiply;pointer-events:none}
.npage .pn{position:absolute;right:8px;bottom:5px;color:#a0a0a0;font-size:.8em;pointer-events:none}
.nwelcome{margin:8% auto 0;background:var(--face);box-shadow:var(--raised),var(--drop);padding:16px}
.ntoolbox{flex:none;container-type:inline-size}   /* the bar's @container rules below measure this box, in the window and in full screen */
.ntools{padding:0;gap:3px}
.ntools .btn.sm{min-width:var(--ctl);padding:0 2px}
.ntools .btn.sm.on,.ntools .btn.sm:active:not(:disabled){padding:1px 1px 0 3px}
.ntools .nszstep{display:none}
.ntools .npg{min-width:5ch;text-align:center}
@container (max-width:560px){.ntools .nsz,.ntools .nzoom{display:none}.ntools .nszstep{display:inline-flex}}
@container (max-width:840px){html.touch .ntools .nsz,html.touch .ntools .nzoom{display:none}html.touch .ntools .nszstep{display:inline-flex}}
.chat.noside .side{display:none}
@container (max-width:900px){
  html.touch .nchat .only-narrow{display:inline-flex}
  html.touch .nchat .side{display:none;position:absolute;left:3px;top:3px;bottom:3px;z-index:3;width:min(300px,86%);background:var(--face);box-shadow:var(--raised),var(--drop);padding:5px}
  html.touch .nchat.showside .side{display:flex}
}
.nmenu{position:fixed;z-index:450000;display:flex;flex-direction:column;min-width:230px;max-height:calc(100% - 8px);overflow:auto;padding:3px;background:var(--face);box-shadow:var(--raised),var(--drop)}
.nmenu .mi{min-height:calc(var(--mi) - 8px);gap:10px;padding:4px 10px 4px 8px}
.nmenu .nmisp{width:24px;flex:none}
.nmenu .mi.on{font-weight:bold}
.nmenu .mi.on::after{content:'';margin-left:auto;width:10px;height:5px;border:solid currentColor;border-width:0 0 2px 2px;transform:translateY(-2px) rotate(-45deg)}
.vsep{align-self:stretch;width:2px;margin:2px 3px;box-shadow:inset 1px 0 var(--b3),inset -1px 0 var(--b2)}
.sw{display:flex;align-items:center;justify-content:center;width:calc(var(--ctl) - 14px);height:calc(var(--ctl) - 14px);border:1px solid var(--line)}
.sw.dot{border:0}
.sw.dot>span{border-radius:50%;background:var(--text)}
.chatlist button.open{font-weight:bold}
.chatlist button.nback{color:var(--dim)}
.nfull{position:fixed;inset:0;z-index:400000;display:flex;flex-direction:column;gap:3px;padding:3px 3px calc(3px + env(safe-area-inset-bottom,0px));background:var(--face)}
.nfull .toolbar{flex-wrap:nowrap;white-space:nowrap}
.nfull .lamp{flex:none;margin:0 6px}
.ntools .btn .ic svg,.nfull .btn .ic svg{width:calc(var(--ctl) - 10px);height:calc(var(--ctl) - 10px);display:block}
.ntools .btn:disabled .ic,.nfull .btn:disabled .ic{opacity:.4}
.nspaces{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.nspace.btn{flex:1 1 150px;justify-content:flex-start;gap:10px;padding:10px 12px;text-align:left}
.nspace .tx{display:flex;flex-direction:column}
.nspace small{color:var(--dim)}
.chatlist .ncourse{color:var(--text);font-size:1em;padding:8px 6px 3px 8px;gap:4px}
.chatlist .ncourse .btn{width:auto;flex:none;justify-content:center;background:var(--face);padding:var(--bpy) calc(var(--bpx) - 3px)}
@media (prefers-reduced-motion:reduce){
  .progress.busy>div{animation:none;width:100%}
  .msg.streaming::after{animation:none}
}
@container (max-width:640px){
  .chat .only-narrow{display:inline-flex}
  .chat .side{display:none;position:absolute;left:3px;top:3px;bottom:3px;z-index:3;width:min(300px,86%);background:var(--face);box-shadow:var(--raised),var(--drop);padding:5px}
  .chat.showside .side{display:flex}
  .msg.you{max-width:94%}
}
/* ---------- Previews (reuses the .chat layout) ---------- */
.pvbody{padding:6px;display:flex;flex-direction:column;gap:8px}
.pvbody>*{flex:none}
.pvdeploy{padding:2px 2px 4px}
.pvrow .muted{overflow-wrap:anywhere}
.pvurl{overflow-wrap:anywhere;color:#000080}
.pverr{color:#a00000;overflow-wrap:anywhere}
.pvlog{flex:none;height:38%;margin:0;padding:8px 10px;background:#000;color:#c0c0c0;overflow:auto;white-space:pre-wrap;word-break:break-word;box-shadow:var(--sunken);font-size:var(--monofs)}
/* ---------- Game Servers (reuses the .chat layout: server list + main) ---------- */
.glist button{min-height:calc(var(--ctl) + 16px)}
.glist button .ic svg{width:calc(var(--ctl) + 4px);height:calc(var(--ctl) + 4px)}
.gtun{display:flex;align-items:center;gap:8px;padding:6px 8px;box-shadow:var(--etched);flex:none}
.gtun small{display:block;color:var(--dim)}
.ghero{display:flex;gap:12px;align-items:center;padding:8px 10px;background:var(--field);box-shadow:var(--sunken);flex:none}
.ghero .big{font-size:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gmotd{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gstat{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;text-align:right}
.gstat b{font-size:16px}
.gacts{flex-wrap:wrap;flex:none}
.gtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px}
.gtile{background:var(--field);box-shadow:var(--sunken);padding:6px 10px 7px;min-width:0}
.gtile>span{display:block;color:var(--dim);font-size:.85em}
.gtile b{display:block;font-size:22px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtile small{display:block;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gnote{display:flex;gap:10px;align-items:center;padding:8px 10px;background:var(--tip);border:1px solid var(--line);flex:none}
.gnote>span{flex:1;min-width:0}
pre.gcon{min-height:140px}
pre.gcon .w{color:#ffd75f}
pre.gcon .e{color:#ff6b6b}
pre.gcon .j{color:#6bff8f}
pre.gcon .c{color:#5fd7ff}
pre.gcon .r{color:#fff}
.gchips{display:flex;flex-wrap:wrap;gap:4px;align-items:center;flex:none}
.gcmd{flex:none}
.gav{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;color:#fff;font-weight:bold;box-shadow:inset -2px -2px rgba(0,0,0,.35),inset 2px 2px rgba(255,255,255,.25)}
.gpl{display:flex;align-items:center;gap:8px;padding:var(--cell) 8px;flex-wrap:wrap}
.gpl+.gpl,.gmod+.gmod{box-shadow:inset 0 1px var(--b4)}
.gpl small{display:block}
.gform{display:grid;grid-template-columns:minmax(150px,max-content) minmax(0,1fr);gap:6px 10px;align-items:center}
.gchecks{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 12px}
.gmods{flex:1;min-height:160px}
.gmod{display:flex;gap:10px;align-items:center;padding:6px 8px}
.gmod img,.gmod .gmodi{width:36px;height:36px;flex:none;image-rendering:pixelated;object-fit:contain}
.gmod.off{opacity:.55}
.gdesc{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
textarea.graw{font-family:"Lucida Console",Consolas,Menlo,monospace;font-size:var(--monofs);min-height:300px;resize:vertical;white-space:pre;overflow:auto}
@container (max-width:640px){
  .gform{grid-template-columns:minmax(0,1fr)}
  .ghero>.ic{display:none}
}
.gadd .btn{flex:none;white-space:nowrap}
.gmod small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gdup{color:var(--err)}
/* ---------- Add game (catalog grid + details) ---------- */
.addg{display:flex;flex:1;min-height:0;gap:6px;padding:3px}
.agwrap{flex:1;min-height:0}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;padding:8px;align-content:start}
.agcard{display:flex;flex-direction:column;padding:3px;border:0;border-radius:0;background:var(--face);box-shadow:var(--raised);font:inherit;color:var(--text);text-align:left;cursor:default;min-width:0}
.agcard:active{box-shadow:var(--pressed)}
.agcard.on{outline:2px solid var(--navy);outline-offset:1px}
.agcard .nm{padding:5px 5px 3px;min-width:0}
.agcard .nm b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.agcard .nm small{color:var(--dim)}
.addg .art{aspect-ratio:460/215;background:var(--well);box-shadow:var(--sunken);display:flex;align-items:center;justify-content:center;overflow:hidden}
.addg .art img{width:100%;height:100%;object-fit:cover;display:block}
.addg .art.agmc{background:#5d8f3a}
.agtile{font:bold 30px var(--font);color:var(--face);letter-spacing:2px}
.adet{width:390px;flex:none;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:6px 8px 10px}
.adet>*{flex:none}
.adet .art.big{width:100%}
.agdesc{max-height:150px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--read);line-height:1.45}
.adet a{color:var(--link)}
.agpack{width:100%;border:0;border-radius:0;background:none;font:inherit;color:var(--text);text-align:left;cursor:default}
.agpack.on{background:var(--navy);color:var(--hitx)}
.agpack.on .muted{color:inherit}
.addg .only-narrow{display:none}
@container (max-width:760px){
  .addg .adet{display:none;position:absolute;inset:3px;z-index:3;width:auto;background:var(--face);box-shadow:var(--raised),var(--drop)}
  .addg.showdet .adet{display:flex}
  .addg .only-narrow{display:flex}
}
.ghero .gart{height:56px;aspect-ratio:460/215;object-fit:cover;flex:none;box-shadow:var(--sunken)}
@container (max-width:640px){.ghero .gart{display:none}}
/* ---------- Calendar (reuses the .chat layout: calendars on the left, the view on the right).
   --c is the event's or calendar's own Google color, so text on it stays white in every theme ---------- */
.calapp{--hr:44px;--gut:52px}
html.touch .calapp{--hr:58px}
.calapp.nocal .side{display:none}
.calapp .side>.btn{flex:none}
.calcal{padding:2px 8px;gap:8px;min-width:0}
.calcal .tx{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.calapp .dot{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.calacct{display:flex;flex-direction:column;gap:4px;flex:none;overflow-wrap:anywhere;font-size:.9em}
.calviews{gap:2px;flex-wrap:wrap}
.calview{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--field);box-shadow:var(--sunken);overflow:hidden;position:relative}
.calday .dn,.calmore,.calwd,.calrow{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;cursor:default;text-align:left}
.calchip{display:flex;gap:4px;align-items:center;padding:0 4px;font-size:.85em;line-height:1.45;white-space:nowrap;overflow:hidden;flex:none;cursor:default;min-width:0}
.calchip .tx{overflow:hidden;text-overflow:ellipsis}
.calchip .tm{color:var(--dim);flex:none}
.calchip:not(.ad)::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.calchip.ad{background:var(--c);color:#fff;margin:0 1px}
.calmonthwrap{flex:1;min-height:0;display:flex;flex-direction:column}
.calhead{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));flex:none;border-bottom:1px solid var(--b3)}
.calhead>div{padding:3px 6px;color:var(--dim);font-size:.85em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.calmonth{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr))}
.calday{border-right:1px solid var(--b4);border-bottom:1px solid var(--b4);padding:2px 0;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:1px}
.calday.out{background:color-mix(in srgb,var(--face) 40%,var(--field))}
.calday.out .dn{color:var(--dim)}
.calday .dn{align-self:flex-start;margin-left:2px;padding:0 5px;min-width:1.9em;text-align:center;flex:none}
.calday.today .dn{background:var(--navy);color:var(--hitx)}
.calmore{font-size:.8em;color:var(--dim);padding:0 6px;flex:none}
.calweek{flex:1;min-height:0;display:flex;flex-direction:column}
.calwhead,.calallday,.calgrid{display:grid;grid-template-columns:var(--gut) repeat(var(--n),minmax(0,1fr))}
.calwhead,.calallday{flex:none;border-bottom:1px solid var(--b3);scrollbar-gutter:stable;overflow:hidden}
.calwd{display:flex;flex-direction:column;align-items:center;padding:3px 0;min-width:0}
.calwd small{color:var(--dim);white-space:nowrap}
.calwd b{font-size:1.2em;padding:0 6px}
.calwd.today b{background:var(--navy);color:var(--hitx)}
.calallday>div{min-height:calc(var(--ctl) - 4px);border-left:1px solid var(--b4);display:flex;flex-direction:column;gap:1px;padding:1px 0;min-width:0}
.calallday>div:first-child{border:0;font-size:.75em;align-items:flex-end;justify-content:center;padding-right:4px}
.calscroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.calgrid{height:calc(24 * var(--hr));position:relative}
.calhours{position:relative}
.calhours span{position:absolute;right:5px;font-size:.75em;color:var(--dim);transform:translateY(-50%)}
.calcol{position:relative;border-left:1px solid var(--b4);background:repeating-linear-gradient(to bottom,var(--b4) 0 1px,transparent 1px var(--hr))}
.calcol.today{background-color:color-mix(in srgb,var(--navy) 6%,transparent)}
.calev{position:absolute;background:var(--c);color:#fff;padding:1px 4px;font-size:.8em;line-height:1.25;overflow:hidden;box-shadow:inset 0 0 0 1px var(--field);cursor:default;min-width:0}
.calev b{font-weight:600}
.calev div{opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calnow{position:absolute;left:0;right:0;height:2px;background:#d50000;z-index:2;pointer-events:none}
.calnow::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:#d50000}
.calagenda{flex:1;overflow:auto;overscroll-behavior:contain;padding-bottom:6px}
.calagenda .dh{padding:10px 10px 3px;font-weight:bold;position:sticky;top:0;background:var(--field);z-index:1}
.calagenda .dh.today{color:var(--link)}
.calrow{display:flex;gap:10px;align-items:center;padding:var(--cell) 10px;width:100%;min-height:var(--ctl)}
.calrow .t{width:8.5em;flex:none;color:var(--dim);white-space:nowrap}
.calrow .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calclasses{flex:1;overflow:auto;overscroll-behavior:contain;padding:8px;display:flex;flex-direction:column;gap:8px;background:var(--face)}
.calclasses>*{flex:none}
.calclass{display:flex;gap:8px;align-items:center;padding:8px 10px;background:var(--field);box-shadow:var(--sunken),inset 6px 0 var(--c);padding-left:16px}
.calclass .grow>*{display:block;overflow-wrap:anywhere}
.calform .frow{display:flex;align-items:center;gap:8px}
.calform .frow>label{width:90px;flex:none}
.calclassform{max-width:720px}
.calsw{display:flex;flex-wrap:wrap;gap:4px}
.calswb{width:calc(var(--ctl) - 2px);height:calc(var(--ctl) - 2px);border:0;padding:0;background:var(--c);box-shadow:var(--raised);border-radius:0}
.calswb.on{outline:2px solid var(--text);outline-offset:1px}
.caldays{display:flex;flex-wrap:wrap;gap:2px}
.caldays .btn{min-width:calc(var(--ctl) + 12px)}
.caldays .btn.on{background:var(--navy);color:var(--hitx)}
.calslotrow{flex-wrap:wrap;margin:6px 0}
.calslotrow>.field{flex:1 1 140px;width:auto}
.caltimes{gap:4px;flex:none}
.caltimes .field{width:auto}
.calcount{font-weight:bold}
.calsetup{padding:14px 18px;overflow:auto;background:var(--face);flex:1;line-height:1.45}
.calsetup h3{margin:0 0 8px}
.calsetup li{margin-bottom:8px}
.calsetup a,.callink{color:var(--link)}
.calcode{background:var(--field);box-shadow:var(--sunken);padding:4px 8px;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
@container (max-width:900px){
  .calmonth .calchip .tm{display:none}
}
@container (max-width:640px){
  .calrow .t{width:6.5em;font-size:.9em}
  .calform .frow{flex-direction:column;align-items:stretch;gap:3px}
  .calform .frow>label{width:auto}
}