/* Tokens: the Escargot desktop. MSN 7.5 blues over a flat hill wallpaper; see docs/superpowers/notes/direction.md */
:root {
  --sky: #2b70c9;
  --ink: #0f1f3a;
  --muted: #44566f;
  --paper: #ffffff;
  --ice: #e3eefb;
  --ice-deep: #c9dcf5;
  --blue: #1f5fa8;
  --blue-deep: #123f7d;
  --go: #2b8226;
  --go-deep: #236b1f;
  --away: #b86e00;
  --balloon: #ffffe1;

  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --step-head: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --step-display: clamp(2.75rem, 1.4rem + 6vw, 6rem);

  --gutter: clamp(16px, 2.4vw, 40px);
  --taskbar: 52px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --win-shadow: 0 10px 28px rgba(10, 30, 70, 0.38);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, svg { display: block; max-width: 100%; }
html { scroll-padding-top: 16px; scrollbar-color: var(--blue) var(--ice); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  color: var(--ink);
  background: var(--sky);
  padding-bottom: var(--taskbar);
  font: 400 var(--step-body) / 1.55 "Fira Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Fixed layer rather than background-attachment, which iOS ignores: windows scroll over a still desktop. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url(assets/wallpaper.svg) center bottom / cover no-repeat; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

h1, h2, h3, .desk-head { font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: var(--step-head); }
h2 { font-size: var(--step-head); }
h3 { font-size: var(--step-lead); line-height: 1.15; }
p { text-wrap: pretty; }
a { color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { color: var(--blue-deep); }
strong, .strong { font-weight: 600; }
.tags, .role { font-size: var(--step-small); color: var(--muted); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 12px 16px; z-index: 60; }
.skip:focus { left: var(--gutter); }
.skip:hover { color: #fff; }

/* Window: the one component of the page */
.win { position: relative; display: flex; flex-direction: column; background: var(--blue); padding: 0 4px 4px; border-radius: 10px 10px 0 0; box-shadow: var(--win-shadow); min-width: 0; }
.win-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 4px 4px 4px 10px; color: #fff; font-weight: 600; font-size: 0.9375rem; background: linear-gradient(180deg, #1f65cc 14%, #1b58bb 62%, #2a6fd6 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35); border-radius: 8px 8px 0 0; margin-inline: -4px; user-select: none; }
.win-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); }
.win-body { background: var(--paper); flex: 1; min-width: 0; }
.ctls { display: flex; gap: 4px; flex: none; }
.ctl { position: relative; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 5px; background: linear-gradient(180deg, #5b9bf0, #2763cf); cursor: pointer; transition: filter 0.12s var(--ease), transform 0.08s var(--ease); }
.ctl:hover { filter: brightness(1.15); }
.ctl:active { transform: scale(0.92); }
.ctl:focus-visible { outline-color: #fff; }
.ctl::before, .ctl::after { content: ""; position: absolute; background: #fff; }
.ctl-min::before { left: 7px; right: 11px; bottom: 7px; height: 3px; }
.ctl-min::after { display: none; }
.is-min .ctl-min::before { left: 8px; right: 8px; top: 8px; bottom: auto; }
.ctl-x { background: linear-gradient(180deg, #ef8a6c, #cf3a1c); }
.ctl-x::before, .ctl-x::after { left: 6px; right: 6px; top: 12px; height: 4px; rotate: 45deg; }
.ctl-x::after { rotate: -45deg; }
.win.is-min > .win-body { display: none; }
.win.is-min { padding-bottom: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 1px solid #7f9dc4; border-radius: 5px; background: linear-gradient(180deg, #fff, #dbe7f7); color: var(--ink); font: 600 var(--step-body) / 1 "Fira Sans", system-ui, sans-serif; text-decoration: none; cursor: pointer; justify-self: start; transition: filter 0.12s var(--ease), transform 0.08s var(--ease); }
.btn:hover { filter: brightness(0.96); color: var(--ink); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-go { background: linear-gradient(180deg, var(--go) 45%, var(--go-deep)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3); border-color: var(--go-deep); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); }
.btn-go:hover { color: #fff; filter: brightness(1.08); }

.dp { width: 64px; height: 64px; flex: none; object-fit: cover; border: 3px solid var(--go); border-radius: 8px; background: var(--paper); }

/* Taskbar */
.taskbar { position: fixed; inset: auto 0 0; z-index: 40; height: var(--taskbar); display: flex; align-items: stretch; gap: 10px; background: linear-gradient(180deg, #3f83e0 0, #245ed0 10%, #1f55bf 85%, #1a49a8 100%); color: #fff; }
.start { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px 0 14px; color: #fff; font: italic 800 1.25rem / 1 "Fira Sans", system-ui, sans-serif; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); background: linear-gradient(180deg, var(--go) 40%, var(--go-deep)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35); border-radius: 0 16px 16px 0; transition: filter 0.12s var(--ease); }
.start:hover { color: #fff; filter: brightness(1.1); }
.start img { filter: brightness(0) invert(1); }
.taskbar nav { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; }
.taskbar nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 4px; color: #fff; font-size: 0.9375rem; font-weight: 600; text-decoration: none; background: #2f6ad0; transition: background 0.12s var(--ease); }
.taskbar nav a:hover { background: #2f6ad0; filter: brightness(1.1); color: #fff; }
.taskbar nav a[aria-current] { background: #1a4aa6; }
.taskbar :focus-visible { outline-color: #fff; outline-offset: -3px; }
.tray { display: flex; align-items: center; gap: 12px; padding: 0 20px 0 14px; font-size: 0.875rem; font-weight: 600; background: #1569b0; white-space: nowrap; }
#clock:empty { display: none; }

/* The snail from the signature crawls along the taskbar as the page scrolls. */
.crawler { position: fixed; left: 8px; bottom: calc(var(--taskbar) - 12px); z-index: 41; width: 72px; aspect-ratio: 1320 / 700; pointer-events: none; background: url(assets/art/snail.svg) center / contain no-repeat; filter: invert(1); }
.crawler.on-light { filter: none; }
@keyframes crawl { to { translate: calc(100vw - 88px) 0; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) { .crawler { animation: crawl linear both; animation-timeline: scroll(root); } }
}

/* Sections sit straight on the wallpaper */
.sec { max-width: 1480px; margin-inline: auto; padding: clamp(72px, 9vw, 150px) var(--gutter) 0; }
.desk-head { color: #fff; font-size: var(--step-display); font-style: italic; text-shadow: 0 2px 8px rgba(10, 30, 70, 0.45); }
.desk-sub { color: #fff; font-size: var(--step-lead); line-height: 1.3; margin-top: 12px; text-shadow: 0 1px 4px rgba(10, 30, 70, 0.5); }

/* First screen: overlapping windows */
.desk { position: relative; min-height: calc(100svh - var(--taskbar)); padding: var(--gutter); display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.desk::after { content: none; position: absolute; left: 11%; bottom: 3%; width: 34%; aspect-ratio: 2560 / 860; background: url(assets/art/signature.svg) center / contain no-repeat; filter: invert(1); pointer-events: none; }
.icons { display: none; }
.win-hero .win-body { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; align-items: flex-start; }
.hero-sub { margin-top: 18px; font-size: var(--step-lead); line-height: 1.3; text-wrap: balance; }
.win-hero .btn { margin-top: 26px; min-height: 56px; padding: 0 28px; }
.paint { background: #8a97a8; padding: 8px 8px 44px; position: relative; }
.paint img { width: 100%; height: auto; background: var(--paper); }
/* Paint's colour box: stripes with hard stops, no markup. */
.paint::after { content: ""; position: absolute; left: 8px; bottom: 10px; width: min(300px, 70%); height: 24px; background: linear-gradient(90deg, #0f1f3a 0 12.5%, #fff 0 25%, #cf3a1c 0 37.5%, #e8b23a 0 50%, #2f8a2a 0 62.5%, #17a8c9 0 75%, #1f5fa8 0 87.5%, #a44bc0 0); }

.win-list .win-body { background: var(--ice); padding: 12px; }
.win-theme { display: none; }
.js .win-theme { display: flex; }
.win-theme .win-body { background: var(--ice); padding: 10px 14px 14px; }
.win-theme .kind span { padding: 0 18px; }
.me { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; }
.me p { line-height: 1.25; }
.me strong { display: block; font-size: 1.125rem; }
.on { color: var(--go-deep); font-size: 0.9375rem; font-weight: 600; }
.group { font-size: 0.9375rem; font-weight: 600; color: var(--blue-deep); padding: 6px 4px 2px; }
.buddies { list-style: none; padding: 0; }
.buddies a { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px; color: var(--ink); font-weight: 600; font-size: 1rem; text-decoration: none; border-radius: 4px; transition: background 0.12s var(--ease); }
.buddies a:hover { background: var(--ice-deep); color: var(--ink); }
.buddies span { margin-left: auto; color: var(--muted); font-size: var(--step-small); font-weight: 400; }
.dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: #3fae35; }
.dot-away { background: #e89a1c; }

/* Notepad windows */
.win-note .win-body { padding: clamp(22px, 3.2vw, 48px); }
.win-note h2 { margin-bottom: 24px; }
.win-note p + p { margin-top: 0.95em; }
.intro, .about { display: grid; gap: 16px; }
.signoff { margin-top: 36px; }
.signoff img { width: min(320px, 80%); height: auto; }

/* Work */
.projects { display: grid; gap: 16px; margin-top: 40px; }
.project-text { display: grid; gap: 10px; justify-items: start; padding: clamp(18px, 2.2vw, 28px); background: var(--ice); }
.project-text a { overflow-wrap: anywhere; }
.fragment { overflow: hidden; }
.fragment img { width: 100%; height: auto; }
.p-kp .fragment, .p-menu .fragment { background: #05070d; }
.frag-msn { background: var(--paper); padding: 16px; display: grid; gap: 8px; align-content: start; font-size: 1rem; line-height: 1.4; }
.msn-status { color: var(--go-deep); font-weight: 600; }
.msg { padding: 8px 12px; max-width: 80%; border-radius: 4px; }
.msg-in { background: #e7eef7; justify-self: start; }
.msg-out { background: var(--ice-deep); justify-self: end; }
.frag-term { background: #0d1117; color: #e6e8ee; padding: 20px; }
pre { font: 0.9375rem / 1.6 ui-monospace, "DejaVu Sans Mono", monospace; white-space: pre-wrap; } /* taste-skill-ignore: literal code in a real <pre> */
.balloon { position: relative; background: var(--balloon); color: var(--ink); padding: 16px 18px; border-radius: 8px; box-shadow: var(--win-shadow); }

/* Art */
.win-files { margin-top: 36px; }
.files { list-style: none; padding: clamp(10px, 1.6vw, 20px); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.4vw, 18px); background: var(--paper); }
.files a { display: flex; flex-direction: column; gap: 6px; height: 100%; color: var(--ink); text-decoration: none; font-size: var(--step-small); border-radius: 3px; }
.files img { flex: 1; min-height: 0; width: 100%; object-fit: cover; background: var(--paper); box-shadow: 0 0 0 2px var(--ice-deep); transition: box-shadow 0.12s var(--ease), scale 0.3s var(--ease); }
.files a:hover img { box-shadow: 0 0 0 4px var(--blue); }
.files span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 2px; }
.files a:hover span { background: var(--blue); color: #fff; }
.f-smoke { grid-column: 1 / -1; }
.f-smoke img { aspect-ratio: 2 / 1; object-position: 50% 28%; }

/* Likes */
.likes-grid { display: grid; gap: 16px; margin-top: 36px; }
.win-faves .win-body { padding: clamp(18px, 2.4vw, 32px); }
.win-faves h3:not(:first-child) { margin-top: 24px; }
.win-faves p { margin-top: 8px; }
.shelf { list-style: none; padding: 0; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 12px; }
.shelf li { width: min-content; font-size: var(--step-small); line-height: 1.25; }
.shelf img { display: block; height: clamp(112px, 8.4vw, 146px); width: auto; max-width: none; margin-bottom: 6px; box-shadow: 0 0 0 2px var(--ice-deep); }
.win-abyss .win-body { display: flex; flex-direction: column; gap: 14px; padding: clamp(14px, 1.6vw, 20px); }
.win-abyss img { width: 100%; height: auto; box-shadow: 0 0 0 2px var(--ice-deep); }
.win-abyss p { margin-top: 6px; }
.likes-note { margin-top: 14px; color: #fff; font-size: var(--step-small); }
.win-rice img { width: 100%; height: auto; }
.win-play .win-body { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-content: center; background: #0a0e18; color: #7dff8a; padding: 18px; overflow-wrap: anywhere; }
/* Only the label turns, at 33 rpm: on a real record the shine stays put and the grooves look still. */
.vinyl { grid-row: span 2; align-self: center; display: grid; place-items: center; width: 64px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 45deg, transparent 0 12%, rgba(255, 255, 255, 0.2) 18%, transparent 24% 62%, rgba(255, 255, 255, 0.2) 68%, transparent 74%), repeating-radial-gradient(#161b28 0 1px, #232a3a 1px 3px); box-shadow: 0 0 0 1px #3a4358; }
.vinyl::before { content: ""; width: 38%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(#0a0e18 0 12%, transparent 13%), conic-gradient(#7dff8a 0 50%, #2b8226 0); }
@keyframes spin { to { rotate: 1turn; } }
.anim .is-live .vinyl::before { animation: spin 1.8s linear infinite; }
.track { font-size: var(--step-lead); font-weight: 600; line-height: 1.2; }
.artist { color: #bfe9c4; }
.win-take .win-body { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--ice); font-weight: 600; line-height: 1.35; }
.win-take svg { flex: none; }

/* Commissions */
.comm-grid { display: grid; gap: 16px; margin-top: 36px; align-items: start; }
.status strong { font-weight: 600; }
.slots { display: flex; gap: 4px; margin-top: 10px; padding: 3px; max-width: 320px; box-shadow: inset 0 0 0 2px var(--ice-deep); border-radius: 4px; }
.slots i { flex: 1; height: 22px; background: #3fae35; }
.slots .off { background: var(--ice); }
.win-note .slots + p { margin-top: 1.1em; }
.win-chat { display: none; }
.js .win-chat { display: flex; }
.win-chat .win-body { background: var(--ice); }
.chat-to { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--ice-deep); }
.chat-to p { flex: 1; min-width: 12ch; }
.chat-to .btn { min-height: 44px; }
.brief { display: grid; gap: 18px; padding: clamp(16px, 2.2vw, 26px); }
.kind { border: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kind legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.kind label { position: relative; }
.kind input { position: absolute; opacity: 0; inset: 0; }
.kind span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; border: 1px solid #7f9dc4; border-radius: 5px; background: var(--paper); font-weight: 600; cursor: pointer; transition: background 0.12s var(--ease), transform 0.08s var(--ease); }
.kind input:checked + span { background: var(--blue); border-color: var(--blue-deep); color: #fff; }
.kind input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.kind label:active span { transform: scale(0.97); }
.field { display: grid; gap: 8px; font-weight: 600; }
.field input, .field textarea { font: 400 var(--step-body) / 1.4 "Fira Sans", system-ui, sans-serif; color: var(--ink); background: var(--paper); border: 2px solid #7f9dc4; padding: 12px 14px; min-height: 52px; width: 100%; resize: vertical; border-radius: 3px; }
.field input:focus, .field textarea:focus { border-color: var(--blue); outline: 2px solid var(--blue); outline-offset: 0; }
.field input::placeholder { color: var(--muted); opacity: 1; }
.pair-fields { display: grid; gap: 12px; }
.brief-out { display: grid; gap: 12px; }
.brief-out[hidden] { display: none; }
#brief-status { min-height: 1.55em; font-weight: 600; }

/* Footer: the sign-in screen */
.footer { position: relative; margin-top: clamp(96px, 12vw, 180px); padding: clamp(40px, 6vw, 80px) var(--gutter) 24px; background: var(--blue-deep); color: #fff; display: grid; gap: 28px; align-items: center; overflow: hidden; }
.footer a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 600; }
.footer :focus-visible { outline-color: #fff; }
.footer nav { display: flex; gap: 8px 24px; flex-wrap: wrap; }
.footer-user { display: flex; align-items: center; gap: 18px; }
.footer-user .dp { width: 112px; height: 112px; border-color: #fff; object-position: 45% 30%; }
.footer-who { font-size: var(--step-lead); font-weight: 800; line-height: 1.1; }
.footer-sign { width: 100%; aspect-ratio: 2560 / 860; background: url(assets/art/signature.svg) center / contain no-repeat; filter: invert(1); }
.legal { font-size: var(--step-small); }

/* Sign-in toast */
.toast { position: fixed; right: 12px; bottom: calc(var(--taskbar) + 12px); z-index: 45; width: min(340px, calc(100vw - 24px)); }
.toast[hidden] { display: none; }
.toast .win-body { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--ice); line-height: 1.35; }
.toast.is-off { opacity: 0; translate: 0 24px; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .toast { transition: opacity 0.3s var(--ease), translate 0.35s var(--ease); }
  @starting-style { .toast { opacity: 0; translate: 0 24px; } }
}

/* Dialogs */
dialog.win { margin: auto; border: 0; color: var(--ink); }
dialog:not([open]) { display: none; }
dialog::backdrop { background: rgba(15, 31, 58, 0.55); }
.viewer { width: min(92vw, 1000px); max-height: calc(100svh - 32px); }
.viewer .win-body { overflow: auto; background: #8a97a8; padding: 8px; }
.viewer img { width: auto; max-width: 100%; max-height: calc(100svh - 110px); margin-inline: auto; background: var(--paper); }
.alert { width: min(92vw, 420px); }
.alert .win-body { padding: 24px; display: grid; gap: 20px; background: var(--ice); }
.alert .btn { min-width: 96px; }

/* Nudge: the MSN window shake, plus the taskbar-style flash that survives reduced motion */
.is-nudged > .win-bar { background: #e89a1c; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes nudge { 0%, 100% { transform: none; } 15% { transform: translate(-10px, 3px); } 30% { transform: translate(10px, -3px); } 45% { transform: translate(-8px, -2px); } 60% { transform: translate(8px, 2px); } 80% { transform: translate(-4px, 1px); } }
  .is-nudged { animation: nudge 0.45s linear; }
}

/* Motion: windows open as they arrive. Scale and opacity only; hidden state exists only once script has added .anim. */
.anim .win.rv { opacity: 0; scale: 0.96; }
.anim .win.rv.in { opacity: 1; scale: 1; transition: opacity 0.14s var(--ease) var(--d, 0ms), scale 0.18s var(--ease) var(--d, 0ms); }

@media (min-width: 700px) {
  .pair-fields { grid-template-columns: 1fr 1fr; }
  .files { grid-template-columns: repeat(4, 1fr); }
  .f-rabbit { grid-column: 1; grid-row: 1 / span 2; }
  .f-nanachi { grid-column: 2; }
  .f-yatta { grid-column: 3; }
  .f-pool { grid-column: 4; grid-row: 1 / span 2; }
  .f-smoke { grid-column: 2 / span 2; }
  .f-nanachi img, .f-yatta img { aspect-ratio: 1; object-fit: contain; }
  .intro { grid-template-columns: 7fr 5fr; align-items: start; }
  .about { grid-template-columns: 5fr 7fr; align-items: start; }
  .intro .win-paint { margin-left: -56px; margin-top: 96px; z-index: 2; }
  .intro .win-note .win-body { padding-right: clamp(72px, 7vw, 104px); }
  .about .win-paint { margin-right: -56px; }
  .about .win-note { margin-top: 96px; z-index: 2; }
  .likes-grid { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .win-abyss .win-body { flex-direction: row; align-items: center; }
  .win-abyss img { width: 40%; }
  .win-abyss, .win-faves, .win-rice { grid-column: 1 / -1; }
  .comm-grid { grid-template-columns: 5fr 6fr; }
  .footer { grid-template-columns: 2fr 3fr; }
  .footer-user, .footer nav, .legal { grid-column: 1; }
  .footer-sign { grid-column: 2; grid-row: 1 / span 3; }
  .comm-text { margin-top: 56px; margin-right: -24px; z-index: 1; }
  .win-chat { z-index: 2; }
  .projects { grid-template-columns: repeat(12, 1fr); }
  .p-kp { grid-column: 1 / span 12; }
  .p-menu { display: none; }
  .p-msn { grid-column: 1 / span 12; }
  .p-sharky, .p-halo { grid-column: span 6; }
  .private { grid-column: 1 / -1; }
  .p-msn .win-body { display: grid; grid-template-columns: 1fr 1fr; }
  .p-sharky .win-body, .p-halo .win-body { display: flex; flex-direction: column; height: 100%; }
  .p-sharky .project-text, .p-halo .project-text { flex: 1; align-content: start; }
}

@media (min-width: 1100px) {
  .desk { display: block; min-height: max(calc(100svh - var(--taskbar)), 720px); padding: 0; overflow: visible; }
  .desk::after { content: ""; }
  .icons { display: grid; position: absolute; left: var(--gutter); top: 24px; width: 104px; gap: 10px; z-index: 1; }
  .icons a { display: grid; justify-items: center; gap: 4px; min-height: 92px; padding: 6px 4px; color: #fff; font-size: 0.875rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); border-radius: 4px; transition: background 0.12s var(--ease); }
  .icons a:hover { color: #fff; background: rgba(255, 255, 255, 0.18); }
  .icons a:focus-visible { outline-color: #fff; }
  .icons img { width: 48px; height: 48px; border: 2px solid #fff; border-radius: 6px; object-fit: cover; }
  .win-hero { position: absolute; left: 11%; top: 15%; width: min(600px, 44%); z-index: 3; }
  .win-paint-a { position: absolute; left: 42%; top: 24px; width: min(44vw, calc(100svh - var(--taskbar) - 110px)); z-index: 2; }
  .win-list { position: absolute; right: var(--gutter); top: 9%; width: 300px; z-index: 4; }
  .win-theme { position: absolute; right: var(--gutter); top: calc(9% + 356px); width: 300px; z-index: 4; }

  .likes-grid { grid-template-columns: repeat(12, 1fr); }
  .win-abyss .win-body { flex-direction: column; align-items: stretch; }
  .win-abyss img { width: 100%; }
  .win-abyss { grid-column: 1 / span 4; grid-row: 1; align-self: stretch; }
  .win-faves { grid-column: 5 / span 8; grid-row: 1; align-self: stretch; }
  .win-rice { grid-column: 1 / span 7; grid-row: 2 / span 2; }
  .win-play { grid-column: 8 / span 5; grid-row: 2; }
  .win-take { grid-column: 8 / span 5; grid-row: 3; }

  .p-kp { grid-column: 1 / span 8; }
  .p-kp .win-body { display: flex; flex-direction: column; height: 100%; }
  .p-kp .project-text { flex: 1; align-content: start; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .p-kp .project-text h3, .p-kp .project-text p { grid-column: 1; }
  .p-kp .project-text a { grid-column: 2; }
  .p-kp .project-text a:first-of-type { grid-row: 1; align-self: start; }
  .p-menu { display: flex; grid-column: 9 / span 4; align-self: end; margin-left: -56px; margin-bottom: 56px; z-index: 2; }
  .p-msn { grid-column: 7 / span 6; margin-top: -24px; z-index: 3; grid-row: 2 / span 2; align-self: start; }
  .p-sharky { grid-column: 1 / span 6; grid-row: 2; }
  .p-halo { grid-column: 2 / span 6; grid-row: 3; margin-top: -12px; }
  .private { grid-column: 9 / span 4; grid-row: 3; align-self: end; margin-bottom: 40px; }
}

@media (min-width: 700px) and (max-width: 1099px) {
  .desk { display: grid; grid-template-columns: 3fr 2fr; align-items: start; }
  .win-hero, .win-paint-a { grid-column: 1 / -1; }
}

@media (max-width: 699px) {
  .taskbar nav .hide-phone { display: none; }
  .toast .dp { display: none; }
  .toast .win-body { padding: 10px 12px; }
  .tray { display: none; }
  .taskbar { gap: 6px; padding-right: 6px; }
  .start { padding: 0 14px 0 10px; font-size: 1.125rem; }
  .taskbar nav { justify-content: flex-end; }
  .taskbar nav a { padding: 0 12px; }
  .desk { padding-top: 12px; }
  .win-bar { min-height: 38px; }
  .footer-sign { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .crawler { translate: none; }
  .win, .ctl, .btn { transition: none; }
}

/* Vista: Aero glass over the aurora wallpaper. Base rules above are the XP theme. */
[data-theme="vista"] { --sky: #0b4a63; --ink: #0d1b26; --blue: #1c5f96; --blue-deep: #0a2b3e; --go: #17643a; --go-deep: #0f4a2a; --win-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); }
[data-theme="vista"] body::before { background-image: url(assets/wallpaper-vista.svg); }
[data-theme="vista"] .win { padding: 0 7px 7px; border-radius: 8px; background: rgba(190, 220, 238, 0.82); box-shadow: 0 0 0 1px rgba(8, 26, 40, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.55), var(--win-shadow); }
[data-theme="vista"] .win.is-min { padding-bottom: 0; }
[data-theme="vista"] .win-bar { margin-inline: -7px; padding: 0 8px 0 12px; align-items: flex-start; color: var(--ink); box-shadow: none; background: linear-gradient(105deg, rgba(255, 255, 255, 0.4) 0 30%, transparent 30.5% 52%, rgba(255, 255, 255, 0.22) 52.5% 60%, transparent 60.5%); }
[data-theme="vista"] .win-title { padding-top: 9px; text-shadow: 0 0 8px #fff, 0 0 3px #fff; }
[data-theme="vista"] .win-body { box-shadow: 0 0 0 1px rgba(8, 26, 40, 0.5); }
[data-theme="vista"] .ctls { gap: 0; }
[data-theme="vista"] .ctl { width: 32px; height: 28px; border: 1px solid rgba(8, 26, 40, 0.55); border-top: 0; border-radius: 0 0 0 5px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 49%, rgba(205, 222, 235, 0.75) 50%); }
[data-theme="vista"] .ctl::before, [data-theme="vista"] .ctl::after { background: var(--ink); }
[data-theme="vista"] .ctl-min::before { left: 10px; right: 10px; bottom: 8px; }
[data-theme="vista"] .is-min .ctl-min::before { left: 10px; right: 10px; top: 8px; }
[data-theme="vista"] .ctl-x { width: 50px; border-left: 0; border-radius: 0 0 5px 0; background: linear-gradient(180deg, #e9a08f 0 49%, #c8402a 50%, #a32510); }
[data-theme="vista"] .ctl-x::before, [data-theme="vista"] .ctl-x::after { left: 17px; right: 17px; top: 12px; height: 3px; background: #fff; }
[data-theme="vista"] .toast .ctl-x, [data-theme="vista"] .viewer .ctl-x { border-radius: 0 0 5px 5px; }
[data-theme="vista"] .btn { border-color: #7a8c9c; border-radius: 3px; background: linear-gradient(180deg, #f8fafc 0 49%, #e0e7ee 50%, #cfd9e3); }
[data-theme="vista"] .btn-go { border-color: #2f7fb0; color: var(--ink); text-shadow: none; box-shadow: none; background: linear-gradient(180deg, #d4effc 0 49%, #9ad8f6 50%, #7cc8ee); }
[data-theme="vista"] .btn-go:hover { color: var(--ink); }
[data-theme="vista"] .taskbar { background: linear-gradient(180deg, rgba(40, 52, 62, 0.95), rgba(4, 8, 12, 0.97)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); }
[data-theme="vista"] .start { flex: none; width: 62px; height: 62px; margin: -8px 4px 0 8px; padding: 0; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 50% 28%, #cdeeff 0, #3a97dc 36%, #0c4685 70%, #062a55); box-shadow: 0 0 0 2px rgba(8, 20, 34, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.7); }
[data-theme="vista"] .start img { width: 42px; height: auto; }
[data-theme="vista"] .start span { display: none; }
[data-theme="vista"] .taskbar nav a { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
[data-theme="vista"] .taskbar nav a:hover { background: rgba(255, 255, 255, 0.2); }
[data-theme="vista"] .taskbar nav a[aria-current] { background: rgba(120, 190, 235, 0.35); }
[data-theme="vista"] .tray { background: rgba(255, 255, 255, 0.08); }
[data-theme="vista"] .dp { border-color: #fff; box-shadow: 0 0 0 1px #5d7486; }

/* Windows 95: teal desktop, silver bevels, no glass, no gloss. */
[data-theme="95"] { --sky: #008080; --ink: #000; --muted: #2e2e2e; --ice: #c0c0c0; --ice-deep: #dfdfdf; --blue: #000080; --blue-deep: #000080; --go: #000080; --go-deep: #000080; --up: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; --down: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; }
[data-theme="95"] body::before { background: #008080; }
[data-theme="95"] .win { padding: 4px; border-radius: 0; background: #c0c0c0; box-shadow: var(--up); }
[data-theme="95"] .win.is-min { padding-bottom: 4px; }
[data-theme="95"] .win-bar { margin: 0 0 3px; min-height: 34px; padding: 3px 3px 3px 8px; border-radius: 0; box-shadow: none; background: #000080; }
[data-theme="95"] .win-title, [data-theme="95"] h1, [data-theme="95"] h2, [data-theme="95"] h3, [data-theme="95"] .start, [data-theme="95"] .desk-head, [data-theme="95"] .footer-who { font-family: "Pixelify Sans", "Fira Sans", sans-serif; font-style: normal; font-weight: 700; letter-spacing: 0; text-shadow: none; }
[data-theme="95"] .win-body { box-shadow: var(--down); padding: 2px; }
[data-theme="95"] .win-note .win-body { padding: clamp(22px, 3.2vw, 48px); }
[data-theme="95"] .win-hero .win-body { padding: clamp(24px, 3vw, 44px); }
[data-theme="95"] .ctl { width: 28px; height: 26px; border: 0; border-radius: 0; background: #c0c0c0; box-shadow: var(--up); }
[data-theme="95"] .ctl:active { transform: none; box-shadow: var(--down); }
[data-theme="95"] .ctl:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
[data-theme="95"] .ctl::before, [data-theme="95"] .ctl::after { background: #000; }
[data-theme="95"] .ctl-min::before { left: 7px; right: 9px; bottom: 6px; }
[data-theme="95"] .ctl-x::before, [data-theme="95"] .ctl-x::after { left: 7px; right: 7px; top: 11px; height: 3px; }
[data-theme="95"] .btn, [data-theme="95"] .btn-go, [data-theme="95"] .kind span { border: 0; border-radius: 0; color: #000; text-shadow: none; background: #c0c0c0; box-shadow: var(--up); }
[data-theme="95"] .btn-go { outline: 1px solid #000; }
[data-theme="95"] .btn:active { transform: none; box-shadow: var(--down); }
[data-theme="95"] .kind input:checked + span { color: #000; background: #dfdfdf; box-shadow: var(--down); }
[data-theme="95"] .field input, [data-theme="95"] .field textarea { border: 0; border-radius: 0; box-shadow: var(--down); }
[data-theme="95"] .field input:focus, [data-theme="95"] .field textarea:focus { border: 0; outline: 1px dotted #000; outline-offset: -5px; }
[data-theme="95"] .field input::placeholder { color: #595959; }
[data-theme="95"] .taskbar { color: #000; background: #c0c0c0; box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff; align-items: center; padding-inline: 4px; }
[data-theme="95"] .start { height: 42px; padding: 0 12px 0 8px; color: #000; border-radius: 0; background: #c0c0c0; box-shadow: var(--up); }
[data-theme="95"] .start:active { box-shadow: var(--down); }
[data-theme="95"] .start img { filter: brightness(0); }
[data-theme="95"] .taskbar nav a { color: #000; border-radius: 0; background: #c0c0c0; box-shadow: var(--up); }
[data-theme="95"] .taskbar nav a:hover { color: #000; background: #c0c0c0; filter: none; }
[data-theme="95"] .taskbar nav a[aria-current] { background: #dfdfdf; box-shadow: var(--down); }
[data-theme="95"] .taskbar :focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
[data-theme="95"] .tray { height: 40px; background: #c0c0c0; box-shadow: var(--down); }
[data-theme="95"] .dp { border: 0; border-radius: 0; box-shadow: 0 0 0 2px #808080; }
[data-theme="95"] .project-text { background: #c0c0c0; }
[data-theme="95"] .paint { background: #808080; padding-bottom: 44px; }
[data-theme="95"] .msg { border-radius: 0; }
[data-theme="95"] .msg-in, [data-theme="95"] .msg-out { background: #dfdfdf; }
[data-theme="95"] .balloon { border-radius: 0; box-shadow: 0 0 0 1px #000; }
[data-theme="95"] .slots { border-radius: 0; box-shadow: var(--down); padding: 4px; }
[data-theme="95"] .slots i { background: #000080; }
[data-theme="95"] .slots .off { background: transparent; }
[data-theme="95"] .files { background: #fff; }
[data-theme="95"] .chat-to { background: #c0c0c0; }
[data-theme="95"] .is-nudged > .win-bar { background: #808080; }
[data-theme="95"] .win-faves .win-body, [data-theme="95"] .win-abyss .win-body, [data-theme="95"] .win-take .win-body { padding: 18px; }
[data-theme="95"] .win-play .win-body { padding: 18px; box-shadow: none; }