/* ============================================================
   oh-my-field website — Style Sheet v2
   ============================================================ */

:root,
[data-theme='light'] {
  --color-bg: #f4f3ef;
  --color-surface: #f9f8f5;
  --color-surface-2: #ffffff;
  --color-surface-offset: #edeae5;
  --color-surface-dynamic: #e3e0da;
  --color-divider: #dcd9d5;
  --color-border: #ccc9c2;
  --color-text: #1a1917;
  --color-text-muted: #6b6a66;
  --color-text-faint: #b0afa9;
  --color-text-inverse: #f9f8f4;
  --color-primary: #006b71;
  --color-primary-hover: #004f55;
  --color-primary-active: #003538;
  --color-primary-highlight: #cedddb;
  --color-orange: #c96400;
  --color-orange-highlight: #f0dcc4;
  --color-yellow: #b58500;
  --color-yellow-highlight: #f0e5c0;
  --color-blue: #0059a1;
  --color-blue-highlight: #c3d8ef;
  --color-success: #3d7020;
  --color-success-highlight: #cfe0c3;
  --color-error: #a12c7b;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 1px 2px rgba(20,18,14,.06);
  --shadow-md: 0 4px 12px rgba(20,18,14,.08);
  --shadow-lg: 0 12px 32px rgba(20,18,14,.12);
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --text-xs:   clamp(0.75rem,   0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem,  0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,      0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem,  1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,    1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,      1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.4rem,    1.2rem  + 3.5vw,  4.5rem);
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;  --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --content-default: 1100px;
  --nav-h: 64px;
}

[data-theme='dark'] {
  --color-bg: #0e0d0c;
  --color-surface: #141312;
  --color-surface-2: #191817;
  --color-surface-offset: #181716;
  --color-surface-offset-2: #1e1d1b;
  --color-surface-dynamic: #272522;
  --color-divider: #232220;
  --color-border: #302f2d;
  --color-text: #d4d2cf;
  --color-text-muted: #7a7876;
  --color-text-faint: #524f4d;
  --color-text-inverse: #1a1917;
  --color-primary: #2e9ea8;
  --color-primary-hover: #1e8994;
  --color-primary-active: #147580;
  --color-primary-highlight: #1e3b3d;
  --color-orange: #f0832a;
  --color-orange-highlight: #3a2a1a;
  --color-yellow: #e8b430;
  --color-yellow-highlight: #362e14;
  --color-blue: #4d99d8;
  --color-blue-highlight: #182435;
  --color-success: #5aad36;
  --color-success-highlight: #1c3114;
  --color-error: #d163a7;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#0e0d0c; --color-surface:#141312; --color-surface-2:#191817;
    --color-surface-offset:#181716; --color-surface-offset-2:#1e1d1b;
    --color-surface-dynamic:#272522; --color-divider:#232220; --color-border:#302f2d;
    --color-text:#d4d2cf; --color-text-muted:#7a7876; --color-text-faint:#524f4d;
    --color-text-inverse:#1a1917; --color-primary:#2e9ea8; --color-primary-hover:#1e8994;
    --color-primary-active:#147580; --color-primary-highlight:#1e3b3d;
    --color-orange:#f0832a; --color-orange-highlight:#3a2a1a;
    --color-yellow:#e8b430; --color-yellow-highlight:#362e14;
    --color-blue:#4d99d8; --color-blue-highlight:#182435;
    --color-success:#5aad36; --color-success-highlight:#1c3114; --color-error:#d163a7;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 4px 12px rgba(0,0,0,.4);
    --shadow-lg:0 12px 32px rgba(0,0,0,.5);
  }
}

/* ---- RESET ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);line-height:1.65;min-height:100dvh;}
img,svg{display:block;max-width:100%;height:auto;}
ul[role='list'],ol[role='list']{list-style:none;}
input,button,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4,h5,h6{text-wrap:balance;line-height:1.15;}
p,li{text-wrap:pretty;max-width:72ch;}
::selection{background:color-mix(in oklab,var(--color-primary),transparent 75%);}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm);}
button{cursor:pointer;background:none;border:none;}
em{font-style:italic;}

/* ---- LAYOUT ---- */
.container{max-width:var(--content-default);margin:0 auto;padding-inline:clamp(var(--space-6),5vw,var(--space-16));}
.section{padding-block:clamp(var(--space-16),8vw,var(--space-24));}
.section--surface{background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}
.section--dark{background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}

/* ---- NAV ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);background:color-mix(in oklab,var(--color-bg),transparent 10%);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--color-border);transition:background var(--transition-interactive);}
.nav.scrolled{background:color-mix(in oklab,var(--color-bg),transparent 3%);}
.nav-inner{display:flex;align-items:center;gap:var(--space-8);height:100%;max-width:var(--content-default);margin:0 auto;padding-inline:clamp(var(--space-4),4vw,var(--space-10));}
.nav-logo{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--color-text);font-weight:600;flex-shrink:0;}
.nav-wordmark{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;letter-spacing:-0.02em;}
.nav-links{display:flex;align-items:center;gap:var(--space-5);margin-left:auto;}
.nav-links a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;transition:color var(--transition-interactive);}
.nav-links a:hover{color:var(--color-text);}
.nav-github{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-full);transition:border-color var(--transition-interactive),color var(--transition-interactive) !important;}
.nav-github:hover{border-color:var(--color-primary) !important;color:var(--color-text) !important;}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-full);color:var(--color-text-muted);border:1px solid var(--color-border);flex-shrink:0;transition:color var(--transition-interactive),border-color var(--transition-interactive);}
.theme-toggle:hover{color:var(--color-text);border-color:var(--color-primary);}
.nav-hamburger{display:none;flex-direction:column;gap:5px;width:32px;height:32px;align-items:center;justify-content:center;flex-shrink:0;}
.nav-hamburger span{display:block;width:20px;height:2px;background:var(--color-text-muted);border-radius:2px;}
.nav-mobile{display:none;flex-direction:column;background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:var(--space-4) var(--space-6);gap:var(--space-4);}
.nav-mobile a{color:var(--color-text-muted);text-decoration:none;font-size:var(--text-sm);}
.nav-mobile a:hover{color:var(--color-text);}
.nav-mobile.open{display:flex;}

/* ---- HERO ---- */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;padding-top:var(--nav-h);}
.hero-bg-grid{position:absolute;inset:0;background-image:linear-gradient(to right,color-mix(in oklab,var(--color-primary),transparent 88%) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in oklab,var(--color-primary),transparent 88%) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black 20%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black 20%,transparent 100%);pointer-events:none;}
.hero-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-8);position:relative;z-index:1;padding-block:var(--space-20);}
.hero-badge{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-primary);background:color-mix(in oklab,var(--color-primary),var(--color-bg) 88%);border:1px solid color-mix(in oklab,var(--color-primary),transparent 65%);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);width:fit-content;text-transform:uppercase;letter-spacing:0.06em;}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--color-primary);animation:pulse-dot 2.4s ease-in-out infinite;flex-shrink:0;}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.8);}}
.hero-title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:800;line-height:1.08;letter-spacing:-0.03em;color:var(--color-text);}
.hero-accent{color:var(--color-primary);}
.hero-sub{font-size:var(--text-lg);color:var(--color-text-muted);max-width:54ch;line-height:1.6;}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);}
.hero-install{display:flex;align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.install-cmd{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-primary);padding:var(--space-3) var(--space-5);user-select:all;}
.copy-btn{display:flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-4);color:var(--color-text-muted);background:var(--color-surface-offset);border-left:1px solid var(--color-border);transition:background var(--transition-interactive),color var(--transition-interactive);}
.copy-btn:hover{background:var(--color-surface-dynamic);color:var(--color-primary);}
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:500;text-decoration:none;transition:background var(--transition-interactive),color var(--transition-interactive),border-color var(--transition-interactive);}
.btn-outline{border:1px solid var(--color-border);color:var(--color-text-muted);background:var(--color-surface);}
.btn-outline:hover{border-color:var(--color-primary);color:var(--color-text);}

/* Principles strip */
.principles-strip{display:flex;align-items:stretch;gap:0;border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);overflow:hidden;box-shadow:var(--shadow-sm);}
.principle{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-6);flex:1;}
.principle-div{width:1px;background:var(--color-border);flex-shrink:0;}
.principle-icon{width:36px;height:36px;border-radius:var(--radius-md);background:var(--color-primary-highlight);color:var(--color-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.principle strong{display:block;font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-bottom:2px;}
.principle span{display:block;font-size:var(--text-xs);color:var(--color-text-muted);}

.hero-scroll-hint{position:absolute;bottom:var(--space-8);left:50%;transform:translateX(-50%);color:var(--color-text-faint);animation:scroll-hint 2s ease-in-out infinite;}
@keyframes scroll-hint{0%,100%{opacity:.3;transform:translateX(-50%) translateY(0);}50%{opacity:.8;transform:translateX(-50%) translateY(5px);}}

/* ---- SECTION HEADERS ---- */
.section-header{max-width:680px;margin-bottom:var(--space-12);}
.section-tag{display:inline-block;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;color:var(--color-primary);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:var(--space-4);}
.section-tag--dim{color:var(--color-text-muted);}
.section-header h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;letter-spacing:-0.03em;color:var(--color-text);line-height:1.1;margin-bottom:var(--space-4);}
.section-lead{font-size:var(--text-base);color:var(--color-text-muted);max-width:58ch;}
.section-lead code,.section-header p code{font-family:var(--font-mono);font-size:.88em;color:var(--color-primary);background:var(--color-primary-highlight);padding:1px 5px;border-radius:var(--radius-sm);}

/* ---- PROBLEM SECTION ---- */
.two-col-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center;}
.two-col-text{display:flex;flex-direction:column;gap:var(--space-5);}
.two-col-text h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;letter-spacing:-0.03em;line-height:1.1;margin:0;}
.two-col-text p{font-size:var(--text-base);color:var(--color-text-muted);}
.two-col-text p em{color:var(--color-text);font-style:normal;font-weight:600;}

/* Disappear diagram */
.disappear-diagram{display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-8);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);}
.dd-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-3);}
.dd-label--faint{color:var(--color-text-faint);}
.dd-label--primary{color:var(--color-primary);}
.dd-chain{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
.dd-node{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-offset);color:var(--color-text-muted);white-space:nowrap;}
.dd-node--agent{color:var(--color-text);}
.dd-node--chat{color:var(--color-text-faint);}
.dd-node--gone{display:flex;align-items:center;gap:var(--space-2);color:var(--color-error);border-color:color-mix(in oklab,var(--color-error),transparent 70%);}
.dd-node--evidence{color:var(--color-blue);border-color:color-mix(in oklab,var(--color-blue),transparent 65%);background:var(--color-blue-highlight);}
.dd-node--capability{color:var(--color-primary);border-color:color-mix(in oklab,var(--color-primary),transparent 65%);background:var(--color-primary-highlight);}
.dd-node--reuse{display:flex;align-items:center;gap:var(--space-2);color:var(--color-success);border-color:color-mix(in oklab,var(--color-success),transparent 65%);background:var(--color-success-highlight);}
.dd-arrow{width:20px;height:2px;background:var(--color-border);flex-shrink:0;}
.dd-arrow--primary{background:var(--color-primary);}

/* ---- WHAT OMF IS ---- */
.what-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-bottom:var(--space-10);}
.what-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);transition:border-color var(--transition-interactive),box-shadow var(--transition-interactive);}
.what-card:hover{border-color:color-mix(in oklab,var(--color-primary),transparent 50%);box-shadow:var(--shadow-md);}
.what-num{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;color:var(--color-primary);margin-bottom:var(--space-4);}
.what-card h3{font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-3);}
.what-card p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.65;}

/* Capability anatomy */
.cap-anatomy{display:flex;align-items:flex-start;gap:var(--space-10);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);}
.cap-anatomy-label{display:flex;flex-direction:column;gap:var(--space-3);flex-shrink:0;min-width:180px;}
.cap-path{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);}
.cap-files{display:flex;flex-wrap:wrap;gap:var(--space-3);flex:1;}
.cap-file{display:flex;align-items:center;gap:var(--space-3);background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-5);color:var(--color-text-muted);transition:border-color var(--transition-interactive);}
.cap-file:hover{border-color:var(--color-primary);}
.cap-file code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-primary);}
.cap-file span{font-size:var(--text-xs);color:var(--color-text-faint);}

/* ---- PRODUCT FLOW ---- */
.flow-steps-bar{display:flex;align-items:stretch;gap:0;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:var(--space-8);}
.flow-tab{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);padding:var(--space-5) var(--space-6);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);background:transparent;border:none;border-right:1px solid var(--color-border);cursor:pointer;transition:background var(--transition-interactive),color var(--transition-interactive);text-align:left;}
.flow-tab:last-child{border-right:none;}
.flow-tab:hover{background:var(--color-surface-offset);color:var(--color-text);}
.flow-tab.active{background:color-mix(in oklab,var(--color-primary),var(--color-surface) 90%);color:var(--color-text);}
.flow-tab-num{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;color:var(--color-primary);}
.flow-tab-sep{display:none;}
.flow-body{display:grid;grid-template-columns:1fr 480px;gap:var(--space-8);align-items:start;}
.flow-desc-wrap{position:relative;}
.flow-desc{display:none;}
.flow-desc.active{display:block;}
.flow-desc h3{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-4);}
.flow-desc p{font-size:var(--text-base);color:var(--color-text-muted);margin-bottom:var(--space-6);}
.flow-supported{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.runtime-chip{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;padding:var(--space-2) var(--space-3);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-muted);}
.runtime-chip--mcp{border-color:color-mix(in oklab,var(--color-primary),transparent 55%);color:var(--color-primary);background:var(--color-primary-highlight);}

/* Terminal */
.pipeline-terminal{position:sticky;top:calc(var(--nav-h) + var(--space-6));background:#0d0c0b;border:1px solid #2a2926;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);}
[data-theme='light'] .pipeline-terminal{background:#1a1917;border-color:#333230;}
.terminal-chrome{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-5);background:#161513;border-bottom:1px solid #2a2926;}
[data-theme='light'] .terminal-chrome{background:#222120;border-color:#333230;}
.terminal-dots{display:flex;gap:6px;}
.dot{width:12px;height:12px;border-radius:50%;}
.dot-red{background:#ff5f57;}.dot-yellow{background:#ffbd2e;}.dot-green{background:#28c840;}
.terminal-title{font-family:var(--font-mono);font-size:var(--text-xs);color:#5a5956;margin-left:auto;}
.terminal-body{padding:var(--space-5) var(--space-6);font-family:var(--font-mono);font-size:clamp(.75rem,.7rem + .25vw,.875rem);line-height:1.75;min-height:260px;}
.t-line{display:flex;gap:var(--space-3);align-items:flex-start;}
.t-prompt{color:var(--color-primary);flex-shrink:0;font-weight:600;}
.t-cmd{color:#d4d2cf;}
.t-cont{color:#8a8884;padding-left:var(--space-6);}
.t-out{color:#5aad36;padding-left:var(--space-6);}
.t-json{color:#e8b430;padding-left:var(--space-6);word-break:break-all;}
.t-blank{height:var(--space-3);}

/* ---- CMD EXPLORER ---- */
.cmd-explorer{display:flex;flex-direction:column;gap:var(--space-4);}
.cmd-nav{display:flex;gap:var(--space-2);flex-wrap:wrap;border-bottom:1px solid var(--color-border);padding-bottom:var(--space-4);}
.cmd-tab{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);color:var(--color-text-muted);border:1px solid var(--color-border);background:var(--color-surface);transition:background var(--transition-interactive),color var(--transition-interactive),border-color var(--transition-interactive);}
.cmd-tab:hover{border-color:var(--color-primary);color:var(--color-text);}
.cmd-tab.active{background:var(--color-primary);border-color:var(--color-primary);color:white;}
.cmd-panel{display:none;}.cmd-panel.active{display:block;}
.cmd-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--space-5);}
.cmd-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);transition:border-color var(--transition-interactive),box-shadow var(--transition-interactive);}
.cmd-item:hover{border-color:color-mix(in oklab,var(--color-primary),transparent 55%);box-shadow:var(--shadow-sm);}
.cmd-item-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3);}
.cmd-name{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;color:var(--color-primary);background:var(--color-primary-highlight);padding:2px var(--space-3);border-radius:var(--radius-sm);}
.cmd-badge{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;}
.cmd-item>p{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4);line-height:1.6;}
.cmd-item p code{font-family:var(--font-mono);font-size:.85em;color:var(--color-primary);background:var(--color-primary-highlight);padding:1px 5px;border-radius:var(--radius-sm);}
.cmd-example pre{font-family:var(--font-mono);font-size:var(--text-xs);background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);overflow-x:auto;color:var(--color-text-muted);line-height:1.7;white-space:pre;}

/* ---- PORTABILITY CARDS ---- */
.port-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);margin-bottom:var(--space-6);}
.port-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;transition:box-shadow var(--transition-interactive),border-color var(--transition-interactive);}
.port-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border);}
.port-card--final{border-color:color-mix(in oklab,var(--color-success),transparent 55%);}
.port-card-bar{height:4px;}
.port-card-inner{padding:var(--space-6);}
.port-badge{display:inline-block;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;padding:3px var(--space-3);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-3);}
.port-badge--orange{background:var(--color-orange-highlight);color:var(--color-orange);}
.port-badge--blue{background:var(--color-blue-highlight);color:var(--color-blue);}
.port-badge--yellow{background:var(--color-yellow-highlight);color:var(--color-yellow);}
.port-badge--green{background:var(--color-success-highlight);color:var(--color-success);}
.port-card-inner p{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4);line-height:1.6;max-width:none;}
.port-cmd-inline{display:block;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-faint);background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);word-break:break-all;}
.port-note{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4) var(--space-6);background:var(--color-primary-highlight);border:1px solid color-mix(in oklab,var(--color-primary),transparent 65%);border-radius:var(--radius-lg);color:var(--color-text-muted);font-size:var(--text-sm);}
.port-note svg{color:var(--color-primary);flex-shrink:0;margin-top:2px;}
.port-note code{font-family:var(--font-mono);font-size:.85em;color:var(--color-primary);}

/* ---- AUDIENCE ---- */
.audience-chips{display:flex;flex-wrap:wrap;gap:var(--space-3);}
.audience-chip{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);font-weight:500;padding:var(--space-3) var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-muted);transition:border-color var(--transition-interactive),color var(--transition-interactive);}
.audience-chip:hover{border-color:var(--color-primary);color:var(--color-text);}
.audience-chip svg{color:var(--color-primary);}

/* ---- INSTALL ---- */
.install-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);margin-bottom:var(--space-8);}
.install-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;}
.install-card-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);text-transform:uppercase;letter-spacing:.06em;}
.install-block{position:relative;background:#0d0c0b;padding:var(--space-5) var(--space-6);}
[data-theme='light'] .install-block{background:#1a1917;}
.install-block pre{font-family:var(--font-mono);font-size:var(--text-xs);color:#d4d2cf;line-height:1.75;white-space:pre;overflow-x:auto;padding-right:var(--space-10);}
.install-block--wide{border-radius:var(--radius-xl);overflow:hidden;padding:var(--space-5) var(--space-6);}
.install-copy{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);color:rgba(255,255,255,.4);transition:background var(--transition-interactive),color var(--transition-interactive);}
.install-copy:hover{background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);}
.t-prompt-i{color:var(--color-primary);font-weight:600;}
.install-dev{display:flex;flex-direction:column;}

/* ---- FOOTER ---- */
.footer{background:var(--color-surface);border-top:1px solid var(--color-border);padding-top:var(--space-16);}
.footer-inner{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-16);padding-bottom:var(--space-12);}
.footer-brand .nav-logo{margin-bottom:var(--space-4);}
.footer-brand p{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-3);}
.footer-license{font-family:var(--font-mono);font-size:var(--text-xs) !important;color:var(--color-text-faint) !important;}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);}
.footer-col{display:flex;flex-direction:column;gap:var(--space-3);}
.footer-col h4{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);margin-bottom:var(--space-2);}
.footer-col a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;transition:color var(--transition-interactive);}
.footer-col a:hover{color:var(--color-primary);}
.footer-bottom{border-top:1px solid var(--color-border);padding:var(--space-5) clamp(var(--space-6),5vw,var(--space-16));display:flex;align-items:center;justify-content:space-between;max-width:var(--content-default);margin:0 auto;font-size:var(--text-xs);color:var(--color-text-faint);}
.footer-gh{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-faint) !important;text-decoration:none;transition:color var(--transition-interactive);}
.footer-gh:hover{color:var(--color-primary) !important;}

/* ---- DASHBOARD (LOCAL WEB UI) ---- */
.dash-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-5);align-items:stretch;margin-bottom:var(--space-12);}
.dash-ba-card{display:flex;flex-direction:column;gap:var(--space-3);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);}
.dash-ba-tag{align-self:flex-start;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:3px var(--space-3);border-radius:var(--radius-full);}
.dash-ba-tag--before{color:var(--color-text-muted);background:var(--color-surface-offset);border:1px solid var(--color-border);}
.dash-ba-tag--after{color:var(--color-primary);background:var(--color-primary-highlight);border:1px solid color-mix(in oklab,var(--color-primary),transparent 60%);}
.dash-ba-card h3{font-size:var(--text-base);font-weight:700;}
.dash-ba-card p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6;}
.dash-ba-arrow{display:flex;align-items:center;justify-content:center;color:var(--color-primary);}
.dash-mini{margin-top:auto;}
.dash-mini--cli{background:#0d0c0b;border:1px solid #2a2926;border-radius:var(--radius-md);padding:var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.7;overflow-x:auto;}
[data-theme='light'] .dash-mini--cli{background:#1a1917;border-color:#333230;}
.dash-mini--cli .t-line{margin-bottom:2px;}
.dash-mini--cli .t-json{padding-left:0;}
.dash-mini--metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);}
.dash-mini-tile{background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);}
.dash-mini-tile span{display:block;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);}
.dash-mini-tile b{display:block;font-size:var(--text-lg);font-weight:700;color:var(--color-text);margin-top:2px;font-variant-numeric:tabular-nums;}

.dash-demo{margin-bottom:var(--space-12);}
.dash-tabs{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-4);}
.dash-tab{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);color:var(--color-text-muted);border:1px solid var(--color-border);background:var(--color-surface);transition:background var(--transition-interactive),color var(--transition-interactive),border-color var(--transition-interactive);}
.dash-tab:hover{border-color:var(--color-primary);color:var(--color-text);}
.dash-tab.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
.browser-frame{border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;background:var(--color-surface-2);box-shadow:var(--shadow-lg);}
.browser-bar{display:flex;align-items:center;gap:6px;padding:var(--space-3) var(--space-5);background:var(--color-surface-offset);border-bottom:1px solid var(--color-border);}
.browser-url{margin-left:var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.browser-view{position:relative;background:var(--color-bg);line-height:0;}
.dash-shot{display:none;}
.dash-shot.active{display:block;}
.dash-img{width:100%;height:auto;display:none;}
[data-theme='dark'] .dash-img--dark{display:block;}
[data-theme='light'] .dash-img--light{display:block;}
:root:not([data-theme]) .dash-img--dark{display:block;}
@media (prefers-color-scheme:light){
  :root:not([data-theme]) .dash-img--light{display:block;}
  :root:not([data-theme]) .dash-img--dark{display:none;}
}
.dash-caption{font-size:var(--text-sm);color:var(--color-text-muted);margin:var(--space-4) auto 0;text-align:center;max-width:72ch;}
.dash-caption strong{color:var(--color-text);font-weight:600;}

.dash-features{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);margin-bottom:var(--space-10);}
.dash-feature{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);transition:border-color var(--transition-interactive),box-shadow var(--transition-interactive);}
.dash-feature:hover{border-color:color-mix(in oklab,var(--color-primary),transparent 55%);box-shadow:var(--shadow-sm);}
.dash-feature-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);background:var(--color-primary-highlight);color:var(--color-primary);margin-bottom:var(--space-4);}
.dash-feature h3{font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-3);}
.dash-feature p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6;}
.dash-ba-card p code,.dash-feature p code,.dash-caption code{font-family:var(--font-mono);font-size:.85em;color:var(--color-primary);background:var(--color-primary-highlight);padding:1px 5px;border-radius:var(--radius-sm);}
.dash-run{max-width:780px;}
.dash-comment{color:#6f6e6a;}

/* ---- SCROLL ANIMATION BASE ---- */
.anim-up{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;}
.anim-up.visible{opacity:1;transform:translateY(0);}

/* ---- RESPONSIVE ---- */
@media(max-width:1000px){
  .flow-body{grid-template-columns:1fr;}
  .pipeline-terminal{position:static;}
  .port-cards{grid-template-columns:repeat(2,1fr);}
  .what-grid{grid-template-columns:1fr 1fr;}
  .dash-features{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:820px){
  .two-col-layout{grid-template-columns:1fr;}
  .dash-ba{grid-template-columns:1fr;}
  .dash-ba-arrow{transform:rotate(90deg);}
  .cap-anatomy{flex-direction:column;gap:var(--space-5);}
  .flow-steps-bar{flex-direction:column;border-radius:var(--radius-xl);}
  .flow-tab{border-right:none;border-bottom:1px solid var(--color-border);}
  .flow-tab:last-child{border-bottom:none;}
  .footer-inner{grid-template-columns:1fr;gap:var(--space-10);}
  .footer-links{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .nav-links{display:none;}
  .nav-hamburger{display:flex;}
  .principles-strip{flex-direction:column;}
  .principle-div{width:100%;height:1px;}
}
@media(max-width:640px){
  .what-grid{grid-template-columns:1fr;}
  .port-cards{grid-template-columns:1fr;}
  .install-grid{grid-template-columns:1fr;}
  .cmd-list{grid-template-columns:1fr;}
  .footer-links{grid-template-columns:1fr;}
  .dash-features{grid-template-columns:1fr;}
  .hero-title{font-size:clamp(1.9rem,7vw,3.5rem);}
}

/* ---- LOGO THEME SWITCHING ---- */
.site-logo {
  display: block;
  height: 32px;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
}
/* dark theme: show dark logo, hide light */
[data-theme='dark'] .site-logo--dark,
:root:not([data-theme]) .site-logo--dark {
  display: block;
}
[data-theme='dark'] .site-logo--light,
:root:not([data-theme]) .site-logo--light {
  display: none;
}
/* light theme: show light logo, hide dark */
[data-theme='light'] .site-logo--light {
  display: block;
}
[data-theme='light'] .site-logo--dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .site-logo--dark { display: block; }
  :root:not([data-theme]) .site-logo--light { display: none; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .site-logo--light { display: block; }
  :root:not([data-theme]) .site-logo--dark { display: none; }
}

/* Footer logo — slightly smaller */
.footer-brand .site-logo { height: 28px; }


/* ---- DISABLED FOOTER LINKS ---- */
.footer-link-disabled {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  opacity: 0.55;
  cursor: not-allowed;
  user-select: none;
}

/* ============================================================
   10-MINUTE HAPPY PATH  (Opus → Haiku portability)
   ============================================================ */
.hp-task{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:var(--space-4);}
.hp-io{display:flex;flex-direction:column;min-width:0;}
.hp-io-label{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);}
.hp-io-label code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);}
.hp-io-tag{font-family:var(--font-mono);font-size:0.7rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-full);}
.hp-io-tag--in{color:var(--color-orange);background:var(--color-orange-highlight);}
.hp-io-tag--out{color:var(--color-success);background:var(--color-success-highlight);}
.hp-code{flex:1;margin:0;padding:var(--space-4);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.7;color:var(--color-text);overflow-x:auto;white-space:pre;}
.hp-c-dim{color:var(--color-text-faint);}
.hp-c-note{color:var(--color-text-faint);font-style:italic;}
.hp-c-bad{color:var(--color-error);}
.hp-c-key{color:var(--color-primary);font-weight:600;}
.hp-c-str{color:var(--color-orange);}
.hp-c-ok{color:var(--color-success);font-weight:600;}
.hp-io-arrow{display:flex;align-items:center;justify-content:center;color:var(--color-primary);}
.hp-task-note{margin:var(--space-5) 0 0;font-size:var(--text-sm);color:var(--color-text-muted);text-align:center;}
.hp-task-note code{font-family:var(--font-mono);font-size:0.85em;color:var(--color-text);}
.hp-task-note em{color:var(--color-text);font-style:italic;}

.hp-compare{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-4);margin-top:var(--space-12);}
.hp-compare--compact{margin-top:var(--space-8);}
.hp-card{padding:var(--space-6);border-radius:var(--radius-xl);border:1px solid var(--color-border);background:var(--color-surface-2);box-shadow:var(--shadow-sm);height:100%;}
.hp-card--fail{border-color:var(--color-error);}
.hp-card--pass{border-color:var(--color-success);box-shadow:var(--shadow-md);}
.hp-card-head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2);}
.hp-card-head h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--color-text);margin:0;}
.hp-status{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:0.72rem;font-weight:700;letter-spacing:0.06em;padding:3px 9px;border-radius:var(--radius-full);}
.hp-status--fail{color:var(--color-error);background:rgba(209,99,167,0.12);}
.hp-status--pass{color:var(--color-success);background:var(--color-success-highlight);}
.hp-card-sub{font-size:var(--text-sm);color:var(--color-text-muted);margin:0 0 var(--space-4);}
.hp-card-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);}
.hp-card-list li{position:relative;padding-left:var(--space-5);font-size:var(--text-sm);color:var(--color-text);line-height:1.5;}
.hp-card-list li::before{content:"";position:absolute;left:0;top:0.55em;width:6px;height:6px;border-radius:var(--radius-full);background:var(--color-text-faint);}
.hp-card--pass .hp-card-list li::before{background:var(--color-success);}
.hp-card--fail .hp-card-list li::before{background:var(--color-error);}
.hp-card-list code{font-family:var(--font-mono);font-size:0.85em;color:var(--color-text);}
.hp-vs{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;color:var(--color-text-faint);text-transform:uppercase;letter-spacing:0.08em;}

.hp-metrics{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4);margin-top:var(--space-12);}
.hp-metric{flex:1;min-width:160px;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);text-align:center;}
.hp-metric-num{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;letter-spacing:-0.02em;color:var(--color-primary);}
.hp-metric-label{font-size:var(--text-sm);color:var(--color-text-muted);}
.hp-metric-label code{font-family:var(--font-mono);font-size:0.85em;color:var(--color-text);}

.hp-run{display:grid;grid-template-columns:1.3fr 1fr;align-items:stretch;gap:var(--space-6);margin-top:var(--space-12);}
.hp-run-terminal{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;}
.hp-run-bar{display:flex;gap:6px;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);background:var(--color-surface-offset);}
.hp-run-bar span{width:10px;height:10px;border-radius:var(--radius-full);background:var(--color-border);}
.hp-run-code{margin:0;padding:var(--space-5);font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.8;color:var(--color-text);overflow-x:auto;white-space:pre;flex:1;}
.hp-run-side{display:flex;flex-direction:column;gap:var(--space-4);justify-content:center;}
.hp-run-side p{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;}
.hp-run-oneliner{position:relative;display:flex;align-items:center;padding:var(--space-4) var(--space-10) var(--space-4) var(--space-4);background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-md);}
.hp-run-oneliner code{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text);white-space:nowrap;overflow-x:auto;}
.hp-run-oneliner .install-copy{background:var(--color-surface-dynamic);border-color:var(--color-border);color:var(--color-text-muted);}
.hp-run-oneliner .install-copy:hover{color:var(--color-text);}
.hp-run-side .btn-outline{align-self:flex-start;}

.hp-demo-block{margin-top:var(--space-16);padding-top:var(--space-12);border-top:1px solid var(--color-border);}
.hp-demo-head{max-width:760px;margin:0 auto;text-align:center;}
.hp-demo-head h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;letter-spacing:-0.02em;line-height:1.15;margin:0 0 var(--space-4);}
.hp-demo-head p{font-size:var(--text-base);color:var(--color-text-muted);margin:0 auto;max-width:66ch;}
.hp-metrics--finance{margin-top:var(--space-8);}
.hp-run--finance{margin-top:var(--space-8);}

/* happy-path — full-width input + in-card code + verdict lines */
.hp-io--full{margin-bottom:var(--space-5);}
.hp-io-meta{font-family:var(--font-mono);font-size:0.7rem;color:var(--color-text-faint);margin-left:auto;}
.hp-card .hp-code{margin:var(--space-4) 0;background:var(--color-surface);font-size:0.78rem;}
.hp-verdict{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);line-height:1.5;}
.hp-verdict .hp-c-dim{font-weight:400;}
.hp-verdict--fail{color:var(--color-error);background:rgba(161,44,123,0.10);}
.hp-verdict--pass{color:var(--color-success);background:var(--color-success-highlight);}
[data-theme='dark'] .hp-verdict--fail{background:rgba(209,99,167,0.12);}

/* happy-path mobile sizing — placed after the rules above so equal-specificity
   overrides (e.g. .hp-card .hp-code) win the cascade on phones */
@media (max-width:760px){
  .hp-task{grid-template-columns:1fr;}
  .hp-io-arrow{transform:rotate(90deg);}
  .hp-compare{grid-template-columns:1fr;}
  .hp-vs{justify-self:center;}
  .hp-run{grid-template-columns:1fr;}
  .hp-demo-head{text-align:left;}
  /* tighten code-heavy blocks so long lines fit the phone width */
  .hp-card{padding:var(--space-5) var(--space-3);}
  .hp-code{padding:var(--space-3);font-size:0.64rem;line-height:1.55;}
  .hp-card .hp-code{font-size:0.62rem;}
  .hp-run-code{padding:var(--space-3);font-size:0.64rem;line-height:1.6;}
  /* keep the metric tiles evenly sized instead of wrapping 2 + 1 */
  .hp-metrics{gap:var(--space-3);}
  .hp-metric{min-width:0;flex:1 1 0;padding:var(--space-4) var(--space-3);}
}

@media (max-width:480px){
  .hp-code{font-size:0.58rem;}
  .hp-card .hp-code{font-size:0.56rem;}
  .hp-run-code{font-size:0.58rem;}
}