*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  min-height:100vh;
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--color-ink);
  background:var(--color-paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  flex-direction:column;
  transition:background var(--dur-base) var(--ease-soft),color var(--dur-base) var(--ease-soft);
}

h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:var(--weight-bold);line-height:var(--leading-tight);font-style:normal;color:var(--color-ink);overflow-wrap:anywhere;min-width:0}
h1{font-size:var(--text-3xl);font-weight:var(--weight-black);letter-spacing:-0.02em}
h2{font-size:var(--text-2xl);font-weight:var(--weight-bold);letter-spacing:-0.015em}
h3{font-size:var(--text-lg);font-weight:var(--weight-bold);letter-spacing:-0.01em}
h4{font-size:var(--text-md);font-weight:var(--weight-semibold)}
p{line-height:var(--leading-normal);overflow-wrap:anywhere}
small,small *{font-size:var(--text-xs);color:var(--color-ink-3)}

a{color:var(--color-accent);text-decoration:none;transition:color var(--dur-fast) var(--ease-soft)}
a:hover{color:var(--color-accent-strong)}

button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

::selection{background:var(--color-accent);color:var(--color-paper)}

:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-1)}

.skip-link{position:absolute;top:-100px;left:8px;padding:8px 16px;background:var(--color-accent);color:var(--color-paper);border-radius:var(--radius-2);z-index:1000;transition:top var(--dur-base) var(--ease-out)}
.skip-link:focus{top:8px}

.boot{position:fixed;inset:0;display:grid;place-items:center;gap:16px;background:var(--color-paper);color:var(--color-accent);z-index:9999;font-family:var(--font-display);font-weight:var(--weight-bold)}
.boot-mark{width:64px;height:64px;animation:boot-pulse 1.2s var(--ease-soft) infinite}
@keyframes boot-pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.08);opacity:1}}
.boot.is-hidden{opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease-soft)}

.topbar{position:sticky;top:0;z-index:50;background:color-mix(in oklch,var(--color-paper) 88%,transparent);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--color-border)}
.topbar-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);height:var(--topbar-h);display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-lg);color:var(--color-ink);letter-spacing:-0.02em}
.brand-mark{width:32px;height:32px;transition:transform var(--dur-base) var(--ease-spring)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.08)}
.brand-word{background:var(--gradient-text);-webkit-background-clip:text;background-clip:text;color:transparent}

.topnav{display:none;margin-left:auto;gap:4px}
.topnav-link{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--radius-pill);color:var(--color-ink-2);font-size:var(--text-sm);font-weight:var(--weight-medium);transition:all var(--dur-fast) var(--ease-soft)}
.topnav-link svg{width:18px;height:18px;opacity:.7;transition:opacity var(--dur-fast) var(--ease-soft)}
.topnav-link:hover{color:var(--color-ink);background:var(--color-paper-2)}
.topnav-link:hover svg{opacity:1}
.topnav-link[aria-current="page"]{color:var(--color-accent);background:var(--color-accent-soft)}
.topnav-link[aria-current="page"] svg{opacity:1}

@media (min-width:768px){.topnav{display:inline-flex}}

.topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
@media (min-width:768px){.topbar-actions{margin-left:0}}

.lang-toggle{display:inline-flex;border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:3px;background:var(--color-paper-2)}
.lang-toggle button{padding:4px 12px;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-ink-3);transition:all var(--dur-fast) var(--ease-soft);min-width:36px;font-family:var(--font-display);letter-spacing:0.05em}
.lang-toggle button:hover{color:var(--color-ink)}
.lang-toggle button[aria-pressed="true"]{background:var(--color-ink);color:var(--color-paper);box-shadow:var(--shadow-1)}

.theme-toggle{width:40px;height:40px;border-radius:var(--radius-pill);border:1px solid var(--color-border);display:grid;place-items:center;color:var(--color-ink-2);transition:all var(--dur-base) var(--ease-soft)}
.theme-toggle:hover{background:var(--color-paper-2);color:var(--color-ink);transform:rotate(15deg)}
.theme-toggle svg{width:18px;height:18px;transition:transform var(--dur-slow) var(--ease-spring)}
.icon-moon{display:none}
[data-theme="dark"] .icon-sun{display:none}
[data-theme="dark"] .icon-moon{display:block}

.main{flex:1;width:100%;max-width:var(--max-w);margin:0 auto;padding:clamp(20px,4vw,40px) var(--gutter) 40px;min-height:0}
.main.is-changing{opacity:0;transform:translateY(8px)}

.modal-root{position:fixed;inset:0;z-index:200;pointer-events:none}
.modal-root.is-active{pointer-events:auto}
.modal-backdrop{position:absolute;inset:0;background:oklch(0% 0 0 / 0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity var(--dur-base) var(--ease-soft)}
.modal-root.is-active .modal-backdrop{opacity:1}
.modal-shell{position:absolute;inset:0;display:grid;place-items:center;padding:var(--gutter)}

.toast-root{position:fixed;top:calc(var(--topbar-h) + 16px);right:16px;z-index:300;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{padding:12px 16px;background:var(--color-paper);border:1px solid var(--color-border);border-radius:var(--radius-3);box-shadow:var(--shadow-3);font-size:var(--text-sm);color:var(--color-ink);min-width:240px;max-width:360px;pointer-events:auto;animation:toast-in var(--dur-slow) var(--ease-spring) both}
.toast.is-leaving{animation:toast-out var(--dur-base) var(--ease-soft) forwards}
.toast.is-success{border-color:var(--color-success);background:var(--color-success-soft);color:var(--color-success-ink)}
.toast.is-error{border-color:var(--color-error);background:var(--color-error-soft);color:var(--color-error-ink)}
@keyframes toast-in{from{opacity:0;transform:translateX(20px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateX(20px) scale(.96)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}