/* ========================================================================== FONT STRATEGY — Zero External Requests, Full Privacy Compliance ----------------------------------------------------------------------- No @font-face declarations needed. The CSS custom properties below reference "Inter" first: if the user already has Inter installed (common on design/developer machines), they get it for free. Everyone else gets the OS native sans-serif (-apple-system on macOS/iOS, Segoe UI on Windows, Roboto on Android) — which renders instantly with zero network traffic, zero data to Google, and zero GDPR/DSGVO exposure. To use self-hosted Inter instead: download the WOFF2 files from https://github.com/rsms/inter/releases → place them in /fonts/ → then add @font-face blocks here pointing to /fonts/*.woff2 ========================================================================== */ /* ========================================================================== UNIVERSAL DESIGN SYSTEM v4 ========================================================================== */ :root { --bg-void: #030308; --bg-deep: #0a0c18; --bg-nebula: #0d1129; --nebula-purple: rgba(110,85,215,.52); --nebula-blue: rgba(80,120,210,.48); --nebula-purple-soft: rgba(130,100,220,.38); --accent: #9b8cf2; --accent-strong: #c084fc; /* vivid purple — high contrast on dark bg */ --accent-blue: #6fa3e0; --text-primary: #f5f5f8; --text-secondary: rgba(229,229,235,.88); --text-muted: rgba(229,229,235,.65); --glass-bg: rgba(255,255,255,.09); /* secondary interactive — lighter than card */ --glass-bg-pill: rgba(255,255,255,.065); /* passive pills — distinct but below toolcard */ --glass-bg-strong: rgba(255,255,255,.16); /* hover / active */ --glass-border: rgba(255,255,255,.14); /* hairline border */ --surface: #0a0a10; --surface-raised: #101018; --border-subtle: rgba(255,255,255,.08); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem; --space-5:3rem; --space-6:4.5rem; --space-7:7rem; --max-width:1120px; --font-display:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif; --font-body:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif; --ease-out:cubic-bezier(.16,1,.3,1); --hero-text-size:clamp(1.0rem,1.5vw,1.08rem); } @media(prefers-color-scheme:light){:root{color-scheme:dark}} *,*::before,*::after{box-sizing:border-box !important} /* Inputs fill their container; buttons size to content */ input,textarea,select{ width:100%; max-width:100%; box-sizing:border-box !important; } html{ scroll-behavior:smooth; overflow-x:hidden; /* universally safe: html is NEVER a containing block for position:fixed in any browser */ overflow-y:auto; overscroll-behavior-x:none; /* prevents iOS rubber-band horizontal drift */ /* Prevent Safari from rescaling text after pinch-zoom — avoids layout reflow that breaks the tool card on zoom-out */ -webkit-text-size-adjust:100%; text-size-adjust:100%; } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } body{margin:0;background:var(--bg-void);color:var(--text-primary);font-family:var(--font-body);font-size:1.125rem;line-height:1.6;letter-spacing:.012em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior-x:none;touch-action:pan-y;min-height:100vh;padding-bottom:8rem} img,svg,canvas{display:block;max-width:100%} a{color:inherit} .u-container{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-3);width:100%} /* Skip link */ .u-skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#0a0a10;padding:.75rem 1.25rem;border-radius:0 0 8px 0;z-index:1000;font-weight:600;text-decoration:none} .u-skip-link:focus{left:0} /* Focus */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px;border-radius:4px} /* ── NAV ── */ .u-nav{position:absolute;top:0;left:0;right:0;z-index:50;padding:var(--space-3) 0} .u-nav .u-container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)} .u-nav-right{display:flex;align-items:center;gap:var(--space-3)} .u-brand{display:flex;align-items:baseline;gap:.4em;text-decoration:none;font-family:var(--font-display);white-space:nowrap;flex-shrink:0} .u-brand-prefix{font-size:clamp(0.78rem,3.8vw,1.05rem);letter-spacing:.18em;text-transform:lowercase;color:var(--accent-strong);font-weight:600;white-space:nowrap} .u-brand-name{font-size:clamp(0.95rem,4.5vw,1.35rem);font-weight:650;color:var(--text-primary);letter-spacing:-.02em;white-space:nowrap} .u-nav-links{display:flex;align-items:center;gap:var(--space-3);list-style:none;margin:0;padding:0} .u-nav-links a{font-size:.98rem;color:var(--text-secondary);text-decoration:none;transition:color .2s var(--ease-out)} .u-nav-links a:hover{color:var(--text-primary)} @media(max-width:720px){.u-nav-links{display:none}} /* ══════════════════════════════════════════════════════════════════════════ HERO — rock-solid 100vh. Header and card NEVER shift each other. Layout strategy (Apple-style pinned sections): • .u-hero = fixed 100vh container, overflow hidden • .u-hero-content = full-size absolute overlay (position:absolute, inset:0) • .u-hero-text-block = pinned at the top, fixed position, never moves • .u-hero-card-zone = fills remaining space below text block, card sits inside ══════════════════════════════════════════════════════════════════════════ */ /* Fixed nebula backdrop — completely detached from document flow. Never distorts when card expands. Sits behind all content at z-index:-1. */ .u-nebula-backdrop{ position:fixed; inset:0; pointer-events:none; z-index:-10; overflow:hidden; background:linear-gradient(165deg,var(--bg-void) 0%,var(--bg-deep) 40%,var(--bg-nebula) 70%,#0d0f22 100%); } .u-nebula-backdrop::before{ content:""; position:absolute; top:60px;left:-180px; width:720px;height:320px; background:radial-gradient(ellipse at 25% 68%,rgba(120,90,225,.52) 0%,rgba(90,110,218,.34) 24%,rgba(68,130,210,.18) 48%,rgba(50,115,195,.06) 68%,transparent 88%); filter:blur(52px); transform:rotate(-22deg); } .u-nebula-backdrop::after{ content:""; position:absolute; bottom:-90px;right:-110px; width:600px;height:290px; background:radial-gradient(ellipse at 60% 42%,rgba(70,105,215,.50) 0%,rgba(55,125,205,.34) 24%,rgba(75,148,195,.18) 48%,rgba(85,130,175,.06) 68%,transparent 86%); filter:blur(46px); transform:rotate(13deg); } .u-nebula-extra{ position:absolute; top:18%;right:-80px; width:440px;height:180px; background:radial-gradient(ellipse at 55% 48%,rgba(140,85,210,.42) 0%,rgba(90,80,200,.24) 30%,rgba(60,90,180,.10) 58%,transparent 82%); filter:blur(38px); transform:rotate(-10deg); } .u-hero{ position:relative; background:transparent; /* backdrop div (position:fixed) paints all background */ /* Mobile-first: natural block height, full scrollability */ display:block; overflow:visible; height:auto; min-height:0; padding-bottom:3rem; } .u-hero::before,.u-hero::after{content:"";position:absolute;pointer-events:none;border-radius:0;z-index:-1} /* Nebula moved to .u-nebula-backdrop (position:fixed) — no distortion on scroll */ /* .u-hero::before visuals moved to .u-nebula-backdrop::before */ .u-hero::after{bottom:-90px;right:-110px;width:600px;height:290px;background:none;filter:none;transform:none} .u-hero-extra-glow{position:fixed;top:18%;right:-80px;width:440px;height:180px;border-radius:0;background:radial-gradient(ellipse at 55% 48%,rgba(140,85,210,.42) 0%,rgba(90,80,200,.24) 30%,rgba(60,90,180,.10) 58%,transparent 82%);filter:blur(38px);pointer-events:none;transform:rotate(-10deg);z-index:-10} .u-stars{position:fixed;inset:0;pointer-events:none;z-index:-1} .u-star{position:absolute;border-radius:50%;background:#fff} /* Shooting star */ .u-comet{ position:fixed; height:2px; border-radius:999px; opacity:0; pointer-events:none; z-index:-1; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(160,185,255,.08) 20%, rgba(180,205,255,.25) 45%, rgba(210,225,255,.65) 72%, rgba(240,245,255,.9) 88%, rgba(255,255,255,.98) 100% ); filter:blur(.4px); } .u-comet::after{ content:"";position:absolute;right:-3px;top:50%; width:5px;height:5px;border-radius:50%; background:#fff;transform:translateY(-50%); filter:none; box-shadow: 0 0 4px 2px rgba(230,240,255,1), 0 0 10px 5px rgba(180,205,255,.75), 0 0 22px 10px rgba(140,170,255,.35); } /* ── HERO CONTENT — mobile-first: normal block flow ── */ .u-hero-content{ display:block; position:relative; z-index:2; height:auto; overflow:visible; padding-top:5rem; /* clear the nav bar */ padding-bottom:0; } /* ── TEXT BLOCK ── */ .u-hero-inner{ display:block; width:100%; max-width:820px; margin:0 auto 1.5rem; padding:0 var(--space-3); text-align:center; } .u-hero-inner h1{text-align:center} /* Eyebrow */ .u-eyebrow{font-size:1.05rem;letter-spacing:.2em;text-transform:lowercase;color:var(--accent-strong);margin:0;font-weight:600} .u-hero h1{ font-family:var(--font-display); font-size:clamp(1.65rem,4.4vw,2.75rem); font-weight:700;letter-spacing:-.025em;margin:0; color:var(--text-primary);line-height:1.15; white-space:normal;overflow:visible;max-width:100%; } .u-hero-sub{ font-size:var(--hero-text-size); font-weight:450;letter-spacing:.01em; color:var(--text-muted);margin:0;line-height:1.5; /* Allow wrapping on narrow screens */ white-space:normal; overflow:visible; } @media(min-width:761px){ .u-hero-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} } /* Pills */ .u-usp-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin-top:.45rem} .u-usp-pill{display:inline-flex;align-items:center;gap:.4em;font-size:var(--hero-text-size);letter-spacing:.01em;color:var(--text-muted);background:rgba(255,255,255,.065);border:.5px solid rgba(255,255,255,.15);border-radius:999px;padding:.32em 1em;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} /* ── CARD ZONE — mobile-first: block flow ── */ .u-hero-card-zone{ display:block; width:100%; height:auto; overflow:visible; padding:0 var(--space-2) var(--space-4); } /* ══ DESKTOP (≥761px): restore the cinematic 100vh lockup ═════════════════ On large screens the hero becomes a fixed-height fullscreen "painting" with the content as an absolute overlay filling that height. Stars/canvas fill the section, card zone gets flex:1 to fill remaining space. ════════════════════════════════════════════════════════════════════════════ */ @media(min-width:761px){ .u-hero{ height:auto; min-height:100vh; max-height:none; overflow:visible; padding-bottom:3rem; /* mask-image REMOVED: it made .u-hero a containing block for position:fixed children in WebKit (Safari), causing cvs/mcvs/ shipEl to use hero height instead of viewport as their reference. Fade effect re-done via a fixed pseudo-element overlay below. */ } .u-hero-content{ /* Relative flow so hero height = content height */ position:relative; inset:auto; display:flex; flex-direction:column; align-items:center; padding-top:7.5rem; overflow:visible; height:auto; } .u-hero-inner{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:.55rem; margin-bottom:1.25rem; } .u-hero-card-zone{ flex:1 0 auto; /* grows to card height, never clips */ display:flex; align-items:flex-start; justify-content:center; overflow:visible; /* NO internal scroll — browser page scrolls */ padding:0 var(--space-3) var(--space-5); min-width:0; width:100%; } } /* Bottom-fade overlay: replaces the mask-image that was removed from .u-hero. position:fixed so it never interferes with any layout containing block. pointer-events:none so it never blocks interaction. */ @media(min-width:761px){ body::after{ content:""; position:fixed; bottom:0; left:0; right:0; height:12vh; background:linear-gradient(to bottom,transparent 0%,var(--bg-void) 100%); pointer-events:none; z-index:3; /* above content z-index:2, below nav z-index:50 */ } } /* ── GLASS CARD ── */ .u-glass-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-lg);backdrop-filter:blur(25px) saturate(1.20);-webkit-backdrop-filter:blur(25px) saturate(1.20);box-shadow:0 8px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08); /* Force GPU compositing layer — prevents Safari from dropping the card content after a zoom-in/zoom-out sequence (layout viewport change reflow bug) */ transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform} /* ── BUTTONS ── */ .u-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-body);font-size:1rem;font-weight:600;letter-spacing:.01em;border-radius:var(--radius-sm);padding:.8em 1.5em;border:none;cursor:pointer;text-decoration:none;transition:transform .15s var(--ease-out),background .15s var(--ease-out),opacity .15s var(--ease-out);-webkit-tap-highlight-color:transparent} .u-btn:active{transform:scale(.97)} .u-btn-primary{background:var(--text-primary);color:#0a0a10} .u-btn-primary:hover{opacity:.88} .u-btn-secondary{background:var(--glass-bg);color:var(--text-primary);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .u-btn-secondary:hover{background:var(--glass-bg-strong)} .u-btn:disabled{opacity:.4;cursor:not-allowed} .u-btn-block{width:100%} /* ── CONTENT SECTIONS — solid black below the fold ── */ .u-section{padding:var(--space-6) 0;border-top:1px solid var(--border-subtle);background:rgba(10,10,16,0.78);position:relative;z-index:2} .u-section-tight{padding:var(--space-5) 0} .u-section-head{max-width:60ch;margin:0 0 var(--space-4)} .u-section-head.u-center{margin-left:auto;margin-right:auto;text-align:center} .u-kicker{font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-strong);margin:0 0 .6rem;font-weight:600} .u-section h2{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:650;letter-spacing:-.01em;margin:0 0 .5rem} .u-section p{color:var(--text-secondary);margin:0} .u-lede{font-size:1.125rem;line-height:1.6;color:var(--text-secondary);letter-spacing:.01em} .u-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .u-card{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-3)} .u-card h3{font-size:1.1rem;font-weight:600;line-height:1.4;margin:0 0 .5rem} .u-card p{font-size:1.125rem;line-height:1.6;color:var(--text-secondary);letter-spacing:.01em} .u-steps{display:grid;gap:var(--space-3);grid-template-columns:repeat(3,1fr);counter-reset:u-step} @media(max-width:720px){.u-steps{grid-template-columns:1fr}} .u-step{position:relative;padding-top:3rem} .u-step::before{counter-increment:u-step;content:counter(u-step);position:absolute;top:0;left:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--glass-bg);border:1px solid rgba(255,255,255,.10);font-size:.85rem;font-weight:600;color:var(--accent-strong)} .u-step h3{font-size:1.1rem;font-weight:600;margin:.75rem 0 .5rem} .u-step p{font-size:1.125rem;line-height:1.6;color:var(--text-secondary);margin:0;letter-spacing:.01em} /* ── FAQ — consistent purple labels, every language ── */ .u-faq-group{margin-bottom:var(--space-4);padding-top:var(--space-3)} .u-faq-group:last-child{margin-bottom:0} .u-faq-group:first-of-type{padding-top:0} .u-faq-group-label,.u-faq-group>h3{ color:var(--accent-strong)!important;font-family:var(--font-display)!important; font-size:.75rem!important;text-transform:uppercase!important;letter-spacing:.12em!important; font-weight:700!important;margin:0 0 var(--space-2)!important;padding-bottom:.6rem!important; border-bottom:1px solid var(--border-subtle)!important;display:block!important;background:none!important; } .u-faq-item{border-bottom:1px solid var(--border-subtle)} .u-faq-item summary{list-style:none;cursor:pointer;padding:1rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-weight:600;font-size:1.125rem} .u-faq-item summary::-webkit-details-marker{display:none} .u-faq-item summary::after{content:"+";font-size:1.3rem;font-weight:300;color:var(--text-muted);flex-shrink:0;transition:transform .2s var(--ease-out)} .u-faq-item[open] summary::after{transform:rotate(45deg)} .u-faq-item .u-faq-answer{padding:0 0 1.1rem;color:var(--text-secondary);font-size:1.125rem;line-height:1.6;max-width:70ch;letter-spacing:.01em} /* ── AD SLOTS ── */ .u-ad-slot{width:100%;display:flex;align-items:center;justify-content:center;min-height:90px;border-radius:var(--radius-sm);border:1px dashed var(--border-subtle);color:var(--text-muted);font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;margin:var(--space-4) 0} /* ── FOOTER — static 3-column, every page ── */ .u-footer{border-top:1px solid var(--border-subtle);padding:var(--space-5) 0 var(--space-4);background:rgba(3,3,8,0.78);position:relative;z-index:2} .u-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-4)} @media(max-width:760px){.u-footer-grid{grid-template-columns:1fr 1fr}} .u-footer-brand .u-brand{margin-bottom:.6rem} .u-footer p.u-footer-desc{font-size:.85rem;color:var(--text-muted);max-width:32ch} .u-footer h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0 0 .8rem} .u-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem} .u-footer a{font-size:.88rem;color:var(--text-secondary);text-decoration:none} .u-footer a:hover{color:var(--text-primary)} .u-footer-bottom{border-top:1px solid var(--border-subtle);padding-top:var(--space-3);display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;justify-content:space-between;font-size:.8rem;color:var(--text-muted)} /* ── LEGAL PAGES ── */ .u-page-header{background:rgba(3,3,8,0.78);padding:calc(var(--space-7) - 1rem) 0 var(--space-4);border-bottom:1px solid var(--border-subtle);position:relative;z-index:2} .u-page-header h1{font-family:var(--font-display);font-size:clamp(1.7rem,4vw,2.4rem);font-weight:650;letter-spacing:-.01em;margin:0} .u-page-header p{color:var(--text-muted);font-size:.9rem;margin:.5rem 0 0} .u-prose{width:100%;max-width:100%;margin:0;padding:var(--space-5) max(var(--space-3), calc(50% - 560px + var(--space-3))) var(--space-6) max(var(--space-3), calc(50% - 560px + var(--space-3)));color:var(--text-secondary);background:rgba(10,12,24,0.82);border:none;border-radius:0;position:relative;z-index:2} .u-prose h2{color:var(--text-primary);font-size:1.25rem;font-weight:650;margin:var(--space-4) 0 .6rem} .u-prose h2:first-child{margin-top:0} .u-prose p{margin:0 0 1rem;font-size:1.125rem;line-height:1.6} .u-prose ul{margin:0 0 1rem;padding-left:1.2rem} .u-prose li{margin-bottom:.4rem;font-size:1.125rem;line-height:1.6} .u-prose a{color:var(--accent-strong)} /* ── COOKIE BANNER ── */ .u-cookie-banner{position:fixed;left:var(--space-2);right:var(--space-2);bottom:var(--space-2);z-index:200;max-width:560px;margin:0 auto;background:rgba(10,10,16,.92);border:.5px solid var(--glass-border);border-radius:var(--radius-md);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:var(--space-3);box-shadow:0 10px 40px rgba(0,0,0,.4);transform:translateY(140%);transition:transform .4s var(--ease-out)} .u-cookie-banner.is-visible{transform:translateY(0)} .u-cookie-banner p{font-size:.85rem;color:var(--text-secondary);margin:0 0 var(--space-2)} .u-cookie-banner a{color:var(--accent-strong);text-decoration:underline} .u-cookie-actions{display:flex;flex-wrap:wrap;gap:.6rem} .u-cookie-actions .u-btn{font-size:.85rem;padding:.6em 1.1em} @media(max-width:480px){.u-cookie-banner{left:.6rem;right:.6rem;bottom:.6rem}} /* ── UTILITIES ── */ .u-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .u-mt-0{margin-top:0} /* ── LANG SWITCHER ── */ .u-lang-switcher{position:relative} .u-lang-btn{display:flex;align-items:center;gap:.4em;font-family:var(--font-body);font-size:.9rem;font-weight:600;color:var(--text-secondary);background:var(--glass-bg);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.4em .85em;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .u-lang-btn:hover{background:var(--glass-bg-strong);color:var(--text-primary);border-color:rgba(255,255,255,.28)} .u-lang-chevron{transition:transform .1s linear} .u-lang-btn[aria-expanded="true"] .u-lang-chevron{transform:rotate(180deg)} .u-lang-dropdown{position:absolute;top:calc(100% + .5rem);right:0;min-width:160px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-md);backdrop-filter:blur(28px) saturate(1.25);-webkit-backdrop-filter:blur(28px) saturate(1.25);box-shadow:0 12px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.10);overflow:hidden;z-index:100} .u-lang-opt{display:block;width:100%;text-align:left;font-family:var(--font-body);font-size:.92rem;color:var(--text-secondary);background:none;border:none;padding:.65em 1em;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation} .u-lang-opt:hover,.u-lang-opt.is-active{background:var(--glass-bg);color:var(--text-primary)} .u-lang-opt.is-active{font-weight:600} /* ══════════════════════════════════════════════════════════════════════════ STAR & COMET KEYFRAMES sk = twinkle (opacity) — slow 4–12 s, high contrast sc = colour shift — slow 6–18 s rl = ray pulse — slow 2–6 s per ray ══════════════════════════════════════════════════════════════════════════ */ /* Star & ray keyframes are injected dynamically by universal.js for true per-star randomisation. */ /* ── AUDIO TOGGLE BUTTON ── */ .u-audio-btn{ display:flex;align-items:center;justify-content:center; width:2.2rem;height:2.2rem; background:var(--glass-bg); border:1px solid rgba(255,255,255,.10); border-radius:50%; cursor:pointer; color:var(--text-primary); /* muted = white icon */ -webkit-tap-highlight-color:transparent; touch-action:manipulation; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); transition:color .15s linear,border-color .15s linear; flex-shrink:0; } .u-audio-btn:hover{color:var(--text-primary);border-color:rgba(255,255,255,.20)} .u-audio-btn[aria-pressed="true"]{color:var(--accent-strong);border-color:var(--accent-strong);box-shadow:0 0 0 1px var(--accent-strong)} /* ══ SPACESHIP CSS ANIMATION ══════════════════════════════════════════ The ship element uses GPU-composited CSS @keyframes so backdrop-filter on the tool card never causes canvas repaint stutter. .u-ship is positioned absolute inside .u-hero at z-index:1. Each flight injects inline @keyframes via a