:root{
  --desktop:#1f6f6d;
  --desktop-deep:#155453;
  --paper:#d8d4c8;
  --face:#c0c0c0;
  --face2:#d7d3c8;
  --sunken:#fffef4;
  --ink:#050505;
  --muted:#333333;
  --shadow:#404040;
  --dark:#202020;
  --hilite:#ffffff;
  --blue:#000080;
  --blue2:#0b58a2;
  --link:#00006a;
  --ok:#005c00;
  --warn:#714800;
  --bad:#8a0000;
  --info:#003f7f;
  --line:#808080;
  --font:Tahoma,Verdana,"MS Sans Serif",Arial,sans-serif;
  --mono:"Lucida Console","Courier New",monospace;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--desktop)}
body{
  margin:0;min-height:100vh;color:var(--ink);font:13px/1.38 var(--font);
  background:
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/64px 64px,
    radial-gradient(800px 420px at 20% 0%,rgba(255,248,199,.18),transparent 62%),
    linear-gradient(180deg,var(--desktop),var(--desktop-deep));
  padding:18px;
}
a{color:var(--link);font-weight:700;text-decoration:underline;text-underline-offset:2px}
button,a.button,input,select,textarea{font:inherit}
button,.button,input[type=file]::file-selector-button,select{
  border:2px solid;border-color:var(--hilite) var(--shadow) var(--shadow) var(--hilite);
  background:var(--face);color:#000;border-radius:0;padding:5px 10px;box-shadow:1px 1px 0 #000;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:28px;
}
button:active,.button:active{border-color:var(--shadow) var(--hilite) var(--hilite) var(--shadow);box-shadow:none;transform:translate(1px,1px)}
button.primary,.button.primary{background:#d7d3c8;font-weight:700}
button[disabled],select[disabled]{color:#707070;text-shadow:1px 1px #fff;cursor:not-allowed}
input,select,textarea{
  border:2px solid;border-color:var(--shadow) var(--hilite) var(--hilite) var(--shadow);
  background:var(--sunken);color:#000;border-radius:0;padding:6px;box-shadow:inset 1px 1px 0 #000;outline:none;
}
textarea{width:100%;min-height:320px;resize:vertical;font:15px/1.62 var(--font)}
code,.mono{font-family:var(--mono)}
.app{
  max-width:1180px;margin:0 auto;background:var(--face);border:2px solid;border-color:var(--hilite) var(--shadow) var(--shadow) var(--hilite);box-shadow:2px 2px 0 #000, 0 18px 60px rgba(0,0,0,.25);
}
.app.wide{max-width:1340px}.app.narrow{max-width:860px}
.app-header{background:linear-gradient(90deg,var(--blue),var(--blue2));color:#fff;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #000}
.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-mark{width:18px;height:18px;background:var(--face);border:1px solid #fff;box-shadow:1px 1px 0 #000 inset,-1px -1px 0 #808080 inset;display:grid;place-items:center;color:#000;font:bold 12px var(--font)}
.brand-title{font-weight:700;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-sub{font-size:11px;color:#e6f2ff;font-weight:400}.header-clock{font-family:var(--mono);font-size:12px;white-space:nowrap}
.menu{display:flex;flex-wrap:wrap;gap:0;background:var(--face2);border-bottom:1px solid var(--shadow);padding:3px 6px}
.menu a{color:#000;text-decoration:none;font-weight:400;padding:4px 9px;border:1px solid transparent}.menu a:hover,.menu a.active{border-color:var(--hilite) var(--shadow) var(--shadow) var(--hilite);background:var(--face)}
.workspace{padding:12px;background:var(--paper)}
.statusbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:5px 8px;background:var(--face);border-top:1px solid var(--hilite);font-size:11px;color:#111}.statusbar span{border:1px solid;border-color:var(--shadow) var(--hilite) var(--hilite) var(--shadow);padding:2px 6px;background:#d0ccc0}
.grid{display:grid;gap:10px}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.panel{background:var(--face);border:2px solid;border-color:var(--hilite) var(--shadow) var(--shadow) var(--hilite);padding:8px;min-width:0}.panel.sunken{border-color:var(--shadow) var(--hilite) var(--hilite) var(--shadow);background:var(--sunken);box-shadow:inset 1px 1px 0 #000}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:-2px -2px 8px;padding:4px 6px;background:#e5e1d5;border-bottom:1px solid #9a9a9a;font-weight:700}.panel-title small{font-weight:400;color:#333}.section-title{font-weight:700;margin:8px 0 6px}.muted{color:var(--muted)}.small{font-size:11px}.big{font-size:28px;font-weight:700;line-height:1.05}.value{font-family:var(--mono);font-weight:700}.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;margin-bottom:10px}.hero h1{font-size:22px;margin:0 0 4px}.hero p{margin:0;color:#222;max-width:780px}.tabs{display:flex;gap:0;margin-bottom:8px}.tab{border:2px solid;border-color:var(--hilite) var(--shadow) var(--face) var(--hilite);background:var(--face);padding:5px 10px;font-weight:700}.tab.inactive{border-bottom-color:var(--shadow);background:#b8b8b8;color:#333;font-weight:400}
.badge{display:inline-flex;align-items:center;gap:4px;border:1px solid;border-color:var(--hilite) var(--shadow) var(--shadow) var(--hilite);background:#d8d4c8;padding:2px 6px;font-size:11px;font-weight:700;color:#000}.badge.ok{color:var(--ok);background:#e5f1df}.badge.warn{color:var(--warn);background:#fff0c8}.badge.bad{color:var(--bad);background:#f3d7d7}.badge.info{color:var(--info);background:#dbe9f6}.dot{width:9px;height:9px;border:1px solid #000;background:#808080;display:inline-block}.dot.ok{background:#00a000}.dot.warn{background:#d9a100}.dot.bad{background:#d80000}.dot.info{background:#0088d8}
.kv{display:grid;grid-template-columns:minmax(110px,40%) minmax(0,1fr);gap:0;border:1px solid var(--line);background:var(--sunken)}.kv div{padding:5px 7px;border-bottom:1px solid #c9c3b8}.kv div:nth-child(odd){background:#e7e2d6;font-weight:700}.kv div:nth-last-child(-n+2){border-bottom:0}
.table{width:100%;border-collapse:collapse;background:var(--sunken);border:1px solid var(--line)}.table th,.table td{padding:5px 7px;border:1px solid #aaa;text-align:left;vertical-align:top}.table th{background:#d6d2c6;font-weight:700}.table tr:nth-child(even) td{background:#f2efe4}
.list{display:grid;gap:7px}.row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px;background:var(--sunken);border:1px solid;border-color:var(--shadow) var(--hilite) var(--hilite) var(--shadow)}.row-main{min-width:0}.row-title{font-weight:700}.row-meta{font-size:11px;color:#333;overflow-wrap:anywhere}.progress{height:17px;background:#fff;border:2px solid;border-color:var(--shadow) var(--hilite) var(--hilite) var(--shadow);padding:2px}.bar{height:100%;background:linear-gradient(90deg,#000080,#0b58a2);min-width:1px}.bar.ok{background:#008000}.bar.warn{background:#b07800}.bar.bad{background:#a00000}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}.metric-card{background:var(--face);border:2px solid;border-color:var(--hilite) var(--shadow) var(--shadow) var(--hilite);padding:8px}.metric-card .label{font-weight:700}.metric-card .num{font:700 24px/1.1 var(--mono);margin:4px 0}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}.drop{background:var(--sunken);border:2px dashed #606060;padding:26px;text-align:center}.drop.hover{background:#fff7cd}.toast{border:2px solid;border-color:var(--hilite) var(--bad) var(--bad) var(--hilite);background:#f4dada;color:var(--bad);padding:8px;margin:8px 0;font-weight:700}.loader{padding:18px;background:var(--sunken);border:2px solid;border-color:var(--shadow) var(--hilite) var(--hilite) var(--shadow);font-weight:700}.loader:before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;border:1px solid #000;background:repeating-linear-gradient(90deg,#000080 0 3px,#fff 3px 6px);vertical-align:-2px}.canvas-clock{display:block;width:320px;max-width:100%;height:auto;margin:0 auto;background:#fffef4;border:2px solid;border-color:var(--shadow) var(--hilite) var(--hilite) var(--shadow)}
.editor-wrap{position:relative;background:#fffef4;border:2px solid;border-color:var(--shadow) var(--hilite) var(--hilite) var(--shadow);min-height:360px}.editor-wrap textarea,.backdrop{font:16px/1.62 var(--font);padding:12px;white-space:pre-wrap;word-wrap:break-word;min-height:360px}.editor-wrap textarea{position:relative;background:transparent;color:transparent;caret-color:#000;border:0;box-shadow:none;width:100%;resize:vertical;z-index:2}.editor-wrap textarea::selection{background:#000080;color:#fff}.backdrop{position:absolute;inset:0;color:#000;overflow:hidden;pointer-events:none;z-index:3}.backdrop mark{background:#fff0a8;color:#000;border-bottom:2px solid var(--bad);padding:0 1px}.backdrop mark.grammar{background:#ffe3b0;border-bottom-color:var(--warn)}.popover{position:fixed;z-index:20;max-width:360px;background:var(--face);border:2px solid;border-color:var(--hilite) var(--shadow) var(--shadow) var(--hilite);box-shadow:2px 2px 0 #000;padding:8px}.popover h3{margin:0 0 6px;font-size:13px}.popover .quote{background:var(--sunken);border:1px solid #808080;padding:5px;margin:6px 0}.hidden{display:none!important}.result-block{background:var(--sunken);border:1px solid #808080;padding:8px;white-space:pre-wrap}.spark{width:100%;height:42px;display:block;background:#fff;border:1px solid #808080}.clock-readout{font:700 42px/1 var(--mono);letter-spacing:-1px}.date-readout{font-size:16px;font-weight:700}.split{display:grid;grid-template-columns:1.1fr .9fr;gap:10px}.footer-note{margin-top:10px;color:#222;font-size:11px}
@media (max-width:840px){body{padding:8px}.app{max-width:none}.grid.cols-2,.grid.cols-3,.grid.cols-4,.split,.hero{grid-template-columns:1fr}.app-header{align-items:flex-start}.header-clock{display:none}.workspace{padding:8px}.menu{overflow:visible;white-space:normal;flex-wrap:wrap}.menu a{padding:4px 7px}.big{font-size:22px}.clock-readout{font-size:34px}.kv{grid-template-columns:1fr}.kv div:nth-child(odd){border-bottom:0}.row{align-items:flex-start;flex-direction:column}.panel{overflow-x:auto}.table{font-size:12px;min-width:640px}.table th,.table td{padding:5px}.editor-wrap textarea,.backdrop{font-size:15px}.drop{padding:18px 8px}}


/* Heading/icon layout. Actual icons are user-supplied Windows 2000 .ico files. */
.hero h1,.panel-title .with-icon,.brand-title{display:flex;align-items:center;gap:7px}
.bench-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px}.bench-grid .button{justify-content:flex-start;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero p{display:none}.metric-card .muted{display:none}
/* Real Windows 2000 icon set supplied by user. */
.win-icon{width:20px;height:20px;display:inline-block;vertical-align:-4px;flex:0 0 20px;object-fit:contain;image-rendering:auto}
.button .win-icon{width:18px;height:18px;vertical-align:-4px;flex-basis:18px}
.brand-mark{background:url('/assets/iconlib/hub.ico') center/16px 16px no-repeat #c0c0c0;color:transparent;font-size:0}


/* Win95/WinXP real weather icons from trapd00r/win95-winxp_icons. */
.weather-icon{width:22px;height:22px;display:inline-block;vertical-align:-5px;object-fit:contain;image-rendering:auto;flex:0 0 22px;margin-right:4px}.weather-icon.tiny{width:16px;height:16px;vertical-align:-3px;flex-basis:16px;margin-right:4px}.small-icon{width:16px;height:16px;vertical-align:-3px}.metric-head{display:flex;align-items:center;gap:6px;margin-bottom:4px}.weather-card .label{margin:0}.with-icon{display:inline-flex;align-items:center;gap:4px}.icon-kv>div:nth-child(odd){display:flex;align-items:center;gap:4px}.weather-forecast{grid-column:1/-1}.weather-forecast td:nth-child(2),.weather-forecast td:nth-child(6){white-space:nowrap}.loader .weather-icon,.toast .weather-icon{margin-right:6px}

@media (max-width:480px){.weather-grid .panel-title small{display:none}.weather-card .num{font-size:22px}}

/* Weather icons: semantic-only, no network-cloud icons for cloudiness/wind. */
.weather-card .metric-head:empty{display:none}.weather-card .metric-head .label:first-child{margin-left:0}

/* Iconlib semantic pack from trapd00r/win95-winxp_icons. */
.icon-semantic-note{display:none}


/* Page-wide semantic icon placement. */
.metric-head{display:flex;align-items:center;gap:6px;margin-bottom:4px}.metric-head .label{margin:0}.with-icon{display:inline-flex;align-items:center;gap:6px}.small-icon{width:16px;height:16px;vertical-align:-3px;flex:0 0 16px;object-fit:contain}.panel-title .small-icon{margin-right:2px}.button .small-icon,button .small-icon{width:16px;height:16px;flex-basis:16px}.icon-kv>div:nth-child(odd){display:flex;align-items:center;gap:4px}