@font-face { font-family: "MS Sans 98"; src: url("fonts/ms_sans_serif.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "MS Sans 98"; src: url("fonts/ms_sans_serif_bold.woff2") format("woff2"); font-weight: 700; font-display: block; }

/* Palette. Every bevel in the interface is built from these six surface tones. */
:root {
  --desktop: #008080;
  --face: #c0c0c0; --hi: #ffffff; --lt: #dfdfdf; --sh: #808080; --dk: #000000;
  --field: #ffffff; --text: #000000; --dim: #808080; --link: #0000ff;
  --title-a: #000080; --title-b: #1084d0; --title-text: #ffffff;
  --title-ia: #808080; --title-ib: #b5b5b5; --title-itext: #c0c0c0;
  --sel: #000080; --sel-text: #ffffff; --code: #f0f0f0;
  --ico-ink: #000000; --ico-folder: #ffd23f; --ico-paper: #ffffff; --ico-navy: #000080; --ico-grey: #808080;
  --ico-tree: #0b6b3a; --ico-trunk: #7a4a1e;
  --ui: 11px/1.25 "MS Sans 98", Tahoma, Verdana, sans-serif;
  --doc: 14px/1.6 Tahoma, Verdana, "Segoe UI", "DejaVu Sans", sans-serif;
  --mono: "Lucida Console", "Courier New", monospace;
  --raised: inset -1px -1px var(--dk), inset 1px 1px var(--hi), inset -2px -2px var(--sh), inset 2px 2px var(--lt);
  --window: inset -1px -1px var(--dk), inset 1px 1px var(--lt), inset -2px -2px var(--sh), inset 2px 2px var(--hi);
  --sunken: inset -1px -1px var(--hi), inset 1px 1px var(--sh), inset -2px -2px var(--lt), inset 2px 2px var(--dk);
  --pressed: inset -1px -1px var(--hi), inset 1px 1px var(--dk), inset -2px -2px var(--lt), inset 2px 2px var(--sh);
  --status: inset -1px -1px var(--hi), inset 1px 1px var(--sh);
  --taskbar: 28px;
}
:root[data-theme="night"] {
  --desktop: #052b2b;
  --face: #3a3d3f; --hi: #8c9093; --lt: #5a5e61; --sh: #1e2021; --dk: #000000;
  --field: #17191a; --text: #e6e6e6; --dim: #8c9093; --link: #6cb6ff;
  --title-ia: #2a2c2e; --title-ib: #55595c; --title-itext: #a0a4a7;
  --sel: #1084d0; --code: #232628;
  --ico-folder: #e0b030; --ico-paper: #d8d8d8; --ico-grey: #8c9093; --ico-tree: #3fa36b; --ico-trunk: #9a6a3a;
}
/* Classic keeps the original system look with nothing added: one pixel font for everything and no smoothing. */
:root[data-theme="classic"] {
  --doc: 11px/1.45 "MS Sans 98", Tahoma, sans-serif;
  --mono: "Courier New", Courier, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--desktop); color: var(--text); font: var(--ui); overflow: hidden; }
:root[data-theme="classic"] body { -webkit-font-smoothing: none; font-smooth: never; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--link); }
[hidden] { display: none !important; }
svg.px { display: block; flex: none; shape-rendering: crispEdges; }
.px-K { fill: var(--ico-ink); } .px-F { fill: var(--ico-folder); } .px-W { fill: var(--ico-paper); }
.px-B { fill: var(--ico-navy); } .px-S { fill: var(--ico-grey); } .px-G { fill: var(--ico-tree); }
.px-T { fill: var(--ico-trunk); } .px-C { fill: currentColor; }

/* Desktop */
#desktop { position: absolute; inset: 0 0 var(--taskbar) 0; overflow: hidden; }
#icons { position: absolute; top: 8px; left: 6px; display: flex; flex-direction: column; gap: 14px; }
.dicon { width: 74px; padding: 2px; background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; cursor: pointer; text-align: center; }
.dicon span { padding: 1px 3px; }
.dicon:focus-visible { outline: none; }
.dicon:focus-visible span, .dicon:active span { background: var(--sel); outline: 1px dotted #fff; }

/* Windows */
.window { position: absolute; display: flex; flex-direction: column; min-width: 240px; min-height: 120px; padding: 3px; background: var(--face); box-shadow: var(--window); }
.window.static { position: static; margin: 12px; }
.window.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
.window.min { display: none; }
.titlebar { flex: none; display: flex; align-items: center; gap: 3px; height: 18px; padding: 0 2px; background: linear-gradient(90deg, var(--title-ia), var(--title-ib)); color: var(--title-itext); font-weight: 700; cursor: default; user-select: none; touch-action: none; }
.window.active .titlebar, .window.static .titlebar { background: linear-gradient(90deg, var(--title-a), var(--title-b)); color: var(--title-text); }
.ttext { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tctl { display: flex; }
.tctl button { width: 16px; height: 14px; padding: 0; border: 0; background: var(--face); color: var(--text); box-shadow: var(--raised); display: grid; place-items: center; }
.tctl button:active { box-shadow: var(--pressed); }
.tctl .close { margin-left: 2px; }
.wbody { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 3px; }
.wbody.pad { padding: 10px; }
.grip { position: absolute; right: 3px; bottom: 3px; width: 13px; height: 13px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 0 45%, var(--hi) 45% 52%, var(--sh) 52% 62%, transparent 62% 68%, var(--hi) 68% 75%, var(--sh) 75% 85%, transparent 85% 90%, var(--hi) 90% 95%, var(--sh) 95%); }
.window.max .grip { display: none; }
.statusbar { flex: none; display: flex; gap: 2px; padding-right: 14px; }
.statusbar span { flex: 1; padding: 3px 5px 2px; box-shadow: var(--status); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.statusbar span:first-child { flex: none; min-width: 110px; }

/* Controls */
.btn { min-width: 75px; height: 23px; padding: 0 10px; border: 0; background: var(--face); color: var(--text); box-shadow: var(--raised); display: inline-flex; align-items: center; justify-content: center; gap: 4px; text-decoration: none; white-space: nowrap; cursor: default; }
.btn:active, .btn.on { box-shadow: var(--pressed); padding-top: 1px; }
.btn:focus-visible, .tctl button:focus-visible, .traybtn:focus-visible { outline: 1px dotted var(--text); outline-offset: -4px; }
.btn.default { outline: 1px solid var(--dk); }
.btn:disabled { color: var(--dim); text-shadow: 1px 1px var(--hi); }
.field { background: var(--field); box-shadow: var(--sunken); padding: 2px; }
input.field { height: 21px; padding: 3px 4px; border: 0; outline: none; min-width: 0; }
.toolbar { flex: none; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.toolbar .grow { flex: 1; }
.toolbar label { padding-left: 2px; }
.group { position: relative; margin: 8px 0 0; padding: 12px 10px 9px; border: 1px solid var(--sh); box-shadow: 1px 1px var(--hi), inset 1px 1px var(--hi); }
.group > .legend { position: absolute; top: -7px; left: 8px; padding: 0 3px; background: var(--face); }
.radio { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; }
.radio small { color: var(--dim); font-size: inherit; }
.radio input { margin: 0; accent-color: var(--sel); position: relative; top: 2px; }
.row { display: flex; gap: 6px; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.muted { color: var(--dim); }

/* Scrolling panes */
.scroll { overflow: auto; scrollbar-color: var(--face) var(--lt); }
.scroll::-webkit-scrollbar { width: 16px; height: 16px; background: var(--lt); }
.scroll::-webkit-scrollbar-thumb { background: var(--face); box-shadow: var(--raised); }
.scroll::-webkit-scrollbar-corner { background: var(--face); }

/* Explorer: folder tree, details list, properties */
.explorer { flex: 1; min-height: 0; display: grid; grid-template-columns: 168px 1fr; gap: 3px; }
.explorer > .side, .explorer > .main { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pane { flex: 1; min-height: 0; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-left: 16px; }
.tree { padding: 2px; }
.node { display: flex; align-items: center; gap: 3px; height: 18px; white-space: nowrap; }
.node .twist { width: 9px; height: 9px; padding: 0; border: 1px solid var(--sh); background: var(--field); color: var(--text); font: 9px/7px monospace; display: grid; place-items: center; flex: none; }
.node .twist.none { visibility: hidden; }
.node .label { padding: 1px 3px; background: none; border: 0; color: var(--text); cursor: default; }
.node .label.sel { background: var(--sel); color: var(--sel-text); }
.node .label:focus-visible { outline: 1px dotted var(--text); }
table.list { width: 100%; border-collapse: collapse; white-space: nowrap; }
table.list th { position: sticky; top: 0; z-index: 1; padding: 0; text-align: left; font-weight: 400; }
table.list th button { width: 100%; height: 17px; padding: 0 6px; border: 0; background: var(--face); color: var(--text); box-shadow: var(--raised); text-align: left; }
table.list th button:active { box-shadow: var(--pressed); }
table.list td { height: 17px; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
table.list td.name { display: flex; align-items: center; gap: 4px; padding-left: 2px; max-width: none; }
table.list tr.sel td { background: var(--sel); color: var(--sel-text); }
table.list tr.dim td { color: var(--dim); }
table.list tbody tr { cursor: default; }
table.list tbody tr:focus-visible { outline: 1px dotted var(--text); outline-offset: -1px; }
.empty { padding: 10px 8px; color: var(--dim); white-space: normal; }
.props { flex: none; margin: 6px 0 2px; }
.props p { margin: 0 0 6px; }
.props dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1px 10px; margin: 0 0 8px; }
.props dl div { display: flex; gap: 4px; }
.props dt { color: var(--dim); }
.props dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* About */
.about-head { display: flex; gap: 10px; align-items: flex-start; }
.about-head .logo { padding: 4px; }
.about-head b { display: block; }
.about p { margin: 8px 0 0; }
.linklist { list-style: none; margin: 0; padding: 2px; }
.linklist a { display: flex; align-items: center; gap: 6px; padding: 3px 4px; color: var(--text); text-decoration: none; }
.linklist a:hover b, .linklist a:focus-visible b { color: var(--link); text-decoration: underline; }
.linklist a span { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Document viewer */
.viewer { flex: 1; min-height: 0; display: grid; grid-template-columns: 150px 1fr; gap: 3px; }
.viewer.no-outline { grid-template-columns: 1fr; }
.viewer.no-outline .outline { display: none; }
.outline { padding: 4px; }
.outline button { display: block; width: 100%; padding: 2px 3px; border: 0; background: none; color: var(--text); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outline button:hover, .outline button:focus-visible { background: var(--sel); color: var(--sel-text); outline: none; }
.outline .l3 { padding-left: 14px; }
.doc { padding: 14px 18px 24px; font: var(--doc); overflow-wrap: break-word; }
.doc > * { max-width: 760px; }
.doc > table, .doc > div, .doc > pre, .doc > details { max-width: none; }
.doc img { max-width: 100%; height: auto; vertical-align: middle; }
.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 { margin: 1.3em 0 .5em; line-height: 1.25; font-weight: 700; }
.doc h1 { font-size: 1.7em; } .doc h2 { font-size: 1.35em; padding-bottom: .2em; border-bottom: 1px solid var(--sh); box-shadow: 0 1px var(--hi); }
.doc h3 { font-size: 1.12em; } .doc h4, .doc h5, .doc h6 { font-size: 1em; }
.doc > :first-child, .doc > div > :first-child { margin-top: 0; }
.doc p, .doc ul, .doc ol, .doc blockquote, .doc pre, .doc table, .doc details { margin: 0 0 .9em; }
.doc ul, .doc ol { padding-left: 1.8em; }
.doc li > ul, .doc li > ol { margin-bottom: 0; }
.doc li.task { list-style: none; margin-left: -1.4em; }
.doc code { font-family: var(--mono); font-size: .92em; background: var(--code); padding: 0 3px; }
.doc pre { padding: 8px 10px; background: var(--code); box-shadow: var(--sunken); overflow: auto; }
.doc pre code { padding: 0; background: none; }
.doc blockquote { padding: 2px 12px; border-left: 3px solid var(--sh); color: var(--dim); }
.doc table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.doc th, .doc td { padding: 4px 9px; border: 1px solid var(--sh); vertical-align: top; }
.doc th { background: var(--face); font-weight: 700; }
.doc hr { height: 2px; margin: 1.2em 0; border: 0; border-top: 1px solid var(--sh); border-bottom: 1px solid var(--hi); }
.doc summary { cursor: default; font-weight: 700; }
.doc kbd { font: inherit; padding: 0 4px; background: var(--face); box-shadow: var(--raised); }
:root[data-theme="classic"] .doc h1 { font-size: 22px; }
:root[data-theme="classic"] .doc h2, :root[data-theme="classic"] .doc h3 { font-size: 11px; }
:root[data-theme="classic"] .doc code { font-size: 12px; }

/* Folding panels and meters inside documents */
.doc details { padding: 0 10px; border: 1px solid var(--sh); box-shadow: 1px 1px var(--hi), inset 1px 1px var(--hi); }
.doc details[open] { padding-bottom: 2px; }
.doc details details { margin-top: .5em; }
.doc summary { display: flex; align-items: center; gap: 7px; padding: 5px 0; list-style: none; font-weight: 400; }
.doc summary::-webkit-details-marker { display: none; }
.doc summary::before { content: "+"; flex: none; width: 9px; height: 9px; border: 1px solid var(--sh); background: var(--field); color: var(--text); font: 9px/8px monospace; text-align: center; }
.doc details[open] > summary::before { content: "-"; }
.doc details[open] > summary { margin-bottom: 6px; border-bottom: 1px solid var(--sh); box-shadow: 0 1px var(--hi); }
.doc summary:focus-visible { outline: 1px dotted var(--text); }
.doc progress { appearance: none; -webkit-appearance: none; width: 104px; height: 13px; margin-right: 4px; vertical-align: -2px; border: 0; background: var(--face); box-shadow: inset 1px 1px var(--sh), inset -1px -1px var(--hi); }
.doc progress::-webkit-progress-bar { background: transparent; padding: 2px; }
.doc progress::-webkit-progress-value { background: repeating-linear-gradient(90deg, var(--sel) 0 6px, transparent 6px 8px); }
.doc progress::-moz-progress-bar { background: repeating-linear-gradient(90deg, var(--sel) 0 6px, transparent 6px 8px); }

/* Taskbar and Start menu */
#taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--taskbar); display: flex; align-items: center; gap: 4px; padding: 4px 2px 2px; background: var(--face); box-shadow: inset 0 1px var(--lt), inset 0 2px var(--hi); z-index: 100000; }
#taskbar .btn { height: 22px; }
#start { min-width: 54px; padding: 0 5px; }
#tasks { flex: 1; min-width: 0; display: flex; gap: 3px; overflow: hidden; }
#tasks .btn { flex: 0 1 160px; min-width: 0; justify-content: flex-start; padding: 0 5px; }
#tasks .btn span { overflow: hidden; text-overflow: ellipsis; }
#tasks .btn.on { font-weight: 700; background: var(--lt); }
#tray { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 4px; box-shadow: var(--status); }
.traybtn { height: 16px; padding: 0 5px; border: 0; background: var(--face); color: var(--text); box-shadow: var(--raised); }
.traybtn:active { box-shadow: var(--pressed); }
.menu { position: absolute; left: 2px; bottom: calc(var(--taskbar) - 4px); z-index: 100001; display: flex; padding: 3px; background: var(--face); box-shadow: var(--window); }
.menu .band { width: 22px; background: linear-gradient(0deg, var(--title-a), var(--title-b)); color: #fff; font-weight: 700; writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px 3px; text-align: left; }
.menu .items { display: flex; flex-direction: column; min-width: 170px; }
.menu button, .menu a { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 22px 0 6px; border: 0; background: none; color: var(--text); text-decoration: none; text-align: left; cursor: default; }
.menu button:hover, .menu button:focus-visible, .menu a:hover, .menu a:focus-visible { background: var(--sel); color: var(--sel-text); outline: none; }
.menu hr { width: 100%; height: 2px; margin: 3px 0; border: 0; border-top: 1px solid var(--sh); border-bottom: 1px solid var(--hi); }

/* Day and Night add a small set of present-day comforts on top of the same chrome. Classic gets none of them. */
:root:not([data-theme="classic"]) .window { filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .28)); }
:root:not([data-theme="classic"]) table.list tbody tr:hover td { background: var(--lt); }
:root:not([data-theme="classic"]) table.list tbody tr.sel:hover td { background: var(--sel); }
:root:not([data-theme="classic"]) .btn:focus-visible { outline: 2px solid var(--title-b); outline-offset: -2px; }
:root:not([data-theme="classic"]) .doc { scroll-behavior: smooth; }
:root:not([data-theme="classic"]) .doc tbody tr:hover td { background: var(--code); }
:root:not([data-theme="classic"]) .doc summary:hover { color: var(--link); }
/* A panel's contents ease in when it opens, and its meters fill in chunks, the way a Windows 98 progress bar does. */
:root:not([data-theme="classic"]) .doc details[open] > :not(summary) { animation: doc-reveal .2s ease-out both; }
:root:not([data-theme="classic"]) .doc progress:not(.shown) { clip-path: inset(0 100% 0 0); }
:root:not([data-theme="classic"]) .doc progress.shown { animation: doc-fill .55s steps(11, end) both; }
:root:not([data-theme="classic"]) .doc tr:nth-child(2) progress { animation-delay: .05s; }
:root:not([data-theme="classic"]) .doc tr:nth-child(3) progress { animation-delay: .1s; }
:root:not([data-theme="classic"]) .doc tr:nth-child(4) progress { animation-delay: .15s; }
:root:not([data-theme="classic"]) .doc tr:nth-child(5) progress { animation-delay: .2s; }
:root:not([data-theme="classic"]) .doc tr:nth-child(6) progress { animation-delay: .25s; }
:root:not([data-theme="classic"]) .doc tr:nth-child(n+7) progress { animation-delay: .3s; }
@keyframes doc-reveal { from { opacity: 0; transform: translateY(-4px); } }
@keyframes doc-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  :root .doc { scroll-behavior: auto; }
  :root .doc details[open] > :not(summary), :root .doc progress.shown { animation: none; }
  :root .doc progress:not(.shown) { clip-path: none; }
}

/* Narrow screens: windows stop floating and stack as a single scrolling column. */
@media (max-width: 760px) {
  #desktop { overflow-y: auto; display: flex; flex-direction: column; padding: 6px; gap: 6px; }
  #icons { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; justify-content: center; }
  #windows { display: flex; flex-direction: column; gap: 6px; }
  .window { position: relative; left: auto !important; top: auto !important; width: auto !important; height: auto !important; max-height: none; filter: none !important; }
  .window .pane, .window .viewer .doc { max-height: 62vh; }
  .tctl .minb, .tctl .maxb, .grip { display: none; }
  .tctl button { width: 22px; height: 16px; }
  .titlebar { height: 22px; }
  .explorer, .viewer { grid-template-columns: 1fr; }
  .explorer > .side .pane { max-height: 130px; }
  .viewer .outline { max-height: 110px; }
  #tasks .btn span { display: none; }
  #tasks .btn { flex: 0 0 30px; }
  .btn { min-height: 26px; }
  :root:not([data-theme="classic"]) body { font: 13px/1.3 Tahoma, Verdana, "Segoe UI", sans-serif; }
  :root:not([data-theme="classic"]) table.list td, :root:not([data-theme="classic"]) .node { height: 26px; }
}