:root {
  --bg: #edf3f1;
  --surface: #fbfdfc;
  --surface-subtle: #e4ebe8;
  --ink: #17201e;
  --muted: #5e6c68;
  --primary: #62d3b1;
  --primary-deep: #126653;
  --accent: #d96f4f;
  --line: #ccd8d4;
  --soft: #e3ebe8;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.28; background-image:linear-gradient(#d4e0db 1px,transparent 1px),linear-gradient(90deg,#d4e0db 1px,transparent 1px); background-size:88px 88px; mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 78%,transparent); }
body::after { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:linear-gradient(90deg,transparent 0%,transparent 56%,rgba(207,232,220,.45) 100%); }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
.app-shell { position:relative; z-index:1; max-width: 1480px; margin: auto; padding: 0 4.5vw; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.03em; }
.brand-mark { width: 28px; height: 28px; display: inline-flex; gap: 3px; align-items: end; padding: 5px; border: 1px solid #82938e; background:#f8fbfa; }
.brand-mark i { display:block; width: 4px; background: var(--primary); transform-origin: bottom; }
.brand-mark i:nth-child(1){height: 9px}.brand-mark i:nth-child(2){height: 14px;background:var(--accent)}.brand-mark i:nth-child(3){height: 18px}
.topnav { display: flex; gap: 28px; margin-left: 8vw; }
.topnav-link { color: var(--muted); font-size: 14px; padding: 6px 0; border-bottom: 1px solid transparent; }
.topnav-link.is-active, .topnav-link:hover { color: var(--ink); border-color: var(--primary); }
.queue-button { margin: 0; border-radius: 999px; border-color: var(--line); color: var(--ink); }
.queue-button b { margin-left: 3px; font-weight: 600; }
.queue-dot, .status-pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; }
.hero { min-height: 690px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 7vw; align-items: center; padding: 72px 0 112px; }
.eyebrow { margin: 0 0 18px; color: var(--primary-deep); font: 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 500px; margin-bottom: 24px; font-size: clamp(48px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
h1 em { color: var(--primary); font-style: normal; }
.hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 34px; }
.hero-cta.weui-btn { display: inline-flex; align-items: center; justify-content:center; gap: 10px; width: 132px; min-height: 44px; margin: 0; padding: 0 16px; border-radius: 10px; background: var(--primary-deep); color:#fff; box-shadow:0 4px 0 #a8c7bd; }
.hero-note { color: var(--muted); font-size: 12px; }
.status-pulse { margin-right: 4px; vertical-align: 1px; }
.track-wrap { align-self: stretch; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.component-preview { position:relative; height:500px; margin:0; overflow:hidden; border:1px solid #aebfb9; border-radius:12px; background:#f8fbfa; box-shadow:0 7px 0 #d7e3df; color:#17201e; }
.preview-toolbar,.preview-controls { display:flex; align-items:center; min-height:38px; padding:0 13px; border-bottom:1px solid #d4dfdb; color:#667671; font:9px var(--mono); letter-spacing:.05em; }
.preview-toolbar { gap:11px; background:#e8efec; }
.preview-lights { display:flex; gap:5px; }
.preview-lights i { width:7px; height:7px; border-radius:50%; background:#b1bfbb; }
.preview-lights i:first-child { background:var(--accent); }
.preview-path { flex:1; color:#60706b; }
.preview-mode { color:var(--primary-deep); font-size:8px; }
.preview-canvas { position:relative; height:421px; overflow:hidden; background:#f8fbfa; }
.preview-canvas::after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(90deg,rgba(248,251,250,.10) 0%,rgba(248,251,250,.02) 100%); }
.preview-info { position:absolute; z-index:4; left:34px; top:38px; width:53%; }
.preview-brand-line { display:flex; align-items:center; gap:8px; color:#60706b; font:9px var(--mono); letter-spacing:.08em; }
.preview-brand-line b { margin-left:auto; color:#9a4a33; font-weight:600; }
.preview-brand-icon { display:grid; place-items:center; width:26px; height:26px; border:1px solid #b9c9c3; border-radius:7px; background:#fff; }
.preview-brand-icon img { width:16px; height:16px; }
.preview-info strong { display:block; margin-top:30px; font-size:39px; line-height:.96; letter-spacing:-.04em; font-weight:600; }
.preview-info strong em { color:var(--primary-deep); font-style:normal; }
.preview-info p { margin:16px 0 0; color:#60706b; font:11px var(--mono); }
.preview-tags { display:flex; gap:7px; margin-top:22px; }
.preview-tags span { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border:1px solid #b9cbc4; border-radius:6px; color:#48645b; background:#eef7f2; font:8px var(--mono); letter-spacing:.06em; }
.preview-action { position:absolute; z-index:4; top:0; right:0; bottom:0; width:40%; display:flex; flex-direction:column; align-items:center; padding:48px 20px 34px; border-left:1px solid #d0dfd9; background:#edf6f1; text-align:center; }
.preview-action-label { color:#60706b; font:9px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.preview-canvas .circle-buttons { position:relative; z-index:2; width:100%; height:190px; margin-top:7px; background:transparent; filter:none; }
.preview-canvas .circle-buttons__atmosphere { width:min(62cqw,310px); height:min(50cqh,170px); background:rgba(18,102,83,.12); filter:blur(40px); transform:translate(0, 0); }
.preview-canvas .circle-buttons .circle-button { width:clamp(120px,18cqw,158px); color:#245347; transform:none; }
.preview-canvas .circle-buttons--light.circle-buttons--play .circle-button { color:#effcf7; }
.preview-canvas .circle-buttons--light.circle-buttons--play .circle-button__face { background:linear-gradient(145deg,#5bd7b5 0%,#2c9d84 48%,#126653 100%); box-shadow:inset 3px 5px 18px rgba(255,255,255,.24),inset -8px -12px 20px rgba(8,62,50,.22),0 14px 24px rgba(18,102,83,.22); }
.preview-canvas .circle-buttons--light.circle-buttons--play .circle-button__rim { border-color:rgba(18,102,83,.62); opacity:.9; }
.preview-canvas .circle-buttons--light.circle-buttons--play .circle-button__aura { background:conic-gradient(from 180deg,rgba(18,102,83,.08) 180deg,rgba(91,215,181,.38) 360deg); filter:blur(16px); }
.preview-canvas .circle-buttons--light.circle-buttons--play .circle-button:not(:disabled):hover .circle-button__face { background:linear-gradient(145deg,#76e5c6 0%,#35ae92 48%,#16745f 100%); }
.preview-canvas .circle-buttons--light.circle-buttons--play .circle-button__icon svg { fill:currentColor; }
.preview-canvas .circle-buttons .circle-button:not(:disabled):hover { transform:scale(1.025); }
.preview-canvas .circle-buttons .circle-button:not(:disabled):active { transform:scale(.98); }
.preview-canvas .circle-buttons .circle-button__icon svg { width:28%; height:28%; }
.preview-action > strong { color:var(--ink); font-size:15px; font-weight:600; }
.preview-action > small { margin-top:6px; color:#60706b; font:10px var(--mono); line-height:1.45; }
.preview-status { position:absolute; z-index:4; left:34px; right:34px; bottom:19px; display:flex; align-items:center; gap:8px; color:#60706b; font:9px var(--mono); letter-spacing:.07em; }
.preview-status b { margin-left:auto; color:var(--primary-deep); font-weight:600; }
.preview-status-dot { width:7px; height:7px; border-radius:50%; background:var(--primary-deep); box-shadow:0 0 0 4px #cce2da; }
.preview-grid-lines { position:absolute; inset:0; z-index:1; opacity:.2; background-image:linear-gradient(#dce7e3 1px,transparent 1px),linear-gradient(90deg,#dce7e3 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(90deg,transparent,#000 38%,#000 75%,transparent); }
.preview-controls { justify-content:space-between; border-bottom:0; background:#e8efec; }
.preview-controls b { color:#455550; font-weight:600; }
.preview-dot { width:6px; height:6px; border-radius:50%; background:var(--primary-deep); box-shadow:0 0 0 4px #cce2da; }
@keyframes preview-float { 0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)} }
.track-head, .track-footer { display:flex; justify-content:space-between; color:var(--muted); font: 10px var(--mono); letter-spacing:.04em; }
.launcher-window { min-height: 300px; margin-top:10px; overflow:hidden; border:1px solid var(--ink); background:var(--surface); box-shadow: 10px 12px 0 color-mix(in oklch, var(--primary) 14%, transparent); }
.window-bar { display:flex; align-items:center; gap:12px; min-height:38px; padding:0 14px; border-bottom:1px solid var(--line); background:color-mix(in oklch, var(--soft) 62%, var(--surface)); font:10px var(--mono); color:var(--muted); }
.window-lights { display:flex; gap:5px; }
.window-lights i { width:8px; height:8px; border-radius:50%; background:var(--line); }
.window-lights i:first-child { background:var(--accent); }
.window-title { flex:1; }
.window-count { color:var(--primary-deep); }
.window-body { padding:24px 22px 16px; }
.window-intro { display:flex; align-items:flex-start; gap:20px; margin-bottom:20px; }
.window-intro span { color:var(--primary-deep); font:10px var(--mono); letter-spacing:.06em; }
.launcher-list { border-top:1px solid var(--line); }
.launcher-item { position:relative; display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); transition:transform .25s ease, background .25s ease; }
.launcher-item::after { content:""; position:absolute; left:-22px; right:-22px; top:0; bottom:0; z-index:0; background:color-mix(in oklch, var(--primary) 10%, var(--surface)); opacity:0; transition:opacity .55s ease; }
.launcher-item > * { position:relative; z-index:1; }
.launcher-item.is-active { transform:translateX(8px); }
.launcher-item.is-active::after { opacity:1; border-left:2px solid var(--primary); }
.launcher-item.is-preview { transform:translateX(8px); }
.launcher-item.is-preview::after { background:color-mix(in oklch, var(--accent) 9%, var(--surface)); border-left:2px solid var(--accent); }
.launcher-index { color:var(--muted); font:10px var(--mono); }
.launcher-item strong { font-size:14px; }
.launcher-item small { grid-column:2; margin-top:-8px; color:var(--muted); font-size:10px; }
.launcher-item b { color:var(--primary-deep); font:9px var(--mono); }
.window-status { display:flex; align-items:center; gap:6px; padding-top:15px; color:var(--muted); font-size:10px; }
.window-status .status-pulse { margin:0; }
.window-caret { margin-left:auto; color:var(--primary); font-size:16px; }
.window-lights i:first-child { animation: windowPulse 2.8s ease-in-out infinite; }
@keyframes windowPulse { 0%,100% { transform:scale(1); opacity:.72; } 50% { transform:scale(1.35); opacity:1; } }
.catalog-section { padding: 18px 0 120px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:30px; }
h2 { margin-bottom:0; font-size: clamp(30px, 4vw, 54px); line-height:1.05; letter-spacing:-.035em; }
.filter-bar { display:flex; justify-content:space-between; gap:16px; padding: 14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.filter-group { display:flex; flex-wrap:wrap; gap:8px; }
.filter-chip { cursor:pointer; border:1px solid transparent; background:transparent; color:var(--muted); padding:7px 12px; border-radius:999px; font-size:13px; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.filter-chip.is-selected, .filter-chip:hover { color:var(--ink); border-color:#afc1bb; background:#f8fbfa; }
.filter-chip.is-selected { color:#fff; border-color:var(--primary-deep); background:var(--primary-deep); }
.tool-list { margin-top: 10px; }
.tool-row { display:grid; grid-template-columns: 1.2fr .9fr .72fr auto; gap:20px; align-items:center; padding: 22px 0; border-bottom:1px solid var(--line); }
.tool-main { display:flex; align-items:center; gap:14px; min-width:0; }
.tool-mark { display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px; border:1px solid #b8c8c3; border-radius:9px; background:#fff; font-weight:700; letter-spacing:-.05em; color:var(--primary-deep); overflow:hidden; }
.tool-mark img { width:27px; height:27px; display:block; }
.tool-mark[data-tool="cc-switch"] { border-color:#aeb7b4; }
.tool-mark img.cc-switch-icon { width:30px; height:30px; filter:grayscale(1) contrast(1.12); }
.tool-mark[data-tone="accent"] { color: oklch(0.45 0.12 72); border-color: color-mix(in oklch, var(--accent) 65%, var(--ink)); }
.tool-mark[data-tone="accent"][data-tool="cc-switch"] { border-color:#aeb7b4; }
.tool-mark[data-tone="ink"] { color: var(--ink); }
.tool-name { font-size:16px; font-weight:600; }
.tool-desc { margin:4px 0 0; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tool-meta { display:flex; flex-wrap:wrap; gap:7px; }
.meta-pill { display:inline-flex; align-items:center; padding: 6px 10px; border:1px solid color-mix(in oklch, var(--line) 78%, var(--primary)); border-radius:999px; background:color-mix(in oklch, var(--soft) 75%, var(--surface)); color:var(--muted); font: 10px var(--mono); }
.tool-version { color:var(--muted); font: 11px var(--mono); }
.tool-version strong { display:block; color:var(--ink); font:600 12px var(--mono); }
.tool-version small { display:block; margin-top:5px; color:var(--muted); font:10px var(--mono); }
.download-actions { display:flex; gap:8px; justify-content:flex-end; }
.download-btn {
  position:relative;
  min-width:86px;
  margin:0;
  overflow:hidden;
  border-radius:999px;
  font-size:12px;
  transform:translateY(0) scale(1);
  transition:
    transform 180ms cubic-bezier(.22,1,.36,1),
    box-shadow 180ms cubic-bezier(.22,1,.36,1),
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}
.download-btn.official { color:var(--ink); border-color:#aabdb7; background:#f9fcfb; }
.download-btn.mirror { min-width:96px; color:#fff; border-color:var(--primary-deep); background:var(--primary-deep); font-weight:600; }
.download-btn:not(:disabled):not([aria-disabled="true"]):hover { transform:translateY(-2px); }
.download-btn.official:not(:disabled):not([aria-disabled="true"]):hover { border-color:#7f9c93; background:#fff; box-shadow:0 5px 8px rgba(31,55,48,.12); }
.download-btn.mirror:not(:disabled):not([aria-disabled="true"]):hover { border-color:#235c50; background:#235c50; box-shadow:0 5px 8px rgba(23,59,52,.22); }
.download-btn:not(:disabled):not([aria-disabled="true"]):active { transform:translateY(0) scale(.96); transition-duration:80ms; }
.download-btn:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.download-btn[data-busy="true"] { cursor:progress; animation:downloadButtonBusy 1.15s ease-in-out infinite; }
.download-btn.mirror.is-done { color:var(--primary-deep); border-color:var(--primary); background:color-mix(in oklch, var(--primary) 14%, var(--surface)); }
.download-btn.is-done { color:var(--primary-deep); border-color:var(--primary); background:color-mix(in oklch, var(--primary) 12%, var(--surface)); }
.download-btn:disabled { color:var(--muted); border-color:var(--line); background:var(--surface-subtle); opacity:.62; cursor:not-allowed; }
@keyframes downloadButtonBusy { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.12); } }
.launcher-item-muted { opacity:.48; }
.how-section { display:grid; grid-template-columns: .7fr 1.3fr; gap:10vw; padding: 50px 0 100px; border-top:1px solid var(--line); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.step { padding-top: 8px; border-top: 2px solid var(--ink); }
.step span { display:block; color:var(--primary); font:11px var(--mono); margin-bottom: 28px; }
.step strong { display:block; font-size:18px; margin-bottom:10px; }
.step p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.footer { display:flex; justify-content:space-between; padding: 18px 0 26px; color:var(--muted); font:10px var(--mono); letter-spacing:.04em; }
.footer span:first-child { text-transform:uppercase; }
.weui-toptips { position:fixed; top:16px; left:50%; z-index:20; transform:translateX(-50%) translateY(-140%); width:auto; min-width:220px; padding:10px 16px; text-align:center; border-radius:999px; opacity:0; pointer-events:none; }
@media (max-width: 860px) { .app-shell{padding:0 20px}.topnav{margin-left:0;gap:16px}.hero{grid-template-columns:1fr;gap:40px;padding:60px 0 72px}.track-wrap{min-height:390px}.component-preview{height:350px}.section-heading,.filter-bar{align-items:flex-start;flex-direction:column}.tool-row{grid-template-columns:1fr auto}.tool-meta,.tool-version{grid-column:1}.download-actions{grid-column:2;grid-row:1 / span 2; flex-direction:column}.how-section{grid-template-columns:1fr;gap:40px}.steps{grid-template-columns:1fr}.step span{margin-bottom:14px} }
@media (min-width: 861px) { h1 { max-width: none; white-space: nowrap; font-size: clamp(52px, 5.3vw, 76px); } }
@media (max-width: 520px) { .topbar{height:64px}.topnav{display:none}h1{font-size:clamp(44px,14vw,66px)}.hero-actions{align-items:flex-start;flex-direction:column;gap:14px}.launcher-window{min-height:270px;box-shadow:6px 8px 0 color-mix(in oklch, var(--primary) 14%, transparent)}.window-body{padding:20px 16px 14px}.launcher-item::after{left:-16px;right:-16px}.launcher-item.is-active{transform:translateX(5px)}.launcher-item small{font-size:9px}.component-preview{height:320px;border-radius:15px}.preview-canvas{height:243px}.preview-info{left:18px;top:22px;width:52%}.preview-brand-line{font-size:7px;gap:5px}.preview-brand-icon{width:22px;height:22px}.preview-brand-icon img{width:13px;height:13px}.preview-info strong{margin-top:20px;font-size:27px}.preview-info p{margin-top:11px;font-size:9px}.preview-tags{gap:4px;margin-top:14px}.preview-tags span{min-height:20px;padding:0 5px;font-size:7px}.preview-action{top:25px;right:15px;width:42%}.preview-action-label{font-size:7px}.preview-canvas .circle-buttons{height:140px}.preview-canvas .circle-buttons .circle-button{width:clamp(105px,30cqw,145px);transform:none}.preview-canvas .circle-buttons .circle-button:not(:disabled):hover,.preview-canvas .circle-buttons .circle-button:not(:disabled):active{transform:scale(1.02)}.preview-action > strong{font-size:13px}.preview-action > small{font-size:8px}.preview-status{left:18px;right:18px;bottom:13px;font-size:7px}.preview-status b{font-size:7px}.tool-row{gap:12px}.tool-desc{max-width:230px}.footer{gap:10px;flex-direction:column} }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.filter-chip,.download-btn,.launcher-item{transition:none}.download-btn[data-busy="true"],.window-lights i:first-child{animation:none} }

/* ThreeUI Community LaunchButton adapted from the repository's launch-button.html. */
:root { --ink:#1f2524; --muted:#68716f; --line:#d9dfdc; --surface:#fff; --surface-subtle:#f5f7f5; --primary-deep:#173b34; --primary:#2e8d76; --soft:#eef3f0; --accent:#d58b37; }
body { background:#f2f4f1; color:var(--ink); }
.app-shell { max-width:1180px; }
.topbar { border-bottom:1px solid rgba(31,37,36,.08); }
.hero { min-height:auto; grid-template-columns:minmax(260px,.72fr) minmax(460px,1.28fr); gap:clamp(44px,8vw,120px); padding:96px 0 92px; align-items:center; }
.hero-copy { max-width:430px; }
.eyebrow { color:#78817e; letter-spacing:.18em; font-size:10px; }
h1 { color:#1f2524; font-size:clamp(46px,5.4vw,74px); line-height:.98; letter-spacing:-.055em; }
h1 em { color:#2e8d76; font-style:normal; }
.hero-cta { display:none !important; }
.track-wrap { min-height:0; }
.track-wrap { overflow:visible; }
.product-panel { position:relative; min-height:430px; padding:34px 38px 30px; overflow:hidden; border:1px solid #cfd8d3; border-radius:28px; background:linear-gradient(140deg,#ffffff 0%,#f7faf7 68%,#e8f1ec 100%); box-shadow:0 26px 60px rgba(45,70,60,.12), 0 2px 0 rgba(255,255,255,.9) inset; }
.product-panel::before { content:""; position:absolute; width:300px; height:300px; right:-100px; top:-120px; border-radius:50%; background:radial-gradient(circle,#dceee5 0%,rgba(220,238,229,0) 70%); pointer-events:none; }
.product-panel__top,.product-panel__identity { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; }
.product-panel__body { position:relative; z-index:1; display:grid; grid-template-columns:minmax(260px,.94fr) minmax(230px,.72fr); gap:34px; margin-top:24px; }
.product-panel__details { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:18px 0 4px; }
.product-panel__kicker,.product-panel__index,.product-panel__label { color:#75817c; font:10px var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.product-panel__index { color:#2e8d76; }
.product-panel__identity { justify-content:flex-start; gap:13px; margin-top:0; }
.product-icon { display:grid; place-items:center; width:66px; height:66px; border-radius:20px; background:#1f2524; box-shadow:0 10px 20px rgba(31,37,36,.14); }
.product-icon img { width:35px; height:35px; filter:brightness(0) invert(1); }
.product-panel h2 { margin:0; font-size:clamp(31px,3.6vw,47px); line-height:.92; letter-spacing:-.055em; }
.product-panel p { margin:12px 0 0; color:#65716c; font-size:14px; }
.product-panel__description { max-width:220px; margin-top:27px !important; line-height:1.6; }
.product-panel__platform { margin-top:auto; padding-top:24px; }
.product-panel__platform strong { display:block; margin-top:7px; font-size:17px; }
.product-panel__details .launch-button-wrap { margin-top:22px; }
.product-panel__source { margin-top:13px; color:#7a8580; font-size:10px; }
.product-panel__rule { position:relative; z-index:1; height:1px; margin:76px 0 24px; background:#d8e0db; }
.product-panel__bottom { align-items:flex-end; }
.product-panel__bottom strong { display:block; margin-top:8px; font-size:18px; }
.launch-button-wrap { position:relative; }
.launch-button-glow { position:absolute; inset:-8px; border-radius:16px; background:rgba(213,139,55,.32); filter:blur(14px); opacity:.45; transition:opacity .35s ease; }
.launch-button { position:relative; display:inline-flex; align-items:center; gap:12px; min-height:56px; padding:0 23px; border:0; border-radius:14px; cursor:pointer; color:#3e270b; background:linear-gradient(180deg,#f5d18d 0%,#e9ae54 52%,#d68b2b 100%); box-shadow:0 0 0 1px rgba(213,139,55,.58),0 4px 0 #a9651a,0 13px 20px -8px rgba(70,44,14,.42); font-size:14px; font-weight:600; transition:transform .16s ease,box-shadow .16s ease,filter .25s ease; }
.launch-button svg { width:19px; height:19px; fill:rgba(62,39,11,.22); stroke:#3e270b; stroke-width:1.5; stroke-linejoin:round; }
.launch-button:hover { filter:saturate(1.06) brightness(1.03); transform:translateY(-2px); box-shadow:0 0 0 1px rgba(213,139,55,.7),0 6px 0 #a9651a,0 16px 24px -8px rgba(70,44,14,.45); }
.launch-button:hover + .launch-button-glow,.launch-button-wrap:hover .launch-button-glow { opacity:.8; }
.launch-button:active { transform:translateY(2px); box-shadow:0 0 0 1px rgba(213,139,55,.58),0 2px 0 #a9651a,0 7px 12px -7px rgba(70,44,14,.35); }
.catalog-section { padding-top:32px; }
.section-heading { margin-bottom:18px; }
.section-heading .eyebrow { display:none; }
#catalogTitle { font-size:32px; letter-spacing:-.04em; }
.filter-bar { border-top:0; padding:0 0 18px; }
.filter-chip[data-platform="all"] { display:none; }
.tool-row { padding:18px 0; }
.tool-mark { border-radius:16px; }
.meta-pill { border-radius:999px; }
@media (max-width:860px) { .hero { grid-template-columns:1fr; gap:28px; padding:62px 0 58px; } .hero-copy { max-width:none; } .product-panel { min-height:0; padding:28px 24px 24px; } .product-panel__body { grid-template-columns:minmax(0,1.08fr) minmax(210px,.72fr); gap:24px; } }
@media (max-width:620px) { .product-panel__body { grid-template-columns:1fr; } .product-panel__details { padding-top:2px; } .product-panel__platform { margin-top:22px; } }
@media (max-width:520px) { .product-panel { border-radius:22px; padding:22px 18px 20px; } .product-icon { width:48px; height:48px; border-radius:15px; } .product-icon img { width:26px; height:26px; } .product-panel h2 { font-size:38px; } .product-panel p { font-size:12px; } .launch-button { width:100%; min-height:50px; justify-content:center; padding:0 16px; font-size:12px; gap:8px; } .launch-button-wrap { width:100%; } .product-panel__source { align-self:center; } }

/* Final visual pass: keep the content quiet so the supplied components carry the motion. */
body::before { display:none; }
body::after { background:radial-gradient(circle at 82% 14%,rgba(216,234,225,.55),transparent 32%),linear-gradient(180deg,#f8f9f6 0%,#f0f3f0 100%); }
@media (min-width:861px) { h1 { white-space:normal; max-width:420px; } }
.catalog-section { padding:42px 0 76px; border-top:1px solid rgba(31,37,36,.1); }
.catalog-section .section-heading { margin-bottom:0; }
.catalog-section .section-heading h2 { max-width:none; font-size:clamp(24px,3vw,36px); }
.catalog-section .filter-bar { display:flex; }
.catalog-section .tool-list { display:block; }