/* Retro Software shelf - three original CSS looks that EVOKE Windows 9x, Mac OS 9 (Platinum) and Mac OS X (Aqua).
   No vendor logos, icons, bitmaps or fonts; system font stacks only; no external requests. */
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh}
.skip{position:absolute;left:-999px;top:4px;background:#fff;color:#000;padding:6px 10px;z-index:99}
.skip:focus{left:6px}
.desk{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:0 0 0}
.win{width:min(980px,calc(100% - 24px));margin:28px 0 24px;display:flex;flex-direction:column}
.client{display:grid;grid-template-columns:230px 1fr;gap:0;flex:1}
.side{padding:12px}
.main{padding:12px;min-width:0}
.tb{display:flex;align-items:center;gap:8px}
.tb h1{margin:0;font-size:14px;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctl{display:flex;gap:3px}
.ctl i{display:block}
.menu{display:flex;gap:16px;padding:3px 8px}
.sb{display:flex;gap:10px;padding:3px 8px;font-size:12px}
.sb .grow{flex:1}
.intro{margin:0 0 10px}
.warn{margin:0 0 12px;padding:8px 10px}
.small{font-size:12px;margin:0 0 10px}
fieldset.themes{margin:0 0 14px;padding:8px 10px}
.opt{display:block;padding:3px 0;cursor:pointer}
.opt input{margin-right:6px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:6px 8px;vertical-align:top}
small{display:block;opacity:.85}
.ico{display:inline-block;width:14px;height:14px;margin-right:7px;vertical-align:-2px}
.btn{display:inline-block;text-decoration:none;padding:4px 12px;font:inherit;color:inherit;cursor:default;white-space:nowrap}
.btn[aria-disabled=true]{cursor:not-allowed}
.mbar,.bar{display:none}
a:focus-visible,input:focus-visible,.listbox:focus-visible{outline:2px dotted currentColor;outline-offset:2px}
@media (max-width:760px){
  .client{grid-template-columns:1fr}
  table,thead,tbody,tr,td{display:block}
  thead{position:absolute;left:-9999px}
  tr{margin:0 0 10px;padding:6px 0}
  td{padding:3px 8px}
  td::before{content:attr(data-l) ": ";font-weight:700}
  td[data-l=Name]::before{content:""}
  .win{margin:12px 0 70px}
}

/* ============================ Windows 9x ============================ */
[data-theme=win9x] body{background:#008080;font:14px/1.35 "MS Sans Serif","Microsoft Sans Serif",Tahoma,Verdana,Arial,sans-serif;color:#000}
[data-theme=win9x] .win{background:#c0c0c0;box-shadow:inset -1px -1px #000,inset 1px 1px #dfdfdf,inset -2px -2px #808080,inset 2px 2px #fff;padding:3px}
[data-theme=win9x] .tb{background:linear-gradient(90deg,#000080,#1084d0);color:#fff;padding:3px 4px;flex-direction:row-reverse}
[data-theme=win9x] .tb h1{font-size:14px}
[data-theme=win9x] .ctl{flex-direction:row}
[data-theme=win9x] .ctl i{width:18px;height:16px;background:#c0c0c0;color:#000;font:700 12px/14px Arial,sans-serif;text-align:center;box-shadow:inset -1px -1px #000,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf}
[data-theme=win9x] .ctl i:nth-child(1)::before{content:"_"}
[data-theme=win9x] .ctl i:nth-child(2)::before{content:"\25A1"}
[data-theme=win9x] .ctl i:nth-child(3)::before{content:"\00D7";margin-left:0}
[data-theme=win9x] .ctl i:nth-child(3){margin-left:2px}
[data-theme=win9x] .menu{border-bottom:1px solid #808080;box-shadow:0 1px #fff}
[data-theme=win9x] .client{margin:4px 0}
[data-theme=win9x] .side{border-right:0}
[data-theme=win9x] fieldset.themes{border:2px groove #fff;border-color:#fff #808080 #808080 #fff}
[data-theme=win9x] .listbox{background:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px #808080,inset -2px -2px #dfdfdf,inset 2px 2px #000;padding:2px;overflow:auto}
[data-theme=win9x] th{background:#c0c0c0;box-shadow:inset -1px -1px #404040,inset 1px 1px #fff;font-weight:400;padding:3px 8px}
[data-theme=win9x] td{border-bottom:1px solid #e0e0e0}
[data-theme=win9x] tbody tr:hover td{background:#000080;color:#fff}
[data-theme=win9x] .ico{background:#808000;border:1px solid #000;box-shadow:2px 2px 0 #000 inset}
[data-theme=win9x] .btn{background:#c0c0c0;box-shadow:inset -1px -1px #000,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf;padding:5px 14px;min-width:70px;text-align:center}
[data-theme=win9x] .btn[aria-disabled=true]{color:#555;text-shadow:1px 1px #fff}
[data-theme=win9x] .warn{background:#ffffe1;border:1px solid #000;color:#000}
[data-theme=win9x] .sb span{padding:2px 6px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
[data-theme=win9x] .bar{display:flex;position:fixed;left:0;right:0;bottom:0;height:34px;background:#c0c0c0;box-shadow:inset 0 2px #dfdfdf,inset 0 1px #fff;padding:3px;gap:6px;align-items:center;font-size:14px}
[data-theme=win9x] .bar .start{font-weight:700;padding:3px 12px 3px 24px;position:relative;box-shadow:inset -1px -1px #000,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf}
[data-theme=win9x] .bar .start::before{content:"";position:absolute;left:7px;top:7px;width:11px;height:11px;background:#808080;border:1px solid #000;transform:rotate(45deg) scale(.8)}
[data-theme=win9x] .bar .task{padding:3px 12px;min-width:150px;box-shadow:inset 1px 1px #000,inset -1px -1px #fff;background:repeating-conic-gradient(#fff 0 25%,#c0c0c0 0 50%) 0 0/2px 2px;font-weight:700}
[data-theme=win9x] .bar .sp{flex:1}
[data-theme=win9x] .bar .dock{display:none}
[data-theme=win9x] .bar .clock{padding:3px 10px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}

/* ============================ Mac OS 9 (Platinum) ============================ */
[data-theme=mac9] body{background:#6a88ad;background-image:radial-gradient(#00000014 1px,transparent 1px);background-size:4px 4px;font:14px/1.35 Charcoal,Geneva,"Lucida Grande",Verdana,sans-serif;color:#000}
[data-theme=mac9] .mbar{display:flex;gap:18px;align-items:center;position:sticky;top:0;width:100%;height:24px;padding:0 12px;background:linear-gradient(#fff,#e4e4e4);border-bottom:1px solid #000;font-size:13px;z-index:5}
[data-theme=mac9] .mbar .sp{flex:1}
[data-theme=mac9] .win{background:#dddddd;border:1px solid #000;box-shadow:3px 3px 0 #0006,inset 1px 1px #fff,inset -1px -1px #888;margin-top:30px}
[data-theme=mac9] .tb{height:22px;margin:3px 3px 0;padding:0 6px;background:repeating-linear-gradient(#fff 0 1px,#a6a6a6 1px 2px);border:1px solid #000;border-bottom:1px solid #000;position:relative;justify-content:center}
[data-theme=mac9] .tb h1{flex:0 1 auto;background:#ddd;padding:0 10px;font-size:13px;text-align:center}
[data-theme=mac9] .ctl{position:absolute;left:0;right:0;top:3px;height:14px;pointer-events:none;justify-content:space-between;padding:0 6px}
[data-theme=mac9] .ctl i{width:13px;height:13px;border:1px solid #000;background:#ddd;box-shadow:inset 1px 1px #fff,inset -1px -1px #999}
[data-theme=mac9] .ctl i:nth-child(1){order:1}
[data-theme=mac9] .ctl i:nth-child(2){display:none}
[data-theme=mac9] .ctl i:nth-child(3){order:2}
[data-theme=mac9] .menu{padding:5px 10px;border-bottom:1px solid #888;background:#e8e8e8;margin:0 3px}
[data-theme=mac9] .client{margin:0 3px}
[data-theme=mac9] fieldset.themes{border:1px solid #000;background:#e6e6e6;border-radius:3px}
[data-theme=mac9] .listbox{background:#fff;border:1px solid #000;box-shadow:inset 1px 1px #888;overflow:auto}
[data-theme=mac9] th{background:linear-gradient(#f4f4f4,#cfcfcf);border-bottom:1px solid #000;border-right:1px solid #888;font-weight:700;font-size:13px}
[data-theme=mac9] td{border-bottom:1px dotted #bbb}
[data-theme=mac9] tbody tr:nth-child(even) td{background:#eef0f6}
[data-theme=mac9] tbody tr:hover td{background:#1a1a1a;color:#fff}
[data-theme=mac9] .ico{background:#6a88ad;border:1px solid #000;border-radius:2px}
[data-theme=mac9] .btn{border:1px solid #000;border-radius:9px;background:linear-gradient(#fff,#d0d0d0);box-shadow:1px 1px 0 #0007,inset 0 0 0 1px #fff;padding:4px 14px}
[data-theme=mac9] .btn[aria-disabled=true]{color:#444;background:#e2e2e2;border-color:#555;box-shadow:none}
[data-theme=mac9] .warn{background:#fff7c2;border:1px solid #000}
[data-theme=mac9] .sb{border-top:1px solid #888;background:#e0e0e0;margin:0 3px 3px}

/* ============================ Mac OS X (Aqua) ============================ */
[data-theme=aqua] body{background:radial-gradient(circle at 18% 22%,#9ed0ff 0,#9ed0ff00 36%),radial-gradient(circle at 82% 70%,#5aa0e8 0,#5aa0e800 44%),linear-gradient(160deg,#2a64b0,#7db3e6 60%,#bcd9f4);background-attachment:fixed;font:14px/1.4 "Lucida Grande","Helvetica Neue",Helvetica,Arial,sans-serif;color:#1a1a1a}
[data-theme=aqua] .mbar{display:flex;gap:20px;align-items:center;position:sticky;top:0;width:100%;height:24px;padding:0 14px;background:linear-gradient(#fdfdfd,#d9d9d9);border-bottom:1px solid #8a8a8a;box-shadow:0 1px 3px #0004;font-size:13px;z-index:5}
[data-theme=aqua] .mbar .sp{flex:1}
[data-theme=aqua] .win{background:repeating-linear-gradient(90deg,#ededed 0 2px,#f6f6f6 2px 4px);border:1px solid #6b6b6b;border-radius:9px 9px 5px 5px;box-shadow:0 14px 32px #0007,0 2px 6px #0005;overflow:hidden;margin-top:34px}
[data-theme=aqua] .tb{height:28px;padding:0 10px;background:linear-gradient(#f0f0f0,#c3c3c3);border-bottom:1px solid #7d7d7d;position:relative;justify-content:center}
[data-theme=aqua] .tb h1{flex:0 1 auto;text-align:center;font-weight:400;font-size:13px;text-shadow:0 1px #fff}
[data-theme=aqua] .ctl{position:absolute;left:9px;top:6px;gap:7px}
[data-theme=aqua] .ctl i{width:14px;height:14px;border-radius:50%;border:1px solid #0004;background:radial-gradient(circle at 50% 28%,#fffa 0 30%,#0000 60%),var(--c)}
[data-theme=aqua] .ctl i:nth-child(1){--c:#ff5f57}
[data-theme=aqua] .ctl i:nth-child(2){--c:#ffbd2e}
[data-theme=aqua] .ctl i:nth-child(3){--c:#28c840}
[data-theme=aqua] .menu{display:none}
[data-theme=aqua] fieldset.themes{border:1px solid #b0b0b0;border-radius:6px;background:#fff8;box-shadow:inset 0 1px 2px #0002}
[data-theme=aqua] .listbox{background:#fff;border:1px solid #8c8c8c;border-radius:4px;box-shadow:inset 0 1px 3px #0003;overflow:auto}
[data-theme=aqua] th{background:linear-gradient(#fafafa,#dcdcdc);border-bottom:1px solid #a0a0a0;border-right:1px solid #c8c8c8;font-weight:400;font-size:13px}
[data-theme=aqua] tbody tr:nth-child(even) td{background:#edf3fe}
[data-theme=aqua] tbody tr:hover td{background:linear-gradient(#5b9cf5,#2765d8);color:#fff}
[data-theme=aqua] .ico{background:radial-gradient(circle at 35% 30%,#fff9 0 25%,#0000 55%),#3d7de0;border-radius:4px;border:1px solid #1d4fa8}
[data-theme=aqua] .btn{color:#fff;text-shadow:0 -1px #0004;border:1px solid #1b4fa3;border-radius:14px;padding:4px 16px;background:linear-gradient(#a9cdfb 0,#5c9bf0 48%,#2d6fdc 52%,#5d9ff5 100%);box-shadow:0 1px 2px #0005,inset 0 1px #fffa}
[data-theme=aqua] .btn[aria-disabled=true]{color:#333;text-shadow:0 1px #fff;border-color:#8a8a8a;background:linear-gradient(#fafafa,#d6d6d6 50%,#c7c7c7 52%,#e6e6e6)}
[data-theme=aqua] .warn{background:#fffbd6;border:1px solid #c9bd6a;border-radius:6px}
[data-theme=aqua] .sb{background:linear-gradient(#e9e9e9,#cfcfcf);border-top:1px solid #8c8c8c}
[data-theme=aqua] .bar{display:flex;position:fixed;left:50%;transform:translateX(-50%);bottom:8px;gap:0;height:56px;padding:6px 14px;background:linear-gradient(#ffffff90,#ffffff40);border:1px solid #ffffffb0;border-radius:14px;box-shadow:0 6px 20px #0006,inset 0 1px #fff;align-items:center}
[data-theme=aqua] .bar .start,[data-theme=aqua] .bar .task,[data-theme=aqua] .bar .sp,[data-theme=aqua] .bar .clock{display:none}
[data-theme=aqua] .bar .dock{display:flex;gap:10px}
[data-theme=aqua] .bar .dock i{width:42px;height:42px;border-radius:10px;background:radial-gradient(circle at 35% 25%,#fffb 0 22%,#0000 50%),hsl(var(--h) 70% 48%);box-shadow:0 2px 4px #0006,inset 0 0 0 1px #fff6}
@media (max-width:760px){[data-theme=win9x] .bar .task{min-width:0}[data-theme=aqua] .bar{display:none}}
@media print{.bar,.mbar{display:none}}

/* dock hues (no inline styles) */
.dock i:nth-child(1){--h:210}.dock i:nth-child(2){--h:20}.dock i:nth-child(3){--h:120}.dock i:nth-child(4){--h:280}.dock i:nth-child(5){--h:45}