/* The dashboard (dashboard.html). Same materials as the landing page: warm paper, folder covers,
   keycaps, and the dot-matrix machine. Loaded with account.css (header button, footer). */
.db-body {
  --ink: #1D1C1A; --ink-2: #5E5B55; --ink-3: #97938B; --paper: #FDFDFB; --page: #F6F5F1;
  --rule: rgba(29, 28, 26, .10); --orange: #FF5A1F; --green: #23885A;
  --lift-1: 0 1px 1px rgba(60, 48, 30, .06), 0 2px 4px rgba(60, 48, 30, .06);
  --lift-2: 0 1px 2px rgba(60, 48, 30, .07), 0 4px 8px rgba(60, 48, 30, .07), 0 12px 24px rgba(60, 48, 30, .07);
  --lift-3: 0 2px 4px rgba(60, 48, 30, .08), 0 8px 16px rgba(60, 48, 30, .08), 0 24px 48px rgba(60, 48, 30, .10);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
  margin: 0; min-height: 100svh; display: flex; flex-direction: column; color: var(--ink);
  font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  background: var(--page) radial-gradient(rgba(29, 28, 26, .085) 1px, transparent 1.2px) 0 0 / 22px 22px;
}
.db-body * { box-sizing: border-box; }
.db-body a:not(.db-btn):not(.acct-k) { color: inherit; }

/* ---------- header ---------- */
.db-head { position: sticky; top: 0; z-index: 50; background: rgba(246, 245, 241, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.db-head.scrolled { border-bottom-color: var(--rule); }
.db-head-in { width: min(1200px, 100% - 48px); margin: 0 auto; height: 68px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.db-wordmark { justify-self: start; font: 400 21px/1 var(--serif); font-variation-settings: "opsz" 36; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.db-wordmark i { font-style: italic; }
.db-nav { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(29, 28, 26, .035); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06); }
.db-nav a { padding: 8px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color .16s var(--ease), background-color .16s var(--ease); }
.db-nav a:hover { color: var(--ink); }
.db-nav a[aria-current="page"] { color: var(--ink); background: var(--paper); box-shadow: var(--lift-1), inset 0 0 0 1px rgba(29, 28, 26, .05); }
.db-acct { justify-self: end; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; font: 500 14.5px var(--sans); color: var(--ink); background: var(--paper); box-shadow: var(--lift-1), inset 0 0 0 1px var(--rule); }
.db-acct.signed-in { padding-left: 7px; }

/* ---------- page ---------- */
.db { flex: 1; width: min(1200px, 100% - 48px); margin: 0 auto; padding: 40px 0 96px; }
.db > * { opacity: 0; transform: translateY(10px); }
.db.in > * { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.db.in > *:nth-child(2) { transition-delay: .06s; } .db.in > *:nth-child(3) { transition-delay: .12s; }
.db.in > *:nth-child(4) { transition-delay: .18s; } .db.in > *:nth-child(n+5) { transition-delay: .24s; }

/* ---------- hero: where you left off ---------- */
.db-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 56px; align-items: center;
  padding: 52px 56px; border-radius: 28px; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--tint) 70%, transparent) 0%, transparent 55%), var(--paper);
  box-shadow: var(--lift-2), 0 0 0 1px rgba(29, 28, 26, .06);
}
.db-hello { margin: 0 0 10px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.db-title { margin: 0; font: 500 clamp(36px, 4.4vw, 58px)/1 var(--sans); letter-spacing: -0.05em; color: #232220; max-width: 15ch; text-wrap: balance; }
.db-sub { margin: 16px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 46ch; }

.db-resume {
  margin-top: 32px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px;
  padding: 16px 16px 16px 18px; border-radius: 20px; text-decoration: none; color: var(--ink);
  background: rgba(255, 255, 255, .72); box-shadow: var(--lift-1), inset 0 0 0 1px rgba(29, 28, 26, .07);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.db-resume:hover { transform: translateY(-2px); box-shadow: var(--lift-2), inset 0 0 0 1px rgba(29, 28, 26, .08); }
.db-resume:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.db-resume-txt { display: grid; gap: 3px; min-width: 0; }
.db-resume-txt small { font-size: 13px; color: var(--ink-3); }
.db-resume-txt b { font: 380 23px/1.15 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -0.02em; }
.db-resume-txt > span { font-size: 14.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-pips { display: flex; gap: 4px; margin-top: 8px; }
.db-pips i { width: 22px; height: 5px; border-radius: 3px; background: rgba(29, 28, 26, .12); }
.db-pips i.on { background: var(--ink); }
.db-pips i.cur { background: var(--orange); }
.db-key {
  display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: 12px;
  font-size: 16px; font-weight: 500; color: #F6F3EC; background: linear-gradient(#3A3936, #262523);
  box-shadow: inset 0 -3px 0 #171614, inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .18), 0 6px 14px rgba(0, 0, 0, .14);
  transition: filter .16s var(--ease);
}
.db-resume:hover .db-key { filter: brightness(1.1); }
.db-resume:active .db-key { transform: translateY(2px); box-shadow: inset 0 -1px 0 #171614, 0 1px 1px rgba(0, 0, 0, .2); }
.db-key kbd { font: 12px var(--sans); color: rgba(246, 243, 236, .55); }

/* the machine */
.db-machine {
  padding: 16px 18px 18px; border-radius: 20px; transform: rotate(1.2deg);
  background: linear-gradient(170deg, #E4E1DA 0%, #D6D2CA 55%, #CBC7BE 100%);
  box-shadow: var(--lift-3), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(0, 0, 0, .08), 0 0 0 1px rgba(60, 48, 30, .12);
}
.db-m-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.db-grill { width: 52px; height: 28px; border-radius: 6px; opacity: .65; background-image: radial-gradient(circle, rgba(40, 34, 26, .55) 1.6px, transparent 2px); background-size: 7px 7px; }
.db-m-name { font: 700 13px var(--sans); letter-spacing: .32em; color: #4A463F; }
.db-m-model { margin-top: 3px; font-size: 11.5px; color: #7A756C; }
.db-lamp { position: relative; margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #CFCAC1, #B5B0A6); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .6); }
.db-lamp i { position: absolute; inset: 7px; border-radius: 50%; background: #6E665A; }
.db-lamp.on i { background: #FF6A2B; box-shadow: 0 0 14px rgba(255, 90, 31, .85), 0 0 34px rgba(255, 90, 31, .35); }
.db-screen {
  position: relative; overflow: hidden; min-height: 112px; display: flex; align-items: center; padding: 14px 16px;
  border-radius: 11px; background: #121110;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .55);
}
.db-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(255, 255, 255, .025) 2px 3px); }
.db-voice { font: 700 20px/1.32 "Doto", var(--mono); color: var(--orange); text-shadow: 0 0 8px rgba(255, 90, 31, .45); }
.db-voice.off { color: #3A3631; text-shadow: none; letter-spacing: .3em; }
.db-m-cap { margin: 14px 6px 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }

/* ---------- sign-in nudge ---------- */
.db-keep { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px 16px 22px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.db-keep p { margin: 0; font-size: 15px; color: var(--ink-2); }
.db-keep b { color: var(--ink); font-weight: 600; }

/* ---------- sections ---------- */
.db-sect { margin-top: 72px; }
.db-sect-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.db-sect-head h2 { margin: 0; font: 380 32px/1.1 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -0.025em; }
.db-sect-head p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* folder covers */
.db-folder { --card: #F2DCCB; --fold: #E7BFA2; --fold-2: #DDB094; position: relative; display: block; flex: none; width: 132px; aspect-ratio: 240 / 300; }
.db-folder-tab { position: absolute; right: -8px; top: 16px; width: 18px; height: 64px; border-radius: 0 8px 8px 0; background: var(--fold-2); box-shadow: inset -1px 0 0 rgba(0, 0, 0, .05); }
.db-folder-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 5px 10px 10px 5px; background: var(--fold);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 40%), radial-gradient(rgba(29, 28, 26, .07) .8px, transparent 1px);
  background-size: auto, 4px 4px;
  box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .10), inset 3px 0 0 rgba(0, 0, 0, .05), 0 1px 2px rgba(60, 48, 30, .12), 0 8px 16px -6px rgba(60, 48, 30, .25);
  transform-origin: left center; transition: transform .26s var(--ease);
}
.db-folder-face svg { display: block; width: 100%; height: 100%; }
.db-folder-sm { width: 64px; } .db-folder-sm .db-folder-tab { right: -5px; top: 8px; width: 10px; height: 32px; }
.db-folder-xs { width: 44px; } .db-folder-xs .db-folder-tab { right: -4px; top: 6px; width: 7px; height: 22px; }
.db-folder-lg { width: 150px; }
.db-folder .pulse { animation: dbPulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dbPulse { 50% { opacity: .55; } }

/* course cards */
.db-course { display: flex; gap: 28px; padding: 24px; border-radius: 22px; background: var(--card); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .05); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
a.db-course:hover, .db-going:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06), var(--lift-2); }
.db-course:hover .db-folder-face { transform: perspective(800px) rotateY(-6deg); }
.db-course-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.db-course h3 { margin: 0; font: 380 27px/1.1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -0.025em; }
.db-course h3 i { font-style: italic; }
.db-course-note { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.db-course-note svg { width: 16px; height: 16px; color: var(--green); }
.db-pitch { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

.db-going-list { display: grid; gap: 16px; }
.db-going .db-course-body { justify-content: center; }
.db-strip { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; margin: 18px 0 0; max-width: 720px; }
.db-strip i { position: relative; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .08); overflow: hidden; }
.db-strip i.s-done { background: var(--ink); box-shadow: none; }
.db-strip i.s-part::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--ink); }
.db-strip i.s-soon { background: transparent; box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .12); background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(29, 28, 26, .08) 3px 4px); }
.db-strip i.here { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--orange); }
.db-course-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.db-next { display: grid; font-size: 15px; font-weight: 500; }
.db-next small { font-size: 12.5px; font-weight: 400; color: var(--ink-2); }

.db-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; flex: none;
  font: 500 14.5px var(--sans); color: #F6F3EC; text-decoration: none; background: linear-gradient(#3A3936, #262523);
  box-shadow: inset 0 -3px 0 #171614, inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .18);
  transition: filter .16s var(--ease), transform .09s var(--ease);
}
.db-btn svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.db-btn:hover { filter: brightness(1.1); }
.db-btn:hover svg, a.db-course:hover .db-btn svg { transform: translateX(2px); }
.db-btn:active { transform: translateY(2px); }
.db-btn-quiet { color: var(--ink); background: linear-gradient(#F7F5F0, #E9E6DF); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(60, 48, 30, .14); }

.db-ready-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.db-ready { flex-direction: column; gap: 22px; padding: 26px; }
.db-ready .db-btn { align-self: flex-start; margin-top: auto; }
.db-ready .db-course-note { margin-bottom: 22px; }
.db-done-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.db-done { align-items: center; gap: 18px; padding: 16px 20px; }
.db-done h3 { font-size: 21px; }

.db-soon-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.db-soon { display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; border-radius: 14px; text-decoration: none; background: rgba(253, 253, 251, .7); box-shadow: inset 0 0 0 1px var(--rule); transition: background-color .16s var(--ease); }
.db-soon:hover { background: var(--paper); }
.db-soon .db-folder { filter: saturate(.8); }
.db-soon b { display: block; font: 380 17px/1.2 var(--serif); font-variation-settings: "opsz" 36; letter-spacing: -0.015em; }
.db-soon b i { font-style: italic; }
.db-soon small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }

/* tooltip */
.db-tip { position: absolute; z-index: 80; max-width: 280px; padding: 7px 10px; border-radius: 8px; pointer-events: none; font: 500 12.5px/1.35 var(--sans); color: #F6F3EC; background: #262523; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.db-tip[hidden] { display: none; }

.db-foot { width: min(1200px, 100% - 48px); margin: 0 auto; padding-left: 0; padding-right: 0; }

/* ---------- smaller screens ---------- */
@media (max-width: 1020px) {

  .db-hero { grid-template-columns: 1fr; gap: 40px; padding: 40px 36px; }
  .db-machine-wrap { max-width: 460px; }

}
@media (max-width: 720px) {
  .db-head-in { width: calc(100% - 32px); grid-template-columns: 1fr auto; }
  .db-nav { display: none; }
  .db { width: calc(100% - 32px); padding-top: 20px; }
  .db-hero { padding: 30px 22px; border-radius: 22px; }
  .db-resume { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .db-resume .db-key { grid-column: 1 / -1; justify-content: center; }
  .db-machine { transform: none; }
  .db-going { flex-direction: column; gap: 18px; }
  .db-going .db-folder { width: 96px; }
  .db-ready-list { grid-template-columns: 1fr; }
  .db-keep { flex-direction: column; align-items: flex-start; }
  .db-sect { margin-top: 56px; }

  .db-foot { width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .db > *, .db.in > * { opacity: 1; transform: none; transition: none; }
  .db-folder .pulse { animation: none; }
}

/* ---------- plans: locked units and courses ---------- */
.db-head-right { justify-self: end; display: flex; align-items: center; gap: 14px; }
.db-head-right .db-acct { justify-self: auto; }
.db-lock { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
/* Pro actions use the same dark key as everything else; the lock icon and the words carry the meaning. */
.db-btn-pro { gap: 8px; border: 0; cursor: pointer; }
button.db-btn { font-family: var(--sans); }
.db-strip i.s-lock { background: rgba(255, 255, 255, .45); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .08); }
button.db-resume, button.db-course { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.db-resume-lock .db-resume-txt > span { display: inline-flex; align-items: center; gap: 6px; }
.db-resume-lock .db-key .db-lock { width: 16px; height: 16px; }
.db-ready-lock .db-folder { filter: saturate(.9); }
.db-ready-lock:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06), var(--lift-2); }
.db-plan { background: var(--paper); box-shadow: var(--lift-1), 0 0 0 1px rgba(29, 28, 26, .06); }
.db-plan-txt { display: grid; gap: 2px; }
.db-plan-txt b { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.db-plan-txt span { font-size: 14.5px; color: var(--ink-2); }

/* ---------- page heads (courses, plans) ---------- */
.db-page-head { margin: 24px 0 8px; }
.db-page-head-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.db-page-title { margin: 0; font: 500 clamp(40px, 5vw, 60px)/1 var(--sans); letter-spacing: -0.05em; color: #232220; }
.db-page-title em { font-family: var(--serif); font-weight: 380; font-style: italic; letter-spacing: -0.03em; }
.db-pass { margin-top: 48px; }
.db-page-head .db-sub { margin-top: 14px; }
.db-filters, .db-bill { display: inline-flex; gap: 2px; margin-top: 28px; padding: 4px; border-radius: 999px; background: rgba(29, 28, 26, .045); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06); }
.db-filters button, .db-bill button { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font: 500 14px var(--sans); color: var(--ink-2); cursor: pointer; transition: color .16s var(--ease), background-color .16s var(--ease); }
.db-filters button:hover, .db-bill button:hover { color: var(--ink); }
.db-filters button[aria-selected="true"], .db-bill button[aria-checked="true"] { color: var(--ink); background: var(--paper); box-shadow: var(--lift-1), inset 0 0 0 1px rgba(29, 28, 26, .05); }
.db-bill button span { margin-left: 6px; font-weight: 500; color: var(--green); }
.db-empty { margin: 64px 0; text-align: center; color: var(--ink-3); }

/* ---------- library ---------- */
.db-shelf { margin-top: 56px; }
.db-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.db-lib-card { display: flex; gap: 22px; padding: 20px; border-radius: 20px; text-decoration: none; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .05); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.db-lib-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06), var(--lift-2); }
.db-lib-card:hover .db-folder-face { transform: perspective(800px) rotateY(-6deg); }
.db-lib-card .db-folder { width: 96px; align-self: flex-start; }
.db-lib-card.st-soon .db-folder { filter: saturate(.75); }
.db-lib-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.db-lib-body b { font: 380 22px/1.12 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -0.02em; }
.db-lib-body b i { font-style: italic; }
.db-lib-sub { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.db-lib-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; font-size: 13px; color: var(--ink-2); }
.db-lib-st { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); }
.db-lib-st .db-lock { width: 13px; height: 13px; }
.st-soon .db-lib-st, .db-lib-st.st-soon { color: var(--ink-2); font-weight: 400; }
.db-lib-bar { display: block; height: 4px; margin-top: 10px; border-radius: 2px; background: rgba(255, 255, 255, .6); overflow: hidden; }
.db-lib-bar i { display: block; height: 100%; background: var(--ink); border-radius: 2px; }

/* ---------- one course ---------- */
.db-back { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 20px; font-size: 14.5px; font-weight: 500; color: var(--ink-2) !important; text-decoration: none; }
.db-back svg { width: 15px; height: 15px; transform: rotate(180deg); }
.db-back:hover { color: var(--ink) !important; }
.db-course-hero { display: flex; gap: 48px; align-items: flex-start; padding: 40px; border-radius: 28px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .05); }
.db-course-hero .db-folder-lg { width: 200px; }
.db-ch-body { flex: 1; min-width: 0; }
.db-ch-body .db-lib-st { font-size: 14px; }
.db-ch-body h1 { margin: 10px 0 0; font: 380 clamp(36px, 4vw, 52px)/1.04 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -0.03em; }
.db-ch-body h1 i { font-style: italic; }
.db-ch-body .db-pitch { font-size: 17px; max-width: 60ch; margin-top: 14px; }
.db-ch-facts { display: flex; flex-wrap: wrap; gap: 32px; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(29, 28, 26, .10); }
.db-ch-facts dt { font-size: 12.5px; color: var(--ink-2); }
.db-ch-facts dd { margin: 2px 0 0; font: 500 22px/1.1 var(--sans); letter-spacing: -0.03em; }
.db-ch-who { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 70ch; }
.db-ch-who b { font-weight: 600; color: var(--ink); margin-right: 4px; }
.db-ch-who b + b, .db-ch-who b:nth-of-type(2) { margin-left: 12px; }
.db-ch-cta { margin-top: 26px; }
.db-btn-lg { height: 48px; padding: 0 20px; font-size: 15.5px; border-radius: 12px; }
.db-cta-note { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); }
.db-cta-note svg { width: 16px; height: 16px; color: var(--green); }
.db-track { margin-top: 48px; }
.db-units { list-style: none; margin: 0; padding: 6px; border-radius: 20px; background: var(--paper); box-shadow: var(--lift-1), 0 0 0 1px rgba(29, 28, 26, .05); }
.db-u + .db-u { border-top: 1px solid rgba(29, 28, 26, .07); }
.db-u-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; width: 100%; padding: 14px 16px; border: 0; border-radius: 12px; background: none; font: inherit; text-align: left; color: var(--ink); text-decoration: none; cursor: pointer; transition: background-color .14s var(--ease); }
a.db-u-row:hover, button.db-u-row:hover { background: rgba(29, 28, 26, .04); }
.s-soon .db-u-row { cursor: default; color: var(--ink-3); }
.db-u-n { font: 340 24px/1 var(--serif); font-variation-settings: "opsz" 72; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.db-u-t b { display: block; font-size: 15.5px; font-weight: 500; }
.db-u-t small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-soon .db-u-t b, .s-soon .db-u-t small { color: var(--ink-3); }
.db-u-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.db-u-st svg { width: 15px; height: 15px; }
.s-done .db-u-st { color: var(--ink); } .s-done .db-u-st svg { color: var(--green); }
.s-part .db-u-st { color: var(--ink); font-weight: 500; }

/* ---------- plans ---------- */
.db-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; align-items: stretch; }
.db-pl { display: flex; flex-direction: column; padding: 30px 28px; border-radius: 24px; background: var(--paper); box-shadow: var(--lift-1), 0 0 0 1px rgba(29, 28, 26, .06); }
.db-pl-pro { box-shadow: var(--lift-3), 0 0 0 1.5px var(--ink); }
.db-pl h2 { margin: 0; font: 500 22px/1.2 var(--sans); letter-spacing: -0.02em; }
.db-pl-for { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-2); }
.db-pl-price { display: flex; align-items: baseline; gap: 8px; margin-top: 24px; }
.db-pl-price b { font: 500 48px/1 var(--sans); letter-spacing: -0.05em; color: #232220; font-variant-numeric: tabular-nums; }
.db-pl-price span { font-size: 15px; color: var(--ink-2); }
.db-pl-bill { margin: 8px 0 22px; min-height: 21px; font-size: 14px; color: var(--ink-3); }
.db-pl .db-btn-lg, .db-pl-current { width: 100%; justify-content: center; }
.db-pl-current { display: flex; align-items: center; height: 48px; border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--ink-2); background: rgba(29, 28, 26, .045); }
.db-pl-quiet { color: var(--ink-3); }
.db-pl-go:disabled { filter: none; opacity: .7; cursor: default; }
.db-pl-soon { margin: 10px 2px 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.db-pl-list { list-style: none; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(29, 28, 26, .08); display: grid; gap: 12px; }
.db-pl-list li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.db-pl-list svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.db-pl-faq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--rule); }
.db-pl-faq h3 { margin: 0; font-size: 15.5px; font-weight: 600; }
.db-pl-faq p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.db-pl-faq a { color: var(--ink) !important; }

@media (max-width: 1020px) {
  .db-plans, .db-pl-faq { grid-template-columns: 1fr; }
  .db-plans { max-width: 520px; margin-left: auto; margin-right: auto; }
  .db-course-hero { flex-direction: column; gap: 28px; padding: 28px; }
  .db-course-hero .db-folder-lg { width: 140px; }
}
@media (max-width: 720px) {
  .db-lib { grid-template-columns: 1fr; }
  .db-u-row { grid-template-columns: 34px minmax(0, 1fr); }
  .db-u-st { grid-column: 2; }
  .db-filters { overflow-x: auto; max-width: 100%; }
}
.db-shelf-head { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 14px; row-gap: 6px; margin-bottom: 22px; }
.db-shelf-head h2 { margin: 0; font: 500 26px/1.15 var(--sans); letter-spacing: -0.03em; color: #232220; }
.db-shelf-count { font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.db-shelf-head p { grid-column: 1 / -1; margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ---------- logbook strip: today, streak, this week, workbench ---------- */
.lg { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 20px; background: var(--paper); box-shadow: var(--lift-1), 0 0 0 1px rgba(29, 28, 26, .05); }
.lg-cell { display: flex; align-items: center; gap: 16px; padding: 20px 22px; min-width: 0; }
.lg-cell + .lg-cell { border-left: 1px solid rgba(29, 28, 26, .07); }
.lg-cell > div { display: flex; flex-direction: column; min-width: 0; }
.lg-cell b { font: 500 19px/1.2 var(--sans); letter-spacing: -0.02em; color: #232220; white-space: nowrap; }
.lg-cell span { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.lg-cell > div > span:not(.lg-dots) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* today's ring */
.lg-ring { width: 48px; height: 48px; flex: none; transform: rotate(-90deg); }
.lg-ring circle { fill: none; stroke: rgba(29, 28, 26, .08); stroke-width: 5; }
.lg-ring circle.v { stroke: var(--orange); stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease); }
.lg-ring.met circle.v { stroke: var(--green); }
.lg-ring .tick { fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transform-origin: 24px 24px; }

/* the lamp: lit once you've worked today */
.lg-lamp { width: 40px; height: 48px; flex: none; }
.lg-lamp .body { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.lg-lamp .band { stroke: var(--ink); stroke-width: 1.4; }
.lg-lamp .cap { fill: var(--ink); }
.lg-lamp .room { fill: #CFCAC1; stroke: var(--ink); stroke-width: 1.6; }
.lg-lamp .glow path { stroke: var(--orange); stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
.lg-lamp.lit .room { fill: var(--orange); }
.lg-lamp.lit .glow path { opacity: 1; animation: lgGlow 2.6s ease-in-out infinite; }
@keyframes lgGlow { 50% { opacity: .35; } }
.lg-dots { display: flex; gap: 4px; margin-top: 6px; }
.lg-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(29, 28, 26, .10); }
.lg-dots i.on { background: var(--ink); }
.lg-dots i.today:not(.on) { box-shadow: inset 0 0 0 1.5px var(--ink); background: none; }
.lg-dots i.future { background: rgba(29, 28, 26, .05); }

/* this week's sparkline */
.lg-spark { display: flex; align-items: flex-end; gap: 4px; height: 40px; flex: none; }
.lg-spark i { position: relative; width: 6px; height: 100%; border-radius: 3px; background: rgba(29, 28, 26, .06); overflow: hidden; }
.lg-spark i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); border-radius: 3px; background: #BDB7AC; }
.lg-spark i.today::after { background: var(--ink); }

/* workbench: a little stack of part tags */
.lg-parts { position: relative; width: 40px; height: 40px; flex: none; }
.lg-parts i { position: absolute; left: 4px; width: 30px; height: 20px; border-radius: 5px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.lg-parts i::before { content: ""; position: absolute; left: 5px; top: 7px; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); }
.lg-parts i:nth-child(1) { top: 2px; transform: rotate(-8deg); background: #F2DCCB; }
.lg-parts i:nth-child(2) { top: 10px; transform: rotate(4deg); background: #D9DDE8; }
.lg-parts i:nth-child(3) { top: 18px; transform: rotate(-2deg); }

@media (max-width: 1020px) {
  .lg { grid-template-columns: 1fr 1fr; }
  .lg-cell:nth-child(3) { border-left: 0; }
  .lg-cell:nth-child(n+3) { border-top: 1px solid rgba(29, 28, 26, .07); }
}
@media (max-width: 560px) {
  .lg { grid-template-columns: 1fr; }
  .lg-cell + .lg-cell { border-left: 0; border-top: 1px solid rgba(29, 28, 26, .07); }
}
@media (prefers-reduced-motion: reduce) { .lg-lamp.lit .glow path { animation: none; } }

/* ---------- welcome story (first visit) ---------- */
.wl {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 560px; overflow: hidden;
  border-radius: 28px; background: var(--paper); box-shadow: var(--lift-2), 0 0 0 1px rgba(29, 28, 26, .06);
}
.wl-art { display: grid; place-items: center; padding: 36px; background: #F1E8DD; box-shadow: inset -1px 0 0 rgba(29, 28, 26, .06); }
.wl-art svg { width: 100%; max-width: 540px; height: auto; display: block; }
.wl-text { display: flex; flex-direction: column; padding: 44px 52px 40px; }
.wl-top { display: flex; justify-content: space-between; align-items: center; }
.wl-count { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wl-skip { border: 0; background: none; padding: 4px 0; font: 500 13.5px var(--sans); color: var(--ink-2); cursor: pointer; }
.wl-skip:hover { color: var(--ink); text-decoration: underline; }
.wl-title { margin: auto 0 0; padding-top: 32px; font: 500 clamp(34px, 3.6vw, 50px)/1.02 var(--sans); letter-spacing: -0.045em; color: #232220; text-wrap: balance; }
.wl-text p { margin: 16px 0 0; max-width: 40ch; font-size: 17.5px; line-height: 1.55; color: var(--ink-2); }
.wl-text p + p { margin-top: 12px; }
.wl-text .wl-note { padding: 12px 14px; border-radius: 12px; background: var(--page); font-size: 14.5px; color: var(--ink); }
.wl-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: auto; padding-top: 36px; }
.wl-steps { display: flex; gap: 6px; }
.wl-steps i { width: 26px; height: 4px; border-radius: 2px; background: rgba(29, 28, 26, .10); transition: background-color .2s var(--ease); }
.wl-steps i.on { background: var(--ink); }
.wl-keys { display: flex; align-items: center; gap: 10px; }
.wl-back { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 12px; cursor: pointer; background: linear-gradient(#F7F5F0, #E9E6DF); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(60, 48, 30, .14); }
.wl-back svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wl-back:active, .wl-next:active { transform: translateY(2px); }
.wl-next {
  display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 22px; white-space: nowrap; border: 0; border-radius: 12px; cursor: pointer;
  font: 500 15.5px var(--sans); color: #F6F3EC !important; text-decoration: none; background: linear-gradient(#3A3936, #262523);
  box-shadow: inset 0 -3px 0 #171614, inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .18), 0 6px 14px rgba(0, 0, 0, .14);
}
.wl-next:hover { filter: brightness(1.1); }
.wl-next kbd { font: 12px var(--sans); color: rgba(246, 243, 236, .55); }
.db-replay { display: inline-block; margin-top: 14px; border: 0; background: none; padding: 0; font: 500 13.5px var(--sans); color: var(--ink-2); cursor: pointer; }
.db-replay:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 1020px) {
  .wl { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .wl-art { padding: 24px; box-shadow: inset 0 -1px 0 rgba(29, 28, 26, .06); }
  .wl-text { padding: 28px 26px 26px; }
  .wl-title { margin-top: 0; padding-top: 18px; }
}
@media (max-width: 560px) {
  .wl-steps i { width: 14px; }
  .wl-next { padding: 0 18px; }
  .wl-next kbd { display: none; }
}

/* ---------- plans: the landing page's four cards ---------- */
.pc { max-width: 1160px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pc-card { position: relative; display: flex; flex-direction: column; padding: 58px 26px 26px; border-radius: 24px; background: var(--paper); box-shadow: var(--lift-1), 0 0 0 1px rgba(29, 28, 26, .06); overflow: hidden; }
.pc-card h3 { margin: 0; font: 500 21px/1.2 var(--sans); letter-spacing: -0.02em; }
.pc-for { margin: 8px 0 0; min-height: 3em; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.pc-price { display: flex; align-items: baseline; gap: 8px; margin-top: 26px; }
.pc-price b { font: 500 44px/1 var(--sans); letter-spacing: -0.05em; color: #232220; }
.pc-price span { font-size: 14.5px; color: var(--ink-2); }
.pc-bill { margin: 10px 0 26px; min-height: 2.9em; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.pc-go { margin-top: auto; width: 100%; justify-content: center; }
.pc-current { margin-top: auto; display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 12px; font-weight: 500; color: var(--ink-2); background: rgba(29, 28, 26, .05); }
.pc-best { box-shadow: var(--lift-3), 0 0 0 2px var(--ink); }
.pc-flag { position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: 8px 0; text-align: center; font: 600 12.5px var(--sans); color: var(--paper); background: var(--ink); }
.pc-life { color: #F3EEE3; background: radial-gradient(130% 90% at 15% 0%, #2A3A5E 0%, #16223B 55%, #0F1A30 100%); }
.pc-life h3 { font: italic 400 23px/1.2 var(--serif); color: #E4C68F; }
.pc-life .pc-for { color: rgba(243, 238, 227, .72); }
.pc-life .pc-price b { color: #F3EEE3; font-family: var(--serif); font-weight: 330; font-variation-settings: "opsz" 144; }
.pc-life .pc-price span, .pc-life .pc-bill { color: rgba(243, 238, 227, .6); }
.pc-life .db-btn { color: var(--ink); background: linear-gradient(#F7F5F0, #E9E6DF); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .9); }
.pc-life .pc-current { color: #F3EEE3; background: rgba(255, 255, 255, .1); }
.pc-all { max-width: 1160px; margin: 16px auto 0; padding: 26px 30px; border-radius: 24px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.pc-all-h { margin: 0 0 16px; font-size: 15px; font-weight: 600; }
.pc-all ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.pc-all li { display: flex; gap: 10px; }
.pc-all svg { width: 16px; height: 16px; flex: none; margin-top: 3px; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-all b { display: block; font-size: 14.5px; font-weight: 600; }
.pc-all li span { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.pc-fine { max-width: 700px; margin: 22px auto 0; text-align: center; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.db-page-head .db-pl-soon { margin-top: 12px; }
@media (max-width: 1080px) { .pc, .pc-all ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pc, .pc-all ul { grid-template-columns: 1fr; } .pc-best { order: -1; } .pc-for, .pc-bill { min-height: 0; } }

/* ---------- course page, v2 ---------- */
.db-ch-status { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.db-ch-status .db-lock { width: 13px; height: 13px; }
.db-ch-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(29, 28, 26, .10); }
.db-ch-facts li { font-size: 15px; color: var(--ink-2); }
.db-ch-facts b { font: 500 20px/1 var(--sans); letter-spacing: -0.02em; color: var(--ink); margin-right: 2px; }
.db-ch-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; max-width: 56ch; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.db-ch-note svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--green); }
.db-ch-about { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.db-ch-about > div { padding: 22px 26px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.db-ch-about h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.db-ch-about p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
@media (max-width: 720px) { .db-ch-about { grid-template-columns: 1fr; } }