/* Bot Shelf / Orbit. Tokens start from the approved handoff (design-tokens.css) and are tuned against the
   LEFT reference panel. System grotesk and mono only: no font downloads. */
:root{
 --bg:#050607;--panel:#0c0e10;--panel-2:#111417;
 --border:#30363b;--border-strong:#4a535a;
 --text:#f4f6f7;--text-2:#b6bdc4;--muted:#8c969f;
 --accent:#64b9f2;--accent-deep:#3d8fd6;
 --sans:-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
 --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --max:1200px;--pad:clamp(20px,3vw,40px);--gap:24px;--radius:10px;
 color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip;position:relative}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:16px;top:-80px;z-index:20;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}
mark{background:rgba(100,185,242,.16);color:#bfe3fb;padding:0 2px;border-radius:3px}
.muted{color:var(--muted)}

.preview-banner{position:relative;z-index:5;margin:0;padding:10px var(--pad);background:#3a2a05;border-bottom:1px solid #8a6a1a;color:#ffe3a3;font-size:14px;text-align:center}
.link-actions{display:flex;flex-wrap:wrap;gap:10px}

/* Navigation */
.nav{position:relative;z-index:3;display:flex;align-items:center;gap:clamp(20px,4vw,48px);min-height:72px}
.brand{display:inline-flex;align-items:center;min-height:44px;font-weight:800;font-size:22px;letter-spacing:-.01em;text-decoration:none;line-height:1}
.nav-links{display:flex;gap:clamp(18px,3vw,40px);font-size:15px;color:var(--text-2)}
.nav-links a{text-decoration:none;padding:12px 0}
.nav-links a:hover{color:var(--text)}
.icon-button{margin-left:auto;display:inline-grid;place-items:center;width:44px;height:44px;margin-right:-10px;border:0;border-radius:50%;background:none;color:var(--text);text-decoration:none}
.icon-button:hover{background:rgba(255,255,255,.06)}

/* Hero */
.hero{position:relative}
.hero-art{position:absolute;z-index:0;right:0;top:-72px;width:min(58vw,960px);aspect-ratio:760/520;pointer-events:none}
.hero-inner{position:relative;z-index:1;padding-top:clamp(40px,6vw,76px);padding-bottom:8px}
.eyebrow{font:500 12px/1.4 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--text-2)}
.hero h1{margin-top:clamp(14px,1.6vw,22px);font-weight:800;font-size:clamp(46px,7.8vw,112px);line-height:.98;letter-spacing:-.045em;max-width:10.5em}
.subtitle{margin-top:clamp(16px,1.8vw,26px);font-size:clamp(17px,1.75vw,25px);line-height:1.4;color:var(--text)}
.search{position:relative;display:flex;align-items:center;gap:14px;width:min(80%,900px);min-height:68px;margin-top:clamp(24px,2.6vw,34px);padding:8px 8px 8px 22px;background:rgba(14,17,20,.86);border:1px solid var(--border-strong);border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(100,185,242,.18)}
.search-icon{flex:none;color:var(--text)}
.search input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:18px;padding:10px 0}
.search input::placeholder{color:var(--muted);opacity:1}
.search input::-webkit-search-cancel-button{filter:invert(1);opacity:.6;cursor:pointer}
.search-go{flex:none;display:inline-grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8fd0fa,var(--accent) 45%,var(--accent-deep));color:#fff;box-shadow:0 0 22px rgba(100,185,242,.35)}
.search-go:hover{filter:brightness(1.08)}
.search-go:focus-visible{outline-color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{min-height:44px;padding:0 22px;border:1px solid var(--border-strong);border-radius:999px;background:transparent;color:var(--text);font-size:14px;font-weight:500}
.chip:hover{border-color:var(--text-2)}
.chip[aria-pressed=true]{background:var(--text);border-color:var(--text);color:var(--bg)}
.chip-clear{margin-top:16px;border-color:var(--accent);color:#bfe3fb}

/* Featured / list */
.templates{position:relative;z-index:1;margin-top:clamp(48px,6vw,72px)}
.rule-head{display:flex;align-items:center;gap:18px;min-height:44px}
.label{font:500 12px/1.4 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.rule{flex:1;height:1px;background:var(--border)}
.browse{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:0;background:none;padding:0;font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.browse:hover{color:#9fd5fb}
.count{min-height:0;font-size:14px;color:var(--muted);margin-top:4px}
.count:empty{display:none}
.cards{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.card{display:flex;gap:22px;min-height:0;padding:16px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--border);border-radius:var(--radius)}
.card:hover{border-color:var(--border-strong)}
.card-art{flex:none;width:clamp(96px,9vw,124px);align-self:stretch;height:auto;min-height:210px;border:1px solid #20262b;border-radius:6px;background:#050607}
.card-figure,.detail-figure{background:#07090b}
.card-art-media{position:relative;overflow:hidden}
.card-art-media img,.card-art-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.detail-art-img{object-fit:cover;height:auto}
.not-found-art{display:block;width:min(100%,720px);height:auto;margin:0 0 28px;border-radius:var(--radius)}
.card-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;flex:1;padding-block:4px}
.card h3{font-size:clamp(19px,1.6vw,23px);font-weight:700;line-height:1.2;letter-spacing:-.015em}
.card-title{text-decoration:none}
.card-title:hover{text-decoration:underline;text-underline-offset:4px}
.card-desc{font-size:15px;line-height:1.5;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border:1px solid var(--border-strong);border-radius:999px;font-size:13px;color:var(--text)}
.flag{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stars{font-size:13px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.view{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:auto;border:1px solid var(--border-strong);border-radius:8px;font-size:14px;font-weight:500;text-decoration:none;color:var(--text)}
.view:hover{border-color:var(--text-2);background:rgba(255,255,255,.04)}
.card-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--text-2)}
.touch{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.touch::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.touch-reads::before{background:#6fd3a0}.touch-drafts::before{background:var(--accent)}.touch-acts::before{background:#f2b84b}
.works{color:var(--muted)}
.card-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:auto}
.card-actions>*{white-space:nowrap}
.card-actions .view{margin-top:0;flex:1}
.button-small{min-height:44px;padding:8px 16px;font-size:14px;flex:1}
.toolbar{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:14px}
.select{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.select select{min-height:38px;max-width:220px;padding:6px 30px 6px 12px;border:1px solid var(--border-strong);border-radius:8px;background-color:var(--panel);background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;color:var(--text);font:inherit;font-size:14px;appearance:none;-webkit-appearance:none}
.select select:hover{border-color:var(--text-2)}
.facts-label{font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--muted)}
.facts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 0}
.facts-grid div{padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:var(--panel)}
.facts-grid dt{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.facts-grid dd{margin:4px 0 0;font-weight:600}
.facts-note{margin-top:12px}
.facts-sub{margin-top:20px;font-size:16px;font-weight:700}
.uses{margin-top:8px}
.more{display:flex;margin:22px auto 0}
.sample-note{margin-top:18px;font-size:13px;color:var(--muted);max-width:70ch}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:30;max-width:calc(100% - 32px);background:var(--text);color:var(--bg);padding:11px 16px;border-radius:8px;font-size:14px}
.toast:empty{display:none}
.static-list{padding-left:18px;color:var(--text-2)}
.static-list span{color:var(--muted);font-size:14px}

/* Empty state */
.empty{margin-top:18px;padding:32px;border:1px dashed var(--border-strong);border-radius:var(--radius)}
.empty h3{font-size:24px;font-weight:700;letter-spacing:-.015em}
.empty p{margin-top:8px;color:var(--text-2);max-width:60ch}
.empty-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border:1px solid var(--text);border-radius:8px;background:var(--text);color:var(--bg);font-size:15px;font-weight:600;text-decoration:none}
.button:hover{background:#fff}
.button-quiet{background:transparent;color:var(--text);border-color:var(--border-strong)}
.button-quiet:hover{background:rgba(255,255,255,.05);border-color:var(--text-2)}
.button-accent{background:var(--accent);border-color:var(--accent);color:#04121c}
.button:disabled{opacity:.6;cursor:progress}
.button-accent:hover{background:#8fd0fa;border-color:#8fd0fa}

/* Submit */
.suggest{margin-top:clamp(56px,7vw,88px)}
.suggest-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:28px 56px;padding:clamp(22px,3vw,36px);border:1px solid var(--border);border-radius:var(--radius);background:var(--panel)}
.suggest h2{font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.suggest-copy p{margin-top:12px;color:var(--text-2);max-width:42ch}
.suggest-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;align-content:start}
.field{display:grid;gap:6px}
.field:first-child{grid-column:1/-1}
.field label{font-size:14px;font-weight:600}
.optional{font-weight:400;color:var(--muted)}
.field input{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--border-strong);border-radius:8px;background:var(--bg);font-size:16px}
.field input::placeholder{color:#6e7880}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(100,185,242,.18)}
.field input[aria-invalid=true]{border-color:#ff9d8f}
.field-error{font-size:13px;color:#ffb3a8}
.field-error:empty{display:none}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.suggest-actions{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.suggest-status{font-size:14px;color:var(--text-2)}

/* Footer */
.footer{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin-top:clamp(48px,6vw,72px);padding-block:22px 36px;border-top:1px solid var(--border);font-size:13px;color:var(--text-2)}
.footer.wrap{max-width:calc(var(--max) - 2 * var(--pad));padding-inline:0}
.brand-small{min-height:0;font-size:15px;color:var(--text)}

/* Detail */
.detail{position:relative;z-index:1;padding-top:12px}
.crumbs{display:flex;gap:10px;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--text-2);text-underline-offset:3px}
.crumbs a:hover{color:var(--text)}
.detail-head{display:flex;gap:clamp(20px,3vw,36px);align-items:stretch;padding:28px 0 32px;border-bottom:1px solid var(--border)}
.detail-art{flex:none;width:clamp(96px,12vw,150px);aspect-ratio:1/2;border:1px solid #20262b;border-radius:8px}
.detail-head-text{min-width:0}
.kicker{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kicker-cat{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border:1px solid var(--border-strong);border-radius:999px;font-size:13px}
.detail-head .flag{font-size:12px}
.detail h1{margin:14px 0 16px;font-weight:800;font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-.04em;max-width:18ch}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--text);max-width:56ch}
.label-inline,.lede .label{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.byline{margin-top:14px;font-size:15px;color:var(--text-2)}
.byline strong{color:var(--text);font-weight:600}
.jump{display:inline-block;margin-top:14px;font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);text-decoration:none;padding:10px 0}
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,5vw,64px)}
.block{scroll-margin-top:16px;padding:30px 0;border-bottom:1px solid var(--border)}
.block:last-child{border-bottom:0}
.block h2{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:700;letter-spacing:-.015em}
.step-no{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid var(--border-strong);border-radius:50%;font:500 13px/1 var(--mono);color:var(--text)}
.block-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.checklist,.steps{margin:16px 0 0;padding-left:22px;color:var(--text-2)}
.checklist li,.steps li{padding:3px 0}
.checklist li::marker{color:var(--accent)}
.steps li::marker{color:var(--muted)}
.note{margin-top:14px;font-size:14px;color:var(--muted)}
.missing{margin-top:14px;padding:10px 14px;border:1px dashed var(--border-strong);border-radius:8px;font-size:15px;color:var(--text-2)}
code{font:.92em var(--mono)}
pre{margin:18px 0 0;padding:22px 24px;white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.75 var(--mono);color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.status{min-height:1.6em;margin-top:10px;font-size:15px;color:var(--accent)}
.link-only{margin-top:18px;padding:20px 22px;border:1px dashed var(--border-strong);border-radius:var(--radius);display:flex;flex-direction:column;align-items:flex-start;gap:14px;color:var(--text-2)}
.meta{margin-top:30px;align-self:start;position:sticky;top:24px;padding:6px 20px 20px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.meta dl{margin:0}
.meta dl>div{padding:12px 0;border-bottom:1px solid var(--border)}
.meta dt{font:500 11px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.meta dd{margin:4px 0 0;font-size:15px}
.meta dd a{color:var(--accent)}
.meta .button{width:100%;margin-top:18px}
.source-link{color:var(--accent)}
.star-count{font-weight:600}
.tag-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0}
.tag-list a{display:inline-block;padding:3px 10px;border:1px solid var(--border-strong);border-radius:999px;font-size:13px;color:var(--text-2);text-decoration:none}
.tag-list a:hover{color:var(--text);border-color:var(--text-2)}
.not-found{padding-block:72px 24px}
.not-found h1{margin-top:16px}
.not-found .lede{margin-bottom:28px;color:var(--text-2)}

@media (max-width:1100px){
 .card{gap:16px}
 .card-art{width:clamp(96px,12vw,130px)}
}
@media (max-width:860px){
 .detail-grid{grid-template-columns:1fr;gap:0}
 .meta{position:static}
 .suggest-panel{grid-template-columns:1fr}
}
@media (max-width:760px){
 .nav{min-height:60px;gap:18px}
 .nav-links{gap:16px;font-size:13px}
 .hero-art{width:82vw;top:-30px;right:-6vw;opacity:.55}
 .hero-inner{padding-top:28px}
 .hero h1{font-size:clamp(40px,12vw,52px);letter-spacing:-.04em}
 .subtitle{font-size:17px;max-width:24ch}
 .search{width:100%;min-height:58px;padding-left:16px;gap:10px}
 .search input{font-size:16px}
 .search-go{width:44px;height:44px}
 .chips{gap:8px}
 .chip{padding:0 16px}
 .cards{grid-template-columns:1fr;gap:14px}
 .card{padding:14px;gap:14px}
 .card-art{width:96px;min-height:190px}
 .card h3{font-size:19px}
 .facts-grid{grid-template-columns:1fr}
 .select{flex:1 1 100%}.select select{flex:1;max-width:none}
 .suggest-form{grid-template-columns:1fr}
 .suggest-actions .button{width:100%}
 .footer.wrap{margin-inline:var(--pad)}
 .detail-head{flex-direction:column}
 .detail-art{width:100%;aspect-ratio:auto;height:120px}
 .detail-art-img{height:160px}
 pre{padding:16px;font-size:14px}
 .block-head .button{width:100%}
}
@media (max-width:400px){
 .nav-links a:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media (forced-colors:active){.chip[aria-pressed=true]{outline:2px solid CanvasText}}
@media print{.nav,.hero-art,.search,.chips,.suggest,.footer,#copy,#copy-link{display:none}}