/* ===== GENERATED — source: shell/shell.css (shared section), rendered by shell/generate.py. Do not edit this file; edit the source. ===== */
/* ==========================================================================
   Capy site shell — THE single source of truth for the shared page shell:
   design tokens, base, header nav, language menu, theme button, CTA band,
   footer and the assistant launcher brick.

   This file is the ONLY authored copy of the shell styles. It is rendered
   by shell/generate.py into ONE shared stylesheet:
     - assets/shell.css?v=final191    -> the shared section (everything above the
                              @blog-only marker), linked by all five pages
     - assets/blog.css?v=final191     -> only the @blog-only section at the bottom,
                              on top of the blog content rules
   Never copy these rules into a page by hand; edit them here and re-run
   the generator. Rules inside the @blog-only section are rendered only
   into blog.css (they size the blog pages' launcher button, which
   carries the same markup as the main site's launcher; the main site
   sizes its own from its assistant rules).
   ========================================================================== */

/* ===== variables — main site :root, verbatim ===== */
:root{color-scheme:light;--bg:#fafafa;--surface:#ffffff;--surface-2:#f3f3f1;--ink:#101211;--muted:#686d6a;--line:#e4e5e2;--line-strong:#cfd1cc;--accent:#c2410c;--accent-bright:#ea580c;--accent-soft:rgba(234, 88, 12, .12);--teal:#2f6d60;--teal-soft:rgba(47, 109, 96, .1);--gold:#77601f;--gold-soft:rgba(119, 96, 31, .12);--card-strong:#26282c;--card-sub:#6f6f6f;--card-label:#8a8a8a;--family:#a34a2c;--family-soft:rgba(163, 74, 44, .1);--shadow:0 1px 2px rgba(16, 18, 17, .05);--focus:#c2410c;--ease-out:cubic-bezier(.16, 1, .3, 1);--nav-h:60px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-pill:999px;--r-circle:50%;--fs-2xs:.72rem;--fs-xs:.78rem;--fs-sm:.84rem;--fs-btn:.88rem;--fs-base:.95rem;--fs-md:1rem;--fs-lead:1.06rem;--fs-lg:1.15rem;--fs-xl:1.24rem;--shadow-pop:0 24px 60px rgba(15, 18, 22, .18),0 4px 16px rgba(15, 18, 22, .08);--shadow-float:0 10px 30px rgba(10, 12, 14, .28);--panel-bg:#ffffff;--panel-ink:#14161a;--panel-ink-hover:#2c2e33;--panel-sub:#33353b;--panel-muted:#71747c;--panel-faint:#9a9da4;--panel-icon:#55585f;--panel-line:#e4e4e8;--panel-line-strong:#c6c6cd;--panel-hover:#f1f1f4;--bubble:#f4f4f6;--bubble-user:#e9e9ee;--link:#9a3412;--ok:#177245;--ok-soft:#eefaf2;--err:#c23a22;--err-soft:#fdf1ee;--warn-bg:#fdf3f0;--warn-line:#f0d9d2;--warn-ink:#7c2d1e;--warn-muted:#a2604f;--warn-hover:#f7e0d9;--drop-bg:rgba(253, 243, 240, .96);--foot-bg:#efefec}
:root[data-theme=dark]{color-scheme:dark;--bg:#0a0a0a;--surface:#111;--surface-2:#151616;--ink:#f2f3f0;--muted:#9ba19c;--line:rgba(255, 255, 255, .1);--line-strong:#333634;--accent:#ff7a1a;--accent-bright:#ff7a1a;--accent-soft:rgba(255, 122, 26, .13);--teal:#8fc7bc;--teal-soft:rgba(143, 199, 188, .12);--gold:#d9ba63;--gold-soft:rgba(217, 186, 99, .13);--card-strong:#e8e8e8;--card-sub:#a8a8a8;--card-label:#8f8f8f;--family:#e08a6d;--family-soft:rgba(224, 138, 109, .13);--shadow:0 1px 2px rgba(0, 0, 0, .4);--focus:#ff7a1a;--panel-bg:#101111;--panel-ink:#f2f3f0;--panel-ink-hover:#ffffff;--panel-sub:#d8d8d3;--panel-muted:#a3a6ab;--panel-faint:#7d8087;--panel-icon:#b9bbc0;--panel-line:#262827;--panel-line-strong:#3d403e;--panel-hover:#171818;--bubble:#171818;--bubble-user:#1f2120;--link:#ffb877;--ok:#4cc38a;--ok-soft:#173327;--err:#ff8a75;--err-soft:#3a2320;--warn-bg:#2e201c;--warn-line:#4d322a;--warn-ink:#f0b8a6;--warn-muted:#c08a76;--warn-hover:#3d2a24;--drop-bg:rgba(46, 32, 28, .96);--foot-bg:#0b0b0c}

/* ===== base — main site, verbatim ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;padding-top:var(--nav-h);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Inter,"Noto Sans SC","PingFang SC","Noto Sans JP","Noto Sans KR",sans-serif;font-weight:400;font-size:16px;line-height:1.55;overflow-x:clip}
button,input{font:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
::selection{background:var(--accent-bright);color:#1a0e02}

/* ===== cross-document view transitions — every page opts in, so a page
   switch animates as one app: the header (view-transition-name:
   site-header, on .site-nav below) is the same named element on both
   documents and stays visually in place while only the content swaps.
   Browsers without cross-document support simply navigate. ===== */

/* ===== shell — main site rules, verbatim ===== */
.download,.filter-btn,.hit-goto,.lang-btn,.lang-toggle,.load-more,.login-btn,.mail-send-btn,.nav-region,.nav-search-btn,.org-submit-btn,.theme-btn {transition:background-color .22s var(--ease-out),color .22s var(--ease-out),border-color .22s var(--ease-out),opacity .22s var(--ease-out),transform .18s var(--ease-out)}
.download:active,.filter-btn:active,.lang-btn:active,.lang-toggle:active,.load-more:active,.login-btn:active,.org-submit-btn:active,.theme-btn:active {transform:translateY(1px)}
.x-link {transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),background-color .22s var(--ease-out),color .22s var(--ease-out)}
.x-link:hover {transform:translateY(-1px)}
.site-nav {position:fixed;top:0;left:0;right:0;z-index:70;height:var(--nav-h);view-transition-name:site-header;background:0 0;border-bottom:1px solid transparent;transition:background-color .28s var(--ease-out),border-color .28s var(--ease-out),backdrop-filter .28s var(--ease-out)}
.site-nav.is-scrolled {background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border-bottom-color:var(--line)}
.nav-inner {position:relative;width:min(1120px,calc(100% - 32px));height:100%;margin:0 auto;display:flex;align-items:center;gap:28px}
@media (min-width:1600px) {
  .nav-inner {width:min(1120px,calc(100% - 32px))}
}
.nav-logo {display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;color:var(--ink)}
.brand-mark {display:block;height:30px;width:auto;aspect-ratio:1053/1024;flex:none}
.brand-mark .mk-body {fill:var(--ink)}
.brand-mark .mk-fruit {fill:#FC891C}
.brand-wordmark {display:inline-flex;align-items:flex-start;flex:none;white-space:nowrap;font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:1.28rem;line-height:1;letter-spacing:.01em;color:var(--ink)}
.nav-region {position:relative;border:0;background:0 0;color:var(--muted);cursor:pointer;padding:7px 14px;border-radius:8px;font-size:.92rem;font-weight:600;white-space:nowrap;flex-wrap:wrap;justify-content:center}
.nav-region::after {content:"";display:block;flex:0 0 100%;height:2px;border-radius:2px;margin-top:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease-out)}
.nav-region:hover {color:var(--ink);background:var(--surface-2)}
.nav-region.is-active {color:var(--ink);font-weight:600;background:var(--surface-2)}
.nav-region.is-active::after {transform:scaleX(1)}
.nav-pages {display:flex;align-items:center;justify-content:flex-start;gap:4px;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav-pages::-webkit-scrollbar {display:none}
.nav-tools {display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
.nav-search-btn {display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:8px;border:0;background:0 0;color:var(--muted);font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap}
.nav-search-btn svg {width:16px;height:16px}
.nav-search-btn:hover {color:var(--ink);background:var(--surface-2)}
.theme-btn {display:grid;place-items:center;flex:none;padding:7px 11px;border-radius:8px;border:0;background:0 0;color:var(--muted);cursor:pointer}
.theme-btn:hover {color:var(--ink);background:var(--surface-2)}
.theme-btn svg {width:16px;height:16px}
.theme-btn .ic-sun {display:none}
:root[data-theme=dark] .theme-btn .ic-sun {display:block}
:root[data-theme=dark] .theme-btn .ic-moon {display:none}
.login-btn {flex:none;padding:7px 11px;border-radius:8px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-size:.85rem;font-weight:600;cursor:pointer;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-btn:hover {opacity:.85}
.login-btn.logged {font-family:"Space Grotesk",Inter,"Noto Sans SC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:var(--fs-sm);font-weight:500}
.lang-select {position:relative;flex:none}
.lang-toggle {display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:8px;border:0;background:0 0;color:var(--muted);font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap}
.lang-toggle:hover {color:var(--ink);background:var(--surface-2)}
.lang-caret {width:14px;height:14px;flex:none;color:var(--muted);transition:transform .22s var(--ease-out)}
.lang-toggle[aria-expanded=true] .lang-caret {transform:rotate(180deg)}
.lang-menu {position:absolute;top:calc(100% + 8px);right:0;z-index:80;width:182px;display:flex;flex-direction:column;gap:2px;padding:6px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(23,24,27,.78);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 24px 60px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);transform-origin:top right}
.lang-menu::before {content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
:root:not([data-theme=dark]) .lang-menu {border-color:rgba(0,0,0,.06);background:rgba(255,255,255,.82);box-shadow:0 24px 60px rgba(15,23,42,.16),0 4px 16px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.6)}
.lang-menu[hidden] {display:none}
.lang-menu:not([hidden]) {animation:lang-pop .16s cubic-bezier(.22,1,.36,1) both}
@keyframes lang-pop {from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce) {
  .lang-menu:not([hidden]) {animation:none}
}
.lang-btn {display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;background:0 0;color:var(--muted);padding:9px 12px;font-size:14px;font-weight:500;cursor:pointer;text-align:left;white-space:nowrap;border-radius:8px;transition:background-color .12s ease,color .12s ease}
.lang-btn:hover {background:rgba(255,255,255,.05);color:#fff}
:root:not([data-theme=dark]) .lang-btn:hover {background:rgba(0,0,0,.045);color:var(--ink)}
.lang-btn.active {color:#fff}
:root:not([data-theme=dark]) .lang-btn.active {color:var(--ink)}
.lang-btn.active::after {content:"";flex:none;width:7px;height:7px;background:var(--accent)}
.x-link {display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:var(--r-circle);background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);text-decoration:none}
.x-link svg {width:18px;height:18px;fill:currentColor}
.x-link:hover {border-color:var(--ink)}
.shell-cta {width:min(1120px,calc(100% - 32px));margin:8px auto 0;padding:30px 0 32px;text-align:center}
.shell-cta-line {margin:0 0 18px;font-size:19px;font-weight:500;line-height:1.5;color:var(--ink);letter-spacing:.01em}
.shell-cta-btn {border:0;border-radius:var(--r-pill);background:var(--accent-bright);color:#fff;font:inherit;font-size:15px;font-weight:600;min-height:44px;padding:10px 28px;cursor:pointer;transition:filter .15s;white-space:nowrap}
.shell-cta-btn:hover {filter:brightness(1.07)}
.pfoot {position:relative;overflow:hidden;isolation:isolate;padding:30px 0 18px;background:var(--foot-bg);border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-sm);line-height:1.55}
.pfoot-base,.pfoot-grid {width:min(1040px,calc(100% - 32px));margin-left:auto;margin-right:auto}
.pfoot-grid {position:relative;z-index:1;display:flex;align-items:flex-start;gap:26px 48px;flex-wrap:wrap}
.pfoot-left {flex:0 1 380px;max-width:380px;min-width:min(300px,100%)}
.pfoot-brand-row {display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pfoot-lockup {display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.pfoot-lockup .brand-mark {height:32px}
.pfoot-lockup .brand-wordmark {font-size:24px}
.pfoot-social {display:flex;gap:8px}
.pfoot-soc {width:32px;height:32px}
.pfoot-soc svg {width:16px;height:16px}
.pfoot-sub {margin-top:22px}
.pfoot-sub-label {display:block;color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:10px}
.pfoot-sub-row {display:flex;align-items:center;gap:6px;height:44px;max-width:320px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:4px;transition:border-color .15s}
.pfoot-sub-row:focus-within {border-color:var(--focus)}
.pfoot-sub-row input {flex:1;min-width:0;height:100%;border:0;background:0 0;color:var(--ink);font:inherit;font-size:16px;padding:0 8px;outline:0}
.pfoot-sub-row input::placeholder {color:var(--muted);opacity:1}
.pfoot-sub-btn {flex:none;height:100%;border:0;border-radius:8px;background:var(--accent-bright);color:#fff;font:inherit;font-weight:700;font-size:var(--fs-btn);padding:0 18px;cursor:pointer;transition:filter .15s}
.pfoot-sub-btn:hover {filter:brightness(1.07)}
.pfoot-sub-msg {margin:5px 0 0;font-size:var(--fs-sm);min-height:1.25em}
.pfoot-sub-msg.ok {color:var(--ok)}
.pfoot-sub-msg.err {color:var(--err)}
.pfoot-cols {display:flex;gap:22px 48px;flex-wrap:wrap;margin-left:auto}
.pfoot-col {flex:0 0 148px}
.pfoot-col h4 {margin:6px 0 12px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-family:inherit}
.pfoot-col a,.pfoot-col button {display:block;margin:0;padding:0;background:0 0;border:0;font:inherit;font-size:14px;font-weight:450;line-height:2.05;color:color-mix(in srgb,var(--ink) 76%,var(--foot-bg));text-decoration:none;cursor:pointer;text-align:left}
.pfoot-col a:hover,.pfoot-col button:hover {color:var(--accent-bright)}
.pfoot-base {position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px 22px;flex-wrap:wrap;margin-top:22px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px}
.pfoot-top {background:0 0;border:0;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;padding:4px 0}
.pfoot-top:hover {color:var(--ink)}
@media (max-width:800px) {
  .shell-cta {width:calc(100% - 32px);padding:26px 0 28px}
  .shell-cta-line {font-size:18px}
  .pfoot {padding:24px 0 88px}
  .pfoot-base,.pfoot-grid {width:calc(100% - 32px)}
  .pfoot-cols {margin-left:0;gap:18px 36px}
  .pfoot-col {flex-basis:132px}
  .pfoot-left {max-width:none;flex-basis:100%}
  .pfoot-sub-row {max-width:none}
}
@media (max-width:640px) {
  .pfoot-lockup .brand-mark {height:32px}
  .nav-pages {display:none}
  .nav-tools {gap:6px;margin-left:auto}
}
@media (max-width:560px) {
  .nav-inner {width:calc(100% - 32px);gap:10px}
  .nav-search-btn span {display:none}
}
.assistant-fab {position:fixed;right:20px;bottom:20px;z-index:82;width:68px;height:70px;padding:0;border:0;background:0 0;display:grid;place-items:center;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .24s var(--ease-out)}
.assistant-fab:hover {transform:scale(1.05)}
.assistant-fab:active {transform:scale(.96)}
.assistant-fab svg {width:100%;height:100%;display:block;filter:drop-shadow(0 10px 22px rgba(0, 0, 0, .38))}
.assistant-fab .fab-eyes {transform:translate(0,0);transition:transform .08s ease-out;will-change:transform}
@media (max-width:560px) {
  .assistant-fab {right:14px;bottom:14px}
}
@media (prefers-reduced-motion:reduce) {
  .assistant-fab {transition:none}
  .assistant-fab:hover {transform:none}
}
/* assistant round 5 — Grok alignment: toolbar + share, no-bubble answers, answer actions + follow-ups, composer, cards, side */
.brick-60{width:60px;height:60px;border-radius:16px}
.grok-brick {display:block}
.shell-foot {width:100%}
/* audit-fix 2026-10-23: GL-01 / T-05 / T-08 / T-09 / RG-02 / A-03 */
#lang-current-code {display:none}
@media (max-width:640px) {
  #lang-current {display:none}
  #lang-current-code {display:inline}
  .lang-toggle {padding:7px 11px}
  .nav-search-btn {padding:7px 11px}
  .login-btn {padding:7px 11px;margin-right:2px}
}
@media (max-width:800px) {
  .site-nav {height:auto}
  .nav-inner {height:auto;flex-wrap:wrap;padding-top:6px}
  .nav-pages {display:flex;order:9;flex:1 1 100%;justify-content:flex-start;gap:2px;padding:2px 0 8px}
  .nav-pages a.nav-page {min-height:30px;padding:4px 8px;font-size:13px}
}
/* assistant round 13 — the launcher brick goes flat 2D with an edge you can actually see. (1) Edge: every brick gets a restrained bright hairline (1px solid, white 50%) so the black tile separates from the dark page at first glance — a flat stroke, no glow halo. Round 9's border:0 on the fab brick is reversed. (2) Flat: the frosted-glass surface is gone — solid near-black fill, no backdrop blur, no inset top highlight, no drop shadow on the brick or its mark, so the tile reads as one flat printed card: black brick, white silhouette, orange fruit. (3) No hover text: the fab button carries no title attribute (and no data-i18n-title for the language engine to restore), so hovering shows nothing but the brick's own feedback — the hairline steps up in brightness. The same flat surface + hairline covers every .grok-brick identity slot (fab, side avatar, drawer head, typing brick) so the mark is visually identical inside the conversation */
.grok-brick {background:#0c0c0e;border:1px solid rgba(255,255,255,.5);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.assistant-fab .fab-brick {box-shadow:none}
.assistant-fab .fab-brick svg {filter:none}
.assistant-fab:hover .fab-brick {border-color:rgba(255,255,255,.78)}
.assistant-fab:active .fab-brick {border-color:rgba(255,255,255,.62)}
.assistant-fab .fab-brick {border:0;border-radius:28%;overflow:hidden}
.assistant-fab:hover .fab-ring {stroke:rgba(255,255,255,0.78)}
.assistant-fab:active .fab-ring {stroke:rgba(255,255,255,0.62)}

@media (min-width:641px) and (max-width:800px){:root{--nav-h:96px}}