:root { --bg:#0e0e12; --panel:#16151a; --ink:#ece7db; --muted:#a7a08f; --faint:#6f6a60; --line:#28272e; --line-strong:#3a3941; --gold:#c8a24a; --gold-soft:#8f7538; --steel:#6f9fce; --marker:#b9772a; }
* { box-sizing:border-box; }
body { margin:0; overflow-x:clip; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; line-height:1.55; background-image:linear-gradient(rgba(200,162,74,.035) 1px,transparent 1px); background-size:100% 28px; }
a { color:inherit; }
a:focus-visible, input:focus-visible { outline:3px solid var(--steel); outline-offset:4px; }
.skip { position:fixed; left:12px; top:12px; z-index:10; transform:translateY(-180%); background:var(--ink); color:var(--bg); padding:10px 14px; }
.skip:focus { transform:translateY(0); }
.page { width:min(1080px,calc(100% - 32px)); margin:24px auto 56px; }
.masthead { padding:18px 26px; border:1px solid var(--line); background:var(--panel); text-align:center; box-shadow:0 22px 60px rgba(0,0,0,.34); }
.masthead-art { display:block; width:100%; max-width:640px; height:auto; margin:0 auto; }
.nav { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 22px; min-height:44px; margin-top:8px; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.nav a { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); text-decoration:none; }
.nav a:hover, .nav [aria-current="page"] { color:var(--gold); }
.hero { max-width:820px; padding:54px 0 34px; }
.eyebrow, .date { color:var(--gold); font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:8px 0 12px; font:500 clamp(46px,8vw,78px)/.98 'Newsreader',Georgia,serif; letter-spacing:-.03em; }
.hero p { margin:0; color:var(--muted); font:400 19px/1.55 'Newsreader',Georgia,serif; }
.controls { position:sticky; top:0; z-index:4; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:end; margin-bottom:24px; padding:14px 16px; border:1px solid var(--line-strong); background:rgba(22,21,26,.96); backdrop-filter:blur(14px); }
label span { display:block; margin-bottom:5px; color:var(--faint); font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
input { width:100%; min-height:44px; padding:9px 12px; border:1px solid var(--line-strong); border-radius:5px; background:var(--bg); color:var(--ink); font:500 14px 'Inter',sans-serif; }
input::placeholder { color:var(--faint); }
.count { padding-bottom:11px; color:var(--faint); font-size:10px; white-space:nowrap; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
body[data-library-section="workflows"] .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.card { min-width:0; min-height:100%; padding:22px; border:1px solid var(--line-strong); background:var(--panel); transition:border-color .15s,transform .15s; }
.card:hover { border-color:var(--gold-soft); transform:translateY(-2px); }
.card a { display:block; height:100%; text-decoration:none; }
.card h2 { margin:10px 0 8px; overflow-wrap:anywhere; font:600 22px/1.18 'Newsreader',Georgia,serif; }
.card p { margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.58; }
.card p strong { color:var(--ink); }
.chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.chip { padding:2px 8px; border:1px solid var(--line-strong); border-radius:999px; color:var(--muted); font-size:8.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.chip.cost { color:var(--steel); border-color:rgba(111,159,206,.42); }
.chip.seen { color:var(--gold); border-color:var(--gold-soft); }
.needs { margin-top:14px; padding-top:10px; border-top:1px dashed var(--line-strong); color:var(--muted); font-size:11px; }
.needs b { display:block; margin-bottom:6px; color:var(--gold); font-size:9px; letter-spacing:.13em; text-transform:uppercase; }
.needs span + span::before { content:' · '; color:var(--line-strong); }
.message { margin:24px 0; padding:20px; border:1px dashed var(--line-strong); color:var(--muted); font:italic 16px 'Newsreader',serif; }
.message[hidden] { display:none; }
.foot { margin-top:38px; padding:24px 0 10px; border-top:1px solid var(--line-strong); text-align:center; color:var(--faint); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.foot a { color:var(--gold); text-decoration:none; }
[data-library-card][hidden] { display:none; }
@media(max-width:820px){.grid,body[data-library-section="workflows"] .grid{grid-template-columns:1fr 1fr}.controls{position:static}}
@media(max-width:600px){.page{width:calc(100% - 20px);margin-top:10px}.masthead{padding:12px}.nav{gap:2px 12px;font-size:9px}.hero{padding:38px 0 26px}.controls{grid-template-columns:1fr}.count{padding:0}.grid,body[data-library-section="workflows"] .grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}