:root{
  --bg:#06080b;
  --bg2:#0b1016;
  --panel:#0d1218cc;
  --panel-strong:#0f141bcc;
  --line:#6f6040;
  --line-soft:#4f432a;
  --gold:#d7c19a;
  --gold-soft:#ab8f61;
  --text:#f3eee4;
  --muted:#b7aa94;
  --danger:#c9806d;
  --shadow:0 24px 80px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(circle at 10% 10%, rgba(190,157,85,.14), transparent 24%),
    radial-gradient(circle at 85% 15%, rgba(74,102,132,.18), transparent 24%),
    radial-gradient(circle at 40% 80%, rgba(199,143,96,.08), transparent 22%),
    linear-gradient(180deg,#06080b 0%,#0a0f15 54%,#06080b 100%);
  color:var(--text);
  font-family: Georgia, 'Times New Roman', serif;
  overflow:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.045) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.035) 0 1px, transparent 1.5px),
    radial-gradient(circle at 55% 75%, rgba(255,255,255,.03) 0 1px, transparent 1.5px);
  background-size: 190px 190px, 220px 220px, 260px 260px;
  pointer-events:none;
  opacity:.55;
}
button{font:inherit}
#app{height:100%; display:flex; flex-direction:column; position:relative; z-index:1}
.topbar{
  position:sticky; top:0; z-index:10;
  padding:14px 16px 14px;
  border-bottom:1px solid rgba(215,193,154,.12);
  background:linear-gradient(180deg, rgba(6,8,11,.96), rgba(10,14,20,.82));
  backdrop-filter: blur(16px);
}
.brandrow{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px}
.brand{letter-spacing:.28em; text-transform:uppercase; font-size:1rem; color:var(--gold);}
.mini-actions{display:flex; gap:8px; flex-wrap:wrap}
.icon-btn,.ghost-btn,.primary-btn,.chip-btn,.nav-btn{
  border:1px solid rgba(215,193,154,.28);
  color:var(--text); background:rgba(255,255,255,.02);
  border-radius:999px; padding:10px 14px; cursor:pointer;
  transition:.18s ease;
}
.icon-btn:hover,.ghost-btn:hover,.primary-btn:hover,.chip-btn:hover,.nav-btn:hover{transform:translateY(-1px); border-color:rgba(215,193,154,.5);}
.primary-btn{background:linear-gradient(180deg, rgba(164,129,72,.25), rgba(164,129,72,.1)); color:var(--text); box-shadow:0 12px 30px rgba(0,0,0,.25)}
.primary-btn.big{padding:14px 22px; font-size:1.05rem}
.icon-btn{padding:9px 12px; min-width:44px}
.thought-strip{
  border:1px solid rgba(215,193,154,.18);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(12,16,22,.92), rgba(10,14,19,.8));
  padding:12px 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.thought-label{font-family:Arial,Helvetica,sans-serif; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:6px}
.thought-text{font-size:.98rem; line-height:1.34; color:var(--text)}
.main{flex:1; min-height:0; overflow:auto; padding:18px 14px 26px}
.screen{max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:14px}
.hero-card,.reader-card,.panel,.overlay-panel{
  position:relative; border-radius:28px; overflow:hidden;
  border:1px solid rgba(215,193,154,.18); box-shadow:var(--shadow);
  background:linear-gradient(180deg, rgba(17,23,31,.85), rgba(9,12,17,.92));
}
.hero-card{min-height:68vh; display:flex; align-items:flex-end}
.reader-card{min-height:68vh; display:flex; align-items:flex-end}
.bg-blur{position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(18px) saturate(.9) brightness(.4); transform:scale(1.08)}
.bg-vignette{position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,7,9,.15), rgba(5,7,9,.42) 38%, rgba(4,5,7,.88) 100%)}
.hero-foreground,.reader-foreground{position:relative; inset:0; width:100%; min-height:68vh; display:flex; flex-direction:column; justify-content:flex-end}
.full-art{position:absolute; inset:0; background-size:cover; background-position:center}
.full-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,10,12,.08), rgba(8,10,12,.12) 34%, rgba(8,10,12,.82) 100%)}
.reader-copy,.hero-copy{position:relative; z-index:2; padding:20px 18px 22px}
.kicker{font-family:Arial,Helvetica,sans-serif; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:12px}
.page-title{font-size:1.55rem; line-height:1.06; margin:0 0 10px; color:var(--text)}
.subtitle{font-size:.98rem; color:var(--muted); line-height:1.4; margin:0 0 18px}
.body-copy{font-size:1.17rem; line-height:1.5; max-width:32rem; text-shadow:0 2px 18px rgba(0,0,0,.45)}
.body-copy p{margin:0 0 1em}
.body-copy p:last-child{margin-bottom:0}
.hero-meta,.reader-meta{display:flex; justify-content:space-between; gap:10px; align-items:flex-end; margin-top:18px; flex-wrap:wrap}
.meta-left{display:flex; flex-direction:column; gap:6px}
.meta-small{font-family:Arial,Helvetica,sans-serif; font-size:.72rem; color:var(--muted); letter-spacing:.18em; text-transform:uppercase}
.status-chip{display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(215,193,154,.22); border-radius:999px; padding:9px 13px; background:rgba(5,8,10,.38); font-family:Arial,Helvetica,sans-serif; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.status-dot{width:7px;height:7px;border-radius:50%; background:var(--gold); box-shadow:0 0 12px rgba(215,193,154,.65)}
.controls{display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center}
.nav-btn{padding:14px 16px; border-radius:18px; font-family:Arial,Helvetica,sans-serif; font-size:.92rem; letter-spacing:.02em}
.nav-btn.secondary{text-align:left}
.nav-btn.right{text-align:right}
.nav-btn[disabled]{opacity:.35; cursor:default; transform:none}
.mode-pill{justify-self:center; text-align:center; min-width:170px; border-radius:16px; padding:12px 16px; font-family:Arial,Helvetica,sans-serif; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(215,193,154,.22); background:rgba(7,10,13,.6)}
.subcontrols{display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between}
.subcontrols .left,.subcontrols .right{display:flex; gap:10px; flex-wrap:wrap}
.panel{padding:16px 16px 18px}
.panel h3{margin:0 0 10px; font-size:1.08rem}
.panel p{margin:0; line-height:1.5; color:var(--muted)}
.starter-layout{display:flex; flex-direction:column; gap:16px}
.thread-count{font-family:Arial,Helvetica,sans-serif; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft)}
.archive-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.archive-card{position:relative; border-radius:18px; overflow:hidden; min-height:186px; border:1px solid rgba(215,193,154,.15); background:#0f141a}
.archive-card .art{position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(.9) brightness(.85)}
.archive-card.hidden .art{filter:blur(8px) brightness(.25) saturate(.6); transform:scale(1.08)}
.archive-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,10,13,.12), rgba(7,10,13,.88) 100%)}
.archive-card .info{position:absolute; inset:auto 0 0 0; padding:14px; z-index:1}
.archive-card .title{font-size:1.08rem; margin-bottom:4px}
.archive-card .meta{font-family:Arial,Helvetica,sans-serif; font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.modal-shell{position:fixed; inset:0; background:rgba(2,4,7,.68); backdrop-filter:blur(10px); display:none; align-items:flex-end; justify-content:center; padding:10px; z-index:50}
.modal-shell.open{display:flex}
.modal{width:min(900px,100%); max-height:88vh; overflow:auto; border-radius:26px 26px 18px 18px; border:1px solid rgba(215,193,154,.22); background:linear-gradient(180deg, rgba(12,16,22,.98), rgba(8,11,15,.98)); box-shadow:var(--shadow); padding:18px}
.modal-header{display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:14px}
.modal-title{margin:0; font-size:1.3rem}
.thread-map{display:grid; gap:10px}
.map-node{padding:12px 14px; border:1px solid rgba(215,193,154,.14); border-radius:16px; background:rgba(255,255,255,.02)}
.map-node.current{border-color:rgba(215,193,154,.45); box-shadow: inset 0 0 0 1px rgba(215,193,154,.08)}
.map-node .line1{font-family:Arial,Helvetica,sans-serif; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:6px}
.map-node .line2{font-size:1rem; color:var(--text)}
.map-node.future .line2{color:#867a65}
.map-node .line3{font-size:.92rem; color:var(--muted); margin-top:4px}
.pulse-box{display:flex; flex-direction:column; gap:12px}
.pulse-box textarea{width:100%; min-height:150px; resize:vertical; border-radius:18px; border:1px solid rgba(215,193,154,.22); background:rgba(255,255,255,.03); color:var(--text); padding:14px; font:inherit; line-height:1.45}
.pulse-box textarea::placeholder{color:#877c67}
.note{font-size:.92rem; color:var(--muted); line-height:1.45}
.footer-note{font-family:Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.18em; color:#877b65; font-size:.68rem; text-align:center; padding:4px 0 8px}
@media (min-width: 860px){
  .topbar{padding-inline:24px}
  .main{padding-inline:22px}
  .archive-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-copy,.reader-copy{padding:28px 28px 26px}
  .page-title{font-size:2rem}
  .body-copy{font-size:1.23rem}
}


/* Threshold / contextual orientation layer */
.thought-strip{cursor:pointer; transition:max-height .22s ease, padding .22s ease, opacity .22s ease; overflow:hidden}
.thought-strip.folded{padding-top:8px; padding-bottom:8px}
.thought-strip.folded .thought-text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.78; font-size:.88rem}
.thought-strip.folded .thought-label{margin-bottom:3px}
.thought-hint{opacity:.48; letter-spacing:.08em; text-transform:none}
.threshold-shell{align-items:center; padding:16px}
.threshold-modal{max-width:610px; border-radius:28px; padding:28px 24px 24px; background:radial-gradient(circle at 50% -10%,rgba(191,151,84,.12),transparent 38%),linear-gradient(180deg,rgba(10,14,19,.985),rgba(6,9,13,.995)); box-shadow:0 40px 130px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.018)}
.threshold-mark{display:flex; align-items:center; justify-content:center; gap:8px; margin:0 auto 20px; opacity:.9}
.threshold-mark span{width:44px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-soft))}
.threshold-mark span:last-child{background:linear-gradient(90deg,var(--gold-soft),transparent)}
.threshold-mark i{width:8px;height:8px;border:1px solid var(--gold);transform:rotate(45deg);box-shadow:0 0 18px rgba(215,193,154,.35)}
.threshold-title{font-weight:400; font-size:clamp(1.7rem,5vw,2.5rem); line-height:1.05; margin:0 0 18px; color:var(--text)}
.threshold-copy{color:#d6ccbc; font-size:1.05rem; line-height:1.55; max-width:34rem}
.threshold-copy p{margin:0 0 1em}.threshold-copy p:last-child{margin-bottom:0}
.threshold-actions{display:grid; gap:9px; margin-top:24px}
.threshold-actions button{width:100%}
@media(max-width:620px){
  .threshold-modal{padding:24px 19px 20px; border-radius:24px}
  .threshold-copy{font-size:1rem}
  .topbar{padding-top:max(12px,env(safe-area-inset-top))}
}