/* azurehiddenlab.com — desktop stylesheet.
   Visual design is the approved concept (concept-2i-desktop-windows-myspace_v4.html),
   kept as-is. Fonts are self-hosted from /static/fonts/ (SIL Open Font License). */

@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;
  src:url(/static/fonts/chakra-petch-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;
  src:url(/static/fonts/chakra-petch-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/fonts/chakra-petch-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/fonts/chakra-petch-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/share-tech-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --black:#050608; --white:#eef3f2;
  --green:hsl(155,60%,44%); --blue:hsl(212,60%,44%); --bridge:hsl(183.5,55%,44%);
  --green-glow:hsla(155,55%,35%,.14); --blue-glow:hsla(212,55%,35%,.16);
  --bloom:10px; --bloom-a:.45;
  --bloom-green:hsla(155,70%,50%,.45); --bloom-blue:hsla(212,70%,50%,.45); --bloom-bridge:hsla(183.5,65%,50%,.45);
  --panel:#0c1112; --panel-2:#121a1b; --line:rgba(255,255,255,.1); --muted:#7d9490;
  --mono:'Share Tech Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --display:'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:var(--mono); color:var(--white); min-height:100vh;
  min-width:1080px; /* the desktop is 1080px wide; never let the menubar or background be narrower than it */
  background:
    radial-gradient(rgba(255,255,255,.085) 1px, transparent 1.6px),
    radial-gradient(1000px 700px at 10% 10%, var(--green-glow), transparent 70%),
    radial-gradient(1000px 700px at 100% 100%, var(--blue-glow), transparent 70%),
    var(--black);
  background-size:34px 34px, auto, auto, auto;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat; /* the two glows must not tile below a tall page */
  position:relative;
}
html{background:var(--black);}
.scanlines{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.22;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.4) 3px);}

/* accessible-hidden text (visible to screen readers only) */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.menubar{position:relative; z-index:5; display:flex; align-items:center; gap:8px; padding:12px 22px; border-bottom:1px solid var(--line); font-family:var(--display); font-weight:600; font-size:.85rem; background:rgba(5,6,8,.72); backdrop-filter:blur(4px);}
.menubar .tag{color:var(--muted); font-weight:400; margin-left:12px;}
.menubar .right{margin-left:auto; color:var(--muted); font-size:.75rem;}

.desktop{position:relative; z-index:2; padding:34px; max-width:1080px; margin:0 auto;}

.win{background:var(--panel); border:1px solid var(--line); border-radius:3px; box-shadow:0 20px 50px rgba(0,0,0,.5); margin-bottom:18px; position:relative; z-index:3;}
.titlebar{display:flex; align-items:center; gap:8px; height:31px; padding:0 10px; background:linear-gradient(90deg,var(--green),var(--bridge) 55%, var(--blue)); color:#04140c; position:relative; isolation:isolate;}
.titlebar::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,var(--green),var(--bridge) 55%, var(--blue));
  filter:blur(var(--bloom)); opacity:var(--bloom-a);
}
.titlebar .ic{width:12px; height:12px; border-radius:2px; background:#04140c; flex-shrink:0;}
.titlebar .t{font-family:var(--display); font-weight:600; font-size:.865rem; flex:1;}
.titlebar .ctl{display:flex; gap:4px;}
.titlebar .ctl span{width:18px; height:16px; border:1px solid rgba(4,20,12,.4); border-radius:1px; font-size:.62rem; display:flex; align-items:center; justify-content:center; background:rgba(4,20,12,.1);}

.win .content{padding:16px 18px 18px; font-size:.8rem;}
.win .content h2{font-family:var(--display); font-weight:600; font-size:.88rem; color:var(--white); margin-bottom:10px;}
.win .content .lead{font-family:var(--mono); font-weight:400; font-size:.78rem; color:var(--muted); margin-bottom:10px; line-height:1.5;}

/* Neonbrightness.exe */
#player .content{display:flex; align-items:center; gap:10px;}
#player .track{flex:1;}
#player .track label{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px;}
#player .track label small{color:var(--muted); font-size:.66rem;}
.neon-slider{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:2px; outline:none; cursor:pointer;
  background:linear-gradient(90deg,var(--green),var(--blue));
  box-shadow:0 0 var(--bloom) var(--bloom-bridge);
}
.neon-slider::-webkit-slider-thumb{-webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:var(--white); border:2px solid var(--black); cursor:pointer;}
.neon-slider::-moz-range-thumb{width:12px; height:12px; border-radius:50%; background:var(--white); border:2px solid var(--black); cursor:pointer;}
.neon-slider:focus-visible{outline:2px solid var(--bridge); outline-offset:4px;}

/* Guestbook.log */
.gb-form{display:flex; flex-direction:column; gap:8px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px dashed var(--line);}
.gb-input{
  font-family:var(--mono); font-size:.76rem; color:var(--white); background:var(--panel-2);
  border:1px solid var(--line); border-radius:3px; padding:8px 10px; outline:none; width:100%; resize:vertical;
}
.gb-input::placeholder{color:var(--muted);}
.gb-input:focus{border-color:var(--bridge);}
.gb-submit{
  align-self:flex-end; font-family:var(--mono); font-size:.7rem; border:1px solid var(--bridge); color:var(--bridge);
  background:transparent; padding:6px 14px; border-radius:3px; cursor:pointer;
}
.gb-submit:hover, .gb-submit:focus-visible{background:var(--bridge); color:#04140c;}
.gb-submit[disabled]{border-color:var(--muted); color:var(--muted); background:transparent; cursor:not-allowed;}
.gb-notice{color:var(--muted); font-size:.72rem; margin-bottom:12px;}
.gb-notice.ok{color:var(--green);}
.gb-notice.err{color:var(--bridge);}
/* honeypot: a field a person never sees; bots fill it in */
.gb-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}

#guestbook .line{padding:6px 0; border-bottom:1px dashed var(--line); color:var(--muted); font-size:.76rem;}
#guestbook .line:last-child{border-bottom:none;}
#guestbook .line b{color:var(--green); font-weight:400;}
#guestbook .empty{color:var(--muted); font-size:.76rem;}

/* Profile.exe */
#profile .content{display:flex; gap:14px; align-items:center;}
#profile .avatar{width:46px; height:46px; border-radius:6px; background:linear-gradient(135deg,var(--green),var(--blue)); flex-shrink:0; box-shadow:0 0 var(--bloom) var(--bloom-bridge);}
#profile h1{font-family:var(--display); font-size:1.2rem; background:linear-gradient(100deg,var(--green),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 var(--bloom) var(--bloom-bridge));}
#profile .caret{display:inline-block; width:8px; height:1rem; background:var(--green); margin-left:3px; vertical-align:middle; animation:blink 1s step-end infinite; box-shadow:0 0 var(--bloom) var(--bloom-green);}
@keyframes blink{50%{opacity:0;}}
@media (prefers-reduced-motion:reduce){ #profile .caret{animation:none;} }
#profile .status{color:var(--muted); font-size:.76rem; margin-top:4px;}

.cols{display:grid; grid-template-columns:1fr 1.85fr; gap:20px; align-items:start;}

/* About.txt */
.about .content p{color:var(--white); line-height:1.6;}
.social-row{display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--line);}
.social-row a{display:inline-flex; align-items:center; gap:8px; color:var(--bridge); text-decoration:none; font-size:.76rem;}
.social-row a svg{width:1rem; height:1rem; fill:currentColor; filter:drop-shadow(0 0 var(--bloom) var(--bloom-bridge));}
.social-row a:hover, .social-row a:focus-visible{color:var(--white);}

/* Details.exe */
.kv{display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); padding:5px 0; border-bottom:1px dashed var(--line);}
.kv:last-child{border-bottom:none;}
.kv dd{color:var(--white);}

/* /DomainExpansion */
.top8{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; list-style:none;}
.top8-item{text-align:center;}
.top8-item a{display:block; text-decoration:none; color:inherit;}
.top8-item .b{aspect-ratio:1; border-radius:5px; background:var(--panel-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--display); color:var(--bridge); font-weight:700;}
.top8-item a:hover .b, .top8-item a:focus-visible .b{border-color:var(--bridge);}
.top8-item span{font-size:.65rem; color:var(--muted);}

/* /Projects folder */
.row{display:grid; grid-template-columns:14px 1fr 70px; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed var(--line);}
.row:last-child{border-bottom:none;}
.row .flag{color:var(--green); text-shadow:0 0 var(--bloom) var(--bloom-green);}
.row .flag.idle{color:var(--muted); text-shadow:none;}
.row .n small{display:block; color:var(--muted); font-size:.66rem;}
.row .n small.meta{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.row .dl{font-family:var(--mono); font-size:.66rem; border:1px solid var(--bridge); color:var(--bridge); background:transparent; padding:4px 8px; border-radius:3px; cursor:pointer; justify-self:end; text-decoration:none;}
.row .dl:hover, .row .dl:focus-visible{background:var(--bridge); color:#04140c;}
.row .dl.soon{opacity:.4; cursor:default;}
.row .dl.soon:hover{background:transparent; color:var(--bridge);}