@font-face{font-family:Quicksand;font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/quicksand-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:Quicksand;font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/quicksand-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}

:root{
  --ink:#20304f; --ink-2:#55688c; --ink-3:#8b9cb8;
  --bg:#f4f7fb; --panel:#ffffff; --line:#e2e9f3;
  --accent:#4a73a0; --shadow:0 1px 3px rgba(32,48,79,.05),0 10px 34px rgba(32,48,79,.05);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#eaf0f9; --ink-2:#a6b6d0; --ink-3:#74849f;
    --bg:#0b1322; --panel:#111c30; --line:#1f2b41;
    --accent:#8bb0d8; --shadow:0 1px 3px rgba(0,0,0,.3),0 10px 34px rgba(0,0,0,.24);
  }
}
:root[data-theme="dark"]{
  --ink:#eaf0f9; --ink-2:#a6b6d0; --ink-3:#74849f;
  --bg:#0b1322; --panel:#111c30; --line:#1f2b41;
  --accent:#8bb0d8; --shadow:0 1px 3px rgba(0,0,0,.3),0 10px 34px rgba(0,0,0,.24);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100dvh; background:var(--bg); color:var(--ink);
  font-family:Quicksand,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.62;
  display:flex; flex-direction:column;
}
.wrap{ flex:1; width:100%; max-width:660px; margin:0 auto; padding:34px 20px 52px }

.back{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink-2); font-size:14.5px; font-weight:500;
  margin-bottom:38px; transition:color .16s ease;
}
.back:hover{ color:var(--accent) }
.back:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:4px }
.back svg,.back img{ width:26px; height:26px; flex:none }

h1{ font-size:clamp(28px,6.5vw,38px); font-weight:300; letter-spacing:-.008em; line-height:1.15 }
.lead{ color:var(--ink-3); font-size:13.5px; margin-top:8px; letter-spacing:.02em }

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:26px 26px 28px; margin-top:26px; box-shadow:var(--shadow);
}
@media (max-width:520px){ .card{ padding:22px 18px 24px; border-radius:14px } }

h2{
  font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.11em;
  color:var(--ink-3); margin-bottom:12px;
}
.card + .card h2{ margin-top:0 }
h3{ font-size:15.5px; font-weight:600; color:var(--ink); margin:22px 0 7px }
h3:first-of-type{ margin-top:0 }

p{ font-size:15.5px; color:var(--ink) }
p + p{ margin-top:13px }
.soft{ color:var(--ink-2); font-size:14.5px }
ul{ margin:10px 0 0 20px; font-size:15px; color:var(--ink) }
li{ margin-bottom:6px }
li::marker{ color:var(--ink-3) }

a{ color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .16s ease }
a:hover{ border-bottom-color:var(--accent) }
a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px }

.todo{
  display:inline-block; background:rgba(200,140,40,.13); color:inherit;
  border:1px dashed rgba(170,120,40,.5); border-radius:6px;
  padding:1px 7px; font-size:14px;
}

footer{
  border-top:1px solid var(--line); padding:22px 20px 28px;
  display:flex; flex-wrap:wrap; gap:6px 20px; align-items:center; justify-content:center;
  font-size:13px; color:var(--ink-3);
}
footer a{ color:var(--ink-2); border-bottom:1px solid transparent }
footer a:hover{ color:var(--accent); border-bottom-color:var(--accent) }
footer .dot{ color:var(--line) }