/* ===== Tokens ===== */ :root { --bg: #0b0b0d; --bg-alt: #0f0f12; --surface: #131316; --surface-hi: #1a1a1e; --border: #26262b; --border-hi: #3a3a42; --text: #f4f4f5; --text-muted: #a1a1aa; --text-dim: #71717a; /* Material-style motion and elevation, tuned for a dark surface. Buttons use an M3 state layer (currentColor over the container) plus a ripple rather than a colour swap on hover. */ --m3-ease: cubic-bezier(0.2, 0, 0, 1); --m3-dur: 200ms; --m3-state-hover: 0.08; --m3-state-focus: 0.12; --m3-state-press: 0.12; --m3-elev-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px 1px rgba(0, 0, 0, 0.28); --m3-elev-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px 2px rgba(0, 0, 0, 0.28); --m3-elev-3: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 8px 3px rgba(0, 0, 0, 0.28); /* Controls are squared-off rather than pill shaped, and sit a step lighter than the surface they rest on so the fill reads without going bright */ --radius-control: 10px; --radius-chip: 8px; --radius-badge: 6px; --control-fill: #202027; } /* ===== Reset & Base ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; background: var(--bg); } body { background: var(--bg); color: var(--text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, .logo, .btn { font-family: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ===== Icons ===== */ h3 .fa-solid, h3 .fa-brands { font-size: 0.9em; margin-right: 6px; color: var(--text-muted); } /* Card icons sit in their own frame above the title */ .feature-card h3 .fa-solid, .usage-card h3 .fa-solid { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-hi); font-size: 0.95rem; } .feature-card:first-child h3 .fa-solid { width: 44px; height: 44px; font-size: 1.1rem; } /* Framed like the card icons rather than inverted, so the header uses the same dark-control language as the rest of the page */ .logo .fa-solid { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 10px; border: 1px solid var(--border-hi); border-radius: var(--radius-badge); background: var(--control-fill); color: var(--text); font-size: 0.75rem; vertical-align: middle; } /* .btn is a flex row with a gap, so the icon needs no margin of its own */ .btn .fa-solid, .btn .fa-brands { font-size: 0.9em; } .site-footer .fa-brands { margin-right: 4px; } /* ===== Layout ===== */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Prose directly in a section stays at a readable measure */ .section > .container > p { max-width: 68ch; } .section { padding: 96px 0; } /* Offset the sticky header when jumping to a section or subsection */ section[id], .subsection-title[id] { scroll-margin-top: 88px; } .section.alt-bg { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .section h2 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 40px; } .subsection-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 56px 0 10px; } .subsection-title + .section-lead { margin: 0 0 24px; } .approval-list + .small { margin-top: 16px; } /* Lenis's recommended companion CSS: it stamps these classes on while it owns the scroll, and scroll-behavior must yield to it or native smooth scrolling fights the animation. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* ===== Header ===== */ .site-header { padding: 14px 0; background: rgba(11, 11, 13, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; transition: border-color var(--m3-dur) var(--m3-ease), background var(--m3-dur) var(--m3-ease); border-bottom: 1px solid transparent; } .site-header.is-scrolled { border-bottom-color: var(--border); background: rgba(11, 11, 13, 0.9); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .header-nav-sections { margin-right: auto; gap: 26px; } /* Colour and hover come from .header-nav a; this only anchors the underline */ .header-nav-sections a { position: relative; } /* Set by the scroll spy on whichever section is currently in view */ .header-nav-sections a.is-active { color: var(--text); } .header-nav-sections a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; border-radius: 2px; background: var(--text); } .header-nav { display: flex; align-items: center; gap: 22px; } /* Idle muted, hover to full white. Everything else on the page brightens on hover, so these must not dim. */ .header-nav a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color var(--m3-dur) var(--m3-ease); } .header-nav a:hover { color: var(--text); } .header-nav .fa-brands { margin-right: 6px; } /* Star count chip, filled in from the GitHub API. Padding is set to land on the same 32px height as the CTA beside it. */ .gh-stars { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--border-hi); border-radius: var(--radius-badge); background: var(--control-fill); line-height: 1; transition: border-color var(--m3-dur) var(--m3-ease), background var(--m3-dur) var(--m3-ease); } /* display on .gh-stars would otherwise beat the UA rule for [hidden] */ .gh-stars[hidden] { display: none; } .header-nav a.gh-stars:hover { color: var(--text); border-color: var(--text-dim); } .header-nav a.gh-stars:hover .fa-star { color: var(--text); } .gh-stars .fa-star { font-size: 0.8rem; color: var(--text-dim); transition: color var(--m3-dur) var(--m3-ease); } .gh-stars-count { font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.85rem; font-weight: 500; } /* Compact CTA that mirrors the hero's primary button. line-height 1 so the height comes from the padding alone, matching the chip beside it. */ .header-nav .btn-sm { padding: 8px 18px; font-size: 0.85rem; line-height: 1; background: var(--control-fill); color: var(--text); border-color: var(--border-hi); border-radius: var(--radius-badge); font-weight: 600; box-shadow: none; } /* Outranks `.header-nav a:hover`, which would otherwise dim the label */ .header-nav a.btn-sm:hover { color: var(--text); box-shadow: var(--m3-elev-1); } /* Narrow screens drop the section nav onto its own full-width row below the logo, scrolling sideways instead of disappearing entirely */ @media (max-width: 860px) { .header-inner { flex-wrap: wrap; gap: 12px 20px; } .header-nav.header-nav-sections { order: 3; margin-right: 0; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; /* Bleed past the container's 24px padding on both sides so the strip scrolls edge to edge; the padding puts the inset back inside */ width: calc(100% + 48px); margin-inline: -24px; padding: 2px 24px 6px; } .header-nav-sections::-webkit-scrollbar { display: none; } .header-nav-sections a { white-space: nowrap; } .header-nav-sections a.is-active::after { bottom: -2px; } /* The header is two rows tall here, so anchors need a deeper offset */ section[id], .subsection-title[id] { scroll-margin-top: 124px; } } @media (max-width: 560px) { .header-nav .header-link { display: none; } } @media (max-width: 420px) { .gh-stars { display: none; } } .logo { display: inline-flex; align-items: center; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; color: var(--text); } /* ===== Hero ===== */ /* No overhead glow: SideRays is the hero's light source now */ .hero { position: relative; padding: 104px 0 40px; text-align: center; overflow: hidden; } /* SideRays layer. Rearmost of the hero's backgrounds: it comes before .hero-ascii in the DOM, so at a matching z-index it paints underneath the glyphs while both stay below .hero-container. */ .hero-rays { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1.4s ease; } .hero-rays.is-live { opacity: 1; } /* ASCII background layer. Decorative only: the real

sits on top of it, and ascii-bg.js skips mounting entirely under reduced motion. */ /* Height, not inset: 0, because the plane centres itself in this box, so it has to stop short of the demo window and leave the glyphs behind the headline. */ .hero-ascii { position: absolute; top: 0; left: 0; right: 0; height: 620px; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; /* Two masks, intersected: the linear one dissolves the field at top and bottom so it has no hard edge, the radial one clears the middle so the glyphs never sit under the headline, subtitle or buttons. Masking the layer itself, rather than painting a scrim over it, keeps the rays underneath from being flattened. */ -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 60%, transparent 94%), radial-gradient(ellipse 42% 46% at 50% 42%, transparent 40%, #000 100%); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 60%, transparent 94%), radial-gradient(ellipse 42% 46% at 50% 42%, transparent 40%, #000 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .hero-ascii.is-live { opacity: 0.32; } .ascii-text-layer { position: absolute; inset: 0; } /* The read-back buffer is one pixel per character cell. It exists to be sampled, never to be seen */ .ascii-text-layer canvas { display: none; } .ascii-text-layer pre { position: absolute; top: 0; left: 0; margin: 0; padding: 0; line-height: 1em; text-align: left; white-space: pre; user-select: none; color: var(--text-muted); } .hero-container { position: relative; z-index: 1; max-width: 900px; } .hero h1 { font-size: clamp(3.5rem, 11vw, 7.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin-bottom: 28px; background: linear-gradient(180deg, #ffffff 25%, #7c7c85 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-subtitle { font-size: 1.2rem; color: var(--text-muted); max-width: 620px; margin: 0 auto 40px; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } /* ===== Buttons (Material) ===== */ /* Filled button. Squared-off dark grey container with a light label, so the state layer (currentColor) lightens it on hover instead of dimming it. Feedback is that state layer plus a ripple; hover lifts by elevation. */ /* overflow stays visible so the specular rim can bleed past the edge; the ripple is clipped by its own .ripple-clip layer instead */ .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--control-fill); color: var(--text); text-decoration: none; padding: 14px 28px; border: 1px solid var(--border-hi); border-radius: var(--radius-control); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--m3-dur) var(--m3-ease), color var(--m3-dur) var(--m3-ease), box-shadow var(--m3-dur) var(--m3-ease), border-color var(--m3-dur) var(--m3-ease); } /* State layer: the label colour over the container. z-index -1 against the button's own stacking context keeps it above the fill but under the label. Radius is inherited because the button no longer clips its children. */ .state-layer::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--m3-dur) var(--m3-ease); } .state-layer:hover::before { opacity: var(--m3-state-hover); } .state-layer:focus-visible::before { opacity: var(--m3-state-focus); } .state-layer:active::before { opacity: var(--m3-state-press); } .btn:hover { box-shadow: var(--m3-elev-1); } .btn:active { box-shadow: none; } .btn:focus-visible { outline: 2px solid var(--text-muted); outline-offset: 2px; } /* Outlined button: no fill, no elevation, just a hairline and the state layer */ .btn-secondary { background: transparent; color: var(--text); border-color: var(--border); } .btn-secondary:hover { border-color: var(--text-muted); box-shadow: none; } /* Clipping layer the ripples land in, created lazily by script.js. Does the rounded-corner clipping the buttons themselves no longer do. */ .ripple-clip { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; } /* Ripple, grown from the pointer position by script.js */ .ripple { position: absolute; z-index: -1; border-radius: 50%; background: currentColor; opacity: 0.18; transform: scale(0); pointer-events: none; animation: ripple-out 560ms var(--m3-ease) forwards; } @keyframes ripple-out { to { transform: scale(1); opacity: 0; } } /* SpecularButton fx layer: the canvas extends past the button so the rim glow can bleed outside the edge. Above the fill and state layer, under nothing that matters since it never catches the pointer. */ .specular-fx { position: absolute; inset: -20px; z-index: 1; pointer-events: none; } .specular-fx canvas { display: block; width: 100%; height: 100%; } /* The install command, one click from the fold. The whole pill is the button: a Material tonal button that happens to hold a shell command. */ .install-pill { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 9px 10px 9px 16px; background: var(--control-fill); border: 1px solid var(--border-hi); border-radius: var(--radius-control); color: var(--text); font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.875rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--m3-dur) var(--m3-ease), box-shadow var(--m3-dur) var(--m3-ease); } .install-pill:hover { border-color: var(--border-hi); box-shadow: var(--m3-elev-1); } .install-pill:active { box-shadow: none; } .install-pill:focus-visible { outline: 2px solid var(--text-muted); outline-offset: 2px; } .install-prompt { color: var(--text-dim); user-select: none; } .install-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-badge); background: var(--surface); color: var(--text-dim); font-size: 0.75rem; transition: color var(--m3-dur) var(--m3-ease), background var(--m3-dur) var(--m3-ease); } .install-pill:hover .install-icon { color: var(--text); } .install-pill.is-copied { border-color: var(--text-muted); } .install-pill.is-copied .install-icon { background: #ffffff; color: #0b0b0d; } .install-pill.is-failed .install-icon { color: var(--text); } /* ===== Demo ===== */ .demo-wrap { position: relative; z-index: 1; max-width: 1120px; margin: 72px auto 0; padding: 0 24px; } .demo-window { position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #08080a; /* Barely-there halo, just enough to lift the window off the page, plus the drop shadow that does the actual separating */ box-shadow: 0 0 60px rgba(255, 255, 255, 0.02), 0 24px 60px rgba(0, 0, 0, 0.6); } .demo-titlebar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: var(--surface); border-bottom: 1px solid var(--border); } .demo-dot { width: 11px; height: 11px; border-radius: 50%; background: #3f3f46; } .demo-title { margin: 0 auto; padding-right: 57px; /* balances the three dots on the left */ font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.75rem; color: var(--text-dim); } .demo-window img { display: block; width: 100%; height: auto; } /* ===== Feature Showcase (CardSwap) ===== */ /* Copy on the left, an animated stack of session cards pinned to the bottom-right corner. The panel clips the stack's overflow, so the drop animation exits through the bottom edge. */ .feature-showcase { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 56px; min-height: 420px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .feature-showcase-copy { align-self: center; padding: 48px; max-width: 52ch; } .feature-showcase-copy h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; } .feature-showcase-copy p { color: var(--text-muted); font-size: 0.95rem; } /* Ported CardSwap layout CSS, sized here instead of via inline props */ .card-swap-container { position: absolute; bottom: 0; right: 0; width: 400px; height: 250px; transform: translate(5%, 20%); transform-origin: bottom right; perspective: 900px; overflow: visible; } .card-swap-container .card { position: absolute; top: 50%; left: 50%; width: 400px; height: 250px; display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--border-hi); background: var(--surface); transform-style: preserve-3d; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Resting slots as CSS, mirroring the port's makeSlot() for the 3-card case: the stack reads correctly before GSAP runs, without it, or under reduced motion. GSAP overrides these with inline transforms once it takes over. */ .card-swap-container .card:nth-child(1) { transform: translate(-50%, -50%) translate3d(0, 0, 0) skewY(6deg); z-index: 3; } .card-swap-container .card:nth-child(2) { transform: translate(-50%, -50%) translate3d(60px, -70px, -90px) skewY(6deg); z-index: 2; } .card-swap-container .card:nth-child(3) { transform: translate(-50%, -50%) translate3d(120px, -140px, -180px) skewY(6deg); z-index: 1; } /* Titlebar echoes the demo window's */ .swap-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.75rem; color: var(--text-muted); } .swap-card-head .fa-solid { font-size: 0.7rem; color: var(--text-dim); } .swap-card-body { flex: 1; margin: 0; padding: 14px 16px; font-size: 0.8rem; line-height: 1.7; color: var(--text-muted); white-space: pre; overflow: hidden; } @media (max-width: 900px) { .feature-showcase { display: block; min-height: 0; padding-bottom: 240px; } .feature-showcase-copy { padding: 36px 28px 0; } } /* The component's own responsive scaling, carried over as-is */ @media (max-width: 768px) { .card-swap-container { transform: scale(0.75) translate(25%, 25%); } } @media (max-width: 480px) { .card-swap-container { transform: scale(0.55) translate(25%, 25%); } } /* ===== Border Glow ===== */ /* Ported BorderGlow layers (React Bits), attached to existing cards by border-glow.js. The cards keep their own fill, border, radius and hover behaviour; this block only adds the pointer-driven layers. The base rule therefore drops the component's own card styling (background, border, shadow stack, display: grid) and keeps just the variables and positioning it needs. --card-bg defaults to the hover surface because the layers are only ever visible while the card is hovered. */ .border-glow-card { --edge-proximity: 0; --cursor-angle: 45deg; --edge-sensitivity: 30; --color-sensitivity: calc(var(--edge-sensitivity) + 20); --glow-padding: 40px; --cone-spread: 25; --fill-opacity: 0.5; --card-bg: var(--surface-hi); position: relative; isolation: isolate; } .border-glow-card::before, .border-glow-card::after, .border-glow-card > .edge-light { content: ""; position: absolute; inset: 0; border-radius: inherit; transition: opacity 0.25s ease-out; z-index: -1; } .border-glow-card:not(:hover):not(.sweep-active)::before, .border-glow-card:not(:hover):not(.sweep-active)::after, .border-glow-card:not(:hover):not(.sweep-active) > .edge-light { opacity: 0; transition: opacity 0.75s ease-in-out; } /* Mesh-gradient border, revealed in a cone facing the pointer */ .border-glow-card::before { border: 1px solid transparent; background: linear-gradient(var(--card-bg) 0 100%) padding-box, linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box, var(--gradient-one) border-box, var(--gradient-two) border-box, var(--gradient-three) border-box, var(--gradient-four) border-box, var(--gradient-five) border-box, var(--gradient-six) border-box, var(--gradient-seven) border-box, var(--gradient-base) border-box; opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))); mask-image: conic-gradient( from var(--cursor-angle) at center, black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%), transparent calc((100 - var(--cone-spread) - 15) * 1%), black calc((100 - var(--cone-spread)) * 1%) ); } /* Mesh-gradient wash inside the card near the lit edge */ .border-glow-card::after { border: 1px solid transparent; background: var(--gradient-one) padding-box, var(--gradient-two) padding-box, var(--gradient-three) padding-box, var(--gradient-four) padding-box, var(--gradient-five) padding-box, var(--gradient-six) padding-box, var(--gradient-seven) padding-box, var(--gradient-base) padding-box; mask-image: linear-gradient(to bottom, black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%), radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%), conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%); mask-composite: subtract, add, add, add, add, add; opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))); mix-blend-mode: soft-light; } /* Outer glow ring, bleeding past the card edge */ .border-glow-card > .edge-light { inset: calc(var(--glow-padding) * -1); pointer-events: none; z-index: 1; mask-image: conic-gradient( from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5% ); opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity))); mix-blend-mode: plus-lighter; } .border-glow-card > .edge-light::before { content: ""; position: absolute; inset: var(--glow-padding); border-radius: inherit; box-shadow: inset 0 0 0 1px var(--glow-color), inset 0 0 1px 0 var(--glow-color-60), inset 0 0 3px 0 var(--glow-color-50), inset 0 0 6px 0 var(--glow-color-40), inset 0 0 15px 0 var(--glow-color-30), inset 0 0 25px 2px var(--glow-color-20), inset 0 0 50px 2px var(--glow-color-10), 0 0 1px 0 var(--glow-color-60), 0 0 3px 0 var(--glow-color-50), 0 0 6px 0 var(--glow-color-40), 0 0 15px 0 var(--glow-color-30), 0 0 25px 2px var(--glow-color-20), 0 0 50px 2px var(--glow-color-10); } /* ===== Feature Grid ===== */ /* 10 cards: the first and last span 2 columns, so 12 cells fill 4 rows exactly */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 26px; transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease; } .feature-card:hover { border-color: var(--border-hi); background: var(--surface-hi); transform: translateY(-2px); } .feature-card h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; } .feature-card p { color: var(--text-muted); font-size: 0.95rem; } .feature-card:first-child { grid-column: span 2; } .feature-card:first-child h3 { font-size: 1.45rem; } .feature-card:first-child p { font-size: 1.05rem; max-width: 46ch; } .feature-card:last-child { grid-column: span 2; } /* ===== Steps ===== */ .steps { list-style: none; counter-reset: step; padding-left: 0; max-width: 760px; } .steps li { position: relative; padding-left: 60px; margin-bottom: 40px; } .steps li:last-child { margin-bottom: 0; } .steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-chip); border: 1px solid var(--border-hi); background: var(--control-fill); color: var(--text); font-family: "Space Grotesk", "Inter", sans-serif; font-size: 0.95rem; font-weight: 600; line-height: 1; } .steps li strong { display: block; font-size: 1.2rem; letter-spacing: -0.01em; margin-bottom: 10px; padding-top: 5px; } .steps pre { background: #08080a; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; overflow-x: auto; font-size: 0.875rem; margin: 8px 0; } /* Roomier leading so inline code chips don't clip when the line wraps */ .small { font-size: 0.8rem; line-height: 2; color: var(--text-dim); margin-top: 4px; } /* ===== Usage Grid ===== */ .usage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .usage-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 26px; transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease; display: flex; flex-direction: column; } .usage-card:hover { border-color: var(--border-hi); background: var(--surface-hi); transform: translateY(-2px); } .usage-card h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; } .usage-card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 16px; } .usage-card pre { background: #08080a; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; overflow-x: auto; font-size: 0.85rem; } .usage-card .code-block { margin-top: auto; } /* ===== Approval Modes ===== */ .section-lead { max-width: 68ch; color: var(--text-muted); margin: -24px 0 40px; } /* One row per mode, ordered strictest to loosest so the list reads top to bottom as a ramp */ .approval-list { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .approval-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 24px; padding: 16px 24px; border-top: 1px solid var(--border); transition: background 0.15s ease; } .approval-row:first-child { border-top: none; } .approval-row:hover { background: var(--surface-hi); } .approval-name { font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; } .approval-tags { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .approval-risk, .approval-default { padding: 2px 9px; border: 1px solid; border-radius: var(--radius-badge); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; } .approval-default { color: var(--text-muted); border-color: var(--border-hi); background: var(--surface-hi); } /* Risk climbs by contrast, not hue: dim outline to inverted fill */ .risk-normal { color: var(--text-dim); border-color: var(--border); background: transparent; } .risk-warn { color: var(--text); border-color: var(--border-hi); background: var(--surface-hi); } .risk-danger { color: #0b0b0d; border-color: #ffffff; background: #ffffff; } .approval-desc { color: var(--text-muted); font-size: 0.9rem; } /* ===== Tools Grid ===== */ /* Core spans the full row with a two-column list; the rest sit 4-up and stretch to a shared height so the row reads as a grid. */ .tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } /* Commands & Sessions: two-up row */ .commands-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .tool-card-wide { grid-column: 1 / -1; } .tool-card-wide ul { columns: 2; column-gap: 40px; } .tool-card-wide li { break-inside: avoid; } .tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 26px; transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease; } .tool-card:hover { border-color: var(--border-hi); background: var(--surface-hi); transform: translateY(-2px); } .tool-card h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .tool-card ul { list-style: none; padding: 0; } .tool-card li { padding: 9px 0; font-size: 0.875rem; color: var(--text-muted); border-bottom: 1px dashed var(--border); } .tool-card li:last-child { border-bottom: none; padding-bottom: 0; } .tool-card li code { background: var(--surface-hi); color: var(--text); font-weight: 500; } .tool-card a { color: var(--text); } /* ===== Code ===== */ pre, code { font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.875rem; } code { background: var(--surface-hi); border: 1px solid var(--border); color: var(--text); padding: 1px 6px; border-radius: 5px; font-size: 0.85em; /* Keep a chip whole rather than letting it break its own border box */ white-space: nowrap; } pre code { background: none; border: none; padding: 0; border-radius: 0; font-size: inherit; white-space: pre; } /* ===== Copy Button ===== */ .code-block { position: relative; } .code-block pre { padding-right: 52px; } /* Material icon button: squared off, with a state layer and ripple like the rest */ .copy-btn { position: absolute; top: 8px; right: 8px; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: var(--surface-hi); color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--radius-chip); font-size: 0.8rem; cursor: pointer; -webkit-tap-highlight-color: transparent; opacity: 0; transition: opacity var(--m3-dur) var(--m3-ease), color var(--m3-dur) var(--m3-ease), border-color var(--m3-dur) var(--m3-ease); } .code-block:hover .copy-btn, .copy-btn:focus-visible, .copy-btn.is-copied, .copy-btn.is-failed { opacity: 1; } .copy-btn:hover { color: var(--text); border-color: var(--border-hi); } .copy-btn:focus-visible { outline: 2px solid var(--text-muted); outline-offset: 2px; } .copy-btn.is-copied { color: #0b0b0d; background: #ffffff; border-color: #ffffff; } .copy-btn.is-failed { color: var(--text); border-style: dashed; border-color: var(--text-muted); } @media (hover: none) { .copy-btn { opacity: 1; } } /* ===== Scroll Reveal ===== */ /* Both classes are added by JS and removed once the transition finishes, so no-JS visitors never meet a hidden element and hover transitions on the cards underneath are handed back untouched */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.is-visible { opacity: 1; transform: none; } /* ===== Footer ===== */ .site-footer { border-top: 1px solid var(--border); padding: 56px 0; text-align: center; font-size: 0.85rem; color: var(--text-dim); } .site-footer p { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; } .site-footer a { color: var(--text-muted); text-decoration: none; font-weight: 500; } .site-footer a:hover { color: var(--text); } /* Links inside body prose */ .section p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-hi); } .section p a:hover { text-decoration-color: var(--text); } /* ===== Responsive ===== */ @media (max-width: 1000px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } .feature-card:first-child { grid-column: span 2; } .approval-row { grid-template-columns: 120px 1fr auto; gap: 16px; } .section { padding: 72px 0; } .demo-wrap { margin-top: 56px; } } @media (max-width: 600px) { .hero { padding-top: 64px; } .hero-subtitle { font-size: 1.05rem; } /* Let the subtitle reflow naturally instead of breaking mid-thought */ .hero-subtitle br { display: none; } .hero-cta .btn { flex: 1 1 auto; } /* The hero content stack is shorter here, so the glyph field follows it up */ .hero-ascii { height: 460px; } .section { padding: 56px 0; } .section h2 { font-size: 1.75rem; margin-bottom: 28px; } .feature-grid, .usage-grid, .tools-grid, .commands-grid { grid-template-columns: 1fr; } /* Name and badges share the top line, description wraps under both */ .approval-row { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 18px; } .approval-desc { grid-column: 1 / -1; } .feature-card:first-child, .feature-card:last-child { grid-column: auto; } .feature-card:first-child h3 { font-size: 1.2rem; } .feature-card:first-child p { font-size: 0.95rem; } .tool-card-wide ul { columns: 1; } .steps li { padding-left: 48px; } .demo-title { display: none; } } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .feature-card:hover, .usage-card:hover, .tool-card:hover { transform: none; } /* State layers still convey hover; the ripple's travel is the motion */ .ripple { display: none; } /* JS skips the reveal entirely, but the preference can change after load */ .reveal { opacity: 1; transform: none; transition: none; } }