:root {
  color-scheme:light;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px;
  --section-space:clamp(56px,7vw,88px); --card-space:clamp(24px,2.8vw,32px);
  --text-small:12px; --text-label:14px; --text-body:16px; --radius:24px; --ease:cubic-bezier(.2,.7,.3,1);
  --bg:#f5f6f8; --surface:#fff; --soft:#ececf2; --ink:#111116; --muted:#5e5e6a; --line:#d9d9e2;
  --green:#007f44; --on-green:#fff; --blue:#006dff; --violet:#7628ef; --orange:#b54700;
  --green-bg:#e6f8ee; --blue-bg:#e9f2ff; --violet-bg:#f2eaff; --orange-bg:#fff0e5;
  --on-color:#fff; --shadow:0 18px 60px #13131a0b; --logo-filter:invert(1);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",sans-serif;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#05050a; --surface:#15151e; --soft:#272733; --ink:#fff; --muted:#b7b7c2; --line:#3d3d4b;
  --green:#00f08a; --on-green:#00140b; --blue:#2997ff; --violet:#c66dff; --orange:#ff9d00;
  --green-bg:#052018; --blue-bg:#07192b; --violet-bg:#1c0d29; --orange-bg:#291800;
  --on-color:#090910; --shadow:0 18px 60px #00000040; --logo-filter:none;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --bg:#05050a; --surface:#15151e; --soft:#272733; --ink:#fff; --muted:#b7b7c2; --line:#3d3d4b;
    --green:#00f08a; --on-green:#00140b; --blue:#2997ff; --violet:#c66dff; --orange:#ff9d00;
    --green-bg:#052018; --blue-bg:#07192b; --violet-bg:#1c0d29; --orange-bg:#291800;
    --on-color:#090910; --shadow:0 18px 60px #00000040; --logo-filter:none;
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; min-width:300px; font-size:var(--text-body); line-height:1.75; }
::selection { background:var(--green); color:var(--on-green); }
/* No link on these sites is underlined. Colour, weight and a hover shift carry
   the affordance instead, so a link can sit inside a paragraph without the
   line noise an underline adds at this type size. */
a { color:var(--blue); text-decoration:none; transition:color .18s; }
a:hover { color:var(--ink); }
img { max-width:100%; height:auto; }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button,select,summary { cursor:pointer; }
:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
h1,h2,h3,p { margin-top:0; }
p { margin-bottom:var(--space-4); }
h1,h2,h3 { text-wrap:balance; }
p { text-wrap:pretty; }
h1,h2,h3 { color:var(--ink); letter-spacing:-.025em; }
h1 { font-size:clamp(46px,6vw,78px); line-height:1.18; font-weight:800; margin-bottom:var(--space-5); }
h2 { font-size:clamp(30px,3.5vw,44px); line-height:1.3; margin-bottom:var(--space-4); }
h3 { font-size:21px; line-height:1.4; margin-bottom:12px; }
p { line-height:1.8; color:var(--muted); }
.wrap,.site-header,.site-footer { width:min(1160px,calc(100% - 64px)); margin-inline:auto; }
.site-header { min-height:88px; display:flex; align-items:center; gap:var(--space-5); border-bottom:1px solid var(--line); position:relative; z-index:20; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:27px; letter-spacing:-1.3px; color:var(--ink); text-decoration:none; flex:none; }
.brand-mark { width:38px; height:38px; border-radius:11px; overflow:hidden; display:block; }
.brand-mark img { display:block; width:100%; height:100%; filter:var(--logo-filter); }
.brand-mark.app-mark img { filter:none; }
.brand-dot { color:var(--blue); margin-left:-9px; }
.site-header nav { display:flex; gap:var(--space-2); margin-left:auto; }
.site-header nav a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border-radius:12px; color:var(--muted); font-size:var(--text-label); font-weight:550; text-decoration:none; white-space:nowrap; transition:color .18s,background-color .18s; }
.site-header nav a[aria-current="page"] { background:var(--green-bg); color:var(--green); font-weight:700; }
.site-footer nav a[aria-current="page"] { color:var(--green); font-weight:700; }
.header-tools > a[aria-current="page"] { outline:2px solid var(--green); outline-offset:3px; }
.header-tools > .button { white-space:nowrap; }
.header-tools { display:flex; align-items:center; gap:2px; }
.header-tools .github-link { display:grid; place-items:center; min-width:44px; min-height:44px; border-radius:12px; color:var(--muted); font-size:21px; text-decoration:none; flex:none; transition:color .18s,background-color .18s; }
.language-switch,.theme-switch { display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; border-radius:0; background:transparent; line-height:1; flex:none; }
.language-switch::before,.theme-switch::before { content:""; width:1px; height:16px; margin:0 8px; background:var(--line); flex:none; }
.language-switch button,.theme-switch button { position:relative; display:grid; place-items:center; min-width:36px; min-height:44px; padding:0 8px; border:0; border-radius:0; background:transparent; color:var(--muted); font-size:12px; font-weight:700; line-height:1; transition:color .18s; }
.language-switch button { min-width:29px; letter-spacing:.01em; }
.theme-switch button[data-theme-choice="system"] { min-width:42px; font-size:11px; letter-spacing:.01em; }
.theme-switch button i { font-size:15px; }
.theme-switch button + button::before,.language-switch button + button::before { content:""; position:absolute; left:0; top:14px; width:1px; height:16px; background:var(--line); }
.language-switch button[aria-pressed="true"],.theme-switch button[aria-pressed="true"] { color:var(--green); background:transparent; box-shadow:none; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:13px 22px; border:1px solid transparent; border-radius:14px; background:var(--green); color:var(--on-green); font-weight:700; font-size:15px; line-height:1.45; text-decoration:none; transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s,color .18s; }
.button:active { transform:translateY(1px); box-shadow:none; }
.button i,.link i { width:1em; text-align:center; flex:none; font-size:.95em; line-height:1; }
.button.copied { background:var(--green); color:var(--on-green); }
.button.blue { background:var(--blue); color:var(--on-color); }
.button.violet { background:var(--violet); color:var(--on-color); }
.button.orange { background:var(--orange); color:var(--on-color); }
.button.secondary { background:var(--surface); border-color:var(--line); color:var(--ink); }
.button.small { min-height:44px; padding:10px 16px; font-size:13px; }
.button-row { display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-5); }
.wide { width:100%; }
.eyebrow { display:flex; align-items:center; gap:8px; color:var(--green); font-size:12px; font-weight:700; letter-spacing:.07em; margin-bottom:var(--space-4); line-height:1.7; }
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.lead { font-size:18px; max-width:620px; margin-bottom:0; }
/* A hint line always keeps its own breathing room: it used to sit flush under
   the button row that precedes it, which read as one run-on block. */
.fine,.card .fine { color:var(--muted); font-size:var(--text-small); line-height:1.75; margin:12px 0 0; }
.button-row + .fine,.copy-field + .fine { margin-top:14px; }
.hero { display:grid; grid-template-columns:1.08fr 1fr; align-items:center; gap:var(--space-7); padding:var(--section-space) 0; }
.hero h1 span { color:var(--green); }
.hero .fine { margin:20px 0 0; }
.hero-art { position:relative; padding:22px 18px 25px; }
.hero-art::before { content:""; position:absolute; inset:7% -4% 6%; border-radius:50%; background:radial-gradient(ellipse,var(--green-bg),transparent 70%); }
.phone { position:relative; width:min(296px,100%); margin:auto; padding:22px 18px 18px; border:1px solid var(--line); border-radius:36px; background:var(--surface); box-shadow:var(--shadow); transform:rotate(-3deg); }
.phone-top { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--muted); margin-bottom:25px; }
.phone-top .brand { font-size:22px; }
.phone h3 { font-size:24px; margin-bottom:7px; }
.phone-sub { font-size:11px; margin-bottom:19px; }
.app-tile { display:flex; align-items:center; gap:12px; padding:14px 10px; border:1px solid var(--line); border-radius:17px; margin:10px 0; }
.app-tile img,.tile-icon { width:44px; height:44px; border-radius:13px; flex:none; }
.tile-icon { display:grid; place-items:center; font-size:19px; }
.app-tile strong { font-size:13px; display:block; }
.app-tile small { color:var(--muted); font-size:10px; display:block; margin-top:6px; }
.phone-bottom { margin-top:20px; padding-top:17px; border-top:1px solid var(--line); display:flex; justify-content:space-around; color:var(--muted); font-size:16px; }
.phone-bottom i:first-child { color:var(--green); }
.float-note { position:absolute; display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); padding:16px 20px; border-radius:18px; font-size:12px; font-weight:650; z-index:1; }
.float-note.first { top:55px; right:-5px; transform:rotate(5deg); }
.float-note.second { bottom:58px; left:-8px; transform:rotate(3deg); }
.float-note i { color:var(--violet); }
.art-caption { text-align:center; position:relative; margin:24px 0 0; font-size:10px; }
.vibe-shift { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; gap:var(--space-7); padding:0 0 var(--section-space); border-bottom:1px solid var(--line); }
.vibe-shift-copy { max-width:520px; }
.vibe-shift-copy h2 { font-size:clamp(30px,3.5vw,44px); margin-bottom:var(--space-4); }
.vibe-shift-copy h2 strong { color:var(--green); font-weight:800; }
.vibe-shift-copy .lead { margin:0; }
.vibe-programming-list { border-top:1px solid var(--line); }
.vibe-programming-list article { display:grid; grid-template-columns:42px minmax(0,1fr); gap:var(--space-4); padding:20px 0; border-bottom:1px solid var(--line); }
.vibe-programming-list article > span { color:var(--green); font:700 11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; padding-top:4px; }
.vibe-programming-list h3 { font-size:18px; margin-bottom:4px; letter-spacing:-.01em; }
.vibe-programming-list p { margin:0; font-size:14px; }
.color-green { color:var(--green); background:var(--green-bg); }
.color-blue { color:var(--blue); background:var(--blue-bg); }
.color-violet { color:var(--violet); background:var(--violet-bg); }
.color-orange { color:var(--orange); background:var(--orange-bg); }
.section { padding:var(--section-space) 0; }
.section-head { max-width:720px; margin-bottom:var(--space-6); }
.section-head > p:last-child { margin-bottom:0; }
.center { text-align:center; margin-inline:auto; }
.center .eyebrow { justify-content:center; }
.value-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5); }
.card { min-width:0; padding:var(--card-space); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.card p:last-child { margin-bottom:0; }
.card p { font-size:var(--text-label); }
.card > :last-child { margin-bottom:0; }
.big-icon { width:52px; height:52px; border-radius:17px; display:grid; place-items:center; font-size:22px; margin-bottom:var(--space-5); }
.start-band { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); padding:var(--space-6); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.start-band h2 { font-size:29px; margin-bottom:10px; }
.start-band p { margin:0; }
.split { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:var(--space-7); }
.agent-links { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--space-3); margin:var(--space-5) 0; }
.agent-links .agent-or { color:var(--muted); font-size:13px; font-weight:700; text-align:center; }
.agent-link { display:flex; align-items:center; gap:14px; min-width:0; padding:19px; background:var(--surface); border:1px solid var(--line); border-radius:19px; text-decoration:none; color:var(--ink); transition:transform .18s var(--ease),border-color .18s,box-shadow .18s; }
.agent-link:active { transform:translateY(1px); }
.agent-link img { width:56px; height:56px; object-fit:contain; flex:none; }
/* Codex and ChatGPT share OpenAI's mark, so this tile carries the glyph rather
   than a bitmap; it stays black-on-white in both themes, like the logo. */
.agent-link .agent-mark { display:grid; place-items:center; width:56px; height:56px; flex:none; border-radius:16px; background:#fff; border:1px solid var(--line); color:#111116; font-size:30px; }
.agent-link strong { display:block; font-size:18px; }
.agent-link small { display:flex; align-items:center; gap:8px; font-size:var(--text-small); color:var(--muted); margin-top:4px; }
.agent-link small i { font-size:10px; }
.conversation { padding:var(--card-space); background:var(--surface); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); }
.conversation .label { font-size:12px; margin-bottom:24px; }
.bubble { border-radius:19px; padding:20px 23px; max-width:94%; font-size:16px; line-height:1.7; }
.bubble.you { margin-left:auto; background:var(--violet-bg); color:var(--violet); border-bottom-right-radius:5px; }
.bubble.idea { margin:18px 0; background:var(--green-bg); color:var(--green); border-bottom-left-radius:5px; }
.conversation .fine { margin:22px 0 0; }
.vibe-panel { border-block:1px solid var(--line); padding:var(--section-space) 0; background:var(--surface); }
.vibe-panel .split { grid-template-columns:1.2fr 1fr; }
.vibe-word { font-size:clamp(32px,4vw,51px); font-weight:800; line-height:1.15; letter-spacing:-2px; color:var(--violet); margin-bottom:18px; }
.final-cta { text-align:center; padding:var(--section-space) 0; }
.final-cta > .button { margin-top:var(--space-2); }
.final-cta h2 { font-size:clamp(32px,4.5vw,55px); }
.final-cta .button-row { justify-content:center; }
.site-footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:35px; flex-wrap:wrap; padding:35px 0; }
.site-footer p { margin:10px 0 0; font-size:12px; }
.site-footer nav { display:flex; flex-wrap:wrap; align-items:center; gap:22px; }
.site-footer nav a { display:inline-flex; align-items:center; min-height:44px; font-size:var(--text-small); color:var(--muted); text-decoration:none; }
.page-hero { padding:var(--section-space) 0 var(--space-7); }
.page-hero h1 { font-size:clamp(38px,5vw,62px); }
.page-hero .lead { max-width:740px; }
.guide-start { display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--space-5); margin-bottom:var(--section-space); align-items:stretch; }
.step-label { font-size:12px; font-weight:750; color:var(--green); letter-spacing:.5px; margin-bottom:18px; }
.guide-start h2 { font-size:27px; }
.guide-start .card { padding:var(--card-space); }
.guide-start .button-row { margin-bottom:var(--space-4); }
.guide-download-actions { display:grid; grid-template-columns:minmax(0,1fr) 164px; gap:var(--space-5); align-items:center; margin-top:var(--space-5); }
.guide-download-actions .button-row { margin-top:0; }
.guide-download-actions .fine { margin:0; }
.guide-download-qr { display:grid; justify-items:center; gap:7px; min-width:0; padding-left:var(--space-4); border-left:1px solid var(--line); text-align:center; }
.guide-download-qr img { display:block; width:156px; height:156px; border:1px solid var(--line); border-radius:16px; background:#fff; image-rendering:pixelated; }
.guide-download-qr strong { color:var(--ink); font-size:12px; line-height:1.4; }
.guide-download-qr p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.start-icon { display:block; width:78px; height:78px; border-radius:23px; margin:18px 0 24px; filter:var(--logo-filter); }
.app-heading { display:flex; align-items:center; gap:15px; margin:10px 0 24px; }
.app-heading img { width:62px; height:62px; border-radius:18px; }
.app-heading h2,.app-heading h3 { margin:0 0 var(--space-1); }
.app-heading p { margin:0; font-size:12px; }
.app-title-row { display:flex; align-items:center; gap:10px; }
.app-title-row h2 { margin:0; }
.app-github { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 8px; border-radius:9px; color:var(--muted); font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; transition:color .18s,background-color .18s; }
.app-github i { font-size:20px; }
.qr-install { display:grid; grid-template-columns:172px 1fr; gap:25px; align-items:center; margin:26px 0; }
.qr { display:block; width:172px; height:172px; padding:0; background:#fff; border:1px solid var(--line); border-radius:15px; image-rendering:pixelated; }
.qr-steps { margin:0; padding-left:21px; color:var(--ink); font-size:14px; line-height:1.8; }
.qr-steps li+li { margin-top:10px; }
.copy-field { display:flex; gap:9px; align-items:center; margin-top:10px; }
.copy-field input { min-height:44px; min-width:0; width:100%; padding:12px; background:var(--bg); color:var(--muted); border:1px solid var(--line); border-radius:12px; font-size:12px; }
.copy-field .button { flex:none; }
.copy-status { min-height:20px; margin:8px 0 0!important; font-size:12px!important; color:var(--green); }
.guide-deep { padding:var(--space-7) 0; border-top:1px solid var(--line); }
.guide-deep .split { align-items:start; gap:var(--space-7); }
.mini-steps { margin:0 0 var(--space-5); padding-left:23px; color:var(--muted); font-size:15px; line-height:1.85; }
.mini-steps li { padding-left:5px; margin-bottom:10px; }
.mini-steps strong { color:var(--ink); }
.quote-example { padding:26px; border-radius:22px; background:var(--blue-bg); color:var(--blue); font-size:22px; font-weight:650; line-height:1.7; margin:0; }
.quote-example + .fine { margin-top:var(--space-4); }
.idea-examples { display:flex; flex-wrap:wrap; gap:9px; margin:20px 0; }
.idea-examples span { padding:8px 12px; font-size:12px; border-radius:10px; background:var(--soft); color:var(--muted); }
.download-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:42px; align-items:center; padding-bottom:var(--section-space); }
.download-card { padding:var(--card-space); }
.download-card .app-heading { margin-bottom:28px; }
.download-card .app-heading img { filter:var(--logo-filter); }
.download-card h2 { font-size:29px; margin-bottom:8px; }
.download-card .fine { margin:16px 0 0; }
.download-actions { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:var(--space-5); align-items:center; margin-top:var(--space-5); }
.download-primary { min-width:0; }
.download-primary .link { margin-top:var(--space-1); }
.download-qr { display:grid; justify-items:center; gap:11px; min-width:0; padding-left:var(--space-5); border-left:1px solid var(--line); text-align:center; }
.download-qr img { display:block; width:140px; height:140px; border:1px solid var(--line); border-radius:15px; background:#fff; image-rendering:pixelated; }
.download-qr strong { display:block; color:var(--ink); font-size:13px; line-height:1.5; }
.download-qr p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }
.download-next { padding:20px; }
.download-next h2 { font-size:28px; }
.download-next p { font-size:15px; }
.download-next .button + .fine { margin-top:var(--space-4); }
.faq-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:48px; padding-bottom:var(--section-space); }
.contents { position:sticky; top:24px; align-self:start; display:grid; gap:7px; }
.contents a { display:flex; align-items:center; min-height:44px; font-size:13px; color:var(--muted); text-decoration:none; padding:10px 12px; border-radius:12px; }
.contents a:hover { background:var(--soft); color:var(--ink); }
.search-label { display:block; margin-bottom:var(--space-5); }
.search-label span { display:block; font-size:13px; margin-bottom:10px; color:var(--muted); }
.search-label input { width:100%; min-height:50px; border:1px solid var(--line); border-radius:14px; padding:13px 16px; color:var(--ink); background:var(--surface); }
.faq-group { margin-bottom:var(--space-7); }
.faq-group h2 { font-size:25px; }
.faq-group details { border-bottom:1px solid var(--line); }
.faq-group summary { position:relative; list-style:none; min-height:64px; padding:20px 32px 20px 0; color:var(--ink); font-size:15px; font-weight:600; line-height:1.65; }
.faq-group summary::-webkit-details-marker { display:none; }
.faq-group summary::after { content:""; position:absolute; right:6px; top:27px; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .18s; color:var(--muted); }
.faq-group details[open] summary::after { transform:rotate(225deg); top:30px; color:var(--green); }
.faq-group details p,.faq-group details li { font-size:14px; color:var(--muted); line-height:1.9; }
.faq-group details[open] { padding-bottom:var(--space-5); }
.faq-group details[open] summary { color:var(--green); }
.faq-group details p:last-child { margin-bottom:0; }
code { overflow-wrap:anywhere; font-size:.9em; }
.hash { display:block; padding:14px; background:var(--soft); border-radius:12px; font:12px/1.7 ui-monospace,monospace; overflow-wrap:anywhere; margin:14px 0; }
.prose { max-width:780px; padding-bottom:75px; }
.prose section { padding:var(--space-6) 0; border-bottom:1px solid var(--line); }
.prose h2 { font-size:25px; }
.prose p { font-size:15px; }
/* With underlines gone, an inline link keeps its weight as the second cue on
   top of colour, so it is still findable without relying on colour alone. */
.prose a,.fine a { font-weight:650; }
.support-grid { margin-bottom:var(--space-7); }
.support-grid .card { display:flex; flex-direction:column; align-items:flex-start; }
.support-grid .button { margin-top:auto; }
.link { display:inline-flex; min-height:44px; gap:var(--space-2); align-items:center; font-weight:650; font-size:var(--text-label); padding:10px 0; text-decoration:none; }

/* Brand chips name a real service next to its own mark, so a page can show
   what it connects to without a wall of text. The tile is white in both
   themes: most marks are dark, and inverting them would wreck the coloured
   ones. Glyph tiles pin their own ink for the same reason.
   Rows space their children with margins rather than flex gap, because the
   target WebView is Chrome 83 where flex gap is unreliable. */
.brand-row { display:flex; flex-wrap:wrap; margin:var(--space-4) -8px -8px 0; }
/* Inside a card the chips need to pair up rather than stack, so the tight
   variant drops a size. */
.brand-row.tight { margin-top:10px; }
.brand-row.tight .brand-chip { column-gap:8px; padding:6px 11px 6px 7px; border-radius:13px; font-size:12px; }
.brand-row.tight .brand-tile { width:25px; height:25px; border-radius:8px; }
.brand-row.tight .brand-tile img { width:16px; height:16px; }
.brand-row.tight .brand-tile i { font-size:13px; }
.brand-row.tight .brand-chip b { font-size:12px; }
.brand-row.tight .brand-chip small { font-size:10px; }
.brand-chip { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:10px; max-width:100%; margin:0 8px 8px 0; padding:8px 14px 8px 9px; border:1px solid var(--line); border-radius:15px; background:var(--surface); color:var(--ink); font-size:13px; font-weight:650; text-decoration:none; transition:border-color .18s,transform .18s var(--ease); }
.brand-tile { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:#fff; border:1px solid var(--line); }
.brand-tile img { display:block; width:19px; height:19px; object-fit:contain; }
.brand-tile i { font-size:15px; color:#111116; }
.brand-chip b { display:block; font-size:13px; font-weight:750; line-height:1.35; }
.brand-chip small { display:block; color:var(--muted); font-size:11px; font-weight:600; line-height:1.4; }

/* Agent badges mark the places that describe customising an app through
   Hermit's development mode. Any of these agents can do the job, so they are
   joined by 或/or rather than a plus. */
.agent-badges { display:flex; flex-wrap:wrap; align-items:center; margin-top:var(--space-4); }
.agent-badges .brand-tile { width:34px; height:34px; border-radius:10px; }
.agent-badges .brand-tile img { width:23px; height:23px; }
.agent-badges .brand-tile i { font-size:19px; }
.agent-badges .agent-or { margin:0 10px 8px 2px; color:var(--muted); font-size:12px; font-weight:700; }
.agent-badges .agent-note { margin:0 8px 8px 4px; color:var(--muted); font-size:12px; font-weight:600; }
@media(hover:hover) { .brand-chip:hover { transform:translateY(-2px); border-color:var(--blue); } }

/* A single mark in front of a headline, and the tile used by numbered step
   cards, so short lists and process steps are not three paragraphs of text. */
.tile-inline { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:8px; border-radius:8px; background:#fff; border:1px solid var(--line); vertical-align:-5px; }
.tile-inline img { display:block; width:16px; height:16px; object-fit:contain; }
.tile-inline i { font-size:13px; color:#111116; }
.step-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:14px; border-radius:14px; background:var(--soft); color:var(--ink); font-size:18px; }
.skip { position:fixed; top:-100px; left:15px; padding:12px; background:var(--surface); z-index:100; }
.skip:focus { top:15px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden] { display:none!important; }
.happ-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:var(--space-5); margin-bottom:var(--space-7); }
.happ-card .app-heading { margin:0; }
.happ-card .app-heading img { width:56px; height:56px; border-radius:16px; }
.happ-desc { margin:var(--space-4) 0 0; color:var(--muted); font-size:14px; line-height:1.7; }
.happ-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:var(--space-4); }
.happ-actions .app-github { display:none; }
:root[lang="en"] .lang-zh { display:none; }
:root[lang="zh-CN"] .lang-en { display:none; }
@media(max-width:760px) { .happ-list { grid-template-columns:1fr; } }
@media(max-width:1000px) {
  .site-header { gap:16px; }.site-header nav { gap:4px; }.site-header nav a { padding-inline:12px; }
  .hero { gap:28px; }.float-note.first { right:-4px; top:24px; }.float-note.second { left:-8px; bottom:43px; }
  .vibe-shift { grid-template-columns:1fr; gap:var(--space-6); }
  .split { gap:var(--space-6); }.agent-link { gap:var(--space-3); padding:var(--space-4); }.agent-link img { width:42px; height:42px; }.agent-link strong { font-size:16px; }
  .qr-install { grid-template-columns:150px 1fr; gap:18px; }.qr { width:150px; height:150px; }
  .guide-download-actions { grid-template-columns:1fr; }.guide-download-qr { grid-template-columns:156px minmax(0,1fr); justify-items:start; align-items:center; padding:var(--space-5) 0 0; border-left:0; border-top:1px solid var(--line); text-align:left; }
}
@media(max-width:760px) {
  .wrap,.site-header,.site-footer { width:calc(100% - 36px); }
  .site-header { flex-wrap:wrap; gap:8px; padding:16px 0 12px; }.header-tools { margin-left:auto; }.site-header nav { order:3; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:8px 0 0; width:100%; gap:4px; }.site-header nav a { font-size:13px; padding:10px 4px; }
  .hero,.split,.vibe-panel .split,.guide-start,.guide-deep .split,.download-layout { grid-template-columns:1fr; }
  .hero { padding:var(--section-space) 0; gap:var(--space-6); }.hero h1 { font-size:clamp(46px,11vw,66px); }.lead { font-size:16px; }
  .hero-art { max-width:440px; width:100%; margin:auto; }.phone { width:min(280px,100%); }.float-note { padding:12px 15px; font-size:11px; }.float-note.first { right:0; }.float-note.second { left:0; }
  .value-grid { grid-template-columns:1fr; }.big-icon { margin-bottom:var(--space-5); }
  .start-band { flex-direction:column; align-items:flex-start; padding:var(--space-5); gap:var(--space-5); }
  .agent-links { max-width:470px; }.agent-link img { width:46px; height:46px; }.agent-link .agent-mark { width:46px; height:46px; font-size:25px; }
  .vibe-panel .split { gap:var(--space-5); }
  .site-footer { gap:23px; }.site-footer nav { gap:14px 22px; }
  .page-hero { padding:var(--space-7) 0 var(--space-6); }.page-hero h1 { font-size:clamp(36px,9vw,54px); }
  .guide-start { gap:var(--space-4); margin-bottom:var(--space-7); }.start-icon { width:62px; height:62px; }
  .qr-install { grid-template-columns:150px 1fr; gap:var(--space-5); }.guide-deep { padding:var(--space-7) 0; }.guide-deep .split { gap:var(--space-5); }
  .download-layout { gap:var(--space-5); }.download-next { padding:var(--space-2) 0; }
  .faq-layout { grid-template-columns:1fr; gap:var(--space-5); }.contents { position:static; display:flex; flex-wrap:wrap; gap:var(--space-2); }.contents a { background:var(--surface); }.faq-group { margin-bottom:var(--space-6); }
}
@media(max-width:520px) { .download-actions { grid-template-columns:1fr; }.download-qr { grid-template-columns:140px minmax(0,1fr); justify-items:start; align-items:center; padding:var(--space-5) 0 0; border-left:0; border-top:1px solid var(--line); text-align:left; } }
@media(max-width:460px) { .header-tools { order:2; width:100%; margin:0; justify-content:space-between; }.qr-install { grid-template-columns:1fr; }.qr { width:180px; height:180px; margin:auto; }.download-qr { grid-template-columns:120px minmax(0,1fr); }.download-qr img { width:120px; height:120px; }.guide-download-actions { grid-template-columns:1fr; }.guide-download-qr { grid-template-columns:132px minmax(0,1fr); justify-items:start; align-items:center; padding:var(--space-4) 0 0; border-left:0; border-top:1px solid var(--line); text-align:left; }.guide-download-qr img { width:132px; height:132px; } }
@media(max-width:440px) {
  /* The tool row is the widest part of the header. Trimming it here keeps the
     brand, the action, the GitHub link and both switches on one line down to
     about 390px; flex-wrap is the safety valve for longer labels than today's. */
  .brand { font-size:23px; }.brand-mark { width:32px; height:32px; }
  .header-tools { gap:0; flex-wrap:wrap; row-gap:2px; }
  .header-tools .button { padding:9px 10px; }.header-tools .github-link { min-width:38px; }
  .language-switch::before,.theme-switch::before { margin-inline:4px; }
  .language-switch button { min-width:26px; }
  .theme-switch button { min-width:30px; }.theme-switch button[data-theme-choice="system"] { min-width:34px; }
}
@media(max-width:380px) {
  .agent-links { grid-template-columns:1fr; }.qr-install { grid-template-columns:1fr; }.qr { width:180px; height:180px; margin:auto; }.float-note { font-size:10px; }
  .copy-field { flex-wrap:wrap; }.copy-field .button { width:100%; }
}
@media(hover:hover) {
  .site-header nav a:not([aria-current]):hover { background:var(--soft); color:var(--ink); }
  .language-switch button:not([aria-pressed="true"]):hover,.theme-switch button:not([aria-pressed="true"]):hover { background:transparent; color:var(--ink); }
  .app-github:hover { color:var(--ink); background:var(--soft); }
  .header-tools .github-link:hover { color:var(--ink); background:var(--soft); }
  .button:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
  .button:active { transform:translateY(1px); box-shadow:none; }
  .agent-link:hover { transform:translateY(-2px); border-color:var(--violet); box-shadow:var(--shadow); }
  .link:hover,.site-footer nav a:hover { color:var(--ink); }
  .faq-group summary:hover { color:var(--green); }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.button,.agent-link,.faq-group summary::after { transition:none; }.button:hover,.agent-link:hover,.button:active,.agent-link:active { transform:none; } }