/* terminal fonts: system monospace (Claude Code aesthetic) */

:root { --bg:#101010; --panel:#171717; --line:#2a2a2a; --text:#eaeaea; --muted:#777; --green:#ff7a1a; --green-dim:#cc5f14; --orange:#ff9b62; --amber-dim:#ffab5c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,'Liberation Mono',monospace; -webkit-font-smoothing:antialiased; }
body:before { content:''; position:fixed; inset:0; pointer-events:none; opacity:0; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 70%); }
a { color:inherit; text-decoration:none; }
.shell { max-width:1440px; margin:auto; padding:0 42px; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font-family:'DM Mono',monospace; font-size:12px; }
.brand { display:flex; align-items:center; gap:9px; text-transform:uppercase; letter-spacing:.03em; }
.brand-mark { color:var(--green); font-size:24px; line-height:0; transform:rotate(-20deg); display:inline-block; }
.brand-tag { color:var(--muted); }
.nav { display:flex; align-items:center; gap:28px; color:var(--muted); text-transform:lowercase; }
.nav a:hover { color:var(--green); }
.nav-cta { color:var(--green); border:1px solid var(--green-dim); padding:9px 12px; }
.menu-toggle { display:none; color:var(--green); background:none; border:0; font:inherit; }
.section-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:24px; }
.hero { padding:112px 0 120px; }
.hero-copy { grid-column:1 / span 7; }
.hero-copy-wide { grid-column:1 / -1; }
.hero-copy-wide .hero-lede { max-width:620px; }
.eyebrow { color:var(--green); font:11px 'DM Mono',monospace; letter-spacing:.12em; }
.live-dot { display:inline-block; width:7px; height:7px; margin:0 7px 1px 0; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
h1,h2,h3,p { margin-top:0; }
h1 { margin:25px 0 25px; font-size:clamp(58px,8vw,116px); line-height:.89; letter-spacing:-.075em; font-weight:600; }
h1 em,h2 em { color:var(--green); font-style:normal; }
.hero-lede { max-width:530px; color:#9a9a9a; font-size:18px; line-height:1.5; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin:34px 0 25px; }
.button { display:inline-flex; align-items:center; gap:17px; padding:13px 16px; font:12px 'DM Mono',monospace; text-transform:lowercase; border:1px solid var(--line); }
.button-primary { background:var(--green); color:#10150e; border-color:var(--green); }
.button-primary:hover { background:var(--amber-dim); }
.button-quiet { color:var(--muted); }
.button-quiet:hover { border-color:var(--green-dim); color:var(--green); }
.hero-note { color:var(--muted); font:11px 'DM Mono',monospace; }.check { color:var(--green); margin-right:8px; }
.hero-terminal { grid-column:9 / span 4; align-self:center; border:1px solid var(--line); background:rgba(13,17,15,.85); box-shadow:18px 18px 0 rgba(185,255,112,.04); }
.terminal-head,.terminal-foot { display:flex; justify-content:space-between; padding:13px 15px; color:var(--muted); font:10px 'DM Mono',monospace; border-bottom:1px solid var(--line); }.status { color:var(--green); }
.terminal-body { padding:19px 15px 14px; font:11px 'DM Mono',monospace; }.muted { color:var(--muted); }.green { color:var(--green); }
.result-line { display:grid; grid-template-columns:28px 1fr 18px; align-items:center; gap:8px; padding:15px 0; border-bottom:1px solid #262626; }.result-number,.arrow { color:var(--green-dim); }.result-line strong { display:block; font-weight:400; color:var(--text); }.result-line small { display:block; margin-top:5px; color:var(--muted); font-size:9px; }.arrow { text-align:right; }.terminal-foot { border:0; padding:17px 0 0; font-size:9px; }
.ticker { display:flex; align-items:center; justify-content:space-around; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:21px 0; color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:.1em; }.ticker i { color:var(--green); font-style:normal; }
.services { padding:120px 0 125px; }.section-intro { grid-column:1 / span 4; }.section-intro h2,.manifesto h2,.final-cta h2 { margin:21px 0 20px; font-size:clamp(39px,4.5vw,67px); line-height:.96; letter-spacing:-.06em; }.section-intro p,.manifesto-copy { color:var(--muted); font-size:15px; line-height:1.6; max-width:310px; }
.catalog-head { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }.catalog-head h2 { margin:21px 0 0; font-size:clamp(39px,4.5vw,67px); line-height:.96; letter-spacing:-.06em; }
.filter-wrap { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:38px; font:10px 'DM Mono',monospace; }.filter-label { width:100%; color:var(--muted); margin-bottom:3px; }.filter { border:1px solid var(--line); background:none; color:var(--muted); padding:7px 10px; font:inherit; cursor:pointer; }.filter.active,.filter:hover { color:var(--bg); background:var(--green); border-color:var(--green); }
.service-list { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }.service-card { min-height:250px; display:flex; flex-direction:column; padding:21px; background:var(--panel); border:1px solid var(--line); transition:transform .2s,border-color .2s; }.service-card:hover { transform:translateY(-4px); border-color:var(--green-dim); }.service-card.featured { background:linear-gradient(145deg,#1a1a1a,#0d110f); border-color:#8a6a2f; }.service-card.hidden { display:none; }.card-top,.card-bottom { display:flex; justify-content:space-between; align-items:center; font:10px 'DM Mono',monospace; }.service-index { color:var(--green); }.pill { color:var(--muted); }.service-card h3 { margin:36px 0 12px; font-size:21px; letter-spacing:-.04em; font-weight:500; }.service-card p { color:var(--muted); font-size:13px; line-height:1.5; }.card-bottom { margin-top:auto; padding-top:20px; color:var(--muted); }.card-bottom b { color:var(--text); font-weight:400; }.card-bottom a { color:var(--green); }.card-bottom a:hover { text-decoration:underline; }
.manifesto { padding:110px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.manifesto > .eyebrow { grid-column:1 / span 4; }.manifesto > div:last-child { grid-column:6 / span 7; }.manifesto-copy { max-width:480px; font-size:17px; }
.proof { padding:120px 0; }.proof-grid { grid-column:6 / span 7; display:grid; grid-template-columns:1fr 1fr; gap:10px; }.proof-card { min-height:183px; display:flex; flex-direction:column; justify-content:center; padding:22px; background:var(--panel); border:1px solid var(--line); }.proof-number { color:var(--green); font-size:44px; letter-spacing:-.06em; }.proof-card span:nth-child(2) { margin:7px 0 12px; font-size:14px; }.proof-card small { color:var(--muted); font:10px/1.45 'DM Mono',monospace; }
.products { padding:0 0 120px; }.products > .cmd-line { grid-column:1 / span 4; align-self:start; }.product-links { grid-column:6 / span 7; border-top:1px solid var(--line); }.product-links a { display:flex; justify-content:space-between; align-items:center; padding:20px 0; border-bottom:1px solid var(--line); }.product-links a:hover b,.product-links a:hover strong { color:var(--green); }.product-links b,.product-links small { display:block; }.product-links b { font-size:17px; font-weight:500; }.product-links small { margin-top:5px; color:var(--muted); font:10px 'DM Mono',monospace; }.product-links strong { color:var(--muted); font:17px 'DM Mono',monospace; }
.final-cta { padding:110px 0 120px; border-top:1px solid var(--line); }.final-cta .cmd-line,.final-cta h2,.final-cta p,.final-cta .hero-actions { grid-column:3 / span 8; }.final-cta h2 { font-size:clamp(55px,8vw,105px); margin-bottom:22px; }.final-cta p { color:var(--muted); font-size:16px; }.final-cta .hero-actions { margin-top:8px; }
.footer { display:flex; justify-content:space-between; gap:20px; padding:22px 0; border-top:1px solid var(--line); color:var(--muted); font:10px 'DM Mono',monospace; }.footer a { color:var(--green); }
@media (max-width:800px) { .shell { padding:0 20px; }.topbar { height:65px; }.nav { display:none; position:absolute; top:65px; left:0; right:0; z-index:2; padding:20px; background:var(--panel); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; }.nav.open { display:flex; }.menu-toggle { display:block; cursor:pointer; }.hero { padding:76px 0 80px; }.hero-copy,.hero-terminal,.section-intro,.service-list,.portfolio-feat > .cmd-line,.portfolio-feat > div:last-child,.products > .cmd-line,.proof-grid,.product-links,.final-cta .cmd-line,.final-cta h2,.final-cta p,.final-cta .hero-actions { grid-column:1 / -1; }.hero-terminal { margin-top:35px; }.ticker { overflow:hidden; gap:25px; justify-content:flex-start; white-space:nowrap; }.ticker span:nth-of-type(n+4),.ticker i:nth-of-type(n+4) { display:none; }.services,.proof { padding:80px 0; }.section-intro p { max-width:500px; }.filter-wrap { margin:28px 0 30px; }.service-list { grid-template-columns:1fr; }.service-card { min-height:220px; }.proof-grid { grid-template-columns:1fr 1fr; }.products { padding-bottom:80px; }.final-cta { padding:80px 0; }.footer { flex-direction:column; font-size:9px; } }
@media (max-width:430px) { h1 { font-size:58px; }.proof-grid { grid-template-columns:1fr; }.brand-tag { display:none; }.hero-actions .button { width:100%; justify-content:space-between; } }
@media (max-width:1100px) { .service-list { grid-template-columns:1fr 1fr; } }
@media (max-width:700px) { .service-list { grid-template-columns:1fr; }.catalog-head { flex-direction:column; align-items:flex-start; } }
.docs-main,.how-main { padding:100px 0 120px; max-width:1080px; }.docs-title { margin:25px 0; font-size:clamp(55px,8vw,105px); line-height:.9; letter-spacing:-.07em; }.docs-lede { max-width:570px; color:var(--muted); font-size:18px; line-height:1.5; }.docs-layout { display:grid; grid-template-columns:210px 1fr; gap:70px; margin-top:90px; }.docs-aside { display:flex; flex-direction:column; gap:16px; align-self:start; position:sticky; top:25px; font:11px 'DM Mono',monospace; }.docs-aside span { color:var(--green); margin-bottom:7px; }.docs-aside a { color:var(--muted); }.docs-aside a:hover { color:var(--green); }.docs-content { border-top:1px solid var(--line); }.doc-section { display:grid; grid-template-columns:52px 1fr; gap:22px; padding:32px 0 42px; border-bottom:1px solid var(--line); }.doc-number { color:var(--green); font:12px 'DM Mono',monospace; }.doc-section h2 { margin:0 0 13px; font-size:27px; letter-spacing:-.04em; }.doc-section p { color:var(--muted); line-height:1.6; font-size:14px; }.doc-section pre { margin:20px 0 0; padding:18px; overflow:auto; background:#151515; border:1px solid var(--line); color:#e8e6df; font:11px/1.7 'DM Mono',monospace; }.route { display:flex; gap:20px; padding:12px 0; margin:0!important; border-bottom:1px solid #262626; }.route code { min-width:95px; color:var(--green); }.route span { color:var(--muted); }.roadmap-done { color:var(--green); margin-right:8px; }.roadmap-next { color:var(--muted); margin-right:8px; }.how-main { max-width:1100px; }.steps { margin-top:85px; border-top:1px solid var(--line); }.step { display:grid; grid-template-columns:55px 1fr 90px; gap:25px; align-items:start; padding:30px 0; border-bottom:1px solid var(--line); }.step > span { color:var(--green); font:12px 'DM Mono',monospace; }.step h2 { margin:0 0 10px; font-size:28px; letter-spacing:-.04em; }.step p { max-width:550px; color:var(--muted); line-height:1.6; font-size:14px; }.step > b { color:var(--muted); font:10px 'DM Mono',monospace; text-align:right; }.buyer-box { margin-top:100px; padding:27px; border:1px solid var(--line); background:var(--panel); }.buyer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:28px; }.buyer-grid strong,.buyer-grid span { display:block; }.buyer-grid strong { margin-bottom:8px; }.buyer-grid span { color:var(--muted); font-size:13px; line-height:1.5; }
@media (max-width:800px) { .docs-main,.how-main { padding:75px 0 80px; }.docs-layout { grid-template-columns:1fr; gap:35px; margin-top:60px; }.docs-aside { position:static; display:grid; grid-template-columns:1fr 1fr; gap:12px; }.docs-aside span { grid-column:1 / -1; }.step { grid-template-columns:40px 1fr; gap:15px; }.step > b { grid-column:2; text-align:left; }.buyer-grid { grid-template-columns:1fr; gap:20px; } }

/* --- featured: agentic portfolio --- */
.portfolio-feat { padding:115px 0; border-top:1px solid var(--line); background:linear-gradient(160deg,#171717 0%,#101010 55%); }.portfolio-feat > .cmd-line { grid-column:1 / span 4; align-self:start; }.portfolio-feat > div:last-child { grid-column:6 / span 7; }.portfolio-feat h2 { margin:21px 0 20px; font-size:clamp(39px,4.5vw,67px); line-height:.96; letter-spacing:-.06em; }.portfolio-feat p { max-width:480px; color:var(--muted); font-size:15px; line-height:1.6; }.portfolio-feat .hero-actions { margin:30px 0 0; }.portfolio-feat .feature-list { margin:0; padding:0; list-style:none; }.portfolio-feat .feature-list li { display:flex; gap:12px; padding:13px 0; border-bottom:1px solid #262626; color:var(--muted); font-size:14px; }.portfolio-feat .feature-list li::before { content:'✓'; color:var(--green); font:12px 'DM Mono',monospace; }

/* --- service pages --- */
.svc-main { padding:100px 0 120px; max-width:1080px; }.svc-kicker { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }.svc-kicker .pill { border:1px solid var(--line); padding:8px 11px; color:var(--muted); font:10px 'DM Mono',monospace; }.svc-kicker .pill b { color:var(--green); font-weight:400; }.svc-meta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:34px 0 60px; }.svc-meta .price-tag { color:var(--green); font:12px 'DM Mono',monospace; }.svc-block { margin-top:75px; }.svc-block > h2 { margin:16px 0 8px; font-size:32px; letter-spacing:-.04em; }.svc-block > p { max-width:640px; color:var(--muted); font-size:15px; line-height:1.6; }.deliv { margin:24px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }.deliv li { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:14px; line-height:1.55; }.deliv li::before { content:'✓'; color:var(--green); font:12px 'DM Mono',monospace; flex-shrink:0; }.deliv b { color:var(--text); font-weight:500; }.port-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:28px; }.port-card { background:var(--panel); border:1px solid var(--line); }.port-card:hover { border-color:var(--green-dim); }.port-cap { display:flex; justify-content:space-between; gap:10px; padding:13px 16px; border-top:1px solid var(--line); font:10px 'DM Mono',monospace; }.port-cap b { display:block; color:var(--text); font-weight:400; font-size:11px; }.port-cap span { color:var(--muted); }.thumb { aspect-ratio:16/10; padding:18px; overflow:hidden; background:#151515; font:13px/1.6 'DM Mono',monospace; }.thumb .tag { color:var(--green); letter-spacing:.1em; font-size:11px; }.mock-tweet { padding:11px 0; border-bottom:1px solid #262626; }.mock-tweet:last-child { border-bottom:0; }.mt-head { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:11px; }.mt-ava { width:13px; height:13px; border-radius:50%; background:linear-gradient(135deg,var(--green),#3d5a2a); }.mt-name { color:var(--text); }.mt-line { height:6px; margin:7px 0 0; background:#1c261f; border-radius:3px; }.mt-line.short { width:62%; }.mt-line.green { background:#3d5a2a; }.mock-post { border:1px solid #262626; padding:13px; }.mock-post p { margin:0; color:#e8e6df; line-height:1.55; }.mock-post .hash { color:var(--green-dim); }.mock-article h4 { margin:0 0 8px; color:var(--text); font-size:16px; letter-spacing:-.03em; font-weight:500; }.mock-article .deck { color:var(--muted); }.mock-article .body { margin-top:10px; }.mock-article .body .mt-line { margin-top:6px; }.mock-article .quote { margin:12px 0 0; padding:9px 12px; border-left:2px solid var(--green); background:#10150e; color:#e8e6df; }.mock-article .src { margin-top:11px; color:var(--green-dim); font-size:11px; }.mock-script table { width:100%; border-collapse:collapse; font-size:12px; }.mock-script th { color:var(--green); text-align:left; font-weight:400; padding:5px 7px; border-bottom:1px solid #26302a; }.mock-script td { padding:6px 7px; border-bottom:1px solid #262626; color:var(--muted); vertical-align:top; }.mock-script td:first-child { color:var(--text); }.mock-chart { display:flex; align-items:flex-end; gap:7px; height:56px; margin-top:13px; }.mock-chart i { flex:1; background:linear-gradient(180deg,#3d5a2a,#262626); display:block; border-radius:2px 2px 0 0; }.mock-chart i:nth-child(1) { height:28%; }.mock-chart i:nth-child(2) { height:44%; }.mock-chart i:nth-child(3) { height:38%; }.mock-chart i:nth-child(4) { height:66%; }.mock-chart i:nth-child(5) { height:82%; }.mock-chart i:nth-child(6) { height:100%; }.mock-chart i:nth-child(7) { height:93%; }
/* --- vibecode / agentic portfolio page --- */
.prompt-box { margin:26px 0 0; padding:24px; overflow:auto; background:#151515; border:1px solid var(--line); color:#e8e6df; font:11px/1.8 'DM Mono',monospace; white-space:pre-wrap; }.prompt-box b { color:var(--green); font-weight:400; }.tree { margin:26px 0 0; padding:24px; overflow:auto; background:#151515; border:1px solid var(--line); color:var(--muted); font:11px/1.9 'DM Mono',monospace; }.tree b { color:var(--green); font-weight:400; }.tree span { color:#e8e6df; }.spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:28px; }.spec-card { padding:21px; background:var(--panel); border:1px solid var(--line); }.spec-card h3 { margin:0 0 12px; font-size:18px; letter-spacing:-.04em; font-weight:500; }.spec-card ul { margin:0; padding:0; list-style:none; }.spec-card li { padding:9px 0; border-bottom:1px solid #262626; color:var(--muted); font-size:13px; line-height:1.5; }.spec-card li:last-child { border-bottom:0; }.spec-card li::before { content:'→ '; color:var(--green-dim); }
@media (max-width:800px) { .svc-main { padding:75px 0 80px; }.portfolio-feat { padding:80px 0; }.portfolio-feat > .eyebrow,.portfolio-feat > div:last-child { grid-column:1 / -1; }.portfolio-feat h2 { margin-top:22px; }.port-grid,.spec-grid { grid-template-columns:1fr; }.svc-meta { margin-bottom:40px; }.svc-block { margin-top:55px; }.thumb { aspect-ratio:auto; } }

/* --- service title row: small self-drawing neon icon left of the title, compact hero --- */
.svc-title-row { display:flex; align-items:center; gap:18px; margin:25px 0 0; }
.svc-title-row .docs-title { margin:0; font-size:clamp(47px,6.8vw,89px); }
.svc-icon { flex-shrink:0; color:var(--green); filter:drop-shadow(0 0 6px rgba(255,122,26,.6)) drop-shadow(0 0 16px rgba(255,122,26,.3)); }
.svc-main .docs-lede { max-width:820px; }
.neon-draw path, .neon-draw circle, .neon-draw line, .neon-draw rect {
  stroke-dasharray:640; stroke-dashoffset:640; animation:neon-draw-in 2.2s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes neon-draw-in { to { stroke-dashoffset:0; } }
@media (max-width:800px) { .svc-title-row { gap:12px; } .svc-icon { width:40px!important; height:40px!important; } }

/* --- fallback link under X embeds, in case the widget fails to render --- */
.tweet-fallback { display:block; margin-top:8px; text-align:center; font:11px 'DM Mono',monospace; color:var(--green-dim); }
.tweet-fallback:hover { color:var(--green); }

/* --- mermaid process flow (compact, replaces 3-card steps) --- */
.svc-block pre.mermaid { background:#151515; border:1px solid var(--line); padding:28px 20px; margin-top:24px; display:flex; justify-content:center; overflow-x:auto; }
.svc-block pre.mermaid svg { max-width:100%; }

/* --- real X embeds (associated work) --- */
.tweet-card { padding:14px; display:flex; justify-content:center; }
.tweet-card .twitter-tweet { margin:0 !important; }

/* --- live site thumbnail: real iframe, scaled down to read as a preview --- */
.site-thumb { position:relative; width:100%; height:260px; overflow:hidden; background:#000; border-bottom:1px solid var(--line); }
.site-thumb iframe { position:absolute; top:0; left:0; width:250%; height:250%; border:0; transform:scale(.4); transform-origin:0 0; pointer-events:none; }

/* --- real YouTube embeds (video production portfolio) --- */
.video-grid { grid-template-columns:1fr 1fr 1fr; }
.yt-embed { position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden; background:#000; }
.yt-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-embed.portrait { padding-bottom:177.78%; max-width:220px; margin:0 auto; }
@media (max-width:1000px) { .video-grid { grid-template-columns:1fr; } }

/* --- API / table mocks for skill pages --- */
.mock-api { padding:16px; overflow:hidden; background:#151515; color:#e8e6df; font:12px/1.75 'DM Mono',monospace; white-space:pre-wrap; }
.mock-api .m-key { color:var(--green); }
.mock-api .m-mut { color:var(--muted); }
.mock-api .m-str { color:#ff9b62; }
.mock-table { width:100%; border-collapse:collapse; font:12px/1.6 'DM Mono',monospace; }
.mock-table th { text-align:left; color:var(--green); font-weight:400; letter-spacing:.1em; padding:7px 9px; border-bottom:1px solid var(--line); }
.mock-table td { padding:7px 9px; border-bottom:1px solid #262626; color:var(--muted); vertical-align:top; }
.mock-table td b { color:#e8e6df; font-weight:400; }

/* --- Claude Code CLI chrome --- */
body { padding-bottom:44px; }
.eyebrow::before { content:'❯ '; color:var(--green); }
.claude-bar { display:flex; align-items:center; gap:14px; padding:11px 0 9px; border-bottom:1px solid var(--line); color:var(--muted); font:11px ui-monospace,'SF Mono',Menlo,Consolas,monospace; }
.claude-bar .cb-mark { color:var(--green); font-size:16px; line-height:0; }
.claude-bar .cb-name { color:var(--text); }
.claude-bar .cb-model { margin-left:auto; color:var(--green-dim); }
.cmd-line { color:var(--muted); font:12px ui-monospace,'SF Mono',Menlo,Consolas,monospace; }
.svc-bread { margin-bottom:24px; }
.cmd-line .ps { color:var(--green); margin-right:9px; }
.cmd-out { margin-top:24px; }
.cmd-ok { color:var(--green-dim); font:11px ui-monospace,'SF Mono',Menlo,Consolas,monospace; }
.statusbar { position:fixed; bottom:0; left:0; right:0; z-index:6; display:flex; gap:24px; align-items:center; padding:9px 42px; background:var(--panel); border-top:1px solid var(--line); color:var(--muted); font:10px ui-monospace,'SF Mono',Menlo,Consolas,monospace; }
.statusbar .sb-right { margin-left:auto; color:var(--green-dim); }
.service-list { grid-column:1 / -1; display:flex; flex-direction:column; gap:2px; }
.service-card.row { min-height:0; display:grid; grid-template-columns:40px 1fr auto 140px 22px; gap:14px; align-items:center; padding:14px 16px; background:var(--panel); border:1px solid var(--line); transition:background .15s,border-color .15s; }
.service-card.row:hover { transform:none; border-color:var(--green-dim); background:#1d1d1d; }
.service-card.row .service-index { color:var(--green); }
.service-card.row h3 { margin:0; font-size:15px; font-weight:500; letter-spacing:-.02em; }
.service-card.row .pill { color:var(--muted); font-size:10px; text-align:right; text-transform:lowercase; }
.service-card.row .row-price { color:var(--muted); font:10px ui-monospace,'SF Mono',Menlo,Consolas,monospace; text-align:right; }
.service-card.row .row-go { color:var(--green-dim); text-align:right; transition:transform .15s,color .15s; }
.service-card.row:hover .row-go { color:var(--green); transform:translateX(3px); }
.service-card.row.hidden { display:none; }
@media (max-width:900px) { .service-card.row { grid-template-columns:36px 1fr auto 90px 18px; gap:10px; } .service-card.row .pill { display:none; } .statusbar { padding:8px 20px; gap:16px; } }
@media (max-width:700px) { .service-card.row { grid-template-columns:34px 1fr auto; } .service-card.row .row-price { display:none; } .claude-bar .cb-model,.claude-bar .cb-ver { display:none; } .statusbar .sb-right { display:none; } }