/* =========================================================================
   Shared styles for anguishedturtle.com
   Dark, space-like. Self-hosted fonts (Inter + JetBrains Mono), no build step.
   ========================================================================= */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jbmono-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/jbmono-700.woff2') format('woff2');}

:root {
  --space:#070a14;
  --panel-1:rgba(13,17,38,.72);
  --panel-2:rgba(8,11,24,.74);
  --star:#eaedf7;
  --text:#dfe3f0;
  --muted:#99a0c0;
  --violet:#8b7bff;
  --cyan:#56e1d8;
  --gold:#ffce8a;
  --green:#7ee0a0;
  --border:rgba(150,160,220,.15);
  --rule:rgba(150,160,220,.16);
  --max-width:880px;
  --radius:16px;

  /* JetBrains Mono drives the UI; Inter for prose; title keeps the system mono. */
  --mono:'JetBrains Mono', ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:'Inter', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --title: ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;color:var(--text);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding:48px 20px;
  background-color:var(--space);
  background-image:
    radial-gradient(150% 110% at 50% -25%, rgba(123,108,255,.26), transparent 55%),
    radial-gradient(120% 100% at 100% 0%, rgba(60,120,255,.16), transparent 50%),
    radial-gradient(95% 95% at 0% 105%, rgba(180,80,200,.13), transparent 55%),
    radial-gradient(1.5px 1.5px at 40px 60px, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1.5px 1.5px at 150px 170px, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1px 1px at 210px 50px, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1px 1px at 90px 230px, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.5px 1.5px at 280px 200px, rgba(255,255,255,.5), transparent 100%);
  background-size:100% 100%,100% 100%,100% 100%,240px 240px,240px 240px,190px 190px,300px 300px,260px 260px;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat,repeat,repeat,repeat;
  background-attachment:fixed;
}

/* ---- Panel ----------------------------------------------------------- */
.sheet{
  position:relative;max-width:var(--max-width);margin:0 auto;
  background:linear-gradient(var(--panel-1),var(--panel-2));
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  overflow:hidden;
}
.sheet::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--violet),var(--cyan));opacity:.9;}
.inner{padding:2.4rem 2.6rem 2.2rem;}

/* ---- Masthead -------------------------------------------------------- */
.site-header{margin:0;}
.masthead{display:flex;gap:2.1rem;align-items:center;}
.logo{flex:0 0 auto;margin:0;color:var(--cyan);font-family:var(--mono);
  font-size:.6rem;line-height:1.18;text-align:left;text-shadow:0 0 14px rgba(86,225,216,.45);}
.logo span{color:var(--cyan);}
.mast-title{flex:1;min-width:0;}
.mast-title h1{
  margin:0;font-family:var(--title);font-weight:700;
  font-size:clamp(1.9rem,4.6vw,2.9rem);line-height:1;letter-spacing:-.02em;
  background:linear-gradient(100deg,#ffffff 0%,#bfeaff 38%,var(--cyan) 64%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mast-title h1 .cursor{color:var(--cyan);-webkit-text-fill-color:var(--cyan);
  font-weight:400;margin-left:.06em;animation:blink 1.1s steps(1) infinite;}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.nightsky{margin:1.3rem 0 .2rem;font-family:var(--mono);font-size:.62rem;line-height:1.3;
  color:rgba(122,224,160,.55);white-space:pre;overflow:hidden;
  text-shadow:0 0 8px rgba(90,247,142,.3);}

/* ---- Nav ------------------------------------------------------------- */
.site-nav{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;margin:1.9rem 0 0;
  padding-bottom:.9rem;border-bottom:1px solid var(--rule);}
.site-nav a{font-family:var(--mono);font-size:.8rem;letter-spacing:.02em;text-decoration:none;
  color:var(--muted);padding:.15rem 0;border-bottom:2px solid transparent;transition:color .15s ease;}
.site-nav a:hover{color:var(--star);}
.site-nav a.current{color:var(--star);border-bottom-color:var(--cyan);font-weight:700;}

/* ---- Home contents --------------------------------------------------- */
.contents{margin:2rem 0 0;}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--violet);margin:0 0 .5rem;}
.toc{list-style:none;margin:0;padding:0;}
.toc li{border-bottom:1px solid var(--rule);}
.toc li:last-child{border-bottom:none;}
.toc li a{display:flex;align-items:baseline;padding:.7rem 0;text-decoration:none;color:inherit;}
.toc .no{font-family:var(--mono);color:var(--violet);font-size:.82rem;width:2.2rem;flex:0 0 auto;}
.toc .nm{font-family:var(--mono);font-weight:700;font-size:1.05rem;color:var(--star);white-space:nowrap;letter-spacing:-.01em;transition:color .15s ease;}
.toc li a:hover .nm{color:var(--cyan);}
.toc .dots{flex:1;margin:0 .8rem;border-bottom:2px dotted var(--rule);transform:translateY(-.2rem);}
.toc .ds{font-family:var(--sans);color:var(--muted);font-size:.92rem;text-align:right;flex:0 0 auto;white-space:nowrap;}

/* ---- Markdown textbox ------------------------------------------------ */
main{margin:0;}
.mdbox{margin-top:1.7rem;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.30);}
.mdbox .bar{display:flex;align-items:center;gap:.55rem;padding:.5rem .7rem .5rem .95rem;
  border-bottom:1px solid var(--border);background:rgba(255,255,255,.03);
  font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.02em;}
.mdbox .bar .sq{width:.7rem;height:.7rem;border-radius:3px;background:linear-gradient(var(--violet),var(--cyan));}
.copy{margin-left:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:6px;
  padding:.3rem .7rem;cursor:pointer;transition:color .15s,border-color .15s,background .15s;}
.copy:hover{color:var(--star);border-color:var(--rule);background:rgba(255,255,255,.07);}
.copy.ok{color:var(--green);border-color:rgba(126,224,160,.5);}
.mdbox pre{margin:0;padding:1.15rem 1.3rem;font-family:var(--mono);font-size:.8rem;line-height:1.8;
  color:#cbd1e2;white-space:pre;overflow-x:auto;tab-size:2;}
.mdbox .mh{color:var(--cyan);font-weight:700;}
.mdbox .mq{color:var(--violet);}
.mdbox .cm{color:var(--green);opacity:.85;}
.mdbox .fence{color:var(--muted);opacity:.7;}

/* ---- Footer ---------------------------------------------------------- */
.site-footer{margin:2.4rem 0 0;border-top:1px solid var(--rule);padding-top:1.1rem;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;}
.home-footer{margin-top:.5rem;border-top:none;padding-top:0;}
.btn-donate{display:inline-block;font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.03em;
  color:#2a5a9c;text-decoration:none;border:1px solid var(--border);border-radius:7px;
  padding:.45rem .9rem;background:transparent;transition:color .15s ease,border-color .15s ease;}
.btn-donate:hover{color:var(--star);border-color:var(--rule);}
.colo{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--muted);text-align:center;margin:.5rem 0 0;}
.colo a{color:#1c2338;}
a{color:var(--cyan);}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width:680px){
  body{padding:24px 12px;}
  .inner{padding:1.6rem 1.2rem 1.5rem;}
  .masthead{flex-direction:column;align-items:flex-start;gap:1rem;}
  .site-nav{flex-wrap:nowrap;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;}
  .site-nav::-webkit-scrollbar{display:none;}
  .toc .ds{display:none;}
  .mdbox pre{font-size:.74rem;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;scroll-behavior:auto !important;}
  .cursor{animation:none;}
}