/* The Psalm HQ theme, unchanged — same tokens, type and detail pane as the live
   page. Identical in all three previews so the only variable is the grouping. */
:root{
  --bg:#0b0c0f; --pane:#101216; --line:#1c1f26; --line-2:#282c35;
  --fg:#f3f4f7; --mid:#9aa0ac; --dim:#5f646f;
  --accent:#7ee3c1; --red:#ff8579; --amber:#ffc978;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--bg);color:var(--fg);font-family:"Instrument Sans",sans-serif;font-size:14px;
  height:100vh;display:flex;overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.ihead h1{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0}
.ihead p{color:var(--dim);font-size:12px;margin:5px 0 0}
input.find{width:100%;font:inherit;font-size:13px;padding:8px 12px;border-radius:8px;
  background:var(--bg);border:1px solid var(--line);color:var(--fg)}
input.find::placeholder{color:var(--dim)}
input.find:focus{outline:none;border-color:var(--line-2)}

/* ---- detail pane, identical everywhere ---- */
.detail{flex:1;min-width:0;overflow-y:auto;padding:64px 60px 60px;position:relative}
.detail::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 40% at 78% -4%, rgba(126,227,193,.06), transparent 70%)}
.dwrap{position:relative;max-width:640px}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.eyebrow .sep{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
h2{font-family:"Instrument Serif",serif;font-size:52px;font-weight:400;letter-spacing:-.02em;
  line-height:1.02;margin:20px 0 0}
.state{display:inline-flex;align-items:center;gap:9px;font-size:13px;
  padding:7px 14px;border-radius:20px;border:1px solid var(--line-2);color:var(--dim)}
.state .d{width:7px;height:7px;border-radius:50%;background:currentColor}
.state[data-s=up]{color:var(--accent);border-color:rgba(126,227,193,.28)}
.state[data-s=down]{color:var(--red);border-color:rgba(255,133,121,.28)}
.purpose{font-size:19px;line-height:1.55;color:var(--fg);margin:22px 0 0;max-width:47ch}
.sect{margin-top:34px}
.slab{color:var(--dim);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-bottom:13px}
.ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ul li{display:flex;gap:12px;color:var(--mid);font-size:15px;line-height:1.5}
.ul li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line-2);flex:none;margin-top:9px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{border:1px solid var(--line-2);color:var(--mid);border-radius:20px;padding:6px 13px;font-size:12.5px}
.watch{margin-top:30px;padding:15px 18px;border-radius:12px;background:rgba(255,201,120,.055);
  border:1px solid rgba(255,201,120,.2);color:var(--amber);font-size:13.5px;line-height:1.55;display:flex;gap:12px}
.watch b{font-weight:600;flex:none}
.meta{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);color:var(--dim);
  font-size:12.5px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;line-height:1.6}
.meta .sep2{width:3px;height:3px;border-radius:50%;background:var(--line-2);flex:none}
.warnv{color:var(--amber)}
.acts{margin-top:36px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:10px;
  background:var(--accent);color:#04231a;font-weight:600;font-size:14px}
.urlline{margin-top:22px;color:var(--dim);font-size:12px;word-break:break-all;line-height:1.6}

/* Every preview says which one it is, and how to get back. */
.ribbon{position:fixed;right:18px;bottom:16px;z-index:20;display:flex;gap:10px;align-items:center;
  background:rgba(16,18,22,.92);border:1px solid var(--line-2);border-radius:20px;
  padding:8px 15px;font-size:12px;color:var(--dim);backdrop-filter:blur(6px)}
.ribbon b{color:var(--fg);font-weight:600}
.ribbon a{color:var(--accent)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}