/* etan://blog — desktop shell. Five themes, all driven by tokens on <html data-theme>. */

/* ================= THEME TOKENS ================= */
:root, :root[data-theme="etan"], .tp[data-theme="etan"] {
  --bg: #051631; --panel: #08203f; --edge: #030e20;
  --text: #E4DCEC; --muted: #A39BBF;
  --deep: #552B9D; --a: #DDAACC; --b: #BB88EE;
  --ink: #DDAACC; --link: #DDAACC; --hd: #DDAACC; --hshadow: .06em .06em 0 var(--deep);
  --face: #0e2a52; --hl: #cdbfe6; --hl2: #43518a; --sd: #071a38; --bk: #020a17; --dither: #123464;
  --sel: #552B9D; --sel-text: #fff; --on-a: #051631;
  --accent-grad: linear-gradient(100deg, #DDAACC, #BB88EE);
  --title-grad: linear-gradient(90deg, #552B9D, #8a5ed4 70%, #BB88EE);
  --title-grad-off: linear-gradient(90deg, #2a3358, #3c4673);
  --title-fg: #fff; --title-fg-off: #A39BBF;
  --desk:
    linear-gradient(115deg, transparent 0 58%, rgba(221,170,204,.17) 58% 72%, transparent 72% 78%, rgba(187,136,238,.12) 78% 83%, transparent 83%),
    repeating-linear-gradient(115deg, transparent 0 26px, rgba(187,136,238,.06) 26px 28px),
    #051631;
  --desk-text: #fff; --desk-shadow: 1px 1px 0 #020a17;
  --ghost-stroke: rgba(221,170,204,.2);
  --banner: linear-gradient(160deg, #552B9D, #051631 85%); --banner-fg: #DDAACC; --bline: #DDAACC;
  --side-grad: linear-gradient(0deg, #552B9D, #051631); --side-fg: #DDAACC;
  --code-bg: #000; --code-fg: #E4DCEC;
  --sticky-bg: #DDAACC; --sticky-fg: #030e20;
  --ctr-bg: #000; --ctr-fg: #DDAACC;
  --r-win: 0px; --r-btn: 0px; --r-field: 0px; --r-pill: 0px;
  --win-filter: drop-shadow(5px 6px 0 rgba(0,0,0,.38));
  --chip-clip: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  --f-ui: 'Chakra Petch', 'Arial Narrow', system-ui, sans-serif;
  --f-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --f-display: 'Dela Gothic One', 'Arial Black', system-ui, sans-serif;
  --f-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --fs: 15px; --fw-d: 400; --row-h: 30px;
  --ic-d: #030e20; --ic-t: #E4DCEC; --ic-a: #DDAACC; --ic-b: #BB88EE; --ic-m: #8f7fbd; --ic-p: #552B9D; --ic-n: #051631;
  color-scheme: dark;
}

:root[data-theme="hacker"], .tp[data-theme="hacker"] {
  --bg: #000; --panel: #03110a; --edge: #000;
  --text: #33f065; --muted: #1fa04a;
  --deep: #0b4a1f; --a: #39ff6a; --b: #1fd05a;
  --ink: #39ff6a; --link: #7dffa0; --hd: #39ff6a; --hshadow: 0 0 10px rgba(57,255,106,.55);
  --face: #04140a; --hl: #1f9c45; --hl2: #1f9c45; --sd: #14702f; --bk: #14702f; --dither: #0a2a14;
  --sel: #39ff6a; --sel-text: #000; --on-a: #000;
  --accent-grad: linear-gradient(#39ff6a, #39ff6a);
  --title-grad: linear-gradient(#0a3a1b, #0a3a1b); --title-grad-off: linear-gradient(#04140a, #04140a);
  --title-fg: #39ff6a; --title-fg-off: #1fa04a;
  --desk:
    linear-gradient(rgba(57,255,106,.045) 1px, transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg, rgba(57,255,106,.045) 1px, transparent 1px) 0 0/32px 32px,
    #000;
  --desk-text: #39ff6a; --desk-shadow: 0 0 4px #000, 0 0 2px #000;
  --ghost-stroke: rgba(57,255,106,.16);
  --banner: linear-gradient(#0a3a1b, #000); --banner-fg: #39ff6a; --bline: #39ff6a;
  --side-grad: linear-gradient(0deg, #0a3a1b, #000); --side-fg: #39ff6a;
  --code-bg: #020a04; --code-fg: #7dffa0;
  --sticky-bg: #39ff6a; --sticky-fg: #000;
  --ctr-bg: #000; --ctr-fg: #39ff6a;
  --win-filter: drop-shadow(0 0 10px rgba(57,255,106,.22));
  --chip-clip: none;
  --f-ui: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --f-body: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --f-display: 'VT323', 'JetBrains Mono', monospace;
  --fs: 14px; --row-h: 28px;
  --ic-d: #0a3a1b; --ic-t: #8dffaa; --ic-a: #39ff6a; --ic-b: #1fa04a; --ic-m: #167a36; --ic-p: #0a3a1b; --ic-n: #000;
}

:root[data-theme="mizuki"], .tp[data-theme="mizuki"] {
  --bg: #fffafd; --panel: #fdeaf4; --edge: #e7bfd8;
  --text: #4a2c4f; --muted: #86648c;
  --deep: #884499; --a: #DDAACC; --b: #c9a8e8;
  --ink: #8e3f94; --link: #884499; --hd: #DDAACC; --hshadow: .05em .05em 0 #884499;
  --face: #f6d9ea; --hl: #ffffff; --hl2: #fff0f8; --sd: #e3b7d3; --bk: #c98fb8; --dither: #fbe6f2;
  --sel: #884499; --sel-text: #fff; --on-a: #4a2c4f;
  --accent-grad: linear-gradient(100deg, #DDAACC, #e7c6f5);
  --title-grad: linear-gradient(90deg, #DDAACC, #f3c3e4 60%, #d9b8f2);
  --title-grad-off: linear-gradient(90deg, #ecd9e6, #f5e8f0);
  --title-fg: #4a1f55; --title-fg-off: #9a7fa0;
  --desk:
    radial-gradient(circle at 20px 20px, rgba(221,170,204,.5) 4px, transparent 5px) 0 0/40px 40px,
    radial-gradient(circle at 20px 20px, rgba(201,168,232,.4) 3px, transparent 4px) 20px 20px/40px 40px,
    linear-gradient(115deg, transparent 0 58%, rgba(221,170,204,.28) 58% 72%, transparent 72%),
    #fff0f8;
  --desk-text: #4a2c4f; --desk-shadow: 0 0 5px #fff, 0 0 2px #fff, 0 1px 0 #fff;
  --ghost-stroke: rgba(221,170,204,.8);
  --banner: linear-gradient(160deg, #DDAACC, #f6d0ea 65%, #e9d3fa); --banner-fg: #fff; --bline: #884499;
  --side-grad: linear-gradient(0deg, #DDAACC, #fff0f8); --side-fg: #884499;
  --code-bg: #3a1f45; --code-fg: #fbe6f2;
  --sticky-bg: #e7d3fa; --sticky-fg: #3a1f45;
  --ctr-bg: #4a2c4f; --ctr-fg: #f6c3e4;
  --r-win: 18px; --r-btn: 12px; --r-field: 10px; --r-pill: 999px;
  --win-filter: drop-shadow(0 8px 14px rgba(136,68,153,.28));
  --chip-clip: none;
  --f-ui: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', system-ui, sans-serif;
  --f-body: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', system-ui, sans-serif;
  --f-display: 'Mochiy Pop One', 'Zen Maru Gothic', system-ui, sans-serif;
  --fs: 15px;
  --ic-d: #6b3a73; --ic-t: #fff; --ic-a: #DDAACC; --ic-b: #c9a8e8; --ic-m: #b58bc0; --ic-p: #884499; --ic-n: #fff0f8;
  color-scheme: light;
}

:root[data-theme="win98"], .tp[data-theme="win98"] {
  --bg: #fff; --panel: #fff; --edge: #000;
  --text: #000; --muted: #505050;
  --deep: #000080; --a: #000080; --b: #1084d0;
  --ink: #000080; --link: #0000ee; --hd: #000080; --hshadow: none;
  --face: #c0c0c0; --hl: #fff; --hl2: #dfdfdf; --sd: #808080; --bk: #000; --dither: #fff;
  --sel: #000080; --sel-text: #fff; --on-a: #000;
  --accent-grad: linear-gradient(#c0c0c0, #c0c0c0);
  --title-grad: linear-gradient(90deg, #000080, #1084d0);
  --title-grad-off: linear-gradient(90deg, #808080, #c0c0c0);
  --title-fg: #fff; --title-fg-off: #c0c0c0;
  --desk: #008080;
  --desk-text: #fff; --desk-shadow: none;
  --ghost-stroke: transparent;
  --banner: linear-gradient(160deg, #000080, #1084d0); --banner-fg: #fff; --bline: #c0c0c0;
  --side-grad: linear-gradient(0deg, #000080, #1084d0); --side-fg: #fff;
  --code-bg: #000; --code-fg: #c0c0c0;
  --sticky-bg: #ffffe1; --sticky-fg: #000;
  --ctr-bg: #000; --ctr-fg: #ff3030;
  --win-filter: none;
  --chip-clip: none;
  --f-ui: Tahoma, 'MS Sans Serif', Verdana, Geneva, sans-serif;
  --f-body: 'Times New Roman', Times, serif;
  --f-display: Arial, Helvetica, sans-serif;
  --fs: 13px; --fw-d: 700; --row-h: 22px;
  --ic-d: #000; --ic-t: #fff; --ic-a: #ffd24a; --ic-b: #1fa0c8; --ic-m: #808080; --ic-p: #000080; --ic-n: #008080;
  color-scheme: light;
}

/* kangel: "internet angel" yami-kawaii. Sky blue + bubblegum pink + black outlines, pixel type */
:root[data-theme="kangel"], .tp[data-theme="kangel"] {
  --bg: #fff6fb; --panel: #ffe6f3; --edge: #2b1b3d;
  --text: #33203f; --muted: #75558c;
  --deep: #e0278a; --a: #ff8fc7; --b: #7fd3ff;
  --ink: #c81d7b; --link: #b3166d; --hd: #e0278a; --hshadow: .045em .045em 0 #7fd3ff, .09em .09em 0 #2b1b3d;
  --face: #ffcce5; --hl: #ffffff; --hl2: #fff0f8; --sd: #f08fc0; --bk: #2b1b3d; --dither: #ffdcee;
  --sel: #d81b7e; --sel-text: #fff; --on-a: #33203f;
  --accent-grad: linear-gradient(100deg, #ff8fc7, #9fdcff);
  --title-grad: linear-gradient(90deg, #ff7fbf, #ffb3dc 50%, #9fdcff);
  --title-grad-off: linear-gradient(90deg, #ead9f2, #d6ecf9);
  --title-fg: #33104a; --title-fg-off: #6b4f82;
  --desk:
    radial-gradient(ellipse 170px 52px at 14% 82%, #fff 0 62%, transparent 64%),
    radial-gradient(ellipse 120px 44px at 22% 86%, #fff 0 62%, transparent 64%),
    radial-gradient(ellipse 200px 58px at 74% 18%, rgba(255,255,255,.95) 0 62%, transparent 64%),
    radial-gradient(ellipse 130px 44px at 84% 23%, rgba(255,255,255,.95) 0 62%, transparent 64%),
    radial-gradient(circle at 10px 10px, rgba(255,255,255,.55) 2px, transparent 3px) 0 0/36px 36px,
    linear-gradient(180deg, #8fd8ff 0%, #c4b6ff 48%, #ffb0d9 100%);
  --desk-text: #fff; --desk-shadow: 1px 0 #2b1b3d, -1px 0 #2b1b3d, 0 1px #2b1b3d, 0 -1px #2b1b3d, 1px 1px #2b1b3d;
  --ghost-stroke: rgba(255,255,255,.9);
  --banner: linear-gradient(160deg, #ff7fbf, #d7b8ff 58%, #8fd8ff); --banner-fg: #fff; --bline: #2b1b3d;
  --side-grad: linear-gradient(0deg, #ff7fbf, #9fdcff); --side-fg: #fff;
  --code-bg: #2b1b3d; --code-fg: #ffd1e8;
  --sticky-bg: #c4ecff; --sticky-fg: #2b1b3d;
  --ctr-bg: #2b1b3d; --ctr-fg: #ff9ccf;
  --r-win: 0px; --r-btn: 0px; --r-field: 0px; --r-pill: 0px;
  --win-filter: drop-shadow(4px 4px 0 rgba(224,39,138,.5));
  --chip-clip: none;
  --f-ui: 'DotGothic16', 'Zen Maru Gothic', system-ui, sans-serif;
  --f-body: 'Zen Maru Gothic', 'DotGothic16', system-ui, sans-serif;
  --f-display: 'Pixelify Sans', 'DotGothic16', system-ui, sans-serif;
  --fs: 15px; --fw-d: 700; --row-h: 30px;
  --ic-d: #2b1b3d; --ic-t: #ffffff; --ic-a: #ff8fc7; --ic-b: #7fd3ff; --ic-m: #c9a0e8; --ic-p: #d81b7e; --ic-n: #fff0f8;
  color-scheme: light;
}

/* bevel recipes (resolve against whichever theme is active on <html>) */
:root {
  --raised: inset -1px -1px var(--bk), inset 1px 1px var(--hl), inset -2px -2px var(--sd), inset 2px 2px var(--hl2);
  --sunken: inset -1px -1px var(--hl), inset 1px 1px var(--sd), inset -2px -2px var(--hl2), inset 2px 2px var(--bk);
  --pressed: inset 1px 1px var(--bk), inset -1px -1px var(--hl), inset 2px 2px var(--sd), inset -2px -2px var(--hl2);
  --tb-h: 38px;
}
:root[data-theme="hacker"] {
  --raised: inset 0 0 0 1px var(--hl);
  --sunken: inset 0 0 0 1px var(--sd);
  --pressed: inset 0 0 0 1px var(--hl), inset 0 0 0 99px rgba(57,255,106,.22);
}
:root[data-theme="mizuki"] {
  --raised: inset 0 2px 0 #fff, inset 0 -3px 0 rgba(136,68,153,.16), 0 0 0 1px #d9a5c8;
  --sunken: inset 0 2px 5px rgba(136,68,153,.22), 0 0 0 1px #e3b7d3;
  --pressed: inset 0 3px 6px rgba(136,68,153,.32), 0 0 0 1px #c98fb8;
}

:root[data-theme="kangel"] {
  --raised: inset 0 0 0 2px var(--bk), inset 4px 4px 0 var(--hl), inset -4px -4px 0 var(--sd);
  --sunken: inset 0 0 0 2px var(--bk), inset 4px 4px 0 var(--sd);
  --pressed: inset 0 0 0 2px var(--bk), inset 4px 4px 0 var(--sd), inset -4px -4px 0 var(--hl);
}

/* ================= BASE ================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs)/1.4 var(--f-ui);
  overflow: hidden;
  cursor: default;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 1px dotted var(--text); outline-offset: -4px; }
.ico { width: 16px; height: 16px; flex: none; }
.ico.sm { width: 14px; height: 14px; }
.ico.lg { width: 32px; height: 32px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.raised, .btn98, .win, .taskbar, .menu98, .tab, .colh, .tool:hover { box-shadow: var(--raised); }
.sunken, .list98, .statusbar > span, .tray, .viewpane, .reader { box-shadow: var(--sunken); }

/* ================= DESKTOP ================= */
.desktop { position: fixed; inset: 0 0 var(--tb-h) 0; overflow: hidden; background: var(--desk); }
.ghost {
  position: absolute; right: -2vw; bottom: 2vh;
  font: var(--fw-d) clamp(120px, 30vw, 380px)/.8 var(--f-display);
  color: transparent; -webkit-text-stroke: 2px var(--ghost-stroke);
  transform: rotate(-7deg); transform-origin: right bottom;
  text-transform: uppercase; user-select: none; pointer-events: none;
}
.dicons { position: absolute; left: 12px; top: 12px; display: grid; gap: 4px; z-index: 1; }
.dicon {
  display: grid; justify-items: center; gap: 4px; width: 88px; padding: 6px 2px;
  color: var(--desk-text); text-decoration: none; text-align: center;
  font-size: 13px; line-height: 1.15; text-shadow: var(--desk-shadow);
  background: none; border: 0;
}
.dicon:focus { outline: 0; }
.dicon:focus span, .dicon.sel span { background: var(--sel); color: var(--sel-text); outline: 1px dotted var(--sel-text); outline-offset: 0; text-shadow: none; }
.dicon span { padding: 1px 3px; }
.dicon .ico { width: 40px; height: 40px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.45)); }

.sticky {
  position: absolute; right: 18px; top: 16px; width: 214px; padding: 12px 14px 14px;
  background: var(--sticky-bg); color: var(--sticky-fg);
  font: 500 13px/1.35 var(--f-ui); transform: rotate(2.5deg);
  box-shadow: 3px 4px 0 rgba(0,0,0,.35); z-index: 1;
}
.sticky b { font-family: var(--f-display); font-weight: var(--fw-d); display: block; margin-bottom: 4px; }
.sticky a { color: inherit; font-weight: 700; }
.sticky code { background: rgba(0,0,0,.12); padding: 0 3px; }
.sticky button { position: absolute; top: 2px; right: 4px; background: none; border: 0; font-size: 16px; line-height: 1; color: inherit; opacity: .7; }
.sparkles { display: none; position: absolute; inset: 0; pointer-events: none; }
.sparkles span { position: absolute; color: #DDAACC; text-shadow: 0 0 6px #fff; animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }

/* ================= WINDOWS ================= */
.win {
  position: absolute; display: flex; flex-direction: column;
  background: var(--face); padding: 3px; border-radius: var(--r-win);
  max-width: calc(100% - 8px); max-height: calc(100% - 8px);
  filter: var(--win-filter); z-index: 5;
}
.win[hidden] { display: none; }
.win.dialog { height: auto !important; }
.wbody { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.titlebar {
  display: flex; align-items: center; gap: 6px; height: 24px; padding: 2px 3px 2px 5px;
  background: var(--title-grad); color: var(--title-fg);
  font: 700 calc(var(--fs) - 1px)/1 var(--f-ui); letter-spacing: .02em;
  user-select: none; flex: none; border-radius: max(0px, calc(var(--r-win) - 5px));
}
.win:not(.active) .titlebar { background: var(--title-grad-off); color: var(--title-fg-off); }
.titlebar .t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tctl { display: flex; gap: 2px; }
.tctl button {
  width: 20px; height: 18px; padding: 0; background: var(--face); border: 0;
  display: grid; place-items: center; font: 700 12px/1 var(--f-ui); color: var(--text);
  box-shadow: var(--raised); border-radius: min(var(--r-btn), 9px);
}
.tctl button:active { box-shadow: var(--pressed); }
.tctl .gap { width: 2px; }
.win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; max-width: none; max-height: none; filter: none; border-radius: 0; }
.grip { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 0 50%, var(--sd) 50% 58%, transparent 58% 70%, var(--sd) 70% 78%, transparent 78%); }
.win.max .grip { display: none; }

.menubar { display: flex; flex: none; padding: 2px 0; font-size: calc(var(--fs) - 1px); }
.menubar span, .menubar a { padding: 1px 8px; color: var(--text); text-decoration: none; border-radius: var(--r-field); }
.menubar span:hover, .menubar a:hover { background: var(--sel); color: var(--sel-text); }
.hr98 { height: 2px; border: 0; margin: 2px 0; box-shadow: inset 0 1px var(--sd), inset 0 -1px var(--hl2); background: none; flex: none; }
:root[data-theme="kangel"] .hr98 { box-shadow: none; background: repeating-linear-gradient(90deg, var(--bk) 0 4px, transparent 4px 8px); height: 2px; }
:root[data-theme="mizuki"] .hr98 { box-shadow: none; background: repeating-linear-gradient(90deg, var(--a) 0 6px, transparent 6px 12px); height: 2px; opacity: .8; }

.toolbar { display: flex; align-items: stretch; gap: 2px; padding: 2px; flex: none; flex-wrap: wrap; }
.tool {
  display: grid; justify-items: center; gap: 1px; min-width: 54px; padding: 3px 6px 2px;
  background: transparent; border: 0; box-shadow: none; color: var(--text); text-decoration: none;
  font-size: calc(var(--fs) - 3px); border-radius: var(--r-btn);
}
.tool:hover { box-shadow: var(--raised); }
.tool:active { box-shadow: var(--pressed); }
.tool .ico { width: 22px; height: 22px; }
.tool[disabled] { opacity: .45; pointer-events: none; }
.tsep { width: 2px; margin: 2px 4px; box-shadow: inset 1px 0 var(--sd), inset -1px 0 var(--hl2); }

.addr { display: flex; align-items: center; gap: 6px; padding: 2px 4px 4px; flex: none; font-size: calc(var(--fs) - 2px); }
.addr .field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: var(--bg); box-shadow: var(--sunken); border-radius: var(--r-field); }
.addr .field span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

input[type=text], input[type=password], input[type=search], input[type=datetime-local], select, textarea {
  background: var(--bg); color: var(--text); border: 0; border-radius: var(--r-field);
  padding: 5px 7px; min-width: 0; box-shadow: var(--sunken);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
input:focus, textarea:focus, select:focus { outline: 1px dotted var(--ink); outline-offset: -4px; }
select {
  appearance: none; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2 4h8L6 9z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
}
textarea { resize: vertical; font-family: var(--f-mono); font-size: 14px; line-height: 1.5; }
label.lbl { display: block; font-size: calc(var(--fs) - 2px); margin: 0 0 3px; }
input[type=checkbox], input[type=radio] { accent-color: var(--deep); width: 14px; height: 14px; margin: 0 6px 0 0; vertical-align: -2px; }
:root[data-theme="hacker"] input[type=checkbox], :root[data-theme="hacker"] input[type=radio] { accent-color: #39ff6a; }

.btn98 {
  min-width: 78px; min-height: 28px; padding: 3px 14px; background: var(--face); border: 0; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
  font-size: calc(var(--fs) - 1px); border-radius: var(--r-btn);
}
.btn98:active { box-shadow: var(--pressed); padding: 4px 13px 2px 15px; }
.btn98.def { box-shadow: 0 0 0 1px var(--bk), var(--raised); font-weight: 700; }
.btn98.pink { background: var(--accent-grad); color: var(--on-a); font-weight: 700; }
.btn98.sm { min-width: 0; min-height: 24px; padding: 1px 10px; font-size: calc(var(--fs) - 2px); }

.statusbar { display: flex; gap: 3px; padding: 3px 0 0; flex: none; font-size: calc(var(--fs) - 2px); }
.statusbar > span { padding: 2px 8px; box-shadow: inset 1px 1px var(--sd), inset -1px -1px var(--hl2); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; border-radius: var(--r-field); }
:root[data-theme="hacker"] .statusbar > span, :root[data-theme="mizuki"] .statusbar > span, :root[data-theme="kangel"] .statusbar > span { box-shadow: var(--sunken); }
.statusbar > span:first-child { flex: 1; }

/* ---- explorer ---- */
.explorer { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 3px; min-height: 0; flex: 1; }
.viewpane { background: var(--panel); overflow-y: auto; min-height: 0; border-radius: var(--r-field); }
.banner { padding: 16px 14px 14px; background: var(--banner); border-bottom: 3px solid var(--bline); position: relative; overflow: hidden; }
.banner::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(-45deg, var(--a) 0 2px, transparent 2px 6px); opacity: .55; }
.banner h1 { margin: 0; font: var(--fw-d) 36px/.95 var(--f-display); color: var(--banner-fg); text-shadow: var(--hshadow); letter-spacing: .01em; }
.banner h1 i { font-style: normal; color: var(--b); }
.banner p { margin: 8px 0; font-size: calc(var(--fs) - 1px); color: var(--banner-text, var(--text)); }
:root[data-theme="win98"] .banner { --banner-text: #fff; }
:root[data-theme="win98"] .banner h1 i { color: #c0c0c0; }
:root[data-theme="mizuki"] .banner h1 i { color: #884499; }
.pane-sec { padding: 12px 14px; font-size: calc(var(--fs) - 1px); border-bottom: 1px solid var(--sd); }
.pane-sec h3 { margin: 0 0 8px; font: 700 12px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.pane-sec h3::after { content: ''; flex: 1; height: 7px; background: repeating-linear-gradient(-45deg, var(--ink) 0 2px, transparent 2px 6px); opacity: .5; }
.pane-sec label { display: block; padding: 2px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { background: color-mix(in srgb, var(--a) 16%, var(--panel)); border: 0; border-left: 4px solid var(--b); padding: 1px 9px 1px 7px; font-size: calc(var(--fs) - 2px); color: var(--text); clip-path: var(--chip-clip); border-radius: var(--r-pill); }
:root[data-theme="mizuki"] .chip { border-left: 0; padding: 1px 10px; }
:root[data-theme="kangel"] .chip, :root[data-theme="kangel"] .pill { border: 2px solid var(--bk); background: #fff; }
:root[data-theme="kangel"] .pill { padding: 0 8px; }
:root[data-theme="hacker"] .chip, :root[data-theme="win98"] .chip { border: 1px solid var(--sd); background: var(--panel); }
.chip[aria-pressed=true] { background: var(--sel); color: var(--sel-text); font-weight: 700; }
.preview { min-height: 120px; }
.preview h4 { margin: 0 0 4px; font: var(--fw-d) 17px/1.15 var(--f-display); color: var(--hd); text-shadow: var(--hshadow); }
.preview p { margin: 0 0 6px; font-size: calc(var(--fs) - 1px); }
.preview .meta { color: var(--muted); font-size: calc(var(--fs) - 2px); }
.pane-form { display: flex; gap: 4px; }
.pane-form input { flex: 1; width: 100%; }

.list98 { background: var(--bg); min-height: 0; overflow: auto; display: flex; flex-direction: column; border-radius: var(--r-field); }
.cols, .row { display: grid; grid-template-columns: minmax(0, 1fr) 118px 96px 84px; align-items: center; }
.colh { background: var(--face); padding: 3px 8px; font-size: calc(var(--fs) - 2px); border: 0; text-align: left; color: var(--text); }
.cols { position: sticky; top: 0; z-index: 2; }
.row { padding: 0 2px; min-height: var(--row-h); text-decoration: none; color: var(--text); border: 1px solid transparent; user-select: none; }
.row > * { padding: 3px 8px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.row .nm { font-weight: 500; }
.row .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row:hover .nm span, .row:focus .nm span, .row.sel .nm span { background: var(--sel); color: var(--sel-text); outline: 1px dotted var(--sel-text); outline-offset: 1px; padding: 0 4px; margin: 0 -4px; border-radius: 4px; }
.row:focus { outline: 0; }
.row .mut { color: var(--muted); font-size: calc(var(--fs) - 2px); }
.acc-lock { color: var(--ink) !important; }
.ctr { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.ctr b { background: var(--ctr-bg); color: var(--ctr-fg); font: 700 14px/1 var(--f-mono); padding: 3px 4px; letter-spacing: .05em; box-shadow: inset 1px 1px var(--sd); }

/* ---- reader ---- */
.reader { background: var(--bg); overflow-y: auto; min-height: 0; flex: 1; border-radius: var(--r-field); }
.article { max-width: 700px; margin: 0 auto; padding: 28px 28px 48px; font: 400 17.5px/1.6 var(--f-body); }
.article .kicker { font: 700 12px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; }
.article h1 { margin: 0 0 10px; font: var(--fw-d) clamp(28px, 5.2vw, 46px)/1.02 var(--f-display); color: var(--hd); text-shadow: var(--hshadow); overflow-wrap: anywhere; }
.article .byline { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font: 500 14px var(--f-ui); margin: 0 0 22px; padding-bottom: 12px; border-bottom: 8px solid transparent; border-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ink) 60%, transparent) 0 2px, transparent 2px 6px) 8; }
.article h2 { margin: 30px 0 8px; font: 700 13px/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 12px; }
.article h2::after { content: ''; flex: 1; height: 8px; background: repeating-linear-gradient(-45deg, var(--ink) 0 2px, transparent 2px 6px); opacity: .6; }
.article p { margin: 0 0 16px; }
.article p.lead { font-size: 1.12em; }
.article ul { padding-left: 22px; margin: 0 0 16px; }
.article li { margin-bottom: 4px; }
.article code { font: 500 .88em var(--f-mono); background: var(--panel); padding: 1px 5px; color: var(--ink); border-radius: 4px; }
.article pre { margin: 0 0 18px; padding: 12px 14px; background: var(--code-bg); color: var(--code-fg); font: 14px/1.5 var(--f-mono); overflow-x: auto; box-shadow: var(--sunken); border-radius: var(--r-field); }
.article pre em { color: var(--b); font-style: normal; }
:root[data-theme="win98"] .article pre em { color: #fff; }
.article pre i { color: var(--muted); font-style: normal; }
.note { display: flex; gap: 14px; padding: 12px 14px; margin: 0 0 18px; background: var(--face); font: 400 15px/1.45 var(--f-body); border-radius: var(--r-field); box-shadow: var(--raised); }
.note .ico { width: 28px; height: 28px; margin-top: 2px; }
.shot { margin: 0 0 20px; }
.shot .frame { aspect-ratio: 16/8; display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--panel) 0 10px, var(--face) 10px 20px); color: var(--muted); font: 500 14px var(--f-ui); border-radius: var(--r-field); }
.shot figcaption { margin-top: 6px; font: 400 14px var(--f-ui); color: var(--muted); }
.art-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-top: 34px; padding-top: 16px; border-top: 2px solid var(--sd); font: 500 14px var(--f-ui); }
.art-foot button { background: none; border: 0; color: var(--link); text-decoration: underline; padding: 0; }

/* ---- dialogs ---- */
.dlg-body { padding: 14px 14px 10px; display: grid; gap: 12px; }
.dlg-row { display: flex; gap: 14px; align-items: flex-start; }
.dlg-row .ico { width: 32px; height: 32px; margin-top: 2px; }
.dlg-row p { margin: 0; font-size: calc(var(--fs) - .5px); }
.dlg-btns { display: flex; justify-content: flex-end; gap: 6px; padding: 4px 14px 12px; }
.codebox input { text-align: center; font: 700 17px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; width: 100%; }
.fine { font-size: calc(var(--fs) - 2.5px); color: var(--muted); margin: 0; }

/* ---- tabs ---- */
.tabs { display: flex; padding: 0 4px; flex: none; position: relative; z-index: 1; margin-bottom: -2px; overflow-x: auto; }
.tab { background: var(--face); border: 0; padding: 5px 14px 4px; margin-top: 3px; margin-right: 1px; font-size: calc(var(--fs) - 1px); color: var(--text); white-space: nowrap; box-shadow: inset -1px 0 var(--bk), inset 1px 1px var(--hl), inset -2px 0 var(--sd), inset 2px 2px var(--hl2); display: flex; gap: 6px; align-items: center; border-radius: var(--r-btn) var(--r-btn) 0 0; }
:root[data-theme="hacker"] .tab, :root[data-theme="mizuki"] .tab, :root[data-theme="kangel"] .tab { box-shadow: var(--raised); }
.tab[aria-selected=true] { margin-top: 0; padding-top: 8px; z-index: 2; position: relative; font-weight: 700; margin-bottom: -2px; padding-bottom: 6px; }
.tabpanel { background: var(--face); padding: 12px; flex: 1; min-height: 0; overflow: auto; box-shadow: var(--raised); border-radius: var(--r-field); }
.tabpanel[hidden] { display: none; }
.panelwrap { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 4px; }
.group { margin: 0 0 12px; padding: 14px 12px 12px; border: 0; min-width: 0; box-shadow: inset 0 0 0 1px var(--hl2), 1px 1px 0 1px var(--sd); position: relative; border-radius: var(--r-field); }
:root[data-theme="win98"] .group { box-shadow: inset 1px 1px var(--sd), inset -1px -1px var(--hl), 1px 1px 0 var(--hl); }
.group legend { position: absolute; top: -9px; left: 10px; padding: 0 6px; background: var(--face); font-size: calc(var(--fs) - 2px); color: var(--ink); font-weight: 700; border-radius: 6px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.span2 { grid-column: 1 / -1; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.tile { padding: 8px 12px 9px; background: var(--bg); box-shadow: var(--sunken); border-radius: var(--r-field); }
.tile b { display: block; font: var(--fw-d) 26px/1.1 var(--f-display); color: var(--hd); text-shadow: var(--hshadow); }
.tile span { font-size: calc(var(--fs) - 2.5px); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.pill { display: inline-block; padding: 0 12px 0 8px; font-size: calc(var(--fs) - 2.5px); font-weight: 700; background: color-mix(in srgb, var(--b) 22%, var(--bg)); color: var(--text); border-left: 4px solid var(--b); clip-path: var(--chip-clip); white-space: nowrap; border-radius: var(--r-pill); }
:root[data-theme="mizuki"] .pill { border-left: 0; padding: 0 10px; }
:root[data-theme="kangel"] .pill.pw { background: #ffc2e0; }
:root[data-theme="kangel"] .pill.ot { background: #c4ecff; }
:root[data-theme="kangel"] .pill.un, :root[data-theme="kangel"] .pill.exp, :root[data-theme="kangel"] .pill.dr { background: var(--panel); }
:root[data-theme="hacker"] .pill, :root[data-theme="win98"] .pill { border: 1px solid var(--sd); background: var(--panel); }
.pill.pw { border-left-color: var(--a); background: color-mix(in srgb, var(--a) 24%, var(--bg)); }
.pill.ot { border-left-color: var(--text); }
.pill.un, .pill.exp, .pill.dr { border-left-color: var(--muted); background: var(--panel); color: var(--muted); }
.pill.dr { font-style: italic; }
.pill.used { border-left-color: var(--a); }
table.data { width: 100%; border-collapse: collapse; font-size: calc(var(--fs) - 1.5px); }
table.data th { background: var(--face); text-align: left; font-weight: 500; padding: 3px 8px; white-space: nowrap; box-shadow: var(--raised); position: sticky; top: 0; }
table.data td { padding: 5px 8px; white-space: nowrap; border-bottom: 1px solid var(--panel); }
table.data tbody tr:hover td { background: var(--sel); color: var(--sel-text); }
.mono, table.data td.mono { font-family: var(--f-mono); font-size: 13px; }
.tblwrap { background: var(--bg); overflow: auto; max-height: 100%; box-shadow: var(--sunken); border-radius: var(--r-field); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.mdprev { background: var(--bg); padding: 10px 14px; min-height: 100px; font: 400 15px/1.5 var(--f-body); overflow: auto; box-shadow: var(--sunken); border-radius: var(--r-field); }
.mdprev h3 { font: var(--fw-d) 20px var(--f-display); color: var(--hd); text-shadow: var(--hshadow); margin: 0 0 6px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dotted var(--sd); font-size: calc(var(--fs) - 1px); }

/* ---- settings: theme cards ---- */
.themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.themecard { display: grid; gap: 6px; padding: 8px; cursor: pointer; position: relative; border-radius: var(--r-field); box-shadow: var(--raised); background: var(--face); }
.themecard input { position: absolute; opacity: 0; pointer-events: none; }
.themecard b { font-size: calc(var(--fs) - 1px); display: flex; align-items: center; gap: 6px; }
.themecard small { color: var(--muted); font-size: calc(var(--fs) - 3px); line-height: 1.3; }
.themecard:has(input:checked) { box-shadow: 0 0 0 3px var(--sel), var(--raised); }
.themecard:has(input:checked) b::after { content: '\2713'; margin-left: auto; color: var(--ink); }
.themecard:has(input:focus-visible) { outline: 1px dotted var(--text); outline-offset: 4px; }
.tp { display: block; height: 92px; overflow: hidden; position: relative; background: var(--desk); border-radius: min(var(--r-field), 10px); font-family: var(--f-ui); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.tp-win { position: absolute; left: 14%; top: 14%; right: 10%; bottom: -8px; background: var(--face); padding: 2px; border-radius: min(var(--r-win), 12px) min(var(--r-win), 12px) 0 0; box-shadow: var(--tp-ring, 0 0 0 1px var(--bk)); }
.tp-title { display: block; background: var(--title-grad); color: var(--title-fg); font: 700 10px/16px var(--f-ui); padding: 0 6px; border-radius: min(var(--r-win), 10px) min(var(--r-win), 10px) 0 0; }
.tp-body { display: grid; gap: 4px; padding: 7px 6px; background: var(--bg); margin-top: 2px; height: 100%; }
.tp-body i { display: block; height: 4px; background: var(--ink); opacity: .7; border-radius: 2px; }
.tp-body i:nth-child(2) { width: 70%; background: var(--text); opacity: .5; }
.tp-body i:nth-child(3) { width: 45%; background: var(--sel); opacity: .9; }
.tp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; background: var(--face); box-shadow: 0 -1px 0 var(--hl); }
.tp-bar::before { content: ''; position: absolute; left: 3px; top: 2px; width: 14px; height: 5px; background: var(--accent-grad); }

/* ================= TASKBAR / MENU ================= */
.taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--tb-h); background: var(--face); display: flex; align-items: center; gap: 4px; padding: 4px; z-index: 1000; }
.start { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px 0 6px; background: var(--face); border: 0; font: 700 calc(var(--fs)) var(--f-ui); color: var(--text); box-shadow: var(--raised); border-radius: var(--r-btn); }
.start b { font: var(--fw-d) 13px/1 var(--f-display); background: var(--accent-grad); color: var(--on-a); padding: 4px 5px 3px; letter-spacing: -.02em; border-radius: min(var(--r-btn), 6px); }
.start[aria-expanded=true] { box-shadow: 0 0 0 1px var(--bk), var(--pressed); }
.tb-sep { width: 2px; height: 100%; box-shadow: inset 1px 0 var(--sd), inset -1px 0 var(--hl2); margin: 0 2px; }
.tasks { display: flex; gap: 3px; flex: 1; min-width: 0; height: 100%; }
.task { display: flex; align-items: center; gap: 6px; height: 100%; min-width: 0; width: 180px; flex: 0 1 180px; padding: 0 8px; background: var(--face); border: 0; font-size: calc(var(--fs) - 1.5px); color: var(--text); text-align: left; box-shadow: var(--raised); border-radius: var(--r-btn); }
.task span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task[aria-pressed=true] { font-weight: 700; background: repeating-conic-gradient(var(--face) 0 25%, var(--dither) 0 50%) 0 0 / 2px 2px; box-shadow: var(--pressed); }
:root[data-theme="mizuki"] .task[aria-pressed=true], :root[data-theme="kangel"] .task[aria-pressed=true] { background: var(--a); color: var(--on-a); }
:root[data-theme="hacker"] .task[aria-pressed=true] { background: var(--sel); color: var(--sel-text); }
.tray { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 10px; font-size: calc(var(--fs) - 1.5px); border-radius: var(--r-btn); }
.tray button { background: none; border: 0; padding: 0; display: grid; }
.menu98 { position: fixed; left: 4px; bottom: calc(var(--tb-h) - 2px); display: flex; background: var(--face); padding: 3px; z-index: 1001; min-width: 280px; filter: drop-shadow(4px 5px 0 rgba(0,0,0,.4)); border-radius: var(--r-win); }
:root[data-theme="mizuki"] .menu98 { filter: drop-shadow(0 6px 12px rgba(136,68,153,.3)); }
:root[data-theme="win98"] .menu98 { filter: none; }
.menu98[hidden] { display: none; }
.menu98 .side { writing-mode: vertical-rl; transform: rotate(180deg); background: var(--side-grad); padding: 10px 6px; font: var(--fw-d) 22px/1 var(--f-display); color: var(--side-fg); letter-spacing: .02em; border-radius: min(var(--r-win), 12px); }
.menu98 .side i { font-style: normal; color: var(--b); }
:root[data-theme="win98"] .menu98 .side i { color: #c0c0c0; }
.menu98 ul { list-style: none; margin: 0; padding: 2px 0 2px 2px; flex: 1; }
.menu98 a, .menu98 button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 14px 7px 10px; color: var(--text); text-decoration: none; font-size: var(--fs); background: none; border: 0; text-align: left; border-radius: var(--r-field); }
.menu98 .ico { width: 24px; height: 24px; }
.menu98 a:hover, .menu98 a:focus, .menu98 button:hover, .menu98 button:focus { background: var(--sel); color: var(--sel-text); outline: 0; }
.menu98 hr { border: 0; height: 2px; margin: 3px 4px; box-shadow: inset 0 1px var(--sd), inset 0 -1px var(--hl2); }

/* ================= PER-THEME TWEAKS ================= */
/* hacker */
:root[data-theme="hacker"] .titlebar .t::before { content: '> '; }
:root[data-theme="hacker"] .win.active .titlebar .t::after { content: '_'; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
:root[data-theme="hacker"] .tctl { gap: 4px; flex: none; }
:root[data-theme="hacker"] .tctl button { background: none; box-shadow: none; width: auto; height: 18px; padding: 0 1px; color: var(--title-fg); display: flex; align-items: center; white-space: nowrap; }
:root[data-theme="hacker"] .tctl .gap { display: none; }
:root[data-theme="hacker"] .tctl button::before { content: '['; } :root[data-theme="hacker"] .tctl button::after { content: ']'; }
:root[data-theme="hacker"] .tctl button:hover { background: var(--sel); color: var(--sel-text); }
:root[data-theme="hacker"] .banner h1 { font-size: 52px; line-height: .85; }
:root[data-theme="hacker"] .article h1 { font-size: clamp(38px, 7vw, 64px); }
:root[data-theme="hacker"] .tile b { font-size: 34px; }
:root[data-theme="hacker"] .preview h4 { font-size: 24px; }
:root[data-theme="hacker"] .mdprev h3 { font-size: 26px; }
:root[data-theme="hacker"] .article { font-size: 15.5px; }
:root[data-theme="hacker"] .article .byline { border-image: none; border-bottom: 1px dashed var(--sd); }
:root[data-theme="hacker"] .btn98.pink, :root[data-theme="hacker"] .start b { color: #000; }
:root[data-theme="hacker"] .tab[aria-selected=true] { background: var(--sel); color: var(--sel-text); }
:root[data-theme="hacker"] .dicon .ico, :root[data-theme="hacker"] .ico { filter: none; }
:root[data-theme="hacker"] .ghost { font-size: clamp(120px, 24vw, 300px); }
:root[data-theme="hacker"] .win { backdrop-filter: none; }
:root[data-theme="hacker"]:not([data-fx="off"]) body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 2000;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55));
}
/* mizuki */
:root[data-theme="mizuki"]:not([data-fx="off"]) .sparkles { display: block; }
:root[data-theme="mizuki"] .titlebar { font-weight: 700; padding-left: 8px; }
:root[data-theme="mizuki"] .titlebar .t::after { content: ' \2726'; color: #884499; }
:root[data-theme="mizuki"] .tctl button { width: 22px; height: 20px; border-radius: 50%; color: #4a2c4f; }
:root[data-theme="mizuki"] .start b { font-size: 12px; }
:root[data-theme="mizuki"] .start { background: var(--accent-grad); color: var(--on-a); }
:root[data-theme="mizuki"] .start b { background: #fff; color: #884499; }
:root[data-theme="mizuki"] .banner h1 { text-shadow: .05em .05em 0 #884499; }
:root[data-theme="mizuki"] .article h1 { -webkit-text-stroke: 0; }
:root[data-theme="mizuki"] .ghost { opacity: .9; }
:root[data-theme="mizuki"] .row:hover .nm span, :root[data-theme="mizuki"] .row.sel .nm span { border-radius: 999px; padding: 1px 8px; margin: 0 -8px; }
:root[data-theme="mizuki"] .menu98 a:hover, :root[data-theme="mizuki"] .menu98 button:hover { border-radius: 999px; }
:root[data-theme="mizuki"] .group legend { background: var(--face); }
:root[data-theme="mizuki"] .tp-win { --tp-ring: 0 0 0 1px #d9a5c8; }
/* kangel */
:root[data-theme="kangel"]:not([data-fx="off"]) .sparkles { display: block; }
:root[data-theme="kangel"] .sparkles span { text-shadow: 1px 1px 0 rgba(43,27,61,.55); animation-name: bob; animation-duration: 3.8s; }
:root[data-theme="kangel"] .sparkles span:nth-child(4n+1) { color: #ff5fae; }
:root[data-theme="kangel"] .sparkles span:nth-child(4n+2) { color: #fff; }
:root[data-theme="kangel"] .sparkles span:nth-child(4n+3) { color: #6cc9fa; }
:root[data-theme="kangel"] .sparkles span:nth-child(4n) { color: #fff; }
@keyframes bob { 0%, 100% { opacity: .75; transform: translateY(0) rotate(-8deg); } 50% { opacity: 1; transform: translateY(-14px) rotate(8deg); } }
:root[data-theme="kangel"] .titlebar { font-weight: 700; padding-left: 8px; image-rendering: pixelated; }
:root[data-theme="kangel"] .titlebar .t::after { content: ' \2661'; color: #e0278a; }
:root[data-theme="kangel"] .tctl button { width: 22px; height: 20px; color: var(--bk); background: #fff; }
:root[data-theme="kangel"] .tctl button:hover { background: #ffe3f1; }
:root[data-theme="kangel"] .start { background: var(--accent-grad); color: var(--on-a); }
:root[data-theme="kangel"] .start b { background: #fff; color: #e0278a; font-size: 12px; box-shadow: 0 0 0 2px var(--bk); }
:root[data-theme="kangel"] .banner h1 { letter-spacing: .02em; }
:root[data-theme="kangel"] .banner h1 i { color: #33104a; }
:root[data-theme="kangel"] .banner::after { background: repeating-linear-gradient(90deg, var(--bk) 0 4px, transparent 4px 8px); height: 4px; opacity: .35; }
:root[data-theme="kangel"] .pane-sec h3::after, :root[data-theme="kangel"] .article h2::after { background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 8px); height: 4px; }
:root[data-theme="kangel"] .article .byline { border-image: none; border-bottom: 3px dotted var(--a); }
:root[data-theme="kangel"] .article code { border-radius: 0; background: #fff; box-shadow: 0 0 0 1px var(--sd); }
:root[data-theme="kangel"] .article h1 { font-size: clamp(30px, 5.4vw, 50px); }
:root[data-theme="kangel"] .article blockquote, :root[data-theme="kangel"] .note { background: #c4ecff; }
:root[data-theme="kangel"] .row:hover .nm span, :root[data-theme="kangel"] .row.sel .nm span { outline-offset: 0; }
:root[data-theme="kangel"] .menu98 { filter: drop-shadow(4px 4px 0 rgba(224,39,138,.5)); }
:root[data-theme="kangel"] .menu98 .side i { color: #33104a; }
:root[data-theme="kangel"] .themecard:has(input:checked) { box-shadow: 0 0 0 3px var(--sel), var(--raised); }
:root[data-theme="kangel"] .tp-win { --tp-ring: 0 0 0 2px #2b1b3d; }
:root[data-theme="kangel"] .sticky { box-shadow: 3px 3px 0 var(--bk); border: 2px solid var(--bk); transform: rotate(-2deg); }
:root[data-theme="kangel"] .ghost { -webkit-text-stroke-width: 3px; opacity: .95; }
:root[data-theme="kangel"] .dicon .ico { filter: drop-shadow(2px 2px 0 rgba(43,27,61,.6)); }
:root[data-theme="kangel"] .tab[aria-selected=true] { background: #fff; }
/* win98 */
:root[data-theme="win98"] .ghost, :root[data-theme="win98"] .sparkles { display: none; }
:root[data-theme="win98"] .banner::after { opacity: .0; }
:root[data-theme="win98"] .sticky { box-shadow: 1px 1px 0 #000; border: 1px solid #000; transform: none; }
:root[data-theme="win98"] .start b { font-size: 0; width: 16px; height: 14px; padding: 0; background: conic-gradient(#e03030 0 25%, #20a020 0 50%, #2040e0 0 75%, #f0c020 0); }
:root[data-theme="win98"] .btn98.pink { font-weight: 400; }
:root[data-theme="win98"] .article h1, :root[data-theme="win98"] .tile b, :root[data-theme="win98"] .banner h1 { letter-spacing: 0; }
:root[data-theme="win98"] .banner h1 { font-size: 30px; }
:root[data-theme="win98"] .article h1 { font-size: clamp(26px, 4.4vw, 38px); }
:root[data-theme="win98"] .article .byline { border-image: none; border-bottom: 2px groove #c0c0c0; }
:root[data-theme="win98"] .titlebar { font-size: 13px; }
:root[data-theme="win98"] .tp-bar::before { background: linear-gradient(90deg, #e03030 0 25%, #20a020 0 50%, #2040e0 0 75%, #f0c020 0); }

/* ================= WIN98-STYLE SCROLLBARS ================= */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: repeating-conic-gradient(var(--face) 0 25%, var(--dither) 0 50%) 0 0 / 2px 2px; }
::-webkit-scrollbar-thumb { background: var(--face); box-shadow: var(--raised); }
::-webkit-scrollbar-button { display: block; height: 16px; width: 16px; background: var(--face); box-shadow: var(--raised); }
::-webkit-scrollbar-corner { background: var(--face); }
:root[data-theme="hacker"] ::-webkit-scrollbar-button, :root[data-theme="mizuki"] ::-webkit-scrollbar-button { display: none; }
:root[data-theme="hacker"] ::-webkit-scrollbar, :root[data-theme="mizuki"] ::-webkit-scrollbar { width: 12px; height: 12px; }
:root[data-theme="hacker"] ::-webkit-scrollbar-track { background: #000; }
:root[data-theme="mizuki"] ::-webkit-scrollbar-track { background: #fdeaf4; border-radius: 99px; }
:root[data-theme="mizuki"] ::-webkit-scrollbar-thumb { background: var(--a); border-radius: 99px; box-shadow: inset 0 0 0 2px #fdeaf4; }

:root[data-theme="kangel"] ::-webkit-scrollbar { width: 14px; height: 14px; }
:root[data-theme="kangel"] ::-webkit-scrollbar-button { height: 14px; width: 14px; }
:root[data-theme="kangel"] ::-webkit-scrollbar-track { background: repeating-conic-gradient(#fff 0 25%, #ffdcee 0 50%) 0 0 / 4px 4px; box-shadow: inset 0 0 0 2px var(--bk); }
:root[data-theme="kangel"] ::-webkit-scrollbar-thumb { background: var(--a); box-shadow: var(--raised); }

/* ================= SMALL SCREENS ================= */
@media (max-width: 760px) {
  .win:not(.dialog) { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; max-width: none; max-height: none; filter: none; border-radius: 0; }
  .win:not(.dialog) .tctl .nomob, .grip { display: none; }
  .dicons, .sticky { display: none; }
  .win.dialog { max-width: calc(100% - 16px); }
  .explorer { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .viewpane { max-height: 200px; }
  .banner h1 { font-size: 30px; }
  .preview, .pane-sec.hidem { display: none; }
  .cols, .row { grid-template-columns: minmax(0, 1fr) 84px; }
  .cols > :nth-child(n+3), .row > :nth-child(n+3) { display: none; }
  .task { width: auto; flex: 1 1 0; }
  .tray #clock { display: none; }
  .grid2, .grid3, .split, .themes { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article { padding: 20px 16px 40px; font-size: 16.5px; }
  .toolbar .tool span { display: none; }
  .tool { min-width: 38px; }
  .statusbar > span:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ================= admin/editor extras ================= */
.err { color: var(--ink); font-weight: 700; display: block; min-height: 0; }
.err:empty { display: none; }
.article img { max-width: 100%; height: auto; display: block; border-radius: var(--r-field); }
.article h3 { margin: 22px 0 6px; font: 700 15px var(--f-ui); color: var(--ink); }
.article hr { border: 0; height: 2px; background: var(--sd); margin: 24px 0; }
.article a { color: var(--link); }
.article .note > div { min-width: 0; }
.mdprev.article { padding: 10px 14px; font-size: 15px; max-width: none; margin: 0; }
.mdprev.article h2 { margin-top: 16px; }
.pill.sched { border-left-color: var(--b); }
.hidden-input { display: none; }

.btn98[hidden], .tool[hidden], .menubar [hidden] { display: none !important; }
.titlebar, .grip { touch-action: none; }
:root[data-theme="mizuki"], .tp[data-theme="mizuki"] { --muted: #6b4a73; --title-fg-off: #7a5c82; }
@media print {
  body { overflow: visible; background: #fff; }
  .desktop > *:not(.win), .taskbar, .menu98, .ghost, .sparkles, .sticky, .dicons { display: none !important; }
  .win { position: static !important; display: none !important; filter: none; box-shadow: none; }
  .win.active { display: block !important; width: auto !important; height: auto !important; max-width: none; max-height: none; padding: 0; background: #fff; }
  .win.active .titlebar, .win.active .menubar, .win.active .toolbar, .win.active .hr98, .win.active .statusbar, .win.active .grip { display: none !important; }
  .desktop { position: static; background: #fff; }
  .win.active .wbody, .win.active .reader { display: block; overflow: visible; background: #fff; box-shadow: none; }
  .article { max-width: none; color: #000; }
  .article h1, .article h2, .article .kicker, .article a { color: #000; text-shadow: none; }
}