@font-face{font-family:"Fira Code";font-weight:300 700;font-display:swap;src:url(fonts/fira-code-latin-wght-normal.woff2) format("woff2-variations");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:"Fira Code";font-weight:300 700;font-display:swap;src:url(fonts/fira-code-latin-ext-wght-normal.woff2) format("woff2-variations");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,:root[data-theme=dark]{color-scheme:dark;--bg:#2e3440;--surface:#3b4252;--line:#434c5e;--text:#eceff4;--muted:#b5bfd0;--faint:#8c97ad;--accent:#88c0d0;--green:#a3be8c}
:root[data-theme=light]{color-scheme:light;--bg:#eceff4;--surface:#e5e9f0;--line:#d8dee9;--text:#2e3440;--muted:#4c566a;--faint:#5d6880;--accent:#4a6f98;--green:#4f7a3a}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,sans-serif}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:"Fira Code",ui-monospace,monospace}

.page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
header.top{display:flex;justify-content:flex-end;padding:24px 40px}
.theme{font:400 13px "Fira Code",monospace;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px 10px;cursor:pointer}
.theme:hover{border-color:var(--accent)}

main{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 40px}
.col{width:100%;max-width:760px;display:flex;flex-direction:column;gap:30px}
.prompt{font:400 14px/1.7 "Fira Code",monospace;color:var(--faint);margin:0}
.hero{display:flex;flex-direction:column;gap:14px}
h1{margin:0;font:500 48px/1.1 "Fira Code",monospace;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.cursor{display:inline-block;width:.42em;height:.79em;background:var(--accent);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}}
.sub{font:400 14px "Fira Code",monospace;color:var(--muted);margin:0}
.intro{font-size:22px;line-height:1.55;margin:0}

.services{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);font:400 15px/1.5 "Fira Code",monospace}
.services li{display:grid;grid-template-columns:28px 1fr;padding:14px 0;border-bottom:1px solid var(--line)}
.services .arrow{color:var(--green)}
.services .detail{color:var(--faint)}
.lang{font:400 14px/1.7 "Fira Code",monospace;margin:0}
.lang .prompt{display:block}
.lang span.v{color:var(--muted)}

.actions{display:flex;flex-wrap:wrap;gap:14px;font:400 15px "Fira Code",monospace}
.btn{display:inline-flex;align-items:center;height:48px;border-radius:6px}
.btn.primary{background:var(--accent);color:var(--bg);font-weight:700;padding:0 22px}
.btn.primary:hover{filter:brightness(1.08)}
.btn.secondary{border:1px solid var(--line);padding:0 18px}
.btn.secondary:hover{border-color:var(--accent)}

footer.bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line);padding:22px 40px;font:400 12px/1.5 "Fira Code",monospace;color:var(--faint)}
footer .legal{display:flex;flex-direction:column;gap:4px}
footer .reg{font-size:11px;color:var(--faint);opacity:.85;line-height:1.5}
footer .right{display:flex;align-items:center;gap:6px}
footer .privacy{color:var(--accent);margin-right:10px}
footer .privacy:hover{text-decoration:underline}
.icon{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:6px;color:var(--muted)}
.icon:hover{background:var(--surface);color:var(--accent)}
.icon svg{width:18px;height:18px;fill:currentColor}
.heart{display:inline-block;transform-origin:center;will-change:transform,filter;animation:heart-pulse 1s ease-in-out infinite;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15))}
@keyframes heart-pulse{0%{transform:scale(1) rotate(0)}10%{transform:scale(1.25) rotate(-3deg)}25%{transform:scale(.95) rotate(2deg)}40%{transform:scale(1.15) rotate(-2deg)}60%,100%{transform:scale(1) rotate(0)}}
@media (prefers-reduced-motion:reduce){.heart{animation:none}}

/* privacy / prose pages */
.prose{padding-top:24px;padding-bottom:48px}
.prose .col{gap:18px}
.prose .col>.prompt{margin-bottom:6px}
.prose h2{font:500 18px "Fira Code",monospace;margin:18px 0 0}
.prose p{margin:0;font-size:17px;line-height:1.65;color:var(--muted)}
.prose a:not(.btn):not(.back){color:var(--accent);text-decoration:underline}
.prose .back{font:400 14px "Fira Code",monospace;color:var(--faint);margin-top:12px}
.prose .back:hover{color:var(--accent)}

@media (max-width:640px){
  header.top{padding:16px 22px}
  .theme{width:44px;height:44px;padding:0;font-size:0}
  .theme::before{content:attr(data-short);font-size:20px;line-height:1}
  main{padding:24px 22px}
  .col{gap:22px}
  h1{font-size:32px}
  .intro{font-size:18px}
  .services{font-size:14px}
  .services li{padding:12px 0}
  .services .detail{display:none}
  .lang{font-size:14px}
  .btn.primary{width:100%;justify-content:center}
  .btn.secondary{width:100%;justify-content:center}
  footer.bottom{flex-direction:column;align-items:flex-start;font-size:11px;padding:22px}
  footer .right{align-self:center;margin-left:0}
}