/* Etude account pages: the site's dark palette, Inter for text, Computer Modern (KaTeX_Main) for headings. */
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "KaTeX_Main"; src: url("fonts/KaTeX_Main-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "KaTeX_Main"; src: url("fonts/KaTeX_Main-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "KaTeX_Math"; src: url("fonts/KaTeX_Math-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --radius: 0.75rem;
  --background: oklch(0.145 0.004 85);
  --foreground: oklch(0.95 0.008 85);
  --card: oklch(0.18 0.005 85);
  --muted: oklch(0.23 0.005 85);
  --muted-foreground: oklch(0.7 0.01 85);
  --accent: oklch(0.25 0.006 85);
  --border: oklch(0.95 0.01 85 / 11%);
  --input: oklch(0.95 0.01 85 / 15%);
  --primary: oklch(0.95 0.008 85);
  --primary-foreground: oklch(0.17 0.005 85);
  --highlight: oklch(0.75 0.15 350);
  --success: oklch(0.78 0.16 150);
  --warning: oklch(0.84 0.15 85);
  --danger: oklch(0.7 0.18 22);
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "KaTeX_Main", "Latin Modern Roman", "Computer Modern Serif", Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--background); color: var(--foreground);
  font: 400 16px/1.6 var(--font-sans); font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
::selection { background: color-mix(in oklab, var(--highlight) 35%, transparent); }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.005em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }
h1 em, h2 em { color: var(--highlight); }
p { margin: 0; }
[hidden] { display: none !important; }

.banner { background: color-mix(in oklab, var(--warning) 18%, var(--background)); color: var(--warning); text-align: center; font-size: 0.82rem; padding: 0.45rem 1rem; border-bottom: 1px solid color-mix(in oklab, var(--warning) 30%, transparent); }

/* header */
.top { border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; background: color-mix(in oklab, var(--background) 88%, transparent); backdrop-filter: blur(10px); }
.top-in { max-width: 60rem; margin: 0 auto; padding: 0.85rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; }
.wordmark { font-family: var(--font-serif); font-size: 1.45rem; text-decoration: none; white-space: nowrap; line-height: 1; }
.wordmark .eps { font-family: "KaTeX_Math", var(--font-serif); font-style: italic; color: var(--highlight); }
.wordmark .sub { font-family: var(--font-sans); font-size: 0.78rem; color: var(--muted-foreground); letter-spacing: 0.02em; margin-left: 0.3rem; }
.nav { display: flex; gap: 0.2rem; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav a { text-decoration: none; color: var(--muted-foreground); font-size: 0.88rem; padding: 0.35rem 0.7rem; border-radius: 999px; white-space: nowrap; transition: color 0.15s, background 0.15s; }
.nav a:hover { color: var(--foreground); }
.nav a[aria-current="page"] { color: var(--foreground); background: var(--accent); }

/* layout */
.page { flex: 1; width: 100%; max-width: 60rem; margin: 0 auto; padding: 2.75rem 1.25rem 4rem; }
.narrow { max-width: 30rem; }
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }
.lede { color: var(--muted-foreground); font-size: 1.05rem; max-width: 34rem; text-wrap: pretty; }
.muted { color: var(--muted-foreground); }
.small { font-size: 0.85rem; }
.eyebrow { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); }
.row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.spread { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem; }
.card h2, .card h3 { margin-bottom: 0.4rem; }
a.card { display: block; text-decoration: none; transition: border-color 0.15s, transform 0.2s var(--ease); }
a.card:hover { border-color: color-mix(in oklab, var(--highlight) 45%, transparent); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 0.8rem 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.list li:first-child { border-top: 0; }

/* controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  height: 2.6rem; padding: 0 1.15rem; border-radius: 999px; border: 1px solid var(--input);
  background: transparent; cursor: pointer; text-decoration: none; font-size: 0.92rem; font-weight: 500;
  transition: background 0.15s, transform 0.1s, opacity 0.15s; white-space: nowrap;
}
.btn:hover { background: var(--accent); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.btn-primary:hover { background: oklch(1 0 0); }
.btn-pink { background: var(--highlight); color: oklch(0.17 0.02 350); border-color: transparent; }
.btn-pink:hover { background: color-mix(in oklab, var(--highlight) 85%, white); }
.btn-danger { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 45%, transparent); }
.btn-danger:hover { background: color-mix(in oklab, var(--danger) 14%, transparent); }
.btn-sm { height: 2.1rem; padding: 0 0.85rem; font-size: 0.82rem; }
.btn-block { width: 100%; }
.link { background: none; border: 0; padding: 0; color: var(--highlight); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

label { display: block; font-size: 0.85rem; color: var(--muted-foreground); margin-bottom: 0.35rem; }
.input, select.input {
  width: 100%; height: 2.75rem; padding: 0 0.9rem; border-radius: 0.6rem;
  background: var(--background); border: 1px solid var(--input); outline: none;
}
.input:focus { border-color: color-mix(in oklab, var(--highlight) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--highlight) 22%, transparent); }
:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; }

.seg { display: inline-flex; padding: 0.25rem; border-radius: 999px; background: var(--muted); border: 1px solid var(--border); }
.seg button { border: 0; background: transparent; padding: 0.4rem 1rem; border-radius: 999px; cursor: pointer; color: var(--muted-foreground); font-size: 0.9rem; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--foreground); box-shadow: 0 1px 0 var(--border); }

.price { font-family: var(--font-serif); font-size: 3rem; line-height: 1; }
.price small { font-family: var(--font-sans); font-size: 0.95rem; color: var(--muted-foreground); }
.pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted-foreground); }
.pill.ok { color: var(--success); border-color: color-mix(in oklab, var(--success) 40%, transparent); }
.pill.warn { color: var(--warning); border-color: color-mix(in oklab, var(--warning) 40%, transparent); }
.pill.bad { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 40%, transparent); }
.dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }

.note { border-left: 2px solid var(--highlight); padding: 0.2rem 0 0.2rem 0.9rem; color: var(--muted-foreground); font-size: 0.92rem; }
.error { color: var(--danger); font-size: 0.9rem; }
.ok-text { color: var(--success); }
.features { list-style: none; padding: 0; margin: 0; }
.features li { padding: 0.3rem 0 0.3rem 1.4rem; position: relative; color: var(--muted-foreground); }
.features li::before { content: ""; position: absolute; left: 0.2rem; top: 0.85rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--highlight); }

.cover { width: 100%; aspect-ratio: 8 / 5; border-radius: 0.6rem; object-fit: cover; background: var(--muted); display: block; }
.cover-ph { width: 100%; aspect-ratio: 8 / 5; border-radius: 0.6rem; background: radial-gradient(120% 90% at 20% 10%, color-mix(in oklab, var(--highlight) 22%, var(--muted)), var(--muted)); display: grid; place-items: center; font-family: "KaTeX_Math", var(--font-serif); font-style: italic; font-size: 3rem; color: var(--highlight); }
.detail { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.desc { white-space: pre-wrap; color: var(--muted-foreground); }
.samples { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.samples li { background: var(--background); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.55rem 0.8rem; font-size: 0.9rem; }

.spinner { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--input); border-top-color: var(--highlight); animation: spin 0.8s linear infinite; display: inline-block; vertical-align: -0.15rem; }
@keyframes spin { to { transform: rotate(360deg); } }

.foot { border-top: 1px solid var(--border); }
.foot-in { max-width: 60rem; margin: 0 auto; padding: 1.25rem; display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted-foreground); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--foreground); }

@media (max-width: 640px) {
  .top-in { flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0.75rem 1rem 0.5rem; }
  .nav { margin-left: -0.6rem; width: calc(100% + 0.6rem); }
  .page { padding: 1.75rem 1rem 3rem; }
  .detail { grid-template-columns: 1fr; }
  .price { font-size: 2.4rem; }
  .card { padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }