:root{
  color-scheme:dark;

  /* core */
  --color-screen:#000000;
  --color-surface:#1C2029;
  --color-surface-deep:#161A22;
  --color-border:#6B6B6B;
  --color-ink:#FFFFFF;
  --color-muted:#A1A1AA;
  --color-subtle:#64748B; /* 4.41:1 on black at best — not for body-size text */

  /* accents */
  --color-accent:#6BADD6;
  --color-accent-light:#88C3E4;
  --color-accent-pressed:#5094B8;
  --color-on-accent:#0A0C12;
  --color-highlight:#FFD600;
  --color-violet:#A78BFA;
  --color-emerald:#34D399;
  --color-favorite:#EF4444;

  /* logo only — never for UI */
  --color-logo-blue:#2F80F5;
  --color-logo-sky:#D6ECFA;

  /* category covers: light top-left, dark bottom-right */
  --cover-overthinking:linear-gradient(to bottom right,#8B7BE8,#2E2566);
  --cover-anxiety-relief:linear-gradient(to bottom right,#4FB8B0,#16404A);
  --cover-falling-asleep:linear-gradient(to bottom right,#5068C9,#10163D);
  --cover-brain-reset:linear-gradient(to bottom right,#E8906B,#5A2640);
  --cover-focus:linear-gradient(to bottom right,#6BADD6,#173A57);

  /* type */
  --font:'Poppins',system-ui,sans-serif;
  --tracking-tight:-0.5px;

  /* shape */
  --radius-card:16px;
  --radius-control:12px;
  --radius-pill:999px;

  /* spacing */
  --space-2:2px;
  --space-4:4px;
  --space-8:8px;
  --space-16:16px;
  --space-24:24px;
  --space-32:32px;
  --space-64:64px;

  /* motion */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --duration-press:120ms;
  --duration-enter:600ms;

  --gutter:var(--space-24);
}
@media (min-width:768px){:root{--gutter:var(--space-64)}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-weight:400;font-size:17px;line-height:1.65;color:var(--color-ink);background:var(--color-screen);min-height:100vh;display:flex;flex-direction:column}
img{display:block;max-width:100%;height:auto}
strong{font-weight:600}
:focus-visible{outline:2px solid var(--color-accent-light);outline-offset:var(--space-2)}

h1{font-weight:600;font-size:clamp(40px,6vw,56px);line-height:1.1;letter-spacing:var(--tracking-tight)}
h2{font-weight:600;font-size:clamp(26px,3vw,30px);line-height:1.25;letter-spacing:var(--tracking-tight)}
h3{font-weight:500;font-size:18px;line-height:1.4}
.quote{font-weight:300;font-style:italic;font-size:clamp(18px,2.4vw,22px);line-height:1.4}

a{color:var(--color-accent);text-decoration:none;text-underline-offset:var(--space-4)}
a:hover{text-decoration:underline}

.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);padding:var(--space-16) var(--space-24);border:1px solid transparent;border-radius:var(--radius-control);font:600 16px/1.2 var(--font);text-decoration:none;cursor:pointer;
  transition:background-color var(--duration-press) var(--ease-out),border-color var(--duration-press) var(--ease-out),transform var(--duration-press) var(--ease-out)}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--color-accent);color:var(--color-on-accent)}
.btn-primary:hover{background:var(--color-accent-light)}
.btn-primary:active{background:var(--color-accent-pressed)}
.btn-secondary{background:var(--color-surface);border-color:var(--color-border);color:var(--color-ink)}
.btn-secondary:hover{border-color:var(--color-accent-light)}
/* header */
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);padding:var(--space-24) var(--gutter)}
.mark{display:inline-flex;align-items:center;gap:var(--space-8);color:var(--color-ink);font-weight:600;font-size:20px;letter-spacing:var(--tracking-tight)}
.mark:hover{text-decoration:none}
.mark img{width:32px;height:32px}
.nav ul{list-style:none;display:flex;gap:var(--space-24);font-size:15px;font-weight:500}
.nav ul a{color:var(--color-muted);transition:color var(--duration-press) var(--ease-out)}
.nav ul a:hover{color:var(--color-ink);text-decoration:none}
.nav ul a[aria-current]{color:var(--color-accent)}
@media (max-width:480px){.nav ul{gap:var(--space-16);font-size:14px}.mark{font-size:18px}}

/* home */
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-64) var(--gutter)}
.hero-logo{width:160px;height:160px;margin-bottom:var(--space-32)}
.hero .sub{margin-top:var(--space-16);max-width:34ch;color:var(--color-muted)}
@media (min-width:768px){.hero-logo{width:200px;height:200px}}

.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card)}

.rise{animation:rise var(--duration-enter) var(--ease-out) both}
.rise.d2{animation-delay:120ms}

/* document pages */
.doc-head .title{max-width:820px;margin:0 auto;padding:var(--space-32) var(--gutter) var(--space-32)}
.doc-head p{margin-top:var(--space-8);color:var(--color-muted)}
.doc-head .title-logo{width:96px;height:96px;margin-bottom:var(--space-24)}
main.doc{width:100%;max-width:820px;margin:0 auto;padding:var(--space-32) var(--gutter) var(--space-64);flex:1}
.doc h2{margin:var(--space-64) 0 var(--space-8)}
.doc h2:first-child{margin-top:0}
.doc h3{margin:var(--space-24) 0 var(--space-4)}
.doc p,.doc ul,.doc ol{margin:var(--space-8) 0}
.doc ul,.doc ol{padding-left:var(--space-24)}
.doc li{margin:var(--space-8) 0}
.doc li::marker{color:var(--color-accent)}
.doc .lede{font-size:18px;color:var(--color-muted)}
.doc table{width:100%;border-collapse:collapse;margin:var(--space-16) 0;font-size:16px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:var(--space-8) var(--space-16) var(--space-8) 0;border-bottom:1px solid var(--color-border)}
.doc th{font-weight:600}
.doc td:first-child{white-space:nowrap;font-weight:500;padding-right:var(--space-24)}
@media (max-width:480px){.doc td:first-child{white-space:normal}}
.contact{margin:var(--space-24) 0;padding:var(--space-24)}
.contact a{display:inline-flex;align-items:center;gap:var(--space-8);font-weight:500;font-size:20px;overflow-wrap:anywhere}
.small{font-size:15px;color:var(--color-muted)}
.doc .btn{margin-top:var(--space-16)}

/* footer */
footer{background:var(--color-surface-deep);border-top:1px solid var(--color-border);padding:var(--space-32) var(--gutter);font-size:14px;color:var(--color-muted);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16) var(--space-24);justify-content:space-between}
footer .foot-brand{display:inline-flex;align-items:center;gap:var(--space-8)}
footer .foot-brand img{width:24px;height:24px}
footer nav{display:flex;flex-wrap:wrap;gap:var(--space-8) var(--space-24)}
footer a{color:var(--color-muted)}
footer a:hover{color:var(--color-ink)}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .rise{animation-name:fade}
  .btn,.btn:active{transform:none}
}