/* ============================================================================
   STARK — app.css
   "The Bench" — warm materials, precise instruments. Brass, patina, ink.
   ============================================================================ */

/* ==========================================================================
   §1  TOKENS
   ========================================================================== */
:root{
  --space:       #14120F;
  --deck:        #1C1A16;
  --deck-2:      #252118;
  --hull:        #322C20;

  --chalk:       #EDE4D2;
  --chalk-dim:   #A69C88;
  --chalk-faint: #6E6656;

  --line:        rgba(200,170,120,.10);
  --line-firm:   rgba(200,170,120,.20);
  --line-strong: rgba(200,170,120,.32);

  --brass:        #C9A24A;
  --brass-lit:    #E8BC6A;
  --brass-deep:   #8A6A2E;
  --brass-wash:   rgba(201,162,74,.10);
  --brass-fill:   rgba(201,162,74,.12);
  --brass-glow:   rgba(201,162,74,.35);

  --patina:       #7DA5B8;
  --patina-deep:  #4F7A8F;
  --patina-wash:  rgba(125,165,184,.10);
  --patina-glow:  rgba(125,165,184,.30);

  --verdigris:      #6FA093;
  --verdigris-deep: #4E7A70;
  --verdigris-wash: rgba(111,160,147,.12);
  --ember:          #C25D42;
  --ember-wash:     rgba(194,93,66,.10);

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  --r:3px;
  --r-lg:6px;

  --bar-h:56px;

  --fast:.15s ease;
  --slow:.35s cubic-bezier(.2,.7,.2,1);
}

/* ==========================================================================
   §2  RESET + BACKGROUND
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  color:var(--chalk);
  font-family:var(--body);
  font-size:14.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;

  background:
    radial-gradient(1100px 620px at 50% -140px, rgba(232,188,106,.09), transparent 66%),
    linear-gradient(180deg, rgba(201,162,74,.02) 0%, transparent 42%),
    linear-gradient(to right, rgba(200,170,120,.032) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to bottom, rgba(200,170,120,.032) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--space);
  background-attachment:fixed;
}
h1,h2,h3,h4,p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
img{display:block;max-width:100%;}
::selection{background:var(--brass);color:var(--space);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--hull);border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:var(--brass-deep);}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:var(--r);}

.skip{
  position:absolute;left:-9999px;top:0;z-index:500;
  background:var(--brass);color:var(--space);
  padding:12px 20px;
  font-family:var(--mono);font-size:12px;font-weight:500;
}
.skip:focus{left:0;}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

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

/* ==========================================================================
   §3  TYPOGRAPHY
   ========================================================================== */
.display{
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:'SOFT' 30, 'WONK' 0, 'opsz' 24;
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--chalk);
}
.num{
  font-family:var(--mono);
  font-weight:400;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.label{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--chalk-faint);
  display:inline-flex;align-items:center;gap:6px;
}
.label::before{
  content:'';width:4px;height:4px;border-radius:50%;
  background:var(--brass);opacity:.75;
}
.prose{
  font-size:14px;line-height:1.7;color:var(--chalk-dim);
  max-width:62ch;
}
.t-hero{font-size:clamp(30px,5.5vw,48px);}
.t-xl{font-size:26px;}
.t-lg{font-size:17px;}
.t-sm{font-size:13px;line-height:1.6;}

.mute{color:var(--chalk-faint);}
.dim{color:var(--chalk-dim);}
.on-mark{color:var(--brass);}
.on-live{color:var(--brass-lit);}
.on-gold{color:var(--brass);}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.clamp2{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.grow{flex:1;min-width:0;}
.cluster{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;}
.stack > * + *{margin-top:var(--s4);}

kbd{
  font-family:var(--mono);font-size:10px;
  padding:2px 6px;border-radius:2px;
  background:var(--deck);
  color:var(--chalk-dim);
  border:1px solid var(--line-firm);
}
.keys{display:flex;align-items:center;gap:var(--s2);}

/* ==========================================================================
   §4  ICONS
   ========================================================================== */
.i{
  font-family:'Material Symbols Outlined';
  font-weight:400;font-style:normal;
  font-size:20px;line-height:1;
  letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;
  word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
  flex:none;
  color:inherit;
}
.i-sm{font-size:16px;}
.i-lg{font-size:28px;}
html:not(.icons-ok) .i{visibility:hidden;}

/* ==========================================================================
   §5  CHROME
   ========================================================================== */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(20,18,15,.82);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.topbar::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,162,74,.45) 50%, transparent);
}
.topbar-in{
  max-width:1400px;margin:0 auto;
  height:var(--bar-h);
  padding:0 var(--s5);
  display:flex;align-items:center;gap:var(--s5);
}
.brand{
  display:flex;align-items:center;gap:var(--s2);
  flex:none;
  font-family:var(--display);font-weight:700;
  font-size:15px;letter-spacing:.16em;
  color:var(--chalk);
}
.brand-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--brass);
  box-shadow:0 0 12px var(--brass-glow);
  animation:pulse 3s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;box-shadow:0 0 12px var(--brass-glow);}
  50%    {opacity:.55;box-shadow:0 0 4px var(--brass-glow);}
}

.topnav{display:none;gap:var(--s1);flex:1;}
@media(min-width:720px){ .topnav{display:flex;} }
.topnav a{
  position:relative;
  padding:6px 12px;border-radius:var(--r);
  font-size:12.5px;font-weight:500;
  color:var(--chalk-dim);
  transition:var(--fast);
}
.topnav a:hover{color:var(--chalk);background:var(--deck-2);}
.topnav a[aria-current="page"]{color:var(--chalk);}
.topnav a[aria-current="page"]::after{
  content:'';position:absolute;
  left:12px;right:12px;bottom:-1px;height:1px;
  background:var(--brass);
}

.topbar-end{
  margin-left:auto;
  display:flex;align-items:center;gap:var(--s3);
  font-family:var(--mono);font-size:11px;
  color:var(--chalk-faint);
}

.botnav{
  position:fixed;inset:auto 0 0 0;z-index:60;
  display:flex;
  background:rgba(28,26,22,.94);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
@media(min-width:720px){ .botnav{display:none;} }
.botnav a{
  flex:1;
  min-height:60px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:3px;
  font-size:10.5px;font-weight:500;
  color:var(--chalk-faint);
  transition:var(--fast);
}
.botnav a[aria-current="page"]{color:var(--brass);}
.botnav .i{font-size:20px;}

/* ==========================================================================
   §6  SHELL
   ========================================================================== */
.shell{
  max-width:1400px;
  margin:0 auto;
  padding:var(--s5) var(--s5) var(--s7);
}
@media(max-width:600px){
  .shell{padding:var(--s4) var(--s4) calc(var(--s7) + 60px);}
}

/* ==========================================================================
   §7  BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:36px;padding:0 14px;
  border-radius:var(--r);
  font-family:var(--body);font-size:13px;font-weight:500;
  white-space:nowrap;
  transition:var(--fast);
  border:1px solid transparent;
  letter-spacing:-.005em;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  background:var(--brass);color:var(--space);font-weight:600;
  box-shadow:0 0 0 0 var(--brass-glow), 0 1px 2px rgba(0,0,0,.4);
}
.btn-primary:hover{
  background:var(--brass-lit);
  box-shadow:0 0 0 3px var(--brass-wash), 0 1px 2px rgba(0,0,0,.4);
}
.btn-ghost{border-color:var(--line-firm);color:var(--chalk);background:var(--deck);}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass);}
.btn-quiet{color:var(--chalk-dim);}
.btn-quiet:hover{background:var(--deck-2);color:var(--chalk);}
.btn-strike{border-color:var(--ember);color:var(--ember);}
.btn-strike:hover{background:var(--ember);color:var(--space);}
.btn-done{background:var(--verdigris-wash);border-color:rgba(111,160,147,.42);color:var(--verdigris);}
.btn-icon{width:36px;padding:0;flex:none;}
.btn[disabled]{opacity:.35;pointer-events:none;}
.btn .i{font-size:16px;}

/* ==========================================================================
   §8  FORMS
   ========================================================================== */
.field{display:block;margin-bottom:var(--s4);}
.field > .label{display:block;margin-bottom:var(--s2);}
.input{
  width:100%;
  background:var(--deck);
  border:1px solid var(--line-firm);
  border-radius:var(--r);
  padding:10px 12px;
  font-size:14px;
  color:var(--chalk);
  min-height:40px;
  transition:var(--fast);
}
.input:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-wash);}
.input::placeholder{color:var(--chalk-faint);}
textarea.input{min-height:80px;resize:vertical;font-family:var(--body);}

.swatches{display:flex;flex-wrap:wrap;gap:6px;}
.swatch{
  width:32px;height:32px;border-radius:var(--r);
  border:2px solid transparent;
  transition:var(--fast);
  position:relative;
}
.swatch[aria-pressed="true"]{border-color:var(--brass);}
.swatch:hover{border-color:var(--line-firm);}

.search{position:relative;}
.search .input{padding-left:38px;}
.search-ico{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--chalk-faint);pointer-events:none;
}

/* ==========================================================================
   §9  CHIPS
   ========================================================================== */
.chipbar{display:flex;flex-wrap:wrap;gap:6px;}
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;
  border-radius:99px;
  border:1px solid var(--line-firm);
  background:transparent;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  color:var(--chalk-dim);
  transition:var(--fast);
  letter-spacing:.02em;
}
.chip:hover{border-color:var(--brass);color:var(--brass);}
.chip[aria-pressed="true"]{background:var(--brass-wash);border-color:var(--brass);color:var(--brass-lit);}
.chip .i{font-size:13px;}

/* ==========================================================================
   §10  LEDGER ROWS
   ========================================================================== */
.ledger{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--deck);
}
.row{
  position:relative;
  display:flex;align-items:center;gap:var(--s3);
  width:100%;min-height:56px;
  padding:10px 14px;
  border:0;background:transparent;
  text-align:left;
  font-family:var(--body);
  transition:background .12s;
  overflow:hidden;
}
button.row{cursor:pointer;}
a.row{color:inherit;}
.row + .row{border-top:1px solid var(--line);}
button.row:hover, a.row:hover{background:var(--deck-2);}
.row.is-done .row-title{color:var(--chalk-faint);}

.fill{
  position:absolute;
  left:0;bottom:0;top:0;
  width:0;
  background:linear-gradient(90deg, var(--brass-fill), transparent);
  transition:width .8s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
  z-index:0;
}
.row.is-done .fill{background:linear-gradient(90deg, var(--verdigris-wash), transparent);}
.row > *{position:relative;z-index:1;}

.row-idx{
  width:32px;height:32px;flex:none;
  border-radius:var(--r);
  border:1px solid var(--line-firm);
  display:grid;place-items:center;
  font-family:var(--mono);font-size:11.5px;
  color:var(--chalk-dim);
  background:var(--space);
}
.row.is-done .row-idx{border-color:var(--verdigris);color:var(--verdigris);background:var(--verdigris-wash);}
.row-idx .i{font-size:14px;}

.row-body{flex:1;min-width:0;}
.row-title{font-size:14px;font-weight:500;color:var(--chalk);line-height:1.35;letter-spacing:-.005em;}
.row-meta{font-family:var(--mono);font-size:10.5px;color:var(--chalk-faint);margin-top:2px;display:block;letter-spacing:.02em;}
.row-end{display:flex;align-items:center;gap:var(--s3);flex:none;}
.row-pct{font-family:var(--mono);font-size:12px;color:var(--brass);font-variant-numeric:tabular-nums;font-weight:500;}
.row-end .i{color:var(--chalk-faint);}
.row.is-done .row-end .i{color:var(--verdigris);}
.row.is-done .row-pct{color:var(--verdigris);}
.row-dot{width:8px;height:8px;border-radius:50%;flex:none;}

.measure{
  position:relative;height:2px;
  background:var(--line);
  border-radius:99px;overflow:hidden;
}
.measure .fill{top:0;height:100%;background:var(--brass);box-shadow:0 0 8px var(--brass-glow);}

/* ==========================================================================
   §11  PANELS
   ========================================================================== */
.panel{background:var(--deck);border:1px solid var(--line);border-radius:var(--r-lg);}
.panel-pad{padding:var(--s5);}
.panel-head{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line);
}
.panel-head h2,.panel-head h3{
  font-family:var(--display);font-weight:600;
  font-size:14px;letter-spacing:-.01em;
  flex:1;min-width:0;text-transform:uppercase;
}

/* ==========================================================================
   §12  HEADS
   ========================================================================== */
.head{margin-bottom:var(--s5);}
.head-top{display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap;}
.head-top .grow{min-width:0;}
.head .label{display:block;margin-bottom:6px;}
.head h1{margin-top:2px;}

/* ==========================================================================
   §13  EMPTY
   ========================================================================== */
.empty{padding:var(--s8) var(--s5);text-align:center;color:var(--chalk-faint);}
.empty .i{color:var(--chalk-faint);margin-bottom:var(--s3);display:inline-block;}
.empty p{font-size:13.5px;}

/* ==========================================================================
   §14  TOAST
   ========================================================================== */
.toast{
  position:fixed;left:50%;bottom:var(--s5);z-index:400;
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:var(--s2);
  background:var(--deck-2);color:var(--chalk);
  border:1px solid var(--brass);
  padding:10px 16px;border-radius:var(--r);
  font-family:var(--mono);font-size:12px;
  box-shadow:0 0 0 1px rgba(201,162,74,.1), 0 12px 40px rgba(0,0,0,.7), 0 0 32px var(--brass-wash);
  transition:opacity .2s,transform .2s;
  max-width:calc(100vw - 32px);
}
.toast.show{opacity:1;transform:translate(-50%,0);}
.toast .i{font-size:16px;color:var(--brass);}
@media(max-width:720px){ .toast{bottom:calc(76px + env(safe-area-inset-bottom));} }

/* ==========================================================================
   §15  MODAL
   ========================================================================== */
.veil{
  position:fixed;inset:0;z-index:200;
  background:rgba(8,6,4,.75);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;
  padding:var(--s4);
}
.veil.open{display:flex;}
.sheet{
  width:100%;max-width:520px;
  max-height:88vh;overflow-y:auto;
  background:var(--deck);
  border:1px solid var(--line-firm);
  border-radius:var(--r-lg);
  padding:var(--s5);
  box-shadow:0 24px 64px rgba(0,0,0,.75), 0 0 0 1px rgba(201,162,74,.08);
  position:relative;
}
.sheet::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--brass) 50%, transparent);
  opacity:.7;
}
.sheet-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);
  margin-bottom:var(--s5);padding-bottom:var(--s4);
  border-bottom:1px solid var(--line);
}
.sheet-head h2{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em;}
.sheet-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);
  margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid var(--line);
}

/* ==========================================================================
   §16  HOME
   ========================================================================== */
.hero{
  padding:var(--s7) 0 var(--s6);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--s7);
  position:relative;
}
.hero h1{margin-top:var(--s3);}
.hero-lede{
  font-family:var(--display);font-weight:400;
  font-variation-settings:'SOFT' 60, 'WONK' 1, 'opsz' 24;
  font-size:18px;line-height:1.55;color:var(--chalk-dim);
  margin-top:var(--s4);max-width:56ch;
}
.hero-measure{margin-top:var(--s5);max-width:480px;}

.resume{
  display:flex;align-items:center;gap:var(--s4);
  margin-top:var(--s6);
  padding:var(--s4) var(--s5);
  border:1px solid var(--line-firm);
  border-radius:var(--r-lg);
  background:var(--deck);
  transition:var(--fast);
  max-width:560px;
  position:relative;
}
.resume::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--brass);box-shadow:0 0 12px var(--brass-glow);
}
.resume:hover{
  border-color:var(--brass);background:var(--deck-2);
  box-shadow:0 0 0 3px var(--brass-wash);
}
.resume-play{
  width:44px;height:44px;flex:none;
  border-radius:50%;background:transparent;
  border:1.5px solid var(--brass);color:var(--brass);
  display:grid;place-items:center;
  box-shadow:0 0 20px rgba(201,162,74,.2) inset;
}
.resume-play .i{font-size:20px;}
.resume-body{flex:1;min-width:0;}
.resume .i.mute{color:var(--brass);}

.figures{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  margin-top:var(--s6);
}
@media(min-width:720px){ .figures{grid-template-columns:repeat(4,1fr);} }
.figure{padding:var(--s5) var(--s4);background:var(--deck);position:relative;}
.figure::before{
  content:'';position:absolute;left:0;top:0;width:24px;height:1px;
  background:var(--brass);
}
.num-lg{
  font-family:var(--mono);font-weight:500;
  font-size:38px;line-height:1;letter-spacing:-.04em;
  color:var(--chalk);font-variant-numeric:tabular-nums;
}
.figure-cap{
  font-family:var(--mono);font-size:10px;
  color:var(--chalk-faint);margin-top:8px;
  letter-spacing:.14em;text-transform:uppercase;
}
.num-lg.on-mark{color:var(--brass);}

.halls{display:grid;grid-template-columns:1fr;gap:var(--s6);}
@media(min-width:900px){ .halls{grid-template-columns:1fr 1fr;} }

.hall{padding:0;}
.hall-head{
  display:flex;align-items:baseline;gap:var(--s3);
  margin-bottom:var(--s3);padding-bottom:var(--s2);
  border-bottom:1px solid var(--line);
}
.hall-head h2{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em;}
.hall-head .num{margin-left:auto;color:var(--brass);font-size:11.5px;}
.hall-list{margin-top:var(--s4);}
.hall-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);margin-top:var(--s4);
}
.hall-foot .num{color:var(--chalk-faint);font-size:11px;}

.row.no-idx .row-title{font-weight:500;}
.row.no-idx{padding-left:14px;}

/* ==========================================================================
   §17  LIBRARY — compact cover grid
   ========================================================================== */
.shelf{margin-bottom:var(--s5);}

.shelf-head{
  display:flex;align-items:center;gap:var(--s3);
  margin-bottom:var(--s3);
  padding-bottom:6px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.shelf-head .fill{
  position:absolute;left:0;bottom:-1px;top:auto;height:2px;
  background:var(--brass);box-shadow:0 0 8px var(--brass-glow);
}
.shelf-dot{width:9px;height:9px;border-radius:2px;flex:none;}
.shelf-head h2{
  font-family:var(--display);font-weight:600;
  font-size:15px;letter-spacing:-.01em;
}
.shelf-head .num{font-size:11px;color:var(--chalk-faint);letter-spacing:.02em;}

.books{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:14px 10px;
  align-items:start;
}
@media(min-width:900px){
  .books{
    grid-template-columns:repeat(auto-fill, 116px);
    justify-content:start;
    gap:16px 12px;
  }
}

.book{
  display:flex;flex-direction:column;
  gap:5px;
  text-align:left;
  transition:transform .15s;
  min-width:0;
}
.book:hover{transform:translateY(-2px);}

.cover{
  position:relative;
  display:block;
  aspect-ratio:2/3;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--deck-2);
  border:1px solid var(--line);
  box-shadow:0 4px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(237,228,210,.04);
  transition:border-color .15s, box-shadow .15s;
}
.book:hover .cover{
  border-color:var(--brass);
  box-shadow:0 6px 18px rgba(0,0,0,.55), 0 0 16px rgba(201,162,74,.18), inset 0 1px 0 rgba(237,228,210,.05);
}
.cover-edge{
  position:absolute;
  left:0;top:0;bottom:0;width:3px;
}
.cover-letter{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:700;
  font-size:30px;color:rgba(237,228,210,.10);
  text-transform:uppercase;
  letter-spacing:-.04em;
}
.cover img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
.cover-state{
  position:absolute;top:4px;right:4px;
  width:18px;height:18px;border-radius:50%;
  background:rgba(20,18,15,.85);
  backdrop-filter:blur(4px);
  display:grid;place-items:center;
  color:var(--brass);
  z-index:2;
  border:1px solid var(--line-firm);
}
.cover-state .i{font-size:11px;}
.cover-state.is-reading{color:var(--brass);border-color:rgba(201,162,74,.4);}
.cover-state.is-done{color:var(--verdigris);border-color:rgba(111,160,147,.4);}

.book-title{
  font-size:11.5px;font-weight:500;line-height:1.3;
  color:var(--chalk);letter-spacing:-.005em;
  overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.book-author{
  font-family:var(--mono);font-size:9.5px;
  color:var(--chalk-faint);
  line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ==========================================================================
   §18  LEARNING — TRAIL TIMELINE
   ========================================================================== */
.work{
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:var(--s6);
  align-items:start;
  max-width:1400px;
  margin:0 auto;
  padding:var(--s6) var(--s5) var(--s7);
}
@media(max-width:900px){
  .work{grid-template-columns:1fr;gap:var(--s5);padding:var(--s5) var(--s4) calc(var(--s7) + 60px);}
}

.trail{
  position:sticky;
  top:calc(var(--bar-h) + var(--s4));
  max-height:calc(100vh - var(--bar-h) - var(--s7));
  overflow-y:auto;
  padding-right:var(--s2);
  scrollbar-width:thin;
  scrollbar-color:var(--hull) transparent;
}
.trail::-webkit-scrollbar{width:6px;}
.trail::-webkit-scrollbar-thumb{background:var(--hull);border-radius:3px;}
@media(max-width:900px){ .trail{position:static;max-height:none;padding-right:0;} }

.trail-head{margin-bottom:var(--s5);padding-bottom:var(--s4);border-bottom:1px solid var(--line);}
.trail-eyebrow{
  font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-faint);letter-spacing:.08em;
  text-transform:uppercase;
  display:flex;align-items:center;gap:6px;
}
.trail-eyebrow .i{color:var(--brass);}
.trail-name{
  font-family:var(--display);font-weight:700;
  font-size:22px;letter-spacing:-.025em;line-height:1.15;
  color:var(--chalk);
  margin-top:8px;
  font-variation-settings:'SOFT' 30, 'WONK' 0, 'opsz' 30;
}

.trail-voice{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-variation-settings:'SOFT' 70, 'WONK' 1, 'opsz' 14;
  font-size:14px;line-height:1.6;
  color:var(--chalk-dim);
  margin-top:var(--s4);
  padding:10px 14px;
  background:var(--deck);
  border:1px solid var(--line);
  border-left:2px solid var(--brass);
  border-radius:var(--r);
  letter-spacing:.005em;
  position:relative;
}
.trail-voice::before{
  content:'';position:absolute;left:-2px;top:0;bottom:0;width:2px;
  background:var(--brass);box-shadow:0 0 12px var(--brass-glow);
}

.trail-actions{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);margin-top:var(--s4);
}
.trail-change{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-faint);
  background:none;border:0;padding:0;cursor:pointer;
  letter-spacing:.08em;text-transform:uppercase;
  transition:var(--fast);
}
.trail-change:hover{color:var(--brass);}
.trail-change .i{font-size:13px;}

.trail-focus{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-faint);
  background:none;border:0;padding:0;cursor:pointer;
  letter-spacing:.08em;text-transform:uppercase;
  transition:var(--fast);
}
.trail-focus:hover{color:var(--brass);}
.trail-focus[aria-pressed="true"]{color:var(--brass);}
.trail-focus::before{
  content:'';width:7px;height:7px;border-radius:50%;
  border:1px solid currentColor;
  transition:var(--fast);flex:none;
}
.trail-focus[aria-pressed="true"]::before{
  background:currentColor;box-shadow:0 0 8px var(--brass-glow);
}

.trail-now{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border:1px solid var(--line-firm);
  border-left:2px solid var(--brass);
  border-radius:var(--r);
  background:var(--deck);
  margin-bottom:var(--s4);
  position:relative;
}
.trail-now::before{
  content:'';position:absolute;left:-2px;top:0;bottom:0;width:2px;
  background:var(--brass);box-shadow:0 0 12px var(--brass-glow);
}
.trail-now-icon{
  width:26px;height:26px;flex:none;border-radius:50%;
  border:1.5px solid var(--brass);
  display:grid;place-items:center;color:var(--brass);
}
.trail-now-icon .i{font-size:14px;}
.trail-now-body{flex:1;min-width:0;}
.trail-now-label{
  display:block;
  font-family:var(--mono);font-size:9.5px;
  color:var(--brass);letter-spacing:.14em;text-transform:uppercase;
}
.trail-now-name{
  display:block;
  font-family:var(--body);font-size:13px;font-weight:500;
  color:var(--chalk);
  margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:-.005em;
}

.trail-waypoints{
  display:flex;align-items:center;gap:2px;
  margin-bottom:var(--s5);
  padding:0;height:12px;
}
.trail-wp{flex:1;height:2px;background:var(--line);transition:background .3s;}
.trail-wp.is-done{background:var(--brass);box-shadow:0 0 6px var(--brass-glow);}
.trail-wp.is-current{
  background:linear-gradient(90deg,var(--brass) 0%,var(--brass) 50%,var(--line) 50%,var(--line) 100%);
}
.trail-wp.is-current.zero{background:var(--line);position:relative;overflow:hidden;}
.trail-wp.is-current.zero::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:40%;background:var(--brass);
}

.trail-chapters{position:relative;display:flex;flex-direction:column;padding-left:18px;}
.trail-chapters::before{
  content:'';position:absolute;left:5px;top:14px;bottom:14px;width:1px;
  background:var(--line);
}

.trail-ch{
  position:relative;
  display:flex;align-items:center;gap:10px;
  width:100%;padding:10px 8px 10px 4px;border:0;background:none;cursor:pointer;
  text-align:left;border-radius:var(--r);
  transition:background .12s;
  font-family:var(--body);
}
.trail-ch:hover{background:var(--deck);}
.trail-ch.is-current{background:var(--deck);}
.trail-ch.is-current::after{
  content:'';position:absolute;left:-14px;top:0;bottom:0;width:1px;
  background:var(--brass);box-shadow:0 0 12px var(--brass-glow);
}
.trail-ch.is-done .trail-ch-name{
  color:var(--chalk-faint);
  text-decoration:line-through;
  text-decoration-color:var(--line-firm);
  text-decoration-thickness:1px;
}
.trail-ch-marker{
  position:absolute;
  left:-18px;top:50%;transform:translate(-50%,-50%);
  width:11px;height:11px;flex:none;border-radius:50%;
  border:1.5px solid var(--line-firm);
  background:var(--space);z-index:1;
  transition:border-color .15s, background .15s;
}
.trail-ch.is-done .trail-ch-marker{background:var(--verdigris);border-color:var(--verdigris);}
.trail-ch.is-current .trail-ch-marker{
  border-color:var(--brass);background:var(--brass-wash);
  box-shadow:0 0 12px var(--brass-glow);
}
.trail-ch.is-current .trail-ch-marker::after{
  content:'';position:absolute;inset:2px;border-radius:50%;background:var(--brass);
}
.trail-ch-name{
  flex:1;min-width:0;
  font-size:13.5px;font-weight:500;
  color:var(--chalk);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:-.005em;
}
.trail-ch-count{
  font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-faint);flex:none;letter-spacing:.02em;
}
.trail-ch.is-current .trail-ch-count{color:var(--brass);}
.trail-ch.is-done .trail-ch-count{color:var(--verdigris);}

.trail-lessons{display:flex;flex-direction:column;margin:2px 0 8px 0;padding-left:2px;position:relative;}
.trail-ls{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;border:0;background:none;cursor:pointer;
  text-align:left;border-radius:var(--r);
  font-family:var(--body);
  transition:background .1s;position:relative;
}
.trail-ls::before{
  content:'';position:absolute;
  left:-14px;top:50%;transform:translate(-50%,-50%);
  width:4px;height:4px;border-radius:50%;
  background:var(--line-firm);
}
.trail-ls.is-done::before{background:var(--verdigris);}
.trail-ls.is-current::before{background:var(--brass);box-shadow:0 0 8px var(--brass-glow);}
.trail-ls:hover{background:var(--deck);}
.trail-ls.is-current{background:var(--deck);}
.trail-ls.is-current .trail-ls-num{color:var(--brass);}
.trail-ls.is-done .trail-ls-name{color:var(--chalk-faint);}
.trail-ls-num{
  font-family:var(--mono);font-size:10px;
  color:var(--chalk-faint);flex:none;letter-spacing:.05em;
  min-width:16px;
}
.trail-ls-name{
  flex:1;min-width:0;
  font-size:12.5px;color:var(--chalk-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:-.005em;
}
.trail-ls.is-current .trail-ls-name{color:var(--chalk);font-weight:500;}
.trail-ls.is-done .trail-ls-name{
  text-decoration:line-through;
  text-decoration-color:var(--line-firm);
  text-decoration-thickness:1px;
}
.trail-ls-check{
  width:12px;height:12px;flex:none;
  display:grid;place-items:center;
  color:var(--verdigris);opacity:0;
}
.trail-ls.is-done .trail-ls-check{opacity:1;}
.trail-ls-check .i{font-size:12px;}

.trail-recent{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);}
.trail-recent-label{
  font-family:var(--mono);font-size:10px;
  color:var(--chalk-faint);letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:var(--s3);
  display:flex;align-items:center;gap:6px;
}
.trail-recent-label::before{
  content:'';width:4px;height:4px;border-radius:50%;background:var(--brass);
}
.trail-rc{
  display:flex;align-items:baseline;gap:var(--s3);
  padding:5px 0;font-size:12.5px;line-height:1.4;
}
.trail-rc-date{
  font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-faint);flex:none;min-width:52px;
  letter-spacing:.02em;
}
.trail-rc-name{
  flex:1;min-width:0;color:var(--chalk-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:-.005em;
}

/* ==========================================================================
   §19  LEARNING — STAGE
   ========================================================================== */
.stage{min-width:0;}
.stage:focus{outline:none;}

.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-faint);
  margin-bottom:var(--s4);
  letter-spacing:.04em;
}
.crumb-link{
  padding:2px 6px;border-radius:2px;
  background:none;border:0;cursor:pointer;
  color:var(--chalk-faint);font:inherit;
  transition:var(--fast);letter-spacing:.04em;
}
.crumb-link:hover{color:var(--brass);background:var(--deck);}
.crumb-here{color:var(--chalk);}

.hero-card{
  border:1px solid var(--line-firm);
  border-radius:var(--r-lg);
  padding:var(--s7) var(--s6) var(--s6);
  background:
    radial-gradient(800px 320px at 100% 0%, rgba(201,162,74,.05), transparent 65%),
    var(--deck);
  position:relative;overflow:hidden;
}
.hero-card::before,
.hero-card::after{
  content:'';position:absolute;width:20px;height:20px;
  border:1px solid var(--brass);opacity:.75;
}
.hero-card::before{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.hero-card::after{bottom:-1px;right:-1px;border-left:0;border-top:0;}

.hero-eyebrow{
  font-family:var(--mono);font-size:10.5px;
  color:var(--brass);letter-spacing:.12em;
  text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.hero-eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--brass);
  box-shadow:0 0 10px var(--brass-glow);
  animation:pulse 2.4s ease-in-out infinite;
}
.hero-title{
  font-family:var(--display);font-weight:700;
  font-variation-settings:'SOFT' 30, 'WONK' 0, 'opsz' 60;
  font-size:clamp(30px,4.8vw,42px);
  letter-spacing:-.03em;line-height:1.05;
  color:var(--chalk);
  margin-top:var(--s4);
}
.hero-lesson{
  font-family:var(--display);font-weight:600;
  font-size:20px;letter-spacing:-.02em;
  color:var(--chalk);
  margin-top:var(--s6);
}
.hero-meta{
  font-family:var(--mono);font-size:11px;
  color:var(--chalk-faint);margin-top:8px;letter-spacing:.04em;
}
.hero-actions{display:flex;gap:var(--s3);margin-top:var(--s6);flex-wrap:wrap;}
.hero-note{
  font-size:13.5px;line-height:1.65;
  color:var(--chalk-dim);
  margin-top:var(--s4);max-width:52ch;
}
.hero-card.complete{
  background:radial-gradient(800px 320px at 100% 0%, rgba(111,160,147,.08), transparent 65%), var(--deck);
  border-color:rgba(111,160,147,.32);
}
.hero-card.complete::before,
.hero-card.complete::after{border-color:var(--verdigris);}
.hero-card.complete .hero-eyebrow{color:var(--verdigris);}
.hero-card.complete .hero-eyebrow::before{background:var(--verdigris);box-shadow:0 0 10px rgba(111,160,147,.5);}

.player-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:var(--s5);align-items:start;
}
@media(max-width:1100px){ .player-grid{grid-template-columns:1fr;gap:var(--s4);} }

.screen{
  width:100%;aspect-ratio:16/9;
  background:#000;
  border:1px solid var(--line-firm);
  border-radius:var(--r-lg);
  overflow:hidden;position:relative;
  box-shadow:0 0 0 1px rgba(201,162,74,.08), 0 20px 60px rgba(0,0,0,.65);
}
.screen::before,
.screen::after{
  content:'';position:absolute;width:24px;height:24px;
  border:1.5px solid var(--brass);z-index:3;
  pointer-events:none;opacity:.85;
}
.screen::before{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.screen::after{bottom:-1px;right:-1px;border-left:0;border-top:0;}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.screen-empty{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s3);color:var(--chalk-faint);
  font-family:var(--mono);font-size:11.5px;
}

.player-bar{
  display:flex;align-items:center;gap:var(--s3);
  justify-content:space-between;
  padding:var(--s4) 0 var(--s2);
  flex-wrap:wrap;
}
.player-bar-l{
  font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-faint);
  display:flex;flex-direction:column;gap:6px;letter-spacing:.04em;
}
.player-bar-r{display:flex;gap:var(--s2);flex-wrap:wrap;}

.player-notes{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line);}
.player-notes-head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s3);}
.player-notes-head h2{
  font-family:var(--display);font-weight:600;
  font-size:14px;letter-spacing:-.01em;
  color:var(--chalk);text-transform:uppercase;
}
.player-notes-head .num{color:var(--brass);font-size:11px;}
.player-notes-head .grow{flex:1;}
.player-notes-link{
  font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-faint);text-decoration:none;letter-spacing:.04em;
}
.player-notes-link:hover{color:var(--brass);}

.player-note-compose{
  display:flex;flex-direction:column;
  margin-bottom:var(--s4);
  border:1px solid var(--line-firm);
  border-radius:var(--r);background:var(--deck);
  transition:border-color .15s;
}
.player-note-compose:focus-within{border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-wash);}
.player-note-compose textarea{
  width:100%;border:0;background:transparent;resize:vertical;
  font:inherit;font-size:14px;line-height:1.6;color:var(--chalk);
  padding:var(--s3) var(--s3) var(--s2);
  min-height:44px;outline:none;
}
.player-note-compose textarea::placeholder{color:var(--chalk-faint);}
.player-note-foot{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3) var(--s3);}
.player-note-foot .num{color:var(--chalk-faint);font-size:10px;letter-spacing:.02em;}

.player-note-list{display:flex;flex-direction:column;gap:var(--s2);}
.player-note{
  display:flex;gap:var(--s3);
  padding:var(--s3);
  border:1px solid var(--line);
  border-radius:var(--r);background:var(--deck);
  position:relative;
}
.player-note.is-ai{
  border-color:rgba(125,165,184,.32);
  background:linear-gradient(180deg, rgba(125,165,184,.05), transparent), var(--deck);
}
.player-note.is-ai::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--patina);box-shadow:0 0 12px var(--patina-glow);
}
.player-note-time{
  font-family:var(--mono);font-size:10px;
  color:var(--chalk-faint);flex:none;min-width:66px;padding-top:2px;
  letter-spacing:.03em;
}
.player-note-body{
  flex:1;min-width:0;
  font-size:13px;line-height:1.6;color:var(--chalk-dim);
  white-space:pre-wrap;word-wrap:break-word;
}

.ask{
  display:flex;align-items:center;gap:var(--s2);
  margin-top:var(--s4);
  padding:var(--s2) var(--s2) var(--s2) var(--s3);
  border:1px solid rgba(125,165,184,.30);
  border-radius:var(--r);
  background:linear-gradient(90deg, rgba(125,165,184,.05), transparent 40%), var(--deck);
  transition:border-color .15s;
}
.ask:focus-within{border-color:var(--patina);box-shadow:0 0 0 3px var(--patina-wash);}
.ask .i{color:var(--patina);}
.ask input{
  flex:1;min-width:0;
  background:transparent;border:0;outline:none;
  color:var(--chalk);font:inherit;font-size:13px;
  padding:6px 4px;
}
.ask input::placeholder{color:var(--chalk-faint);}
.ask .btn-ghost{border-color:rgba(125,165,184,.42);color:var(--patina);}
.ask .btn-ghost:hover{background:var(--patina);color:var(--space);border-color:var(--patina);}

.trail-picker-head{margin-bottom:var(--s5);padding-bottom:var(--s4);border-bottom:1px solid var(--line);}
.trail-picker-active{font-size:13px;line-height:1.6;color:var(--chalk-dim);}
.trail-picker-active b{color:var(--chalk);font-weight:600;}

.trail-picker-group{margin-bottom:var(--s5);}
.trail-picker-group h3{
  font-family:var(--mono);font-size:10px;
  color:var(--chalk-faint);letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:var(--s3);padding-bottom:var(--s2);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:6px;
}
.trail-picker-group h3::before{
  content:'';width:4px;height:4px;border-radius:50%;background:var(--brass);
}

.trail-pick{
  display:flex;align-items:center;gap:var(--s3);
  width:100%;padding:var(--s3);
  border:1px solid transparent;background:none;cursor:pointer;
  text-align:left;border-radius:var(--r);
  transition:var(--fast);
}
.trail-pick:hover{background:var(--deck-2);border-color:var(--line);}
.trail-pick.is-active{
  background:var(--brass-wash);
  border-color:var(--brass);
  box-shadow:0 0 0 3px var(--brass-wash);
}
.trail-pick-body{flex:1;min-width:0;}
.trail-pick-name{
  display:block;font-family:var(--display);font-weight:600;
  font-size:14.5px;letter-spacing:-.01em;
  color:var(--chalk);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.trail-pick-meta{
  font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-faint);margin-top:4px;display:block;
  letter-spacing:.02em;
}
.trail-pick-mark{
  font-family:var(--mono);font-size:9.5px;
  color:var(--brass);letter-spacing:.12em;text-transform:uppercase;
  flex:none;
  display:flex;align-items:center;gap:5px;
}
.trail-pick-mark::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--brass);box-shadow:0 0 8px var(--brass-glow);
}

/* ==========================================================================
   §20  NOTES
   ========================================================================== */
.notes-head{display:flex;align-items:flex-start;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap;}
.notes-head .grow{min-width:0;}

.notes-filters{
  display:flex;flex-direction:column;gap:var(--s3);
  margin-bottom:var(--s6);padding-bottom:var(--s5);
  border-bottom:1px solid var(--line);
}

.notes-compose{
  background:var(--deck);
  border:1px solid var(--line-firm);
  border-radius:var(--r-lg);
  padding:var(--s3);
  margin-bottom:var(--s6);
  transition:var(--fast);
  position:relative;
}
.notes-compose::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--brass);box-shadow:0 0 12px var(--brass-glow);
  border-radius:var(--r-lg) 0 0 var(--r-lg);
  opacity:.75;
}
.notes-compose:focus-within{border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-wash);}
.notes-compose textarea{
  width:100%;border:0;background:transparent;resize:vertical;
  font:inherit;font-size:14.5px;line-height:1.65;color:var(--chalk);
  padding:var(--s2) var(--s2) 0 var(--s3);min-height:56px;outline:none;
}
.notes-compose textarea::placeholder{color:var(--chalk-faint);}
.notes-compose-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-top:var(--s2);padding:0 var(--s2) 0 var(--s3);
}
.notes-compose-where{
  font-family:var(--mono);font-size:10.5px;color:var(--chalk-faint);
  display:flex;align-items:center;gap:var(--s2);min-width:0;letter-spacing:.02em;
}
.notes-compose-where b{color:var(--brass);font-weight:500;}

.notes-ai{
  background:linear-gradient(90deg, rgba(125,165,184,.05), transparent 60%), var(--deck);
  border:1px solid rgba(125,165,184,.28);
  border-left:2px solid var(--patina);
  border-radius:var(--r-lg);
  padding:var(--s4);
  margin-bottom:var(--s6);
}
.notes-ai-head{
  display:flex;align-items:center;gap:var(--s2);
  font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-dim);margin-bottom:var(--s3);
  letter-spacing:.08em;text-transform:uppercase;
}
.notes-ai-head .i{color:var(--patina);}
.notes-ai-row{display:flex;gap:var(--s2);}
.notes-ai-row .input{flex:1;min-width:0;}

.notes-day{margin-bottom:var(--s6);position:relative;padding-left:24px;}
.notes-day::before{
  content:'';position:absolute;left:5px;top:28px;bottom:-24px;width:1px;
  background:var(--line);
}
.notes-day:last-child::before{display:none;}
.notes-day-head{
  position:relative;
  display:flex;align-items:baseline;gap:var(--s3);
  margin-bottom:var(--s4);padding-bottom:var(--s2);
  border-bottom:1px solid var(--line);
}
.notes-day-head::before{
  content:'';position:absolute;left:-22px;top:8px;
  width:7px;height:7px;border-radius:50%;
  background:var(--brass);box-shadow:0 0 10px var(--brass-glow);
}
.notes-day-head h2{
  font-family:var(--display);font-weight:600;
  font-size:15px;letter-spacing:-.01em;color:var(--chalk);
}
.notes-day-rel{font-family:var(--mono);font-size:10.5px;color:var(--chalk-faint);letter-spacing:.02em;}
.notes-day-count{
  margin-left:auto;font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-faint);letter-spacing:.04em;
}

.notes-list{display:flex;flex-direction:column;gap:var(--s3);}

.note{
  position:relative;
  background:var(--deck);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s3) var(--s4);
  transition:var(--fast);
}
.note:hover{border-color:var(--line-firm);}
.note.is-ai{
  border-color:rgba(125,165,184,.28);
  background:linear-gradient(90deg, rgba(125,165,184,.05), transparent 40%), var(--deck);
}
.note.is-ai::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--patina);box-shadow:0 0 12px var(--patina-glow);
  border-radius:var(--r-lg) 0 0 var(--r-lg);
}
.note.is-general{border-left:2px dashed var(--line-firm);}

.note-head{
  display:flex;align-items:center;gap:var(--s3);
  font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-faint);
  margin-bottom:6px;letter-spacing:.02em;
}
.note-time{color:var(--brass);font-weight:500;}
.note-topic{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:2px;
  background:var(--deck-2);
  color:var(--chalk-dim);
  font-family:var(--mono);font-size:10.5px;
  cursor:pointer;border:1px solid var(--line);
  max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:var(--fast);letter-spacing:.02em;
}
.note-topic:hover{color:var(--brass);border-color:var(--brass);}
.note-topic.general{color:var(--chalk-faint);font-style:italic;cursor:default;}
.note-topic.general:hover{color:var(--chalk-faint);border-color:var(--line);}
.note-source{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--patina);
  padding:2px 6px;border:1px solid rgba(125,165,184,.4);
  border-radius:2px;
}
.note-acts{margin-left:auto;display:flex;gap:2px;opacity:0;transition:opacity .12s;}
.note:hover .note-acts,.note:focus-within .note-acts{opacity:1;}

.note-body{
  font-size:14px;line-height:1.65;color:var(--chalk);
  white-space:pre-wrap;word-wrap:break-word;
  min-height:22px;letter-spacing:-.005em;
}
.note-body.editing{display:none;}
.note-edit{
  display:none;width:100%;border:0;background:transparent;resize:vertical;
  font:inherit;font-size:14px;line-height:1.65;color:var(--chalk);
  padding:0;min-height:56px;outline:none;
}
.note-edit.open{display:block;}

.note-foot{
  display:none;align-items:center;gap:var(--s2);
  margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--line);
}
.note-foot.open{display:flex;}

/* ==========================================================================
   §21  UTILITIES
   ========================================================================== */
.hide{display:none!important;}
.grow{flex:1;min-width:0;}

/* ==========================================================================
   §22  LIBRARY — reading room (compact)
   ========================================================================== */
.room{margin-bottom:var(--s5);}
.room-section{margin-bottom:var(--s5);}
.room-section:last-child{margin-bottom:0;}
.room-head{
  display:flex;align-items:baseline;gap:var(--s3);
  margin-bottom:var(--s3);padding-bottom:6px;
  border-bottom:1px solid var(--line);
}
.room-head h2{
  font-family:var(--display);font-weight:600;
  font-size:15px;letter-spacing:-.015em;
  color:var(--chalk);
}
.room-head .num{
  font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-faint);letter-spacing:.04em;
}
.room-head .room-head-hint{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-variation-settings:'SOFT' 70, 'WONK' 1, 'opsz' 14;
  font-size:12px;color:var(--chalk-faint);
  margin-left:auto;
}

.room-scroll{
  display:flex;gap:var(--s3);
  overflow-x:auto;
  padding-bottom:var(--s3);
  scrollbar-width:thin;
  scrollbar-color:var(--hull) transparent;
}
.room-scroll::-webkit-scrollbar{height:6px;}
.room-scroll::-webkit-scrollbar-thumb{background:var(--hull);border-radius:3px;}

.room-book{
  flex:none;width:124px;
  display:flex;flex-direction:column;gap:6px;
  text-align:left;
  transition:transform .15s;
}
.room-book:hover{transform:translateY(-3px);}
.room-book .cover{
  box-shadow:0 8px 24px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(237,228,210,.05);
}
.room-book:hover .cover{
  border-color:var(--brass);
  box-shadow:0 10px 28px rgba(0,0,0,.55), 0 0 22px rgba(201,162,74,.2), inset 0 1px 0 rgba(237,228,210,.05);
}
.room-book .book-title{font-size:12px;font-weight:600;}
.room-book .cover-letter{font-size:34px;}

.room-ribbon{
  position:absolute;top:0;left:0;
  padding:3px 8px;
  background:var(--brass);color:var(--space);
  font-family:var(--mono);font-size:8.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border-radius:var(--r) 0 4px 0;
  z-index:3;
}
.room-book.is-reading .room-ribbon{background:var(--brass);}
.room-book.is-queued .room-ribbon{background:var(--patina);color:var(--space);}

.shelf-bar{
  display:flex;flex-direction:column;gap:var(--s2);
  margin-bottom:var(--s5);padding-bottom:var(--s4);
  border-bottom:1px solid var(--line);
}

.read-btn{
  display:flex;align-items:center;justify-content:center;gap:var(--s3);
  width:100%;min-height:56px;
  margin-top:var(--s5);padding:0 var(--s5);
  background:var(--brass);color:var(--space);
  border:0;border-radius:var(--r);
  font-family:var(--display);font-weight:600;font-size:16px;
  letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  box-shadow:0 0 0 0 var(--brass-glow), 0 4px 16px rgba(201,162,74,.25);
  transition:var(--fast);
}
.read-btn:hover{
  background:var(--brass-lit);
  box-shadow:0 0 0 4px var(--brass-wash), 0 4px 20px rgba(201,162,74,.35);
}
.read-btn .i{font-size:20px;}
.read-btn[disabled],.read-btn.is-disabled{
  background:var(--deck-2);color:var(--chalk-faint);
  box-shadow:none;cursor:not-allowed;pointer-events:none;
}

.book-actions{
  display:flex;align-items:center;gap:var(--s3);
  margin-top:var(--s4);flex-wrap:wrap;
}
.book-pin{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;
  border:1px solid var(--line-firm);
  border-radius:var(--r);background:var(--deck);
  font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-dim);
  letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:var(--fast);
}
.book-pin:hover{border-color:var(--brass);color:var(--brass);}
.book-pin[aria-pressed="true"]{
  background:var(--brass-wash);border-color:var(--brass);color:var(--brass-lit);
}
.book-pin .i{font-size:14px;}

.book-notes{
  margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--line);
}
.book-notes-head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s3);}
.book-notes-head h3{
  font-family:var(--display);font-weight:600;
  font-size:14px;letter-spacing:-.01em;
  color:var(--chalk);text-transform:uppercase;
}
.book-notes-head .num{color:var(--brass);font-size:11px;}
.book-notes-head .grow{flex:1;}
.book-notes-head a{
  font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-faint);letter-spacing:.04em;
  text-decoration:none;
}
.book-notes-head a:hover{color:var(--brass);}

.book-note-compose{
  display:flex;flex-direction:column;
  margin-bottom:var(--s4);
  border:1px solid var(--line-firm);
  border-radius:var(--r);background:var(--deck);
  transition:border-color .15s;
}
.book-note-compose:focus-within{border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-wash);}
.book-note-compose textarea{
  width:100%;border:0;background:transparent;resize:vertical;
  font:inherit;font-size:14px;line-height:1.6;color:var(--chalk);
  padding:var(--s3) var(--s3) var(--s2);min-height:60px;outline:none;
}
.book-note-compose textarea::placeholder{color:var(--chalk-faint);}
.book-note-foot{
  display:flex;align-items:center;gap:var(--s2);
  padding:0 var(--s3) var(--s3);
}
.book-note-foot .num{color:var(--chalk-faint);font-size:10px;}

.book-note-list{
  display:flex;flex-direction:column;gap:var(--s2);
  max-height:260px;overflow-y:auto;padding-right:4px;
}
.book-note-list::-webkit-scrollbar{width:6px;}
.book-note-list::-webkit-scrollbar-thumb{background:var(--hull);border-radius:3px;}

.book-note-item{
  position:relative;
  padding:var(--s3) var(--s4);
  border:1px solid var(--line);
  border-radius:var(--r);background:var(--deck);
}
.book-note-item.is-ai{
  border-color:rgba(125,165,184,.28);
  background:linear-gradient(90deg, rgba(125,165,184,.05), transparent 40%), var(--deck);
}
.book-note-item.is-ai::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--patina);border-radius:var(--r) 0 0 var(--r);
}
.book-note-meta{
  display:flex;align-items:center;gap:var(--s3);
  margin-bottom:6px;
  font-family:var(--mono);font-size:10px;
  color:var(--chalk-faint);letter-spacing:.02em;
}
.book-note-meta .i{
  font-size:12px;color:var(--chalk-faint);
  margin-left:auto;opacity:0;
  transition:opacity .12s;cursor:pointer;
}
.book-note-meta .i:hover{color:var(--ember);}
.book-note-item:hover .book-note-meta .i{opacity:1;}
.book-note-time{color:var(--brass);font-weight:500;}
.book-note-src{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--patina);
  padding:1px 5px;border:1px solid rgba(125,165,184,.4);
  border-radius:2px;
}
.book-note-body{
  font-size:13.5px;line-height:1.65;
  color:var(--chalk-dim);
  white-space:pre-wrap;word-wrap:break-word;
}

/* ==========================================================================
   §23  CONFETTI
   ========================================================================== */
.confetti-piece{
  position:fixed;top:-20px;
  width:8px;height:12px;
  z-index:500;pointer-events:none;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg);opacity:1;}
  100%{transform:translateY(110vh) rotate(720deg);opacity:0;}
}

/* ==========================================================================
   §24  MOBILE
   ========================================================================== */
@media(max-width:600px){
  .shell,.work{padding-left:var(--s4);padding-right:var(--s4);}
  .hero{padding:var(--s5) 0;}
  .hero-card{padding:var(--s5) var(--s4) var(--s4);}
  .hero-card::before,.hero-card::after{width:14px;height:14px;}
  .hero-lesson{margin-top:var(--s4);}
  .player-bar{gap:var(--s2);}
  .player-bar-r{width:100%;}
  .player-bar-r .btn{flex:1;}
  .note{padding:var(--s3);}
  .note-acts{opacity:1;}
  .note-topic{max-width:160px;}
  .sheet{padding:var(--s4);}
  .screen::before,.screen::after{width:16px;height:16px;}
  .room-book{width:110px;}
  .room-book .cover-letter{font-size:28px;}
  .read-btn{font-size:15px;min-height:52px;}
}