:root {
  --bg: #f7f4ef;
  --paper: #fffdf8;
  --panel: #eeeae2;
  --ink: #171716;
  --muted: #706c65;
  --soft: #aaa297;
  --line: rgba(23,23,22,.12);
  --line-strong: rgba(23,23,22,.22);
  --accent: #a98f6a;
  --accent-soft: rgba(169,143,106,.14);
  --glass: rgba(255,255,255,.48);
  --glass-strong: rgba(255,255,255,.68);
  --shadow: 0 24px 80px rgba(32,28,22,.08);
  --shadow-soft: 0 14px 44px rgba(32,28,22,.06);
}
[data-tone="sage"] { --accent:#7d8a78; --accent-soft:rgba(125,138,120,.14); }
[data-tone="clay"] { --accent:#a47764; --accent-soft:rgba(164,119,100,.14); }
[data-tone="slate"] { --accent:#7d8790; --accent-soft:rgba(125,135,144,.14); }
[data-tone="mist"] { --accent:#9a9389; --accent-soft:rgba(154,147,137,.16); }
[data-tone="stone"] { --accent:#a98f6a; --accent-soft:rgba(169,143,106,.14); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 4%, rgba(169,143,106,.12), transparent 26%),
    radial-gradient(circle at 88% 0%, rgba(125,135,144,.12), transparent 25%),
    linear-gradient(rgba(17,17,16,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,16,.025) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, 42px 42px, 42px 42px, auto;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
::selection { background: var(--ink); color: white; }

.app-shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; }
.liquid-shell, .bottom-tabs, .drawer-panel, .toolbar-glass, .floating-glass {
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.34));
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(255,255,255,.24), 0 24px 70px rgba(0,0,0,.10);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(145%);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(145%);
}
body.glass-low { --glass-blur: 14px; }
body.glass-high { --glass-blur: 38px; }
body.quiet-shade { --shadow: 0 18px 48px rgba(32,28,22,.05); --shadow-soft: 0 10px 24px rgba(32,28,22,.04); }
.brand-mark { background: var(--ink); color: white; box-shadow: var(--shadow-soft); }
.nav-pill {
  border-radius: 999px;
  padding: 9px 12px;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.nav-pill:hover, .nav-pill.active { color: var(--ink); background: rgba(255,255,255,.52); }
.bottom-tab { display:grid; place-items:center; min-height:38px; border-radius:999px; color:var(--muted); transition:.25s ease; }
.bottom-tab.active { color:var(--ink); background:rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px var(--line); }
.drawer.open { transform: translateX(0); }
.drawer-item { border-radius: 18px; padding: 10px 12px; transition: background .25s ease, transform .25s ease; }
.drawer-item:hover { background: rgba(255,255,255,.52); transform: translateX(-2px); }

.page { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding-bottom: 72px; }
.page-narrow { width: min(980px, calc(100% - 28px)); }
.hero-title { font-size: clamp(2.7rem, 6.4vw, 5.4rem); line-height: .92; letter-spacing: -.075em; font-weight: 600; }
.section-title { font-size: clamp(2rem, 4.6vw, 3.7rem); line-height: .98; letter-spacing: -.065em; font-weight: 560; }
.card-title { font-size: clamp(1.03rem, 1.8vw, 1.28rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 560; }
.kicker, .eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 560; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:rgba(255,255,255,.46); border-radius:999px; padding:7px 10px; }
.eyebrow::before { content:""; width:6px; height:6px; border-radius:99px; background:var(--accent); box-shadow:0 0 0 5px var(--accent-soft); }
.text-muted { color: var(--muted); }
.text-ink { color: var(--ink); }
.border-line { border-color: var(--line); }
.bg-paper { background: var(--paper); }
.bg-panel { background: var(--panel); }

.card, .glass-card, .course-card, .matte-card {
  border: 1px solid var(--line);
  background: rgba(255,253,248,.74);
  box-shadow: var(--shadow-soft);
}
.glass-card, .course-card {
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}
.matte-card { background: rgba(255,253,248,.88); }
.lift { transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease, border-color .26s ease; }
.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line-strong); border-radius:999px; min-height:42px;
  background:rgba(255,255,255,.54); color:var(--ink); font-weight:560;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); background:rgba(255,255,255,.78); }
.btn:active { transform: scale(.985); }
.btn-dark { background: var(--ink); color:white; border-color:var(--ink); }
.btn-dark:hover { background:#242321; }
.btn-accent { background: var(--accent-soft); border-color: rgba(0,0,0,.06); color: var(--ink); }
.badge { display:inline-flex; align-items:center; min-height:26px; border:1px solid var(--line); border-radius:999px; padding:5px 9px; color:var(--muted); font-size:12px; font-weight:500; background:rgba(255,255,255,.48); }
.badge-accent { color: var(--ink); background: var(--accent-soft); border-color: rgba(0,0,0,.04); }
.grid-auto { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; }
.grid-auto-tight { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; }
.img-card { position:relative; overflow:hidden; background:#ddd7ce; border:1px solid var(--line); box-shadow:var(--shadow-soft); }
.img-card img { width:100%; height:100%; min-height:inherit; object-fit:cover; filter:saturate(.48) contrast(.93) brightness(.94); transform:scale(1.001); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .45s ease; }
.img-card:hover img { transform:scale(1.035); filter:saturate(.55) contrast(.96) brightness(.96); }
.img-card::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.48), rgba(0,0,0,.03) 60%); pointer-events:none; }
.img-caption { position:absolute; z-index:2; left:18px; right:18px; bottom:18px; color:white; }
.progress-track { height:9px; border-radius:99px; background:rgba(23,23,22,.08); overflow:hidden; border:1px solid rgba(23,23,22,.06); }
.progress-fill { height:100%; background:linear-gradient(90deg, var(--ink), var(--accent)); border-radius:99px; transition:width .55s cubic-bezier(.2,.8,.2,1); }
.tabbar { display:flex; gap:6px; overflow:auto; padding:6px; border-radius:999px; }
.tabbar::-webkit-scrollbar { display:none; }
.tab { white-space:nowrap; border-radius:999px; padding:9px 13px; color:var(--muted); font-size:13px; transition:.22s ease; }
.tab.active { background:rgba(255,255,255,.72); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.form-field { display:grid; gap:7px; }
.form-field label { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:560; }
.input { width:100%; min-height:46px; border:1px solid var(--line); background:rgba(255,255,255,.62); border-radius:17px; padding:12px 13px; outline:none; transition:border-color .2s ease, background .2s ease; }
.input:focus { border-color:var(--line-strong); background:rgba(255,255,255,.84); }
textarea.input { min-height:120px; resize:vertical; }
.modal-card { border:1px solid rgba(255,255,255,.55); background:rgba(255,253,248,.92); box-shadow:0 28px 110px rgba(0,0,0,.22); -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%); }
.lesson-step { border:1px solid var(--line); background:rgba(255,255,255,.5); border-radius:22px; padding:15px; }
.lesson-step + .lesson-step { margin-top:10px; }
.segment-preview { display:grid; grid-template-columns:.8fr 1.2fr; gap:14px; align-items:stretch; }
.command-row { display:flex; gap:8px; overflow:auto; padding-bottom:3px; }
.command-row::-webkit-scrollbar { display:none; }
.hidden-view { display:none; }
.route-fade { animation: routeIn .52s cubic-bezier(.2,.8,.2,1) both; }
.reveal { opacity:0; transform:translateY(12px); animation: reveal .7s cubic-bezier(.2,.8,.2,1) forwards; }
.reveal:nth-child(2){animation-delay:.05s}.reveal:nth-child(3){animation-delay:.1s}.reveal:nth-child(4){animation-delay:.15s}.reveal:nth-child(5){animation-delay:.2s}
@keyframes reveal { to { opacity:1; transform:translateY(0); } }
@keyframes routeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

#cursorGlow { position:fixed; width:420px; height:420px; border-radius:999px; pointer-events:none; z-index:-1; background:radial-gradient(circle, var(--accent-soft), transparent 66%); transform:translate(-50%, -50%); opacity:.65; transition: opacity .2s ease; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
body.reduce-motion #cursorGlow { display:none; }

@media (max-width: 980px) {
  .grid-auto, .grid-auto-tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segment-preview { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  .app-shell, .page { width:min(100% - 22px, 1180px); }
  .hero-title { font-size: clamp(2.7rem, 15vw, 4.2rem); }
  .section-title { font-size: clamp(1.9rem, 10vw, 3rem); }
  .grid-auto, .grid-auto-tight { grid-template-columns:1fr; }
  .img-caption { left:14px; right:14px; bottom:14px; }
  .bottom-safe { padding-bottom:88px; }
}