/* ==========================================================================
   senza___studio — retro CRT desktop site
   ========================================================================== */

:root{
  --bezel-1:#e9e2d0;
  --bezel-2:#d7cdb4;
  --bezel-3:#f5f0e2;
  --bezel-shadow:#8f8571;
  --screen-glass-1:#dfe6e6;
  --screen-glass-2:#aebcbd;
  --desktop-teal-1:#3f918a;
  --desktop-teal-2:#296560;
  --mascot-red:#dd4a2e;
  --mascot-red-dark:#a5301a;
  --mascot-red-light:#ef7657;
  --ink:#171310;
  --win-face:#c8c4b8;
  --win-face-light:#e8e4d8;
  --win-face-dark:#8a8578;
  --win-border-dark:#4a4638;
  --win-blue-1:#0b1f8f;
  --win-blue-2:#3a6fe0;
  --win-paper:#f4f0e6;
  --green-1:#a9dba0;
  --green-2:#6fa868;
  --green-dark:#3d6a3a;
  --cream:#ece3d2;
  --amber:#e0b23c;
  --font-pixel:'Pixelify Sans', 'Courier New', monospace;
  --font-mono:'Space Mono', 'Courier New', monospace;
  --font-body:Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  margin:0;
  height:100dvh;
  min-height:100vh;
  background:#0a0a09;
  font-family:var(--font-body);
  overflow:hidden;
  overscroll-behavior:none;
}

/* custom pixel cursor — classic vintage OS arrow, same shape everywhere */
body, button, a, .desktop-icon, .win-btn, [data-window], [data-action]{
  cursor:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M6 4 L6 24 L12 19 L16.5 27.5 L20.5 25.3 L16 17.5 L23.5 17.5 Z' fill='white' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/></svg>") 6 4, auto;
}

/* ==========================================================================
   MONITOR — fullscreen: the browser viewport IS the CRT screen, edge to edge
   ========================================================================== */
#monitor{
  width:100vw;
  height:100dvh;
  height:100vh;
}

#monitor-bezel{
  position:relative;
  width:100%;
  height:100%;
  background:#0d1414;
}
#monitor-stand{ display:none; }

/* ==========================================================================
   SCREEN
   ========================================================================== */
#screen{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#0d1414;
  isolation:isolate;
}
/* curvature illusion: a light, mostly-invisible vignette — just enough to
   suggest glass without darkening the UI (and never over the taskbar,
   which sits above these layers in z-index) */
#screen::after{
  content:"";
  position:absolute; inset:0;
  z-index:40;
  pointer-events:none;
  background:
    radial-gradient(145% 115% at 50% 50%, rgba(255,255,255,0) 78%, rgba(0,0,0,.18) 100%);
  mix-blend-mode:multiply;
}
#screen::before{
  content:"";
  position:absolute; inset:0;
  z-index:41;
  pointer-events:none;
  background-image:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.14) 0px,
    rgba(0,0,0,.14) 1px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0) 3px
  );
  opacity:.5;
  animation:scan-shift 9s linear infinite;
}
@keyframes scan-shift{
  0%{ background-position-y:0; }
  100%{ background-position-y:300px; }
}

/* glass reflection — a soft diagonal highlight drifting very slowly,
   like light catching the curve of the tube */
#screen::marker{ display:none; }
.glass-reflection{
  position:absolute;
  top:-10%; left:-20%;
  width:55%; height:140%;
  background:linear-gradient(115deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 45%, rgba(255,255,255,0) 65%);
  transform:skewX(-14deg);
  pointer-events:none;
  z-index:42;
  animation:glass-drift 14s ease-in-out infinite;
}
@keyframes glass-drift{
  0%,100%{ transform:skewX(-14deg) translateX(0); opacity:.9; }
  50%{ transform:skewX(-14deg) translateX(6%); opacity:.65; }
}
/* corner glow ring to fake the curved edge of a tube */
.screen-edge{
  position:absolute; inset:0;
  z-index:43;
  pointer-events:none;
  box-shadow:
    inset 0 0 2px 1px rgba(255,255,255,.12),
    inset 0 0 50px 6px rgba(0,0,0,.18);
}

/* ==========================================================================
   BOOT SEQUENCE
   ========================================================================== */
#boot-sequence{
  position:absolute; inset:0;
  z-index:30;
  overflow:hidden;
  background:#000;
}
/* the classic tube power-on: a bright line snaps open to fill the screen */
#boot-beam{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 50% 42%, #eef4f3 0%, #c7d3d3 65%, #a9b8b8 100%);
  transform:scaleY(.006);
  transform-origin:50% 50%;
  animation:beam-expand .55s cubic-bezier(.25,.85,.3,1.1) forwards;
  animation-delay:.35s;
}
@keyframes beam-expand{
  0%{ transform:scaleY(.006); }
  75%{ transform:scaleY(1.03); }
  100%{ transform:scaleY(1); }
}
#boot-flash{
  position:absolute; inset:0;
  background:#fff;
  z-index:2;
  opacity:0;
  animation: flash .5s ease-out forwards;
  animation-delay:.78s;
}
@keyframes flash{
  0%{ opacity:.9; }
  100%{ opacity:0; }
}

#boot-logo{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(6px,1.4vw,14px);
  text-align:center;
  opacity:0;
  animation: logo-in .7s ease-out forwards, flicker 1.8s ease-out;
  animation-delay:1s, 1s;
  padding:0 20px;
  width:100%; height:100%;
}
@keyframes logo-in{
  0%{ opacity:0; transform:translateY(4px) scale(.99); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes flicker{
  0%, 100%{ filter:brightness(1); }
  8%{ filter:brightness(1.3); }
  14%{ filter:brightness(.92); }
  20%{ filter:brightness(1.08); }
  28%{ filter:brightness(1); }
}
#mascot-boot{
  width:clamp(64px,11vw,120px);
  height:auto;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));
  animation: bob 3.4s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
#boot-wordmark{
  margin:0;
  font-family:var(--font-pixel);
  font-weight:700;
  font-size:clamp(28px, 6vw, 64px);
  color:var(--ink);
  letter-spacing:.01em;
}
#boot-wordmark .us{
  letter-spacing:.03em;
}
#boot-tagline{
  margin:0;
  font-family:var(--font-mono);
  font-size:clamp(13px, 1.8vw, 20px);
  letter-spacing:.15em;
  color:#3a3a3a;
}
#boot-skip{
  position:absolute;
  bottom:18px; left:50%;
  transform:translateX(-50%);
  z-index:3;
  background:none; border:none;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:#4a4a4a;
  opacity:0;
  animation:fade-in .6s ease forwards;
  animation-delay:1.6s;
  padding:6px 10px;
}
@keyframes fade-in{ to{ opacity:.65; } }
#boot-sequence.leaving{
  animation:boot-out .5s ease forwards;
}
@keyframes boot-out{
  to{ opacity:0; visibility:hidden; }
}

/* ==========================================================================
   DESKTOP
   ========================================================================== */
#desktop{
  position:absolute; inset:0;
  background:#296560;
  background-size:cover;
  background-position:center;
  overflow:hidden;
  opacity:0;
}
#desktop.wp-bliss{ background-image:url('assets/wp-bliss.jpg'); }
#desktop.wp-space{ background-image:url('assets/wp-space.jpg'); }
#desktop.wp-underwater{ background-image:url('assets/wp-underwater.jpg'); }
#desktop.wp-rainbow{ background-image:url('assets/wp-rainbow.jpg'); }
#desktop.visible{
  animation:desktop-in .7s ease forwards;
}
@keyframes desktop-in{
  from{ opacity:0; transform:scale(1.01); }
  to{ opacity:1; transform:scale(1); }
}
.scanlines{
  position:absolute; inset:0;
  z-index:25;
  pointer-events:none;
  background-image:repeating-linear-gradient(
    to bottom, rgba(0,0,0,.12) 0px, rgba(0,0,0,.12) 1px, transparent 2px, transparent 3px
  );
  opacity:.4;
}
.vignette{
  position:absolute; inset:0;
  z-index:26;
  pointer-events:none;
  box-shadow: inset 0 0 90px 20px rgba(0,0,0,.35);
}

#icons-layer{
  position:absolute;
  inset:0 0 48px 0;
  z-index:5;
}

.desktop-icon{
  position:absolute;
  background:none; border:none; padding:6px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:82px;
  border-radius:4px;
  touch-action:none;
  outline:none;
}
.desktop-icon.dragging{
  z-index:6;
}
.desktop-icon:hover .icon-label, .desktop-icon:focus-visible .icon-label{
  text-shadow:0 0 4px rgba(0,0,0,.9), 1px 1px 0 rgba(0,0,0,.55);
}
.desktop-icon:active .icon-label,
.desktop-icon.selected .icon-label{
  background:#0b3d91;
  color:#fff;
  outline:1px dashed rgba(255,255,255,.7);
}
.icon-art{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.icon-art .pixel-ico{ width:32px; height:32px; }
.icon-art .mascot-icon-img{ width:30px; height:auto; }
.icon-label{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.7);
  background:rgba(0,0,0,.22);
  padding:2px 5px;
  border-radius:2px;
  line-height:1.3;
  text-align:center;
}

/* pixel icon base */
.pixel-ico{ shape-rendering:crispEdges; display:block; }

/* mascot — real product photo, background removed */
.mascot-img{
  display:inline-block;
  object-fit:contain;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}
.mascot-titlebar-img{ width:16px; height:auto; vertical-align:-3px; }
.mascot-menu-img{ width:18px; height:auto; vertical-align:-4px; }

/* ==========================================================================
   WINDOWS (95-style chrome)
   ========================================================================== */
#windows-layer{ position:absolute; inset:0; z-index:10; pointer-events:none; }

.os-window{
  position:absolute;
  pointer-events:auto;
  min-width:240px;
  min-height:160px;
  background:var(--win-face);
  border:1px solid #0a2c8f;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.5) inset,
    6px 10px 24px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
  border-radius:9px 9px 4px 4px;
  overflow:hidden;
  animation:win-open .18s ease-out;
}
@keyframes win-open{
  from{ transform:scale(.94); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}
.os-window.maximized{
  top:0 !important; left:0 !important;
  width:100% !important; height:calc(100% - 48px) !important;
  border-radius:0;
}
.os-window.dragging{ user-select:none; }

.win-titlebar{
  position:relative;
  background:linear-gradient(180deg, #4f9bf5 0%, #2f7ce8 12%, #1c5fd4 45%, #0e49bf 85%, #0a3fae 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:5px 5px 5px 9px;
  cursor:grab;
  flex:0 0 auto;
  overflow:hidden;
}
.win-titlebar::before{
  /* glossy highlight sweep, XP Luna style */
  content:"";
  position:absolute; inset:0 0 55% 0;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
}
.win-titlebar:active{ cursor:grabbing; }
.win-title{
  position:relative;
  font-family:var(--font-pixel);
  font-weight:600;
  font-size:13.5px;
  display:flex; align-items:center; gap:7px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 1px rgba(0,0,0,.4);
}
.win-title .pixel-ico{ width:15px; height:15px; flex:0 0 auto; }
.win-controls{ position:relative; display:flex; gap:3px; }
.win-btn{
  width:21px; height:20px;
  border-radius:4px;
  background:linear-gradient(180deg, #fdfdfd 0%, #dcdcdc 46%, #c3c3c3 50%, #eee 100%);
  border:1px solid #6d84a8;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
.win-btn:hover{ filter:brightness(1.08); }
.win-btn:active{
  background:linear-gradient(180deg, #c3c3c3 0%, #dcdcdc 60%, #eee 100%);
}
.win-btn .pixel-ico{ width:9px; height:9px; }
.win-close{
  background:linear-gradient(180deg, #f6a89c 0%, #e2493a 46%, #c22e21 50%, #ef7a6c 100%);
  border-color:#8f231a;
}
.win-close:hover{ filter:brightness(1.1); }
.win-close .pixel-ico path{ stroke:#fff; }

.win-body{
  background:var(--win-paper);
  flex:1 1 auto;
  overflow:auto;
  padding:18px 20px;
  font-family:var(--font-body);
  color:var(--ink);
  font-size:14.5px;
  line-height:1.55;
  border-top:1px solid #7fa7e8;
}
.win-body::-webkit-scrollbar{ width:16px; }
.win-body::-webkit-scrollbar-track{ background:var(--win-face); }
.win-body::-webkit-scrollbar-thumb{ background:var(--win-face); border:1px solid var(--win-border-dark); box-shadow:inset 1px 1px 0 var(--win-face-light); }

.win-doc p{ margin:0 0 .9em; font-weight:700; }
.win-doc p:last-child{ margin-bottom:0; }
.win-doc .us{ letter-spacing:.02em; }

.win-doc--split{ display:flex; gap:20px; align-items:flex-start; }
.win-doc-text{ flex:1 1 auto; min-width:0; }
.win-doc-mascot{ width:clamp(80px,16vw,150px); flex:0 0 auto; animation:bob 3.6s ease-in-out infinite; }

.win-doc--center{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  justify-content:center; min-height:100%;
}
.win-doc--center p{ margin:0; }
.bin-sub{ font-weight:400 !important; opacity:.65; font-size:13px; }
.dash-ico{ width:34px; height:34px; }

/* tape tags */
.tape-tags{
  margin-top:22px;
  position:relative;
  height:150px;
}
.tape{
  position:absolute;
  display:inline-block;
  font-family:var(--font-pixel);
  font-weight:700;
  font-size:14px;
  padding:8px 14px;
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 rgba(0,0,0,.25);
  white-space:nowrap;
}
.tape-1{ top:0; right:6%; background:#3a3630; color:#fff; transform:rotate(-6deg); }
.tape-2{ top:30px; right:0%; background:#f2d94e; color:var(--ink); transform:rotate(4deg); }
.tape-3{ top:78px; right:14%; background:#d8402c; color:#fff; transform:rotate(-5deg); }
.tape-4{ top:96px; right:0; background:#e0a72e; color:var(--ink); transform:rotate(3deg); }
.tape-5{ top:132px; right:10%; background:#cfc9b8; color:var(--ink); transform:rotate(-3deg); }
@media (max-width:640px){
  .tape-tags{ height:auto; display:flex; flex-wrap:wrap; gap:10px; position:static; margin-top:16px; }
  .tape{ position:static; transform:none !important; }
}

/* contact window */
.contact-lead{ text-align:center; max-width:46ch; margin:0 auto 18px !important; }
.win-doc--center .contact-lead{ margin-bottom:6px !important; }
.contact-links{
  display:flex; gap:22px; flex-wrap:wrap; justify-content:center;
  margin-top:8px;
}
.contact-links a{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-decoration:none; color:var(--ink);
  font-family:var(--font-mono); font-size:11.5px;
}
.contact-ico{ width:30px; height:30px; }

/* buttons */
.btn-3d{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  padding:10px 22px;
  border:none;
  background:linear-gradient(180deg, var(--green-1), var(--green-2));
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.7),
    inset -2px -2px 0 var(--green-dark),
    2px 3px 6px rgba(0,0,0,.3);
}
.btn-3d:active{
  transform:translateY(1px);
  box-shadow:
    inset -1px -1px 0 rgba(255,255,255,.5),
    inset 2px 2px 0 var(--green-dark);
}

/* portfolio */
.portfolio-intro, .portfolio-outro{ text-align:center; }
.portfolio-outro{ margin-top:20px !important; font-size:17px; }
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:16px;
  margin:18px 0;
}
.portfolio-card{
  background:#dcd6c4;
  border:2px solid var(--win-border-dark);
  box-shadow:2px 2px 0 rgba(0,0,0,.2);
  padding:0 0 10px;
  overflow:hidden;
}
.pc-thumb{
  height:110px;
  background-size:cover;
}
.pc-1 .pc-thumb{ background:linear-gradient(135deg,#e8a23a,#d8402c); }
.pc-2 .pc-thumb{ background:linear-gradient(135deg,#6fa1c9,#2c5f8f); }
.pc-3 .pc-thumb{ background:linear-gradient(135deg,#c94b4b,#5c1f1f); }
.pc-4 .pc-thumb{ background:linear-gradient(135deg,#9aa6ad,#4a5457); }
.portfolio-card h3{
  font-family:var(--font-pixel);
  font-size:14px;
  margin:10px 12px 2px;
}
.portfolio-card p{ font-size:12px; margin:0 12px !important; font-weight:400; opacity:.7; }

/* wallpaper picker */
.wallpaper-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px,1fr));
  gap:14px;
  margin-top:16px;
}
.wallpaper-swatch{
  height:90px;
  border:2px solid var(--win-border-dark);
  box-shadow:2px 2px 0 rgba(0,0,0,.2);
  position:relative;
  padding:0;
  transition:transform .1s ease;
}
.wallpaper-swatch:hover{ transform:translateY(-2px); }
.wallpaper-swatch:active{ transform:translateY(0); }
.wallpaper-swatch span{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-family:var(--font-mono);
  font-size:11px;
  padding:3px 0;
}
.wallpaper-swatch.wp-bliss{ background-image:url('assets/wp-bliss.jpg'); background-size:cover; background-position:center; }
.wallpaper-swatch.wp-space{ background-image:url('assets/wp-space.jpg'); background-size:cover; background-position:center; }
.wallpaper-swatch.wp-underwater{ background-image:url('assets/wp-underwater.jpg'); background-size:cover; background-position:center; }
.wallpaper-swatch.wp-rainbow{ background-image:url('assets/wp-rainbow.jpg'); background-size:cover; background-position:center; }

/* wallpaper-change "frizzering" — a quick burst of TV static, not a swipe */
#crt-static{
  position:absolute; inset:0;
  z-index:70;
  pointer-events:none;
  opacity:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 5px);
  background-color:#111;
  mix-blend-mode:screen;
}
#crt-static.glitching{
  opacity:1;
  animation:static-flicker .32s steps(2,end) 2;
}
@keyframes static-flicker{
  0%{ background-position:0 0, 0 0; filter:brightness(1.6) contrast(1.4); }
  25%{ background-position:-40px 12px, 20px -8px; filter:brightness(.6) contrast(1.8); }
  50%{ background-position:30px -20px, -15px 15px; filter:brightness(1.4) invert(.15); }
  75%{ background-position:-10px 25px, 35px -30px; filter:brightness(.8) contrast(1.6); }
  100%{ background-position:0 0, 0 0; filter:brightness(1) contrast(1); }
}

/* shutdown video easter egg */
#shutdown-overlay{
  position:absolute; inset:0;
  z-index:90;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  animation:shutdown-in .4s ease forwards;
}
@keyframes shutdown-in{ to{ opacity:1; } }
#shutdown-video{
  width:100%; height:100%;
  object-fit:cover;
}
#shutdown-skip{
  position:absolute;
  bottom:18px; left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.3);
  color:#eee;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  padding:6px 12px;
  opacity:0;
  animation:fade-in .6s ease forwards;
  animation-delay:1.5s;
}

/* resize handle */
.win-resize{
  position:absolute; right:0; bottom:0;
  width:16px; height:16px;
  cursor:nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 50%, var(--win-border-dark) 50% 60%, transparent 60% 70%, var(--win-border-dark) 70% 80%, transparent 80%);
}

/* ==========================================================================
   TASKBAR
   ========================================================================== */
#taskbar{
  position:absolute; left:0; right:0; bottom:0;
  height:48px;
  z-index:55;
  background:linear-gradient(180deg, #2e78e6 0%, #1d5cc9 4%, #163f9e 55%, #0e2c78 100%);
  border-top:1px solid #6fabf7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 -2px 10px rgba(0,0,0,.35);
  display:flex; align-items:center;
  padding:4px 6px;
  gap:6px;
}
#start-btn{
  display:flex; align-items:center; gap:6px;
  background:linear-gradient(180deg, #8fd85e 0%, #5cb32e 42%, #3c9a1c 47%, #328215 50%, #4ba024 55%, #3f9420 100%);
  border:1px solid #1f5c0d;
  border-radius:3px 14px 14px 3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 1px 0 3px rgba(0,0,0,.35);
  padding:6px 16px 6px 10px;
  font-family:'Georgia', 'Times New Roman', serif;
  font-style:italic;
  font-weight:700;
  font-size:17px;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.5);
  height:calc(100% - 4px);
}
#start-btn:active{
  background:linear-gradient(180deg, #328215 0%, #3c9a1c 50%, #5cb32e 100%);
}
.start-ico{ width:19px; height:19px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }

#start-menu{
  position:absolute;
  left:4px; bottom:52px;
  width:220px;
  background:#f2f2f2;
  border:1px solid #0a2c8f;
  border-radius:8px 8px 4px 4px;
  overflow:hidden;
  box-shadow:2px 4px 16px rgba(0,0,0,.45);
  z-index:56;
}
#start-menu::before{
  content:"senza___studio";
  display:block;
  padding:10px 12px;
  background:linear-gradient(180deg, #4f9bf5 0%, #2f7ce8 12%, #1c5fd4 45%, #0e49bf 85%, #0a3fae 100%);
  color:#fff;
  font-family:var(--font-pixel);
  font-weight:700;
  font-size:13px;
  text-shadow:0 1px 1px rgba(0,0,0,.4);
}
#start-menu button{
  width:100%;
  display:flex; align-items:center; gap:9px;
  background:none; border:none;
  padding:9px 12px;
  font-family:var(--font-mono);
  font-size:13.5px;
  text-align:left;
  color:var(--ink);
}
#start-menu button:hover{ background:#cfe0fb; }
#start-menu .pixel-ico{ width:18px; height:18px; }
#start-menu hr{ border:none; border-top:1px solid #ccc; margin:2px 0; }

#taskbar-sep{ width:2px; align-self:stretch; margin:8px 0; background:rgba(0,0,0,.3); box-shadow:1px 0 0 rgba(255,255,255,.15); }

#taskbar-apps{ flex:1; display:flex; align-items:center; gap:5px; height:100%; overflow:hidden; }
.taskbar-app{
  display:flex; align-items:center; gap:7px;
  background:linear-gradient(180deg, #5b97f2 0%, #3a72d9 48%, #2c5cc2 52%, #4884e6 100%);
  border:1px solid #14306e;
  border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  padding:0 12px;
  height:34px;
  font-family:var(--font-mono);
  font-size:13px;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  max-width:170px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.taskbar-app.active{
  background:linear-gradient(180deg, #163f9e 0%, #1c5cc7 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
}
.taskbar-app .pixel-ico{ width:16px; height:16px; flex:0 0 auto; }

#tray{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg, #0e2c78, #163f9e);
  border:1px solid #071c52;
  border-radius:5px 0 0 5px;
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.4);
  padding:0 14px;
  height:34px;
  font-family:var(--font-mono);
  font-size:13px;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.4);
}
.tray-ico{ width:16px; height:16px; }
#clock{ min-width:40px; }

/* ==========================================================================
   ERROR POPUP
   ========================================================================== */
#error-popup{
  position:absolute;
  z-index:50;
  width:min(420px, 88%);
  top:50%; left:50%;
  transform:translate(-50%,-50%);
}
#error-popup[hidden]{ display:none; }
.error-body{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center;
  padding:24px 22px;
}
.error-mascot{ width:56px; height:auto; }
.error-body p{ margin:0; font-weight:700; font-size:14.5px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:720px){
  .os-window:not(#error-popup){ left:4% !important; right:4%; width:92% !important; top:8% !important; height:80% !important; }
  .win-doc--split{ flex-direction:column-reverse; align-items:center; text-align:center; }
  #boot-wordmark{ font-size:clamp(24px, 9vw, 40px); }
  #error-popup{ width:88% !important; }
}
@media (max-width:420px){
  .icon-label{ font-size:10px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ==========================================================================
   WINDOWS 95/98 CLASSIC THEME
   The supplied reference is the classic Chicago shell: flat navy titlebars,
   #c0c0c0 surfaces, square 3D controls and MS Sans Serif typography.
   ========================================================================== */
:root{
  --classic-face:#c0c0c0;
  --classic-light:#ffffff;
  --classic-mid:#808080;
  --classic-dark:#000000;
  --classic-blue:#000080;
  --classic-teal:#008080;
  --font-classic:"MS Sans Serif",Tahoma,Geneva,Arial,sans-serif;
}

body{font-family:var(--font-classic);background:var(--classic-teal)}
#monitor-bezel,#screen{background:var(--classic-teal)}
.glass-reflection,.screen-edge,.scanlines,.vignette{display:none!important}
#screen::before,#screen::after{display:none!important}

#desktop{
  background-color:var(--classic-teal);
  image-rendering:pixelated;
}

.desktop-icon{width:78px;padding:4px;border-radius:0;font-family:var(--font-classic)}
.icon-art{width:48px;height:48px}
.icon-art .win98-icon{width:42px;height:42px;object-fit:contain;image-rendering:pixelated}
.icon-label{
  max-width:78px;
  font-family:var(--font-classic);
  font-size:12px;
  line-height:14px;
  background:transparent;
  border:0;
  padding:1px 2px;
  color:#fff;
  text-shadow:1px 1px #000;
}
.desktop-icon:hover .icon-label,.desktop-icon:focus-visible .icon-label{background:transparent;text-shadow:1px 1px #000}
.desktop-icon:active .icon-label,.desktop-icon.selected .icon-label{background:#000080;color:#fff;outline:1px dotted #fff}

.instagram-pixel-icon{
  display:block;width:38px;height:38px;position:relative;
  background:#d83b75;
  border:3px solid #fff;
  outline:2px solid #000;
  box-shadow:inset 0 0 0 3px #8a2be2;
  image-rendering:pixelated;
}
.instagram-pixel-icon::before{content:"";position:absolute;left:8px;top:8px;width:12px;height:12px;border:3px solid #fff;border-radius:50%}
.instagram-pixel-icon::after{content:"";position:absolute;right:5px;top:5px;width:4px;height:4px;background:#fff}

.mail-desktop-icon{color:inherit;text-decoration:none}
.start-menu-img{width:20px;height:20px;object-fit:contain;image-rendering:pixelated}
#start-menu a{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;color:#000;text-decoration:none;font:13px var(--font-classic)}
#start-menu a:hover{background:var(--classic-blue);color:#fff}

.os-window{
  background:var(--classic-face);
  border:0;
  border-radius:0;
  padding:3px;
  box-shadow:
    inset 1px 1px var(--classic-light),
    inset -1px -1px var(--classic-dark),
    inset 2px 2px #dfdfdf,
    inset -2px -2px var(--classic-mid),
    3px 3px 0 rgba(0,0,0,.28);
  animation:none;
}
.win-titlebar{
  min-height:24px;
  padding:2px 2px 2px 4px;
  border:0;
  border-radius:0;
  background:var(--classic-blue);
  box-shadow:none;
}
.win-title{font-family:var(--font-classic);font-weight:700;font-size:13px;line-height:20px;text-shadow:none}
.win-title .pixel-ico{width:16px;height:16px}
.win-controls{gap:2px}
.win-btn{
  width:20px;height:20px;border:0;border-radius:0;background:var(--classic-face);
  box-shadow:inset 1px 1px var(--classic-light),inset -1px -1px var(--classic-dark),inset 2px 2px #dfdfdf,inset -2px -2px var(--classic-mid);
}
.win-btn:active{box-shadow:inset 1px 1px var(--classic-dark),inset -1px -1px var(--classic-light),inset 2px 2px var(--classic-mid)}
.win-close:hover{background:var(--classic-face)}
.win-body{
  background:var(--classic-face);
  padding:8px;
  font-family:var(--font-classic);
  font-size:13px;
  line-height:1.35;
  border:0;
}
.win-resize{width:14px;height:14px}
.os-window.maximized{height:calc(100% - 34px)!important}

#taskbar{
  height:34px;
  padding:3px 4px;
  gap:4px;
  background:var(--classic-face);
  border:0;
  border-top:1px solid var(--classic-light);
  box-shadow:inset 0 1px #dfdfdf;
}
#start-btn,.taskbar-app,#tray{
  height:28px;
  border:0;
  border-radius:0;
  background:var(--classic-face);
  color:#000;
  text-shadow:none;
  font-family:var(--font-classic);
  box-shadow:inset 1px 1px var(--classic-light),inset -1px -1px var(--classic-dark),inset 2px 2px #dfdfdf,inset -2px -2px var(--classic-mid);
}
#start-btn{padding:2px 7px 2px 4px;font-size:13px;font-weight:700;font-style:normal}
#start-btn:active,.taskbar-app.active{background:var(--classic-face);box-shadow:inset 1px 1px var(--classic-dark),inset -1px -1px var(--classic-light),inset 2px 2px var(--classic-mid)}
.start-ico{width:20px;height:20px}
#taskbar-sep{background:var(--classic-mid);box-shadow:1px 0 var(--classic-light);margin:2px 1px}
#taskbar-apps{height:28px}
.taskbar-app{padding:0 8px;font-size:12px;max-width:180px}
#tray{padding:0 8px;gap:7px;font-size:12px;box-shadow:inset 1px 1px var(--classic-mid),inset -1px -1px var(--classic-light)}
#start-menu{
  left:3px;bottom:34px;width:205px;padding:3px;
  background:var(--classic-face);border:0;border-radius:0;
  box-shadow:inset 1px 1px var(--classic-light),inset -1px -1px var(--classic-dark),inset 2px 2px #dfdfdf,inset -2px -2px var(--classic-mid),3px 3px rgba(0,0,0,.28);
}
#start-menu button{padding:7px 8px;font-family:var(--font-classic);font-size:13px}
#start-menu button:hover{background:var(--classic-blue);color:#fff}

.classic-button{
  display:flex;align-items:center;justify-content:center;color:#000;text-decoration:none;
  background:var(--classic-face);border:0;padding:6px 12px;
  box-shadow:inset 1px 1px var(--classic-light),inset -1px -1px var(--classic-dark),inset 2px 2px #dfdfdf,inset -2px -2px var(--classic-mid);
}
.classic-button:active{box-shadow:inset 1px 1px var(--classic-dark),inset -1px -1px var(--classic-light),inset 2px 2px var(--classic-mid)}

/* Instagram.exe */
.os-window[data-win="instagram"]{min-width:360px;min-height:440px}
.os-window[data-win="instagram"] .win-body{padding:0;overflow:hidden;background:var(--classic-face)}
.instagram-app{height:100%;display:flex;flex-direction:column;min-height:0;background:var(--classic-face);color:#000}
.instagram-menubar{display:flex;gap:14px;padding:4px 8px 5px;border-bottom:1px solid #808080;flex:0 0 auto}
.instagram-menubar button{border:0;background:transparent;padding:0;font:13px var(--font-classic);color:#000}
.instagram-menubar button::first-letter{text-decoration:underline}
.instagram-profile{padding:8px 10px 10px;flex:0 0 auto}
.instagram-username{display:block;text-align:center;color:#000;text-decoration:none;font-weight:700;font-size:16px;padding:5px 0 8px}
.instagram-rule{height:2px;background:#000;border-bottom:1px solid #fff;margin-bottom:10px}
.instagram-summary{display:flex;align-items:center;gap:14px}
.instagram-avatar{width:92px;height:92px;flex:0 0 92px;border-radius:50%;overflow:hidden;background:#000;border:2px solid #000;display:flex;align-items:center;justify-content:center}
.instagram-avatar img{width:86%;height:86%;object-fit:contain;image-rendering:auto}
.instagram-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;flex:1;text-align:center;align-items:start}
.instagram-stats div{display:flex;flex-direction:column;gap:2px;min-width:0}
.instagram-stats strong{font-size:15px}
.instagram-stats span{font-size:12px}
.instagram-follow{grid-column:1 / -1;margin-top:5px;font-weight:700;font-size:13px}
.instagram-bio{display:flex;flex-direction:column;gap:2px;margin-top:10px;font-size:13px;line-height:1.25}
.instagram-bio a{color:#000080;text-decoration:underline}
.instagram-tabs{height:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:3px;flex:0 0 auto;border-top:1px solid #808080}
.instagram-tabs span,.instagram-bottom-nav span{display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--classic-face);box-shadow:inset 1px 1px #fff,inset -1px -1px #000,inset 2px 2px #dfdfdf,inset -2px -2px #808080}
.instagram-tabs span.active{box-shadow:inset 1px 1px #000,inset -1px -1px #fff;background-image:radial-gradient(#808080 1px,transparent 1px);background-size:3px 3px}
.instagram-feed{
  flex:1 1 auto;min-height:0;overflow-y:scroll;display:grid;grid-template-columns:repeat(3,1fr);align-content:start;
  border:2px solid;border-color:#808080 #fff #fff #808080;background:#fff;scrollbar-color:#c0c0c0 #dfdfdf;
}
.instagram-feed a{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-right:1px solid #fff;border-bottom:1px solid #fff;background:#000}
.instagram-feed img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:auto}
.reel-mark,.carousel-mark{position:absolute;right:5px;top:4px;color:#fff;font-size:12px;text-shadow:1px 1px #000}
.instagram-bottom-nav{height:38px;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:3px;flex:0 0 auto}
.instagram-bottom-nav span{font-size:19px}

/* About Us — My Briefcase */
.os-window[data-win="aboutus"]{min-width:540px;min-height:430px}
.os-window[data-win="aboutus"] .win-body{padding:0;overflow:hidden;background:var(--classic-face)}
.aboutus-app{height:100%;min-height:0;display:flex;flex-direction:column;position:relative;background:var(--classic-face);color:#000}
.aboutus-menubar{display:flex;gap:16px;padding:4px 8px;border-bottom:1px solid #808080;flex:0 0 auto}
.aboutus-menubar button{border:0;background:transparent;padding:0;font:13px var(--font-classic);color:#000}
.aboutus-menubar button::first-letter{text-decoration:underline}
.aboutus-toolbar{display:flex;gap:5px;padding:5px;border-bottom:1px solid #808080;flex:0 0 auto}
.aboutus-toolbar span{padding:5px 9px;background:var(--classic-face);font-size:12px;box-shadow:inset 1px 1px #fff,inset -1px -1px #808080}
.aboutus-address{display:flex;gap:6px;align-items:center;padding:4px 5px;border-bottom:1px solid #808080;font-size:12px;flex:0 0 auto}
.aboutus-address span{flex:1;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aboutus-workspace{display:grid;grid-template-columns:170px minmax(0,1fr);gap:3px;padding:3px;flex:1 1 auto;min-height:0}
.aboutus-files,.aboutus-document{border:2px solid;border-color:#808080 #fff #fff #808080;background:#fff;overflow:auto;min-height:0}
.aboutus-files{padding:9px 5px;display:flex;flex-direction:column;gap:4px}
.about-file{border:0;background:transparent;display:flex;align-items:center;gap:8px;padding:6px;text-align:left;font:12px var(--font-classic);color:#000}
.about-file svg{width:26px;height:32px;flex:0 0 auto}
.about-file.active{background:#000080;color:#fff;outline:1px dotted #fff;outline-offset:-3px}
.aboutus-document{position:relative;background:#f7f4ec}
.about-page{min-height:100%;padding:clamp(20px,4vw,52px);animation:about-page-in .14s steps(2,end)}
@keyframes about-page-in{from{opacity:.35}to{opacity:1}}
.about-page[data-about-content="about"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,30%);gap:24px;align-items:center}
.about-copy{max-width:650px}.about-kicker{font:700 11px var(--font-classic);letter-spacing:.08em;color:#000080;margin:0 0 12px}
.about-page h2{font-size:clamp(27px,4vw,52px);line-height:.98;letter-spacing:-.045em;margin:0 0 24px}
.about-page p{font-size:clamp(14px,1.6vw,19px);line-height:1.35;margin:0 0 15px}
.about-mascot{width:100%;max-height:390px;object-fit:contain;image-rendering:auto}
.services-heading{max-width:760px;margin-bottom:24px}.services-heading h2{font-size:clamp(26px,3.6vw,46px);margin-bottom:12px}.services-heading p:last-child{max-width:58ch}
.service-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:30px}
.service-list article{position:relative;background:#c0c0c0;padding:17px 17px 15px 52px;min-height:112px;box-shadow:inset 1px 1px #fff,inset -1px -1px #000,inset 2px 2px #dfdfdf,inset -2px -2px #808080}
.service-list article>span{position:absolute;left:14px;top:15px;color:#000080;font-weight:700}
.service-list h3{font-size:17px;margin:0 0 6px}.service-list p{font-size:13px;margin:0;line-height:1.3}
.works-bar{display:flex;justify-content:space-between;align-items:center;background:#000080;color:#fff;padding:6px 8px;margin-bottom:5px;font-size:12px}
.works-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:150px;gap:5px;background:#fff;padding:5px;border:2px solid;border-color:#808080 #fff #fff #808080}
.work-tile{border:0;padding:0;background:#000;overflow:hidden;position:relative;min-width:0}
.work-tile.wide{grid-column:span 2}.work-tile.tall{grid-row:span 2}
.work-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .12s,transform .12s}
.work-tile:hover img{filter:contrast(1.08) saturate(1.08);transform:scale(1.025)}
.aboutus-status{display:flex;justify-content:space-between;padding:4px 7px;font-size:11px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff;flex:0 0 auto}
.work-lightbox{position:absolute;inset:0;background:rgba(0,0,0,.83);z-index:12;display:flex;align-items:center;justify-content:center;padding:38px}
.work-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border:3px solid #fff;box-shadow:4px 4px 0 #000}
.work-lightbox button{position:absolute;right:10px;top:10px;width:28px;height:26px;border:0;background:#c0c0c0;font:700 20px var(--font-classic);box-shadow:inset 1px 1px #fff,inset -1px -1px #000}

@media (max-width:720px){
  .os-window[data-win="instagram"]{left:3%!important;top:3%!important;width:94%!important;height:calc(100% - 72px)!important;min-width:0}
  .instagram-avatar{width:72px;height:72px;flex-basis:72px}
  .instagram-profile{padding:5px 7px 8px}
  .instagram-bio{font-size:12px}
  #taskbar{height:34px}
  .os-window[data-win="aboutus"]{left:3%!important;top:3%!important;width:94%!important;height:calc(100% - 72px)!important;min-width:0;min-height:0}
  .aboutus-toolbar{overflow-x:auto}.aboutus-toolbar span{white-space:nowrap}
  .aboutus-workspace{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .aboutus-files{flex-direction:row;overflow-x:auto;padding:4px;gap:3px}
  .about-file{padding:4px}.about-file svg{width:18px;height:22px}.about-file span{white-space:nowrap}
  .about-page{padding:22px 18px}
  .about-page[data-about-content="about"]{grid-template-columns:1fr}.about-mascot{max-height:170px;grid-row:1}
  .service-list{grid-template-columns:1fr}.service-list article{min-height:92px}
  .works-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:140px}
  .work-tile.wide{grid-column:span 2}
}