/* ===========================================================
   JasonOS — portfolio site
   Original interface inspired by classic platinum-era desktops.
   =========================================================== */

:root{
  --cream:        #ede5c8;
  --cream-2:      #e6dcb6;
  --paper:        #f5efd9;
  --platinum:     #dddddd;
  --platinum-2:   #cfcfcf;
  --platinum-3:   #ececec;
  --platinum-deep:#a9a9a9;
  --ink:          #0c0c0c;
  --ink-soft:     #1d1d1d;
  --rule:         #000;
  --shadow:       0 2px 0 #000, 0 4px 0 rgba(0,0,0,.18);
  --accent:       oklch(46% 0.16 268);   /* deep blue/violet */
  --accent-2:     oklch(58% 0.16 28);    /* tomato */
  --accent-3:     oklch(70% 0.16 145);   /* mossy green */
  --hot:          oklch(60% 0.18 18);
  --hot-2:        oklch(72% 0.16 60);

  --ui-font:      "Pixelify Sans", "ChicagoFLF", "Geneva", system-ui, sans-serif;
  --mono-font:    "VT323", "Monaco", "Andale Mono", monospace;
  --body-font:    "Geneva", "Helvetica Neue", system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--body-font);
  color:var(--ink);
  background: var(--cream);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24' viewBox='0 0 16 24'%3E%3Cpolygon points='0,0 0,20 5,15 8,23 10,22 7,14 13,14' fill='white' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='0,0 0,20 5,15 8,23 10,22 7,14 13,14' fill='black'/%3E%3C/svg%3E") 0 0, default;
  /* dithered classic desktop pattern */
  background-image:
    radial-gradient(rgba(0,0,0,.045) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,.4) 1px, transparent 1.5px);
  background-size: 18px 18px, 18px 18px;
  background-position: 0 0, 9px 9px;
  overflow: hidden;
  -webkit-font-smoothing:antialiased;
}

button{font-family:inherit; color:inherit; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24' viewBox='0 0 16 24'%3E%3Cpolygon points='0,0 0,20 5,15 8,23 10,22 7,14 13,14' fill='white' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='0,0 0,20 5,15 8,23 10,22 7,14 13,14' fill='black'/%3E%3C/svg%3E") 0 0, pointer}
a{color:var(--accent); text-underline-offset:3px; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24' viewBox='0 0 16 24'%3E%3Cpolygon points='0,0 0,20 5,15 8,23 10,22 7,14 13,14' fill='white' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3Cpolygon points='0,0 0,20 5,15 8,23 10,22 7,14 13,14' fill='black'/%3E%3C/svg%3E") 0 0, pointer}
a:hover{color:var(--accent-2)}

/* ============ BOOT ============ */
.boot-screen{
  position:fixed; inset:0; z-index:200;
  background: var(--cream);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 3px);
  display:grid; place-items:center;
  transition: opacity .45s ease, visibility .45s ease;
}
.boot-screen.hidden{opacity:0; visibility:hidden; pointer-events:none}
.boot-frame{
  width: min(520px, 92vw);
  background: var(--platinum);
  border:2px solid var(--rule);
  box-shadow: var(--shadow);
  padding: 26px 28px 20px;
  text-align:center;
  position:relative;
}
.boot-frame::before{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  background: linear-gradient(135deg, transparent 60%, rgba(255,255,255,.5) 60%, transparent 64%);
  mix-blend-mode:overlay;
}
.boot-logo{display:flex; justify-content:center; margin-bottom:8px}
.boot-title{
  font-family:var(--ui-font); font-weight:700; font-size:34px;
  letter-spacing:.5px;
  margin-top:6px;
}
.boot-sub{font-family:var(--mono-font); font-size:18px; color:#444; margin-bottom:18px}

.boot-walker{
  position:relative;
  background: #fff;
  border:2px solid var(--rule);
  height: 64px;
  margin: 14px 0 18px;
  overflow:hidden;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px);
}
.walker-floor{
  position:absolute; bottom:8px; left:0; right:0; height:2px;
  background: var(--rule);
}
.walker-character{
  position:absolute; bottom:10px; left:0;
  width:24px; height:36px;
  animation: walkX 4s linear infinite;
}
@keyframes walkX {
  0% { transform: translateX(-30px); }
  100% { transform: translateX(calc(100% + 520px)); }
}
.walker-character .px{position:absolute; background:var(--rule)}
.walker-character .head{ top:0; left:6px; width:12px; height:12px}
.walker-character .hat { top:-4px; left:4px; width:16px; height:5px}
.walker-character .torso{ top:12px; left:6px; width:12px; height:14px; background:var(--accent)}
.walker-character .arm-l{ top:14px; left:1px; width:6px; height:3px; background:var(--accent); animation: armA .4s steps(2) infinite}
.walker-character .arm-r{ top:14px; left:17px; width:6px; height:3px; background:var(--accent); animation: armB .4s steps(2) infinite}
.walker-character .leg-l{ top:26px; left:6px; width:5px; height:10px; animation: legA .4s steps(2) infinite}
.walker-character .leg-r{ top:26px; left:13px; width:5px; height:10px; animation: legB .4s steps(2) infinite}
@keyframes legA{ 0%{transform:rotate(0)} 50%{transform:translate(-2px,2px) skewX(-12deg)} 100%{transform:rotate(0)} }
@keyframes legB{ 0%{transform:rotate(0)} 50%{transform:translate(2px,2px) skewX(12deg)} 100%{transform:rotate(0)} }
@keyframes armA{ 0%{transform:translateY(0)} 50%{transform:translateY(2px)} 100%{transform:translateY(0)} }
@keyframes armB{ 0%{transform:translateY(2px)} 50%{transform:translateY(0)} 100%{transform:translateY(2px)} }

.boot-progress{margin: 6px 4px 4px}
.boot-progress-track{
  height:14px; border:2px solid var(--rule);
  background: #fff;
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.07) 0 4px, transparent 4px 8px);
  position:relative;
}
.boot-progress-fill{
  height:100%; width:0%;
  background: var(--accent);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.45), transparent 40%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 4px, transparent 4px 8px);
  transition: width .12s linear;
}
.boot-progress-meta{
  font-family:var(--mono-font); font-size:18px; color:#333;
  display:flex; justify-content:space-between; margin-top:6px;
}
.boot-extensions{
  display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center;
  font-family:var(--mono-font); font-size:16px; color:#555;
  margin-top:14px;
}
.boot-extensions span{opacity:.2; transition: opacity .2s}
.boot-extensions span.lit{opacity:1; color:var(--accent)}
.boot-skip{
  margin-top:12px; background:none; border:0; color:#666;
  font-family:var(--mono-font); font-size:14px; letter-spacing:.5px;
}

/* hamburger button — hidden on desktop */
.menu-hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 16px;
  color: var(--ink);
  padding: 0 6px;
  height: 22px;
  cursor: pointer;
  font-family: var(--ui-font);
  line-height: 1;
}
.menu-hamburger:hover { background: var(--ink); color: #fff; }

/* ============ MENU BAR ============ */
.menubar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:24px;
  background: linear-gradient(180deg, #fcfcfc, #d8d8d8 50%, #c8c8c8);
  border-bottom: 2px solid var(--rule);
  font-family: var(--ui-font);
  user-select:none;
}
.menubar-inner{
  display:flex; align-items:center; height:100%; padding: 0 12px; gap: 14px;
}
.menu-logo{display:flex; align-items:center}
.diamond{
  width:12px; height:12px; background:var(--rule);
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px #fff inset;
}
.diamond.big{width:24px; height:24px; box-shadow: 0 0 0 4px #fff inset}
.menu-item{
  font-size:16px; font-weight:500; padding: 0 6px; height: 22px;
  display:flex; align-items:center; cursor:pointer; border-radius:2px;
}
.menu-item:hover, .menu-item.open{ background: var(--ink); color:#fff }
.menu-spacer{flex:1}
.menu-applet{
  font-family:var(--mono-font); font-size:16px;
  display:flex; align-items:center; gap:6px; padding: 0 8px; height: 22px;
  border-left:1px solid #999;
}
.menu-clock{font-feature-settings:"tnum"; min-width: 96px; justify-content:flex-end}
.bat{display:inline-block; width:18px; height:9px; border:2px solid var(--rule); position:relative; background:#fff}
.bat::after{content:""; position:absolute; right:-3px; top:1px; width:2px; height:3px; background:var(--rule)}
.bat-fill{position:absolute; inset:1px; width:80%; background:var(--accent-3)}

.menu-dropdown{
  position:fixed; top:24px; z-index:70;
  background:#fff; border:2px solid var(--rule); box-shadow: var(--shadow);
  font-family:var(--ui-font); font-size:15px; min-width: 180px;
  padding: 4px 0;
}
.menu-dropdown ul{list-style:none; margin:0; padding:0}
.menu-dropdown li{
  padding: 4px 16px; cursor:pointer; display:flex; justify-content:space-between; gap:18px;
}
.menu-dropdown li:hover{background:var(--ink); color:#fff}
.menu-dropdown li.sep{padding:0; height:1px; background:#aaa; margin: 4px 0; cursor:default}
.menu-dropdown li.disabled{color:#999; cursor:default}
.menu-dropdown li.disabled:hover{background:transparent; color:#999}
.menu-dropdown .kbd{font-family:var(--mono-font); color:#777}

/* ============ DESKTOP ============ */
.desktop{
  position:fixed; inset:24px 0 26px; /* leave room for menu + footer marquee */
  overflow:hidden;
}
.desktop::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:999;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 3px);
}
.desktop-icons{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:5;
}
.desktop-icon{
  position:absolute;
  pointer-events:auto;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:0; padding:4px;
  width: 88px;
  font-family:var(--ui-font); font-size:14px;
  user-select:none;
  touch-action:none;
  transition: transform .12s cubic-bezier(0.34,1.5,0.64,1);
}
.desktop-icon:hover:not(.dragging){
  transform: translateY(-3px) scale(1.04);
}
.desktop-icon.dragging{ opacity:.8; z-index: 50; transform: scale(1.06); }
/* default tray positions — overridden once user drags */
.desktop-icon[data-icon-id="hd"]    { right:14px; top:6px;   }
.desktop-icon[data-icon-id="album"] { right:14px; top:88px;  }
.desktop-icon[data-icon-id="readme"]{ right:14px; top:170px; }
.desktop-icon[data-icon-id="guest"] { right:14px; top:252px; }
.desktop-icon[data-icon-id="np"]    { right:14px; top:334px; }
.desktop-icon[data-icon-id="blog"]  { right:14px; top:416px; }
.desktop-icon[data-icon-id="trash"] { right:14px; top:498px; }
/* highlight when something is hovered over Trash */
.desktop-icon.drop-target{
  outline: 2px dashed var(--ink);
  outline-offset: 2px;
}
.desktop-icon:focus{outline:none}
.desktop-icon.selected .icon-label,
.desktop-icon:focus-visible .icon-label{
  background: var(--ink); color:#fff; outline: 1px dotted #fff; outline-offset:1px;
}
.desktop-icon.in-trash{ display:none; }

/* Icon wobble on selection */
@keyframes iconWobble {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-5deg) scale(1.05); }
  50%  { transform: rotate(4deg) scale(1.05); }
  75%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}
.desktop-icon.icon-wobble { animation: iconWobble .35s cubic-bezier(.4,0,.2,1) forwards; }
.icon-label{
  display:inline-block; padding: 1px 4px; border-radius:1px;
  text-shadow: 0 0 2px rgba(255,255,255,.7);
}
.icon-art{
  width:40px; height:40px; display:block; image-rendering:pixelated;
  background-repeat:no-repeat; background-position:center;
}
/* simple svg-based icons drawn as data URIs (kept original / non-branded) */
.icon-hd{
  background: #fff;
  border: 2px solid var(--rule);
  position:relative;
  box-shadow: 2px 2px 0 var(--rule);
}
.icon-hd::before{
  content:""; position:absolute; inset:6px;
  background: repeating-linear-gradient(0deg, var(--rule) 0 2px, transparent 2px 5px);
}
.icon-hd::after{
  content:"HD"; position:absolute; right:2px; bottom:-2px;
  font-family:var(--ui-font); font-size:10px; background:#fff; padding: 0 2px;
  border:1px solid var(--rule); line-height:1;
}

.icon-doc{
  width:34px; height:42px;
  background: #fff;
  border:2px solid var(--rule);
  position:relative;
  box-shadow: 2px 2px 0 var(--rule);
  clip-path: polygon(0 0, 76% 0, 100% 22%, 100% 100%, 0 100%);
}
.icon-doc::before{
  content:""; position:absolute; left:6px; right:6px; top:18px; height:14px;
  background: repeating-linear-gradient(180deg, var(--rule) 0 2px, transparent 2px 4px);
}

.icon-book{
  width:38px; height:36px;
  background:#fff;
  border:2px solid var(--rule);
  box-shadow: 2px 2px 0 var(--rule);
  position:relative;
}
.icon-book::before{
  content:""; position:absolute; inset:5px;
  border-left: 2px solid var(--rule);
  background: repeating-linear-gradient(180deg, transparent 0 2px, var(--rule) 2px 3px);
}
.icon-book::after{
  content:""; position:absolute; left:50%; top:5px; bottom:5px; width:2px; background:var(--rule);
}

.icon-cd{
  width:38px; height:38px; border-radius:50%; background:#fff; border:2px solid var(--rule);
  position:relative;
  box-shadow:
    2px 2px 0 var(--rule),
    inset 0 0 0 6px rgba(0,0,0,.06),
    inset 0 0 0 12px transparent;
}
.icon-cd::after{
  content:""; position:absolute; inset:14px; border-radius:50%;
  background: var(--rule);
}
.icon-trash{
  width:32px; height:36px;
  background:#fff;
  border:2px solid var(--rule);
  border-top: none;
  box-shadow: 2px 2px 0 var(--rule);
  position:relative;
  margin-top: 8px;
}
.icon-trash::after{
  content:""; position:absolute; inset:8px 6px 4px;
  background: repeating-linear-gradient(0deg, var(--rule) 0 2px, transparent 2px 6px);
}
/* Lid on the .icon-art wrapper — sits above the body, escapes no clip-path issues */
.icon-art.icon-trash{
  position: relative;
  display: block;
}
.icon-art.icon-trash::before{
  content:""; position:absolute; left:-2px; right:-2px; top:0; height:7px; z-index:2;
  background:#fff; border:2px solid var(--rule);
  transform-origin: 20% center;
  transition: transform .18s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.desktop-icon.drop-target .icon-art.icon-trash::before{
  transform: rotate(-30deg) translateY(-6px);
}
/* Remove the old selector from previous attempt */
.desktop-icon[data-icon-id="trash"] .icon-art{ position: relative; }
.desktop-icon[data-icon-id="trash"] .icon-art::before{ content: none; }
.icon-trash.full{ background:#f8e9b0 }

/* Folder icon (Photo Album) */
.icon-folder{
  width:42px; height:34px;
  background: #f8d870;
  border:2px solid var(--rule);
  box-shadow: 2px 2px 0 var(--rule);
  position:relative;
}
.icon-folder::before{
  content:""; position:absolute; left:0; top:-6px; width:18px; height:8px;
  background:#f8d870; border:2px solid var(--rule); border-bottom:0;
  border-radius: 2px 4px 0 0;
}
.icon-folder::after{
  content:""; position:absolute; left:4px; right:4px; top:6px; bottom:4px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 4px);
}

/* ============ PHOTO ALBUM ============ */
.album{ display:flex; flex-direction:column; height:100%; background: var(--platinum-3) }
.album-toolbar{
  flex:0 0 auto;
  display:grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items:center;
  padding: 6px 10px;
  background: var(--platinum);
  border-bottom: 2px solid var(--rule);
  font-family: var(--mono-font); font-size: 16px;
}
.album-back{
  font-family: var(--ui-font); font-size: 13px;
  background:#fff; border:2px solid var(--rule); box-shadow: 2px 2px 0 var(--rule);
  padding: 2px 10px; border-radius: 10px;
}
.album-back:disabled{ opacity:.5; cursor:default; box-shadow:none }
.album-crumb{ color:#222 }
.album-meta{ color:#555; font-size: 14px }
.album-stage{
  flex:1 1 auto; min-height:0; overflow:auto;
  padding: 14px 16px;
}
.folder-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 18px 16px;
}
.album-folder{
  background: none; border:0; padding: 6px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family: var(--ui-font); font-size: 13px;
  cursor:pointer;
}
.album-folder:hover .folder-art{ filter: brightness(1.05) }
.album-folder:focus-visible .folder-label{ background: var(--ink); color:#fff }
.folder-art{
  width: 88px; height: 70px;
  background: #f8d870;
  border: 2px solid var(--rule);
  box-shadow: 3px 3px 0 var(--rule);
  position: relative;
}
.folder-art::before{
  content:""; position:absolute; left:0; top:-10px; width:38px; height:12px;
  background: #f8d870; border:2px solid var(--rule); border-bottom: 0;
  border-radius: 2px 6px 0 0;
}
.folder-art::after{
  content:""; position:absolute; left:6px; right:6px; top:6px; bottom:6px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 5px);
}
.folder-label{ text-align:center; line-height: 1.2; padding: 1px 4px }
.folder-when{ font-family: var(--mono-font); color:#666; font-size: 13px }

/* photo thumbnail grid (inside a folder) */
.photo-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.photo-card{
  background:#fff; border:2px solid var(--rule); box-shadow: 3px 3px 0 var(--rule);
  padding: 6px;
  display:flex; flex-direction:column; gap: 4px;
}
.photo-thumb{
  height: 130px; border:1px solid var(--rule);
  display:flex; align-items:flex-end; padding: 5px;
  position:relative; overflow:hidden;
  background-image:
    repeating-linear-gradient(45deg, var(--platinum) 0 6px, var(--platinum-2) 6px 12px);
}
.photo-thumb[data-tone="paint"]{
  background-image:
    linear-gradient(180deg, oklch(78% .12 28), oklch(60% .14 30)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px);
}
.photo-thumb[data-tone="press"]{
  background-image:
    repeating-linear-gradient(0deg, #f1ecd2 0 4px, #e7dfb6 4px 8px);
}
.photo-thumb[data-tone="event"]{
  background-image:
    radial-gradient(circle at 30% 30%, oklch(72% .14 60), oklch(48% .12 40));
}
.photo-thumb[data-tone="forest"]{
  background-image:
    linear-gradient(180deg, oklch(78% .14 145), oklch(48% .14 145));
}
.photo-thumb[data-tone="ocean"]{
  background-image:
    linear-gradient(180deg, oklch(80% .12 230), oklch(48% .14 250));
}
.photo-thumb[data-tone="studio"]{
  background-image:
    linear-gradient(180deg, oklch(75% .12 285), oklch(45% .15 285));
}
.photo-thumb[data-tone="cream"]{
  background: var(--cream);
  background-image:
    radial-gradient(rgba(0,0,0,.14) 1px, transparent 1.4px);
  background-size: 8px 8px;
}
.photo-thumb[data-tone="night"]{
  background-image:
    radial-gradient(circle at 70% 30%, oklch(70% .15 60) 0 6%, transparent 7%),
    linear-gradient(180deg, oklch(28% .08 270), oklch(12% .04 270));
}
.photo-thumb[data-tone="kraft"]{
  background-image:
    repeating-linear-gradient(45deg, oklch(60% .08 70) 0 6px, oklch(54% .08 70) 6px 12px);
}
.photo-thumb .thumb-tag{
  font-family:var(--mono-font); font-size:13px;
  background: rgba(255,255,255,.85); border:1px solid var(--rule);
  padding: 0 6px;
}
.photo-card .photo-cap{
  font-family: var(--mono-font); font-size: 14px; color:#333;
  padding: 0 2px 2px;
}
.photo-card .photo-tip{
  font-family: var(--mono-font); font-size: 12px; color:#777;
  padding: 0 2px 4px;
}

.sticky-note{
  position:absolute; left:18px; top:18px; z-index:4;
  cursor:grab; touch-action:none; user-select:none;
  width:200px; padding: 14px 14px 12px; transform: rotate(-3deg);
  background: #fff7a8;
  background-image: linear-gradient(180deg, #fff8b0, #f3df66);
  border:1px solid #b59600;
  box-shadow: 6px 8px 0 rgba(0,0,0,.18);
  font-family: var(--mono-font);
  font-size: 18px; line-height: 1.15;
  color:#3a2c00;
}
.sticky-note p{margin:0}
.sticky-note .sticky-fold{
  position:absolute; right:0; top:0; width:22px; height:22px;
  background: linear-gradient(225deg, #d4b800 0 50%, transparent 50%);
}

.webring{
  position:absolute; left:18px; bottom:24px; z-index:4;
  display:flex; flex-direction:column; gap:8px;
}
.badge{
  width:120px; padding:8px 6px; text-align:center;
  font-family:var(--ui-font); font-size:11px; line-height:1.3;
  border:2px solid var(--rule);
  box-shadow: 3px 3px 0 var(--rule);
  letter-spacing:.4px;
}
.badge-1{ background: #c0d8ff; color:#0a1d4a }
.badge-2{ background: #ffd0e0; color:#5b0a2c }
.badge-3{ background: #d8f0c2; color:#1c3a09 }

.visitor{
  position:absolute; right:120px; bottom:18px; z-index:4;
  font-family:var(--ui-font); font-size:11px; text-align:center;
  background: #fff;
  border:2px solid var(--rule); padding: 4px 6px 6px;
  box-shadow: 3px 3px 0 var(--rule);
}
.visitor-label{color:#666; margin-bottom:3px}
.visitor-digits{
  display:inline-block; font-family:var(--mono-font); font-size:24px;
  color:#0d0;
  background:#000; padding: 2px 8px;
  letter-spacing:3px;
  border:1px solid #555;
}

/* ============ WINDOWS ============ */
.window{
  position:absolute;
  background: var(--platinum-3);
  border:2px solid var(--rule);
  box-shadow: 4px 4px 0 rgba(0,0,0,.45);
  font-family: var(--body-font);
  display:flex; flex-direction:column;
  min-width: 320px; min-height: 220px;
  outline:none;
  /* default sizing */
  width: 880px; max-width: 96vw;
  height: 640px; max-height: 88vh;
  will-change: transform, opacity;
}
.window:not(.is-active){ box-shadow: 3px 3px 0 rgba(0,0,0,.25) }
.window.collapsed{ max-height: 26px !important; min-height: 26px; overflow:hidden; transition: max-height .2s cubic-bezier(.4,0,.2,1); }
.window:not(.collapsed){ max-height: 100vh; transition: max-height .25s cubic-bezier(0,1,.4,1); }
.window.collapsed .window-body, .window.collapsed .resize-grip{ display:none }

.title-bar{
  height: 22px; flex: 0 0 22px;
  display:grid; grid-template-columns: 22px 1fr 22px 22px;
  align-items:center; padding: 0 4px;
  background: var(--platinum);
  border-bottom: 2px solid var(--rule);
  cursor: grab;
}
.title-bar.dragging{cursor:grabbing}
.title-bar-stripes{
  height: 14px; position:relative;
  display:flex; align-items:center; justify-content:center;
  background-image: repeating-linear-gradient(0deg,
    var(--ink) 0 1px, transparent 1px 3px);
  margin: 0 6px;
}
.window:not(.is-active) .title-bar-stripes{
  background-image: repeating-linear-gradient(0deg,
    rgba(0,0,0,.35) 0 1px, transparent 1px 3px);
}
.title-text{
  font-family:var(--ui-font); font-size:14px;
  background: var(--platinum); padding: 0 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ctl{
  width:14px; height:14px;
  background:#fff; border:1px solid var(--rule);
  padding:0; line-height:1;
  display:inline-block; position:relative;
  box-shadow: inset 0 0 0 1px #fff, 1px 1px 0 rgba(0,0,0,.25);
  border-radius:2px;
}
.ctl:hover{background:#e7e7e7}
.ctl.close::before{
  content:""; position:absolute; inset:3px;
  background: linear-gradient(45deg, transparent 45%, var(--rule) 45% 55%, transparent 55%),
              linear-gradient(-45deg, transparent 45%, var(--rule) 45% 55%, transparent 55%);
  opacity:0;
}
.ctl.close:hover::before{opacity:1}
.ctl.zoom::before{
  content:""; position:absolute; inset:3px;
  border:1px solid var(--rule);
}
.ctl.collapse::before{
  content:""; position:absolute; left:3px; right:3px; top:5px; height:2px; background:var(--rule);
}

.window-body{
  flex:1 1 auto; min-height:0;
  background: var(--platinum-3);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.resize-grip{
  position:absolute; right:0; bottom:0; width:16px; height:16px;
  cursor: se-resize;
  background:
    linear-gradient(135deg, transparent 0 4px, var(--rule) 4px 5px, transparent 5px 8px,
                    var(--rule) 8px 9px, transparent 9px 12px, var(--rule) 12px 13px, transparent 13px);
  border-left:1px solid var(--rule); border-top:1px solid var(--rule);
  background-color: var(--platinum);
}

/* ============ PORTFOLIO BODY ============ */
.portfolio{
  display:flex; flex-direction:column;
  height:100%;
  overflow: hidden;
}
.hero{
  flex: 0 0 auto;
  display:grid; grid-template-columns: 116px 1fr;
  gap: 18px;
  padding: 16px 18px 14px;
  background: linear-gradient(180deg, var(--paper), var(--platinum-3));
  border-bottom: 2px solid var(--rule);
}
.hero-portrait .portrait-frame{
  width:104px; height:104px;
  background:#fff;
  border:2px solid var(--rule);
  box-shadow: 3px 3px 0 var(--rule);
  padding: 6px;
}
.portrait-art{
  width:100%; height:100%;
  background:
    repeating-linear-gradient(45deg, var(--platinum) 0 6px, var(--platinum-2) 6px 12px);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  border:1px solid var(--rule);
  overflow:hidden;
}
.portrait-art.has-photo{ background: #fff }
.portrait-photo{
  width:100%; height:100%; object-fit:cover; display:block;
  image-rendering: pixelated;
}
.portrait-px{
  width:54px; height:54px; background:#000;
  /* simple silhouette using radial-gradient */
  -webkit-mask:
    radial-gradient(circle at 50% 30%, #000 16%, transparent 17%),
    radial-gradient(ellipse 60% 36% at 50% 78%, #000 60%, transparent 61%);
  mask:
    radial-gradient(circle at 50% 30%, #000 16%, transparent 17%),
    radial-gradient(ellipse 60% 36% at 50% 78%, #000 60%, transparent 61%);
}
.portrait-tag{
  position:absolute; left:0; right:0; bottom:-2px;
  font-family: var(--mono-font); font-size:12px; color:#444;
  text-align:center; background: rgba(255,255,255,.7);
}
.hero-eyebrow{
  font-family: var(--mono-font); font-size:18px; color:#444;
  margin-bottom:2px;
}
.hero-name{
  font-family: var(--ui-font); font-weight:700;
  font-size: 34px; line-height: 1; margin: 2px 0 4px;
  letter-spacing:.3px;
}
.hero-role{
  font-family: var(--mono-font); font-size:18px; margin: 0 0 8px; color:#222;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hero-marquee{
  border:2px solid var(--rule); background:#fff;
  height: 22px; overflow:hidden; position:relative;
  margin-bottom: 8px;
}
.marquee-track{
  display:flex; gap:36px; align-items:center; height:100%;
  white-space:nowrap; padding-left:100%;
  animation: marquee 40s linear infinite;
  font-family: var(--mono-font); font-size:16px; color:#0a3;
}
.marquee-track span{flex: 0 0 auto}
@keyframes marquee{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

.hero-tags{display:flex; gap:6px; flex-wrap:wrap}
.tag{
  display:inline-block;
  font-family: var(--ui-font); font-size:12px;
  background:#fff; border:2px solid var(--rule);
  padding: 2px 8px;
  box-shadow: 2px 2px 0 var(--rule);
}

/* ===== Tabs ===== */
.tabs{
  flex: 0 0 auto;
  display:flex; gap: 0; padding: 8px 12px 0;
  background: var(--platinum);
  border-bottom: 2px solid var(--rule);
  position: relative;
}
.tab{
  font-family: var(--ui-font); font-size: 15px;
  background: var(--platinum-2);
  border: 2px solid var(--rule);
  border-bottom: 0;
  padding: 6px 14px 8px;
  margin-right: -2px;
  position:relative; top:2px;
  border-radius: 6px 6px 0 0;
  cursor:pointer;
}
.tab:hover{ background: #e7e7e7 }
.tab.is-active{
  background: var(--platinum-3);
  z-index:2;
  top:1px;
  padding-bottom:9px;
  font-weight:600;
}

.tab-shell{
  flex:1 1 auto;
  min-height: 0;
  background: var(--platinum-3);
  position:relative;
  overflow: hidden;
}
.tab-panel{
  position:absolute; inset:0;
  overflow:auto;
  padding: 14px 18px 18px;
  visibility:hidden;
  opacity:0;
  transition: opacity .15s ease;
}
.tab-panel.is-active{ visibility:visible; opacity:1; }
.tab-panel::-webkit-scrollbar{ width:16px; height:16px }
.tab-panel::-webkit-scrollbar-track{
  background: var(--platinum-2);
  border-left:2px solid var(--rule);
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 4px, transparent 4px 8px);
}
.tab-panel::-webkit-scrollbar-thumb{
  background: var(--platinum);
  border:2px solid var(--rule);
}

.panel-toolbar{
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--mono-font); font-size:16px; color:#444;
  border-bottom: 1px dashed #888; padding-bottom: 6px; margin-bottom: 12px;
}

/* ===== Experience ===== */
.exp-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 14px}
.exp-card{
  display:grid; grid-template-columns: 168px 1fr; gap: 14px;
  background: #fff;
  border: 2px solid var(--rule);
  box-shadow: 3px 3px 0 var(--rule);
  padding: 12px 14px;
  position:relative;
}
.exp-when{
  position:relative;
  font-family: var(--mono-font); font-size: 16px;
  padding-left: 16px;
}
.exp-when .dot{
  position:absolute; left:0; top:6px;
  width:10px; height:10px; background:var(--accent);
  box-shadow: 0 0 0 2px var(--rule);
}
.exp-when .when-line{
  position:absolute; left:4px; top:16px; bottom:-10px; width:2px;
  background: repeating-linear-gradient(180deg, var(--rule) 0 2px, transparent 2px 4px);
}
.when-label{ display:inline-block; padding-top: 1px; color:#222 }
.exp-logo{
  margin-top: 12px;
  width: 130px;
  background:#fff;
  border:2px solid var(--rule);
  box-shadow: 2px 2px 0 var(--rule);
  padding: 8px;
  display:flex; align-items:center; justify-content:center;
  min-height: 88px;
}
.exp-logo img{
  max-width: 100%; max-height: 80px;
  display:block;
  image-rendering: -webkit-optimize-contrast;
}
.exp-logo-text{
  background: var(--platinum);
  font-family: var(--ui-font);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--ink);
  min-height: 88px;
  text-shadow: 1px 1px 0 #fff, 2px 2px 0 #999;
}
.exp-logo-text span{
  display:inline-block;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px);
  padding: 6px 10px;
  border:1px dashed #888;
}
.exp-body header{display:flex; flex-direction:column; gap:2px; margin-bottom:6px}
.exp-body h3{
  font-family: var(--ui-font); font-size: 19px; font-weight:600; margin:0;
}
.exp-org{font-family:var(--ui-font); font-size:15px; color:var(--accent)}
.exp-loc{font-family:var(--mono-font); font-size:15px; color:#555}
.exp-body ul{ margin: 4px 0 6px 0; padding-left: 18px; line-height:1.45 }
.exp-body li{ margin: 2px 0; font-size: 14px }
.exp-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top: 4px }
.exp-chips span{
  font-family: var(--mono-font); font-size: 14px;
  background: #f4ecca; border:1px solid var(--rule); padding: 0 6px;
}

/* ===== Skills ===== */
.skills-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 14px;
}
.skill-block{
  background: #fff; border: 2px solid var(--rule); box-shadow: 3px 3px 0 var(--rule);
  padding: 10px 12px;
}
.skill-block h4{
  font-family: var(--ui-font); font-size: 17px; margin: 0 0 8px;
  border-bottom: 1px solid var(--rule); padding-bottom: 4px;
}
.skill-row{
  display:grid; grid-template-columns: 1fr 110px 92px;
  gap: 8px; align-items:center;
  font-size: 13px;
  padding: 3px 0;
}
.skill-row em{font-family:var(--mono-font); font-style:normal; font-size:14px; color:#555}
.meter{
  position:relative; height: 10px;
  background:#fff; border:1px solid var(--rule);
  background-image: repeating-linear-gradient(90deg,
      transparent 0 calc(100%/5 - 2px), var(--rule) calc(100%/5 - 2px) calc(100%/5));
}
.meter::before{
  content:""; position:absolute; inset:1px 1px 1px 1px;
  background: var(--accent);
  width: calc((var(--lvl, 0) / 5) * 100% - 2px);
}
.meter[data-level="2"]{ --lvl:2 }
.meter[data-level="3"]{ --lvl:3 }
.meter[data-level="5"]{ --lvl:5 }

.toolbox-row{
  background: #fff; border: 2px solid var(--rule); box-shadow: 3px 3px 0 var(--rule);
  padding: 10px 12px;
}
.toolbox-row h4{ font-family: var(--ui-font); font-size:17px; margin: 0 0 10px;
  border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.tool-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 12px 10px }
.tool{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size: 12px; font-family: var(--mono-font); }
.tool-ic{
  width:42px; height:42px;
  background:#fff; border:2px solid var(--rule); box-shadow: 2px 2px 0 var(--rule);
  display:grid; place-items:center;
  font-family: var(--ui-font); font-weight:700; font-size:18px;
}
.tool-ic[data-tool="canva"]{ background: #7d2ae8; color: #fff; font-style: italic; letter-spacing: -2px; }
.tool-ic[data-tool="ps"]{ background: #1f3357; color:#7cf }
.tool-ic[data-tool="ai"]{ background: #4d2d05; color:#ffb648 }
.tool-ic[data-tool="id"]{ background: #4a0a26; color:#ff7ec0 }
.tool-ic[data-tool="pr"]{ background: #2c0d4d; color:#bf99ff }
.tool-ic[data-tool="excel"]{ background: #126b3a; color:#fff }
.tool-ic[data-tool="word"]{ background: #1f3877; color:#fff }
.tool-ic[data-tool="logic"]{ background:#000; color:#fff }
.tool-ic[data-tool="figma"]{ background: #f24e1e; color:#fff }
.tool-ic[data-tool="ai2"]{ background: #ffd9a3; color: #000; }
.tool-ic[data-tool="motion"]{ background: #fff }
.tool-ic[data-tool="fcp"]{ background: #c5d0ff; color: #4a4aff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* ===== Projects ===== */
.proj-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.proj-card{
  background:#fff; border:2px solid var(--rule); box-shadow: 3px 3px 0 var(--rule);
  padding: 10px;
  display:flex; flex-direction:column; gap: 6px;
}
.proj-card h4{
  font-family: var(--ui-font); font-size: 18px; margin: 4px 0 0;
}
.proj-card p{margin:0; font-size: 13.5px; line-height: 1.45}
.proj-meta{display:flex; gap:6px; flex-wrap:wrap; margin-top: 2px}
.proj-meta span{
  font-family: var(--mono-font); font-size: 13px;
  background: var(--paper); border:1px solid var(--rule); padding: 0 5px;
}
.proj-thumb{
  height: 124px;
  border:2px solid var(--rule);
  position:relative; overflow:visible;
  display:flex; align-items:flex-end; padding: 6px;
  clip-path: none;
}
.proj-thumb > *:not(.thumb-tag) {
  overflow: hidden;
}
.thumb-tag{
  font-family: var(--mono-font); font-size: 13px;
  background: rgba(255,255,255,.85); border: 1px solid var(--rule);
  padding: 0 6px;
  position: relative;
  z-index: 2;
}
.thumb-darmis{
  background: linear-gradient(135deg, #d6a06a, #5b3818);
}
.thumb-darmis::before{
  content:"D·D"; position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--ui-font); font-weight:700; font-size:54px; color:#fff5e1;
  letter-spacing:6px;
}
.thumb-shopee{
  background: linear-gradient(180deg, #ee4d2d 0%, #f26b40 100%);
  overflow: hidden;
}
.thumb-shopee::before{
  content:"Shopee"; position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--ui-font); font-weight:700; font-size:42px;
  color:#fff; letter-spacing:1px;
}
.thumb-shopee::after{
  content:""; position:absolute;
  left:50%; bottom:-18px;
  width:80px; height:80px;
  transform:translateX(-50%);
  border-radius:50%;
  background: rgba(255,255,255,0.12);
}
.thumb-cadenza{
  background: #1c2b4a;
  background-image: radial-gradient(rgba(255,255,255,.2) 1px, transparent 1px);
  background-size: 6px 6px;
}
.thumb-cadenza::before{
  content:"CADENZA"; position:absolute; inset:0;
  display:grid; place-items:center; color:#f8e7ad;
  font-family: var(--ui-font); font-size:30px; letter-spacing: 6px;
}
.thumb-cadenza-red{
  background: linear-gradient(180deg, #6c0a0a, #a32424);
}
.thumb-cadenza-red::before{
  content:"♪"; position:absolute; inset:0;
  display:grid; place-items:center;
  color:#ffd6d6; font-size: 64px;
}
.thumb-fama{
  background: linear-gradient(180deg, #0a0a0a 0%, #1c1c1c 100%);
  overflow: hidden;
}
.thumb-fama::before{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  transform:translateX(-50%);
  width:18px; height:70px;
  background:#fff;
  box-shadow:
    0 -70px 0 4px #fff,
    0 -82px 0 0px #fff,
    -14px -66px 0 0 #fff,
    14px -66px 0 0 #fff,
    -6px -90px 0 2px #fff,
    6px -90px 0 2px #fff,
    0 -100px 0 3px #fff;
}
.thumb-fama::after{
  content:"";
  position:absolute;
  left:50%; bottom:46px;
  transform:translateX(-50%);
  width:24px; height:24px;
  border:3px solid #fff;
  border-radius:50%;
  background:#1c1c1c;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}
.thumb-tourism{
  background: linear-gradient(180deg, #1a1a2e 0%, #e8621a 55%, #f5a623 100%);
  position:relative;
  overflow:hidden;
}
.thumb-tourism::before{
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height:52px;
  background:#111;
  clip-path: polygon(
    0% 100%,
    0% 60%,
    3% 60%, 3% 40%,
    5% 40%, 5% 55%,
    8% 55%, 8% 30%,
    10% 30%, 10% 20%,
    11% 20%, 11% 10%,
    12% 10%, 12% 20%,
    13% 20%, 13% 30%,
    15% 30%, 15% 50%,
    18% 50%, 18% 35%,
    20% 35%, 20% 45%,
    24% 45%, 24% 25%,
    25% 25%, 25% 15%,
    26% 15%, 26% 25%,
    28% 25%, 28% 40%,
    32% 40%, 32% 50%,
    36% 50%, 36% 38%,
    38% 38%, 38% 28%,
    39% 28%, 39% 38%,
    42% 38%, 42% 55%,
    46% 55%, 46% 42%,
    50% 42%, 50% 30%,
    51% 30%, 51% 20%,
    52% 20%, 52% 30%,
    54% 30%, 54% 45%,
    58% 45%, 58% 35%,
    62% 35%, 62% 48%,
    66% 48%, 66% 38%,
    68% 38%, 68% 28%,
    69% 28%, 69% 38%,
    72% 38%, 72% 52%,
    76% 52%, 76% 40%,
    80% 40%, 80% 55%,
    84% 55%, 84% 42%,
    87% 42%, 87% 32%,
    88% 32%, 88% 22%,
    89% 22%, 89% 32%,
    91% 32%, 91% 42%,
    94% 42%, 94% 58%,
    97% 58%, 97% 65%,
    100% 65%, 100% 100%
  );
}
.thumb-tourism::after{
  content:"JKT";
  position:absolute; left:50%; top:30%; transform:translate(-50%,-50%);
  font-family:var(--ui-font); font-size:22px; font-weight:700;
  color:rgba(255,255,255,0.55); letter-spacing:6px;
}
.thumb-jingle{
  background: #261b3d;
  background-image:
    radial-gradient(circle at 20% 70%, #ff5fb5, transparent 40%),
    radial-gradient(circle at 80% 30%, #5ff0ff, transparent 40%);
}
.thumb-jingle::before{
  content:"JKT 〜♪"; position:absolute; left:0; right:0; top: 30%;
  text-align:center; color:#fff; font-family:var(--ui-font); font-size: 26px;
}
.thumb-mowilex-web{
  background: linear-gradient(135deg, #c8102e 0%, #8b0000 100%);
}
.thumb-mowilex-web::before{
  content:"MOWILEX"; position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--ui-font); font-weight:700; font-size:32px;
  letter-spacing:4px; color:rgba(255,255,255,.9);
}
.thumb-mowilex-web::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 8px, transparent 8px 16px);
}

/* ===== Education ===== */
.edu-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;
}
.edu-card{
  background:#fff; border:2px solid var(--rule); box-shadow: 3px 3px 0 var(--rule);
  padding: 10px 12px;
  display:grid; grid-template-columns: 48px 1fr; gap:10px; align-items:start;
}
.edu-logo-wrap{
  width:48px; height:48px;
  border:1px solid var(--rule);
  background:#fafafa;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
}
.edu-logo{
  width:100%; height:100%; object-fit:contain;
}
.edu-card h4{font-family:var(--ui-font); font-size:17px; margin:0}
.edu-line{margin: 2px 0 0; font-size: 14px}
.edu-meta{margin: 4px 0 0; font-family: var(--mono-font); font-size: 14px; color:#555}
.edu-h{font-family:var(--ui-font); font-size:18px; margin: 12px 0 8px; border-bottom: 1px dashed #888; padding-bottom: 4px}
.cert-list{display:grid; grid-template-columns:1fr 1fr; gap: 10px}
.cert{
  background:#fff; border:2px solid var(--rule); box-shadow: 3px 3px 0 var(--rule);
  padding: 8px 10px;
  display:grid; grid-template-columns: 48px 1fr; gap: 10px; align-items:center;
}
.cert-logo-wrap{
  width:48px; height:48px;
  border:1px solid var(--rule);
  background:#fafafa;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
}
.cert-logo{
  width:100%; height:100%; object-fit:contain;
}
.cert strong{font-family:var(--ui-font); font-size:14px; display:block}
.cert span{font-family:var(--mono-font); font-size:14px; color:#555}
.org-list{ margin: 0; padding-left: 18px; font-size: 13.5px; line-height:1.5 }
.org-list li{margin: 4px 0}

/* ===== Contact ===== */
.contact-wrap{
  display:grid; grid-template-columns: minmax(280px, 1fr) 1.2fr; gap: 14px;
}
.contact-card{
  background:#fff; border:2px solid var(--rule); box-shadow: 3px 3px 0 var(--rule);
  padding: 14px 16px;
}
.contact-card h3{font-family:var(--ui-font); font-size:24px; margin:0 0 6px}
.contact-card p{font-size: 14px; line-height:1.45; margin: 0 0 10px}
.contact-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 6px }
.contact-list li{display:grid; grid-template-columns: 28px 1fr; align-items:center; gap: 8px;
  font-family: var(--mono-font); font-size: 16px}
.contact-list .ic{
  display:grid; place-items:center; width:24px; height:24px;
  background: var(--accent); color:#fff; border:2px solid var(--rule);
  font-family: var(--ui-font); font-size: 13px;
}
.contact-form{
  background:#fff; border:2px solid var(--rule); box-shadow: 3px 3px 0 var(--rule);
  padding: 12px;
  display:flex; flex-direction:column; gap: 8px;
}
.form-row{ display:grid; grid-template-columns: 70px 1fr; align-items:center; gap: 8px }
.form-row label{ font-family:var(--mono-font); font-size:16px; color:#444 }
.contact-form input, .contact-form textarea{
  font-family: var(--mono-font); font-size: 16px;
  background:#fffaea; border:2px solid var(--rule); padding: 5px 8px;
  width: 100%;
}
.contact-form textarea{ resize: vertical; min-height: 130px }
.btn-pill{
  font-family: var(--ui-font); font-size: 15px;
  background: var(--platinum); border:2px solid var(--rule);
  box-shadow: 2px 2px 0 var(--rule);
  padding: 5px 14px;
  border-radius: 14px;
}
.btn-pill:hover{ background: var(--accent); color:#fff }
.btn-pill:active{ box-shadow: none; transform: translate(2px,2px) }
.form-actions{ display:flex; align-items:center; gap: 12px; margin-top:4px }
.form-hint{ font-family: var(--mono-font); font-size: 14px; color:#666 }

/* ===== Status bar ===== */
.status-bar{
  flex:0 0 auto;
  height: 22px;
  border-top: 2px solid var(--rule);
  background: var(--platinum);
  font-family: var(--mono-font); font-size: 14px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 10px;
}
.status-blink{ color: var(--accent-2); animation: blink 1s steps(2) infinite }
@keyframes blink{ 50%{opacity:0} }

/* ===== Other windows ===== */
.text-window{
  flex:1 1 auto; overflow:auto;
  background:#fff;
}
.text-window pre{
  font-family: var(--mono-font); font-size: 16px; padding: 16px;
  margin: 0;
  white-space: pre-wrap;
}
.guestbook{ padding: 14px; overflow:auto }
.guestbook .gb-blurb{ font-family: var(--mono-font); font-size:16px; color:#444; margin: 0 0 10px }
#gbForm{ display:flex; gap: 6px; margin-bottom: 12px; flex-wrap:wrap }
#gbForm input{
  font-family: var(--mono-font); font-size:16px;
  background:#fffaea; border:2px solid var(--rule); padding: 5px 8px;
}
#gbForm input[name="name"]{ width: 140px }
#gbForm input[name="msg"]{ flex: 1; min-width: 200px }
#gbForm button{ font-family:var(--ui-font); background: var(--platinum); border:2px solid var(--rule); box-shadow: 2px 2px 0 var(--rule); padding: 4px 12px; border-radius: 10px }
.gb-list{ list-style: none; margin: 0; padding: 0; display:flex; flex-direction: column; gap: 8px }
.gb-list li{
  background:#fff; border:2px solid var(--rule); box-shadow: 2px 2px 0 var(--rule);
  padding: 6px 10px;
}
.gb-name{ font-family:var(--ui-font); font-weight:600; color:var(--accent) }
.gb-time{ font-family: var(--mono-font); font-size: 13px; color:#777; margin-left:6px }
.gb-msg{ font-size: 14px; margin-top: 2px }

/* now-playing styles moved to bottom of file */

.trash-window{ padding: 14px; overflow:auto; display:flex; flex-direction:column; gap: 10px }
.trash-empty{ font-family: var(--mono-font); font-size: 15px; color:#444; margin: 0 }
.trash-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.trash-list li{ background:#fff; border: 2px solid var(--rule); padding: 6px; display:flex; align-items:center; gap: 8px }
.trash-list .restore{ margin-left:auto; font-family: var(--ui-font); font-size:12px; background: var(--platinum); border:1px solid var(--rule); padding: 1px 6px; }

.about-window{ padding: 18px; overflow:auto }
.about-logo{ display:flex; align-items:center; gap: 14px; margin-bottom: 12px }
.about-logo h3{ font-family: var(--ui-font); margin: 0; font-size: 22px }
.about-logo span{ font-family: var(--mono-font); font-size: 16px; color: #555 }
.about-window p{ font-size: 14px; line-height: 1.5; margin: 6px 0 }
.about-window ul{ font-family: var(--mono-font); font-size: 16px; line-height: 1.5; padding-left: 18px }
.about-thanks{ font-family: var(--ui-font); font-size: 18px; color: var(--accent); }

/* ============ FOOTER MARQUEE ============ */
.footer-marquee{
  position: fixed; left:0; right:0; bottom:0; z-index:55;
  height: 26px;
  background: linear-gradient(180deg, var(--accent), oklch(38% 0.16 268));
  border-top: 2px solid var(--rule);
  overflow:hidden;
  color:#fff;
  display:flex; align-items:center;
  font-family: var(--mono-font); font-size: 18px;
  letter-spacing: 1px;
}
.footer-track{ display:flex; gap: 64px; white-space:nowrap; animation: marquee 60s linear infinite; padding-left: 0 }
body.no-marquee .footer-marquee { display: none; }
body.no-marquee .desktop { bottom: 0; }

/* ============ SPARKLE ============ */
#sparkles{
  position: fixed; inset:0; pointer-events:none; z-index: 100;
}

/* ============ DARK MODE TOGGLE BUTTON ============ */
.dark-toggle {
  background: none;
  border: none;
  font-size: 14px;
  padding: 0 6px;
  height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-left: 1px solid #999;
}
.dark-toggle:hover { background: var(--ink); color: #fff; }
body.dark .dark-icon::before { content: '☀'; }
.dark-icon::before { content: '☽'; }
.dark-icon { font-style: normal; }

/* ============ DARK MODE ============ */
body.dark {
  --cream:        #1a1a1a;
  --cream-2:      #222222;
  --paper:        #1e1e1e;
  --platinum:     #2e2e2e;
  --platinum-2:   #383838;
  --platinum-3:   #252525;
  --platinum-deep:#555555;
  --ink:          #e8e8e8;
  --ink-soft:     #cccccc;
  --rule:         #888888;
  --shadow:       0 2px 0 #000, 0 4px 0 rgba(0,0,0,.5);
  --accent:       oklch(70% 0.16 268);
  --accent-2:     oklch(72% 0.16 28);
  --accent-3:     oklch(72% 0.16 145);
  background-image:
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1.4px),
    radial-gradient(rgba(0,0,0,.3) 1px, transparent 1.4px);
}

body.dark .menubar {
  background: linear-gradient(180deg, #3a3a3a, #2a2a2a 50%, #222222);
  border-bottom-color: #555;
}

body.dark .menu-item { color: var(--ink); }
body.dark .menu-item:hover, body.dark .menu-item.open { background: #e8e8e8; color: #000; }
body.dark .menu-hamburger { color: var(--ink); }
body.dark .menu-hamburger:hover { background: #e8e8e8; color: #000; }
body.dark .dark-toggle { border-left-color: #555; color: var(--ink); }
body.dark .dark-toggle:hover { background: #e8e8e8; color: #000; }

body.dark .menu-dropdown {
  background: #2a2a2a;
  border-color: #666;
  color: var(--ink);
}
body.dark .menu-dropdown li:hover { background: #e8e8e8; color: #000; }
body.dark .menu-dropdown li.disabled { color: #666; }
body.dark .menu-dropdown li.sep { background: #555; }
body.dark .menu-dropdown .kbd { color: #999; }

body.dark .window {
  border-color: #555 #222 #222 #555;
  box-shadow: 2px 2px 0 #000, inset 0 0 0 1px #444;
}
body.dark .title-bar { background: repeating-linear-gradient(90deg, #555 0px, #555 1px, #2a2a2a 1px, #2a2a2a 2px); }
body.dark .title-bar.inactive { background: #2a2a2a; }
body.dark .window-body { background: #1e1e1e; border-color: #444; }

body.dark .hero {
  background: linear-gradient(180deg, #222, #1a1a1a);
  border-bottom-color: #555;
}
body.dark .hero-portrait .portrait-frame { background: #2a2a2a; border-color: #555; box-shadow: 3px 3px 0 #000; }
body.dark .hero-marquee { background: #111; border-color: #555; }
body.dark .marquee-track { color: #4dff88; }
body.dark .tag { background: #2a2a2a; border-color: #555; box-shadow: 2px 2px 0 #000; }

body.dark .tabs { background: var(--platinum); border-bottom-color: #555; }
body.dark .tab { background: #2a2a2a; border-color: #555 #555 transparent; color: #aaa; }
body.dark .tab.active { background: #1e1e1e; color: var(--ink); border-bottom-color: #1e1e1e; }
body.dark .tab:hover:not(.active) { background: #333; color: var(--ink); }

body.dark .exp-card { background: #2a2a2a; border-color: #555; box-shadow: 3px 3px 0 #000; }
body.dark .exp-when { color: #aaa; }
body.dark .exp-role { color: var(--ink); }
body.dark .exp-co { color: var(--accent); }
body.dark .exp-tag { background: #333; border-color: #555; color: #ccc; }
body.dark .exp-chips span { background: #333; border-color: #555; color: #ccc; }

body.dark .skill-bar-bg { background: #333; border-color: #555; }
body.dark .skill-bar-fill { background: var(--accent); }
body.dark .tool-chip { background: #2a2a2a; border-color: #555; color: #ccc; }

body.dark .photo-card { background: #2a2a2a; border-color: #555; box-shadow: 3px 3px 0 #000; }
body.dark .photo-cap { color: var(--ink); }
body.dark .photo-tip { color: #888; }

body.dark .contact-card, body.dark .contact-form { background: #2a2a2a; border-color: #555; box-shadow: 3px 3px 0 #000; }
body.dark .contact-form input, body.dark .contact-form textarea { background: #1a1a1a; border-color: #555; color: var(--ink); }
body.dark .contact-list .ic { background: var(--accent); }

body.dark .status-bar { background: var(--platinum); border-top-color: #555; color: #aaa; }
body.dark .footer-marquee { background: linear-gradient(180deg, #1a1a2e, #0d0d1a); }

body.dark .sticky-note { background: #3a3820; border-color: #5a5530; color: #d4cc88; box-shadow: 3px 3px 0 #000; }
body.dark .visitor { background: #111; border-color: #555; color: #4dff88; }
body.dark .webring { background: #2a2a2a; border-color: #555; color: #aaa; }

body.dark .boot-screen { background: #1a1a1a; }
body.dark .boot-frame { background: #2a2a2a; border-color: #555; }
body.dark .boot-progress-track { background: #111; border-color: #555; }
body.dark .boot-walker { background: #111; border-color: #555; }
body.dark .walker-floor { background: #888; }

body.dark .guestbook { color: var(--ink); }
body.dark #gbForm input { background: #1a1a1a; border-color: #555; color: var(--ink); }
body.dark .gb-list li { background: #2a2a2a; border-color: #555; box-shadow: 2px 2px 0 #000; }

body.dark .album-toolbar { background: var(--platinum); border-bottom-color: #555; }
body.dark .album-back { background: #333; border-color: #555; color: var(--ink); }
body.dark .folder-art { background: #d4a017; border-color: #888; box-shadow: 3px 3px 0 #000; }
body.dark .folder-art::before { background: #d4a017; border-color: #888; }
body.dark .album-folder { color: var(--ink); }

body.dark .now-playing { background: #0d0d0d; }
body.dark .text-window { background: #1e1e1e; color: var(--ink); }
body.dark .about-window { color: var(--ink); }

/* ---- missing dark mode fixes ---- */

/* breadcrumbs */
body.dark .panel-toolbar { color: #aaa; border-bottom-color: #555; }
body.dark .path-crumb { color: #aaa; }
body.dark .path-meta { color: #777; }
body.dark .album-crumb { color: #ccc; }
body.dark .album-meta { color: #888; }

/* hero text */
body.dark .hero-role { color: #ccc; }
body.dark .hero-eyebrow { color: #aaa; }
body.dark .hero-name { color: #f0f0f0; }

/* exp card internals */
body.dark .exp-card h3 { color: #f0f0f0; }
body.dark .exp-org { color: oklch(70% 0.16 268); }
body.dark .exp-where { color: #888; }
body.dark .exp-body li { color: #ccc; }
body.dark .when-label { color: #888; }
body.dark .exp-logo { background: #fff; }

/* tags */
body.dark .tag { color: #ccc; }

/* skill blocks */
body.dark .skill-block { background: #2a2a2a; border-color: #555; box-shadow: 3px 3px 0 #000; }
body.dark .skill-block h4 { color: #f0f0f0; border-bottom-color: #555; }
body.dark .skill-row { color: #ccc; }
body.dark .skill-row em { color: #aaa; }
body.dark .meter { background: #1a1a1a; border-color: #555;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(100%/5 - 2px), #555 calc(100%/5 - 2px) calc(100%/5)); }

/* toolbox */
body.dark .toolbox-row { background: #2a2a2a; border-color: #555; box-shadow: 3px 3px 0 #000; }
body.dark .toolbox-row h4 { color: #f0f0f0; border-bottom-color: #555; }
body.dark .tool { color: #ccc; }
body.dark .tool-ic { border-color: #555; box-shadow: 2px 2px 0 #000; }

/* projects */
body.dark .proj-card { background: #2a2a2a; border-color: #555; box-shadow: 3px 3px 0 #000; }
body.dark .proj-card h4 { color: #f0f0f0; }
body.dark .proj-card p { color: #bbb; }
body.dark .proj-meta span { background: #333; border-color: #555; color: #aaa; }
body.dark .proj-thumb { border-color: #555; }
body.dark .thumb-tag { background: rgba(30,30,30,.9); border-color: #555; color: #ccc; }

/* education */
body.dark .edu-card { background: #2a2a2a; border-color: #555; color: #e0e0e0; }
body.dark .edu-card h3, body.dark .edu-card strong { color: #f0f0f0; }
body.dark .edu-card p, body.dark .edu-card span { color: #bbb; }
body.dark .edu-logo-wrap { background: #1e1e1e; border-color: #555; }
body.dark .cert { background: #2a2a2a; border-color: #555; }
body.dark .cert strong { color: #f0f0f0; }
body.dark .cert span { color: #bbb; }
body.dark .cert-logo-wrap { background: #1e1e1e; border-color: #555; }

/* folders */
body.dark .folder-art { background: #d4a017 !important; border-color: #888 !important; }
body.dark .folder-art::before { background: #d4a017 !important; border-color: #888 !important; }
body.dark .album-folder .folder-label { color: #f0f0f0; }
body.dark .album-folder .folder-when { color: #aaa; }

/* contact */
body.dark .contact-card h3 { color: #f0f0f0; }
body.dark .contact-card p { color: #ccc; }
body.dark .contact-list li { color: #ccc; }
body.dark a { color: oklch(70% 0.16 268); }

/* guestbook */
body.dark .gb-name { color: oklch(70% 0.16 268); }
body.dark .gb-msg { color: #ccc; }
body.dark .gb-time { color: #888; }
body.dark .guestbook .gb-blurb { color: #aaa; }

/* dark toggle mobile tappable */
body.dark .dark-toggle { color: #e8e8e8; }
.dark-toggle {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  pointer-events: auto;
  z-index: 61;
  position: relative;
}

/* ============ small / responsive ============ */
@media (max-width: 760px){

  /* prevent any horizontal overflow */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* menubar: hide text items, show hamburger, single row */
  .menubar { height: 32px; }
  .menubar-inner { flex-wrap: nowrap; gap: 4px; padding: 0 8px; height: 32px; overflow: hidden; }
  .menu-item { display: none; }
  .menu-hamburger { display: flex; align-items: center; flex-shrink: 0; }
  .menu-spacer { flex: 1; min-width: 0; }
  .menu-applet { padding: 0 4px; flex-shrink: 0; }
  .menu-clock { min-width: 60px; font-size: 13px; }
  .dark-toggle { flex-shrink: 0; font-size: 13px; padding: 0 4px; }
  .desktop { inset: 32px 0 26px; }

  /* desktop */
  .desktop-icons{ top: 8px; right: 8px; gap: 10px }
  .desktop-icon{ width: 70px; font-size: 12px }
  .icon-art{ width: 32px; height: 32px }
  .sticky-note{ left: 8px; top: 8px; width: 160px; font-size: 14px }
  .webring{ display:none }
  .visitor{ right: 12px; bottom: 12px }

  /* windows: full width, no overflow */
  .window{
    width: 96vw !important;
    max-width: 96vw !important;
    height: calc(100dvh - 80px) !important;
    left: 2vw !important;
    top: 36px !important;
    overflow: hidden !important;
  }

  /* window inner content: prevent children from blowing out width */
  .window-body,
  .window > *,
  .tab-body,
  .tab-panel {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* hero section */
  .hero{ grid-template-columns: 80px 1fr; gap: 10px; padding: 10px 12px }
  .hero-portrait .portrait-frame{ width: 72px; height: 72px }
  .hero-name{ font-size: 22px }
  .hero-role{ font-size: 14px; white-space: normal; overflow: visible; text-overflow: clip; }
  .hero-eyebrow{ font-size: 14px; }
  .hero-marquee{ display: none; }

  /* tabs: shrink font so they fit */
  .tabs{ padding: 6px 6px 0; gap: 0; overflow-x: auto; flex-wrap: nowrap; }
  .tab{ font-size: 12px; padding: 4px 8px; white-space: nowrap; }

  /* hero tags wrap */
  .hero-tags{ flex-wrap: wrap; }
  .tag{ font-size: 11px; padding: 2px 6px; }

  /* tag rows that overflow */
  .tag-row, .skill-tags, .hero-tags {
    flex-wrap: wrap;
    overflow-x: hidden;
  }

  /* all multi-column grids collapse to single column */
  .skills-grid,
  .proj-grid,
  .edu-grid,
  .cert-list,
  .contact-wrap,
  .now-playing,
  .trash-list { grid-template-columns: 1fr }

  .tool-grid{ grid-template-columns: repeat(4, 1fr) }

  /* experience cards */
  .exp-card{ grid-template-columns: 1fr }
  .exp-when .when-line{ display:none }

  /* now playing: stack vertically */
  .now-playing { grid-template-columns: 1fr; }
  .np-cover { width: 100%; height: 160px; }
  .np-disc { width: 130px; height: 130px; }

  /* footer marquee font size */
  .footer-marquee { font-size: 14px; }
}


/* ===== PROJECT MODAL ===== */
.proj-modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s;
  padding: 16px;
}
.proj-modal-overlay.visible { opacity: 1; }

.proj-modal-win {
  position: relative;
  background: var(--paper, #e8e8e8);
  border: 2px solid var(--rule, #000);
  box-shadow: 4px 4px 0 var(--rule, #000);
  width: min(680px, 100%);
  max-height: 90vh;
  display: flex; flex-direction: column;
  transform: scale(.95) translateY(10px);
  opacity: 0;
  transition: transform .2s cubic-bezier(0.34,1.35,0.64,1), opacity .15s ease;
  overflow: hidden;
}
.proj-modal-overlay.visible .proj-modal-win { transform: scale(1) translateY(0); opacity: 1; }

/* title bar — matches Portfolio HD platinum style */
.proj-modal-titlebar {
  height: 22px; flex: 0 0 22px;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; padding: 0 4px;
  background: var(--platinum);
  border-bottom: 2px solid var(--rule);
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}
.proj-modal-titlebar:active { cursor: grabbing; }
.proj-modal-tb-left { display: flex; gap: 4px; align-items: center; }
.proj-modal-tb-right { display: none; }
.proj-modal-tb-title {
  height: 14px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background-image: repeating-linear-gradient(0deg,
    var(--ink) 0 1px, transparent 1px 3px);
  margin: 0 6px;
  overflow: hidden;
}
.proj-modal-tb-title-text {
  font-family: var(--ui-font, 'Pixelify Sans', monospace);
  font-size: 14px;
  background: var(--platinum);
  padding: 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative; z-index: 1;
}
.proj-modal-tb-icon { display: none; }

.proj-modal-close,
.proj-modal-btn {
  width: 14px; height: 14px;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: inset 0 0 0 1px #fff, 1px 1px 0 rgba(0,0,0,.25);
  border-radius: 2px;
  padding: 0; line-height: 1;
  display: inline-block; position: relative;
  cursor: pointer;
  font-size: 0;
}
.proj-modal-close:hover { background: #e7e7e7; }
.proj-modal-close::before {
  content: ""; position: absolute; inset: 3px;
  background:
    linear-gradient(45deg, transparent 45%, var(--rule) 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--rule) 45% 55%, transparent 55%);
  opacity: 0;
}
.proj-modal-close:hover::before { opacity: 1; }
.proj-modal-btn:hover { background: #e7e7e7; }

/* body */
.proj-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}

.proj-modal-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px; gap: 10px;
  border-bottom: 2px solid var(--rule, #000);
  padding-bottom: 8px;
}
.proj-modal-title {
  font-family: var(--ui-font, 'Pixelify Sans', monospace);
  font-size: 20px; margin: 0;
}
.proj-modal-year {
  font-family: var(--mono-font, 'VT323', monospace);
  font-size: 15px; color: #666; flex-shrink: 0;
}

.proj-modal-section-label {
  font-family: var(--mono-font, 'VT323', monospace);
  font-size: 14px; letter-spacing: 1px;
  margin: 12px 0 4px;
  color: #444;
}
body.dark .proj-modal-section-label { color: #aaa; }

.proj-modal-desc {
  font-family: var(--mono-font, 'VT323', monospace);
  font-size: 16px; line-height: 1.5;
  margin: 0;
}

.proj-modal-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 8px;
}
.proj-modal-tags span {
  font-family: var(--mono-font, 'VT323', monospace);
  font-size: 15px;
  background: var(--paper, #e8e8e8);
  border: 1px solid var(--rule, #000);
  box-shadow: 2px 2px 0 var(--rule, #000);
  padding: 1px 8px;
}

/* CRT monitor for video */
.proj-modal-crt {
  display: flex; flex-direction: column; align-items: center;
  margin: 4px 0 8px;
}
.proj-modal-crt-inner {
  width: 100%; aspect-ratio: 16/9;
  background: #111;
  border: 5px solid #888;
  border-radius: 8px 8px 4px 4px;
  box-shadow:
    inset 0 0 20px rgba(0,0,0,.8),
    0 0 0 2px var(--rule, #000),
    4px 4px 0 var(--rule, #000);
  overflow: hidden;
  position: relative;
}
.proj-modal-crt-inner::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0px, rgba(0,0,0,.06) 1px, transparent 1px, transparent 3px);
}
.proj-modal-crt-inner iframe {
  width: 100%; height: 100%; display: block;
  position: relative; z-index: 0;
}
.proj-modal-crt-base {
  width: 40%; height: 10px;
  background: #888;
  border: 2px solid var(--rule, #000);
  border-top: none;
  border-radius: 0 0 4px 4px;
}

/* screenshot grid for Canva projects */
.proj-modal-shots {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 8px;
}
.proj-modal-shot-frame {
  flex: 1; min-width: 120px;
  border: 3px solid var(--rule, #000);
  box-shadow: 3px 3px 0 var(--rule, #000);
  background: #fff;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.proj-modal-shot-frame img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* e-magazine layout */
.proj-modal-emag {
  display: flex; gap: 16px; align-items: flex-start;
  margin: 4px 0 4px;
}
.proj-modal-emag-cover { flex-shrink: 0; width: 140px; }
.proj-modal-emag-info { flex: 1; }
.proj-modal-shot-cover {
  aspect-ratio: 3/4 !important;
  width: 140px;
}
.proj-modal-cover-placeholder {
  display: grid; place-items: center;
  height: 100%;
  font-family: var(--ui-font, 'Pixelify Sans', monospace);
  font-size: 18px; color: #888;
  background: #ddd;
}

/* action button */
.proj-modal-actions { margin-top: 14px; }
.proj-modal-action-btn {
  display: inline-block;
  font-family: var(--ui-font, 'Pixelify Sans', monospace);
  font-size: 15px;
  background: var(--paper, #e8e8e8);
  border: 2px solid var(--rule, #000);
  box-shadow: 3px 3px 0 var(--rule, #000);
  padding: 6px 16px;
  color: var(--rule, #000);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .1s, transform .1s;
}
.proj-modal-action-btn:hover {
  box-shadow: 1px 1px 0 var(--rule, #000);
  transform: translate(2px, 2px);
}

/* resize grip */
.proj-modal-grip {
  position: absolute; bottom: 0; right: 0;
  width: 16px; height: 16px;
  cursor: se-resize;
  background:
    linear-gradient(135deg, transparent 30%, var(--rule, #000) 30%, var(--rule, #000) 40%, transparent 40%),
    linear-gradient(135deg, transparent 55%, var(--rule, #000) 55%, var(--rule, #000) 65%, transparent 65%),
    linear-gradient(135deg, transparent 75%, var(--rule, #000) 75%, var(--rule, #000) 85%, transparent 85%);
}

body.dark .proj-modal-win {
  background: #2a2a2a;
  border-color: #666;
  box-shadow: 4px 4px 0 #111;
}
body.dark .proj-modal-titlebar { background: repeating-linear-gradient(90deg, #555 0px, #555 1px, #2a2a2a 1px, #2a2a2a 2px); }
body.dark .proj-modal-tb-title { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.4) 0 1px, transparent 1px 3px); }
body.dark .proj-modal-tb-title-text { background: transparent; color: #f0f0f0; }
body.dark .proj-modal-close, body.dark .proj-modal-btn { background: #444; border-color: #777; }
body.dark .proj-modal-title { color: #f0f0f0; }
body.dark .proj-modal-desc { color: #ccc; }
body.dark .proj-modal-tags span { background: #333; border-color: #555; color: #ccc; box-shadow: 2px 2px 0 #111; }
body.dark .proj-modal-shot-frame { border-color: #555; box-shadow: 3px 3px 0 #111; }
body.dark .proj-modal-action-btn { background: #333; border-color: #aaa; color: #eee; box-shadow: 3px 3px 0 #111; }
body.dark .proj-modal-year { color: #999; }

/* mobile */
@media (max-width: 540px) {
  .proj-modal-overlay { padding: 12px; align-items: center; }
  .proj-modal-win { width: 100%; max-height: 75vh; }
  .proj-modal-shots { flex-direction: column; }
  .proj-modal-shot-frame { min-width: unset; width: 100%; }
  .proj-modal-emag { flex-direction: column; }
  .proj-modal-emag-cover { width: 100%; }
  .proj-modal-shot-cover { width: 100%; aspect-ratio: 3/4 !important; }
  .proj-modal-title { font-size: 16px; }
}

.proj-modal-shot-wide { aspect-ratio: 16/9; }
/* ===== NOW PLAYING — INTERACTIVE ===== */
.now-playing {
  display: flex;
  gap: 0;
  height: 100%;
  padding: 14px;
  background: #1a1a2e;
  color: #e0e0e0;
  font-family: var(--mono-font);
  overflow: hidden;
}

/* left stage: vinyl + art swap */
.np-stage {
  flex-shrink: 0;
  width: min(180px, 35%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.np-vinyl-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

/* vinyl disc */
.np-vinyl {
  position: absolute;
  inset: 0;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1), opacity 0.3s;
  transform: translateX(0);
  opacity: 1;
  z-index: 2;
}
.np-vinyl.np-slide-out {
  transform: translateX(110%);
  opacity: 0;
  pointer-events: none;
}

.np-disc {
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50%, #111 18%, #222 18.5%, #1a1a1a 26%, #2a2a2a 26.5%, #1a1a1a 34%, #2a2a2a 34.5%, #1a1a1a 42%, #2a2a2a 42.5%, #111 50%);
  border: 3px solid #444;
  box-shadow: 0 0 0 2px #000, 3px 3px 0 #000;
  display: grid; place-items: center;
  animation: spin 4s linear infinite paused;
}
.np-eq.playing ~ * .np-disc,
.now-playing:has(.np-eq.playing) .np-disc { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }

.np-spindle {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 30%, #ccc 60%, #888 100%);
  border: 2px solid #000;
  box-shadow: 0 0 0 3px #333;
  z-index: 3;
}

/* art frame */
.np-art-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-110%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1), opacity 0.3s;
  z-index: 2;
}
.np-art-wrap.np-slide-in {
  transform: translateX(0);
  opacity: 1;
}

.np-art-frame {
  width: 100%; height: 100%;
  border: 3px solid #555;
  box-shadow: 0 0 0 2px #000, 3px 3px 0 #000;
  overflow: hidden;
  background: #222;
  flex-shrink: 0;
}
.np-art-frame img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  image-rendering: auto;
}

.np-spotify-btn {
  display: inline-block;
  font-family: var(--mono-font);
  font-size: 13px;
  background: #1db954;
  color: #000 !important;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  padding: 4px 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow .1s, transform .1s;
}
.np-spotify-btn:hover {
  box-shadow: 1px 1px 0 #000;
  transform: translate(1px,1px);
}

/* right meta */
.np-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-left: 14px;
  min-width: 0;
  overflow: hidden;
}

.np-eyebrow {
  font-size: 13px;
  color: #888;
  margin-bottom: 2px;
}

.np-title {
  font-family: var(--ui-font);
  font-size: 18px;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 4px;
}

.np-now-label {
  font-size: 13px;
  color: #1db954;
  min-height: 18px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* media controls */
.np-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.np-ctrl-btn {
  background: #1a1a2e;
  border: 2px solid #444;
  box-shadow: 2px 2px 0 #000;
  color: #ccc;
  font-family: var(--mono-font);
  font-size: 16px;
  width: 32px; height: 28px;
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background .1s, box-shadow .1s, transform .1s;
}
.np-ctrl-btn:hover {
  background: #2a2a3e;
  color: #fff;
}
.np-ctrl-btn:active {
  box-shadow: 1px 1px 0 #000;
  transform: translate(1px,1px);
}
.np-ctrl-btn.np-play {
  width: 40px;
  color: #1db954;
  border-color: #1db954;
}

.np-tracks {
  list-style: none;
  padding: 0; margin: 0;
  flex: 1;
  overflow-y: auto;
  max-height: 180px;
}
.np-tracks li {
  font-size: 15px;
  padding: 5px 6px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s, border-color .12s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.np-tracks li:hover { background: rgba(255,255,255,.07); }
.np-tracks li.active {
  border-left-color: #1db954;
  color: #1db954;
  background: rgba(29,185,84,.1);
}
.np-num { color: #555; margin-right: 4px; }
.np-artist { color: #666; font-size: 13px; }
.np-tracks li.active .np-artist { color: #1db954; opacity: .7; }

/* EQ bars */
.np-eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
  margin-top: 8px;
}
.np-eq span {
  display: block;
  width: 5px;
  background: #333;
  height: 4px;
}
.np-eq.playing span:nth-child(1)  { animation: eq 0.6s ease-in-out infinite alternate; }
.np-eq.playing span:nth-child(2)  { animation: eq 0.4s ease-in-out infinite alternate 0.1s; }
.np-eq.playing span:nth-child(3)  { animation: eq 0.7s ease-in-out infinite alternate 0.05s; }
.np-eq.playing span:nth-child(4)  { animation: eq 0.5s ease-in-out infinite alternate 0.15s; }
.np-eq.playing span:nth-child(5)  { animation: eq 0.8s ease-in-out infinite alternate 0.2s; }
.np-eq.playing span:nth-child(6)  { animation: eq 0.45s ease-in-out infinite alternate 0.08s; }
.np-eq.playing span:nth-child(7)  { animation: eq 0.65s ease-in-out infinite alternate 0.12s; }
.np-eq.playing span:nth-child(8)  { animation: eq 0.55s ease-in-out infinite alternate 0.18s; }
.np-eq.playing span:nth-child(9)  { animation: eq 0.75s ease-in-out infinite alternate 0.03s; }
.np-eq.playing span:nth-child(10) { animation: eq 0.5s ease-in-out infinite alternate 0.22s; }
.np-eq.playing span:nth-child(11) { animation: eq 0.6s ease-in-out infinite alternate 0.07s; }
.np-eq.playing span:nth-child(12) { animation: eq 0.7s ease-in-out infinite alternate 0.16s; }
.np-eq.playing span { background: #1db954; }
@keyframes eq {
  from { height: 3px; }
  to   { height: 20px; }
}

/* dark mode already covered — NP is always dark */

/* ============================================================
   TASKBAR
   ============================================================ */
.taskbar{
  position:fixed; left:0; right:0; bottom:26px; z-index:54;
  height:28px;
  background: var(--platinum);
  border-top: 2px solid var(--rule);
  display:flex; align-items:center; gap:4px; padding: 0 6px;
  overflow-x:auto; overflow-y:hidden;
}
.taskbar:empty{ display:none; }
.taskbar-btn{
  height:20px; padding: 0 10px;
  background: var(--platinum-3);
  border:2px solid var(--rule);
  box-shadow: 2px 2px 0 rgba(0,0,0,.25);
  font-family: var(--ui-font); font-size:12px;
  white-space:nowrap; max-width:160px;
  overflow:hidden; text-overflow:ellipsis;
  cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; gap:5px;
  transition: box-shadow .08s, transform .08s;
}
.taskbar-btn:hover{ background: var(--platinum); }
.taskbar-btn:active{ box-shadow:none; transform:translate(1px,1px); }
.taskbar-btn.is-active{ box-shadow: inset 2px 2px 0 rgba(0,0,0,.2); background: #ccc; }

/* Desktop shrinks to make room when taskbar has items */
.taskbar:not(:empty) ~ .footer-marquee,
body:has(.taskbar-btn) .footer-marquee { bottom: 28px; }
body:has(.taskbar-btn) .desktop { bottom: 54px; }

/* ============================================================
   DESKTOP CONTEXT MENU
   ============================================================ */
.ctx-menu{
  position:fixed; z-index:300;
  background: var(--platinum);
  border:2px solid var(--rule);
  box-shadow: 3px 3px 0 rgba(0,0,0,.3);
  list-style:none; margin:0; padding:2px 0;
  min-width:180px;
  font-family: var(--ui-font); font-size:14px;
  max-height: 80vh;
  overflow-y: auto;
}
.ctx-menu li{
  padding: 4px 18px 4px 22px;
  cursor:pointer; white-space:nowrap;
  display:flex; justify-content:space-between; gap:16px;
}
.ctx-menu li:hover{ background:var(--ink); color:#fff; }
.ctx-menu li.sep{ height:1px; background:var(--rule); margin:3px 6px; padding:0; cursor:default; }
.ctx-menu li.sep:hover{ background:var(--rule); }
.ctx-menu li.disabled{ opacity:.4; cursor:default; }
.ctx-menu li.disabled:hover{ background:transparent; color:inherit; }

/* ============================================================
   WALLPAPER PICKER
   ============================================================ */
.wp-picker{
  position:fixed; inset:0; z-index:301;
  display:grid; place-items:center;
  background: rgba(0,0,0,.15);
}
.wp-picker[hidden]{ display:none; }
.wp-picker-win{
  background: var(--platinum);
  border:2px solid var(--rule);
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
  width:320px;
}
.wp-picker-tb{
  height:22px; background:var(--platinum);
  border-bottom:2px solid var(--rule);
  display:flex; align-items:center; gap:8px; padding:0 6px;
}
.wp-picker-title{ font-family:var(--ui-font); font-size:14px; }
.wp-picker-body{
  padding:14px; display:grid;
  grid-template-columns: repeat(3,1fr); gap:10px;
}
.wp-swatch{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:none; border:2px solid var(--rule); padding:6px;
  cursor:pointer; font-family:var(--ui-font); font-size:12px;
  transition: box-shadow .08s;
}
.wp-swatch:hover{ box-shadow:2px 2px 0 var(--rule); }
.wp-swatch.active{ box-shadow: inset 2px 2px 0 rgba(0,0,0,.2); background:#ccc; }
.wp-swatch span{
  display:block; width:60px; height:40px;
  border:1px solid var(--rule);
}
/* Swatch previews */
.wp-swatch[data-wp="dots"] span{
  background: #ede5c8
    radial-gradient(rgba(0,0,0,.045) 1px,transparent 1.5px),
    radial-gradient(rgba(255,255,255,.4) 1px,transparent 1.5px);
  background-size:18px 18px,18px 18px;
  background-position:0 0,9px 9px;
}
.wp-swatch[data-wp="linen"] span{
  background: #ede5c8
    repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0 1px,transparent 1px 8px);
}
.wp-swatch[data-wp="hatch"] span{
  background: #ede5c8
    repeating-linear-gradient(45deg,rgba(0,0,0,.07) 0 1px,transparent 1px 8px);
}
.wp-swatch[data-wp="grid"] span{
  background: #ede5c8
    repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 16px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 16px);
}
.wp-swatch[data-wp="stars"] span{
  background: #1a1a2e;
  background-image:
    radial-gradient(#fff 1px,transparent 1px),
    radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:12px 12px,20px 20px;
  background-position:0 0,6px 6px;
}
.wp-swatch[data-wp="solid"] span{ background:#ede5c8; }

/* Wallpaper body classes */
body.wp-linen{
  background-image:
    repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0 1px,transparent 1px 8px);
}
body.wp-hatch{
  background-image: repeating-linear-gradient(45deg,rgba(0,0,0,.07) 0 1px,transparent 1px 8px);
}
body.wp-grid{
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 16px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 16px);
}
body.wp-stars{
  background-color: #1a1a2e;
  background-image:
    radial-gradient(#fff 1px,transparent 1px),
    radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:12px 12px,20px 20px;
  background-position:0 0,6px 6px;
}
body.wp-solid{ background-image:none; }

/* ============================================================
   MULTI-STICKY NOTES
   ============================================================ */
.sticky-note textarea{
  background:none; border:none; outline:none; resize:none;
  font-family:var(--mono-font); font-size:18px; line-height:1.15;
  color:#3a2c00; width:100%; min-height:60px;
  padding:0; margin:0;
}
.sticky-close{
  position:absolute; top:4px; right:26px;
  background:none; border:none; cursor:pointer;
  font-size:14px; color:#7a6000; line-height:1;
  padding:0 2px;
  opacity:0; transition:opacity .1s;
}
.sticky-note:hover .sticky-close{ opacity:1; }

body.dark .sticky-note textarea{ color:#d4cc88; }

/* dark mode taskbar */
body.dark .taskbar{ background:#2a2a2a; border-color:#555; }
body.dark .taskbar-btn{ background:#333; border-color:#555; color:var(--ink); }
body.dark .taskbar-btn.is-active{ background:#1a1a1a; }
body.dark .ctx-menu{ background:#2a2a2a; border-color:#555; color:var(--ink); }
body.dark .ctx-menu li:hover{ background:#555; }
body.dark .wp-picker-win{ background:#2a2a2a; border-color:#555; }
body.dark .wp-picker-tb{ background:#2a2a2a; border-color:#555; }
body.dark .wp-swatch{ border-color:#555; color:var(--ink); }

/* ============================================================
   SCREENSAVER
   ============================================================ */
#screensaver{
  position:fixed; inset:0; z-index:500;
  background:#000;
  cursor:none;
}
#screensaver[hidden]{ display:none; }
#screensaverBounce{
  position:absolute;
  font-family:var(--mono-font); font-size:22px;
  font-weight:700; letter-spacing:2px;
  white-space:nowrap;
  padding: 8px 18px;
  border: 2px solid;
  user-select:none;
}

/* ============================================================
   UNDER CONSTRUCTION WINDOW
   ============================================================ */
.construction-window{
  display:flex; flex-direction:column;
  height:100%; overflow:hidden;
  font-family:var(--mono-font);
}
.construction-tape{
  background: repeating-linear-gradient(
    45deg,
    #f5c000 0px, #f5c000 20px,
    #1a1a1a 20px, #1a1a1a 40px
  );
  color:#fff; font-family:var(--ui-font); font-size:11px;
  font-weight:700; letter-spacing:1px;
  padding:5px 0; white-space:nowrap; overflow:hidden;
  text-overflow:clip;
}
.construction-content{
  flex:1; display:flex; gap:0;
  overflow:hidden;
}
.construction-sign{
  width:160px; flex-shrink:0;
  background:#f5c000;
  display:flex; align-items:center; justify-content:center;
  border-right:2px solid var(--rule);
  padding:16px;
}
.construction-sign-inner{
  text-align:center;
}
.construction-icon{
  font-size:48px; line-height:1; margin-bottom:8px;
}
.construction-title{
  font-family:var(--ui-font); font-size:18px; font-weight:900;
  line-height:1.1; color:#1a1a1a;
  text-transform:uppercase; letter-spacing:1px;
}
.construction-blink{
  font-family:var(--mono-font); font-size:11px;
  color:#1a1a1a; margin-top:8px;
  animation: blink 1s steps(2) infinite;
}
.construction-text{
  flex:1; padding:18px; overflow:auto;
  font-size:15px; line-height:1.6;
}
.construction-text p{ margin:0 0 10px; }
.construction-counter{ font-size:13px; color:#666; margin-top:14px !important; }
.construction-badges{
  display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;
}
.con-badge{
  border:2px solid var(--rule);
  padding:4px 8px; font-size:11px; font-weight:700;
  text-align:center; background:var(--platinum);
  font-family:var(--ui-font); line-height:1.3;
  text-transform:uppercase;
}
body.dark .construction-text .construction-counter{ color:#888; }
body.dark .con-badge{ background:#333; }

/* ============================================================
   DESKTOP PET — Goose
   ============================================================ */
#desktopPet{
  position: fixed;
  bottom: 54px;
  z-index: 53;
  pointer-events: auto;
  cursor: grab;
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-repeat: no-repeat;
  background-size: auto 64px;
}
#desktopPet.dragging{ cursor: grabbing; }
#desktopPet.facing-left{ transform: scaleX(-1); }

@keyframes gooseWalk {
  0%   { background-position: 0px 0; }
  25%  { background-position: -64px 0; }
  50%  { background-position: -128px 0; }
  75%  { background-position: -192px 0; }
  100% { background-position: 0px 0; }
}
@keyframes gooseIdle {
  0%   { background-position: 0px 0; }
  50%  { background-position: -64px 0; }
  100% { background-position: 0px 0; }
}
@keyframes gooseRun {
  0%   { background-position: 0px 0; }
  25%  { background-position: -64px 0; }
  50%  { background-position: -128px 0; }
  75%  { background-position: -192px 0; }
  100% { background-position: 0px 0; }
}
@keyframes gooseFlap {
  0%   { background-position: 0px 0; }
  25%  { background-position: -64px 0; }
  50%  { background-position: -128px 0; }
  75%  { background-position: -192px 0; }
  100% { background-position: 0px 0; }
}

#desktopPet.state-walk{
  background-image: url('assets/goose_walk.png');
  animation: gooseWalk 0.5s steps(1) infinite;
}
#desktopPet.state-idle{
  background-image: url('assets/goose_idle.png');
  animation: gooseIdle 1s steps(1) infinite;
}
#desktopPet.state-run{
  background-image: url('assets/goose_run.png');
  animation: gooseRun 0.3s steps(1) infinite;
}
#desktopPet.state-flap{
  background-image: url('assets/goose_flap.png');
  animation: gooseFlap 0.25s steps(1) infinite;
}