:root{
  color-scheme:dark;
  --bg-void:#0E0B14; --bg-panel:#171220; --bg-panel-2:#1D1728;
  --spark:#C9A24B; --spark-soft:rgba(201,162,75,.35);
  --rose:#8A3B52; --rose-soft:rgba(138,59,82,.35);
  --mist:#a79fb0; --text:#EFEAE2; --text-dim:#c9c2d1;
  --line: rgba(239,234,226,.14); --radius:14px;
  --header-bg:rgba(14,11,20,.8); --tip-bg:#221a30; --list-accent:#D0909C;
  --modal-bg:#171220; --input-bg:#171220; --mark-bg:#D0909C; --mark-text:#17121f;
  --control-active-bg:#C9A24B; --control-active-text:#1A1206;
  --marker:#8A3B52; --marker-soft:rgba(138,59,82,.18);
  --player-muted:#A79FB0; --note-private:#D4A2B1;
}
html[data-theme="light"]{
  color-scheme:light;
  --bg-void:#FFFFFF; --bg-panel:#FFFDFC; --bg-panel-2:#F0E8DE;
  --spark:#765812; --spark-soft:rgba(118,88,18,.28);
  --rose:#7B344A; --rose-soft:rgba(123,52,74,.24);
  --mist:#514957; --text:#251F28; --text-dim:#39323D;
  --line:rgba(37,31,40,.18); --header-bg:rgba(255,255,255,.92);
  --tip-bg:#FFFDFC; --list-accent:#7B344A; --modal-bg:#FFFDFC;
  --input-bg:#F7F2EA; --mark-bg:#E4B3C0; --mark-text:#251F28;
  --control-active-bg:#6D5214; --control-active-text:#FFFDFC;
  --marker:#78A986; --marker-soft:rgba(120,169,134,.24);
  --note-private:#7B344A;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(138,59,82,.16), transparent 60%),
    radial-gradient(ellipse 700px 600px at 100% 10%, rgba(201,162,75,.09), transparent 60%),
    var(--bg-void);
  color:var(--text); font-family:'Manrope', sans-serif; line-height:1.5;
  overflow-x:clip;
}
html[data-theme="light"] body{background:var(--bg-void);}
body.scroll-locked{overflow:hidden; position:fixed; left:0; right:0; width:100%;}
h1,h2,h3,.display{font-family:'Cormorant Garamond', serif; font-weight:600;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--spark); outline-offset:3px; border-radius:4px;}
button, input, textarea{font-family:inherit;}
.wrap{max-width:900px; margin:0 auto; padding:0 20px;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

header{position:sticky; top:0; z-index:30; backdrop-filter:blur(10px); background:var(--header-bg); border-bottom:1px solid var(--line);}
header .bar{display:flex; align-items:center; gap:16px; padding:14px 20px;}
.wordmark{font-family:'Cormorant Garamond',serif; font-size:21px; letter-spacing:.05em; display:flex; align-items:center; gap:8px; text-decoration:none;}
.wordmark .dot{width:7px;height:7px;border-radius:50%;background:var(--spark); box-shadow:0 0 10px var(--spark);}
nav.top{display:flex; gap:24px; font-size:14px; color:var(--text-dim); margin-left:auto;}
nav.top a{text-decoration:none; min-height:44px; display:inline-flex; align-items:center;}
nav.top a:hover{color:var(--spark);}
nav.top a.active{color:var(--spark);}

.you-here{
  margin:22px 0 0; padding:16px 20px; border:1px solid var(--line); border-left:2px solid var(--spark);
  border-radius:12px; background:linear-gradient(90deg, rgba(201,162,75,.12), transparent 60%);
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
}
.you-here .t{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--spark);}
.you-here b{display:block; margin-top:2px; font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:600;}
.you-here p{margin:4px 0 0; font-size:13px; color:var(--text-dim); max-width:560px; line-height:1.55;}
.you-here .acts{margin-left:auto; display:flex; gap:8px;}
.solid-btn{background:var(--control-active-bg); color:var(--control-active-text); border:none; border-radius:999px; padding:9px 18px; font-size:13px; font-weight:600; cursor:pointer; min-height:44px; display:inline-flex; align-items:center; text-decoration:none;}
.solid-btn:hover{filter:brightness(1.08);}

.hero{padding:48px 20px 8px; text-align:center;}
.hero h1{font-size:clamp(26px,4.4vw,40px); margin:0 0 12px; font-style:italic; font-weight:500;}
.hero p{max-width:560px; margin:0 auto; color:var(--text-dim); font-size:15.5px;}

.page-title{font-size:clamp(24px,3.6vw,34px); margin:0 0 10px; font-style:italic; font-weight:500;}
.page-sub{color:var(--text-dim); font-size:14.5px; line-height:1.7; margin:0 0 24px; max-width:640px;}
.card-list .list-row{border-top:1px solid var(--line);}

.controls{max-width:900px; margin:30px auto 0; padding:0 20px;}
.searchrow{display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; justify-content:center;}
.search-column{flex:1 1 280px; max-width:420px; min-width:0;}
.search-wrap{position:relative; flex:1 1 280px; max-width:420px; min-width:0;}
.search-column .search-wrap{width:100%; max-width:none;}
.advanced-search{display:inline-flex; margin-top:6px; font-size:11.5px; color:var(--mist); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line);}
.advanced-search:hover{color:var(--spark);}
.search-input{width:100%; background:var(--bg-panel); border:1px solid var(--line); color:var(--text); padding:11px 36px 11px 14px; border-radius:10px; font-size:14px; min-height:44px;}
.search-input::placeholder{color:var(--mist);}
.search-clear{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:32px; height:32px; border:none; border-radius:50%; background:transparent; color:var(--mist); font-size:13px; cursor:pointer; display:grid; place-items:center;}
.search-clear:hover{color:var(--spark); background:rgba(201,162,75,.1);}
.search-clear[hidden]{display:none;}
.viewtoggle{display:flex; align-self:flex-start; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.viewtoggle button{background:var(--bg-panel); border:none; color:var(--text-dim); padding:11px 16px; font-size:13.5px; cursor:pointer; min-height:44px;}
.viewtoggle button.active{background:var(--control-active-bg); color:var(--control-active-text); font-weight:600;}
.viewtoggle button[data-tooltip]{position:relative;}
.viewtoggle button[data-tooltip]::after{content:attr(data-tooltip); position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); width:max-content; max-width:240px; white-space:normal; text-align:center; background:var(--tip-bg); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:11.5px; line-height:1.4; box-shadow:0 8px 24px rgba(0,0,0,.35); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s; z-index:35;}
@media (hover:hover) and (pointer:fine){
  .viewtoggle button[data-tooltip]:hover::after{opacity:1; visibility:visible;}
}
.viewtoggle button[data-tooltip]:focus-visible::after{opacity:1; visibility:visible;}

.entry{margin:22px auto 0; max-width:640px; background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;}
.entry p.q{margin:0 0 12px; font-size:13.5px; color:var(--mist); text-align:center;}
.entry-options{display:flex; flex-wrap:wrap; gap:9px; justify-content:center;}
.entry-options .entry-btn{display:inline-flex; align-items:center; min-height:44px; background:var(--bg-panel-2); border:1px solid var(--line); color:var(--text); padding:8px 15px; border-radius:999px; font-size:13px; cursor:pointer; text-decoration:none; transition:border-color .15s;}
.entry-options .entry-btn:hover{border-color:var(--spark); background:rgba(201,162,75,.1);}

.filters{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:24px 0 0;}
.filters button{background:transparent; border:1px solid var(--line); color:var(--text-dim); padding:6px 13px; border-radius:999px; font-size:12.5px; cursor:pointer; min-height:44px;}
.filters button.active{border-color:var(--spark); color:var(--spark); background:rgba(201,162,75,.08);}
.controls.sparks-active .search-column,
.controls.sparks-active .entry,
.controls.sparks-active #filters{display:none;}

.body-layout{max-width:900px; margin:0 auto; padding:44px 20px 80px;}

.path-section{position:relative;}
.spine{position:absolute; left:16px; top:0; bottom:0; width:2px; background:linear-gradient(to bottom, transparent, var(--line) 6%, var(--line) 94%, transparent);}
.top-item{position:relative; padding-left:46px; margin-bottom:14px; scroll-margin-top:90px;}
.marker{position:absolute; left:16px; top:26px; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%; background:var(--marker); box-shadow:0 0 0 4px var(--marker-soft), 0 0 12px var(--marker-soft); z-index:2;}
.gnum{position:absolute; left:16px; top:44px; transform:translateX(-50%); font-family:'Cormorant Garamond',serif; font-size:13px; color:var(--spark); opacity:.85;}

.group-card{background:var(--bg-panel-2); border:1px solid var(--rose-soft); border-radius:var(--radius); padding:15px 17px;}
.cycle-head{display:flex; align-items:baseline; gap:10px;}
.ctitle{font-size:18px; font-family:'Cormorant Garamond',serif; position:relative; border:none; border-bottom:1px dashed var(--spark-soft); padding:0 0 1px; margin:0; background:none; color:inherit; text-decoration:none; text-align:left; cursor:pointer; min-height:44px; display:inline-flex; align-items:center;}
a.ctitle{cursor:pointer;}
button.ctitle:hover{color:var(--spark);}
.ctitle .tip{
  position:absolute; left:0; top:calc(100% + 10px); z-index:25;
  width:min(360px, 78vw); padding:12px 14px;
  background:var(--tip-bg); border:1px solid var(--spark-soft); border-radius:10px;
  font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:400; line-height:1.6; color:var(--text-dim);
  box-shadow:0 16px 44px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s, transform .18s, visibility .18s; pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .ctitle:hover .tip{opacity:1; visibility:visible; transform:translateY(0);}
}
.group-description{display:none; margin:8px 0 0; font-size:12.5px; line-height:1.6; color:var(--text-dim);}
.ccount{margin-left:auto; font-size:11.5px; color:var(--mist); white-space:nowrap; padding:6px 0 6px 10px;}
.cycle-chevron{display:inline-block; transition:transform .2s; color:var(--rose); font-size:13px;}
.group-card.open .cycle-chevron{transform:rotate(90deg);}
.cycle-parts{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.group-card.open .cycle-parts{max-height:3000px;}
.cycle-part{padding:11px 4px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; gap:10px; cursor:pointer; font-size:13.5px; color:inherit; text-decoration:none; min-height:44px;}
.cycle-part:hover{color:var(--spark);}
.cycle-part .pn{color:var(--mist); font-size:11.5px; white-space:nowrap;}
.cycle-part.filter-dim{opacity:.25;}
.mk{font-size:11px; margin-right:6px; color:transparent;}
.mk.seen{color:var(--spark);}
.mk.note{color:var(--rose);}

.list-view{display:none;}
.list-view.active{display:block;}
.path-section{display:none;}
.path-section.active{display:block;}
.sparks-section{display:none;}
.sparks-section.active{display:block;}
.list-group-title{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--list-accent); margin:26px 0 8px;}
.list-group-title .ctitle{font-size:18px; color:var(--list-accent); text-transform:none; letter-spacing:.02em; border-bottom-color:rgba(208,144,156,.4); min-height:0;}
.list-row{display:flex; align-items:center; gap:14px; padding:11px 6px; border-top:1px solid var(--line);}
.list-row:hover{background:rgba(201,162,75,.05);}
.list-row .ltitle{font-size:14.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:inherit; text-decoration:none; min-height:44px; display:inline-flex; align-items:center;}
.list-row .ltitle:hover{color:var(--spark);}
.list-row .ltags{display:flex; gap:5px; flex:none; flex-wrap:wrap;}

.sparks-count{font-size:12.5px; color:var(--mist); margin:0 0 14px;}
.sparks-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px;}
.spark-tile{position:relative; aspect-ratio:9/16; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--bg-panel-2); display:block; text-decoration:none; color:var(--text);}
.spark-tile img{width:100%; height:100%; object-fit:cover; display:block;}
.spark-tile-empty{position:absolute; inset:0; display:grid; place-items:center; font-size:22px; color:var(--spark);}
.spark-badge{position:absolute; top:8px; right:8px; background:rgba(8,6,14,.65); color:#fff; font-size:10.5px; padding:2px 7px; border-radius:999px;}
.spark-tile-title{position:absolute; left:0; right:0; bottom:0; padding:20px 10px 10px; font-size:12.5px; line-height:1.35; color:#fff; background:linear-gradient(to top, rgba(0,0,0,.75), transparent);}
@media (max-width:640px){
  .sparks-grid{grid-auto-flow:column; grid-auto-columns:minmax(120px,38vw); grid-template-columns:none; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scrollbar-width:none; margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px;}
  .sparks-grid::-webkit-scrollbar{display:none;}
  .spark-tile{flex:none; scroll-snap-align:start;}
}

.empty{color:var(--mist); font-size:14px; padding:30px 6px; text-align:center;}

.scrim{position:fixed; inset:0; z-index:70; background:rgba(6,4,10,.6); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s;}
.scrim.open{opacity:1; pointer-events:auto;}
.reader{
  position:fixed; top:0; right:0; bottom:0; width:min(640px,100%); z-index:80;
  height:100dvh;
  background:var(--bg-panel); border-left:1px solid var(--line);
  box-shadow:-30px 0 80px rgba(0,0,0,.55);
  transform:translateX(102%); transition:transform .38s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}
.reader.open{transform:none;}
.reader-head{display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); flex:none; padding-top:calc(14px + env(safe-area-inset-top));}
.reader-head .crumb{font-size:11.5px; color:var(--mist); letter-spacing:.06em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.reader-nav{margin-left:auto; display:flex; gap:8px; flex:none;}
.icon-btn{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:transparent; display:grid; place-items:center; color:var(--text-dim); cursor:pointer; font-size:14px; flex:none; text-decoration:none;}
.icon-btn:hover{border-color:var(--spark); color:var(--spark);}
.reader-body{overflow-y:auto; padding:22px 26px 46px;}

.player{
  aspect-ratio:16/9; border-radius:12px; border:1px solid var(--line);
  background:radial-gradient(420px 210px at 50% 40%, #251e35, #100c18);
  display:grid; place-items:center; color:var(--mist); position:relative; overflow:hidden;
}
.player video{width:100%; height:100%; display:block; background:radial-gradient(420px 210px at 50% 40%, #251e35, #100c18);}
.play-btn{width:60px; height:60px; border-radius:50%; border:1px solid var(--spark-soft); color:var(--spark); display:grid; place-items:center; font-size:20px;}
.stub{position:absolute; bottom:10px; left:14px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--player-muted);}
.spark-player{aspect-ratio:9/16; max-width:360px; margin:0 auto;}
.spark-caption{font-size:14px; line-height:1.6; color:var(--text-dim); margin:10px 0 0;}
.spark-counter{color:var(--mist);}
.spark-parent-link{margin-top:18px; width:100%; justify-content:center;}

.video-page{padding-top:36px; padding-bottom:80px;}
.video-page .reader-head [data-close]{display:none;}
.video-page .reader-body{overflow:visible; padding:0;}
.video-page h1{font-family:'Cormorant Garamond',serif; font-size:27px; font-weight:500; font-style:italic; margin:20px 0 8px; line-height:1.25;}
.reader h1{font-family:'Cormorant Garamond',serif; font-size:27px; font-weight:500; font-style:italic; margin:20px 0 8px; line-height:1.25;}
.rmeta{display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--mist);}
.ghost-btn{background:transparent; border:1px solid var(--line); color:var(--text-dim); padding:6px 13px; border-radius:8px; font-size:12px; cursor:pointer; min-height:44px;}
.ghost-btn:hover{border-color:var(--spark); color:var(--spark);}
.rdesc{font-size:14px; line-height:1.7; color:var(--text-dim); margin:18px 0 0; white-space:pre-line;}
.section{margin-top:26px; border-top:1px solid var(--line); padding-top:18px;}
.section h4{margin:0 0 12px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mist); font-weight:600;}
.keyq{font-family:'Cormorant Garamond',serif; font-size:19px; line-height:1.5; color:var(--spark); margin:0; padding-left:14px; border-left:2px solid var(--spark);}
.notes-note{font-size:12.5px; color:var(--mist); line-height:1.6; margin:0 0 10px;}
.notes-note b{color:var(--note-private); font-weight:600;}
textarea.note{width:100%; min-height:110px; resize:vertical; background:var(--bg-panel-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--text); font-size:13.5px; line-height:1.6;}
textarea.note:focus{outline:none; border-color:var(--rose);}
.note-foot{display:flex; align-items:center; gap:12px; margin-top:10px; font-size:12px; color:var(--mist); flex-wrap:wrap;}
.note-foot .lock{color:var(--note-private);}
.prompts{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.prompts button{border:1px dashed var(--line); background:transparent; border-radius:99px; padding:5px 11px; font-size:11.5px; color:var(--mist); cursor:pointer; min-height:44px;}
.prompts button:hover{border-color:var(--rose); color:var(--rose);}
.nexts{display:grid; gap:10px;}
.nextcard{display:flex; gap:14px; align-items:center; border:1px solid var(--line); border-radius:12px; padding:13px 15px; text-align:left; background:var(--bg-panel-2); cursor:pointer; color:var(--text); transition:.16s; width:100%; text-decoration:none;}
.nextcard:hover{border-color:var(--spark);}
.nextcard .why{font-size:10.5px; color:var(--spark); letter-spacing:.1em; text-transform:uppercase;}
.nextcard h5{margin:3px 0 0; font-family:'Cormorant Garamond',serif; font-size:16px; font-weight:600;}
.nextcard .arrow{margin-left:auto; color:var(--mist); flex:none;}
.nextcard .sub-why{display:block; margin-top:3px; font-size:11.5px; color:var(--mist);}
.auto-note{margin:12px 0 0; font-size:11.5px; color:var(--mist); line-height:1.55;}

.transcript summary{cursor:pointer; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mist); font-weight:600; min-height:44px; display:inline-flex; align-items:center;}
.transcript summary:hover{color:var(--spark);}
.transcript-body{margin-top:14px; font-size:13.5px; line-height:1.75; color:var(--text-dim);}
.transcript-body p{margin:0 0 12px;}

.notebook h2{font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:600; margin:0 0 6px;}
.notebook .sub{color:var(--text-dim); font-size:13.5px; line-height:1.6; margin:0 0 22px; max-width:640px;}
.nb-item{border:1px solid var(--line); border-left:2px solid var(--rose); border-radius:12px; background:var(--bg-panel); padding:15px 17px; margin-bottom:10px;}
.nb-item .h{display:flex; align-items:center; gap:10px; margin-bottom:7px; flex-wrap:wrap;}
.nb-item .h b{font-family:'Cormorant Garamond',serif; font-size:15px; font-weight:600;}
.nb-item .h .g{font-size:12px; color:var(--mist);}
.nb-item .h a, .nb-item .h button{margin-left:auto; font-size:12px; color:var(--mist); background:none; border:none; cursor:pointer; min-height:44px; display:inline-flex; align-items:center; text-decoration:none;}
.nb-item .h a:hover, .nb-item .h button:hover{color:var(--spark);}
.nb-item p{margin:0; white-space:pre-wrap; font-size:13.5px; line-height:1.65; color:var(--text-dim);}
.notebook .empty{border:1px dashed var(--line); border-radius:12px; padding:26px; text-align:center; color:var(--mist); font-size:13.5px;}

.tag{font-size:10.5px; color:var(--spark); border:1px solid var(--spark-soft); padding:2px 8px; border-radius:999px; text-decoration:none;}
a.tag:hover{background:rgba(201,162,75,.12);}
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:200; background:var(--bg-panel-2); border:1px solid var(--line); border-radius:99px; padding:11px 20px; font-size:13px; color:var(--text); opacity:0; transition:.28s; pointer-events:none;}
.toast.show{opacity:1; transform:translate(-50%,0);}

footer{border-top:1px solid var(--line); padding:36px 20px 50px; text-align:center; color:var(--mist); font-size:13px;}

@media (hover:none){
  .ctitle .tip{display:none;}
  .group-description{display:block;}
}
@media (max-width:860px){
  .reader{width:100%;}
  .reader-body{padding:16px 18px 40px;}
  input, textarea, select{font-size:16px;}
  nav.top{gap:16px;}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{transition:none !important;} }

.transcript-heading{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.transcript-heading h4{margin:0; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mist); font-weight:600;}
.transcript-modal[hidden]{display:none;}
.transcript-modal{position:fixed; inset:0; z-index:190; display:flex; align-items:center; justify-content:center; padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); height:100vh; height:100dvh;}
.transcript-backdrop{position:absolute; inset:0; background:rgba(8,6,14,.82);}
.transcript-dialog{position:relative; display:flex; flex-direction:column; width:min(850px,100%); max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); background:var(--modal-bg); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 80px rgba(0,0,0,.55); overflow:hidden;}
.transcript-dialog-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px 8px;}
.transcript-dialog-head h2{margin:0; font-size:20px; line-height:1.3;}
.transcript-toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:0 20px 12px; border-bottom:1px solid var(--line,#2c2438);}
.transcript-toolbar input[type=search]{min-height:44px; flex:1 1 200px; padding:8px 12px; border:1px solid var(--line,#2c2438); border-radius:8px; background:var(--input-bg); color:var(--text); font-size:16px;}
.transcript-toolbar .ghost-btn{min-height:44px; min-width:44px;}
#transcriptSearchCount{font-size:13px; color:var(--mist); white-space:nowrap;}
.transcript-modal-body{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:18px 20px 24px; font-size:18px; line-height:1.75; user-select:none; -webkit-user-select:none;}
.transcript-modal-body p{margin:0 0 14px;}
.transcript-modal-body mark{background:var(--mark-bg); color:var(--mark-text); border-radius:2px; padding:0 1px;}
.transcript-dialog-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 20px 14px; border-top:1px solid var(--line,#2c2438);}
.transcript-dialog-foot .ghost-btn{min-height:44px; flex:none;}
.transcript-disclaimer{margin:0; max-width:430px; color:var(--mist); font-size:10.5px; line-height:1.4; text-align:right;}
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.transcript-dialog :focus-visible{outline:2px solid var(--spark,#D0909C); outline-offset:2px;}
@media (max-width:640px){
  .transcript-modal{padding:0;}
  .transcript-dialog{width:100%; height:100vh; height:100dvh; max-height:none; border-radius:0; border:0;}
  .transcript-dialog-head{padding-top:calc(16px + env(safe-area-inset-top));}
  .transcript-dialog-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom));}
}
.transcript-search-label{flex:1 1 240px; min-width:0;}
.transcript-search-label input[type=search]{width:100%;}
.transcript-modal-body,.transcript-preview{overflow-wrap:anywhere;}

.theme-toggle{position:relative; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--text-dim); cursor:pointer; display:grid; place-items:center;}
.theme-toggle:hover{color:var(--spark); border-color:var(--spark);}
.theme-icon{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round;}
.theme-toggle::after{content:attr(data-tooltip); position:absolute; top:calc(100% + 8px); right:0; white-space:nowrap; background:var(--tip-bg); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:12px; box-shadow:0 8px 24px rgba(0,0,0,.35); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s; z-index:35;}
@media (hover:hover) and (pointer:fine){
  .theme-toggle:hover::after{opacity:1; visibility:visible;}
}
.theme-toggle:focus-visible::after{opacity:1; visibility:visible;}

.mobile-nav{display:none;}
.sheet-handle{display:none; width:100%; min-height:44px; border:none; background:transparent; cursor:pointer; align-items:center; justify-content:center; touch-action:none; padding:0;}
.sheet-handle span{width:44px; height:5px; border-radius:99px; background:var(--mist); opacity:.55;}
.video-panel-page .sheet-handle{display:none;}
.network-note{position:absolute; top:10px; left:14px; right:14px; margin:0; font-size:12px; color:var(--player-muted);}

@media (max-width:1100px){
  .wrap{padding:0 16px;}
  .controls,.body-layout{padding-left:16px; padding-right:16px;}
}
@media (max-width:640px){
  nav.top{display:none;}
  header{backdrop-filter:none;}
  header .bar{padding:10px 12px; gap:10px; padding-top:calc(10px + env(safe-area-inset-top)); padding-left:calc(12px + env(safe-area-inset-left)); padding-right:calc(12px + env(safe-area-inset-right));}
  .wordmark{font-size:18px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .scrim{backdrop-filter:none;}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom));}
  .mobile-nav{position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; background:var(--header-bg); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);}
  .mobile-nav a{flex:1; min-height:44px; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--text-dim); text-decoration:none;}
  .mobile-nav a.active{color:var(--spark); font-weight:600;}
  .search-column{flex:1 1 100%; max-width:none;}
  .search-clear{width:44px; height:44px;}
  .filters,.entry-options{flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scrollbar-width:none; justify-content:flex-start; margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px;}
  .filters::-webkit-scrollbar,.entry-options::-webkit-scrollbar{display:none;}
  .filters button,.entry-options .entry-btn{flex:none; scroll-snap-align:start;}
  .rdesc,.transcript-body,.nb-item p,.notebook .sub{font-size:16px;}
  .section h4,.transcript-heading h4,.transcript summary{font-size:13px;}
  .reader{top:auto; left:0; right:0; bottom:0; width:100%; height:92vh; height:92dvh; border-left:none; border-top-left-radius:16px; border-top-right-radius:16px; transform:translateY(102%);}
  .reader.open{transform:translateY(0);}
  .reader.mobile-half{height:60vh; height:60dvh;}
  .reader .sheet-handle{display:flex;}
  .reader-body{overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
  .toast{bottom:calc(72px + env(safe-area-inset-bottom));}
  .list-row:active,.cycle-part:active,.nextcard:active,.entry-btn:active,.filters button:active,.mobile-nav a:active{background:rgba(201,162,75,.12);}
}
@media (max-width:480px){
  .searchrow{gap:8px;}
  .searchrow > .search-wrap{flex:1 1 100%; max-width:none;}
  .viewtoggle{width:100%;}
  .viewtoggle button{flex:1;}
  .cycle-head{flex-wrap:wrap;}
  .ccount{white-space:normal; min-width:0;}
  .list-row{flex-wrap:wrap; gap:8px;}
  .list-row .ltitle{flex:1 1 100%; white-space:normal;}
  .list-row .ltags{flex-wrap:wrap;}
}

html[data-theme="light"] .home-page .search-input,
html[data-theme="light"] .home-page .viewtoggle button:not(.active),
html[data-theme="light"] .home-page .entry{
  background:var(--bg-panel-2);
}
.reader-head .crumb-home{color:var(--spark); text-decoration:underline; text-underline-offset:3px;}
@media (hover:hover) and (pointer:fine){
  .reader-head .crumb-home:hover{text-decoration-thickness:2px;}
}