@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");

/* =====================================================================
   TejasOS — dark Windows XP portfolio shell
   Edit the variables in :root to re-skin the whole site.
   ================================================================== */

:root{
  --bg:        #0a0c0e;   /* deepest black          */
  --panel:     #14181c;   /* window bodies          */
  --panel-2:   #1d262e;   /* raised panels          */
  --chrome:    #232a31;   /* bevels, borders        */
  --chrome-hi: #3b4855;   /* light bevel edge       */
  --ink:       #dfe7ec;   /* primary text           */
  --ink-dim:   #8b9aa6;   /* secondary text         */
  --accent:    #35e0d8;   /* the one accent glow    */
  --accent-dk: #0e7d78;
  --danger:    #ff3b30;   /* close button, errors   */
  --term:      #7dffcf;   /* terminal phosphor      */
  --taskbar-h: 42px;
  --font-ui:   "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --font-mono: "Consolas", "Courier New", monospace;
  --font-body: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:13px/1.55 var(--font-ui);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit; color:inherit; cursor:pointer}
a{color:var(--accent)}

/* ---------- screen switching ---------- */
.screen{position:fixed; inset:0; display:none; z-index:1}
.screen.is-active{display:block}
.screen.is-fading{animation:fadeOut .5s ease forwards}
@keyframes fadeOut{to{opacity:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* =====================================================================
   1. HACKER ENTRY TERMINAL
   ================================================================== */
#scr-terminal{background:#04070a; cursor:default}
.term-wrap{
  position:absolute; inset:0;
  padding:min(9vh,90px) min(9vw,90px);
  overflow:hidden;
}
.term{
  margin:0; font:15px/1.85 var(--font-mono);
  color:var(--term); text-shadow:0 0 8px rgba(53,224,216,.55);
  white-space:pre-wrap; letter-spacing:.4px;
}
.caret{
  font:15px/1.85 var(--font-mono); color:var(--term);
  text-shadow:0 0 10px rgba(53,224,216,.7);
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}


/* Hacking-alert style boot polish */
.term-wrap::after{
  content:"SYS // PORTFOLIO CORE";
  position:absolute; right:0; top:0;
  color:#35505a; font:400 10px/1 var(--font-mono);
  letter-spacing:.14em; text-transform:uppercase;
  opacity:.75;
}
#scr-terminal .term-wrap{position:relative}
#scr-terminal .term{text-shadow:0 0 8px rgba(53,224,216,.22)}

/* CRT scanlines + flicker */
.scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.35) 2px 4px),
    radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,.85) 100%);
  animation:flick 5s steps(60) infinite;
}
@keyframes flick{0%,100%{opacity:.85}47%{opacity:.78}48%{opacity:.95}}

.access-stamp{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  font:700 clamp(28px,7vw,84px)/1 var(--font-mono);
  letter-spacing:.16em; color:var(--accent);
  opacity:0; z-index:3;
}
.access-stamp.show{animation:stamp .9s ease-out forwards}
@keyframes stamp{
  0%{opacity:0; scale:1.5; filter:blur(14px)}
  12%{opacity:1; scale:1; filter:blur(0)}
  18%{text-shadow:5px 0 var(--danger), -5px 0 #2f7bff; translate:-52% -50%}
  24%{text-shadow:-6px 0 var(--danger), 6px 0 #2f7bff; translate:-48% -50%}
  32%{text-shadow:0 0 26px var(--accent); translate:-50% -50%}
  100%{opacity:1; text-shadow:0 0 26px var(--accent)}
}

/* =====================================================================
   2. BOOT SPLASH
   ================================================================== */
#scr-splash{background:#04070a}
.splash{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  animation:fadeIn .5s ease;
}
 .wordmark{
  margin:0; font:300 clamp(38px,8vw,80px)/1 var(--font-ui);
  letter-spacing:-.02em; color:#eef6f8;
}
.wordmark em{font-style:normal; font-weight:700; color:var(--accent); text-shadow:0 0 30px rgba(53,224,216,.5)}
.wordmark-sub{margin:0 0 34px; color:var(--ink-dim); letter-spacing:.34em; text-transform:uppercase; font-size:11px}
.splash-foot{margin:40px 0 0; color:#4d5b66; letter-spacing:.2em; font-size:10.5px; text-transform:uppercase}

/* the classic segmented progress bar */
.xp-bar{
  width:190px; height:16px; padding:2px;
  border:1px solid #2b343d; border-radius:9px; background:#080b0e;
  overflow:hidden;
}
.xp-bar-run{display:flex; gap:4px; width:44px; animation:run 2.1s linear infinite}
.xp-bar-run i{
  display:block; width:12px; height:10px; border-radius:3px;
  background:var(--accent); box-shadow:0 0 10px rgba(53,224,216,.9);
}
@keyframes run{from{transform:translateX(-52px)}to{transform:translateX(190px)}}

/* =====================================================================
   3. WELCOME / LOGIN
   ================================================================== */
#scr-welcome{background:
  radial-gradient(circle at 50% 45%, rgba(53,224,216,.08), transparent 26%),
  linear-gradient(#0c1418,#05090b 55%,#0b1216)}
.welcome{position:absolute; inset:0; display:flex; flex-direction:column; animation:fadeIn .5s ease}
.welcome-head{
  padding:28px 46px 22px; display:flex; align-items:baseline; gap:22px; flex-wrap:wrap;
  border-bottom:1px solid rgba(53,224,216,.18);
}
.welcome-brand{font:400 34px/1 var(--font-ui); letter-spacing:.04em}
.welcome-brand em{font-style:normal; font-weight:400; color:var(--accent)}
.welcome-hint{color:var(--ink-dim); font-size:13px; letter-spacing:.06em}
.welcome-body{flex:1; display:flex; align-items:center; justify-content:center; padding:30px}
.login-card{
  width:min(360px, 90vw); display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:34px 34px 30px; border:1px solid rgba(53,224,216,.24);
  background:linear-gradient(180deg, rgba(20,28,33,.82), rgba(7,12,15,.86));
  border-radius:14px; box-shadow:0 0 0 1px rgba(255,255,255,.02) inset, 0 20px 60px rgba(0,0,0,.36), 0 0 60px rgba(53,224,216,.05);
  backdrop-filter:blur(8px);
}
.login-card::before{content:""; width:54px; height:2px; margin-bottom:22px; background:var(--accent); box-shadow:0 0 14px rgba(53,224,216,.7)}
.login-logo-wrap{width:118px; height:118px; display:grid; place-items:center; margin-bottom:18px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(0,0,0,.24)}
.login-logo{width:82px; height:92px; object-fit:contain; display:block; filter:drop-shadow(0 0 18px rgba(255,255,255,.08))}
.login-copy{display:flex; flex-direction:column; align-items:center; gap:3px; margin-bottom:22px}
.login-copy strong{font-size:28px; font-weight:400; letter-spacing:.04em}
.login-copy small{color:var(--ink-dim); font-size:13px; letter-spacing:.1em}
.login-btn{
  min-width:170px; padding:12px 28px; border:1px solid rgba(53,224,216,.75);
  border-radius:3px; background:linear-gradient(180deg, rgba(53,224,216,.15), rgba(53,224,216,.06));
  color:#dffffd; font:400 22px/1 var(--font-ui); letter-spacing:.16em;
  box-shadow:0 0 18px rgba(53,224,216,.08) inset; transition:all .18s ease;
}
.login-btn:hover,.login-btn:focus-visible{background:rgba(53,224,216,.16); border-color:var(--accent); box-shadow:0 0 26px rgba(53,224,216,.18); transform:translateY(-1px); outline:none}
.login-status{margin-top:14px; color:#4d5b66; font:400 11px/1 var(--font-mono); letter-spacing:.08em}
.welcome-foot{padding:18px 46px 26px; color:#4d5b66; border-top:1px solid rgba(53,224,216,.18); font-size:11.5px; text-align:center; letter-spacing:.04em}

/* =====================================================================
   4. DESKTOP + WALLPAPER
   ================================================================== */
#scr-desktop{
  background:#05080a;
  /* Restore the original TejasOS desktop typography after login.
     The terminal, splash, and welcome/login screens continue using Bebas Neue. */
  --font-ui: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  --font-body: "Helvetica Neue", Arial, sans-serif;
  font:13px/1.55 var(--font-ui);
}
.wallpaper{position:absolute; inset:0; overflow:hidden}
.wp-sky{position:absolute; inset:0; background:linear-gradient(#070d12 0%,#0a1620 45%,#0d2029 72%,#102a2e 100%)}
.wp-stars{
  position:absolute; inset:0 0 45% 0; opacity:.7;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #cfeef0 50%, transparent),
    radial-gradient(1px 1px at 28% 12%, #9fd8dd 50%, transparent),
    radial-gradient(1.4px 1.4px at 44% 30%, #eafcff 50%, transparent),
    radial-gradient(1px 1px at 61% 16%, #b7e6ea 50%, transparent),
    radial-gradient(1px 1px at 73% 27%, #dff6f8 50%, transparent),
    radial-gradient(1.3px 1.3px at 86% 10%, #cfeef0 50%, transparent),
    radial-gradient(1px 1px at 92% 33%, #a9dde2 50%, transparent);
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{to{opacity:.35}}
.wp-glow{position:absolute; left:50%; top:34%; width:120vw; height:60vh; translate:-50% -50%;
  background:radial-gradient(closest-side, rgba(53,224,216,.16), transparent 70%); filter:blur(6px)}
.wp-hill{position:absolute; left:-12%; width:124%; border-radius:50% 50% 0 0}
.wp-hill-far{bottom:0; height:44%; background:linear-gradient(#0f3038,#071216); opacity:.75}
.wp-hill-near{bottom:-6%; height:38%; left:-24%; width:150%;
  background:linear-gradient(#14464a,#08191c 70%);
  box-shadow:inset 0 3px 0 rgba(53,224,216,.28)}
.wp-grain{position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image:radial-gradient(#fff 1px, transparent 1px); background-size:3px 3px}

/* ---------- desktop icons ---------- */
.icon-grid{
  position:absolute; top:18px; left:14px; margin:0; padding:0; list-style:none;
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(6,auto); gap:6px 4px; z-index:5;
}
.dicon{
  width:92px; padding:8px 4px 6px; display:flex; flex-direction:column; align-items:center; gap:6px;
  background:transparent; border:1px dotted transparent; border-radius:3px; text-align:center;
}
.dicon-art{width:44px; height:44px; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.7))}
.dicon-art svg{width:100%; height:100%; display:block}
.dicon-label{font-size:11.5px; color:#e6eef2; text-shadow:0 1px 3px #000; line-height:1.3}
.dicon:hover .dicon-art{filter:drop-shadow(0 0 8px rgba(53,224,216,.55))}
.dicon.is-selected{background:rgba(53,224,216,.14); border-color:rgba(223,231,236,.6)}

/* =====================================================================
   WINDOWS
   ================================================================== */
#windows{position:absolute; inset:0 0 var(--taskbar-h) 0; z-index:20; pointer-events:none}
.win{
  position:absolute; pointer-events:auto; min-width:300px; min-height:180px;
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--chrome);
  border-radius:7px 7px 3px 3px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.72), 0 0 0 1px rgba(0,0,0,.5);
  animation:winIn .17s ease-out;
}
@keyframes winIn{from{opacity:0; scale:.96}to{opacity:1; scale:1}}
.win.is-min{display:none}
.win.is-max{left:0!important; top:0!important; width:100%!important; height:100%!important; border-radius:0}

.win-bar{
  flex:0 0 30px; display:flex; align-items:center; gap:8px; padding:0 5px 0 10px;
  background:linear-gradient(#2b353f,#151c22); border-bottom:1px solid #0b0f12;
  cursor:default; user-select:none;
}
.win.is-active .win-bar{background:linear-gradient(#2f4249,#16232a); box-shadow:inset 0 1px 0 rgba(53,224,216,.35)}
.win-title{flex:1; font-size:12.5px; font-weight:700; color:#b9c7d0; text-shadow:0 1px 2px #000; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.win.is-active .win-title{color:#eaf4f6}
.win-btns{display:flex; gap:3px}
.wb{
  width:21px; height:19px; display:grid; place-items:center;
  font-size:10px; line-height:1; color:#cfe0e6;
  background:linear-gradient(#3a4650,#232c34); border:1px solid #0d1215; border-radius:3px;
}
.wb:hover{background:linear-gradient(#4a5a66,#2b353e)}
.wb-x{background:linear-gradient(#8d1f1a,#5c110d); border-color:#3d0b08}
.wb-x:hover{background:linear-gradient(#ff4a40,#b32017)}

.win-body{
  flex:1; overflow:auto; padding:22px 24px 26px;
  background:linear-gradient(#12171b,#0d1114);
  font-family:var(--font-body); font-size:13.5px; color:#c8d4db;
}
.win-body::-webkit-scrollbar{width:13px}
.win-body::-webkit-scrollbar-track{background:#0a0e11}
.win-body::-webkit-scrollbar-thumb{background:linear-gradient(#2d3942,#1b2329); border:1px solid #0a0e11; border-radius:3px}
.win-resize{position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 45%,var(--chrome-hi) 45% 55%,transparent 55%)}

/* window content typography */
.win-body h2{margin:0 0 12px; font:400 22px/1.2 var(--font-ui); color:#f2f8fa; letter-spacing:-.01em}
.win-body h2::after{content:""; display:block; width:46px; height:2px; margin-top:10px; background:var(--accent); box-shadow:0 0 12px rgba(53,224,216,.7)}
.win-body h4{margin:0 0 6px; font-size:14px; color:#eaf3f6}
.win-body p{margin:0 0 12px}
.muted{color:#6f7f8b; font-size:12.5px}
.link{border-bottom:1px solid rgba(53,224,216,.4); text-decoration:none}
.link:hover{border-bottom-color:var(--accent)}
.spec{width:100%; border-collapse:collapse; margin:0 0 14px}
.spec th{width:34%; text-align:left; padding:8px 12px 8px 0; color:var(--accent); font-weight:400; font-size:12.5px; vertical-align:top; border-bottom:1px solid #1c242a}
.spec td{padding:8px 0; border-bottom:1px solid #1c242a}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; margin:0 0 8px}
.card{padding:14px; background:var(--panel-2); border:1px solid #263039; border-radius:5px}
.card:hover{border-color:rgba(53,224,216,.5)}
.bullets{margin:0 0 12px; padding-left:18px}
.bullets li{margin-bottom:6px}
.post{padding:12px 0; border-bottom:1px solid #1c242a}

/* =====================================================================
   DIALOG (system guide tour)
   ================================================================== */
.dialog{
  position:absolute; right:34px; top:56px; width:360px; z-index:40;
  background:var(--panel); border:1px solid var(--chrome); border-radius:7px 7px 3px 3px;
  box-shadow:0 20px 60px rgba(0,0,0,.75); overflow:hidden;
  animation:winIn .2s ease-out;
}
.dialog-body{display:flex; gap:14px; padding:18px 18px 8px}
.mascot{flex:0 0 40px}
.mascot svg{width:40px; height:40px; filter:drop-shadow(0 0 8px rgba(53,224,216,.5))}
.dialog-copy h3{margin:0 0 7px; font:400 15px/1.3 var(--font-ui); color:#f2f8fa}
.dialog-copy p{margin:0; font-size:12.5px; color:#9fb0ba; line-height:1.6}
.dialog-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px 16px}
.dots{display:flex; gap:6px}
.dots i{width:7px; height:7px; border-radius:50%; background:#2b353d; display:block}
.dots i.on{background:var(--accent); box-shadow:0 0 8px rgba(53,224,216,.8)}
.dialog-actions{display:flex; gap:8px}
.xp-btn{
  min-width:74px; padding:6px 14px; font-size:12px; color:#d5e2e8;
  background:linear-gradient(#2c363f,#1a2228); border:1px solid #0d1215; border-radius:4px;
}
.xp-btn:hover{background:linear-gradient(#38454f,#212b32)}
.xp-btn-primary{background:linear-gradient(#0f6f6b,#0a4a48); border-color:#062e2c; color:#eafeff}
.xp-btn-primary:hover{background:linear-gradient(#159b96,#0c605d)}

/* =====================================================================
   BALLOON TIP
   ================================================================== */
.balloon{
  position:absolute; right:16px; bottom:calc(var(--taskbar-h) + 14px); width:308px; z-index:45;
  padding:14px 16px; background:linear-gradient(#1a2b31,#101a1e);
  border:1px solid rgba(53,224,216,.4); border-radius:8px;
  box-shadow:0 16px 44px rgba(0,0,0,.7);
  animation:balloonIn .3s ease-out;
}
@keyframes balloonIn{from{opacity:0; translate:0 14px}to{opacity:1; translate:0 0}}
.balloon::after{content:""; position:absolute; right:44px; bottom:-8px; width:14px; height:14px;
  background:#101a1e; border-right:1px solid rgba(53,224,216,.4); border-bottom:1px solid rgba(53,224,216,.4); rotate:45deg}
.balloon-x{position:absolute; right:8px; top:6px; width:18px; height:18px; padding:0; font-size:9px;
  background:transparent; border:0; color:#7b8b95; border-radius:3px}
.balloon-x:hover{color:#fff; background:rgba(255,255,255,.08)}
.balloon-row{display:flex; align-items:center; gap:12px}
.balloon-row strong{display:block; font-size:13px; color:#eaf5f7}
.balloon-row small{color:#7f8f9a; font-size:11px}
.batt{width:34px; height:17px; border:1.5px solid #46d68a; border-radius:3px; padding:2px; position:relative; display:block}
.batt::after{content:""; position:absolute; right:-5px; top:4px; width:3px; height:7px; background:#46d68a; border-radius:0 2px 2px 0}
.batt i{display:block; height:100%; width:100%; background:#46d68a; box-shadow:0 0 8px rgba(70,214,138,.7)}
.balloon-note{margin:12px 0 0; padding:10px 12px; font-size:12px; line-height:1.6; color:#bcd0d8;
  background:rgba(53,224,216,.08); border-left:2px solid var(--accent); border-radius:0 4px 4px 0}

/* =====================================================================
   START MENU
   ================================================================== */
.startmenu{
  position:absolute; left:6px; bottom:calc(var(--taskbar-h) + 4px); width:392px; z-index:60;
  background:var(--panel); border:1px solid var(--chrome); border-radius:8px 8px 3px 3px;
  box-shadow:0 -6px 50px rgba(0,0,0,.8); overflow:hidden;
  animation:smIn .16s ease-out;
}
@keyframes smIn{from{opacity:0; translate:0 12px}to{opacity:1; translate:0 0}}
.sm-head{display:flex; align-items:center; gap:12px; padding:12px 16px;
  background:linear-gradient(#12494b,#0a2b2e); border-bottom:1px solid rgba(53,224,216,.35)}
.sm-avatar{width:38px; height:38px; border:1px solid rgba(53,224,216,.5); border-radius:4px; overflow:hidden}
.sm-avatar svg{width:100%; height:100%; display:block}
.sm-name{font-weight:700; font-size:14px; color:#eafcff}
.sm-cols{display:grid; grid-template-columns:1.25fr 1fr}
.sm-col{margin:0; padding:8px 0; list-style:none}
.sm-col-left{border-right:1px solid #1e262c}
.sm-col-right{background:#0f1417}
.sm-col button{
  width:100%; display:block; text-align:left; padding:8px 16px;
  background:transparent; border:0;
}
.sm-col button:hover{background:linear-gradient(90deg,rgba(53,224,216,.16),transparent)}
.sm-col-left b{display:block; font-size:12.5px; color:#e8f2f5; font-weight:700}
.sm-col-left small{display:block; font-size:11px; color:#6f8089}
.sm-col-right button{font-size:12.5px; color:#cfdce2}
.sm-foot{display:flex; justify-content:flex-end; gap:8px; padding:10px 14px;
  background:linear-gradient(#12494b,#0a2b2e); border-top:1px solid rgba(53,224,216,.35)}
.sm-power{padding:6px 12px; font-size:12px; background:rgba(0,0,0,.28);
  border:1px solid rgba(53,224,216,.35); border-radius:4px; color:#dff8f9}
.sm-power:hover{background:rgba(53,224,216,.18)}

/* =====================================================================
   TASKBAR
   ================================================================== */
.taskbar{
  position:absolute; left:0; right:0; bottom:0; height:var(--taskbar-h); z-index:70;
  display:flex; align-items:stretch; gap:8px; padding:0 8px 0 0;
  background:linear-gradient(#1e272e,#0c1013 65%,#0a0d10);
  border-top:1px solid rgba(53,224,216,.35);
  box-shadow:0 -3px 18px rgba(0,0,0,.7);
}
.start-btn{
  display:flex; align-items:center; gap:9px; padding:0 22px 0 14px; margin-right:6px;
  font:italic 700 15px/1 var(--font-ui); color:#eafcff;
  background:linear-gradient(#14584f,#083630 60%,#062a26);
  border:0; border-radius:0 12px 12px 0;
  box-shadow:inset 0 1px 0 rgba(53,224,216,.45), 3px 0 14px rgba(0,0,0,.6);
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.start-btn:hover{background:linear-gradient(#1a7368,#0a463e 60%,#073430)}
.start-glyph{display:grid; grid-template-columns:1fr 1fr; gap:2px; width:15px; height:15px}
.start-glyph i{display:block; background:var(--accent); border-radius:1px; box-shadow:0 0 6px rgba(53,224,216,.9)}
.quick{display:flex; align-items:center; gap:2px; padding:0 8px 0 2px; border-right:1px solid #2b343b}
.qbtn{width:28px; height:28px; padding:5px; background:transparent; border:1px solid transparent; border-radius:4px}
.qbtn svg{width:100%; height:100%; display:block}
.qbtn:hover{background:rgba(53,224,216,.12); border-color:rgba(53,224,216,.35)}
.tasks{flex:1; display:flex; align-items:center; gap:5px; overflow:hidden}
.taskbtn{
  max-width:190px; min-width:120px; height:28px; padding:0 12px; display:flex; align-items:center; gap:8px;
  font-size:12px; color:#c6d4db; text-align:left;
  background:linear-gradient(#252f37,#151c21); border:1px solid #0d1215; border-radius:4px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.taskbtn:hover{background:linear-gradient(#2f3b44,#1b232a)}
.taskbtn.on{background:linear-gradient(#0f5f5c,#0a3f3d); border-color:rgba(53,224,216,.45); color:#eafcff;
  box-shadow:inset 0 1px 0 rgba(53,224,216,.4)}
.tray{display:flex; align-items:center; gap:10px; padding:0 4px 0 12px; border-left:1px solid #2b343b}
.tray-btn,.tray-net{width:20px; height:20px; padding:1px; background:transparent; border:0; display:block}
.tray-btn svg,.tray-net svg{width:100%; height:100%; display:block}
.tray-btn.muted svg{opacity:.45}
.tray-btn.muted .wave{display:none}
.tray-clock{display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; padding-left:2px}
.tray-clock b{font-size:12px; font-weight:400; color:#e4eef2}
.tray-clock small{font-size:10px; color:#75858f}

/* =====================================================================
   SHUTDOWN + SKIP
   ================================================================== */
#scr-off{background:#04070a}
.off-msg{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; margin:0; text-align:center; font:300 20px/1.6 var(--font-ui); color:#c9d6dc; animation:fadeIn .8s ease}
.skip{
  position:fixed; right:18px; bottom:18px; z-index:999;
  padding:7px 14px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:#9fb0ba; background:rgba(8,12,15,.75);
  border:1px solid rgba(53,224,216,.3); border-radius:4px; backdrop-filter:blur(4px);
}
.skip:hover{color:#eafcff; border-color:var(--accent)}
.skip[hidden]{display:none}

/* =====================================================================
   MOBILE — windows go fullscreen, taskbar becomes bottom nav
   ================================================================== */
@media (max-width:760px){
  .icon-grid{grid-auto-flow:row; grid-template-rows:none; grid-template-columns:repeat(3,1fr);
    top:14px; left:10px; right:10px; gap:10px 4px}
  .dicon{width:100%}
  .win{left:0!important; top:0!important; width:100%!important;
    height:calc(100% - var(--taskbar-h))!important; border-radius:0; border:0}
  .win-resize{display:none}
  .dialog{left:12px; right:12px; width:auto; top:auto; bottom:calc(var(--taskbar-h) + 12px)}
  .balloon{left:12px; right:12px; width:auto}
  .startmenu{left:6px; right:6px; width:auto}
  .quick{display:none}
  .taskbtn{min-width:0}
  .term{font-size:12.5px; line-height:1.75}
  .term-wrap{padding:26px 20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}


/* =====================================================================
   PORTFOLIO / GAMES / PAINT EXTENSIONS
   ================================================================== */
.drive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}.drive-card{display:flex;align-items:center;gap:12px;padding:14px;background:#0d1519;border:1px solid #26353e;border-radius:6px;color:#dce5ea;text-align:left;cursor:pointer}.drive-card:hover{border-color:#35e0d8;box-shadow:0 0 18px rgba(53,224,216,.12)}.drive-card small{display:block;color:#76838d;margin-top:3px}.drive-icon{display:grid;place-items:center;width:44px;height:36px;border-radius:4px;background:linear-gradient(#26333c,#141d22);border:1px solid #3b4855;color:#35e0d8;font-weight:700}.project-kicker{display:block;font-size:10px;letter-spacing:.14em;color:#35e0d8;margin-bottom:8px}.card.featured{border-color:#334c55}.card.ai{border-color:#1d5a58}.skill-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.skill-columns h4{margin:0 0 8px;color:#35e0d8;font-size:13px;text-transform:uppercase;letter-spacing:.08em}.game-launch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.game-launch{min-height:84px;padding:16px;background:#0d1519;border:1px solid #2a3b43;border-radius:6px;color:#e7eef2;text-align:left;cursor:pointer}.game-launch:hover{border-color:#35e0d8;box-shadow:0 0 18px rgba(53,224,216,.12)}.game-launch strong{display:block;font-size:16px}.game-launch small{display:block;margin-top:6px;color:#75828d}.scoreboard{margin-top:14px;padding:12px;border-top:1px solid #223139;color:#94a1aa;display:flex;justify-content:space-between;gap:10px}.game-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0 12px;color:#8e9ba4}.game-status{margin-bottom:12px;color:#35e0d8;min-height:20px}.mine-board{display:grid;grid-template-columns:repeat(9,32px);gap:3px;justify-content:center;margin:0 auto}.mine-cell{width:32px;height:32px;border:1px solid #33444e;background:#162128;color:#dfe9ed;font-weight:700;font-size:14px;cursor:pointer;border-radius:3px}.mine-cell:hover{border-color:#35e0d8}.mine-cell.revealed{background:#0b1114;border-color:#1f2c33}.mine-cell.flagged{color:#35e0d8}.mine-cell.mine{background:#331a1a;color:#ff8e8e}.game-canvas{display:block;margin:0 auto;background:#081014;border:1px solid #294047;image-rendering:pixelated;max-width:100%;height:auto}.paint-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px;color:#92a0a9}.paint-canvas{display:block;width:100%;height:auto;background:#fff;border:1px solid #30444e;cursor:crosshair;touch-action:none}.visitor-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.visitor-art{background:#0c1317;border:1px solid #25363f;border-radius:6px;overflow:hidden}.visitor-art img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#fff}.visitor-art .art-meta{padding:9px;display:flex;justify-content:space-between;gap:8px;align-items:center}.visitor-art .art-meta span{font-size:11px;color:#7f8d97}@media(max-width:700px){.drive-grid,.game-launch-grid,.skill-columns,.visitor-gallery{grid-template-columns:1fr}}

/* Case-study prototype cards */
.portfolio-thumb{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#101a1f,#081014);border:1px dashed #314b54;border-radius:5px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:14px;position:relative}.portfolio-thumb::before{content:"";position:absolute;inset:8px;border:1px solid rgba(53,224,216,.10);border-radius:3px}.portfolio-thumb span{position:relative;z-index:1;font-size:9px;letter-spacing:.18em;color:#607983}.portfolio-thumb img{width:100%;height:100%;object-fit:cover;display:block}.portfolio-card .portfolio-card-kicker{margin-top:0}.portfolio-card{padding:12px}.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:12px 0 24px}.portfolio-card{min-height:170px;padding:16px;background:linear-gradient(180deg,#10191e,#0b1216);border:1px solid #263842;border-radius:7px;color:#dce7eb;text-align:left;cursor:pointer;transition:.18s ease;display:flex;flex-direction:column;justify-content:flex-start}.portfolio-card:hover{border-color:#35e0d8;box-shadow:0 0 22px rgba(53,224,216,.12);transform:translateY(-2px)}.portfolio-card.e4m{border-color:#4f4a36}.portfolio-card.ai{border-color:#1d5a58}.portfolio-card-kicker{font-size:9px;letter-spacing:.14em;color:#35e0d8;margin-bottom:9px}.portfolio-card h4{margin:0 0 8px;font-size:18px;line-height:1.05}.portfolio-card p{margin:0;color:#8998a1;font-size:12px;line-height:1.45}.portfolio-card-action{margin-top:auto;padding-top:16px;font-size:10px;letter-spacing:.12em;color:#d8f8f5}.work-section-label{display:flex;align-items:center;gap:10px;margin-top:18px;border-bottom:1px solid #1e2c33;padding-bottom:8px}.work-section-label span{color:#35e0d8;font-size:11px}.work-section-label strong{font-size:11px;letter-spacing:.16em;color:#c7d2d7}.case-prototype-head{margin-bottom:18px}.case-prototype-head h2{font-size:30px;margin:2px 0 7px}.case-prototype-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.case-prototype-grid section{padding:16px;background:#0c1418;border:1px solid #1f2d34;border-radius:6px}.case-prototype-grid.two{margin-top:0}.case-label{display:block;color:#35e0d8;font-size:9px;letter-spacing:.14em;margin-bottom:8px}.case-prototype-grid h4{margin:0 0 7px;font-size:16px}.placeholder-copy{margin:0;color:#87949c;line-height:1.55;font-size:12px}.media-placeholder{min-height:180px;border:1px dashed #35525a;border-radius:7px;background:repeating-linear-gradient(45deg,#0b1317,#0b1317 8px,#0d171b 8px,#0d171b 16px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;color:#68808b;margin:14px 0}.media-placeholder span{font-size:9px;letter-spacing:.18em;color:#35e0d8}.media-placeholder strong{font-size:14px;color:#b5c8ce}.media-placeholder small{font-size:11px}.ttt-board{display:grid;grid-template-columns:repeat(3,88px);grid-template-rows:repeat(3,88px);gap:7px;justify-content:center;margin:18px auto}.ttt-cell{width:88px;height:88px;background:#101a1f;border:1px solid #314650;border-radius:6px;color:#d9fffb;font-size:34px;font-family:var(--font-ui);cursor:pointer}.ttt-cell:hover:not(.occupied){border-color:#35e0d8;box-shadow:0 0 15px rgba(53,224,216,.12)}.ttt-cell.occupied{cursor:default}@media(max-width:900px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.portfolio-grid,.case-prototype-grid{grid-template-columns:1fr}.ttt-board{grid-template-columns:repeat(3,72px);grid-template-rows:repeat(3,72px)}.ttt-cell{width:72px;height:72px}}

.folder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.folder-card{display:flex;align-items:center;gap:12px;padding:14px;background:#0d1519;border:1px solid #26353e;border-radius:6px;color:#dce5ea;text-align:left;cursor:pointer}.folder-card:hover{border-color:#35e0d8;box-shadow:0 0 18px rgba(53,224,216,.12)}.folder-card.static{cursor:default}.folder-card small{display:block;color:#76838d;margin-top:3px}.folder-mark{display:grid;place-items:center;min-width:40px;height:34px;border-radius:4px;background:linear-gradient(#26333c,#141d22);border:1px solid #3b4855;color:#35e0d8;font-size:11px;font-weight:700}.folder-card strong{font-size:12px;letter-spacing:.04em}@media(max-width:700px){.folder-grid{grid-template-columns:1fr}}



/* Expanded day/night treatment: desktop icons, folders, quick/task buttons, tray and taskbar */
#scr-desktop.day-theme .taskbar{
  background:linear-gradient(180deg,#eef5f7 0%,#d4e2e7 48%,#becfd6 100%);
  border-top-color:#91a8b0;
  box-shadow:0 -4px 16px rgba(42,63,72,.18);
}
#scr-desktop.day-theme .start-btn{
  background:linear-gradient(180deg,#f8fbfc,#d7e6eb);
  color:#183039;
  border-color:#91a8b0;
  text-shadow:none;
}
#scr-desktop.day-theme .start-btn:hover{background:linear-gradient(180deg,#ffffff,#cfe0e6);}
#scr-desktop.day-theme .quick .qbtn,
#scr-desktop.day-theme .tray-btn{
  background:linear-gradient(180deg,#f3f8fa,#dbe7eb);
  border-color:#a3b7be;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
#scr-desktop.day-theme .quick .qbtn:hover,
#scr-desktop.day-theme .tray-btn:hover{
  background:linear-gradient(180deg,#ffffff,#cbdde3);
  border-color:#6f929d;
}
#scr-desktop.day-theme .tasks{
  background:rgba(214,227,232,.72);
  border-left-color:#9eb2b9;
  border-right-color:#9eb2b9;
}
#scr-desktop.day-theme .task-btn{
  background:linear-gradient(180deg,#eef5f7,#d6e4e8);
  border-color:#9eb2b9;
  color:#20363e;
  text-shadow:none;
}
#scr-desktop.day-theme .task-btn.is-active{
  background:linear-gradient(180deg,#c9dce2,#b8cfd6);
  border-color:#6d8f99;
}
#scr-desktop.day-theme .tray{
  color:#253a42;
  background:linear-gradient(180deg,rgba(235,244,247,.85),rgba(205,219,224,.85));
}
#scr-desktop.day-theme .tray svg path,
#scr-desktop.day-theme .tray svg circle,
#scr-desktop.day-theme .tray svg rect,
#scr-desktop.day-theme .tray svg g{
  filter:none;
}
#scr-desktop.day-theme .tray-net svg g rect{fill:#2c8f92;}
#scr-desktop.day-theme .quick svg path,
#scr-desktop.day-theme .quick svg rect,
#scr-desktop.day-theme .quick svg line,
#scr-desktop.day-theme .quick svg polyline{
  filter:none;
}
#scr-desktop.day-theme .dicon-art{filter:drop-shadow(0 2px 3px rgba(24,49,57,.28));}
#scr-desktop.day-theme .dicon:hover .dicon-art{filter:drop-shadow(0 0 8px rgba(24,122,125,.28));}
#scr-desktop.day-theme .folder-card{
  background:linear-gradient(180deg,#f4f8fa,#dce8ec);
  border-color:#a5b9c0;
  color:#20363e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92);
}
#scr-desktop.day-theme .folder-card:hover{
  border-color:#4d8a92;
  background:linear-gradient(180deg,#ffffff,#d3e4e8);
  box-shadow:0 0 18px rgba(48,131,139,.14);
}
#scr-desktop.day-theme .folder-card small{color:#5c6f77;}
#scr-desktop.day-theme .folder-card strong{color:#20363e;}
#scr-desktop.day-theme .folder-mark{
  background:linear-gradient(180deg,#eaf3f5,#cbdde2);
  border-color:#91abb4;
  color:#1b7e83;
}
#scr-desktop.day-theme .drive-grid .folder-card{
  background:linear-gradient(180deg,#f7fafb,#e1ecef);
}
#scr-desktop.day-theme .win{
  background:#f4f7f8;
  border-color:#9fb4bb;
  box-shadow:0 18px 50px rgba(30,54,62,.22),0 0 0 1px rgba(255,255,255,.55);
}
#scr-desktop.day-theme .win-bar{
  background:linear-gradient(180deg,#e7f0f3,#c4d7de);
  border-bottom-color:#9bb2ba;
}
#scr-desktop.day-theme .win-title{color:#20363e;text-shadow:none;}
#scr-desktop.day-theme .win.is-active .win-title{color:#142a32;}
#scr-desktop.day-theme .wb{
  background:linear-gradient(180deg,#eef5f7,#d1e0e5);
  color:#294049;
  border-color:#94aab2;
}
#scr-desktop.day-theme .win-body{color:#243940;background:#f5f8f9;}

/* =====================================================================
   DAY / NIGHT THEME
   ================================================================== */
#scr-desktop.day-theme{background:#dfeaf0;color:#1d2930}
#scr-desktop.day-theme .wp-sky{background:linear-gradient(180deg,#9fcde2 0%,#c7dde6 48%,#e5ece9 76%,#ced8d0 100%)}
#scr-desktop.day-theme .wp-stars{opacity:.08}
#scr-desktop.day-theme .wp-glow{background:radial-gradient(closest-side,rgba(255,255,255,.7),transparent 70%)}
#scr-desktop.day-theme .wp-hill-far{background:linear-gradient(#92aaa5,#5a6b67);opacity:.72}
#scr-desktop.day-theme .wp-hill-near{background:linear-gradient(#78928c,#3d504d 72%);box-shadow:inset 0 3px 0 rgba(255,255,255,.34)}
#scr-desktop.day-theme .wp-grain{opacity:.025}
#scr-desktop.day-theme .dicon-label{color:#102026;text-shadow:0 1px 2px rgba(255,255,255,.7)}
#scr-desktop.day-theme .dicon.is-selected{background:rgba(24,122,125,.13);border-color:rgba(21,73,77,.42)}
#scr-desktop.day-theme .tray-clock b{color:#203039}
#scr-desktop.day-theme .tray-clock small{color:#52636a}
#scr-desktop.day-theme .tray{border-left-color:rgba(49,68,74,.28)}
.theme-toggle svg{transition:transform .35s ease,filter .35s ease}
.theme-toggle.is-day svg{transform:rotate(35deg);filter:drop-shadow(0 0 6px rgba(255,203,95,.75))}
.theme-toggle.is-day svg circle{fill:#ffcf66}
.theme-toggle.is-day svg path{stroke:#ffcf66}


/* =====================================================================
   PORTFOLIO POLISH — selected work, awards, case study hierarchy,
   about profile, skills system, and theme-aware cards.
   ================================================================== */
.work-hero{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:14px}.work-hero h2{font-size:34px;margin:2px 0 6px}.work-hero p{max-width:680px;margin:0;color:#8998a1;line-height:1.55}.work-hero-meta{min-width:210px;text-align:right;border-left:1px solid #213039;padding-left:16px}.work-hero-meta strong,.work-hero-meta span{display:block;font-size:9px;letter-spacing:.18em}.work-hero-meta strong{color:#35e0d8}.work-hero-meta span{color:#83939d;margin-top:5px}
.work-filters{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 18px;padding:7px;background:#0b1216;border:1px solid #1f2c33;border-radius:7px}.work-filter{border:1px solid #2a3b43;background:#101a1f;color:#7f939c;border-radius:4px;padding:7px 11px;font:600 9px/1 var(--font-ui);letter-spacing:.14em;cursor:pointer}.work-filter:hover{border-color:#35e0d8;color:#c9efed}.work-filter.is-active{background:#163137;color:#d7fffb;border-color:#35e0d8;box-shadow:inset 0 0 0 1px rgba(53,224,216,.12)}
.award-wall{margin:10px 0 22px;padding:13px;background:linear-gradient(180deg,#0e171b,#0a1013);border:1px solid #24343d;border-radius:7px}.award-wall-head{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #1f2c33;padding-bottom:9px;margin-bottom:10px}.award-wall-head span{font-size:10px;letter-spacing:.16em;color:#35e0d8}.award-wall-head small{color:#667780;font-size:10px}.award-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.award-tile{min-height:100px;padding:12px;background:#101a1f;border:1px solid #2c3d45;border-radius:6px;color:#dce7eb;text-align:left;cursor:pointer;transition:.18s ease}.award-tile:hover{transform:translateY(-2px);border-color:#6bbeb8;box-shadow:0 0 18px rgba(53,224,216,.10)}.award-tile strong{display:block;margin:8px 0 4px;font-size:12px;letter-spacing:.03em}.award-tile small{display:block;color:#7f929a;line-height:1.35}.award-medal{display:inline-block;font-size:9px;letter-spacing:.14em;color:#d5e8ed;border:1px solid #506771;padding:4px 6px;border-radius:999px}.award-medal.gold{border-color:#8e7750;color:#f0cc78}.award-medal.bronze{border-color:#765d47;color:#cd9f78}
.portfolio-card{position:relative;overflow:hidden}.portfolio-card::after{content:"";position:absolute;inset:auto 12px 12px auto;width:8px;height:8px;border-right:1px solid #35e0d8;border-bottom:1px solid #35e0d8;opacity:.55;transform:rotate(-45deg)}.portfolio-card.featured{box-shadow:inset 0 0 0 1px rgba(53,224,216,.04)}.portfolio-card.ai{background:linear-gradient(180deg,#0f1b1c,#0a1316)}
.case-prototype-head{padding:10px 0 4px}.case-prototype-head h2{font-size:38px;line-height:1;margin:3px 0 9px;max-width:760px}.case-prototype-head .muted{max-width:760px}.case-prototype-head + .spec{margin-top:6px}.case-prototype-head + .spec td{color:#d5e5e9;font-weight:600}.case-prototype-head + .spec tr:nth-child(1) td{font-size:14px}.media-placeholder{min-height:240px;margin:18px 0 20px;box-shadow:inset 0 0 0 1px rgba(53,224,216,.05)}.case-prototype-grid section{transition:border-color .18s ease,transform .18s ease}.case-prototype-grid section:hover{border-color:#2f4b55;transform:translateY(-1px)}
.role-highlight{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid #325059;background:#101d21;border-radius:999px;color:#c9f4f1;font-size:9px;letter-spacing:.12em;text-transform:uppercase;margin:8px 0 4px}
.about-hero h2{font-size:40px;line-height:1;margin:3px 0 8px}.about-hero h3{font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#9bb2ba;margin:0 0 14px}.about-hero h3 span{color:#35e0d8;padding:0 5px}.about-hero p{max-width:760px;line-height:1.7;color:#9baab2}.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}.about-grid section{padding:15px;background:#0c1418;border:1px solid #1f2d34;border-radius:6px}.about-grid section p{margin:0;color:#91a0a8;font-size:12px;line-height:1.6}.about-strip{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 15px;border-top:1px solid #223139;border-bottom:1px solid #223139;color:#73858e}.about-strip strong{font-size:10px;letter-spacing:.14em;color:#35e0d8}.about-strip span{font-size:11px}
.skills-hero h2{font-size:34px;margin:3px 0 7px}.skills-hero p{max-width:720px;color:#8998a1;line-height:1.55}.skill-panels{margin-top:18px}.skill-panel{padding:16px;background:#0c1418;border:1px solid #1f2d34;border-radius:7px;min-height:130px}.skill-panel h4{margin:0 0 12px;color:#35e0d8;letter-spacing:.12em}.skill-tags{display:flex;flex-wrap:wrap;gap:7px}.skill-tags span{padding:7px 9px;border:1px solid #293b44;border-radius:4px;background:#10191e;color:#bccad0;font-size:10px}
/* Day-mode treatment for the new work surfaces */
#scr-desktop.day-theme .work-filters{background:#e6eef1;border-color:#afc0c6}#scr-desktop.day-theme .work-filter{background:#f8fbfc;color:#5e7079;border-color:#acbec5}#scr-desktop.day-theme .work-filter.is-active{background:#d9eaed;color:#1f5559;border-color:#2c8f92}#scr-desktop.day-theme .award-wall{background:linear-gradient(180deg,#f7fafb,#e6eef1);border-color:#b2c2c7}#scr-desktop.day-theme .award-wall-head{border-bottom-color:#ccd9dd}#scr-desktop.day-theme .award-tile{background:#f8fbfc;border-color:#bcccd1;color:#243940}#scr-desktop.day-theme .award-tile small{color:#65767e}#scr-desktop.day-theme .portfolio-card{background:linear-gradient(180deg,#f9fbfb,#e8eff1);border-color:#b5c6cb;color:#20363e}#scr-desktop.day-theme .portfolio-card p{color:#62747c}#scr-desktop.day-theme .portfolio-card-kicker,#scr-desktop.day-theme .case-label{color:#2c8f92}#scr-desktop.day-theme .case-prototype-grid section,#scr-desktop.day-theme .about-grid section,#scr-desktop.day-theme .skill-panel{background:#edf4f6;border-color:#bfd0d5}#scr-desktop.day-theme .placeholder-copy,#scr-desktop.day-theme .about-grid section p{color:#667880}#scr-desktop.day-theme .skill-tags span{background:#f7fafb;border-color:#c1d0d5;color:#2b444c}#scr-desktop.day-theme .award-medal{color:#2f4d55;border-color:#9eafb5}#scr-desktop.day-theme .about-strip{border-color:#c6d4d8}#scr-desktop.day-theme .about-hero h3{color:#4e636c}#scr-desktop.day-theme .work-hero p,#scr-desktop.day-theme .skills-hero p{color:#62747c}#scr-desktop.day-theme .work-hero-meta{border-left-color:#c5d3d7}#scr-desktop.day-theme .work-hero-meta strong{color:#2c8f92}#scr-desktop.day-theme .work-hero-meta span{color:#64767e}
@media(max-width:900px){.award-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.work-hero{align-items:flex-start;flex-direction:column}.work-hero-meta{border-left:0;border-top:1px solid #213039;padding-left:0;padding-top:8px;text-align:left;width:100%}}
@media(max-width:700px){.award-grid,.about-grid{grid-template-columns:1fr}.work-filters{overflow:auto;flex-wrap:nowrap}.work-filter{flex:0 0 auto}.about-strip{flex-direction:column;align-items:flex-start}.case-prototype-head h2{font-size:30px}}
.case-video-slot{min-height:240px;margin:18px 0 20px;border:1px dashed #35525a;border-radius:7px;overflow:hidden;background:#0a1216;position:relative;box-shadow:inset 0 0 0 1px rgba(53,224,216,.05);display:flex;align-items:center;justify-content:center;padding:10px}
.case-video-slot.video-landscape{padding:0}
.case-video-slot.video-portrait{padding:10px}
.case-auto-video{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;background:#000}
.case-video-slot.video-landscape .case-auto-video{width:100%;max-width:none}
.case-video-slot.video-portrait .case-auto-video{width:auto;height:min(70vh,760px);max-width:100%;max-height:760px}
.case-video-slot.video-square .case-auto-video{width:min(72%,760px);max-height:70vh}
.case-video-placeholder{min-height:240px;padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;color:#68808b;background:repeating-linear-gradient(45deg,#0b1317,#0b1317 8px,#0d171b 8px,#0d171b 16px)}
.case-video-placeholder span{font-size:9px;letter-spacing:.18em;color:#35e0d8}.case-video-placeholder strong{font-size:14px;color:#b5c8ce}.case-video-placeholder small{max-width:620px;font-size:11px;line-height:1.45}
#scr-desktop.day-theme .case-video-slot{border-color:#9eb4bb;background:#eaf0f2}.day-theme .case-video-placeholder{background:repeating-linear-gradient(45deg,#eef4f6,#eef4f6 8px,#e6eef1 8px,#e6eef1 16px);color:#647780}.day-theme .case-video-placeholder strong{color:#38515a}.day-theme .case-video-placeholder span{color:#2c8f92}


/* ================================================================
   CASE STUDY MEDIA — FULL WIDTH HERO VIDEO
================================================================ */
.case-video-slot{width:100%;margin:18px 0 24px;padding:0;border:0;border-radius:0;background:#05090b;box-shadow:none;overflow:hidden;display:block}
.case-video-slot.video-landscape,.case-video-slot.video-portrait,.case-video-slot.video-square{padding:0}
.case-video-slot .case-auto-video{display:block;width:100%;height:auto;max-width:none;max-height:none;object-fit:cover;background:#05090b}
.case-video-placeholder{min-height:320px;width:100%;border:1px dashed #35525a;box-sizing:border-box}

/* ================================================================
   SOCIAL MEDIA — RESPONSIVE MASONRY WALL
================================================================ */
.social-section{margin:12px 0 26px}
.social-grid{column-count:3;column-gap:14px}
.social-tile{break-inside:avoid;display:block;margin:0 0 14px;border:1px solid #24363e;border-radius:7px;overflow:hidden;background:#0b1216;box-shadow:0 0 0 1px rgba(53,224,216,.03);position:relative}
.social-tile:hover{border-color:#35e0d8;box-shadow:0 0 22px rgba(53,224,216,.10);transform:translateY(-1px)}
.social-placeholder{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(145deg,#101a1f,#081014);color:#68808b;position:relative}
.social-placeholder span{font-size:9px;letter-spacing:.18em;color:#35e0d8}
.social-placeholder small{margin-top:7px;font-size:9px;letter-spacing:.12em;color:#5f727b}
.social-tile--portrait .social-placeholder{aspect-ratio:9/16}
.social-tile--tall .social-placeholder{aspect-ratio:3/4}
.social-tile--four-five .social-placeholder{aspect-ratio:4/5}
.social-tile--square .social-placeholder{aspect-ratio:1/1}
.social-tile--landscape .social-placeholder{aspect-ratio:16/9}
.social-tile--landscape-small .social-placeholder{aspect-ratio:4/3}
.social-tile img,.social-tile video{display:block;width:100%;height:auto;max-width:100%;background:#05090b}
.social-tile video{object-fit:cover}
#scr-desktop.day-theme .social-tile{background:#f8fbfc;border-color:#b7c8cd}
#scr-desktop.day-theme .social-placeholder{background:linear-gradient(145deg,#f9fbfc,#e7eff1)}
#scr-desktop.day-theme .social-placeholder span{color:#2c8f92}
#scr-desktop.day-theme .social-placeholder small{color:#6b7f87}
@media(max-width:1100px){.social-grid{column-count:2}}
@media(max-width:700px){.social-grid{column-count:1}}

/* =====================================================================
   DRIVE MEDIA BROWSERS — mixed media / uneven masonry-like showcase
   ================================================================== */
.drive-head{margin-bottom:16px}.drive-head h2{font-size:30px;margin:2px 0 7px}.media-browser-grid{column-count:3;column-gap:14px;column-fill:balance}.media-browser-tile{break-inside:avoid;display:block;width:100%;margin:0 0 14px;position:relative;overflow:hidden;border:1px solid #263a43;border-radius:7px;background:#0b1216;box-shadow:0 0 0 1px rgba(53,224,216,.025);min-height:110px}.media-browser-tile:hover{border-color:#35e0d8;box-shadow:0 0 24px rgba(53,224,216,.10);transform:translateY(-1px)}.media-browser-tile img,.media-browser-tile video{display:block;width:100%;height:auto;background:#05090b}.media-browser-tile video{object-fit:cover}.media-drop-note{min-height:140px;height:auto;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;box-sizing:border-box;background:linear-gradient(145deg,#101a1f,#081014);gap:8px}.media-drop-note b{font-size:10px;letter-spacing:.12em;color:#35e0d8}.media-drop-note small{font-size:9px;line-height:1.4;color:#617983;max-width:85%;word-break:break-word}.ratio-16-9 .media-drop-note{aspect-ratio:16/9}.ratio-9-16 .media-drop-note{aspect-ratio:9/16}.ratio-1-1 .media-drop-note{aspect-ratio:1/1}.ratio-4-5 .media-drop-note{aspect-ratio:4/5}.ratio-3-4 .media-drop-note{aspect-ratio:3/4}.ratio-4-3 .media-drop-note{aspect-ratio:4/3}.drive-note{font-size:10px;color:#687c84;margin:8px 0 0;line-height:1.5}.films-drive-grid .media-browser-tile:nth-child(3n){margin-top:24px}.kv-drive-grid .media-browser-tile:nth-child(2n){margin-top:10px}.social-drive-grid .media-browser-tile:nth-child(4n){margin-top:18px}
#scr-desktop.day-theme .media-browser-tile{background:#f6fafb;border-color:#b7c8cd}
#scr-desktop.day-theme .media-drop-note{background:linear-gradient(145deg,#f8fbfc,#e6eef1)}#scr-desktop.day-theme .media-drop-note b{color:#267e82}#scr-desktop.day-theme .media-drop-note small{color:#677b84}#scr-desktop.day-theme .drive-note{color:#65767d}
@media(max-width:1100px){.media-browser-grid{column-count:2}}@media(max-width:700px){.media-browser-grid{column-count:1}.films-drive-grid .media-browser-tile:nth-child(3n),.kv-drive-grid .media-browser-tile:nth-child(2n),.social-drive-grid .media-browser-tile:nth-child(4n){margin-top:0}}


/* =====================================================================
   MY WORK — CASE GALLERIES + AI STORYBOARD WORKFLOW
   ================================================================== */
.case-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:0 0 10px;margin:26px 0 12px;border-bottom:1px solid #1d2b32}
.case-section-heading span{font-size:10px;letter-spacing:.16em;color:#35e0d8;font-weight:700}
.case-section-heading small{font-size:10px;color:#6f8089}
.case-gallery{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.case-gallery-item{
    margin:0;
    min-width:0;
    position:relative;
    background:#0c1519;
    border:1px solid #20333a;
    border-radius:6px;
    overflow:hidden;
}

.case-gallery-img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
    background:#091115;
}
.case-gallery-placeholder{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:18px;background:linear-gradient(180deg,#0e181d,#0a1216);color:#617781}
.case-gallery-placeholder span{font-size:9px;letter-spacing:.16em;color:#35e0d8}
.case-gallery-placeholder small{max-width:90%;font-size:9px;line-height:1.35;color:#687c85;word-break:break-all}
.ai-workflow-section{margin-top:26px}
.ai-storyboard-list{display:flex;flex-direction:column;gap:24px}
.ai-storyboard-block{padding:0;margin:0}
.ai-block-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:10px}
.ai-block-head span{font-size:10px;letter-spacing:.16em;color:#35e0d8;font-weight:700}
.ai-block-head small{font-size:10px;color:#6f8089}
.ai-storyboard-slot{width:100%;aspect-ratio:16/9;background:#0a1216;border:1px dashed #2e4650;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}
.ai-storyboard-img{width:100%;height:100%;object-fit:cover;display:block}
.ai-storyboard-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;color:#657983;padding:18px;background:linear-gradient(135deg,#0d171b,#091115)}
.ai-storyboard-placeholder span{font-size:10px;letter-spacing:.16em;color:#35e0d8}
.ai-storyboard-placeholder small{max-width:92%;font-size:9px;line-height:1.35;word-break:break-all;color:#687c85}
.ai-video-slot{margin-top:12px}
.ai-prompt-panel{margin-top:12px;padding:14px;background:#0b1418;border:1px solid #1e3037;border-radius:6px}
.ai-prompt-box{margin:0;white-space:pre-wrap;word-break:break-word;font-family:var(--font-ui);font-size:11px;line-height:1.5;color:#b9cbd1;min-height:58px;background:#081014;padding:12px;border:1px solid #1a2a30;border-radius:5px}
#scr-desktop.day-theme .case-section-heading{border-bottom-color:#c8d5d9}
#scr-desktop.day-theme .case-section-heading small,#scr-desktop.day-theme .ai-block-head small{color:#647780}
#scr-desktop.day-theme .case-gallery-item,#scr-desktop.day-theme .ai-storyboard-slot,#scr-desktop.day-theme .ai-prompt-panel{background:#edf4f6;border-color:#b7c9cf}
#scr-desktop.day-theme .case-gallery-placeholder,#scr-desktop.day-theme .ai-storyboard-placeholder{background:linear-gradient(180deg,#f7fafb,#e8eff1);color:#62747c}
#scr-desktop.day-theme .case-gallery-placeholder small,#scr-desktop.day-theme .ai-storyboard-placeholder small{color:#65777f}
#scr-desktop.day-theme .ai-prompt-box{background:#f7fafb;color:#334b53;border-color:#c0d0d5}
@media(max-width:950px){.case-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.case-gallery{grid-template-columns:1fr}.case-section-heading,.ai-block-head{align-items:flex-start;flex-direction:column;gap:5px}}


/* ================================================================
   BOOT IDENTITY — TEJAS OS
   ================================================================ */
.wordmark{
  letter-spacing:.045em;
  text-transform:uppercase;
}
.wordmark em{
  margin-left:.16em;
}
.welcome-brand{
  letter-spacing:.06em;
  text-transform:uppercase;
}
.welcome-brand em{
  margin-left:.18em;
}
#access-stamp{
  letter-spacing:.22em;
}
/* Final boot rule: splash is intentionally skipped; terminal must never delay login. */
#scr-splash{display:none!important}
#scr-terminal .access-stamp.show{animation-duration:.34s}

/* Final portfolio information architecture */
.skill-filter-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:6px 0 8px;padding:0 2px}.skill-filter-heading span{font-size:10px;letter-spacing:.16em;color:#35e0d8;font-weight:700}.skill-filter-heading small{font-size:10px;color:#6f8089}.skill-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}.skill-filter{border:1px solid #253b43;background:#0c1519;color:#71858d;border-radius:4px;padding:6px 9px;font:600 8px/1 var(--font-ui);letter-spacing:.12em;cursor:pointer}.skill-filter:hover,.skill-filter.is-active{color:#d8fffb;border-color:#35e0d8;background:#12282c}.portfolio-card-award{display:inline-block;margin:-2px 0 8px;font-size:9px;letter-spacing:.12em;color:#d2ece8}.skill-pills{display:block;margin-top:10px;font-size:8px;line-height:1.6;letter-spacing:.08em;color:#657a83}.case-role-panel{margin:14px 0;border:1px solid #24363e;border-radius:6px;background:#0c1519;padding:12px}.case-role-tags{display:flex;flex-wrap:wrap;gap:6px}.case-role-tags span{display:inline-block;padding:5px 7px;border:1px solid #29414a;border-radius:3px;color:#9eb4bc;font-size:8px;letter-spacing:.08em}.award-proof{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:11px 12px;border:1px solid #2a3e45;border-radius:6px;background:#0b1418}.award-proof strong{font-size:12px;color:#d8fffb}.external-proof{font-size:9px;letter-spacing:.1em;color:#35e0d8;text-decoration:none;border:1px solid #35535b;padding:6px 8px;border-radius:3px}.external-proof:hover{border-color:#35e0d8;background:#102529}.award-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid #22323a}.award-row h4{margin:2px 0 5px;font-size:18px}.award-row p{margin:0;color:#8ca0a8;font-size:12px}.proof-row{margin:14px 0}.cgi-grid{column-count:2}.cgi-grid .social-tile{break-inside:avoid}.cgi-grid .social-placeholder{min-height:260px}@media(max-width:700px){.skill-filter-heading{align-items:flex-start;flex-direction:column;gap:5px}.skill-filters{overflow:auto;flex-wrap:nowrap}.skill-filter{flex:0 0 auto}.award-row{align-items:flex-start;flex-direction:column}.cgi-grid{column-count:1}}

/* Centered pixel logo watermark on the desktop wallpaper. */
.wallpaper-logo{
  position:absolute;
  left:50%;
  top:50%;
  width:min(38vw, 520px);
  height:auto;
  transform:translate(-50%,-50%);
  image-rendering:pixelated;
  opacity:.85;
  pointer-events:none;
  user-select:none;
  mix-blend-mode:screen;
}
@media (max-width:760px){
  .wallpaper-logo{width:min(60vw, 360px);opacity:.7}
}
@media (prefers-reduced-motion:reduce){
  .wallpaper-logo{transition:none!important}
}


/* Music Lab: Spotify style placeholder player. Replace only the asset paths in index.html / apps.js. */
.music-player-shell{margin-top:18px;padding:18px;background:#0b1317;border:1px solid #243a43;border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.music-now{display:flex;align-items:center;gap:16px}
.music-art{width:84px;height:84px;display:grid;place-items:center;border-radius:6px;background:linear-gradient(145deg,#162b31,#071013);border:1px solid #31505a;color:#35e0d8;font-weight:800;letter-spacing:.08em;font-size:22px;background-size:cover;background-position:center}
.music-art.has-art{color:transparent}
.music-meta h3{margin:0 0 6px;font-size:22px}.music-meta p{margin:0;color:#758790;font-size:12px}
.music-controls{display:flex;justify-content:center;align-items:center;gap:10px;margin:16px 0 12px}.music-btn{min-width:42px;height:38px;border:1px solid #2b414a;background:#111b20;color:#dce8ec;border-radius:5px;cursor:pointer}.music-btn:hover{border-color:#35e0d8;color:#35e0d8}.music-play{min-width:48px;background:#12282b;border-color:#35e0d8;color:#35e0d8}
.music-progress-row,.music-volume-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:11px;color:#7d8d97}.music-volume-row{grid-template-columns:auto 180px;margin-top:10px}.music-progress-row input,.music-volume-row input{width:100%;accent-color:#35e0d8}
.music-list-section{margin-top:22px}.music-list{display:grid;gap:8px}.music-row{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;background:#0c1418;border:1px solid #22343c;border-radius:6px;color:#dce5e9;cursor:pointer}.music-row:hover,.music-row.is-active{border-color:#35e0d8;background:#0e1b20}.music-row-index{width:28px;color:#35e0d8;font-family:monospace}.music-row-copy{display:flex;flex-direction:column;gap:4px}.music-row-copy small{color:#6e7d86;font-size:11px}@media(max-width:620px){.music-volume-row{grid-template-columns:auto 1fr}.music-art{width:68px;height:68px}.music-meta h3{font-size:18px}}

/* =========================================================
   EXPANDED CASE STUDY PANELS
   Added for the locked portfolio content pass.
   ========================================================= */
.case-prototype-grid article.case-panel{padding:16px;background:#0c1418;border:1px solid #1f2d34;border-radius:6px;transition:border-color .18s ease,transform .18s ease}
.case-prototype-grid article.case-panel:hover{border-color:#2f4b55;transform:translateY(-1px)}
.case-panel-index{display:block;color:#35e0d8;font-size:9px;letter-spacing:.14em;margin-bottom:8px}
.case-panel h3{margin:0 0 7px;font-size:16px;line-height:1.15;color:#dce7eb}
.case-panel p{margin:0;color:#87949c;font-size:12px;line-height:1.6}
.case-copy-note{margin:18px 0 4px;padding-top:10px;border-top:1px solid #1d2b32;color:#566b74;font-size:9px;line-height:1.5;letter-spacing:.03em}
#scr-desktop.day-theme .case-prototype-grid article.case-panel{background:#edf4f6;border-color:#bfd0d5}
#scr-desktop.day-theme .case-prototype-grid article.case-panel:hover{border-color:#9cb7bd}
#scr-desktop.day-theme .case-panel h3{color:#29414a}
#scr-desktop.day-theme .case-panel p{color:#667880}
#scr-desktop.day-theme .case-copy-note{color:#74868d;border-top-color:#ccd9dd}

/* =====================================================================
   LOCKED DIRECTOR CONSOLE LOGIN + CENTER PROFILE
   ================================================================== */
.director-console{align-items:center;justify-content:center;background:
  radial-gradient(circle at 50% 42%, rgba(53,224,216,.11), transparent 30%),
  linear-gradient(#0a1115 0%,#05090b 62%,#071013 100%);}
.director-console-card{width:min(460px,90vw);padding:42px 44px 38px;text-align:center;border:1px solid rgba(53,224,216,.26);border-radius:8px;background:linear-gradient(180deg,rgba(17,26,31,.92),rgba(6,11,14,.94));box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 80px rgba(53,224,216,.06);}
.director-console-card .login-logo-wrap{width:94px;height:94px;border-radius:12px;margin:0 auto 18px;background:rgba(0,0,0,.2)}
.director-console-card .login-logo{width:66px;height:72px}
.director-eyebrow{display:block;color:#35e0d8;font-size:10px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:10px}
.director-console-card h1{margin:0;font:500 42px/.95 var(--font-ui);letter-spacing:.11em}
.director-sub{margin:12px 0 22px;color:#a7b7bf;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.director-status{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:25px;color:#62747e;font:400 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.director-enter{min-width:190px}
.desktop-profile-card{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-54%);width:min(500px,42vw);max-width:500px;padding:28px 30px 26px;border:1px solid rgba(53,224,216,.28);background:linear-gradient(180deg,rgba(9,17,21,.84),rgba(5,10,13,.9));border-radius:8px;box-shadow:0 22px 60px rgba(0,0,0,.5),0 0 60px rgba(53,224,216,.05);backdrop-filter:blur(10px);text-align:center;}
.desktop-profile-kicker{display:block;color:#35e0d8;font-size:10px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:8px}
.desktop-profile-card h1{margin:0;font-size:36px;line-height:1;letter-spacing:.06em;font-weight:500}
.desktop-profile-role{margin:10px 0 12px;color:#d4e0e5;font-size:11px;letter-spacing:.12em;line-height:1.6}
.desktop-profile-copy{margin:0 auto 18px;max-width:420px;color:#9eafb7;font-size:12px;line-height:1.6}
.desktop-profile-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.desktop-profile-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 14px;border:1px solid #31464f;border-radius:3px;background:rgba(12,24,29,.8);color:#dbe7ea;text-decoration:none;font:600 10px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.desktop-profile-btn.primary{border-color:rgba(53,224,216,.65);background:rgba(53,224,216,.1);color:#cffffc}
.desktop-profile-btn:hover,.desktop-profile-btn:focus-visible{border-color:#35e0d8;box-shadow:0 0 18px rgba(53,224,216,.12);outline:none}
@media(max-width:900px){.desktop-profile-card{width:min(88vw,500px);top:45%;transform:translate(-50%,-48%)}.desktop-profile-card h1{font-size:30px}.desktop-profile-role{font-size:10px}.icon-grid{opacity:.92}}
@media(max-width:620px){.director-console-card{padding:32px 22px}.director-console-card h1{font-size:34px}.desktop-profile-card{width:calc(100vw - 28px);padding:22px 18px;top:43%}.desktop-profile-card h1{font-size:26px}.desktop-profile-role{font-size:9px}.desktop-profile-copy{font-size:11px}.desktop-profile-actions{gap:7px}.desktop-profile-btn{flex:1 1 150px}}
#scr-desktop.day-theme .desktop-profile-card{background:linear-gradient(180deg,rgba(248,251,252,.88),rgba(228,238,241,.92));border-color:#aabec4;box-shadow:0 18px 55px rgba(31,63,71,.18)}
#scr-desktop.day-theme .desktop-profile-kicker{color:#2c8f92}#scr-desktop.day-theme .desktop-profile-card h1{color:#20363e}#scr-desktop.day-theme .desktop-profile-role{color:#46616a}#scr-desktop.day-theme .desktop-profile-copy{color:#60757d}#scr-desktop.day-theme .desktop-profile-btn{background:rgba(248,251,252,.88);color:#29414a;border-color:#afc1c7}.scr-desktop.day-theme .desktop-profile-btn.primary{background:#d9eaed;border-color:#2c8f92;color:#1f5559}

/* Central About Me card close button */
.desktop-profile-card{overflow:visible;}
.desktop-profile-close{position:absolute;top:8px;right:8px;width:26px;height:26px;padding:0;border:1px solid #3d0b08;border-radius:3px;background:linear-gradient(#8d1f1a,#5c110d);color:#fff;display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--font-ui);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:.15s ease;}
.desktop-profile-close:hover,.desktop-profile-close:focus-visible{background:linear-gradient(#ff4a40,#b32017);outline:none;box-shadow:0 0 14px rgba(255,74,64,.22);}
.desktop-profile-card.is-closed{opacity:0;transform:translate(-50%,-46%) scale(.96);pointer-events:none;transition:opacity .18s ease,transform .18s ease;}
.desktop-profile-card:not(.is-closed){transition:opacity .18s ease,transform .18s ease;}
#scr-desktop.day-theme .desktop-profile-close{background:linear-gradient(#a92720,#761812);border-color:#54100d;color:#fff;}
#scr-desktop.day-theme .desktop-profile-close:hover,#scr-desktop.day-theme .desktop-profile-close:focus-visible{background:linear-gradient(#d13d34,#97251f);}


/* =========================================================
   GLOBAL MEDIA HOVER INTERACTION
   VIDEO: autoplay while pointer is over the media, pause +
          reset when pointer leaves.
   IMAGE: 20% zoom while pointer is over the media, then
          return to the original scale on pointer leave.
   ========================================================= */

/* Keep the zoom clipped inside the existing media card. */
.portfolio-thumb,
.case-gallery-item,
.case-video-slot,
.social-tile,
.media-browser-tile,
.media-wrap {
  overflow: hidden;
}

/* Static portfolio images */
.portfolio-thumb img,
.case-gallery-item img.case-gallery-img,
.social-tile img,
.media-browser-tile img,
.hover-zoom-image {
  transform: scale(1);
  transform-origin: center center;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

/* =========================================================
   MEDIA INTERACTION
   Videos do not zoom on hover. Static images open in a
   125% modal zoom when clicked.
   ========================================================= */
.video-media,
.case-video-slot,
.social-tile,
.media-browser-tile {
  position: relative;
}

.video-media video,
.case-video-slot video,
.social-tile video,
.media-browser-tile video {
  display: block;
  width: 100%;
  height: auto;
  transform: none !important;
  transition: none !important;
}

.portfolio-thumb img,
.case-gallery-item img.case-gallery-img,
.social-tile img,
.media-browser-tile img {
  cursor: zoom-in;
  transform: none !important;
  transition: none !important;
}

/* Image zoom modal: image is enlarged to 125% outside its card. */
.media-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 36px;
  box-sizing: border-box;
  background: rgba(0,0,0,.9);
  cursor: zoom-out;
}

.media-image-lightbox.is-open {
  display: flex;
}

.media-image-lightbox img {
  display: block;
  max-width: 72vw;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: scale(1.25);
  transform-origin: center center;
  box-shadow: 0 28px 90px rgba(0,0,0,.7);
  cursor: zoom-out;
}

.media-image-lightbox-close {
  position: absolute;
  top: 22px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 5px;
  background: rgba(8,16,20,.86);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.media-image-lightbox-close:hover {
  border-color: #35e0d8;
  color: #35e0d8;
}

/* =========================================================
   GAMES — EXTRA ARCADE BLOCKS
   ========================================================= */
.game-2048 {
  width: min(360px,100%);
  margin: 12px auto 0;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 7px;
  padding: 8px;
  background: #17252c;
  border: 1px solid #2a414a;
  border-radius: 7px;
}
.game-2048-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #0c151a;
  border: 1px solid #24363e;
  color: #71818a;
  font-weight: 800;
  font-size: 22px;
}
.game-2048-cell.filled {
  color: #d9fffb;
  background: #17363b;
  border-color: #35e0d8;
}
.game-2048-cell[data-value="4"] { background:#1d4a4b; }
.game-2048-cell[data-value="8"] { background:#245d59; }
.game-2048-cell[data-value="16"] { background:#286d63; }
.game-2048-cell[data-value="32"] { background:#347c6c; }
.game-2048-cell[data-value="64"] { background:#478c76; }
.game-2048-cell[data-value="128"],
.game-2048-cell[data-value="256"],
.game-2048-cell[data-value="512"],
.game-2048-cell[data-value="1024"],
.game-2048-cell[data-value="2048"] { background:#5a9d83; color:#061013; }

.memory-board {
  width: min(520px,100%);
  margin: 12px auto 0;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
}
.memory-card {
  aspect-ratio: 1;
  border: 1px solid #2b4149;
  border-radius: 6px;
  background: #0c151a;
  color: #35e0d8;
  font-size: 26px;
  font-weight: 800;
  cursor: pointer;
}
.memory-card:hover { border-color:#35e0d8; box-shadow:0 0 18px rgba(53,224,216,.12); }
.memory-card.revealed { background:#17363b; border-color:#35e0d8; }

.breakout-canvas {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

@media (max-width:700px) {
  .memory-board { gap:5px; }
  .memory-card { font-size:20px; }
}

/* =========================================================
   SOCIAL MEDIA ARCHIVE — HOVER VIDEO PREVIEW
   Videos autoplay muted on hover and stop/reset on leave.
   Videos and images do NOT zoom on hover.
   Static images use click-to-zoom instead.
   ========================================================= */
.social-section .video-media,
.social-section .social-tile {
  overflow: hidden;
  position: relative;
}

.social-section .video-media video,
.social-section .social-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none !important;
  transition: none !important;
}

.social-section .social-tile img,
.social-section .video-media img {
  transform: none !important;
  transition: none !important;
  cursor: zoom-in;
}
/* =========================================================
   CREATOR MODE — 4 REELS + MEDIA CONTROLS
   ========================================================= */

.creator-mode-reels {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0 24px;
    padding: 0;
    box-sizing: border-box;
}

.creator-mode-reels .creator-reel {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #35525a;
    border-radius: 8px;
    background: #05090b;
    box-sizing: border-box;
}

.creator-mode-reels .creator-reel-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    margin: 0;
    padding: 0;
    background: #05090b;
    outline: none;
}


/* Keep native media controls visible */
.creator-mode-reels .creator-reel-video::-webkit-media-controls {
    display: flex !important;
}

.creator-mode-reels .creator-reel-video::-webkit-media-controls-panel {
    display: flex !important;
}


/* Tablet */
@media (max-width: 1000px) {

    .creator-mode-reels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* Mobile */
@media (max-width: 600px) {

    .creator-mode-reels {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   RESPONSIVE STORYBOARD
   IMAGE → VIDEO → IMAGE → VIDEO
   ========================================================= */

.storyboard-grid {
    width: 100%;
    display: grid;

    /* Desktop */
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* Each media item */

.storyboard-item {
    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #05090b;

    box-sizing: border-box;
}


/* Images */

.storyboard-item img {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    object-fit: contain;

    margin: 0;
    padding: 0;
}


/* Videos */

.storyboard-item video {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    object-fit: contain;

    margin: 0;
    padding: 0;

    background: #05090b;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .storyboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .storyboard-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

}




/* =========================================================
   FINAL MEDIA + MOBILE POLISH
   ========================================================= */

/* Case-study portrait reel groups */
.case-reel-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  width:100%;
  margin:18px 0 24px;
  align-items:start;
}
.case-reel-grid .case-video-slot {
  width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden;
  border:1px solid #24363e;
  border-radius:7px;
  background:#05090b;
}
.case-reel-grid .case-video-slot .case-auto-video,
.case-reel-grid .case-video-slot.video-portrait .case-auto-video {
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  object-fit:cover!important;
}

/* Creator Mode remains a dedicated four-up reel grid */
.creator-mode-reels {
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%!important;
  margin:18px 0 24px!important;
}
.creator-mode-reels .creator-reel {
  width:100%!important;
  min-width:0!important;
  aspect-ratio:9/16;
  overflow:hidden;
  border:1px solid #24363e;
  border-radius:7px;
  background:#05090b;
}
.creator-mode-reels .creator-reel-video {
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}

/* Clean placeholders: real media is the content, not the instruction */
.case-video-placeholder,
.case-gallery-placeholder,
.ai-storyboard-placeholder,
.social-placeholder {
  display:none!important;
}

/* Adaptive Social Media masonry */
.social-section .social-grid {
  column-count:3;
  column-gap:14px;
  column-fill:balance;
}
.social-section .social-tile {
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  display:inline-block;
  vertical-align:top;
  width:100%;
  margin:0 0 14px;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
}
.social-section .social-tile img,
.social-section .social-tile video {
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  margin:0;
}

/* Media controls remain available where the source HTML has controls */
.case-video-slot video,
.creator-mode-reels video,
.social-section video {
  background:#05090b;
}

/* Prevent hidden/authoring attributes from blanking loaded media */
#windows video[hidden],
.social-section video[hidden] {
  display:block!important;
  visibility:visible!important;
}

/* Mobile windows and desktop app icons */
@media (max-width:760px){
  .win {
    left:0!important;
    top:0!important;
    width:100%!important;
    height:calc(100% - var(--taskbar-h))!important;
    border-radius:0!important;
  }
  .win-body {
    padding:16px 14px 24px;
    -webkit-overflow-scrolling:touch;
  }
  .icon-grid {
    grid-template-columns:repeat(3,1fr)!important;
    grid-auto-flow:row!important;
  }
  .dicon {
    width:100%!important;
    min-height:72px;
  }
  .case-reel-grid,
  .creator-mode-reels {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .social-section .social-grid {
    column-count:2;
    column-gap:10px;
  }
}

@media (max-width:520px){
  .case-reel-grid,
  .creator-mode-reels {
    grid-template-columns:1fr!important;
  }
  .social-section .social-grid {
    column-count:1;
  }
  .work-hero-meta{display:none}
}