*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: light; }
body {
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  background-image:
    radial-gradient(1200px 600px at 90% -10%, color-mix(in srgb, var(--c-peach) 18%, transparent), transparent 70%),
    radial-gradient(900px 600px at -10% 10%, color-mix(in srgb, var(--c-lavender) 18%, transparent), transparent 70%);
  background-attachment: fixed;
}

button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

.skip {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%);
  background: var(--c-primary); color: var(--c-on-primary);
  padding: 8px 14px; border-radius: var(--r-md); font-weight: 600;
  transition: transform .2s var(--ease-out); z-index: 100;
}
.skip:focus { transform: translate(-50%, 8px); outline: none; }

/* === top nav === */
.topnav {
  position: sticky; top: 0; z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--s-lg);
  height: 64px;
  padding: 0 var(--s-xl);
  background: color-mix(in srgb, var(--c-canvas) 92%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--c-hairline-soft);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-sm); text-decoration: none; }
.brand-mark {
  font-family: var(--f-han);
  font-weight: 700;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--c-primary); color: var(--c-on-primary);
  border-radius: 12px; font-size: 20px;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.1);
}
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-han { font-family: var(--f-han); font-weight: 600; font-size: 16px; }
.brand-sub { font-size: 11px; color: var(--c-muted); letter-spacing: 1px; text-transform: uppercase; margin-top: 3px; }

.nav-links { display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; }
.nav-links a {
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  color: var(--c-muted);
  font-size: 14px; font-weight: 500;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.nav-links a:hover { color: var(--c-ink); background: var(--c-surface-card); }
.nav-links a.active { color: var(--c-ink); background: var(--c-surface-card); }

.nav-actions { display: flex; gap: var(--s-xs); }
.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--c-canvas); color: var(--c-ink);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  transition: transform .15s var(--ease-out), background .15s;
}
.icon-btn:hover { background: var(--c-surface-card); }
.icon-btn:active { transform: scale(.95); }
.icon-btn[aria-pressed="false"] .wave { opacity: .25; }
.icon-btn[aria-pressed="false"] { color: var(--c-muted); }

@media (max-width: 768px) {
  .topnav { grid-template-columns: auto 1fr auto; padding: 0 var(--s-md); gap: var(--s-sm); }
  .nav-links { font-size: 13px; gap: 0; flex-wrap: nowrap; overflow-x: auto; }
  .nav-links a { padding: 6px 10px; flex-shrink: 0; }
  .brand-text { display: none; }
}

/* === buttons === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px;
  border: 0; border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s var(--ease-out), background .15s var(--ease-out), box-shadow .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled], .btn:disabled { background: var(--c-primary-disabled); color: var(--c-muted); cursor: not-allowed; }
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover { background: var(--c-primary-active); }
.btn-secondary { background: var(--c-canvas); color: var(--c-ink); border: 1px solid var(--c-hairline); }
.btn-secondary:hover { background: var(--c-surface-card); }
.btn-on-color { background: var(--c-canvas); color: var(--c-ink); }
.btn-on-color:hover { background: var(--c-on-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-on-primary) 30%, transparent); }
.btn-ghost { background: transparent; color: var(--c-ink); }
.btn-ghost:hover { background: var(--c-surface-card); }
.btn-lg { height: 56px; padding: 0 28px; font-size: 16px; }

/* === inputs === */
.input, input[type="text"], input[type="search"] {
  height: 44px; padding: 0 16px;
  background: var(--c-canvas);
  color: var(--c-ink);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  font: inherit; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, input[type="text"]:focus, input[type="search"]:focus {
  outline: none; border-color: var(--c-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-ink) 8%, transparent);
}

/* === pills, badges === */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--c-surface-card); color: var(--c-ink);
  font-size: 13px; font-weight: 500;
}
.pill-strong { background: var(--c-primary); color: var(--c-on-primary); }
.pill-on-color { background: rgba(255,255,255,.18); color: inherit; backdrop-filter: blur(2px); }
.tag-tone-1 { background: color-mix(in srgb, var(--tone-1) 22%, white); color: #003e52; }
.tag-tone-2 { background: color-mix(in srgb, var(--tone-2) 26%, white); color: #11512e; }
.tag-tone-3 { background: color-mix(in srgb, var(--tone-3) 28%, white); color: #5a3000; }
.tag-tone-4 { background: color-mix(in srgb, var(--tone-4) 26%, white); color: #6b0726; }
.tag-tone-5 { background: var(--c-surface-card); color: var(--c-muted); }

/* === view + container === */
.view { outline: none; padding-bottom: var(--s-section); }
.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--s-xl); }
@media (max-width: 768px) { .container { padding: 0 var(--s-md); } }

/* === display type === */
.display-xl { font-family: var(--f-display); font-weight: 600; font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -0.045em; }
.display-lg { font-family: var(--f-display); font-weight: 600; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -0.04em; }
.display-md { font-family: var(--f-display); font-weight: 600; font-size: clamp(28px, 3.5vw, 40px); line-height: 1.1; letter-spacing: -0.03em; }
.display-sm { font-family: var(--f-display); font-weight: 600; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.title-lg { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; }
.title-md { font-size: 18px; font-weight: 600; line-height: 1.4; }
.title-sm { font-size: 16px; font-weight: 600; line-height: 1.4; }
.body-md { font-size: 16px; line-height: 1.55; color: var(--c-body); }
.body-sm { font-size: 14px; line-height: 1.55; color: var(--c-body); }
.caption { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--c-muted); }
.eyebrow { font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .15em; text-transform: uppercase; color: var(--c-muted); }

.han { font-family: var(--f-han); }

/* === toast === */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--c-primary); color: var(--c-on-primary);
  padding: 12px 20px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transition: transform .35s var(--ease-out);
  z-index: 80; pointer-events: none;
  max-width: calc(100vw - 32px);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* === view transitions === */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .35s; animation-timing-function: var(--ease-out);
}

/* === entrance === */
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop  { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rise { animation: rise .5s var(--ease-out) both; }
.rise-delay-1 { animation-delay: .06s; }
.rise-delay-2 { animation-delay: .12s; }
.rise-delay-3 { animation-delay: .18s; }
.rise-delay-4 { animation-delay: .24s; }
.rise-delay-5 { animation-delay: .30s; }

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