/* SKINS */
:root{
  --desktop-1:#1f3aa0;
  --desktop-2:#0e1f6e;
  --desktop-glow:#4360d6;
  --desktop-glow-2:#112274;
  --chrome:#dcdce6;
  --chrome-light:#ffffff;
  --chrome-dark:#6e6e88;
  --chrome-deep:#444460;
  --bar-grad:linear-gradient(180deg,#5a78ff 0%,#2f4ed8 50%,#1a36bd 51%,#3856e0 100%);
  --bar-inactive:linear-gradient(180deg,#9090a8 0%,#7070a0 50%,#606080 51%,#7070a0 100%);
  --bar-fg:#ffffff;
  --paper:#f3f3ee;
  --ink:#0a0a18;
  --ink-soft:#444;
  --hot:#ff3d8a;
  --lemon:#fff35a;
  --mint:#69e6a5;
  --sky:#5bc7ff;
  --start-bg:linear-gradient(180deg,#79c267,#3c8a2c);
  --tb-bg:linear-gradient(180deg,#c0c0d0 0%,#8d8da0 100%);
}
body[data-skin="lime"]{
  --desktop-1:#a8b800; --desktop-2:#5a6a00; --desktop-glow:#c8d533; --desktop-glow-2:#6f7d00;
  --chrome:#f0e9d0; --chrome-light:#ffffff; --chrome-dark:#a09478; --chrome-deep:#736a52;
  --bar-grad:linear-gradient(180deg,#fffabf 0%,#e0d76e 50%,#c7bd45 51%,#e2d35c 100%);
  --bar-inactive:linear-gradient(180deg,#d6cfa8 0%,#a89e7a 50%,#88805e 51%,#a89e7a 100%);
  --bar-fg:#3a3520; --paper:#fffce6; --ink:#221d0a; --ink-soft:#5a4d22;
  --hot:#d63d3d; --lemon:#ffe23a; --mint:#74c44a; --sky:#5bb6e0;
  --start-bg:linear-gradient(180deg,#ffd84a,#c2a01a);
  --tb-bg:linear-gradient(180deg,#e8dbb0 0%,#aa9b6c 100%);
}
body[data-skin="bondi"]{
  --desktop-1:#34c4e0; --desktop-2:#0d6a85; --desktop-glow:#7ddff0; --desktop-glow-2:#0a4e64;
  --chrome:#e9f5fa; --chrome-light:#ffffff; --chrome-dark:#83b6cc; --chrome-deep:#3a6e85;
  --bar-grad:linear-gradient(180deg,#bff0ff 0%,#5ec4e6 50%,#338fb0 51%,#5db9d9 100%);
  --bar-inactive:linear-gradient(180deg,#cad8de 0%,#9eb5be 50%,#7a939e 51%,#9eb5be 100%);
  --bar-fg:#0a3a4a; --paper:#f7fcff; --ink:#0b1d24; --ink-soft:#3a5a68;
  --hot:#ff5fa0; --lemon:#fff35a; --mint:#7ce0c0; --sky:#5bc7ff;
  --start-bg:linear-gradient(180deg,#ffa6c8,#d05a8c);
  --tb-bg:linear-gradient(180deg,#cfe5ee 0%,#7aa6b5 100%);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Public Sans',system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(ellipse at 30% 20%, var(--desktop-glow) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, var(--desktop-glow-2) 0%, transparent 60%),
    linear-gradient(180deg, var(--desktop-1) 0%, var(--desktop-2) 100%);
  min-height:100vh;
  overflow-x:hidden;
  cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><polygon points="2,2 2,16 6,12 9,18 11,17 8,11 14,11" fill="white" stroke="black" stroke-width="1.2" stroke-linejoin="round"/></svg>') 2 2, auto;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
body[data-skin="bondi"]::after{
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(0,40,60,.18) 100%);
}
body.no-crt::after{display:none}

.stars{position:fixed; inset:0; pointer-events:none; z-index:0;}
.stars span{position:absolute; width:2px; height:2px; background:white; border-radius:50%; opacity:.5; animation:tw 4s infinite ease-in-out;}
body[data-skin="lime"] .stars span{background:#fff7ad}
body[data-skin="bondi"] .stars span{background:#cffaff}
@keyframes tw{0%,100%{opacity:.2}50%{opacity:.9}}

/* BOOT */
.boot{
  position:fixed; inset:0; z-index:10001;
  background:#000; color:#cccccc;
  font-family:'IBM Plex Mono',monospace; font-size:14px; line-height:1.6;
  padding:34px 40px; cursor:pointer; overflow:hidden;
}
.boot pre{margin:0; white-space:pre-wrap; color:#cccccc}
.boot .ok{color:#69e6a5}
.boot .head{color:#ffffff}
.boot .brand{color:var(--hot, #ff3d8a); font-weight:700}
.boot .blink{animation:blink 1s steps(2,end) infinite}
.boot .hint{position:absolute; bottom:30px; left:40px; color:#666}
@keyframes blink{50%{opacity:0}}
.boot.fade{opacity:0; transition:opacity .35s; pointer-events:none}

/* DESKTOP ICONS */
.desktop-icons{
  position:fixed; top:24px; left:24px; z-index:2;
  display:grid; grid-template-columns:repeat(1,84px); gap:14px;
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  color:white; text-align:center;
}
body[data-skin="lime"] .desktop-icons{color:#3a3520}
body[data-skin="bondi"] .desktop-icons{color:#0a3a4a}
.di{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; padding:6px 4px; border-radius:4px;
  transition:background .12s;
}
.di:hover{background:rgba(255,255,255,.14)}
.di.selected{background:rgba(255,255,255,.18); outline:1px dotted rgba(255,255,255,.7)}
body[data-skin="lime"] .di:hover{background:rgba(80,60,0,.16)}
body[data-skin="lime"] .di.selected{background:rgba(80,60,0,.22); outline-color:rgba(60,40,0,.6)}
.di .px{
  width:42px; height:42px; image-rendering:pixelated;
  filter:drop-shadow(1px 1px 0 rgba(0,0,0,.4));
}
.di span{text-shadow:1px 1px 0 rgba(0,0,0,.5); line-height:1.1}
body[data-skin="lime"] .di span{text-shadow:1px 1px 0 rgba(255,255,200,.5)}

/* WINDOWS */
.win{
  background:var(--chrome);
  border:1px solid #000;
  box-shadow:
    inset 1px 1px 0 var(--chrome-light),
    inset -1px -1px 0 var(--chrome-dark),
    4px 4px 0 rgba(0,0,0,.32);
  margin:0 auto 60px;
  position:relative;
  max-width:920px;
  transition:box-shadow .15s;
}
.win.focused{
  box-shadow:
    inset 1px 1px 0 var(--chrome-light),
    inset -1px -1px 0 var(--chrome-dark),
    6px 6px 0 rgba(0,0,0,.42);
}
.win.minimized .win-body{display:none}
.win-bar{
  background:var(--bar-inactive);
  color:var(--bar-fg);
  display:flex; align-items:center; gap:8px;
  padding:6px 8px;
  font-family:'IBM Plex Mono',monospace; font-size:13px;
  border-bottom:1px solid #000;
  cursor:move;
  user-select:none;
  transition:background .12s;
}
.win.focused > .win-bar{background:var(--bar-grad)}
.win-bar .title{flex:1; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.win-bar .title b{font-weight:600}
.win-btns{display:flex; gap:4px}
.win-btns button{
  width:18px; height:16px; border:1px solid #000;
  background:var(--chrome);
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark);
  font-family:'IBM Plex Mono',monospace; font-size:11px; line-height:1; padding:0; cursor:pointer;
  color:#000;
}
.win-btns button:active,
.win-btns button.pressed{box-shadow:inset -1px -1px 0 var(--chrome-light), inset 1px 1px 0 var(--chrome-dark)}
.win-body{padding:22px 24px; background:var(--paper)}

.inset{
  background:white;
  box-shadow:inset 1px 1px 0 var(--chrome-dark), inset -1px -1px 0 var(--chrome-light);
  border:1px solid #000;
  padding:14px 16px;
}

/* HERO */
.hero{
  position:relative;
  width:920px; max-width:calc(100vw - 220px);
  margin:90px auto 48px;
}
.hello{
  font-family:'VT323',monospace;
  font-size:18px; color:white; opacity:.92; letter-spacing:1px;
  margin-bottom:8px;
  text-shadow:1px 1px 0 rgba(0,0,0,.4);
}
body[data-skin="lime"] .hello{color:#3a3520; text-shadow:1px 1px 0 rgba(255,255,200,.4)}
body[data-skin="bondi"] .hello{color:#0a3a4a; text-shadow:1px 1px 0 rgba(255,255,255,.4)}
.blink{animation:blink 1s steps(2,end) infinite}

.hero-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:18px; align-items:start;}
.name-card{
  background:var(--paper); border:1px solid #000;
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark), 6px 6px 0 rgba(0,0,0,.35);
  padding:28px 32px;
  position:relative;
}
.name-card h1{
  font-family:'VT323',monospace; font-weight:400;
  font-size:104px; line-height:.9; margin:0; letter-spacing:-1px;
  color:var(--ink);
}
.name-card h1 .three{color:var(--hot)}
.tagline{
  font-family:'Public Sans',sans-serif; font-size:17px; line-height:1.55;
  max-width:560px; margin-top:14px; color:var(--ink);
}
.tagline b{background:var(--lemon); padding:0 4px}
.pill-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.pill{
  font-family:'IBM Plex Mono',monospace; font-size:12px;
  padding:6px 10px; background:white; border:1px solid #000;
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark);
  color:var(--ink);
}
.pill.hot{background:var(--hot); color:white}
.pill.mint{background:var(--mint)}
.pill.sky{background:var(--sky)}
.pill.lemon{background:var(--lemon)}

.sysinfo{
  background:var(--paper); border:1px solid #000;
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark), 4px 4px 0 rgba(0,0,0,.3);
  padding:0; align-self:start; overflow:hidden;
}
.sysinfo-bar{
  background:var(--bar-grad); color:var(--bar-fg);
  padding:5px 8px; font-family:'IBM Plex Mono',monospace; font-size:12px;
  border-bottom:1px solid #000;
}
.sysinfo-body{padding:14px 16px; font-family:'IBM Plex Mono',monospace; font-size:12px; line-height:1.6}
.sysinfo-body .row{display:flex; justify-content:space-between; gap:10px; padding:2px 0; border-bottom:1px dotted rgba(0,0,0,.18)}
.sysinfo-body .row:last-child{border-bottom:0}
.sysinfo-body .row b{font-weight:600; color:var(--ink-soft)}
.sysinfo-bar-mini{margin-top:10px; padding-top:10px; border-top:1px solid #000; font-size:11px; color:var(--ink-soft);}

.sticker{
  position:absolute; font-family:'VT323',monospace; font-size:18px;
  background:var(--lemon); padding:6px 10px; border:1px solid #000;
  box-shadow:2px 2px 0 #000;
  transform:rotate(-6deg); z-index:3;
}
.sticker.pink{background:var(--hot); color:white}

/* SECTIONS */
.section-h{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft); margin:0 0 12px; display:flex; align-items:center; gap:10px}
.section-h::before{content:"▸"; color:var(--hot)}
.section-h-big{font-family:'VT323',monospace; font-size:48px; line-height:1; margin:0 0 22px; color:var(--ink)}

.work-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.work-card{
  background:white; border:1px solid #000;
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark), 3px 3px 0 #000;
  padding:0; cursor:pointer; transition:transform .12s, box-shadow .12s;
  text-align:left; font-family:inherit; color:inherit;
}
.work-card:hover{transform:translate(-2px,-2px); box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark), 5px 5px 0 #000}
.work-card:active{transform:translate(1px,1px); box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark), 1px 1px 0 #000}
.work-thumb{height:140px; position:relative; overflow:hidden; border-bottom:1px solid #000; background-size:cover; background-position:center}
.work-info{padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px}
.work-info h3{margin:0; font-family:'Public Sans',sans-serif; font-size:16px; font-weight:600}
.work-info p{margin:2px 0 0; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:1px}
.work-info .year{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft)}

.th-loop{background:repeating-linear-gradient(45deg, var(--hot) 0 12px, #ffb1ce 12px 24px)}
.th-atlas{background:
  radial-gradient(circle at 30% 60%, var(--lemon) 0 30px, transparent 31px),
  radial-gradient(circle at 70% 40%, var(--sky) 0 38px, transparent 39px),
  #0a0a18;}
.th-margin{background:linear-gradient(180deg, var(--mint) 0 50%, var(--ink) 50% 100%); position:relative}
.th-margin::after{content:""; position:absolute; inset:auto 0 0 0; height:50%;
  background-image:repeating-linear-gradient(90deg, transparent 0 16px, rgba(255,255,255,.18) 16px 17px)}
.th-plenty{background:conic-gradient(from 0deg at 50% 50%, var(--hot), var(--lemon), var(--mint), var(--sky), var(--hot))}
.th-patch{background:linear-gradient(90deg, var(--hot) 0 25%, var(--lemon) 25% 50%, var(--mint) 50% 75%, var(--sky) 75% 100%)}
.th-mirror{background:repeating-linear-gradient(0deg, var(--ink) 0 6px, #2a2a4a 6px 7px), var(--ink)}

.folder{display:grid; grid-template-columns:repeat(4, 1fr); gap:22px 18px}
.folder-item{display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; padding:10px 6px; border-radius:4px; text-align:center}
.folder-item:hover{background:rgba(0,0,0,.06)}
.folder-item.selected{background:rgba(0,80,180,.18); outline:1px dotted #1a36bd}
.app-icon{
  width:72px; height:72px; border:1px solid #000;
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark), 3px 3px 0 rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  font-family:'VT323',monospace; font-size:32px; color:white;
  image-rendering:pixelated;
}
.folder-item h4{margin:0; font-size:14px; font-weight:600}
.folder-item p{margin:0; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft)}

.post{display:flex; gap:14px; padding:12px 0; border-bottom:1px dashed #999; cursor:pointer; align-items:baseline}
.post:last-child{border-bottom:0}
.post:hover h4{color:var(--hot)}
.post .date{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); min-width:90px}
.post h4{margin:0; font-size:17px; font-weight:600; flex:1; transition:color .12s}
.post .reads{font-family:'IBM Plex Mono',monospace; font-size:11px; color:#999}

.class{padding:14px 16px; border:1px dashed #555; margin-bottom:10px; background:rgba(255,255,255,.5)}
.class .top{display:flex; justify-content:space-between; gap:10px; align-items:baseline; flex-wrap:wrap}
.class h4{margin:0; font-size:17px; font-weight:600}
.class .where{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:1px}
.class p{margin:6px 0 0; font-size:14px; color:#333; line-height:1.5}
.class.now{background:linear-gradient(180deg, rgba(255,243,90,.5), rgba(255,243,90,0)); border-color:var(--hot)}
.class .archive-link{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--hot); margin-top:6px; display:inline-block}

.about-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:start}
.about-grid p{margin:0 0 12px; font-size:15px; line-height:1.6}
.credit{font-family:'IBM Plex Mono',monospace; font-size:12px; color:#444}
.credit-row{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dotted #888}
.credit-row:last-child{border-bottom:0}

/* TASKBAR */
.taskbar{
  position:fixed; left:0; right:0; bottom:0; height:36px; z-index:1000;
  background:var(--tb-bg);
  border-top:1px solid var(--chrome-light);
  box-shadow:inset 0 1px 0 var(--chrome-light);
  display:flex; align-items:center; padding:0 6px; gap:6px;
  font-family:'IBM Plex Mono',monospace; font-size:12px;
}
.start{
  display:flex; align-items:center; gap:6px;
  background:var(--start-bg);
  color:white; padding:4px 12px 4px 8px; border:1px solid #000;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.5);
  font-weight:700; cursor:pointer; font-family:inherit; font-size:12px;
}
.start.open{box-shadow:inset -1px -1px 0 rgba(255,255,255,.4), inset 1px 1px 0 rgba(0,0,0,.3)}
.start::before{
  content:""; width:14px; height:14px; display:inline-block;
  background:conic-gradient(from 0deg, var(--hot), var(--lemon), var(--mint), var(--sky), var(--hot));
  border:1px solid #000;
}
.tb-tasks{display:flex; gap:4px; flex:1; padding:0 8px; overflow:hidden}
.tb-task{
  background:var(--chrome); border:1px solid #000; padding:3px 10px;
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark);
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:180px; color:var(--ink); font-family:inherit; font-size:11px;
}
.tb-task.active{box-shadow:inset -1px -1px 0 var(--chrome-light), inset 1px 1px 0 var(--chrome-dark)}
.tb-tray{
  display:flex; align-items:center; gap:5px;
  background:var(--chrome); border:1px solid #000; padding:3px 10px 3px 6px;
  box-shadow:inset 1px 1px 0 var(--chrome-dark), inset -1px -1px 0 var(--chrome-light);
}
.tb-tray .icon{width:14px; height:14px; image-rendering:pixelated; cursor:pointer; opacity:.85}
.tb-tray .icon:hover{opacity:1}
.tb-tray .clock{margin-left:6px; color:var(--ink); font-variant-numeric:tabular-nums}

/* START MENU */
.start-menu{
  position:fixed; bottom:36px; left:6px; z-index:1100;
  width:280px;
  background:var(--chrome); border:1px solid #000;
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark), 4px 4px 0 rgba(0,0,0,.3);
  display:none; font-family:'IBM Plex Mono',monospace; font-size:13px;
}
.start-menu.open{display:block}
.start-menu .sm-left{
  position:absolute; top:0; bottom:0; left:0; width:32px;
  background:linear-gradient(180deg, #1a36bd, #0e1f6e);
  color:white; writing-mode:vertical-rl; text-orientation:mixed;
  display:flex; align-items:center; justify-content:center; padding:14px 0;
  font-family:'VT323',monospace; font-size:22px; letter-spacing:3px;
}
body[data-skin="lime"] .start-menu .sm-left{background:linear-gradient(180deg, #c2a01a, #6f5c00); color:#fffce6}
body[data-skin="bondi"] .start-menu .sm-left{background:linear-gradient(180deg, #338fb0, #0d6a85)}
.sm-left b{color:var(--hot); font-weight:700}
.start-menu .sm-body{padding:6px 6px 6px 38px}
.sm-item{display:flex; align-items:center; gap:10px; padding:7px 8px; cursor:pointer; color:var(--ink); border-radius:2px;}
.sm-item:hover{background:#1a36bd; color:white}
body[data-skin="lime"] .sm-item:hover{background:#c2a01a; color:#fffce6}
body[data-skin="bondi"] .sm-item:hover{background:#338fb0; color:white}
.sm-item .px{width:18px; height:18px; flex:0 0 18px; image-rendering:pixelated}
.sm-item .chev{margin-left:auto; opacity:.6; font-size:11px}
.sm-divider{border-top:1px solid var(--chrome-dark); border-bottom:1px solid var(--chrome-light); margin:4px 0}
.sm-sub{
  position:absolute; top:0; left:100%; min-width:200px;
  background:var(--chrome); border:1px solid #000;
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark), 4px 4px 0 rgba(0,0,0,.3);
  padding:4px; display:none; z-index:1101;
}
.sm-item.has-sub{position:relative}
.sm-item.has-sub:hover .sm-sub{display:block}
.sm-sub .sm-item{padding:6px 8px}

/* CONTEXT MENU */
.ctx-menu{
  position:fixed; z-index:1200; min-width:200px;
  background:var(--chrome); border:1px solid #000;
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark), 4px 4px 0 rgba(0,0,0,.3);
  padding:4px; font-family:'IBM Plex Mono',monospace; font-size:12px;
}
.ctx-menu button{
  display:block; width:100%; text-align:left; background:transparent;
  border:0; padding:6px 14px; cursor:pointer; color:var(--ink);
  font-family:inherit; font-size:inherit;
}
.ctx-menu button:hover{background:#1a36bd; color:white}
body[data-skin="lime"] .ctx-menu button:hover{background:#c2a01a; color:#fffce6}
body[data-skin="bondi"] .ctx-menu button:hover{background:#338fb0; color:white}
.ctx-menu button[disabled]{color:#999; cursor:default}
.ctx-menu button[disabled]:hover{background:transparent; color:#999}
.ctx-menu .sep{border-top:1px solid var(--chrome-dark); border-bottom:1px solid var(--chrome-light); margin:4px 0}

/* MODAL */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,10,24,.55);
  display:flex; align-items:center; justify-content:center; z-index:2000;
  backdrop-filter:blur(2px);
}
.modal{
  width:min(720px, 92vw); max-height:88vh; overflow:hidden;
  background:var(--chrome); border:1px solid #000;
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark), 8px 8px 0 rgba(0,0,0,.4);
  display:flex; flex-direction:column;
}
.modal .win-bar{cursor:default}
.modal-tabs{display:flex; gap:2px; background:var(--chrome); padding:8px 8px 0; border-bottom:1px solid var(--chrome-dark); font-family:'IBM Plex Mono',monospace; font-size:12px;}
.modal-tab{
  background:var(--chrome); border:1px solid #000; border-bottom:0;
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px 0 0 var(--chrome-dark);
  padding:6px 14px 7px; cursor:pointer; color:var(--ink-soft);
  font-family:inherit; font-size:inherit; position:relative; margin-bottom:-1px;
}
.modal-tab.active{
  background:var(--paper); color:var(--ink); font-weight:600;
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px 0 0 var(--chrome-dark);
  z-index:1;
}
.modal-body{background:var(--paper); padding:20px 24px; overflow-y:auto; flex:1}
.modal-hero{
  height:160px; border:1px solid #000;
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark);
  margin-bottom:14px;
  background:#0a0a18;
  background-size:cover; background-position:center;
}
.modal-body h2{margin:0 0 4px; font-family:'VT323',monospace; font-size:40px; font-weight:400; line-height:1}
.modal-body .role{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:14px}
.modal-body p{margin:0 0 12px; font-size:15px; line-height:1.6}
.modal-body ul, .modal-body ol{margin:0 0 12px 18px; padding:0; font-size:14px; line-height:1.7}
.modal-body img{max-width:100%; height:auto}
.modal-body blockquote{margin:1rem 0; padding:.6rem 1rem; border-left:4px solid var(--hot); background:white}
.modal-body .field-row{
  display:grid; grid-template-columns:140px 1fr; gap:10px;
  padding:6px 0; border-bottom:1px dotted #aaa;
  font-family:'IBM Plex Mono',monospace; font-size:12px;
}
.modal-body .field-row:last-child{border-bottom:0}
.modal-body .field-row b{font-weight:500; color:var(--ink-soft)}
.modal-body .video-embed{
  position:relative; padding-bottom:56.25%; height:0; margin:14px 0;
  background:#000; overflow:hidden;
}
.modal-body .video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.modal-actions{
  background:var(--chrome); padding:10px 14px;
  border-top:1px solid var(--chrome-dark);
  display:flex; gap:8px; justify-content:flex-end;
}
.modal-actions button, .modal-actions a.btn{
  min-width:80px; padding:6px 16px;
  background:var(--chrome); border:1px solid #000;
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark);
  font-family:'IBM Plex Mono',monospace; font-size:12px; cursor:pointer;
  color:var(--ink); text-decoration:none; text-align:center;
}
.modal-actions button.primary, .modal-actions a.btn.primary{background:var(--hot); color:white}
.modal-actions button:active{box-shadow:inset -1px -1px 0 var(--chrome-light), inset 1px 1px 0 var(--chrome-dark)}

/* TWEAKS PANEL */
.tweaks{
  position:fixed; right:24px; bottom:58px; z-index:1500;
  width:300px;
  background:var(--chrome); border:1px solid #000;
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark), 6px 6px 0 rgba(0,0,0,.35);
  display:none; font-family:'IBM Plex Mono',monospace; font-size:12px;
}
.tweaks.open{display:block}
.tweaks-body{padding:14px 16px 16px; background:var(--paper); border-top:1px solid var(--chrome-dark)}
.tweaks-group{margin-bottom:14px}
.tweaks-group .label{display:block; margin-bottom:6px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:1.2px; font-size:11px;}
.skin-row{display:flex; gap:6px}
.skin-swatch{
  flex:1; aspect-ratio:1.3;
  border:1.5px solid #000; cursor:pointer;
  position:relative; overflow:hidden;
  box-shadow:inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark);
}
.skin-swatch.selected{outline:2px solid var(--hot); outline-offset:2px}
.skin-swatch .name{position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.65); color:white; font-size:10px; text-align:center; padding:2px 0; font-family:'IBM Plex Mono',monospace;}
.skin-cobalt{background:linear-gradient(135deg, #4360d6, #112274)}
.skin-lime{background:linear-gradient(135deg, #c8d533, #6f7d00)}
.skin-bondi{background:linear-gradient(135deg, #7ddff0, #0a4e64)}
.check-row{display:flex; align-items:center; gap:8px; padding:4px 0}
.check-row input{accent-color:#1a36bd}

/* COLOPHON */
.colophon{font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(255,255,255,.6); text-align:center; padding:20px 0 60px}
body[data-skin="lime"] .colophon{color:rgba(60,40,0,.6)}
body[data-skin="bondi"] .colophon{color:rgba(255,255,255,.7)}

/* Notepad post-page extras (used on individual /portfolio/foo/ etc.) */
.notepad-host{max-width:920px; margin:60px auto; padding:0 20px}
.notepad-back{font-family:'IBM Plex Mono',monospace; font-size:12px; color:white; text-decoration:none; opacity:.85;
  text-shadow:1px 1px 0 rgba(0,0,0,.4)}
.notepad-back:hover{opacity:1; color:white}
body[data-skin="lime"] .notepad-back{color:#3a3520; text-shadow:1px 1px 0 rgba(255,255,200,.4)}
body[data-skin="bondi"] .notepad-back{color:#0a3a4a; text-shadow:1px 1px 0 rgba(255,255,255,.4)}
.notepad-host .win-body img{max-width:100%; height:auto}
.notepad-host .video-embed{position:relative; padding-bottom:56.25%; height:0; margin:14px 0; background:#000; overflow:hidden}
.notepad-host .video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.notepad-host blockquote{margin:1rem 0; padding:.6rem 1rem; border-left:4px solid var(--hot); background:white}
.notepad-host .gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px; margin:14px 0}
.notepad-host .gallery a{display:block; aspect-ratio:1; overflow:hidden; background:#0a0a18}
.notepad-host .gallery img{width:100%; height:100%; object-fit:cover}
.notepad-host pre, .notepad-host code{font-family:'IBM Plex Mono',monospace; background:#eeeae1}
.notepad-host pre{padding:14px; overflow:auto}
.notepad-host code{padding:2px 6px}
.notepad-host pre code{padding:0; background:transparent}

/* RESPONSIVE */
@media (max-width:880px){
  .desktop-icons{display:none}
  .hero{max-width:calc(100vw - 36px); margin-left:18px; margin-right:18px}
  .hero-grid{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
  .folder{grid-template-columns:repeat(3,1fr)}
  .about-grid{grid-template-columns:1fr}
  .name-card h1{font-size:64px}
  .tweaks{right:6px; left:6px; width:auto}
}
@media (max-width:600px){
  .folder{grid-template-columns:repeat(2,1fr)}
  .name-card h1{font-size:54px}
  .modal-body{padding:14px 16px}
}