:root{
  --bg:#FCFBF7; --surface:#FFFFFF; --surface-dark:#191712; --surface-dark-2:#242019;
  --border:#EAE6DB; --border-dark:#37322A;
  --ink:#191712; --ink-on-dark:#F7F4EC; --muted:#6B6558; --muted-on-dark:#B3ABA0;
  --accent:#E5432B; --accent-hover:#C93A24; --accent-tint:#FBE8E3;
  --gold:#C98A1A; --green:#1E8E5A; --red-dark:#B8321D;
  --font-display:'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius-sm:6px; --radius-md:10px; --radius-pill:999px;
  --space-sm:12px; --space-md:24px; --space-lg:56px;
  --container:1180px;
  --shadow-hover:0 8px 24px -8px rgba(229,67,43,.28);
}

*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-body);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
ul{list-style:none}
button{font:inherit; cursor:pointer}
input{font:inherit}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.08; letter-spacing:-.01em}
code,.mono{font-family:var(--font-mono)}

.container{max-width:var(--container); margin-inline:auto; padding-inline:24px}
@media (max-width:640px){ .container{padding-inline:18px} }

.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:var(--radius-sm); font-weight:600; font-size:.95rem;
  border:1.5px solid transparent; transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost-light{border-color:rgba(247,244,236,.35); color:var(--ink-on-dark)}
.btn-ghost-light:hover{background:var(--ink-on-dark); color:var(--surface-dark); border-color:var(--ink-on-dark)}
.btn-ghost-dark{border-color:var(--ink); color:var(--ink)}
.btn-ghost-dark:hover{background:var(--ink); color:var(--bg)}
.btn:active{transform:translateY(1px)}

/* ---------- Header ---------- */
.site-header{background:var(--surface-dark); position:sticky; top:0; z-index:40; border-bottom:1px solid var(--border-dark)}
.site-header .container{display:flex; align-items:center; gap:28px; height:68px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--ink-on-dark); flex-shrink:0}
.brand .crown{width:26px; height:26px; flex-shrink:0}
.brand small{display:block; font-family:var(--font-body); font-weight:400; font-size:.65rem; color:var(--muted-on-dark); letter-spacing:.02em}

.primary-nav{display:flex; align-items:center; gap:22px; flex:1}
.primary-nav a{color:var(--muted-on-dark); font-size:.92rem; font-weight:500; transition:color .15s ease}
.primary-nav a:hover, .primary-nav a.is-active{color:var(--ink-on-dark)}

.header-search{margin-left:auto; display:flex; align-items:center; gap:10px}
.search-field{
  position:relative; display:flex; align-items:center;
}
.search-field input{
  width:230px; background:var(--surface-dark-2); border:1px solid var(--border-dark);
  color:var(--ink-on-dark); border-radius:var(--radius-pill); padding:10px 16px 10px 38px;
  font-family:var(--font-mono); font-size:.82rem; transition:border-color .15s ease, width .2s ease;
}
.search-field input::placeholder{color:var(--muted-on-dark)}
.search-field input:focus{outline:none; border-color:var(--accent); width:270px}
.search-field svg{position:absolute; left:13px; width:15px; height:15px; color:var(--muted-on-dark); pointer-events:none}

.nav-toggle{display:none; background:none; border:0; color:var(--ink-on-dark); padding:8px}
.nav-toggle svg{width:22px; height:22px}

@media (max-width:880px){
  .header-search .search-field{display:none}
  .primary-nav{position:fixed; inset:68px 0 auto 0; background:var(--surface-dark); flex-direction:column; align-items:flex-start; gap:0;
    padding:8px 24px 20px; border-bottom:1px solid var(--border-dark); transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;}
  .primary-nav.is-open{opacity:1; transform:translateY(0); pointer-events:auto}
  .primary-nav a{padding:12px 0; width:100%; border-bottom:1px solid var(--border-dark)}
  .primary-nav a:last-child{border-bottom:0}
  .nav-toggle{display:inline-flex}
  .header-search{margin-left:auto}
}

/* ---------- Hero ---------- */
.hero{background:var(--surface-dark); color:var(--ink-on-dark); padding:72px 0 88px; overflow:hidden; position:relative}
.hero .container{display:grid; grid-template-columns:minmax(0,560px) 1fr; gap:48px; align-items:center}
.hero-copy h1{font-size:clamp(2.1rem, 4.4vw, 3.4rem); margin-bottom:18px}
.hero-copy h1 em{font-style:normal; color:var(--accent)}
.hero-copy p{color:var(--muted-on-dark); font-size:1.08rem; max-width:46ch; margin-bottom:30px; line-height:1.6}
.hero-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap}

.hero-search{position:relative; max-width:480px; margin-bottom:22px}
.hero-search input{
  width:100%; background:var(--surface-dark-2); border:1.5px solid var(--border-dark); color:var(--ink-on-dark);
  border-radius:var(--radius-pill); padding:16px 20px 16px 48px; font-family:var(--font-mono); font-size:.98rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.hero-search input::placeholder{color:var(--muted-on-dark)}
.hero-search input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(229,67,43,.22)}
.hero-search svg{position:absolute; left:18px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted-on-dark)}

.hero-panel{background:var(--surface-dark-2); border:1px solid var(--border-dark); border-radius:14px; padding:34px 28px; font-family:var(--font-mono)}
.hero-panel .cmd-line{font-size:1.15rem; color:var(--ink-on-dark); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.hero-panel .cmd-line .prompt{color:var(--accent)}
.hero-panel .cmd-line .cycle-word{color:var(--ink-on-dark); transition:opacity .22s ease; border-bottom:2px solid var(--accent)}
.hero-panel .caption{margin-top:16px; font-family:var(--font-body); font-size:.82rem; color:var(--muted-on-dark)}

@media (max-width:880px){
  .hero .container{grid-template-columns:1fr}
  .hero-panel{display:none}
}

/* ---------- Section scaffolding ---------- */
.section{padding:var(--space-lg) 0}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:32px; flex-wrap:wrap}
.section-head h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.section-head .see-all{font-weight:600; color:var(--accent); font-size:.92rem; display:inline-flex; align-items:center; gap:6px}
.section-head .see-all:hover{color:var(--accent-hover)}

/* ---------- Package grid & cards ---------- */
.package-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:20px}
.package-card{
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:22px; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  display:flex; flex-direction:column; min-width:0;
}
.package-card:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-hover)}
.package-card.is-pinned{border-color:var(--gold); border-width:1.5px}

.pkg-badges{flex-shrink:0; display:flex; align-items:center; gap:6px}
.pin-badge{width:22px; height:22px; border-radius:50%; background:var(--gold); color:var(--surface); display:flex; align-items:center; justify-content:center}
.pin-badge svg{width:10px; height:10px}

.package-card .pkg-top{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px}
.pkg-icon{flex-shrink:0; width:42px; height:42px; border-radius:var(--radius-sm); background:var(--accent-tint); color:var(--accent); display:flex; align-items:center; justify-content:center}
.pkg-icon svg{width:22px; height:22px}
.pkg-titleblock{min-width:0; flex:1}
.package-card h3{font-size:1.05rem; overflow-wrap:break-word}
.package-card .slug{display:block; font-family:var(--font-mono); font-size:.76rem; color:var(--muted); margin-top:2px; overflow-wrap:break-word}
.package-card .desc{font-size:.9rem; color:var(--muted); line-height:1.55; margin-bottom:18px; min-height:2.7em; overflow-wrap:break-word}

.pkg-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.cat-tag{font-size:.72rem; font-weight:600; color:var(--muted); background:var(--bg); border:1px solid var(--border); padding:4px 10px; border-radius:var(--radius-pill)}
.package-card .pkg-meta{display:flex; align-items:center; gap:12px; font-size:.78rem; color:var(--muted); font-family:var(--font-mono); margin-left:auto}
.package-card .pkg-meta .ver{color:var(--ink); background:var(--accent-tint); padding:3px 9px; border-radius:var(--radius-pill); font-weight:600}

.badge-verified{flex-shrink:0; display:inline-flex; align-items:center; gap:4px; color:var(--gold); font-size:.72rem; font-weight:600}
.badge-verified svg{width:17px; height:17px}

/* ---------- Category filter chips ---------- */
.filter-chips{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px}
.filter-chip{padding:9px 16px; border-radius:var(--radius-pill); border:1.5px solid var(--border); font-size:.85rem; font-weight:600; color:var(--muted); background:var(--surface); transition:.15s ease}
.filter-chip:hover{border-color:var(--accent); color:var(--ink)}
.filter-chip.is-active{background:var(--ink); border-color:var(--ink); color:var(--bg)}

.browse-search{position:relative; max-width:420px; margin-bottom:24px}
.browse-search input{width:100%; border:1.5px solid var(--border); border-radius:var(--radius-pill); padding:13px 18px 13px 42px; font-family:var(--font-mono); font-size:.9rem; background:var(--surface)}
.browse-search input:focus{outline:none; border-color:var(--accent)}
.browse-search svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted)}

.empty-state{text-align:center; padding:64px 20px; color:var(--muted)}
.empty-state svg{width:44px; height:44px; margin:0 auto 16px; color:var(--border)}

/* ---------- Flow (how it works) ---------- */
.flow-panel{background:var(--surface-dark); border-radius:16px; padding:34px 30px; color:var(--ink-on-dark)}
.flow-steps{display:flex; align-items:center; gap:14px; font-family:var(--font-mono); font-size:1rem; flex-wrap:wrap}
.flow-steps .step{display:flex; flex-direction:column; gap:6px}
.flow-steps .step .cmd{color:var(--ink-on-dark)}
.flow-steps .step .cmd .prompt{color:var(--accent); margin-right:8px}
.flow-steps .step .label{font-family:var(--font-body); font-size:.78rem; color:var(--muted-on-dark)}
.flow-steps .arrow{color:var(--muted-on-dark); font-size:1.3rem; align-self:flex-start; margin-top:2px}
@media (max-width:720px){ .flow-steps{flex-direction:column; align-items:flex-start} .flow-steps .arrow{display:none} }

/* ---------- Bento (why section) ---------- */
.bento{display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:auto auto; gap:20px}
.bento-panel{border-radius:var(--radius-md); padding:30px; border:1px solid var(--border)}
.bento-panel.large{grid-row:1 / 3; background:var(--surface-dark); color:var(--ink-on-dark); border-color:var(--border-dark); display:flex; flex-direction:column; justify-content:space-between; min-height:340px}
.bento-panel.small{background:var(--surface)}
.bento-panel h3{font-size:1.3rem; margin-bottom:10px}
.bento-panel.large h3{font-size:1.6rem; max-width:20ch}
.bento-panel p{color:var(--muted); line-height:1.6}
.bento-panel.large p{color:var(--muted-on-dark); max-width:38ch}
.bento-glyph{width:34px; height:34px; color:var(--accent); margin-bottom:6px}
.bento-panel.large .bento-glyph{color:var(--gold)}
@media (max-width:820px){ .bento{grid-template-columns:1fr} .bento-panel.large{grid-row:auto; min-height:auto} }

/* ---------- CTA banner ---------- */
.cta-banner{background:var(--accent); border-radius:16px; padding:48px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; color:#fff}
.cta-banner h2{font-size:1.6rem; max-width:22ch}
.cta-banner .btn-primary{background:#fff; color:var(--accent)}
.cta-banner .btn-primary:hover{background:var(--surface-dark); color:#fff}

/* ---------- Footer ---------- */
.site-footer{background:var(--surface-dark); color:var(--muted-on-dark); padding:56px 0 28px; margin-top:var(--space-lg)}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid var(--border-dark)}
.footer-brand p{margin-top:14px; font-size:.9rem; line-height:1.6; max-width:34ch}
.footer-col h4{color:var(--ink-on-dark); font-size:.85rem; margin-bottom:14px; font-weight:600}
.footer-col li{margin-bottom:10px}
.footer-col a{font-size:.9rem; transition:color .15s ease}
.footer-col a:hover{color:var(--ink-on-dark)}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:22px; font-size:.8rem}
.footer-disclaimer{font-size:.76rem; line-height:1.6; max-width:70ch; margin-top:18px; color:var(--muted-on-dark); opacity:.85}
@media (max-width:720px){ .footer-grid{grid-template-columns:1fr; gap:30px} }

/* ---------- Package detail ---------- */
.pkg-detail{display:grid; grid-template-columns:1fr 320px; gap:48px; align-items:start}
.pkg-detail-main{min-width:0}
.pkg-head{margin-bottom:28px}
.pkg-head .breadcrumb{font-size:.85rem; color:var(--muted); margin-bottom:16px}
.pkg-head .breadcrumb a:hover{color:var(--accent)}
.pkg-head h1{font-size:clamp(1.8rem,3.4vw,2.4rem); display:flex; align-items:center; gap:12px; flex-wrap:wrap; overflow-wrap:anywhere; max-width:100%}
.pkg-head .slug{font-family:var(--font-mono); color:var(--muted); font-size:1rem; font-weight:400; overflow-wrap:anywhere}
.pkg-head .desc{margin-top:10px; color:var(--muted); font-size:1.05rem; max-width:60ch; overflow-wrap:break-word}

.code-block{background:var(--surface-dark); border-radius:var(--radius-md); padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; margin:22px 0; max-width:100%}
.code-block code{color:var(--ink-on-dark); font-size:.92rem; flex:1; min-width:0; overflow-x:auto; white-space:nowrap; scrollbar-width:thin}
.code-block code .prompt{color:var(--accent); margin-right:10px}
.copy-btn{flex-shrink:0; display:inline-flex; align-items:center; gap:6px; background:var(--surface-dark-2); border:1px solid var(--border-dark); color:var(--muted-on-dark); font-size:.78rem; font-weight:600; padding:7px 12px; border-radius:var(--radius-sm); transition:.15s ease}
.copy-btn:hover{color:var(--ink-on-dark); border-color:var(--muted-on-dark)}
.copy-btn svg{width:13px; height:13px}
.copy-btn.is-copied{color:var(--green); border-color:var(--green)}

.readme{color:var(--ink); font-size:1rem; line-height:1.7; max-width:68ch; min-width:0; overflow-wrap:break-word}
.readme h2{font-size:1.35rem; margin:36px 0 14px}
.readme h2:first-child{margin-top:0}
.readme h3{font-size:1.1rem; margin:26px 0 10px}
.readme p{margin-bottom:16px}
.readme ul{list-style:disc; padding-left:22px; margin-bottom:16px}
.readme li{margin-bottom:6px}
.readme pre{background:var(--surface-dark); color:var(--ink-on-dark); border-radius:var(--radius-md); padding:18px 20px; overflow-x:auto; margin-bottom:18px; font-family:var(--font-mono); font-size:.85rem; line-height:1.6}
.readme code:not(pre code){background:var(--accent-tint); color:var(--red-dark); padding:2px 7px; border-radius:4px; font-size:.88em}

.pkg-sidebar{position:sticky; top:92px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:22px; min-width:0; max-width:100%}
.pkg-sidebar .side-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); font-size:.88rem}
.pkg-sidebar .side-row:last-child{border-bottom:0}
.pkg-sidebar .side-row .k{color:var(--muted); flex-shrink:0}
.pkg-sidebar .side-row .v{font-family:var(--font-mono); font-weight:600; overflow-wrap:anywhere; text-align:right; min-width:0}
.pkg-sidebar .tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.pkg-sidebar .tag{font-size:.75rem; font-family:var(--font-mono); background:var(--bg); border:1px solid var(--border); padding:4px 10px; border-radius:var(--radius-pill); color:var(--muted)}

@media (max-width:900px){
  .pkg-detail{grid-template-columns:1fr}
  .pkg-sidebar{position:static; order:-1}
}

/* ---------- Legal pages ---------- */
.legal-hero{background:var(--surface-dark); color:var(--ink-on-dark); padding:56px 0}
.legal-hero h1{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.legal-hero p{color:var(--muted-on-dark); margin-top:10px}
.legal-body{max-width:74ch; margin:0 auto; padding:52px 24px}
.legal-body h2{font-size:1.25rem; margin:34px 0 12px}
.legal-body h2:first-child{margin-top:0}
.legal-body p{margin-bottom:14px; color:var(--ink); line-height:1.7}
.legal-body ul{list-style:disc; padding-left:22px; margin-bottom:14px}
.legal-body li{margin-bottom:8px; line-height:1.6}
.legal-body a{color:var(--accent); text-decoration:underline}
.legal-meta{color:var(--muted); font-size:.85rem; margin-bottom:30px}

/* ---------- Dashboard (front-end publishing) ---------- */
.dash-notice{padding:14px 18px; border-radius:var(--radius-sm); margin-bottom:24px; font-size:.9rem; font-weight:600}
.dash-notice-ok{background:#E9F5EF; color:var(--green); border:1px solid #C7E8D8}
.dash-notice-err{background:var(--accent-tint); color:var(--red-dark); border:1px solid #F3C7BC}

.dash-list-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap}
.dash-list-head h2{font-size:1.3rem}

.dash-table{border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden}
.dash-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid var(--border); flex-wrap:wrap}
.dash-row:last-child{border-bottom:0}
.dash-row-main{display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0}
.dash-row-actions{display:flex; align-items:center; gap:16px; font-size:.85rem; font-weight:600}
.dash-row-actions a{color:var(--accent)}
.dash-row-actions a.dash-delete{color:var(--red-dark)}
.dash-row-actions a:hover{text-decoration:underline}

.dash-status{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:var(--radius-pill); background:var(--bg); border:1px solid var(--border); color:var(--muted)}
.dash-status-publish{background:#E9F5EF; color:var(--green); border-color:#C7E8D8}
.dash-status-draft{background:var(--bg); color:var(--muted)}
.dash-status-pending{background:#FBF3E3; color:var(--gold); border-color:#F0DEB2}
.dash-pin{color:var(--gold); display:inline-flex; align-items:center}
.dash-pin svg{width:13px; height:13px}

.dash-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:32px}
.dash-panel h2{font-size:1.3rem; margin-bottom:20px}
.dash-form{display:flex; flex-direction:column; gap:18px}
.dash-form label{display:flex; flex-direction:column; gap:7px; font-size:.85rem; font-weight:600; color:var(--ink)}
.dash-hint{font-weight:400; color:var(--muted); font-size:.78rem}
.dash-form input[type=text], .dash-form textarea{
  border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:11px 14px;
  font-family:var(--font-body); font-size:.92rem; color:var(--ink); background:var(--bg);
}
.dash-form textarea{resize:vertical; line-height:1.6; font-family:var(--font-mono); font-size:.85rem}
.dash-form input:focus, .dash-form textarea:focus{outline:none; border-color:var(--accent)}
.dash-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:600px){ .dash-grid-2{grid-template-columns:1fr} }
.dash-checkbox{flex-direction:row !important; align-items:center; gap:9px !important; font-weight:500 !important; color:var(--ink) !important}
.dash-checkbox input{width:16px; height:16px; accent-color:var(--accent)}
.dash-actions{display:flex; align-items:center; gap:14px; margin-top:6px; flex-wrap:wrap}
.dash-cancel{color:var(--muted); font-size:.85rem; font-weight:600}
.dash-cancel:hover{color:var(--ink)}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.js-ready .reveal.is-visible{opacity:1; transform:none}
.no-js .reveal, html:not(.js-ready) .reveal{opacity:1; transform:none}