/* ===========================================================================
   Reading Room — showcase site styles.
   Mirrors the app's design tokens (templates/base.css): same fonts, indigo
   accent, warm off-white / dark themes. Self-contained; no build step.
   =========================================================================== */
:root{
  --bg:#fbfbfa; --bg-raised:#f3f3f1; --bg-card:#ffffff;
  --ink:#1a1d23; --ink-soft:#444b58; --ink-faint:#6a7180;
  --line:#e4e4e0; --accent:#2a52d6; --accent-dim:rgba(42,82,214,0.10);
  --link:#2348c0; --code-ink:#1a1d23;
  --shadow-card:0 1px 2px rgba(20,23,35,0.04), 0 4px 16px rgba(20,23,35,0.06);
  --shadow-lift:0 12px 48px rgba(20,23,35,0.13);
  --maxw:1080px;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
[data-theme="dark"]{
  --bg:#0f1115; --bg-raised:#181b21; --bg-card:#15181e;
  --ink:#e8eaed; --ink-soft:#a6adba; --ink-faint:#7b8392;
  --line:#262b34; --accent:#7aa2ff; --accent-dim:rgba(122,162,255,0.14);
  --link:#9bb8ff; --code-ink:#e8eaed;
  --shadow-card:0 1px 2px rgba(0,0,0,0.30), 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lift:0 14px 56px rgba(0,0,0,0.55);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--link); text-decoration:none;}
a:hover{text-decoration:underline;}
code{font-family:var(--mono); font-size:0.86em; background:var(--bg-raised);
  border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--code-ink);}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.muted{color:var(--ink-faint);}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* ---- top nav ---- */
.nav{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line);
  background:var(--bg); }
@supports (backdrop-filter:blur(8px)){
  .nav{ background:transparent; backdrop-filter:saturate(1.4) blur(10px); }
  .nav::before{content:""; position:absolute; inset:0; background:var(--bg); opacity:0.82; z-index:-1;}
}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:18px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:560; font-size:18px; color:var(--ink);}
.brand:hover{text-decoration:none;}
.brand img{width:26px; height:26px; border-radius:7px; display:block;}
.nav-links{margin-left:auto; display:flex; align-items:center; gap:22px;}
.nav-links a{font-family:var(--mono); font-size:13px; color:var(--ink-soft);}
.nav-links a:hover{color:var(--ink); text-decoration:none;}
.nav-links a[aria-current="page"]{color:var(--accent);}
.theme-toggle{appearance:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg-card); color:var(--ink-soft); transition:color .15s, border-color .15s;}
.theme-toggle:hover{color:var(--ink); border-color:var(--accent);}
.theme-toggle:focus-visible{outline:2px solid var(--link); outline-offset:2px;}
.theme-toggle svg{width:18px; height:18px; display:block;}
.theme-toggle .icon-sun{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
[data-theme="dark"] .theme-toggle .icon-moon{display:none;}

/* ---- hero ---- */
.hero{padding:76px 0 8px; text-align:center;}
.eyebrow{font-family:var(--mono); font-size:13px; letter-spacing:0.09em; text-transform:uppercase; color:var(--accent); margin:0;}
.hero h1{font-family:var(--serif); font-weight:560; font-size:clamp(40px,6.5vw,72px); line-height:1.04;
  margin:16px 0 0; letter-spacing:-0.02em;}
.hero .sub{font-size:clamp(17px,2.2vw,21px); color:var(--ink-soft); max-width:660px; margin:20px auto 0;}
.cta{display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap;}
.btn{font-family:var(--mono); font-size:14px; padding:11px 22px; border-radius:999px; cursor:pointer;
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  display:inline-flex; align-items:center; gap:8px; transition:opacity .15s, border-color .15s;}
[data-theme="dark"] .btn{color:var(--bg);}
.btn:hover{text-decoration:none; opacity:0.92;}
.btn svg{width:16px; height:16px;}
.btn-ghost{background:var(--bg-card); color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--accent); opacity:1;}
.btn-ghost .soon-tag{font-size:11px; color:var(--ink-faint);}

/* ---- browser frame around screenshots ---- */
.frame{border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-lift); background:var(--bg-card); margin:46px auto 0; max-width:980px;}
.frame-bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--bg-raised);}
.frame-bar i{width:11px; height:11px; border-radius:999px; background:var(--line); display:block; flex:none;}
.frame-bar .u{margin-left:12px; font-family:var(--mono); font-size:12px; color:var(--ink-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.frame img{display:block; width:100%; height:auto;}

/* ---- generic section ---- */
.section{padding:58px 0;}
.section.tight{padding:34px 0;}
.section h2{font-family:var(--serif); font-weight:560; font-size:clamp(28px,4vw,40px); text-align:center; margin:0; letter-spacing:-0.01em;}
.section .lead{text-align:center; color:var(--ink-soft); max-width:660px; margin:14px auto 0;}
.divider{height:1px; background:var(--line); border:0; margin:0;}

/* ---- feature grid ---- */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px;}
.feature{background:var(--bg-card); border:1px solid var(--line); border-radius:14px; padding:22px; box-shadow:var(--shadow-card);}
.feature .ic{width:40px; height:40px; border-radius:11px; background:var(--accent-dim); color:var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.feature .ic svg{width:20px; height:20px;}
.feature h3{font-family:var(--serif); font-size:19px; font-weight:560; margin:0 0 6px;}
.feature p{margin:0; color:var(--ink-soft); font-size:15px; line-height:1.55;}

/* ---- alternating showcase rows ---- */
.show{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-top:46px;}
.show .frame{margin:0; max-width:none;}
.show-text h3{font-family:var(--serif); font-size:25px; font-weight:560; margin:0 0 10px;}
.show-text p{color:var(--ink-soft); margin:0 0 10px;}
.show-text .tag{font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:0.04em; text-transform:uppercase;}
.show.rev .show-text{order:2;}

/* ---- steps (how to use) ---- */
.steps{margin-top:30px;}
.step{display:grid; grid-template-columns:46px 1fr; gap:20px; padding:34px 0; border-top:1px solid var(--line);}
.step .n{width:42px; height:42px; border-radius:999px; background:var(--accent); color:#fff;
  font-family:var(--mono); display:flex; align-items:center; justify-content:center; font-size:16px;}
[data-theme="dark"] .step .n{color:var(--bg);}
.step h3{font-family:var(--serif); font-size:24px; font-weight:560; margin:3px 0 8px;}
.step p{color:var(--ink-soft); margin:0 0 14px;}
.step .frame{max-width:none; margin:14px 0 0;}

/* ---- video placeholder (no video yet — planned content described) ---- */
.video-ph{margin:16px 0 0;}
.video-ph img.vid{display:block; width:100%; border:1px solid var(--line); border-radius:13px; background:var(--bg-raised);}
.video-ph .box{border:1.5px dashed var(--line); border-radius:13px; background:var(--bg-raised);
  aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--ink-faint);}
.video-ph .play{width:56px; height:56px; border-radius:999px; border:1.5px solid var(--ink-faint);
  display:flex; align-items:center; justify-content:center;}
.video-ph .play svg{width:22px; height:22px; margin-left:3px;}
.video-ph .tag{font-family:var(--mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase;}
.video-ph figcaption{font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); margin-top:11px; line-height:1.55;}
.video-ph figcaption b{color:var(--ink-soft); font-weight:500;}

/* ---- coming soon ---- */
.soon{text-align:center; padding:90px 0 70px;}
.soon .badge{display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-dim); border-radius:999px; padding:7px 15px;}
.soon h1{font-family:var(--serif); font-weight:560; font-size:clamp(32px,5vw,52px); margin:20px 0 0;}
.soon p{color:var(--ink-soft); max-width:560px; margin:16px auto 0;}
.soon ul{max-width:520px; margin:26px auto 0; text-align:left; color:var(--ink-soft); padding-left:22px;}
.soon li{margin:8px 0;}

/* ---- command block ---- */
.cmd{font-family:var(--mono); font-size:13.5px; background:var(--bg-raised); border:1px solid var(--line);
  border-radius:10px; padding:14px 16px; overflow:auto; color:var(--code-ink); margin:8px 0 0; line-height:1.7; white-space:pre;}
.cmd .c{color:var(--ink-faint);}
.cmd .p{color:var(--accent);}

/* ---- callout ---- */
.callout{background:var(--bg-card); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:12px; padding:18px 20px; margin:34px auto 0; max-width:760px; box-shadow:var(--shadow-card);}
.callout p{margin:0; color:var(--ink-soft); font-size:15px;}
.callout b{color:var(--ink);}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line); margin-top:50px; padding:30px 0 50px;}
.foot-inner{max-width:var(--maxw); margin:0 auto; padding:0 24px; display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  color:var(--ink-faint); font-size:14px; font-family:var(--mono);}
.foot-inner .sp{flex:1;}
.foot a{color:var(--ink-soft);}

/* ---- responsive ---- */
@media (max-width:820px){
  .features{grid-template-columns:repeat(2,1fr);}
  .show{grid-template-columns:1fr; gap:24px;}
  .show.rev .show-text{order:0;}
}
@media (max-width:560px){
  body{font-size:16px;}
  .features{grid-template-columns:1fr;}
  .nav-links{gap:14px;}
  .nav-links a.hide-sm{display:none;}
  .hero{padding:52px 0 4px;}
}