:root {
  --desktop:#008080;
  --face:#c0c0c0;
  --highlight:#ffffff;
  --shadow:#808080;
  --deep-shadow:#000000;
  --title:#000080;
  --title-end:#1084d0;
  --title-inactive:#6b6b6b;
  --title-inactive-text:#ffffff;
  --text:#000000;
  --muted:#434343;
  --rule:#808080;
  --field:#ffffff;
  --link:#0000ee;
  --terminal:#000000;
  --terminal-text:#55ff55;
  color-scheme:light;
}

/* Dark: an explicit choice from the home page wins, otherwise follow the system. */
:root[data-theme="dark"] {
  --desktop:#004747;
  --face:#383838;
  --highlight:#777777;
  --shadow:#1b1b1b;
  --deep-shadow:#050505;
  --title:#202064;
  --title-end:#155e94;
  --title-inactive:#4e4e4e;
  --title-inactive-text:#dcdcdc;
  --text:#f5f5f5;
  --muted:#b3b3b3;
  --rule:#6a6a6a;
  --field:#151515;
  --link:#8cb4ff;
  --terminal:#050505;
  --terminal-text:#72ff72;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --desktop:#004747;
    --face:#383838;
    --highlight:#777777;
    --shadow:#1b1b1b;
    --deep-shadow:#050505;
    --title:#202064;
    --title-end:#155e94;
    --title-inactive:#4e4e4e;
    --title-inactive-text:#dcdcdc;
    --text:#f5f5f5;
    --muted:#b3b3b3;
    --rule:#6a6a6a;
    --field:#151515;
    --link:#8cb4ff;
    --terminal:#050505;
    --terminal-text:#72ff72;
    color-scheme:dark;
  }
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; }
body {
  background:var(--desktop);
  color:var(--text);
  font:13px/1.42 Tahoma, Verdana, "Segoe UI", sans-serif;
}
button, input { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:var(--link); }
:focus-visible { outline:2px dotted currentColor; outline-offset:2px; }
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.skip {
  position:fixed;
  left:-10000px;
  top:4px;
  z-index:10000;
  padding:4px 8px;
  color:var(--text);
  background:var(--face);
  border:2px outset var(--highlight);
}
.skip:focus { left:4px; }
.i16 { display:block; flex:0 0 16px; width:16px; height:16px; }
.nowrap { white-space:nowrap; }

/* Desktop and icons */
.desktop { position:relative; width:100%; height:calc(100% - 38px); }
.desktop-icons {
  position:absolute;
  top:8px;
  left:8px;
  display:grid;
  grid-template-columns:repeat(2, 80px);
  gap:8px 4px;
  align-content:start;
}
.desktop-icon {
  width:80px;
  min-height:64px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  padding:4px 2px;
  border:0;
  background:none;
  color:#fff;
  line-height:1.25;
  text-align:center;
  text-shadow:1px 1px #000;
  cursor:default;
}
.desktop-icon:focus-visible { outline:0; }
.icon-art { display:block; width:32px; height:32px; }
.icon-art svg,
.icon-art img { display:block; width:32px; height:32px; shape-rendering:crispEdges; }
.desktop-icon .label { padding:1px 3px; border:1px dotted transparent; }
.desktop-icon.selected .label { background:var(--title); text-shadow:none; }
.desktop-icon.selected .icon-art { filter:brightness(.72) sepia(1) hue-rotate(185deg) saturate(2.4); }
.desktop-icon:focus-visible .label { border-color:#fff; }
.desktop-hint {
  position:absolute;
  left:16px;
  bottom:12px;
  margin:0;
  color:#fff;
  text-shadow:1px 1px #000;
}
.desktop-hint a { color:#fff; }
html:not(.js) .js-only,
.hint-touch { display:none; }
@media (pointer:coarse) {
  .hint-mouse { display:none; }
  .hint-touch { display:inline; }
}

/* Windows */
.window {
  position:absolute;
  z-index:10;
  display:none;
  min-width:280px;
  max-width:calc(100% - 8px);
  max-height:calc(100% - 8px);
  flex-direction:column;
  background:var(--face);
  border:2px solid;
  border-color:var(--highlight) var(--deep-shadow) var(--deep-shadow) var(--highlight);
  box-shadow:1px 1px 0 var(--shadow) inset, 4px 4px 0 rgba(0,0,0,.28);
}
.window.open { display:flex; }
.window.minimized { display:none; }
.window.maximized {
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none;
  max-height:none;
  box-shadow:none;
}
.window:focus-visible { outline:2px dotted #fff; outline-offset:3px; }
.titlebar {
  flex:0 0 auto;
  min-height:28px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:2px 2px 2px 4px;
  background:var(--title-inactive);
  color:var(--title-inactive-text);
  font-weight:700;
  cursor:move;
  user-select:none;
  touch-action:none;
}
.window.active .titlebar { background:linear-gradient(90deg,var(--title),var(--title-end)); color:#fff; }
.titlebar .title {
  flex:1 1 auto;
  min-width:0;
  margin:0;
  overflow:hidden;
  font:inherit;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.window-actions { flex:0 0 auto; display:flex; gap:2px; }
.window-actions button {
  width:24px;
  height:22px;
  padding:0 0 2px;
  display:grid;
  place-items:center;
  background:var(--face);
  color:var(--text);
  border:2px outset var(--highlight);
  font:700 12px/1 Arial, sans-serif;
  cursor:pointer;
}
.window-actions button:active { border-style:inset; }
.window-body {
  flex:1 1 auto;
  min-height:0;
  padding:12px 16px;
  overflow:auto;
  user-select:text;
  scrollbar-color:var(--shadow) var(--face);
}
.window-body h1 { margin:0 0 8px; font-size:20px; line-height:1.2; }
.window-body p { margin:8px 0; }
.window-body > :first-child { margin-top:0; }
.window-body > :last-child { margin-bottom:0; }
.window-body strong { font-weight:700; }

.about-layout { display:grid; grid-template-columns:132px 1fr; gap:16px; align-items:start; }
.about-photo {
  display:block;
  width:132px;
  height:auto;
  border:2px inset var(--highlight);
  background:var(--field);
}

.project-list { display:grid; gap:12px; align-content:start; }
.project-list fieldset {
  min-width:0;
  margin:0;
  padding:4px 12px 12px;
  border:2px groove var(--highlight);
}
.project-list legend { padding:0 4px; font-size:15px; font-weight:700; }
.project-list .role { margin:0 0 4px; }
.project-list .role .when { white-space:nowrap; }
.when { color:var(--muted); }
.system-line { color:var(--muted); font-size:12px; }
.project-list .system-line { margin-bottom:0; }

.work-list { margin:0; }
.work-list div { padding:8px 0; border-bottom:1px dotted var(--rule); }
.work-list div:first-child { padding-top:0; }
.work-list div:last-child { padding-bottom:0; border-bottom:0; }
.work-list dt { font-weight:700; }
.work-list dd { margin:4px 0 0 16px; }
.work-list dd.when { margin-top:2px; font-size:12px; }

.inset-panel {
  margin:8px;
  padding:8px 12px;
  background:var(--field);
  border:2px solid;
  border-color:var(--shadow) var(--highlight) var(--highlight) var(--shadow);
}
.wins-list { margin:0; padding-left:20px; }
.wins-list li + li { margin-top:8px; }

/* Photos */
.photo-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:8px;
}
.photo-thumb {
  min-width:0;
  padding:2px;
  background:var(--face);
  border:2px outset var(--highlight);
  cursor:pointer;
}
.photo-thumb:active { border-style:inset; }
.photo-thumb img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  background:var(--field);
}

/* Math Log: one card per recent day */
.math-grid {
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:8px;
  margin:12px 0;
}
.math-day { display:block; min-width:0; color:var(--text); text-decoration:none; }
.math-day img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:top;
  border:2px inset var(--highlight);
  background:#fff;
}
.math-date { display:block; margin-top:4px; font-size:12px; font-weight:700; }
.math-title {
  display:-webkit-box;
  overflow:hidden;
  color:var(--muted);
  font-size:11px;
  line-height:1.3;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.math-day:hover .math-date,
.math-day:focus-visible .math-date { color:var(--link); text-decoration:underline; }

.classic-button {
  display:inline-block;
  padding:4px 12px;
  border:2px outset var(--highlight);
  background:var(--face);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
}
.classic-button:active { border-style:inset; }

/* Codeforces card sits in a sunken field, like Wins. */
#window-cp .inset-panel { padding:0; }
#window-cp .cf { border:0; }

/* Terminal */
.terminal-window { background:var(--terminal); }
.terminal-output {
  flex:1 1 auto;
  min-height:min(230px, 40vh);
  max-height:48vh;
  padding:8px 12px;
  overflow:auto;
  background:var(--terminal);
  color:var(--terminal-text);
  font:13px/1.5 "Geist Mono", Consolas, monospace;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  user-select:text;
}
.terminal-output > div + div { margin-top:1.5em; }
.window.maximized .terminal-output { max-height:none; }
.terminal-input {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-top:1px solid #278827;
  background:var(--terminal);
  color:var(--terminal-text);
  font:13px/1.4 "Geist Mono", Consolas, monospace;
}
.terminal-input input {
  flex:1;
  min-width:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:inherit;
  font:inherit;
  caret-color:var(--terminal-text);
}

/* Photo viewer */
.viewer-body {
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:8px;
  background:#101010;
}
.viewer-body > img {
  display:block;
  flex:1 1 auto;
  min-height:0;
  width:100%;
  height:min(65vh, 620px);
  object-fit:contain;
  background:#101010;
  touch-action:pan-y pinch-zoom;
}
.viewer-controls {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding-top:8px;
  color:#fff;
}

/* Taskbar and Start menu */
.taskbar {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9000;
  height:38px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px 4px;
  background:var(--face);
  border-top:2px solid var(--highlight);
  box-shadow:0 -1px 0 var(--face);
}
.start-button,
.task-button,
.tray-link {
  min-height:30px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border:2px outset var(--highlight);
  background:var(--face);
  color:var(--text);
  white-space:nowrap;
  cursor:pointer;
}
.start-button { flex:0 0 auto; font-weight:700; }
.start-button[aria-expanded="true"] { border-style:inset; }
.task-buttons { display:flex; flex:1 1 auto; min-width:0; gap:4px; }
.task-button { flex:0 1 150px; min-width:0; text-align:left; }
.task-button span { overflow:hidden; text-overflow:ellipsis; }
/* The active window's button looks pressed, with Win95's checkerboard face. */
.task-button[aria-pressed="true"] {
  border-style:inset;
  background:repeating-conic-gradient(var(--face) 0 25%, var(--highlight) 0 50%) 0 0 / 2px 2px;
  font-weight:700;
}
.tray { flex:0 0 auto; display:flex; align-items:center; gap:4px; margin-left:auto; }
.tray-link { text-decoration:none; }
.tray-link:active { border-style:inset; }
.clock {
  min-width:72px;
  padding:5px 8px;
  border:1px solid;
  border-color:var(--rule) var(--highlight) var(--highlight) var(--rule);
  text-align:center;
  white-space:nowrap;
}
.clock:empty { display:none; }
.start-menu {
  position:fixed;
  left:2px;
  bottom:36px;
  z-index:9100;
  display:grid;
  grid-template-columns:24px 196px;
  max-height:calc(100% - 44px);
  background:var(--face);
  border:2px outset var(--highlight);
  box-shadow:3px 3px 0 rgba(0,0,0,.3);
}
.start-rail {
  display:flex;
  align-items:flex-end;
  padding:8px 2px;
  background:var(--title-inactive);
  color:var(--title-inactive-text);
  font-size:15px;
  letter-spacing:1px;
  white-space:nowrap;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}
.start-items { min-height:0; padding:2px; overflow:auto; }
.start-items [role="menuitem"] {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:6px 8px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.start-items [role="menuitem"]:hover,
.start-items [role="menuitem"]:focus-visible { background:var(--title); color:#fff; outline:0; }
.start-sep { margin:4px 2px; border-top:1px solid var(--rule); border-bottom:1px solid var(--highlight); }

/* Phones and short landscape screens: the windows stack into one scrolling column.
   Keep this query in sync with `mobile` in desktop.js. */
@media (max-width:699px), (max-height:500px) {
  html, body { height:auto; min-height:100%; overflow:auto; }
  html.viewer-open,
  html.viewer-open body { overflow:hidden; }
  body { padding:8px 0 calc(54px + env(safe-area-inset-bottom)); }
  .desktop {
    width:auto;
    height:auto;
    margin:0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .desktop-icons,
  .desktop-hint,
  .task-buttons { display:none !important; }
  .taskbar {
    height:calc(38px + env(safe-area-inset-bottom));
    padding:3px max(4px, env(safe-area-inset-right)) calc(3px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  }
  .start-menu {
    left:max(2px, env(safe-area-inset-left));
    bottom:calc(36px + env(safe-area-inset-bottom));
    max-height:calc(100vh - 48px - env(safe-area-inset-bottom));
  }
  .window,
  .window.stack-window,
  .window.maximized {
    position:relative;
    inset:auto !important;
    z-index:auto !important;
    display:flex;
    width:100% !important;
    height:auto !important;
    min-width:0;
    max-width:none;
    max-height:none;
    box-shadow:2px 2px 0 rgba(0,0,0,.28);
    scroll-margin-top:8px;
  }
  .window.stack-window.collapsed > :not(.titlebar) { display:none; }
  /* Nothing overlaps here, so every title bar reads as active. */
  .titlebar { background:linear-gradient(90deg,var(--title),var(--title-end)); color:#fff; cursor:default; touch-action:auto; }
  .stack-window [data-close],
  .viewer-window [data-minimize] { display:none; }
  .window.viewer-window {
    position:fixed;
    inset:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    z-index:9500 !important;
    display:none;
    width:auto !important;
  }
  .window.viewer-window.open { display:flex; }
  .window-body { font-size:14px; }
  .window-body .system-line,
  .work-list dd.when { font-size:13px; }
  .project-list .role .when { display:block; font-size:13px; }
  .project-list .role .sep { display:none; }
  #window-photos .window-body { max-height:520px; }
  .about-layout { grid-template-columns:96px 1fr; }
  .about-photo { width:96px; }
  .photo-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .math-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .terminal-output { min-height:190px; max-height:60vh; }
  #terminal-command { font-size:16px; }
  .viewer-body > img { height:auto; }
}

@media (max-width:430px) {
  .about-layout { display:block; }
  .about-photo { width:112px; margin:0 12px 8px 0; float:left; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; }
}