/* iboodiboo 95: the core's look (ticket 37). Rebuilt clean from the prototype of record
   (16-programs/desktop.html, round 4). Every class and id is prefixed os-.
   The custom properties under "Look tokens" are the published tokens a skin overrides
   (program-seam.md §3; list in core/src/os/tokens.js and docs/look-tokens.md). */

@font-face{font-family:"Geist";src:url("/core/fonts/geist-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url("/core/fonts/geist-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geist";src:url("/core/fonts/geist-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist";src:url("/core/fonts/geist-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Geist";src:url("/core/fonts/geist-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/core/fonts/geist-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/core/fonts/geist-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/core/fonts/geist-mono-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Pixelify Sans";src:url("/core/fonts/pixelify-sans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Pixelify Sans";src:url("/core/fonts/pixelify-sans-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Pixelify Sans";src:url("/core/fonts/pixelify-sans-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Pixelify Sans";src:url("/core/fonts/pixelify-sans-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"VT323";src:url("/core/fonts/vt323-400.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  /* ---- Look tokens (published; a skin may override any of these) ---- */
  --os-title:linear-gradient(90deg,#c80f5a 0%,#f0306a 38%,#ff6d4a 72%,#ff9f2e 100%);
  --os-title-off:linear-gradient(90deg,#7f7b87 0%,#a8a4ae 100%);
  --os-title-text:#ffffff;
  --os-tb-a:#f0306a; --os-tb-b:#ff9f2e; --os-tb-d:#c80f5a; --os-tbsh:rgba(90,0,30,.35);
  --os-banner:linear-gradient(0deg,#c80f5a,#f0306a 45%,#ff9f2e);
  --os-sel:#e3176a; --os-sel2:#ffe1ee; --os-seltx:#ffd9e8; --os-hot:#ec1a6a;
  --os-face:#c8c5cc; --os-hi:#ffffff; --os-lt:#e9e6ed; --os-sh:#86828d; --os-dk:#15121b;
  --os-ink:#15121b; --os-ink2:#3e3a47; --os-mute:#6d6976; --os-sun:#ffd23f; --os-teal:#0f8483;
  --os-font-ui:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --os-font-heading:"Pixelify Sans","Geist",system-ui,sans-serif;
  --os-font-mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --os-font-dos:"VT323",ui-monospace,Menlo,monospace;
  --os-win-radius:0px;
  --os-win-blur:0px;
  --os-win-alpha:1;
  --os-taskbar-bg:var(--os-face);
  --os-icon-filter:none;
  --os-spring:cubic-bezier(.2,1.3,.35,1);
  --os-out:cubic-bezier(.16,1,.3,1);
  --os-in:cubic-bezier(.55,0,.8,.2);
  /* the bevels, built from the face colours above (published too, ticket 104) */
  --os-bv-out:inset -1px -1px var(--os-dk),inset 1px 1px var(--os-hi),inset -2px -2px var(--os-sh),inset 2px 2px var(--os-lt);
  --os-bv-in:inset -1px -1px var(--os-hi),inset 1px 1px var(--os-dk),inset -2px -2px var(--os-lt),inset 2px 2px var(--os-sh);
  --os-bv-field:inset -1px -1px var(--os-hi),inset 1px 1px var(--os-sh),inset -2px -2px var(--os-lt),inset 2px 2px var(--os-dk);
  --os-bv-well:inset -1px -1px var(--os-hi),inset 1px 1px var(--os-sh);
  --os-bv-thin:inset -1px -1px var(--os-sh),inset 1px 1px var(--os-hi);
  --os-checker:repeating-conic-gradient(#fff 0 25%,#d9d6dd 0 50%) 0 0/2px 2px;
  /* ---- derived, not tokens ---- */
  --os-tbh:42px;
  --os-drop:0 22px 48px -18px rgba(8,2,30,.6),0 6px 14px -6px rgba(8,2,30,.35);
}
/* `motion: 'plain'` (a skin): the springy curves go flat. */
:root[data-os-motion="plain"]{--os-spring:ease-out;--os-out:ease-out;--os-in:ease-in}

*{box-sizing:border-box}
html,body.os-body{margin:0;height:100%;overflow:hidden;background:var(--os-teal);color:var(--os-ink);font:13px/1.4 var(--os-font-ui);
  -webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
:where(.os-body) button{font:inherit;color:inherit}
.os-body svg,.os-body canvas{display:block}
.os-body svg[shape-rendering]{image-rendering:pixelated}
.os-body ::-webkit-scrollbar{width:16px;height:16px;background:var(--os-checker)}
.os-body ::-webkit-scrollbar-thumb{background:var(--os-face);box-shadow:var(--os-bv-out)}
.os-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- wallpaper ---------- */
.os-wall{position:fixed;inset:0;z-index:0;background:var(--os-teal);overflow:hidden}
.os-wall-teal{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,#13908f 0,#0f8483 55%,#0b6f6f 100%);transition:opacity .6s var(--os-out)}
.os-wall-teal::after{content:"";position:absolute;inset:0;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23fff'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23000'/%3E%3C/svg%3E")}
.os-wall-cv{position:absolute;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges;opacity:0;transition:opacity .5s var(--os-out)}
.os-wall.os-live .os-wall-cv{opacity:1}
.os-wall-fade{position:absolute;left:0;top:0;image-rendering:pixelated;pointer-events:none}
.os-wall-paint{position:absolute;inset:0;background-size:cover;background-position:center;image-rendering:pixelated}
.os-wall-mark{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(52vw,720px);opacity:.13;pointer-events:none;transition:opacity .4s}
.os-wall-mark svg{width:100%;height:auto}
.os-wall.os-custom .os-wall-mark,.os-wall.os-live .os-wall-mark{opacity:0}

/* ---------- desktop icons ---------- */
.os-desk{position:fixed;inset:0 0 var(--os-tbh) 0;z-index:2}
.os-dicon{position:absolute;width:88px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px;cursor:default;touch-action:none;outline:0;transition-property:none}
.os-dicon .os-ic{width:48px;height:48px;position:relative;transition:transform .35s var(--os-spring);filter:var(--os-icon-filter)}
.os-dicon .os-ic svg{width:48px;height:48px}
.os-dicon .os-dz{position:absolute;inset:0;opacity:0;background:repeating-conic-gradient(var(--os-sel) 0 25%,transparent 0 50%) 0 0/2px 2px;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.os-dicon.os-sel .os-dz{opacity:.75}
.os-dicon:hover .os-ic{transform:translateY(-2px)}
.os-dicon:active .os-ic{transform:scale(.94)}
.os-dicon .os-lb{font:500 12px/1.25 var(--os-font-ui);color:#fff;text-align:center;padding:0 4px 1px;max-width:88px;
  text-shadow:0 1px 0 rgba(0,0,0,.55),0 0 6px rgba(0,0,0,.25);border:1px dotted transparent}
.os-dicon.os-sel .os-lb{background:var(--os-sel);text-shadow:none;border-color:#fff}
.os-dicon:focus-visible .os-lb{border-color:#fff}
.os-dicon.os-dragging{z-index:50;opacity:.8}
.os-dicon.os-enter{animation:os-iconIn .5s var(--os-spring) backwards}
@keyframes os-iconIn{from{opacity:0;transform:translateY(10px) scale(.8)}}
/* light wallpapers (a day sky, snow) and drawn ones: classic 95 label plates, so names stay readable */
.os-body.os-wlight .os-dicon .os-lb{background:rgba(21,18,27,.58);text-shadow:none}
.os-body.os-wlight .os-dicon.os-sel .os-lb{background:var(--os-sel)}

/* ---------- windows ---------- */
.os-wins{position:fixed;inset:0 0 var(--os-tbh) 0;z-index:5;pointer-events:none}
.os-win{pointer-events:auto;position:absolute;display:flex;flex-direction:column;min-width:240px;min-height:120px;padding:4px;
  background:rgb(from var(--os-face) r g b / var(--os-win-alpha));-webkit-backdrop-filter:blur(var(--os-win-blur));backdrop-filter:blur(var(--os-win-blur));
  border-radius:var(--os-win-radius);box-shadow:var(--os-bv-out),var(--os-drop);z-index:10;transform-origin:50% 40%;animation:os-winIn .44s var(--os-spring) both}
@keyframes os-winIn{from{opacity:0;transform:scale(.88) translateY(10px)}}
.os-win.os-min{display:none}
.os-win.os-maxed{box-shadow:var(--os-bv-out)}
.os-tb{height:28px;flex:none;display:flex;align-items:center;gap:6px;padding:0 3px;background:var(--os-title);color:var(--os-title-text);touch-action:none;cursor:default;position:relative;overflow:hidden}
.os-tb::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,0) 55%)}
.os-win.os-inactive .os-tb{background:var(--os-title-off);color:#e9e6ed}
.os-win.os-inactive .os-tb::after{opacity:.4}
.os-ti{width:24px;height:24px;flex:none}
.os-ti svg{width:24px;height:24px}
.os-ttl{flex:1;min-width:0;font:700 13px/1 var(--os-font-ui);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 var(--os-tbsh)}
.os-win.os-inactive .os-ttl{text-shadow:none}
.os-wbs{display:flex;gap:2px;position:relative;z-index:1}
.os-wb{width:22px;height:20px;padding:0;border:0;background:var(--os-face);box-shadow:var(--os-bv-out);display:grid;place-items:center;cursor:pointer;color:var(--os-ink)}
.os-wb svg{width:10px;height:10px}
.os-wb:active{box-shadow:var(--os-bv-in)}
.os-wb:active svg{transform:translate(1px,1px)}
.os-wb-close{margin-left:2px}
.os-wtool{flex:none;display:flex;align-items:center;gap:6px;padding:5px 2px;border-bottom:1px solid var(--os-sh);box-shadow:0 1px 0 var(--os-hi);margin-bottom:4px}
.os-wframe{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:3px;padding:2px;box-shadow:var(--os-bv-field);background:#fff}
.os-wtool+.os-wframe{margin-top:0}
.os-wbody{flex:1;min-height:0;overflow:auto;position:relative;background:#fff}
.os-wframe.os-flat{box-shadow:none;padding:0;background:transparent}
.os-wframe.os-flat .os-wbody{background:transparent}
.os-wstat{flex:none;display:flex;gap:2px;margin-top:3px;font:12px/1 var(--os-font-ui);color:var(--os-ink2)}
.os-wstat span{box-shadow:var(--os-bv-well);padding:5px 7px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-wstat span:first-child{flex:1}
.os-grow{position:absolute;right:5px;bottom:5px;width:13px;height:13px;cursor:nwse-resize;touch-action:none;z-index:3;
  background:linear-gradient(135deg,transparent 0 45%,var(--os-hi) 45% 52%,var(--os-sh) 52% 60%,transparent 60% 66%,var(--os-hi) 66% 73%,var(--os-sh) 73% 81%,transparent 81% 87%,var(--os-hi) 87% 94%,var(--os-sh) 94%)}
.os-win.os-maxed .os-grow{display:none}
.os-zrect{position:fixed;z-index:8800;border:2px dotted #fff;pointer-events:none;mix-blend-mode:difference}

/* buttons, fields */
.os-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:84px;height:30px;padding:0 14px;border:0;background:var(--os-face);box-shadow:var(--os-bv-out);
  font:600 13px/1 var(--os-font-ui);cursor:pointer;white-space:nowrap;color:var(--os-ink);position:relative}
.os-btn:active{box-shadow:var(--os-bv-in);padding-top:1px}
.os-btn-def{outline:1px solid var(--os-dk);outline-offset:-1px;box-shadow:var(--os-bv-out),inset 0 0 0 1px var(--os-dk)}
.os-btn-def::after{content:"";position:absolute;inset:4px;border:1px dotted var(--os-ink);opacity:0}
.os-btn:focus-visible::after{opacity:1}
.os-tbtn{height:30px;min-width:30px;padding:0 8px;border:0;background:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:500 12px var(--os-font-ui)}
.os-tbtn:hover{box-shadow:var(--os-bv-thin)}
.os-tbtn:active{box-shadow:var(--os-bv-well);background:var(--os-checker)}
.os-tbtn svg{width:24px;height:24px}
.os-vsep{width:2px;align-self:stretch;margin:2px 3px;box-shadow:inset 1px 0 var(--os-sh),inset -1px 0 var(--os-hi)}
.os-addr{display:flex;align-items:center;gap:6px;flex:1;min-width:0;font:12px var(--os-font-ui);color:var(--os-ink2)}
.os-field{height:26px;display:flex;align-items:center;gap:6px;padding:0 6px;background:#fff;box-shadow:var(--os-bv-field);font:12px var(--os-font-ui);min-width:0;flex:1;color:var(--os-ink)}
.os-field svg{width:24px;height:24px;flex:none;margin-left:-3px}
.os-field span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- taskbar ---------- */
.os-taskbar{position:fixed;left:0;right:0;bottom:0;height:var(--os-tbh);z-index:9000;display:flex;align-items:center;gap:4px;padding:4px 4px 3px;background:var(--os-taskbar-bg);
  box-shadow:inset 0 1px var(--os-lt),inset 0 2px var(--os-hi),0 -10px 30px -10px rgba(0,0,0,.25)}
.os-start{height:34px;display:flex;align-items:center;gap:5px;padding:0 10px 0 4px;border:0;background:var(--os-face);box-shadow:var(--os-bv-out);font:800 15px/1 var(--os-font-ui);letter-spacing:.01em;cursor:pointer;flex:none}
.os-start svg{width:24px;height:24px;transition:transform .45s var(--os-spring)}
.os-start:hover svg{transform:rotate(-10deg) scale(1.08)}
.os-start.os-on{box-shadow:var(--os-bv-in);background:var(--os-checker)}
.os-start.os-on>*{transform:translate(1px,1px)}
.os-ql{display:flex;gap:1px;flex:none}
.os-ql .os-tbtn{width:34px;height:34px;padding:0;justify-content:center}
.os-tasks{flex:1;display:flex;gap:4px;min-width:0;overflow:hidden;height:34px}
.os-task{flex:0 1 176px;min-width:44px;height:34px;display:flex;align-items:center;gap:6px;padding:0 8px 0 5px;border:0;background:var(--os-face);box-shadow:var(--os-bv-out);cursor:pointer;
  font:600 12px/1 var(--os-font-ui);text-align:left;animation:os-taskIn .4s var(--os-spring)}
@keyframes os-taskIn{from{opacity:0;transform:translateY(12px)}}
.os-task svg{width:24px;height:24px;flex:none}
.os-task span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-task.os-on{box-shadow:var(--os-bv-in);background:var(--os-checker);font-weight:700}
.os-task.os-on>*{transform:translateY(1px)}
.os-tray{flex:none;height:34px;display:flex;align-items:center;gap:2px;padding:0 8px 0 4px;box-shadow:var(--os-bv-well);position:relative}
.os-tray button{border:0;background:none;padding:0;width:28px;height:28px;display:grid;place-items:center;cursor:pointer}
.os-tray button svg{width:24px;height:24px}
.os-tray .os-clock{width:auto;padding:0 2px 0 6px;font:600 12px/1 var(--os-font-ui);font-variant-numeric:tabular-nums;white-space:nowrap}
.os-tray-slots{display:flex;gap:2px}

/* ---------- balloons (toasts) ---------- */
.os-balloons{position:fixed;right:10px;bottom:calc(var(--os-tbh) + 10px);z-index:9800;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.os-balloon{position:relative;pointer-events:auto;max-width:330px;display:flex;gap:10px;padding:10px 30px 11px 10px;background:#fffbe0;color:var(--os-ink);border:1px solid var(--os-dk);border-radius:8px;
  box-shadow:3px 3px 0 rgba(21,18,27,.28),var(--os-drop);font:13px/1.35 var(--os-font-ui);animation:os-balIn .5s var(--os-spring);transform-origin:90% 100%}
.os-balloon::after{content:"";position:absolute;right:42px;bottom:-11px;width:16px;height:11px;background:#fffbe0;clip-path:polygon(0 0,100% 0,100% 100%);border-right:1px solid var(--os-dk)}
.os-balloon::before{content:"";position:absolute;right:41px;bottom:-12px;width:18px;height:12px;background:var(--os-dk);clip-path:polygon(0 0,100% 0,100% 100%)}
.os-balloon+.os-balloon::before,.os-balloon+.os-balloon::after{display:none}
.os-balloon>svg{width:24px;height:24px;flex:none;margin-top:1px}
.os-balloon b{display:block;font:700 13px/1.25 var(--os-font-ui);margin-bottom:2px}
.os-balloon .os-bx{position:absolute;right:6px;top:6px;width:18px;height:16px;border:0;background:var(--os-face);box-shadow:var(--os-bv-out);display:grid;place-items:center;cursor:pointer;padding:0}
.os-balloon .os-bx svg{width:8px;height:8px}
.os-balloon .os-go{cursor:pointer;display:inline-flex;margin-top:7px;font:700 12px/1 var(--os-font-ui);padding:7px 10px;background:var(--os-face);box-shadow:var(--os-bv-out);border:0}
.os-balloon.os-out{animation:os-balOut .25s var(--os-in) forwards}
@keyframes os-balIn{from{opacity:0;transform:translateY(14px) scale(.9)}}
@keyframes os-balOut{to{opacity:0;transform:translateY(8px) scale(.96)}}

/* ---------- menus (Start) ---------- */
.os-menu{position:fixed;z-index:9500;min-width:200px;padding:3px;background:var(--os-face);box-shadow:var(--os-bv-out),0 16px 34px -12px rgba(8,2,30,.55);font:13px/1 var(--os-font-ui);display:flex}
.os-menu.os-anim{animation:os-menuUp .26s var(--os-out)}
.os-menu.os-sub.os-anim{animation:os-menuSide .18s var(--os-out)}
@keyframes os-menuUp{from{opacity:0;transform:translateY(10px);clip-path:inset(30% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes os-menuSide{from{opacity:0;transform:translateX(-6px)}}
.os-col{display:flex;flex-direction:column;min-width:0;flex:1}
.os-banner{width:30px;flex:none;background:var(--os-banner);position:relative;overflow:hidden}
.os-banner span{position:absolute;left:3px;bottom:8px;writing-mode:vertical-rl;transform:rotate(180deg);font:700 21px/1 var(--os-font-heading);color:#fff;letter-spacing:.02em;white-space:nowrap;text-shadow:0 1px 0 var(--os-tbsh)}
.os-banner em{font-style:normal;color:var(--os-sun);font-family:var(--os-font-ui);font-weight:800;letter-spacing:-.02em}
.os-mi{display:flex;align-items:center;gap:9px;height:30px;padding:0 22px 0 5px;cursor:pointer;white-space:nowrap;position:relative;border:0;background:none;text-align:left;width:100%;font:13px var(--os-font-ui);color:inherit}
.os-menu.os-big .os-mi{height:40px;font-size:14px}
.os-mi svg{width:24px;height:24px;flex:none}
.os-noi{width:24px;flex:none}
.os-mi.os-has::after{content:"";position:absolute;right:8px;top:50%;margin-top:-4px;border:4px solid transparent;border-left:4px solid currentColor;border-right:0}
.os-mi:hover,.os-mi.os-hi,.os-mi:focus-visible{background:var(--os-sel);color:#fff;outline:0}
.os-mi.os-dis{color:var(--os-sh);text-shadow:1px 1px var(--os-hi);cursor:default}
.os-mi.os-dis:hover{background:none;color:var(--os-sh)}
.os-mi.os-check .os-noi::before{content:"";display:block;width:6px;height:10px;margin:0 auto;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-2px)}
.os-menu hr{border:0;height:2px;margin:3px 2px;box-shadow:inset 0 1px var(--os-sh),inset 0 -1px var(--os-hi)}
.os-mh{padding:7px 8px 4px;font:600 10.5px/1 var(--os-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--os-mute)}

/* ---------- dialogs ---------- */
.os-dlg-back{position:fixed;inset:0;z-index:9700;display:grid;place-items:center;background:rgba(10,4,30,.18)}
.os-dlg{width:min(420px,calc(100vw - 24px));background:var(--os-face);padding:4px;box-shadow:var(--os-bv-out),var(--os-drop);animation:os-winIn .36s var(--os-spring)}
.os-dbody{display:flex;gap:14px;padding:16px 14px 6px}
.os-dbody .os-dico,.os-dbody .os-dico svg{width:48px;height:48px;flex:none;display:block}
.os-dlg h3{margin:2px 0 6px;font:700 15px/1.25 var(--os-font-ui);overflow-wrap:anywhere}
.os-dlg p{margin:0;color:var(--os-ink2);font-size:13px}
.os-da{display:flex;justify-content:center;gap:8px;padding:14px 10px 10px}

/* ---------- window contents ---------- */
.os-doc{padding:18px 22px 22px;font:14.5px/1.6 var(--os-font-ui);color:var(--os-ink);max-width:62ch;user-select:text;-webkit-user-select:text}
.os-doc h1{font:700 30px/1.05 var(--os-font-heading);margin:0 0 12px}
.os-doc h1 em{font-style:normal;background:var(--os-title);-webkit-background-clip:text;background-clip:text;color:transparent}
.os-doc p{margin:0 0 11px}
.os-kbd{font:600 11px var(--os-font-mono);padding:1px 5px;background:var(--os-face);box-shadow:var(--os-bv-out)}
.os-text{margin:0;padding:12px 14px;font:14px/1.55 var(--os-font-mono);white-space:pre-wrap;user-select:text;-webkit-user-select:text}
.os-fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:4px 0;padding:10px 8px 16px}
.os-ficon{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;cursor:pointer;border:0;background:none;text-align:center;position:relative;outline:0}
.os-ficon .os-ic{width:48px;height:48px;position:relative;transition:transform .35s var(--os-spring)}
.os-ficon .os-ic svg{width:48px;height:48px}
.os-ficon:hover .os-ic{transform:translateY(-3px)}
.os-ficon .os-nm{font:500 12px/1.2 var(--os-font-ui);padding:1px 4px 2px;max-width:100%;border:1px dotted transparent}
.os-ficon:hover .os-nm,.os-ficon:focus-visible .os-nm{background:var(--os-sel);color:#fff;border-color:var(--os-ink)}
.os-empty{padding:28px 16px;text-align:center;color:var(--os-mute);font:13px var(--os-font-ui)}
.os-dos{height:100%;background:#0c0b10;color:#cfcbd6;padding:10px 12px;font:20px/1.1 var(--os-font-dos);white-space:pre-wrap;user-select:text;-webkit-user-select:text}
.os-dos .os-caret{display:inline-block;width:.55em;height:.9em;background:#cfcbd6;vertical-align:-.1em;animation:os-blink 1.06s steps(2) infinite}
@keyframes os-blink{50%{opacity:0}}
fieldset.os-grp{margin:0 12px 14px;padding:10px 10px 8px;border:0;box-shadow:inset -1px -1px var(--os-hi),inset 1px 1px var(--os-sh),inset -2px -2px var(--os-sh),inset 2px 2px var(--os-hi);font:12px var(--os-font-ui)}
fieldset.os-grp legend{padding:0 4px;font:600 12px var(--os-font-ui)}
.os-kv{display:grid;grid-template-columns:90px 1fr;gap:5px 10px}
.os-kv span:nth-child(odd){color:var(--os-mute)}
.os-about{display:flex;gap:16px;padding:16px 14px;align-items:flex-start}
.os-about .os-big{width:96px;flex:none}
.os-about .os-big svg{width:96px;height:96px}
.os-about .os-lines{font:13px/1.5 var(--os-font-ui)}
.os-about .os-lines div:first-child{font:700 24px/1 var(--os-font-heading);margin-bottom:8px}
.os-dprops{padding:12px;display:flex;flex-direction:column;align-items:center;gap:12px}
.os-mon{width:200px;padding:10px 10px 22px;background:var(--os-face);box-shadow:var(--os-bv-out);position:relative}
.os-mon::after{content:"";position:absolute;left:70px;right:70px;bottom:-14px;height:14px;background:var(--os-face);box-shadow:var(--os-bv-out)}
.os-scr{height:120px;box-shadow:var(--os-bv-field);position:relative;overflow:hidden;background:#000}
.os-scr canvas,.os-scr .os-wall-teal{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);image-rendering:pixelated}
.os-wlabel{width:100%;font:600 12px var(--os-font-ui)}
.os-wlist{width:100%;background:#fff;box-shadow:var(--os-bv-field);padding:2px;margin-top:6px}
.os-wlist button{display:block;width:100%;border:0;background:none;text-align:left;padding:5px 8px;font:13px var(--os-font-ui);cursor:pointer}
.os-wlist button.os-on,.os-wlist button:hover{background:var(--os-sel);color:#fff}
.os-drow{display:flex;gap:8px;align-self:flex-end}

/* ---------- boot ---------- */
.os-boot{position:fixed;inset:0;z-index:9990;background:#000;overflow:hidden;transition:opacity .45s var(--os-out)}
.os-boot.os-done{opacity:0;pointer-events:none}
.os-post{position:absolute;inset:0;margin:0;padding:22px 26px;font:22px/1.15 var(--os-font-dos);color:#c9c5d0;white-space:pre-wrap}
.os-post b{color:#fff;font-weight:400}
.os-post .os-ok{color:#5ff2ee}
.os-post .os-warn{color:#ffd23f}
.os-splash{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--os-out);display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(#1b4fc4 0%,#3f86ec 46%,#9fd0ff 74%,#ffd9b8 92%,#ff9fb5 100%)}
.os-boot.os-sp .os-splash{opacity:1}
.os-bclouds{position:absolute;inset:0;pointer-events:none;opacity:.95}
.os-bclouds svg{width:100%;height:100%}
.os-logo{width:min(340px,70vw);height:min(340px,70vw);position:relative;z-index:2;cursor:grab;touch-action:none}
.os-logo:active{cursor:grabbing}
.os-logo canvas{width:100%;height:100%}
.os-logo-fb{position:absolute;inset:18%;display:none}
.os-logo.os-nogl .os-logo-fb{display:block}
.os-logo-fb svg{width:100%;height:100%}
.os-bword{position:relative;z-index:2;margin-top:-6px;text-align:center;color:#fff}
.os-bword h1{margin:0;font:700 clamp(40px,7vw,64px)/1 var(--os-font-heading);letter-spacing:-.01em;text-shadow:0 3px 0 rgba(20,10,80,.25)}
.os-bword h1 em{font-style:normal;font-family:var(--os-font-ui);font-weight:800;letter-spacing:-.02em;background:linear-gradient(180deg,#fff27a,#ff9f2e 55%,#ff3f7a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(120,0,40,.35))}
.os-bword div{font:600 12px/1 var(--os-font-mono);letter-spacing:.24em;text-transform:uppercase;opacity:.85;margin-top:10px}
.os-bhint{position:relative;z-index:2;margin-top:22px;text-align:center;font:600 11px/1 var(--os-font-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(30,10,60,.55)}
.os-bbar{position:absolute;left:0;right:0;bottom:0;height:14px;background:linear-gradient(90deg,var(--os-tb-d),var(--os-tb-a),var(--os-tb-b),#ffd23f,#5ff2ee,#3f86ec,var(--os-tb-d)) 0 0/50% 100%;animation:os-bbar 1.1s linear infinite}
@keyframes os-bbar{to{background-position:100% 0}}

@media (max-width:700px){
  .os-post{font-size:17px;padding:16px}
}
/* Reduced motion: every spin, shake, drift and fall calms down; every joke stays. */
@media (prefers-reduced-motion:reduce){
  .os-body *,.os-body *::before,.os-body *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important}
}

/* ---------- ticket 38: the Program seam ---------- */
/* the `titlebars` and `headingFont` settings (Control Panel ▸ Appearance; colours from the prototype) */
:root[data-os-titlebars="Navy"]{--os-title:linear-gradient(90deg,#00106e 0%,#0a3aa8 48%,#1d86d6 100%);--os-tb-a:#0a3aa8;--os-tb-b:#3aa6ee;--os-tb-d:#00106e;
  --os-sel:#0b2c96;--os-sel2:#dde6ff;--os-hot:#1747c9;--os-seltx:#c9d8ff;--os-tbsh:rgba(0,10,60,.45);--os-banner:linear-gradient(0deg,#00106e,#0a3aa8 50%,#3aa6ee)}
:root[data-os-titlebars="Grape"]{--os-title:linear-gradient(90deg,#33107a 0%,#6c22c0 42%,#c23296 80%,#ff5f9e 100%);--os-tb-a:#7a26c8;--os-tb-b:#ff6fa8;--os-tb-d:#33107a;
  --os-sel:#6420b0;--os-sel2:#efe3ff;--os-hot:#b42c9a;--os-seltx:#e6d6ff;--os-tbsh:rgba(40,0,70,.45);--os-banner:linear-gradient(0deg,#33107a,#7a26c8 50%,#ff6fa8)}
:root[data-os-heading="Smooth"]{--os-font-heading:"Libre Franklin","Geist",system-ui,sans-serif}

/* the five layer bands (the numbers are the core's; Programs name a band) */
.os-band{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.os-band-behind-icons{z-index:1}
.os-band-above-icons{z-index:3}
.os-band-above-windows{z-index:6}
.os-band-above-taskbar{z-index:9100}
.os-band-pointer{z-index:9200}
.os-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.os-body.os-quiet .os-band{display:none}
.os-win.os-peek{opacity:.08;pointer-events:none}

/* New! badges: on a Program's icon until it is first opened */
.os-new{position:absolute;right:-12px;top:-7px;padding:2px 3px 1px;background:var(--os-sun);color:var(--os-ink);font:700 9px/1 var(--os-font-ui);
  box-shadow:inset -1px -1px var(--os-dk),inset 1px 1px var(--os-hi),1px 1px 0 var(--os-dk);white-space:nowrap;pointer-events:none;transform:rotate(6deg)}
.os-mi .os-note{margin-left:auto;padding-left:18px;font:600 10px/1 var(--os-font-ui);color:var(--os-mute)}
.os-mi:hover .os-note,.os-mi.os-hi .os-note{color:#fff}

/* a Program not built yet (SM), a dialog with two buttons */
.os-stub{display:flex;gap:14px;padding:18px 16px 6px}
.os-stub .os-sic,.os-stub .os-sic svg{width:48px;height:48px;flex:none}
.os-stub h3{margin:2px 0 6px;font:700 17px/1.2 var(--os-font-heading)}
.os-stub p{margin:0;color:var(--os-ink2)}
.os-stub-ok{display:flex;justify-content:center;padding:10px}

/* the Trash */
.os-wtool .os-btn{min-width:0;height:26px;padding:0 10px;font-size:12px}
.os-ugly{width:100%;height:100%;background:#000080}
.os-ugly svg{width:100%;height:100%}
.os-font{padding:16px 20px;font-family:"Comic Sans MS","Chalkboard SE",cursive;user-select:text;-webkit-user-select:text}
.os-font div{line-height:1.25;margin-bottom:8px}
.os-font small{display:block;font:12px var(--os-font-mono);color:var(--os-mute)}
.os-ficon.os-crumple{animation:os-crumple .6s var(--os-in) forwards}
@keyframes os-crumple{to{transform:translate(var(--os-tx),var(--os-ty)) scale(.1) rotate(220deg);opacity:0}}
.os-dicon.os-thrown{transition:transform .35s var(--os-in),opacity .35s;transform:scale(.1) rotate(200deg);opacity:0}
.os-dicon.os-back{transition:transform .6s var(--os-spring),opacity .2s,left .6s var(--os-spring),top .6s var(--os-spring)}
/* core modal and dialog buttons are 44 px tall on phones (program-seam.md §9) */
@media (max-width:700px){.os-dlg .os-btn{height:44px;min-width:96px}}
.os-mbody{padding:14px 14px 4px}
.os-wmenu{display:flex;padding:2px 0 1px;flex:none;font:13px var(--os-font-ui)}
.os-wmenu button{border:0;background:none;padding:4px 8px;cursor:pointer}
.os-wmenu button:hover,.os-wmenu button.os-on{background:var(--os-sel);color:#fff}

/* ===================== ticket 39: Projects, Find, playing a Project ===================== */
/* view buttons, sections, a Project's icon and its badges */
.os-seg{display:flex;gap:2px;flex:none}
.os-tbtn.os-on{box-shadow:var(--os-bv-well);background:var(--os-checker)}
.os-tbtn.os-on>*{transform:translate(1px,1px)}
.os-fsec{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:12px 4px 4px;font:700 13px/1 var(--os-font-ui)}
.os-fsec:first-child{margin-top:2px}
.os-fsec svg{width:24px;height:24px}
.os-fsec .os-ln{flex:1;height:2px;box-shadow:inset 0 1px var(--os-sh),inset 0 -1px var(--os-lt)}
.os-fsec .os-n{font:500 11px var(--os-font-mono);color:var(--os-mute)}
.os-arch{cursor:pointer;outline:0;-webkit-user-select:none;user-select:none}
.os-arch:focus-visible{outline:1px dotted var(--os-ink);outline-offset:2px}
.os-arch .os-car{flex:none;width:0;height:0;border:5px solid transparent;border-left:6px solid currentColor;border-right:0;margin-right:2px;transition:transform .2s var(--os-spring)}
.os-arch[aria-expanded="true"] .os-car{transform:rotate(90deg)}
.os-arch-closed .os-archi{display:none}
.os-fgrid>.os-empty,.os-gthumbs>.os-empty{grid-column:1/-1}
.os-empty.os-archi{padding:6px 14px 12px;text-align:left}
.os-ficon .os-ic svg{position:relative;z-index:2}
.os-ic .os-stk{position:absolute;inset:4px 2px 2px 4px;z-index:1;background:#fff;box-shadow:inset -1px -1px var(--os-dk),inset 1px 1px var(--os-dk),inset -2px -2px var(--os-sh);transition:transform .35s var(--os-spring)}
.os-ic .os-stk.os-s1{transform:translate(6px,-5px)}
.os-ic .os-stk.os-s2{transform:translate(11px,-10px);background:var(--os-lt)}
.os-ficon:hover .os-stk.os-s1{transform:translate(9px,-7px) rotate(4deg)}
.os-ficon:hover .os-stk.os-s2{transform:translate(16px,-13px) rotate(8deg)}
.os-ficon .os-bd{position:absolute;top:2px;right:calc(50% - 34px);z-index:3;font:700 10px/1 var(--os-font-mono);padding:3px 4px 2px;background:var(--os-sun);color:var(--os-ink);box-shadow:inset -1px -1px var(--os-dk),inset 1px 1px var(--os-dk)}
.os-ficon .os-live{position:absolute;top:8px;left:calc(50% - 30px);z-index:3;width:8px;height:8px;background:#22c55e;box-shadow:0 0 0 1px var(--os-dk),inset 1px 1px #bff5d2}
.os-lockb{position:absolute;z-index:4;width:20px;height:20px;top:36px;right:calc(50% - 32px)}
.os-lockb svg{width:20px;height:20px}
.os-pinx{font:700 9.5px/1 var(--os-font-mono);padding:2px 4px;background:var(--os-sun);color:var(--os-ink);box-shadow:inset -1px -1px var(--os-dk),inset 1px 1px var(--os-dk);margin-left:4px}
.os-stkw{position:relative;display:block;width:24px;height:24px;flex:none}
.os-stkw svg{position:relative;z-index:1}
.os-stkw .os-stk{position:absolute;inset:3px 1px 1px 3px;z-index:0;background:#fff;box-shadow:inset -1px -1px var(--os-dk),inset 1px 1px var(--os-dk)}
.os-stkw .os-stk.os-s1{transform:translate(2px,-2px)}
.os-stkw .os-stk.os-s2{transform:translate(4px,-4px);background:var(--os-lt)}
.os-splash-art{width:100%;height:100%}
.os-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Details */
table.os-flist{width:100%;border-collapse:collapse;font:13px var(--os-font-ui)}
.os-flist th{position:sticky;top:0;z-index:1;text-align:left;font:600 12px var(--os-font-ui);background:var(--os-face);box-shadow:var(--os-bv-out);padding:6px 8px 5px;white-space:nowrap}
.os-flist td{padding:3px 8px;white-space:nowrap}
.os-flist tbody tr{cursor:pointer;outline:0}
.os-flist tbody tr:hover td,.os-flist tbody tr:focus-visible td{background:var(--os-sel);color:#fff}
.os-flist .os-ni{display:flex;align-items:center;gap:8px;font-weight:500}
.os-flist .os-ni svg{width:24px;height:24px}
.os-flist .os-dim{color:var(--os-mute)}
.os-flist tr:hover .os-dim{color:var(--os-seltx)}
.os-flist tr:hover .os-pinx{color:var(--os-ink)}

/* the Projects window: the rail and the main pane */
.os-wbody.os-hubbody{overflow:hidden;display:grid;grid-template-columns:176px 1fr;background:var(--os-face)}
.os-hside{overflow:auto;background:#fff;box-shadow:inset -1px 0 var(--os-sh);padding:8px 6px 12px;font:13px var(--os-font-ui)}
.os-hside h5{margin:8px 4px 6px;font:600 10.5px/1 var(--os-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--os-mute)}
.os-hside h5:first-child{margin-top:2px}
.os-hk{display:flex;align-items:center;gap:8px;width:100%;background:none;padding:5px 6px;cursor:pointer;text-align:left;font:13px var(--os-font-ui);color:var(--os-ink);border:1px dotted transparent}
.os-hk i{width:10px;height:10px;flex:none;background:var(--c,#ffd23f);box-shadow:0 0 0 1px var(--os-dk),inset 1px 1px rgba(255,255,255,.55)}
.os-hk b{margin-left:auto;font:500 11px var(--os-font-mono);color:var(--os-mute)}
.os-hk:hover{background:var(--os-sel2)}
.os-hk.os-on{background:var(--os-sel);color:#fff;border-color:var(--os-ink)}
.os-hk.os-on b{color:var(--os-seltx)}
.os-hk.os-rad::before{content:"";width:11px;height:11px;flex:none;border-radius:50%;background:#fff;box-shadow:inset -1px -1px var(--os-hi),inset 1px 1px var(--os-sh),inset -2px -2px var(--os-lt),inset 2px 2px var(--os-dk)}
.os-hk.os-rad.os-on::before{background:radial-gradient(circle,var(--os-ink) 0 2.5px,#fff 3px)}
.os-hk.os-rad.os-on{background:none;color:var(--os-ink);border-color:transparent;font-weight:600}
.os-hside hr{border:0;height:2px;margin:10px 2px;box-shadow:inset 0 1px var(--os-sh),inset 0 -1px var(--os-hi)}
.os-harch{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:4px;cursor:pointer;font:600 13px var(--os-font-ui);text-align:left;color:var(--os-ink)}
.os-harch svg{width:24px;height:24px}
.os-harch b{margin-left:auto;font:500 11px var(--os-font-mono);color:var(--os-mute)}
.os-harch:hover{background:var(--os-sel2)}
.os-hside .os-note{margin:6px 4px 0;font:11px/1.4 var(--os-font-ui);color:var(--os-mute)}
.os-hmain{overflow:auto;background:#fff;position:relative;box-shadow:var(--os-bv-field);margin:0 0 0 3px}
.os-hmain .os-fgrid{padding-top:8px}

/* Gallery */
.os-gx{min-height:100%;background:#fff}
.os-gbar{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:5px 6px 6px;background:var(--os-face);box-shadow:inset 0 -1px var(--os-sh),inset 0 -2px var(--os-hi)}
.os-gbar .os-lbl{font:600 12px var(--os-font-ui);color:var(--os-ink2);margin:0 4px 0 2px}
.os-gbar .os-sp{flex:1}
.os-gbar .os-cnt{font:11px var(--os-font-mono);color:var(--os-mute);padding:0 4px;white-space:nowrap}
.os-gf{height:26px;display:inline-flex;align-items:center;gap:6px;padding:0 9px;border:0;background:var(--os-face);box-shadow:var(--os-bv-out);font:600 12px/1 var(--os-font-ui);color:var(--os-ink);cursor:pointer;white-space:nowrap}
.os-gf i{width:9px;height:9px;background:var(--c,#fff);box-shadow:0 0 0 1px var(--os-dk),inset 1px 1px rgba(255,255,255,.55)}
.os-gf b{font:500 10.5px var(--os-font-mono);color:var(--os-mute)}
.os-gf.os-on{box-shadow:var(--os-bv-in);background:var(--os-checker)}
.os-gf.os-on>*{transform:translate(1px,1px)}
.os-gthumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px 6px;padding:10px 10px 22px}
.os-gthumbs .os-fsec{margin:12px 4px 2px}
.os-gthumbs .os-fsec:first-child{margin-top:2px}
.os-gt{display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px 2px 2px;border:0;background:none;cursor:pointer;outline:0;position:relative;min-width:0;color:var(--os-ink)}
.os-gt .os-tf{width:100%;max-width:134px;aspect-ratio:4/3;padding:5px;background:#fff;box-shadow:var(--os-bv-field);position:relative;transition:transform .35s var(--os-spring)}
.os-gt .os-im{position:absolute;inset:5px;overflow:hidden;background:#e9e6ed;z-index:1}
.os-gt .os-im svg{position:absolute;inset:0;width:100%;height:100%}
.os-gt .os-fn{font:500 12px/1.2 var(--os-font-ui);padding:1px 4px 2px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px dotted transparent}
.os-gt .os-by{font:10.5px/1 var(--os-font-mono);color:var(--os-mute);margin-top:-2px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-gt .os-bl{position:absolute;left:1px;top:1px;z-index:2;font:700 10px/1 var(--os-font-mono);padding:3px 4px 2px;background:var(--os-sun);box-shadow:inset -1px -1px var(--os-dk),inset 1px 1px var(--os-dk)}
.os-gt .os-lv{position:absolute;right:9px;top:9px;z-index:2;width:8px;height:8px;background:#22c55e;box-shadow:0 0 0 1px var(--os-dk),inset 1px 1px #bff5d2}
.os-gt .os-tf .os-stk{position:absolute;inset:3px;z-index:0;background:#fff;box-shadow:inset -1px -1px var(--os-dk),inset 1px 1px var(--os-dk),inset -2px -2px var(--os-sh)}
.os-gt .os-tf .os-stk.os-s1{transform:translate(4px,-3px)}
.os-gt .os-tf .os-stk.os-s2{transform:translate(8px,-6px);background:var(--os-lt)}
.os-gt:hover .os-tf,.os-gt:focus-visible .os-tf{transform:translateY(-3px);box-shadow:var(--os-bv-field),0 0 0 2px var(--os-sel)}
.os-gt:hover .os-fn,.os-gt:focus-visible .os-fn{background:var(--os-sel);color:#fff;border-color:var(--os-ink)}

/* the peek card (O16) */
.os-peek{position:fixed;z-index:8700;width:280px;padding:3px;background:var(--os-face);box-shadow:var(--os-bv-out),var(--os-drop);pointer-events:none;opacity:0;transform:translateY(6px) scale(.97);transition:opacity .16s,transform .3s var(--os-spring)}
.os-peek.os-on{opacity:1;transform:none}
.os-peek .os-pm{aspect-ratio:16/10;background:#111;position:relative;overflow:hidden;box-shadow:var(--os-bv-field);border:2px solid var(--os-face)}
.os-peek .os-pm svg{position:absolute;inset:0;width:100%;height:100%}
.os-peek .os-pt{padding:7px 7px 5px;display:flex;flex-direction:column;gap:2px}
.os-peek .os-pt b{font:700 15px/1.1 var(--os-font-heading)}
.os-peek .os-pt span{font:12px var(--os-font-ui);color:var(--os-ink2)}
.os-peek .os-pt .os-pk2{font:600 10.5px var(--os-font-mono);color:var(--os-mute);letter-spacing:.02em;margin-top:2px}

/* Find (O9–O15g, E6) */
.os-spot{position:fixed;inset:0;z-index:9600;background:rgba(10,4,30,.22)}
.os-spbox{position:absolute;left:50%;top:13vh;width:min(600px,calc(100vw - 24px));transform:translateX(-50%);background:var(--os-face);padding:4px;box-shadow:var(--os-bv-out),var(--os-drop);animation:os-spIn .32s var(--os-spring)}
@keyframes os-spIn{from{opacity:0;transform:translateX(-50%) translateY(-12px) scale(.97)}}
.os-spin{display:flex;align-items:center;gap:8px;padding:8px 6px}
.os-spin label{font:600 13px var(--os-font-ui);flex:none}
.os-spin .os-field{height:34px}
.os-spin input{flex:1;border:0;outline:0;background:none;font:500 17px/1 var(--os-font-ui);color:var(--os-ink);min-width:0;user-select:text;-webkit-user-select:text}
.os-spres{max-height:min(420px,52vh);overflow:auto;background:#fff;box-shadow:var(--os-bv-field);padding:2px}
.os-sph{display:flex;align-items:center;gap:8px;padding:8px 8px 4px;font:600 10.5px var(--os-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--os-mute)}
.os-sph::after{content:"";flex:1;height:1px;background:#d9d6dd}
.os-spr{display:flex;align-items:center;gap:10px;padding:4px 8px;cursor:pointer}
.os-spr svg.os-i,.os-spr .os-stkw{width:24px;height:24px;flex:none}
.os-spr .os-stkw svg{width:24px;height:24px}
.os-spr .os-t{min-width:0;flex:1;display:flex;gap:8px;align-items:baseline}
.os-spr .os-t b{font:600 13px/1.2 var(--os-font-ui);white-space:nowrap}
.os-spr .os-t span{font:12px/1.3 var(--os-font-ui);color:var(--os-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-spr .os-t .os-pinx{color:var(--os-ink)}
.os-spr .os-r{font:11px var(--os-font-mono);color:var(--os-mute);white-space:nowrap}
.os-spr.os-hi{background:var(--os-sel);color:#fff}
.os-spr.os-hi .os-t span,.os-spr.os-hi .os-r{color:var(--os-seltx)}
.os-spr mark{background:var(--os-sun);color:inherit}
.os-spr.os-hi mark{background:rgba(255,255,255,.3)}
.os-spr.os-top{padding:8px;gap:12px}
.os-spr.os-top .os-t{flex-direction:column;gap:3px}
.os-spr.os-top .os-t b{font:700 15px/1.15 var(--os-font-heading)}
.os-spr .os-th{width:80px;height:50px;flex:none;position:relative;overflow:hidden;background:#000;box-shadow:var(--os-bv-field);border:2px solid var(--os-face)}
.os-spr .os-th svg{position:absolute;inset:0;width:100%;height:100%}
.os-spfoot{display:flex;gap:4px;padding:5px 0 1px;font:11px var(--os-font-mono);color:var(--os-ink2)}
.os-spfoot span{box-shadow:var(--os-bv-well);padding:4px 7px}
.os-spfoot span:last-child{flex:1}
.os-spnone{padding:24px;text-align:center;color:var(--os-mute);font:13px var(--os-font-ui)}

/* the play window (O29, O30, E8, E9) */
.os-wb.os-wb-help{font:800 13px/1 var(--os-font-ui);color:var(--os-ink)}
.os-btn.os-sm{min-width:0;height:26px;padding:0 10px;font-size:12px}
.os-btn.os-on{box-shadow:var(--os-bv-in);background:var(--os-checker)}
a.os-btn{text-decoration:none}
.os-btn svg{width:12px;height:12px}
.os-flex{flex:1}
.os-chip{font:600 11px/1 var(--os-font-mono);text-transform:uppercase;letter-spacing:.04em;padding:5px 8px;box-shadow:var(--os-bv-well);color:var(--os-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.os-playw .os-wframe{background:#000}
.os-wbody.os-playbody{overflow:hidden;background:#0d0b12}
.os-player{position:absolute;inset:0;background:#0d0b12;overflow:hidden}
.os-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;z-index:2}
.os-player .os-pbg{position:absolute;inset:0;z-index:0}
.os-player .os-pbg svg,.os-player .os-pbg .os-art{position:absolute;inset:0;width:100%;height:100%;filter:blur(2px) brightness(.55)}
.os-player .os-pload{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--os-face);box-shadow:var(--os-bv-out),var(--os-drop);font:600 13px var(--os-font-ui);white-space:nowrap}
.os-player .os-pload svg{width:24px;height:24px;animation:os-bob 1s ease-in-out infinite alternate}
@keyframes os-bob{to{transform:translateY(-4px)}}
.os-player.os-loaded .os-pload{display:none}
.os-pfall{position:absolute;inset:0;z-index:5;background:#0d0b12;display:flex;flex-direction:column}
.os-pfall .os-pv{flex:1;min-height:0;position:relative}
.os-pfall .os-pv svg{position:absolute;inset:0;width:100%;height:100%}
.os-pfall .os-pmsg{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;background:var(--os-face);box-shadow:inset 0 2px var(--os-hi);font:12.5px/1.35 var(--os-font-ui)}
.os-pfall .os-pmsg>svg{width:24px;height:24px;flex:none}
.os-pfall .os-pmsg>span{flex:1;min-width:180px}

/* the Build picker, Properties, the PIN box */
.os-dlg.os-wide{width:min(720px,calc(100vw - 24px))}
.os-bpq{padding:12px 14px 0;font:13px var(--os-font-ui);color:var(--os-ink2)}
.os-bpick{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:10px;padding:12px 12px 4px}
.os-bpk{border:0;padding:4px;background:var(--os-face);box-shadow:var(--os-bv-out);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:6px;transition:transform .3s var(--os-spring)}
.os-bpk:hover,.os-bpk:focus-visible{transform:translateY(-3px);outline:2px solid var(--os-sel);outline-offset:1px}
.os-bpk .os-im{aspect-ratio:16/10;position:relative;overflow:hidden;background:#000;box-shadow:var(--os-bv-field)}
.os-bpk .os-im svg,.os-bpk .os-im .os-art{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px)}
.os-bpk b{font:700 15px/1 var(--os-font-heading);padding:0 4px 4px;white-space:nowrap}
.os-props{padding:12px;font:13px/1.45 var(--os-font-ui)}
.os-props .os-ph{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.os-props .os-ph svg{width:48px;height:48px;flex:none}
.os-props .os-ph b{font:700 20px/1.05 var(--os-font-heading);display:block}
.os-props .os-ph span{color:var(--os-ink2)}
.os-props fieldset.os-grp{margin:0 0 10px}
.os-props .os-blist{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.os-props .os-blist .os-btn{justify-content:flex-start}
.os-props .os-prow{display:flex;justify-content:flex-end;gap:6px}
.os-kvrow{display:contents}
.os-kv .os-kvrow .os-kvv{color:var(--os-ink)}
.os-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.os-pinrow{margin-top:12px}
.os-pinin{width:170px;height:40px;border:0;outline:0;background:#fff;box-shadow:var(--os-bv-field);font:700 24px/1 var(--os-font-mono);letter-spacing:.4em;padding:0 0 0 14px;color:var(--os-ink);-webkit-text-security:disc;user-select:text;-webkit-user-select:text}
.os-pinin::placeholder{color:#c9c5d0;letter-spacing:.4em}
.os-pinerr{min-height:18px;margin-top:6px;font:600 12px var(--os-font-ui);color:#c21f35}
.os-dlg.os-shake{animation:os-shake .4s}
@keyframes os-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.os-dlg.os-shake{animation:none}.os-player .os-pload svg{animation:none}}

/* ===================== ticket 40: MS-BOO, Run, Shut Down, the decoys, the ghost, the phone ===================== */
/* MS-BOO Prompt */
.os-dos{overflow:auto;cursor:text}
.os-tl{min-height:1.1em;overflow-wrap:anywhere}
.os-dos .os-wh{color:#fff}
.os-dos .os-dim{color:#77727f}
.os-dos .os-c1{color:#5ff2ee}
/* the prototype's .term palette (16-programs; ticket 94) */
.os-dos .os-c2{color:#ff6b9a}
.os-dos .os-c3{color:#ffd23f}
.os-dos .os-c4{color:#ff9a3c}
.os-nf{white-space:pre}
.os-trow{display:flex;align-items:baseline;gap:0}
.os-tpr{flex:none;color:#fff}
.os-tin{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font:inherit;padding:0;caret-color:#fff;user-select:text;-webkit-user-select:text}
/* del c:\*.* (E10) */
.os-crash{position:fixed;inset:0;z-index:9950;display:grid;place-items:center;background:#0b23a8;color:#fff;font:24px/1.25 var(--os-font-dos);padding:24px;cursor:pointer}
.os-bs{max-width:720px}
.os-bs p{margin:0 0 18px}
.os-bshd{text-align:center;margin-bottom:22px}
.os-bshd span{background:#c8c5cc;color:#0b23a8;padding:0 8px}
.os-bsct{text-align:center;margin-top:10px}
/* Run…, Shut Down…, the decoy's log-on box */
.os-runrow{display:flex;align-items:center;gap:8px;margin-top:12px;font:13px var(--os-font-ui)}
.os-runrow span{flex:none}
.os-runrow input{flex:1;min-width:0;height:28px;border:0;outline:0;background:#fff;box-shadow:var(--os-bv-field);padding:0 6px;font:14px var(--os-font-ui);color:var(--os-ink);user-select:text;-webkit-user-select:text}
.os-opts{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.os-opts label{display:flex;align-items:center;gap:8px;font:13px var(--os-font-ui);cursor:pointer}
.os-opts input{margin:0;width:14px;height:14px;accent-color:var(--os-sel)}
/* Win95's radio: a sunken white well with a black dot (prototype 11-entrance B-02; ticket 94) */
.os-opts input[type=radio]{appearance:none;-webkit-appearance:none;flex:none;border-radius:50%;background:#fff;box-shadow:var(--os-bv-field);display:grid;place-items:center;cursor:pointer}
.os-opts input[type=radio]:checked::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--os-ink)}
.os-logon .os-runrow span{font-weight:600}
.os-dlg.os-sd{width:min(460px,calc(100vw - 24px))}
.os-dlg.os-dlg-wrap .os-tb{height:auto;min-height:28px;padding-top:4px;padding-bottom:4px}
.os-dlg.os-dlg-wrap .os-ttl{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;overflow-wrap:anywhere}
/* the Shut Down screen (DL9), restart's fade */
.os-off{position:fixed;inset:0;z-index:99990;background:#000;display:grid;place-items:center;text-align:center;color:#ff9a3c;font:30px/1.3 var(--os-font-dos);cursor:pointer;opacity:0;transition:opacity .8s;outline:0;padding:20px}
.os-off.os-on,.os-black.os-on{opacity:1}
.os-offt{white-space:pre-line}
.os-offs{font-size:19px;color:#77727f;margin-top:26px}
.os-black{position:fixed;inset:0;z-index:99990;background:#000;opacity:0;transition:opacity .35s}
/* the decoy's fake restart (DC4, DC5, DC8) */
.os-xr{position:fixed;inset:0;z-index:99940;background:#000;overflow:hidden;color:#fff}
.os-xr-shut,.os-xr-boot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.os-xr-shut{background:linear-gradient(#0d2a78 0%,#1b4fc4 50%,#3f86ec 100%)}
.os-xr-boot{background:linear-gradient(#1b4fc4 0%,#3f86ec 46%,#9fd0ff 74%,#ffd9b8 92%,#ff9fb5 100%)}
.os-xr-sk{position:absolute;inset:0;opacity:.9;pointer-events:none}
.os-xr-sk svg{width:100%;height:100%}
.os-xr-msg,.os-xr-word{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 20px}
.os-xr-msg svg{width:96px;height:96px}
.os-xr-msg b{font:700 clamp(26px,4.4vw,46px)/1.05 var(--os-font-heading);text-shadow:0 3px 0 rgba(10,10,60,.4)}
.os-xr-msg small{font:600 12px/1 var(--os-font-mono);letter-spacing:.06em;opacity:.85}
.os-xr-word{gap:0}
.os-xr-word svg{width:88px;height:88px;margin-bottom:8px;animation:os-bob 1s ease-in-out infinite alternate}
.os-xr-word h1{margin:0;font:700 clamp(40px,7vw,64px)/1 var(--os-font-heading);text-shadow:0 3px 0 rgba(20,10,80,.25)}
.os-xr-word h1 em{font-style:normal;font-family:var(--os-font-ui);font-weight:800;background:linear-gradient(180deg,#fff27a,#ff9f2e 55%,#ff3f7a);-webkit-background-clip:text;background-clip:text;color:transparent}
.os-xr-word div{font:600 13px/1 var(--os-font-mono);letter-spacing:.04em;margin-top:16px;color:#1d1450;opacity:.8}
/* the tray ghost, out (G2–G4) */
.os-haunt{position:fixed;left:0;top:0;width:72px;height:72px;z-index:9850;cursor:pointer;border:0;background:none;padding:0;filter:drop-shadow(4px 6px 0 rgba(0,0,0,.25))}
.os-haunt svg{width:72px;height:72px}
.os-trail{position:fixed;width:6px;height:6px;z-index:9840;pointer-events:none;background:#fff;box-shadow:0 0 0 1px var(--os-dk);animation:os-trail .9s forwards}
@keyframes os-trail{to{opacity:0;transform:translateY(10px) scale(.4)}}
.os-booflash{position:fixed;inset:0;z-index:9860;display:grid;place-items:center;pointer-events:none;font:700 min(30vw,260px)/1 var(--os-font-heading);color:#fff;text-shadow:8px 8px 0 var(--os-dk)}
/* the screensaver (G6) */
.os-saver{position:fixed;inset:0;z-index:9900;background:#000;cursor:none}
.os-saver canvas{position:absolute;inset:0;width:100%;height:100%}
.os-sc{position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);color:#fff;text-align:center;font:600 56px/1 var(--os-font-heading);opacity:.85;text-shadow:0 0 24px rgba(255,90,140,.6);white-space:nowrap}
.os-sc span{display:block}
.os-sc small{display:block;margin-top:10px;font:12px var(--os-font-mono);letter-spacing:.2em;opacity:.55;text-transform:uppercase}

/* ---------- the phone (PH, S34–S40, O45) ---------- */
.os-phone{display:none}
.os-pstart,.os-pshade{display:none}
@media (max-width:700px){
  :root{--os-tbh:52px}
  .os-desk,.os-taskbar,.os-wall-mark{display:none}
  .os-phone{display:block;position:fixed;inset:0;z-index:3;overflow:hidden}
  .os-ps{height:30px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;background:var(--os-face);box-shadow:inset 0 -1px var(--os-sh),inset 0 -2px var(--os-dk);font:700 12px/1 var(--os-font-ui);font-variant-numeric:tabular-nums;position:relative;z-index:3}
  .os-ps-c{font:700 13px/1 var(--os-font-heading)}
  .os-ps-c em{font-style:normal;color:var(--os-hot);font-family:var(--os-font-ui);font-weight:800}
  .os-ps-r{display:flex;gap:6px;align-items:center}
  .os-ps-r svg{height:12px;width:auto}
  .os-pscroll{position:absolute;inset:30px 0 0;overflow-y:auto;overflow-x:hidden;padding:14px 14px calc(76px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .os-pwin{background:var(--os-face);padding:3px;box-shadow:var(--os-bv-out),var(--os-drop);margin-bottom:16px}
  .os-pwin .os-tb{height:26px}
  .os-pwin .os-pb{padding:12px;display:flex;gap:12px;align-items:flex-start}
  .os-pwin .os-pb>svg{width:48px;height:48px;flex:none}
  .os-pwin h1{margin:0;font:700 23px/1.05 var(--os-font-heading)}
  .os-pwin p{margin:6px 0 0;font:13px/1.4 var(--os-font-ui);color:var(--os-ink2)}
  .os-ptip{margin:0 12px 12px;padding:8px 10px;background:#fffbe0;box-shadow:var(--os-bv-well);font:12px/1.4 var(--os-font-ui)}
  .os-plabel{display:flex;align-items:center;gap:8px;margin:4px 2px 10px;font:700 11px/1 var(--os-font-mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4)}
  .os-plabel::after{content:"";flex:1;height:2px;background:rgba(255,255,255,.25)}
  .os-pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 4px;margin-bottom:20px}
  .os-papp{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:44px;border:0;background:none;padding:2px 0;color:#fff;cursor:pointer;min-width:0;position:relative}
  .os-papp .os-tile{width:48px;height:48px;position:relative;transition:transform .3s var(--os-spring)}
  .os-papp .os-tile svg{width:48px;height:48px;position:relative;z-index:2}
  .os-papp .os-tile img{width:48px;height:48px;position:relative;z-index:2}
  .os-papp:active .os-tile{transform:scale(.88)}
  .os-papp .os-nm{font:500 11.5px/1.2 var(--os-font-ui);text-shadow:0 1px 0 rgba(0,0,0,.6);max-width:84px;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 3px}
  .os-body.os-wlight .os-papp .os-nm{background:rgba(21,18,27,.55);text-shadow:none}
  .os-papp:active .os-nm{background:var(--os-sel)}
  .os-papp .os-bd{position:absolute;top:-4px;right:-10px;z-index:3;font:700 10px/1 var(--os-font-mono);padding:3px 4px 2px;background:var(--os-sun);color:var(--os-ink);box-shadow:inset -1px -1px var(--os-dk),inset 1px 1px var(--os-dk)}
  .os-papp .os-new{z-index:3}
  .os-papp .os-lockb{right:-8px;top:-6px;bottom:auto}
  .os-papp .os-stk{position:absolute;inset:5px 3px 3px 5px;z-index:1;background:#fff;box-shadow:inset -1px -1px var(--os-dk),inset 1px 1px var(--os-dk),inset -2px -2px var(--os-sh)}
  .os-papp .os-stk.os-s1{transform:translate(4px,-4px)}
  .os-papp .os-stk.os-s2{transform:translate(8px,-8px);background:var(--os-lt)}
  /* the bottom bar */
  .os-ptask{position:absolute;left:0;right:0;bottom:0;z-index:4;height:calc(52px + env(safe-area-inset-bottom));padding:4px 4px calc(4px + env(safe-area-inset-bottom));display:flex;gap:4px;align-items:flex-start;background:var(--os-face);box-shadow:inset 0 1px var(--os-lt),inset 0 2px var(--os-hi),0 -10px 24px -10px rgba(0,0,0,.35)}
  .os-ptask .os-start{height:44px;font-size:16px;padding:0 10px 0 6px}
  .os-ptask .os-tbtn{height:44px;width:44px;min-width:44px;padding:0;justify-content:center;box-shadow:var(--os-bv-out);background:var(--os-face)}
  .os-ptask .os-tbtn:active{box-shadow:var(--os-bv-in)}
  .os-ptray{height:44px;margin-left:auto;padding:0 6px 0 2px;min-width:0}
  .os-ptray button{width:44px;height:44px}
  .os-ptray .os-clock{width:auto;min-width:44px;padding:0 4px}
  .os-ptray .os-tray-slots{min-width:0;overflow-x:auto;scrollbar-width:none}
  /* the phone's Start */
  .os-pstart{display:flex;position:fixed;left:0;right:0;bottom:calc(52px + env(safe-area-inset-bottom));z-index:9400;max-height:calc(100% - 100px);background:var(--os-face);box-shadow:var(--os-bv-out),0 -20px 40px -10px rgba(0,0,0,.4);padding:3px}
  .os-pstart.os-anim{animation:os-menuUp .3s var(--os-out)}
  .os-pstart .os-lst{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
  .os-pstart .os-mi{height:44px;font-size:14px}
  .os-pstart .os-mh{padding:12px 8px 6px}
  .os-pshade{display:block;position:fixed;inset:0;z-index:9300;background:rgba(10,4,30,.25)}
  /* windows are full-screen sheets */
  .os-win{position:fixed!important;left:0!important;top:0!important;width:100%!important;height:100%!important;padding:0 0 env(safe-area-inset-bottom);box-shadow:none!important;animation:none;z-index:9100}
  .os-win .os-tb{height:50px;padding:0 3px 0 8px}
  .os-win .os-ttl{font-size:15px}
  .os-win .os-wb-min,.os-win .os-wb-max,.os-win .os-grow{display:none}
  .os-win .os-wb,.os-dlg .os-wb{width:44px;height:44px}
  .os-win .os-wb svg,.os-dlg .os-wb svg{width:12px;height:12px}
  .os-dlg .os-tb{height:50px}
  .os-win .os-wframe{margin:3px}
  .os-win .os-wtool{padding:4px;overflow-x:auto}
  .os-win .os-btn,.os-dlg .os-btn,.os-labout .os-btn{height:44px}
  .os-wtool .os-btn,.os-wtool .os-tbtn,.os-wtool .os-gf{height:44px;min-width:44px}
  .os-win .os-wb-help{width:44px}
  .os-win.os-peek{transform:translateY(calc(100% - 64px));opacity:1;transition:transform .5s cubic-bezier(.32,.72,0,1)}
  .os-runrow input{height:44px}
  .os-opts label{min-height:44px}
  .os-opts input{width:20px;height:20px;flex:none}
  .os-pinin{height:44px}
  /* the Projects window (PH9–PH12) */
  .os-win.os-hubph .os-wtool,.os-win.os-hubph .os-wstat{display:none}
  .os-wbody.os-hubbody{display:block;overflow:auto;background:#fff}
  .os-pchips{position:sticky;top:0;z-index:3;display:flex;gap:4px;overflow-x:auto;padding:6px 6px 7px;background:var(--os-face);box-shadow:inset 0 -1px var(--os-sh),inset 0 -2px var(--os-hi)}
  .os-pchips .os-gf{flex:none;height:44px}
  .os-psort{display:flex;align-items:center;gap:6px;padding:6px 8px;font:12px var(--os-font-ui);color:var(--os-ink2);background:#fff;border-bottom:1px solid #eee}
  .os-psort .os-gf{height:44px;min-width:44px}
  .os-hrow{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;border:0;background:#fff;padding:9px 10px;border-bottom:1px solid #ece9ef;text-align:left;cursor:pointer;color:var(--os-ink)}
  .os-hrow:active{background:var(--os-sel2)}
  .os-hrow .os-ri{width:44px;height:44px;flex:none;position:relative}
  .os-hrow .os-ri>svg{width:44px;height:44px;position:relative;z-index:1}
  .os-hrow .os-ri .os-stk{position:absolute;inset:4px 2px 2px 4px;background:#fff;box-shadow:inset -1px -1px var(--os-dk),inset 1px 1px var(--os-dk)}
  .os-hrow .os-ri .os-stk.os-s1{transform:translate(4px,-4px)}
  .os-hrow .os-ri .os-stk.os-s2{transform:translate(8px,-8px);background:var(--os-lt)}
  .os-hrow .os-ri .os-lockb{right:-6px;top:auto;bottom:-4px}
  .os-hrow .os-rt{flex:1;min-width:0}
  .os-hrow .os-rt b{display:block;font:700 16px/1.1 var(--os-font-heading)}
  .os-hrow .os-rt span{display:block;font:12.5px/1.3 var(--os-font-ui);color:var(--os-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .os-hrow .os-rm{flex:none;font:600 10.5px/1.3 var(--os-font-mono);color:var(--os-mute);text-align:right}
  .os-hrow.os-arc{background:var(--os-face);font:600 13px var(--os-font-ui)}
  .os-hrow.os-arc>svg{width:32px;height:32px;flex:none}
  /* a playing Project: the strip instead of the title bar (PH13–PH16) */
  .os-win.os-strip{padding:0;background:#0d0b12}
  .os-win.os-strip>.os-tb{display:none}
  .os-win.os-strip .os-wtool{height:52px;margin:0;padding:4px;gap:4px;background:var(--os-face);border:0;box-shadow:inset 0 -1px var(--os-sh),inset 0 -2px var(--os-dk),inset 0 1px var(--os-hi);overflow:hidden}
  .os-win.os-strip .os-wframe{margin:0;padding:0;box-shadow:none}
  .os-sback,.os-sbb,.os-sbtn{height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 9px;border:0;background:var(--os-face);box-shadow:var(--os-bv-out);cursor:pointer;color:var(--os-ink);font:700 13px/1 var(--os-font-mono);text-decoration:none;flex:none}
  .os-sback:active,.os-sbb:active,.os-sbtn:active{box-shadow:var(--os-bv-in)}
  .os-sback>span{display:inline-flex;align-items:center;gap:5px}
  .os-sback svg{width:24px;height:24px}
  .os-sbw{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .os-sbb.os-on{box-shadow:var(--os-bv-in);background:var(--os-checker)}
  .os-sbtn svg{width:12px;height:12px}
  .os-sbuilds{display:flex;gap:2px;flex:none}
  .os-ssep,.os-sti,.os-sby{display:none}
  .os-sname{font:700 14px/1 var(--os-font-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding-left:4px}
  .os-labout{position:absolute;left:6px;right:6px;top:58px;z-index:6;background:var(--os-face);padding:4px;box-shadow:var(--os-bv-out),var(--os-drop);animation:os-winIn .3s var(--os-spring)}
  .os-labout .os-tb{height:30px}
  .os-labout .os-bx{padding:12px;font:13px/1.45 var(--os-font-ui)}
  .os-labout .os-bx b{font:700 18px/1.05 var(--os-font-heading);display:block;margin-bottom:6px}
  .os-labout .os-bx p{margin:0 0 10px;color:var(--os-ink2)}
  .os-llock{display:grid;place-items:center}
  .os-llock .os-pbg svg{filter:blur(10px) brightness(.5)}
  .os-llock .os-unlock{position:relative;z-index:2;height:44px}
  .os-llock .os-unlock svg{width:20px;height:20px}
  /* toasts sit full width above the bar; their close is a thumb's size */
  .os-balloons{left:10px;right:10px;bottom:calc(52px + 12px + env(safe-area-inset-bottom));align-items:stretch}
  .os-balloon{max-width:none;padding-right:52px}
  .os-balloon .os-bx{width:44px;height:44px;right:2px;top:2px}
  .os-balloon .os-go{min-height:44px}
  .os-spr{min-height:44px}
  .os-spin input{height:44px}
  .os-spbox .os-tb{height:50px}
  .os-spbox .os-wb{width:44px;height:44px}
}
@media (max-width:700px) and (min-width:480px){.os-sby{display:inline;color:var(--os-ink2);white-space:nowrap;font:13px var(--os-font-ui)}.os-sti{display:block;width:24px;height:24px;flex:none}.os-sti svg{width:24px;height:24px}}
@media (prefers-reduced-motion:reduce){.os-xr-word svg{animation:none}.os-pstart.os-anim{animation:none}.os-trail{display:none}.os-labout{animation:none}}

/* ---- ticket 41: the Knock's code box, Night falls, his side's stage ---- */
.os-code-back{z-index:9850}
.os-code .os-code-in{display:block;width:100%;margin-top:12px;height:34px;border:0;outline:0;background:#fff;box-shadow:var(--os-bv-field);padding:0 8px;font:600 22px/1 var(--os-font-mono,monospace);letter-spacing:.35em;color:var(--os-ink);user-select:text;-webkit-user-select:text}
.os-code .os-code-no{margin-top:8px;color:#b3001b;font-weight:600}
.os-code .os-code-no[hidden]{display:none}
.os-pside{position:fixed;inset:0 0 var(--os-tbh) 0;z-index:4;display:none;overflow:hidden;color:#fff;
  background:radial-gradient(1px 1px at 12% 18%,#fff 99%,transparent),radial-gradient(1px 1px at 33% 9%,#fff 99%,transparent),radial-gradient(2px 2px at 58% 24%,#fff 99%,transparent),radial-gradient(1px 1px at 72% 13%,#fff 99%,transparent),radial-gradient(1px 1px at 86% 31%,#fff 99%,transparent),radial-gradient(2px 2px at 21% 41%,#e8e2ff 99%,transparent),radial-gradient(1px 1px at 47% 52%,#fff 99%,transparent),radial-gradient(1px 1px at 91% 58%,#fff 99%,transparent),linear-gradient(#070720 0%,#141247 45%,#2c2268 78%,#4a2f7c 100%)}
.os-pside.os-on{display:block}
.os-pside .os-pside-head{margin:28px 32px 0;font:700 clamp(28px,4vw,44px)/1.1 var(--os-font-heading);text-shadow:0 3px 0 rgba(0,0,30,.4)}
.os-xtitle{position:fixed;left:0;right:0;top:36%;z-index:9850;text-align:center;pointer-events:none}
.os-xtitle span{display:inline-block;min-height:1em;font:700 clamp(44px,7vw,84px)/1 var(--os-font-heading);color:#fff;text-shadow:0 4px 0 rgba(0,0,30,.4),0 0 40px rgba(150,130,255,.45)}
.os-xtitle .os-typing::after{content:"";display:inline-block;width:.08em;height:.9em;margin-left:.06em;background:currentColor;vertical-align:-.08em;animation:os-blink .7s steps(2) infinite}
@media (max-width:700px){.os-pside{inset:0;z-index:4}.os-pside .os-pside-head{margin:56px 20px 0}}

/* ---- ticket 42: his side's hooks into the core (host.js) ---- */
/* the taskbar keeps Start, the windows and the tray; the quick-launch and the ghost stay public */
.os-onpriv .os-ql,.os-onpriv .os-ql + .os-vsep,.os-onpriv #os-ghost,.os-onpriv .os-ptask > .os-tbtn{display:none}
.os-tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 4px;border:0;background:none;font:600 12px/1 var(--os-font-ui);color:inherit;white-space:nowrap}
.os-tray button.os-tag{width:auto;display:inline-flex}
.os-tag svg{width:20px;height:20px;flex:none}
button.os-tag:hover span{text-decoration:underline}
/* Display Properties with more than one tab */
.os-dtabs{display:flex;gap:2px;padding:8px 8px 0;position:relative;z-index:1}
.os-dtabs button{height:28px;padding:0 12px;border:0;background:var(--os-face);box-shadow:inset 1px 1px var(--os-hi),inset -1px 0 var(--os-dk),inset 2px 2px var(--os-lt),inset -2px 0 var(--os-sh);font:13px var(--os-font-ui);color:var(--os-ink);cursor:pointer;margin-top:3px}
.os-dtabs button.os-on{height:31px;margin-top:0;margin-bottom:-2px;font-weight:600}
.os-dtab{margin:0 8px 8px;padding:12px;box-shadow:var(--os-bv-out);min-height:0}
.os-dtab[hidden]{display:none}
@media (max-width:700px){.os-pside{bottom:var(--os-tbh)}}