/* Desktop-style portfolio with a 95/XP look. Content lives in DATA at the top of app.js. */

:root{
  --taskbar-h: 32px;
  --face: #c0c0c0;
  --face-light: #dfdfdf;
  --shade: #808080;
  --dark: #0a0a0a;
  --navy: #000080;
  --title-a: #0a246a;
  --title-b: #3a6ea5;
  --link: #0645ad;
  --ink: #000;
  --muted: #555;
  --term-green: #6fdd8b;
  --term-cyan: #6ac8ff;
  --term-yellow: #ffd479;
  --raised: inset -1px -1px var(--dark), inset 1px 1px #fff, inset -2px -2px var(--shade), inset 2px 2px var(--face-light);
  --sunken: inset -1px -1px #fff, inset 1px 1px var(--shade), inset -2px -2px var(--face-light), inset 2px 2px var(--dark);
  --font-ui: Tahoma, Verdana, "Segoe UI", Geneva, sans-serif;
  --font-mono: "Lucida Console", "Cascadia Mono", Consolas, "Courier New", monospace;
  --font-doc: "Times New Roman", Times, Georgia, serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; overflow:hidden; }
body{
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  background:#3a6ea5;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
html{ cursor:var(--cur-arrow, default); }
a, button, label, select, summary, [role="button"]{ cursor:var(--cur-hand, pointer); }
.titlebar, .resize, ::-webkit-resizer{ cursor:var(--cur-arrow, default); }
a{ color:var(--link); }

/* ---------- 95-style scrollbars ---------- */
::-webkit-scrollbar{ width:16px; height:16px; }
::-webkit-scrollbar-track{
  background:repeating-conic-gradient(var(--face) 0% 25%, #fff 0% 50%) 0 0 / 2px 2px;
}
::-webkit-scrollbar-thumb{ background:var(--face); box-shadow:var(--raised); }
::-webkit-scrollbar-corner{ background:var(--face); }
::-webkit-scrollbar-button:single-button{
  display:block; width:16px; height:16px;
  background-color:var(--face); box-shadow:var(--raised);
  background-repeat:no-repeat; background-position:center;
}
::-webkit-scrollbar-button:single-button:vertical:decrement{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M3 0h1v1h1v1h1v1h1v1H0V3h1V2h1V1h1z'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:vertical:increment{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:horizontal:decrement{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M3 0h1v7H3V6H2V5H1V4H0V3h1V2h1V1h1z'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:horizontal:increment{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M0 0h1v1h1v1h1v1h1v1H3v1H2v1H1v1H0z'/%3E%3C/svg%3E");
}
@supports not selector(::-webkit-scrollbar){
  *{ scrollbar-color:var(--face) var(--face-light); }
}

/* ---------- Wallpaper (painted by paintWallpaper, the colour is the fallback) ---------- */
#wallpaper{
  position:fixed; inset:0; z-index:0;
  background:#85807f;
}

/* ---------- Desktop icons ---------- */
#desktop{
  position:fixed; inset:0 0 var(--taskbar-h) 0; z-index:1;
}
#icons{ position:absolute; inset:0; }
.icon{
  position:absolute;
  width:76px; padding:4px 2px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:var(--cur-arrow, default); text-align:center;
  touch-action:none;
  transition:left .12s steps(3), top .12s steps(3);
}
.icon.dragging{ transition:none; z-index:900; opacity:.75; }
.icon .glyph{ width:40px; height:40px; position:relative; }
.icon .glyph svg{ width:100%; height:100%; display:block; }
.icon .label{
  color:#fff; font-size:11px; line-height:1.25;
  text-shadow:1px 1px 0 #000;
  max-width:74px; word-wrap:break-word;
  padding:1px 3px; border:1px dotted transparent;
}
.icon.selected .glyph{ filter:brightness(.7) sepia(1) hue-rotate(185deg) saturate(4); }
.icon.selected .label{ background:var(--navy); text-shadow:none; border-color:#ffff80; }
.icon:focus-visible{ outline:none; }
.icon:focus-visible .label{ border-color:#fff; }

/* ---------- Taskbar ---------- */
#taskbar{
  position:fixed; left:0; right:0; bottom:0; height:var(--taskbar-h);
  z-index:1000;
  display:flex; align-items:center; gap:4px;
  padding:3px 3px 2px;
  background:var(--face);
  box-shadow:inset 0 1px var(--face-light), inset 0 2px #fff;
}
.tb-btn{
  font:inherit; color:var(--ink);
  background:var(--face); box-shadow:var(--raised);
  border:none; height:100%;
  display:flex; align-items:center; gap:5px;
  padding:0 8px; cursor:var(--cur-hand, pointer); white-space:nowrap;
}
.tb-btn:active, .tb-btn.pressed{
  box-shadow:var(--sunken);
  padding:1px 7px 0 9px;
}
#start-btn{ font-weight:700; padding-left:5px; }
#start-btn.pressed{ padding-left:6px; }
.start-logo{
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:-1px;
  color:#fff; background:linear-gradient(135deg, #e03b2e, #f2a20c 35%, #2f9e44 65%, #1c6fd1);
  padding:1px 3px; border:1px solid #000;
}
.tb-sep{
  width:2px; height:80%; flex:none;
  border-left:1px solid var(--shade); border-right:1px solid #fff;
  margin:0 1px;
}
#quick{ display:flex; gap:1px; height:100%; }
.ql{
  width:24px; height:100%; padding:2px;
  background:none; border:none; cursor:var(--cur-hand, pointer);
}
.ql svg{ width:100%; height:100%; display:block; }
.ql:hover{ box-shadow:inset -1px -1px var(--shade), inset 1px 1px #fff; }
.ql:active{ box-shadow:inset -1px -1px #fff, inset 1px 1px var(--shade); }
#tasks{ flex:1; min-width:0; display:flex; gap:3px; height:100%; }
.task{
  flex:0 1 160px; min-width:0; justify-content:flex-start;
  overflow:hidden;
}
.task svg{ width:16px; height:16px; flex:none; }
.task span{ overflow:hidden; text-overflow:ellipsis; }
.task.pressed{
  font-weight:700;
  background:repeating-conic-gradient(var(--face) 0% 25%, #fff 0% 50%) 0 0 / 2px 2px;
}
#tray{
  height:100%; display:flex; align-items:center; gap:6px;
  padding:0 10px; box-shadow:inset -1px -1px #fff, inset 1px 1px var(--shade);
  font-size:11px; white-space:nowrap;
}

/* ---------- Start menu ---------- */
#start-menu{
  position:fixed; left:2px; bottom:calc(var(--taskbar-h) - 2px); z-index:1001;
  display:flex; min-width:220px;
  background:var(--face); box-shadow:var(--raised);
  padding:3px;
}
#start-menu[hidden]{ display:none; }
.sm-banner{
  width:24px; flex:none;
  background:linear-gradient(0deg, var(--title-a), var(--title-b));
  color:#fff; font-weight:700; font-size:15px; letter-spacing:.5px;
  writing-mode:vertical-rl; transform:rotate(180deg);
  padding:8px 0; display:flex; align-items:center;
}
.sm-banner b{ color:#c0c0c0; font-weight:400; margin-left:4px; }
.sm-items{ flex:1; display:flex; flex-direction:column; padding-left:2px; }
.sm-item{
  font:inherit; color:var(--ink); text-align:left;
  background:none; border:none; cursor:var(--cur-hand, pointer);
  display:flex; align-items:center; gap:10px;
  padding:4px 18px 4px 6px; min-height:32px;
}
.sm-item svg{ width:24px; height:24px; flex:none; }
.sm-item:hover, .sm-item:focus-visible{ background:var(--navy); color:#fff; outline:none; }
.sm-sep{ height:2px; margin:3px 2px; border-top:1px solid var(--shade); border-bottom:1px solid #fff; }
.sm-small{ min-height:24px; }
.sm-small svg{ width:16px; height:16px; }

/* ---------- Windows ---------- */
.window{
  position:absolute;
  min-width:300px; min-height:160px;
  background:var(--face);
  box-shadow:var(--raised), 2px 2px 0 rgba(0,0,0,0.25);
  padding:3px;
  display:flex; flex-direction:column;
  animation:winOpen .2s cubic-bezier(.2,.9,.3,1);
  transform-origin:50% 40%;
}
.window.closing{ animation:winClose .16s cubic-bezier(.4,0,1,1) forwards; pointer-events:none; }
.window.maximized{
  inset:0 0 0 0 !important;
  width:auto !important; height:auto !important;
}
@keyframes winOpen{ from{ opacity:0; transform:scale(.92) translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes winClose{ to{ opacity:0; transform:scale(.94) translateY(4px); } }

.titlebar{
  height:22px; flex:none;
  display:flex; align-items:center; gap:4px;
  padding:0 2px 0 3px;
  background:linear-gradient(90deg, var(--shade), #b5b5b5);
  color:#d4d0c8;
  touch-action:none;
}
.window.active .titlebar{ background:linear-gradient(90deg, var(--title-a), var(--title-b)); color:#fff; }
.t-icon{ width:16px; height:16px; flex:none; }
.t-icon svg{ width:100%; height:100%; display:block; }
.title{
  flex:1; min-width:0;
  font-size:12px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tb-btns{ display:flex; gap:0; }
.tl{
  width:16px; height:14px; padding:0;
  background:var(--face); box-shadow:var(--raised);
  border:none; cursor:var(--cur-hand, pointer); position:relative;
}
.tl:active{ box-shadow:var(--sunken); }
.tl.close{ margin-left:2px; }
.tl::before{ content:""; position:absolute; background:#000; }
.tl.min::before{ left:4px; bottom:3px; width:6px; height:2px; }
.tl.max::before{ left:3px; top:2px; width:9px; height:8px; background:none; border:1px solid #000; border-top-width:2px; }
.tl.close::before, .tl.close::after{
  content:""; position:absolute; left:7px; top:3px; width:2px; height:8px; background:#000;
}
.tl.close::before{ transform:rotate(45deg); }
.tl.close::after{ transform:rotate(-45deg); }
.win-body{
  flex:1; overflow:auto; user-select:text;
  overscroll-behavior:contain;
  margin-top:2px;
  background:#fff;
  box-shadow:var(--sunken);
  padding:2px;
}

/* dark windows (terminal) */
.window.dark .win-body{ background:#000; color-scheme:dark; }

/* ---------- About (XP task pane on the left) ---------- */
.about-wrap{ display:flex; min-height:100%; }
.about-side{
  flex:none; width:170px;
  background:linear-gradient(180deg, #7ba2e7, #6375d6);
  padding:12px 10px;
}
.about-side .box{ background:#d6dff7; border:1px solid #fff; }
.about-side .sec{
  background:linear-gradient(90deg, #fff, #c6d3f7);
  color:#215dc6; font-weight:700; font-size:11px; padding:5px 8px;
}
.about-side .row{
  width:100%; padding:4px 8px; border:none;
  background:none; font:inherit; font-size:11px; color:#215dc6; text-align:left;
  display:flex; gap:7px; align-items:center; cursor:var(--cur-hand, pointer);
}
.about-side .row:hover{ color:#428eff; text-decoration:underline; }
.about-side .row .dotc{ width:8px; height:8px; flex:none; border:1px solid rgba(0,0,0,.35); }
.about-main{ flex:1; padding:22px 26px; }
.avatar{
  width:76px; height:76px;
  background:linear-gradient(135deg, var(--title-a), var(--title-b));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:28px; font-weight:700; font-family:var(--font-mono);
  box-shadow:var(--sunken); border:2px solid var(--face);
  margin-bottom:12px;
}
.about-main h1{ font-size:22px; }
.about-main .role{ color:var(--muted); font-size:13px; margin:3px 0 14px; }
.about-main p{ font-size:13px; line-height:1.6; margin-bottom:10px; max-width:54ch; }
.chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.chip{
  font-size:11px; background:var(--face); box-shadow:var(--raised);
  padding:3px 8px;
}
.skill-group{ margin-top:14px; }
.skill-group h3{ font-size:11px; font-weight:700; color:var(--navy); margin-bottom:6px; }

/* ---------- Projects folder ---------- */
.folder-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:6px; padding:16px;
}
.folder-item{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 4px; cursor:var(--cur-hand, pointer); text-align:center;
  border:none; background:none; font-family:inherit;
}
.folder-item .fi-glyph{ width:40px; height:40px; }
.folder-item .fi-glyph svg{ width:100%; height:100%; display:block; }
.folder-item .fi-name{ font-size:12px; padding:0 3px; border:1px dotted transparent; }
.folder-item:hover .fi-name, .folder-item:focus-visible .fi-name{ background:var(--navy); color:#fff; border-color:#ffff80; }
.folder-item:focus-visible{ outline:none; }
.folder-item .fi-sub{ font-size:10.5px; color:#777; }

.projects{ padding-bottom:16px; }
.pj-h{
  font-size:11px; font-weight:700; color:var(--navy);
  margin:14px 16px 0; padding-bottom:3px; border-bottom:1px solid var(--face);
}
.projects .folder-grid{ padding-top:6px; padding-bottom:2px; }
.pj-list{ list-style:none; padding:4px 16px 0; }
.pj-list li{
  display:flex; align-items:baseline; gap:8px; padding:6px 0;
  border-bottom:1px dotted #bbb; font-size:12px; line-height:1.5;
}
.pj-list .fdot{ width:8px; height:8px; flex:none; background:#c4c4ca; border:1px solid rgba(0,0,0,.35); transform:translateY(-1px); }
.pj-list li > div{ flex:1; }
.pj-list .pj-line{ color:var(--muted); }
.pj-list a{ font-size:11px; white-space:nowrap; }
.pj-list .pj-small{ color:var(--muted); padding:4px 0; }
.pj-foot{ padding:12px 16px 0; font-size:12px; color:var(--muted); }

/* ---------- Project window (README) ---------- */
.proj .tabbar{
  display:flex; align-items:flex-end; gap:0;
  background:var(--face); padding:4px 4px 0;
  border-bottom:1px solid #fff;
}
.proj .tab{
  padding:3px 12px; background:var(--face);
  box-shadow:inset 1px 1px #fff, inset -1px 0 var(--dark), inset -2px 0 var(--shade);
  display:flex; gap:6px; align-items:center; font-size:11px;
}
.proj .tab .fdot{ width:8px; height:8px; border:1px solid rgba(0,0,0,.35); }
.proj .body{ padding:18px 22px; }
.proj h1{ font-size:20px; }
.proj .meta{ font-size:11px; color:#777; margin:3px 0 12px; }
.proj p{ font-size:13px; line-height:1.6; margin-bottom:10px; max-width:62ch; }
.proj h2{
  font-size:12px; font-weight:700; color:var(--navy);
  margin:16px 0 6px; padding-bottom:2px; border-bottom:1px solid var(--face);
}
.proj ul{ margin:0 0 10px 18px; }
.proj li{ font-size:12.5px; line-height:1.6; margin-bottom:3px; }
.proj .links{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.proj .shot{ margin:4px 0 14px; }
.proj .shot img{ width:100%; display:block; background:#fff; box-shadow:0 0 0 1px var(--shade); }
.proj .shot figcaption{ font-size:11px; color:#777; margin-top:5px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:80px; min-height:24px; padding:3px 14px;
  font:inherit; font-size:12px; color:var(--ink); text-decoration:none;
  background:var(--face); box-shadow:var(--raised);
  border:none; cursor:var(--cur-hand, pointer);
}
.btn:active{ box-shadow:var(--sunken); padding:4px 13px 2px 15px; }
.btn.primary{ outline:1px solid #000; outline-offset:-1px; font-weight:700; }
.btn:focus-visible{ outline:1px dotted #000; outline-offset:-5px; }

/* ---------- LIVE badge and the red "Try it here" button ---------- */
.live-badge{
  display:inline-block; vertical-align:middle;
  font:700 9px/1 var(--font-ui); letter-spacing:.5px; color:#fff;
  background:#d40000; border:1px solid #000; padding:2px 3px 1px;
  box-shadow:inset 1px 1px #ff7a7a;
  pointer-events:none; user-select:none;
}
.folder-item .fi-glyph{ position:relative; }
.folder-item .fi-glyph .live-badge{ position:absolute; top:-4px; right:-14px; }
.icon .live-badge{ position:absolute; top:1px; left:calc(50% + 8px); }
.sm-item .live-badge{ margin-left:auto; }
.sm-item:has(.live-badge){ padding-right:8px; }
.btn.live{
  color:#fff; font-weight:700; background:#c40000;
  outline:1px solid #000; outline-offset:-1px;
  box-shadow:inset -1px -1px #3a0000, inset 1px 1px #ff8a8a, inset -2px -2px #800000, inset 2px 2px #e23c3c;
}
.btn.live:active{
  box-shadow:inset 1px 1px #3a0000, inset -1px -1px #ff8a8a, inset 2px 2px #800000, inset -2px -2px #e23c3c;
}
.btn.live:focus-visible{ outline:1px dotted #fff; outline-offset:-5px; }
.proj .live-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:2px 0 14px; font-size:11px; color:#777; }

/* ---------- Terminal (command prompt) ---------- */
.term{
  font-family:var(--font-mono); font-size:13px; line-height:1.4;
  color:#c0c0c0; padding:6px 8px;
  min-height:100%;
  cursor:var(--cur-arrow, default);
}
.term .line{ white-space:pre-wrap; word-break:break-word; }
.term .prompt{ color:#c0c0c0; }
.term .cmd{ color:#fff; }
.term .cyan{ color:#55ffff; }
.term .yellow{ color:#ffff55; }
.term .dim{ color:#808080; }
.term .red{ color:#ff5555; }
.term .in-row{ display:flex; }
.term input{
  flex:1; background:none; border:none; outline:none;
  font:inherit; color:#fff; caret-color:#c0c0c0;
  padding:0; margin-left:0;
}

/* ---------- Mail / contact ---------- */
.mail{ background:var(--face); min-height:100%; padding:10px; }
.mail .field{
  display:flex; gap:8px; align-items:center;
  padding:3px 0; font-size:12px;
}
.mail .field .k{ width:64px; flex:none; text-align:right; }
.mail .field .v{ flex:1; background:#fff; box-shadow:var(--sunken); padding:4px 6px; user-select:text; }
.mail .note{
  margin:10px 0; padding:10px 12px; font-size:12.5px; line-height:1.6;
  background:#fff; box-shadow:var(--sunken);
}
.mail .links{ padding:0 !important; }

/* ---------- Resume doc (a page in a word processor) ---------- */
.doc{ padding:26px 32px; font-family:var(--font-doc); font-size:14px; line-height:1.55; }
.doc h1{ font-size:24px; margin-bottom:2px; }
.doc .doc-cta{ margin:2px 0 6px; font-family:var(--font-ui); }
.doc .sub{ color:#444; font-size:13px; margin-bottom:12px; }
.doc h2{ font-size:14px; font-variant:small-caps; letter-spacing:.5px; margin:16px 0 6px; border-bottom:1px solid #000; padding-bottom:2px; }
.doc .entry{ margin-bottom:9px; }
.doc .entry .top{ display:flex; justify-content:space-between; gap:12px; font-weight:700; }
.doc .entry .when{ color:#444; font-weight:400; font-style:italic; font-size:13px; flex:none; }
.doc .entry .what{ font-size:13.5px; }
.doc .entry .what.dim{ color:#555; font-size:13px; }

/* ---------- Balloon tip (XP-style) ---------- */
#hint{
  position:fixed; right:8px; bottom:calc(var(--taskbar-h) + 12px);
  z-index:940; max-width:280px;
  background:#ffffe1; color:#000;
  border:1px solid #000; border-radius:7px;
  font-size:11.5px; line-height:1.45; padding:8px 12px;
  box-shadow:2px 2px 0 rgba(0,0,0,0.3);
  transition:opacity .5s;
  padding-right:30px;
}
#hint .tip-x{ position:absolute; top:5px; right:5px; margin:0; }
#hint .tip-live{ display:block; margin-top:6px; }
#hint .tip-btns{ display:block; margin-top:8px; }
#hint .live-badge{ vertical-align:1px; }
#hint::after{
  content:""; position:absolute; right:30px; bottom:-9px;
  border:9px solid transparent; border-bottom:0; border-top-color:#000;
}
#hint::before{
  content:""; position:absolute; right:31px; bottom:-7px; z-index:1;
  border:8px solid transparent; border-bottom:0; border-top-color:#ffffe1;
}
#hint b{ display:block; margin-bottom:2px; }
#hint.gone{ opacity:0; pointer-events:none; }
#hint kbd{ font-family:var(--font-mono); font-size:11px; }

:focus-visible{ outline:1px dotted #000; outline-offset:1px; }

/* ---------- Boot screen ---------- */
#boot{
  position:fixed; inset:0; z-index:2000;
  background:#000; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .3s steps(3);
}
#boot.done{ opacity:0; pointer-events:none; }
#boot{ cursor:var(--cur-wait, wait); }
#boot .boot-logo{
  font-family:var(--font-mono); font-size:44px; font-weight:700; letter-spacing:-2px;
}
#boot-sign:empty{ display:none; }
#boot-sign svg{ width:min(300px, 70vw); height:auto; display:block; }
#boot-sign path{ fill:none; stroke:#fff; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
#boot .boot-bar{
  width:150px; height:16px; padding:2px;
  border:1px solid #b2b2b2; border-radius:4px; overflow:hidden; position:relative;
}
#boot .boot-bar i{
  position:absolute; top:2px; bottom:2px; left:-40px;
  width:32px !important;
  background:linear-gradient(90deg, #2838c7 0 8px, transparent 8px 12px, #2838c7 12px 20px, transparent 20px 24px, #2838c7 24px 32px);
  animation:bootBlocks 1.6s linear infinite;
}
@keyframes bootBlocks{ to{ left:150px; } }
#boot .boot-skip{ color:#777; font-size:11px; }

/* ---------- Shut down ---------- */
#shutdown{
  position:fixed; inset:0; z-index:3000; background:#000;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#f0a030; font-family:var(--font-mono); font-size:20px; line-height:1.6; padding:24px;
  cursor:var(--cur-hand, pointer);
}
#shutdown[hidden]{ display:none; }
#shutdown small{ display:block; color:#777; font-size:12px; margin-top:18px; }

/* ---------- Rubber-band selection ---------- */
#select-rect{
  position:fixed; z-index:4; display:none; pointer-events:none;
  border:1px dotted #fff; outline:1px dotted #000; outline-offset:-1px;
}

/* ---------- Snap preview ---------- */
#snap-preview{
  position:fixed; z-index:5; display:none; pointer-events:none;
  border:3px solid rgba(255,255,255,0.8); outline:1px solid #000;
  background:rgba(0,0,128,0.12);
}

/* ---------- Resizable windows (desktop only) ---------- */
@media (min-width: 721px){
  .window{ resize:both; overflow:hidden; }
  .window.maximized{ resize:none; }
}

/* ---------- Live project in a window ---------- */
.win-body:has(> div > .live){ overflow:hidden; padding:0; }
.win-body > div:has(> .live){ height:100%; }
.live{ display:flex; flex-direction:column; height:100%; }
.live-bar{
  flex:none; display:flex; justify-content:space-between; gap:12px;
  padding:5px 10px; font-size:11px; background:var(--face);
  border-bottom:1px solid var(--shade);
}
.live-bar a{ white-space:nowrap; }
.live iframe{ flex:1; width:100%; border:0; background:#fff; }

/* ---------- Snake ---------- */
.win-body:has(> div > .snake){ background:var(--face); box-shadow:none; padding:0; }
.snake{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px; }
.snake canvas{
  display:block; width:100%; max-width:320px; height:auto;
  image-rendering:pixelated; box-shadow:var(--sunken); padding:2px; background:#000;
}
.snake-pad{ display:none; }
.snake-status{ display:flex; gap:4px; width:100%; max-width:320px; }
.snake-status span{ flex:1; box-shadow:inset -1px -1px #fff, inset 1px 1px var(--shade); padding:2px 6px; font-size:11px; min-height:18px; }
.snake-status .sn-msg{ flex:1.4; }

/* ---------- GitHub ---------- */
.gh-stats{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11px; color:#777; }
.gh-stats span{ display:inline-flex; align-items:center; gap:5px; }
.lang-dot{ width:8px; height:8px; display:inline-block; border:1px solid rgba(0,0,0,.35); }
.proj-live{ margin:-6px 0 12px; font-size:11px; color:#777; }
.folder-item .fi-live{ font-size:10.5px; color:#999; min-height:13px; }
.ghw{ padding-bottom:16px; }
.ghw-head{ display:flex; gap:16px; align-items:center; padding:18px 20px 14px; border-bottom:1px solid var(--face); }
.ghw-avatar{ width:64px; height:64px; margin:0; flex:none; overflow:hidden; font-size:22px; }
.ghw-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.ghw h1{ font-size:19px; }
.ghw-login{ font-family:var(--font-mono); font-size:12px; color:#777; text-decoration:none; }
.ghw-bio{ font-size:12.5px; line-height:1.5; margin-top:5px; }
.ghw h2{ font-size:11px; font-weight:700; color:var(--navy); margin:14px 20px 4px; padding-bottom:3px; border-bottom:1px solid var(--face); }
.ghw-list{ padding:0 10px; }
.ghw-repo{ display:flex; flex-direction:column; gap:2px; padding:7px 10px; text-decoration:none; color:inherit; border:1px dotted transparent; }
.ghw-repo:hover{ background:#e8eefc; border-color:var(--navy); }
.ghw-repo b{ color:var(--link); font-size:13px; text-decoration:underline; }
.ghw-desc{ font-size:12px; color:#444; line-height:1.45; }
.ghw-msg{ padding:8px 10px; font-size:12px; color:var(--muted); }
.ghw-foot{ padding:12px 20px 0; }

/* ---------- LinkedIn card ---------- */
.li{ padding-bottom:8px; }
.li-banner{ height:70px; background:linear-gradient(90deg, var(--title-a), var(--title-b)); }
.li-head{ padding:0 20px 14px; }
.li-avatar{ margin-top:-38px; }
.li h1{ font-size:20px; margin-top:6px; }
.li-headline{ font-size:12.5px; line-height:1.5; margin-top:2px; max-width:46ch; }
.li-loc{ font-size:11.5px; color:#777; margin:4px 0 12px; }

noscript .ns{
  position:fixed; inset:0; z-index:3000; background:#008080; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:24px; font-size:15px; line-height:1.6;
}
noscript .ns a{ color:#fff; }

/* ---------- Mobile ---------- */
@media (max-width: 720px){
  :root{ --taskbar-h: 40px; }
  .icon{ padding:6px 2px; }
  .icon .glyph{ width:48px; height:48px; }
  .icon .label{ font-size:12px; max-width:100%; }
  /* windows open full screen above the taskbar */
  .window{
    inset:0 0 0 0 !important;
    width:auto !important; height:auto !important;
    min-width:0; min-height:0;
  }
  .titlebar{ height:30px; }
  .title{ font-size:13px; }
  .tl{ width:24px; height:22px; }
  .tl.min::before{ left:8px; bottom:5px; }
  .tl.max::before{ left:6px; top:5px; }
  .tl.close::before, .tl.close::after{ left:11px; top:6px; height:10px; }
  .about-wrap{ flex-direction:column; }
  .about-side{ width:auto; padding:8px; }
  .about-side .box{ display:flex; flex-wrap:wrap; }
  .about-side .sec{ display:none; }
  .about-side .row{ width:auto; font-size:12px; padding:6px 8px; }
  #quick, #quick + .tb-sep{ display:none; }
  .task{ flex:0 1 44px; justify-content:center; }
  .task span{ display:none; }
  .task svg{ width:20px; height:20px; }
  .sm-item{ min-height:42px; font-size:14px; }
  .sm-small{ min-height:36px; }
  #hint{ left:8px; right:8px; max-width:none; }
  .snake-pad{
    display:grid; grid-template-columns:repeat(3, 64px); grid-template-rows:repeat(2, 48px);
    gap:4px; margin-top:6px;
  }
  .snake-pad button{
    font:inherit; font-size:18px; background:var(--face); box-shadow:var(--raised); border:none;
    touch-action:manipulation;
  }
  .snake-pad button:active{ box-shadow:var(--sunken); }
  .snake-pad [data-dir="up"]{ grid-column:2; }
  .snake-pad [data-dir="left"]{ grid-column:1; grid-row:2; }
  .snake-pad [data-dir="down"]{ grid-column:2; grid-row:2; }
  .snake-pad [data-dir="right"]{ grid-column:3; grid-row:2; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}