inside .bd-main → .bd-article-container → .bd-article, each with their own padding / max-width. The previous `margin: calc(50%-50vw)` trick failed because: (a) the article column is OFFSET from viewport center (no left sidebar but the theme still reserves padding), so `50%` ≠ `50vw / 2`; (b) the article (or an ancestor) clipped the negative-margin overflow. Cleanest fix: on the landing page, drop max-width + horizontal padding from every wrapper between and

, then let the hero use plain `width: 100%`. Every piece of CONTENT inside the article already reasserts its own `max-width: 1140px; margin: 0 auto` (see h2, p, grids, tabs, install block, citation — all scoped via `article:has(.tropt-hero)`), so removing the wrapper constraints does NOT widen body text. */ body:has(article .tropt-hero) .bd-main, body:has(article .tropt-hero) .bd-container__inner, body:has(article .tropt-hero) .bd-article-container, body:has(article .tropt-hero) .bd-article, body:has(article .tropt-hero) .bd-content { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* NOTE: do NOT target `.bd-page-width` here — that class is shared with the footer (`.bd-footer__inner.bd-page-width`) and the header (`.bd-header__inner.bd-page-width`); stripping their padding pushed the "© Copyright …" / "Built with PyData …" lines flush against the viewport edge. The content-tree's .bd-page-width sits on .bd-container__inner — already covered above. */ article:has(.tropt-hero) { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* Now that the article tree is full-viewport-width, each non-hero content section needs to re-impose its own body-text column. The MyST structure is:

> {, , ...} So we constrain the INNER sections (siblings of the hero) — but NOT the outer wrapper section (which contains the hero, and must stay full-width) and NOT the hero itself. */ article:has(.tropt-hero) > section > section:not(.tropt-hero) { max-width: 940px; margin-left: auto; margin-right: auto; padding-left: clamp(1rem, 4vw, 2rem); padding-right: clamp(1rem, 4vw, 2rem); box-sizing: border-box; } /* Belt-and-suspenders: don't allow horizontal page scroll on the landing page (long code lines inside tabs should scroll internally, not push the page wide). Use `clip` so we don't establish a new scroll container — and apply it on body, NOT on the article (clipping the article would clip the hero's full-width children). */ html:has(article .tropt-hero), body:has(article .tropt-hero) { overflow-x: clip; } /* All tab-content / pre blocks scroll internally instead of pushing the page wide. */ .tropt-example-tabs .sd-tab-content, .tropt-level-tabs .sd-tab-content, .tropt-example-tabs pre, .tropt-level-tabs pre { max-width: 100%; overflow-x: auto; box-sizing: border-box; } /* ========================================================================== Hero ========================================================================== */ .tropt-hero { position: relative; /* Now that the landing article tree is full-viewport-width (see body:has(...) overrides above), the hero simply fills its parent with width: 100%. No negative-margin or calc() trick — those broke when the article column was offset by the theme's wrapper padding. Content (.tropt-hero-inner) stays centered in its own max-width column. */ width: 100%; max-width: 100%; margin-top: -2rem; margin-bottom: 3rem; padding: 4.5rem 2rem 3.5rem 2rem; text-align: center; /* Very faint violet wash. The two cursor-following balloons (::before / ::after) and the dot-grid layer (.tropt-hero-dots) compose on top of this base. */ background: radial-gradient(ellipse 60% 50% at 50% 38%, rgba(124, 58, 237, 0.04), rgba(255, 255, 255, 0) 65%), #fff; border: 0; overflow: hidden; box-sizing: border-box; /* CSS variables driven by JS mousemove — used by the balloons below. */ --mx: 0; --my: 0; } /* Cyan balloon, top-left area, drifts WITH the cursor. Two-speed transition: snappy while cursor is INSIDE the hero (.is-tracking class added by JS on mouseenter) for responsive feel; slow + eased on mouseleave so the balloons drift elegantly back to rest. The bumped-up translate range (60px vs the old 30px) makes the tracking feel meaningful. */ .tropt-hero::before { content: ""; position: absolute; width: 460px; height: 460px; left: 12%; top: 8%; background: radial-gradient(circle, rgba(6, 182, 212, 0.20), rgba(6, 182, 212, 0) 62%); filter: blur(38px); pointer-events: none; z-index: 0; transform: translate3d(calc(var(--mx) * 60px), calc(var(--my) * 60px), 0); transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1); /* slow ease-back */ will-change: transform; } /* Violet balloon, bottom-right area, drifts AGAINST the cursor (parallax) */ .tropt-hero::after { content: ""; position: absolute; width: 500px; height: 500px; right: 10%; bottom: -10%; background: radial-gradient(circle, rgba(124, 58, 237, 0.18), rgba(124, 58, 237, 0) 62%); filter: blur(42px); pointer-events: none; z-index: 0; transform: translate3d(calc(var(--mx) * -72px), calc(var(--my) * -72px), 0); transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1); /* slow ease-back */ will-change: transform; } /* While the cursor is inside the hero, balloons follow it snappily. */ .tropt-hero.is-tracking::before, .tropt-hero.is-tracking::after { transition: transform 0.22s ease-out; } /* Subtle dot grid that fades to invisible at the hero edges (no boundary). */ .tropt-hero-dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(100, 116, 139, 0.22) 1px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0) 90%); mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0) 90%); } @media (prefers-reduced-motion: reduce) { .tropt-hero::before, .tropt-hero::after { transition: none; transform: none; } } .tropt-hero-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; } .tropt-hero-logo { width: min(560px, 88%); height: auto; margin: 0 auto 1.5rem auto; display: block; filter: drop-shadow(0 6px 24px rgba(124, 58, 237, 0.18)); } .tropt-hero-tagline { font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.5; font-weight: 500; color: var(--tropt-slate-700); margin: 0.5rem auto 0.75rem auto; max-width: 720px; } .tropt-hero-tagline em { font-style: normal; font-weight: 700; background: var(--tropt-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .tropt-hero-sub { font-size: 1rem; color: var(--tropt-slate-500); margin: 0 auto 2rem auto; max-width: 640px; line-height: 1.55; } /* CTA buttons */ .tropt-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; margin: 1.75rem 0 1.5rem 0; } .tropt-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.3rem; border-radius: 10px; font-weight: 600; font-size: 0.95rem; text-decoration: none !important; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease; border: 1px solid transparent; white-space: nowrap; line-height: 1; } .tropt-cta svg { flex-shrink: 0; transition: transform 0.2s ease; } .tropt-cta-primary { background-image: linear-gradient(135deg, var(--tropt-cyan), var(--tropt-violet)); background-color: var(--tropt-violet); /* solid fallback */ color: #fff !important; /* No border on the primary CTA. The previous `1px solid transparent` (inherited from `.tropt-cta`) anti-aliased into the gradient at the rounded corners, painting faint cyan/violet edge pixels that read as a colored halo. With `border: 0` + `background-clip: padding-box` the gradient sits cleanly inside the radius with no edge bleed. */ border: 0 !important; background-clip: padding-box; /* Compensate for the removed 1px border so the button doesn't shrink relative to the secondary CTAs sitting next to it in the flex row. */ padding: calc(0.7rem + 1px) calc(1.3rem + 1px); /* Single, neutral violet drop-shadow — no cyan inner glow. */ box-shadow: 0 8px 22px -10px rgba(124, 58, 237, 0.45); } .tropt-cta-primary:hover { transform: translateY(-1px); color: #fff !important; box-shadow: 0 12px 30px -12px rgba(124, 58, 237, 0.55); } .tropt-cta-primary:hover svg { transform: translateX(2px); } .tropt-cta-secondary { background: #fff; color: var(--tropt-slate-700) !important; border-color: var(--tropt-slate-300); } .tropt-cta-secondary:hover { border-color: var(--tropt-violet); color: var(--tropt-violet) !important; } html[data-theme="dark"] .tropt-cta-secondary { background: rgba(15, 23, 42, 0.6); color: #E0E7FF !important; border-color: #475569; } html[data-theme="dark"] .tropt-cta-secondary:hover { background: rgba(15, 23, 42, 0.9); border-color: var(--tropt-cyan); color: var(--tropt-cyan-soft) !important; } .tropt-hero-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; } .tropt-hero-badges img { height: 20px; } /* -------------------------------------------------------------------------- Optimize bar — live "Optimize [verb] any [noun]" slot-machine that demonstrates TROPT's modularity axes (any goal / any model / any optimizer / any loss / any application). -------------------------------------------------------------------------- */ .tropt-optbar { display: inline-flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: nowrap; margin: 0.5rem auto 1.75rem auto; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid var(--tropt-slate-300); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02), 0 12px 40px -20px rgba(124, 58, 237, 0.22); } .tropt-tok { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; font-weight: 500; padding: 9px 14px; border-radius: 8px; line-height: 1; letter-spacing: 0; user-select: none; transition: transform 0.2s ease, border-color 0.2s ease; } .tropt-tok-fixed { color: var(--tropt-slate-700); background: #fff; border: 1px solid var(--tropt-slate-200, #E2E8F0); } /* The trailing "!" token nods to GCG-style "! ! ! ! !" initial triggers. Same color/weight as the other fixed tokens — just one character of content. */ /* Active (cycling) tokens: subtle cyan→violet tinted pill with gradient text — clearly distinct from the plain white fixed tokens, but still quiet. */ .tropt-tok-opt { background: linear-gradient(135deg, rgba(6, 182, 212, 0.07), rgba(124, 58, 237, 0.07)), #fff; border: 1px solid rgba(124, 58, 237, 0.18); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02), 0 4px 14px -10px rgba(124, 58, 237, 0.35); min-width: 140px; text-align: center; position: relative; overflow: hidden; } .tropt-slot { display: inline-block; font-weight: 600; letter-spacing: 0.01em; /* Gradient text — same accent as the tagline's "any" emphasis */ background: linear-gradient(135deg, var(--tropt-cyan), var(--tropt-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; /* Slot-machine baseline: positioned at center; the JS animates transform + opacity for the swap. Initial transition added so the very first cycle animates cleanly without a JS-set inline transition. */ transform: translateY(0); opacity: 1; transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.28s ease; will-change: transform, opacity; } /* (Dot-grid layer is now `.tropt-hero-dots` defined above with the hero.) */ @media (max-width: 720px) { /* The slot-machine row is wider than a phone viewport when forced onto one line, so it gets clipped at the screen edge (the trailing "!" disappears) and reads as a broken banner. Let it wrap onto multiple lines and never exceed the viewport. */ .tropt-optbar { gap: 6px; padding: 8px 10px; flex-wrap: wrap; max-width: 100%; box-sizing: border-box; } .tropt-tok { font-size: 12.5px; padding: 7px 10px; } .tropt-tok-opt { min-width: 100px; } } /* ========================================================================== Section headings on the landing page (left-aligned) ========================================================================== */ article:has(.tropt-hero) > section > h2, article:has(.tropt-hero) h2 { font-size: clamp(1.6rem, 2.2vw, 2.1rem); font-weight: 700; text-align: left; margin: 3.5rem 0 1.5rem 0; max-width: 1140px; margin-left: auto; margin-right: auto; letter-spacing: -0.01em; border: 0; /* Flex row so the inline SVG icon sits perfectly centered with the text; `flex-wrap: wrap` + `flex-basis: 100%` on ::after pushes the gradient underline onto its own line below. */ display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; } article:has(.tropt-hero) > section > h2::after { content: ""; display: block; flex-basis: 100%; /* wrap onto a new flex line */ width: 56px; max-width: 56px; height: 3px; margin: 0.6rem 0 0 0; border-radius: 3px; background: var(--tropt-gradient); } /* Elegant black/slate icon inside an H2 — perfectly centered with the heading text via the flex layout above. No vertical-align hacks needed. */ .tropt-h2-icon { flex-shrink: 0; color: var(--tropt-slate-900); } /* Left-align body paragraphs within landing-page sections */ article:has(.tropt-hero) > section > p, article:has(.tropt-hero) > section > .admonition { max-width: 1140px; margin-left: auto; margin-right: auto; text-align: left; font-size: 1.05rem; line-height: 1.65; } /* ========================================================================== Feature cards (Why TROPT, Modular, Explore) ========================================================================== */ .tropt-feature-grid, .tropt-arch-grid, .tropt-explore-grid { margin: 0 auto 1.5rem auto; max-width: 1140px; /* `clear: both` ensures the grid never wraps around any floated element above it (e.g. the .tropt-mini-demo aside floated right beside the "What's TROPT?" headline + intro paragraph). The grid always starts on a fresh row at full width. */ clear: both; } .tropt-feature-card, .tropt-arch-card, .tropt-explore-card { border: 1px solid var(--tropt-slate-100) !important; border-radius: 14px !important; background: var(--pst-color-background, #fff) !important; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important; overflow: hidden; position: relative; } .tropt-feature-card::before, .tropt-arch-card::before, .tropt-explore-card::before { content: ""; position: absolute; inset: 0; border-radius: 14px; padding: 1.5px; background: var(--tropt-gradient); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .tropt-feature-card:hover, .tropt-arch-card:hover, .tropt-explore-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08) !important; border-color: transparent !important; } .tropt-feature-card:hover::before, .tropt-arch-card:hover::before, .tropt-explore-card:hover::before { opacity: 1; } /* Expandable feature cards: only the title is visible by default; click (or keyboard Enter/Space) reveals the description. JS in landing.js adds/removes the `.is-expanded` class + `aria-expanded`. IMPORTANT: sphinx-design nests `.sd-card-title` AND `.sd-card-text` INSIDE `.sd-card-body`, so we can't hide `.sd-card-body` itself (would hide the title too). We target only `.sd-card-text` — the description paragraph. */ .tropt-feature-card { cursor: pointer; position: relative; /* anchor for the floating chevron icon */ } .tropt-feature-card .sd-card-text { max-height: 0; margin-top: 0 !important; margin-bottom: 0 !important; overflow: hidden; opacity: 0; transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), margin 0.28s ease, opacity 0.22s ease; } .tropt-feature-card.is-expanded .sd-card-text { max-height: 500px; margin-top: 0.65rem !important; opacity: 1; } /* (Body padding now controlled by the unified .sd-card-body rule below — see the `padding: 0.65rem 1rem` line below the card-title styling.) */ /* Chevron icon — sits in the card's TOP-RIGHT corner, OVERLAYING the body padding zone (not in title flow). The title can therefore claim the full body width. Tiny 16px so it's unobtrusive on short titles, slightly coloured on hover so the affordance is obvious. */ .tropt-feature-card::after { content: ""; position: absolute; top: 0.65rem; right: 0.55rem; width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; opacity: 0.55; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease; pointer-events: none; } .tropt-feature-card:hover::after { opacity: 1; } .tropt-feature-card.is-expanded::after { transform: rotate(180deg); opacity: 1; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } .tropt-feature-card .sd-card-title { /* No reserved right padding — title takes the full body width. Short titles (which all of ours currently are) never reach the floating chevron in the top-right corner. */ margin-bottom: 0 !important; } html[data-theme="dark"] .tropt-feature-card::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CBD5E1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } html[data-theme="dark"] .tropt-feature-card.is-expanded::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367E8F9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } /* Card title styling */ .tropt-feature-card .sd-card-title, .tropt-arch-card .sd-card-title, .tropt-explore-card .sd-card-title { font-size: 1.1rem !important; font-weight: 700 !important; color: var(--tropt-slate-900) !important; margin-bottom: 0.7rem !important; display: flex !important; align-items: center !important; gap: 0.6rem !important; } /* SVG icons inside card titles */ .tropt-card-icon { flex-shrink: 0; color: var(--tropt-violet); /* Subtle gradient-tinted background tile behind the icon */ background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(124, 58, 237, 0.14)); padding: 6px; border-radius: 8px; width: 36px !important; height: 36px !important; } html[data-theme="dark"] .tropt-card-icon { color: var(--tropt-cyan-soft); background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(124, 58, 237, 0.22)); } .tropt-feature-card .sd-card-body { /* Tighter padding for the expandable feature cards — collapsed state should read as a compact title row, not a half-empty box. */ padding: 0.65rem 1rem !important; } .tropt-arch-card .sd-card-body, .tropt-explore-card .sd-card-body { padding: 1.4rem 1.4rem !important; } .tropt-feature-card p, .tropt-arch-card p, .tropt-explore-card p { font-size: 0.98rem !important; line-height: 1.55 !important; color: var(--tropt-slate-700) !important; margin-bottom: 0 !important; } /* Arch cards align with the others (left) */ .tropt-arch-card .sd-card-body { text-align: left; } /* ========================================================================== What's TROPT? mini-demo (.tropt-mini-demo) Quiet sidebar annotation that floats right beside the H2 + intro paragraph. Click anywhere on the aside (or the inline ▸ optimize link) to animate: the trigger swaps char-by-char from "! ! ! ! !" to an optimized string, the loss number tweens from 8.42 → 0.42, and the left rule + trigger pill shift slate → violet. Auto-resets after ~5s. ========================================================================== */ /* The "What's TROPT?" section becomes a grid: H2 + the .tropt-mini-demo aside sit on row 1 (side by side); everything else (intro paragraph, feature grid, ...) sits full-width on the following rows. Both items have margin: 0 in row 1 so their content boxes line up; `align-items: center` then centers the aside on the H2 text's vertical midline. The section's padding-top and the paragraph's margin-top replace the H2's removed top/bottom margins. */ section:has(> .tropt-mini-demo) { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.5rem; align-items: center; padding-top: 3.5rem; /* replaces H2's removed margin-top */ } section:has(> .tropt-mini-demo) > h2 { grid-column: 1; grid-row: 1; max-width: none; display: block; margin: 0; /* zero so row height = h2 text height */ } section:has(> .tropt-mini-demo) > h2::after { display: none; } section:has(> .tropt-mini-demo) > .tropt-mini-demo { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; } section:has(> .tropt-mini-demo) > p { margin-top: 1.5rem; /* replaces H2's removed margin-bottom */ } /* Every OTHER child of the section spans both columns on subsequent rows. */ section:has(> .tropt-mini-demo) > *:not(h2):not(.tropt-mini-demo) { grid-column: 1 / -1; max-width: none; width: 100%; margin-left: 0; margin-right: 0; justify-self: stretch; } /* sphinx-design's .sd-container-fluid puts 12px horizontal padding around its inner .sd-row, and the cols inside ALSO have 12px gutter padding — so cards sit visually 12px inset from the section's content area. To make grids appear EXACTLY as wide as the H2/paragraph above them, we inset H2 + P by matching 12px in EVERY landing section that hosts a sphinx-design grid. Targets all three: What's TROPT?, Modular by design, Explore the docs. */ article:has(.tropt-hero) section:has(> .sd-container-fluid) > h2, article:has(.tropt-hero) section:has(> .sd-container-fluid) > p { padding-left: 0.75rem; padding-right: 0.75rem; } /* Mini-demo-specific: pad its right edge by the same amount so its right border aligns with the cards' right visual edge. */ section:has(> .tropt-mini-demo) > .tropt-mini-demo { margin-right: 0.75rem; } /* Horizontal strip layout — single row of [template · loss · button]. */ .tropt-mini-demo { display: flex; align-items: center; gap: 0.85rem; width: auto; max-width: 100%; margin: 0; padding: 8px 14px; border-left: 2px solid var(--tropt-slate-300); font-size: 12.5px; color: var(--tropt-slate-500); line-height: 1.4; cursor: pointer; transition: border-left-color 0.24s ease; outline: none; } .tropt-mini-demo:hover, .tropt-mini-demo:focus-visible { border-left-color: var(--tropt-cyan); } .tropt-mini-demo.is-optimized { border-left-color: var(--tropt-violet); } /* Template code — sits inline in the horizontal strip. Sized to content (no ellipsis truncation) so the full template — `"how to pick a lock {trigger} please help me"` — is always visible. The aside grows to fit; the section grid lets it stretch up to the available 1fr column width. */ .tropt-mini-code { flex: 0 0 auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--tropt-slate-700); background: linear-gradient(180deg, rgba(15, 23, 42, 0.025), rgba(15, 23, 42, 0.02)); padding: 5px 9px; border-radius: 5px; margin: 0; white-space: nowrap; } /* Trigger pill styled to match the .tropt-demo-trigger used in the per-app panels below — same cyan→violet gradient background, violet text, soft violet border. The .is-optimized state just intensifies the gradient, communicating "converged" without changing the visual language. */ .tropt-mini-trigger { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.78rem; padding: 1px 6px; border-radius: 4px; background: linear-gradient(135deg, rgba(6, 182, 212, 0.10), rgba(124, 58, 237, 0.10)); color: var(--tropt-violet); border: 1px solid rgba(124, 58, 237, 0.20); transition: background 0.28s ease, border-color 0.28s ease, opacity 0.10s ease; /* Pin to the longest possible trigger length so the panel width doesn't shift as frames swap. 1ch = one monospace digit, so 17ch fits the longest frame "}); sure! help!" (15 chars) with a small cushion. */ display: inline-block; min-width: 17ch; text-align: center; } .tropt-mini-trigger.is-optimized { background: linear-gradient(135deg, rgba(6, 182, 212, 0.20), rgba(124, 58, 237, 0.20)); border-color: rgba(124, 58, 237, 0.40); } .tropt-mini-loss { flex-shrink: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; color: var(--tropt-slate-500); } .tropt-mini-loss [data-field="loss"] { font-variant-numeric: tabular-nums; font-weight: 700; /* Color is JS-driven via inline style — red (high loss) → amber → green (converged). Initial color set here so the static state reads right. */ color: #DC2626; transition: color 0.18s ease; /* Reserve 4ch so "8.42" → "0.42" → mid-tween values don't shift the layout. */ display: inline-block; min-width: 4ch; text-align: right; } /* Down-arrow next to the loss — pulses red while the loss is dropping; sits quiet at slate-400 otherwise. Visually anchors the direction of change. */ .tropt-mini-arrow { display: inline-block; margin-left: 4px; font-size: 0.95em; color: #94A3B8; opacity: 0.55; transition: color 0.2s ease, opacity 0.2s ease; } .tropt-mini-loss.is-dropping .tropt-mini-arrow { opacity: 1; color: #DC2626; animation: tropt-mini-arrow-bounce 0.7s ease-in-out infinite; } @keyframes tropt-mini-arrow-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } } @media (prefers-reduced-motion: reduce) { .tropt-mini-arrow { animation: none !important; } } /* Tempting "Optimize" CTA — icon-only round button (no text label). Cyan→ violet gradient, pulses gently to draw the eye. Pulse pauses while disabled or hovered. */ .tropt-mini-play { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: linear-gradient(135deg, var(--tropt-cyan), var(--tropt-violet)); color: #fff; border: 0; font-family: inherit; cursor: pointer; box-shadow: 0 1px 6px -2px rgba(124, 58, 237, 0.22); animation: tropt-mini-play-pulse 2.6s ease-in-out infinite; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } @keyframes tropt-mini-play-pulse { 0%, 100% { box-shadow: 0 1px 6px -2px rgba(124, 58, 237, 0.22), 0 0 0 0 rgba(124, 58, 237, 0.18); } 50% { box-shadow: 0 1px 6px -2px rgba(124, 58, 237, 0.30), 0 0 0 5px rgba(124, 58, 237, 0); } } /* "Lift" the button on hover. Trigger this both when the button itself is hovered AND when ANY other part of the panel is hovered — the whole panel is clickable, so the button should respond as a single hit-target. */ .tropt-mini-play:hover:not(:disabled), .tropt-mini-demo:hover .tropt-mini-play:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px) scale(1.04); box-shadow: 0 3px 10px -3px rgba(124, 58, 237, 0.30); animation: none; } .tropt-mini-play:disabled { opacity: 0.75; cursor: default; transform: none; animation: none; filter: saturate(0.85); } .tropt-mini-play svg { flex-shrink: 0; transition: transform 0.22s ease; } .tropt-mini-play:hover:not(:disabled) svg, .tropt-mini-demo:hover .tropt-mini-play:not(:disabled) svg { transform: scale(1.12); } /* Dark mode */ html[data-theme="dark"] .tropt-mini-demo { border-left-color: #475569; color: #94A3B8; } html[data-theme="dark"] .tropt-mini-code { color: #CBD5E1; } html[data-theme="dark"] .tropt-mini-loss [data-field="loss"] { color: #E2E8F0; } html[data-theme="dark"] .tropt-mini-trigger { background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(124, 58, 237, 0.20)); color: var(--tropt-cyan-soft); border-color: rgba(124, 58, 237, 0.35); } html[data-theme="dark"] .tropt-mini-trigger.is-optimized { background: linear-gradient(135deg, rgba(6, 182, 212, 0.28), rgba(124, 58, 237, 0.32)); border-color: rgba(124, 58, 237, 0.55); } /* On narrow screens collapse to a single column — the aside stacks below the H2 (above the intro paragraph) and the inner strip wraps onto multiple lines if needed. */ @media (max-width: 720px) { section:has(> .tropt-mini-demo) { grid-template-columns: 1fr; } section:has(> .tropt-mini-demo) > .tropt-mini-demo { grid-column: 1; grid-row: auto; justify-self: stretch; margin: 0.25rem 0 1rem 0; flex-wrap: wrap; } .tropt-mini-code { flex: 1 1 100%; } } @media (prefers-reduced-motion: reduce) { .tropt-mini-trigger { transition: none; } } /* ========================================================================== Per-application interactive demo widget (.tropt-demo) Sits inside each outer Get-Started tab, above the Recipe/Compose/Scratch level tabs. Three rows (prompt / control bar / output) animated by the inline