/* Prototype stylesheet entry point. The build flattens these imports in order.
   Keep existing specificity and order; do not introduce CSS cascade layers. */

/* Foundation and page structure. */

/* site.css */
@font-face{font-family:NotoSans;src:url('assets/fonts/noto-sans.woff2') format('woff2');font-display:swap;font-weight:100 900}
@font-face{font-family:Mono;src:url('assets/fonts/noto-sans-mono.woff2') format('woff2');font-display:swap}
:root{color-scheme:dark;--canvas:#0a0a0a;--panel:#1a1c20;--glass:#13161ab8;--edge:#ffffff1a;--text:#f4f5f6;--muted:#c2c7ce;--quiet:#a3acb7;--line:#2a3035;--red:#e7474f;--soft-red:#f47b80}
*{box-sizing:border-box}
html{background:var(--canvas);scroll-behavior:smooth;scroll-padding-top:98px}
body{isolation:isolate;margin:0;color:var(--text);background:var(--canvas);font:16px/1.65 NotoSans,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}a:hover{color:#fff}
button{font:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--soft-red);outline-offset:5px}
h1,h2,h3,h4,p,figure{margin:0}
h2{font-size:clamp(2.1rem,3.8vw,3.3rem);line-height:1.15;font-weight:500;letter-spacing:-.055em;text-wrap:balance}
h3,h4{font-weight:500;letter-spacing:-.025em}h2 span{color:var(--muted)}
[hidden]{display:none!important}
.wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto}
.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}
.skip-link{position:fixed;left:20px;top:12px;z-index:20;background:var(--text);color:var(--canvas);padding:12px 18px;transform:translateY(-200%)}
.skip-link:focus{transform:none;color:var(--canvas)}
.topbar{position:sticky;top:0;z-index:10;background:#070809b8;border-bottom:1px solid var(--edge);backdrop-filter:blur(12px)}
.nav-inner{min-height:76px;display:flex;align-items:center;gap:32px}
.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.brand>img:first-child{width:27px;height:27px}.brand-wordmark{width:117px;height:auto}
.nav-inner nav{display:flex;align-items:center;gap:28px;margin-left:auto;font-size:.8125rem;color:var(--muted)}
.nav-inner nav a:hover{color:var(--soft-red)}
.button{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:48px;padding:12px 22px;border:1px solid var(--line);border-radius:999px;font-size:.875rem;font-weight:600;line-height:1.4;transition:background-color 150ms ease,border-color 150ms ease}
.button svg{width:18px;height:18px;flex:0 0 auto}
.button-small{min-height:39px;padding:9px 17px;background:#ffffff06;border-color:#ffffff14;font-size:.8125rem}
.button-small:hover{background:#242a2f;border-color:var(--red)}
.button-primary{background:#d9454d;border-color:#e45c63;color:#fff}
.button-primary:hover{background:#e9535b;border-color:#f27279;color:#fff}
.text-link{display:inline-flex;align-items:center;gap:12px;font-size:.875rem;color:var(--text)}
.text-link span{color:var(--soft-red)}.text-link:hover{color:var(--soft-red)}
.hero{position:relative;isolation:isolate;padding-top:84px}
.hero-copy{max-width:850px;margin-inline:auto;text-align:center}.hero-copy .eyebrow{justify-content:center;font-family:NotoSans,Arial,sans-serif;letter-spacing:.1em;font-size:.6875rem}
.eyebrow{display:flex;gap:11px;align-items:center;color:var(--quiet);font:.6875rem/1.6 Mono,monospace;letter-spacing:.12em}
.brand-rule{width:24px;height:6px;background:repeating-linear-gradient(120deg,var(--red) 0 3px,transparent 3px 5px)}
h1{font-size:clamp(4.5rem,7.4vw,6.5rem);font-weight:600;letter-spacing:-.065em;line-height:1.1;margin-top:19px}
.hero-period{color:var(--red)}
.hero-subtitle{font-size:clamp(1.25rem,2.1vw,1.65rem);letter-spacing:-.025em;line-height:1.5;color:#b7bdc2;margin-top:22px}
.hero-summary{margin-top:30px}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px}.hero-actions>.button{min-height:50px;padding-inline:28px}.hero-actions>.text-link{min-height:50px;padding:12px 25px;border:1px solid var(--edge);border-radius:999px;background:#ffffff06}

.hero-gpu-status{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 24px;margin-top:20px}
.hero-gpu-status a{display:inline-flex;align-items:center;gap:10px;padding:6px 2px;color:var(--muted);font-size:.6875rem}
.hero-gpu-status strong{color:var(--text);font-size:.75rem;font-weight:500}
.hero-gpu-status a:hover span{color:var(--soft-red)}

.product-preview{max-width:1040px;margin:54px auto 0}/* Real app pixels stay intact: no extra titlebar, clipping, tint, or crop. */
.preview-frame{border:1px solid #ffffff18;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 24px 80px #0006}
.preview-frame img{width:100%}
.product-preview figcaption{margin-top:13px;color:var(--quiet);font-size:.75rem;text-align:center}
.product-rail{max-width:1040px;margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.product-rail a{min-height:72px;display:flex;align-items:center;gap:16px;padding:0 26px;font-size:.875rem;color:#c5cbd0;border-radius:8px;transition:background-color 150ms ease}
.product-rail a:first-child{padding-left:0}.product-rail a+a{border-left:0}.product-rail a:hover{background:#13171b}
.rail-index{display:none}.rail-arrow{margin-left:auto;color:var(--quiet)}
.feature-section{display:grid;grid-template-columns:.78fr 1.22fr;gap:68px;align-items:center;padding-block:110px}
.feature-copy{min-width:0}.capture-description{margin-top:24px}
.capture-heading h2{max-width:520px}
.capture-description>p{color:var(--muted);max-width:480px}
.capture-description .feature-footnote{font-size:.75rem;color:var(--quiet);margin-top:20px}
.feature-copy h2{margin-top:21px}
.plain-list{padding:0;margin:26px 0 0;list-style:none;color:#c7cdd1;font-size:.875rem}.plain-list li{display:flex;align-items:baseline;gap:12px;padding-block:8px}.plain-list li::before{content:'+';color:var(--red);font-family:Mono,monospace}
.feature-visual{min-width:0}
.edit-showcase{border:1px solid #ffffff16;border-radius:14px;overflow:hidden;background:#101012;box-shadow:0 18px 60px #0004}
.insights-section{padding-block:72px 104px}
.section-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:64px;margin-bottom:38px}.section-intro h2{margin-top:21px}.section-intro>p{max-width:350px;color:var(--muted);font-size:.9375rem}
.insights-grid{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:32px}
.history-showcase{min-width:0;background:#101012;border:1px solid #ffffff14;border-radius:12px;overflow:hidden}
.scene-preview{position:relative;min-width:0}.scene-preview>img{width:100%;height:auto}.save-receipt{display:flex;align-items:center;gap:10px;position:absolute;bottom:16px;left:16px;max-width:calc(100% - 32px);padding:11px 15px;background:#151519ef;border:1px solid #ffffff20;border-radius:12px}.receipt-icon{color:var(--soft-red);font-size:1.375rem}.save-receipt b{display:block;font-size:.8125rem;font-weight:500}.save-receipt div span{display:block;font-size:.75rem;color:var(--muted);margin-top:2px}.receipt-check{margin-left:12px;font-size:.875rem;color:#a8c6b9}
.trim-desk{padding:26px 28px 22px;min-width:0;border-top:1px solid #29272e;background:#101012}.trim-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.micro-label{font:.625rem Mono,monospace;color:var(--quiet);letter-spacing:.07em}.trim-heading h3{font-size:1.375rem;margin-top:6px}.trim-duration{font:1.5rem Mono,monospace;text-align:right}.trim-duration small{display:block;margin-top:5px;font:.75rem NotoSans,sans-serif;color:var(--quiet)}.time-ruler{display:flex;justify-content:space-between;margin-top:24px;font:.625rem Mono,monospace;color:var(--quiet)}.filmstrip{position:relative;height:53px;margin-top:9px}.film-frames{display:flex;height:100%;overflow:hidden;border-radius:3px;filter:saturate(.7)}.film-frames span{flex:1;min-width:0;background:var(--frame-image) center/cover;opacity:.65;border-right:1px solid #0b0b0c}.trim-footer{display:flex;gap:18px;margin-top:15px;color:var(--quiet);font:.75rem Mono,monospace}.trim-footer b{color:#c3c3c9;font-weight:400}.export-note{margin-left:auto;font-family:NotoSans,sans-serif}.visual-note{font-size:.75rem;line-height:1.7;color:var(--quiet);margin-top:12px}
.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 22px;color:var(--muted);font:.8125rem/1.5 NotoSans,Arial,sans-serif}.panel-heading h3{font:inherit;letter-spacing:inherit}.panel-heading>:last-child{color:var(--quiet);letter-spacing:0;font-family:NotoSans,sans-serif}.overlay-panel{min-width:0}.overlay-panel>.panel-heading{padding:0 0 15px}.overlay-scene{position:relative;border-radius:12px;overflow:hidden}.game-scene{width:100%;height:auto}.metrics-overlay{position:absolute;left:14px;top:14px;width:47%;max-width:280px}.panel-description{margin-top:24px}.panel-description h3{font-size:1.125rem}.panel-description p{font-size:.9375rem;color:var(--muted);margin-top:10px}.history-detail{padding:24px}.detail-topline{display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:.875rem}.session-length{color:var(--quiet);font:.75rem Mono,monospace}.metric-tabs{display:flex;gap:4px;margin-top:20px;padding:4px;border-radius:5px;background:#09090a;border:1px solid var(--line)}.metric-tabs button{flex:1 1 auto;min-height:35px;border:0;border-radius:3px;padding:7px 9px;background:transparent;color:var(--muted);font-size:.8125rem;white-space:nowrap}.metric-tabs button:hover{color:#fff}.metric-tabs button[aria-selected='true']{color:#f3f3f5;background:#29292d}.history-stat{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:26px}.history-stat>div{display:flex;gap:8px;align-items:baseline;flex-shrink:0}#history-value{font:2rem/1.2 Mono,monospace;letter-spacing:-.06em;font-weight:400}#history-unit{color:var(--muted);font-size:.8125rem}#history-summary{max-width:190px;text-align:right;color:var(--quiet);font-size:.75rem}.history-legend{display:flex;gap:18px;color:var(--muted);font-size:.75rem;margin-top:20px}.history-legend span{display:inline-flex;gap:7px;align-items:center}.history-legend span::before{content:'';width:10px;height:2px;background:var(--red)}.history-legend .gpu::before{background:#ff9297}.history-plot{display:flex;gap:13px;height:185px;margin-top:14px}.chart-y-labels{width:26px;display:flex;flex-direction:column;justify-content:space-between;padding-block:3px;color:var(--quiet);font:.75rem Mono,monospace}#history-chart{display:block;width:calc(100% - 39px);height:100%;overflow:visible}.chart-grid{stroke:#2d2d31;fill:none;stroke-width:1;vector-effect:non-scaling-stroke}.chart-times{display:flex;justify-content:space-between;margin:10px 0 0 39px;font:.75rem Mono,monospace;color:var(--quiet)}.chart-context{color:var(--muted);font-size:.8125rem;line-height:1.6;min-height:2.6em;margin-top:19px}.metrics-summary{display:flex;justify-content:space-between;gap:20px;padding-block:24px 0;color:var(--muted);font-size:.875rem}.insights-section>.visual-note{text-align:center;margin-top:22px}

.workspace-section{padding-block:104px;display:grid;grid-template-columns:1.05fr 1fr;gap:90px;align-items:center}
.profile-figure{order:-1;min-width:0}.workspace-copy{min-width:0}.workspace-section h2{margin-top:21px}.workspace-intro{color:var(--muted);max-width:445px;margin-top:22px;font-size:.9375rem}
.workspace-details{margin-top:30px}.workspace-details article{padding-block:20px}.workspace-details article:last-child{padding-bottom:0}
.workspace-details h3{font-size:1rem}.workspace-details p{margin-top:8px;color:var(--muted);font-size:.875rem}.workspace-details .text-link{margin-top:15px;font-size:.8125rem}
.profile-demo{background:var(--panel);border:1px solid #ffffff14;border-radius:12px;position:relative;padding-bottom:25px}
.global-profile{margin:15px 25px 0;padding:22px;border-radius:8px;border:1px solid #343b42;background:#060809}
.profile-title{display:flex;align-items:center;gap:11px}.profile-title h3{font-size:.9375rem}.profile-symbol{color:var(--soft-red);font-size:1.4rem;line-height:1}
.profile-tag{display:inline-block;border-radius:6px;padding:4px 7px;border:1px solid #3c454c;color:#aeb7bd;font:.625rem/1.4 Mono,monospace;white-space:nowrap}.profile-title .profile-tag{margin-left:auto}
.global-profile dl{margin:20px 0 0}.global-profile dl>div{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid #222930;gap:16px;font-size:.8125rem}.global-profile dt{color:var(--quiet)}.global-profile dd{margin:0;font-family:Mono,monospace;font-size:.75rem}
.inherit-connector{display:flex;align-items:center;justify-content:center;gap:12px;height:44px;color:var(--soft-red);font-size:.875rem}.inherit-connector span{width:32px;height:1px;background:#343c42}
.game-profiles{margin:0 25px;display:grid;gap:10px}.game-profile{border-radius:8px;display:flex;align-items:center;gap:13px;padding:16px;border:1px solid #2c343b;background:#07090b}.game-mark{border-radius:6px;display:grid;place-items:center;width:32px;height:36px;flex:0 0 auto;background:#1e252b;border:1px solid #414a52;color:#b7c0c6;font:.75rem Mono,monospace}.game-profile h3{font-size:.875rem}.game-profile p{font-size:.6875rem;color:var(--quiet);margin-top:3px}.game-profile .profile-tag{margin-left:auto}.custom-profile{border-left:2px solid var(--red)}.custom-profile .profile-tag{color:var(--soft-red);border-color:#75373d}
.community-section{padding-block:88px 104px}
.community-section .section-intro{display:block;text-align:center;margin-bottom:36px}
.community-section .section-intro .eyebrow{justify-content:center}
.community-section .section-intro>p{margin:20px auto 0;max-width:540px}
.community-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1040px;margin-inline:auto}
.community-card{position:relative;display:flex;flex-direction:column;gap:26px;padding:30px;background:var(--glass);border:1px solid var(--edge);border-radius:14px;transition:background-color 150ms ease,border-color 150ms ease}
.community-card>div{display:grid;grid-template-columns:34px 1fr;gap:10px 18px;align-items:center}.community-card div>p:last-child{grid-column:2}
.community-card:hover{background:#1b2025c9;border-color:#ffffff20;color:var(--text)}
.community-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--soft-red);margin-bottom:0}.community-icon svg{width:27px;height:27px}
.community-card h3{font-size:1.5rem}.community-card div>p:last-child{color:var(--muted);font-size:.875rem;margin-top:0;max-width:420px}
.card-link{display:flex;align-items:center;justify-content:space-between;margin-left:52px;font-size:.8125rem;color:var(--text)}.card-link span{color:var(--soft-red)}
.download-section{padding-block:104px 88px}.download-heading{text-align:center}.download-heading .eyebrow{justify-content:center}.download-heading h2{margin-top:21px}.download-heading>p:last-child{margin-top:16px;color:var(--muted);font-size:.9375rem}
.gpu-support{margin-top:42px;scroll-margin-top:110px}
.gpu-support-heading{text-align:center;margin-bottom:22px}.gpu-support-heading h3{font-size:1.25rem}.gpu-support-heading p{margin-top:8px;color:var(--quiet);font-size:.875rem}
.gpu-support-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.gpu-card{padding:28px;background:var(--glass);border:1px solid var(--edge);border-radius:14px;display:flex;flex-direction:column;align-items:start}
.gpu-card-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;width:100%}.gpu-card-heading h4{font-size:1.375rem;letter-spacing:-.03em}
.gpu-status{border:0;background:#ffffff06;border-radius:999px;padding:4px 10px;color:#c3c9ce;font-size:.6875rem;line-height:1.5}
.gpu-card>p{margin-block:17px 22px;color:var(--muted);font-size:.875rem;line-height:1.8}
.gpu-card>.text-link{margin-top:auto;font-size:.8125rem}
.download-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;margin-top:44px;align-items:start}
.platform-symbol{display:inline-flex;color:var(--soft-red);margin-bottom:16px}.platform-symbol svg{width:26px;height:26px}.compatibility-heading h3{font-size:1.375rem}.compatibility-heading>p{color:var(--muted);margin-top:14px;font-size:.875rem;max-width:385px}
#requirements{margin-top:24px;padding-inline:18px;background:var(--glass);border-radius:12px;scroll-margin-top:98px}
#requirements summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;list-style:none;cursor:pointer;font-size:.875rem}#requirements summary::-webkit-details-marker{display:none}#requirements summary span{color:var(--soft-red);font:1.25rem Mono,monospace}#requirements[open] summary span{transform:rotate(45deg)}
.requirements-body{padding:0 0 22px;color:var(--muted);font-size:.8125rem}.requirements-body p+p{margin-top:14px}.requirements-body a{display:inline-block;margin-top:18px;color:var(--text);text-decoration:underline;text-underline-offset:4px}
.installer-card{padding:28px;background:var(--glass);border:1px solid var(--edge);border-radius:14px}.installer-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.installer-heading h3{font-size:1.125rem}.installer-card>p{margin-top:16px;color:var(--muted);font-size:.875rem}
.install-control{margin-top:24px;position:relative}.hero-install{background:#07080980;border:1px solid #ffffff12;border-radius:8px}
.install-command-row{display:flex;align-items:center;gap:16px;padding:18px}.install-command-copy{text-align:left;min-width:0;flex:1}.install-label{display:block;color:var(--quiet);font:.625rem/1.5 Mono,monospace;letter-spacing:.1em;margin-bottom:12px}
.install-command-copy code{display:block;color:#d2d8dc;font:.75rem/1.8 Mono,monospace;white-space:normal;overflow-wrap:anywhere}
.copy-icon{border-radius:7px;display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;border:1px solid #ffffff14;background:#ffffff08;color:#d0d7dc}.copy-icon:hover{background:#29323a;border-color:var(--red)}.copy-icon svg{grid-area:1 / 1;width:20px;height:20px}.copy-check,.copy-error{display:none}.copy-icon[data-state='copied'] .copy-symbol,.copy-icon[data-state='error'] .copy-symbol{display:none}.copy-icon[data-state='copied'] .copy-check,.copy-icon[data-state='error'] .copy-error{display:block}.copy-icon[data-state='error']{color:var(--soft-red)}
.install-meta{height:18px;color:var(--soft-red);font-size:.75rem;text-align:right;padding-top:3px}.installer-card>p.preview-notice{font-size:.6875rem;color:var(--quiet);margin-top:8px;line-height:1.7}
.other-paths{margin-top:45px}.other-paths>h3{font:.6875rem/1.5 Mono,monospace;color:var(--quiet);letter-spacing:.08em;text-transform:uppercase}.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:18px}
.access-card{display:flex;align-items:center;gap:20px;border:1px solid var(--edge);border-radius:12px;background:var(--glass);padding:22px 24px;transition:background-color 150ms ease,border-color 150ms ease}.access-card:hover{background:#1b2025c9;border-color:#ffffff20}.access-number{display:none;font:.6875rem Mono,monospace;color:var(--quiet)}.access-card h4{font-size:.9375rem}.access-card p{font-size:.8125rem;color:var(--quiet);margin-top:5px}.access-card>span:last-child{margin-left:auto;color:var(--soft-red)}
.site-footer{border-top:1px solid var(--edge);padding-block:35px 85px}.footer-main{display:flex;align-items:center;gap:28px}.footer-main>p{color:var(--quiet);font-size:.8125rem}.footer-main nav{display:flex;flex-wrap:wrap;gap:12px 25px;max-width:100%;margin-left:auto;font-size:.8125rem;color:var(--muted)}
.footer-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin-top:35px;color:var(--quiet);font-size:.6875rem}.footer-bottom p:last-child{text-align:right;max-width:780px}
#main-content{position:relative}
.trim-marker{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.trim-marker rect{fill:#e7474f0a;stroke:var(--red);stroke-width:2;vector-effect:non-scaling-stroke}
.trim-marker path{stroke:var(--red);stroke-width:6;vector-effect:non-scaling-stroke}
@media(min-width:1600px){.hero{padding-top:108px}}
@media(max-width:1050px){.wrap{width:calc(100% - 64px)}.nav-inner{gap:24px}.nav-inner nav{gap:20px}.hero-actions{gap:18px}.feature-section{gap:40px}.trim-desk{padding:24px}.insights-grid{gap:24px}.community-section{gap:40px}.workspace-section{gap:45px}.download-grid{gap:40px}.history-detail{padding:20px}.metric-tabs button{padding-inline:5px}.footer-main>p{display:none}.game-profiles,.global-profile{margin-inline:18px}.global-profile{padding:17px}.game-profile{padding:13px;gap:10px}}
@media(max-width:760px){
  .wrap{width:calc(100% - 40px)}html{scroll-padding-top:125px}
  .nav-inner{min-height:68px;gap:18px;flex-wrap:wrap;padding-block:14px 12px}.nav-inner>.button{margin-left:auto}.nav-inner nav{order:3;width:100%;justify-content:space-between;margin:0;padding-top:8px;gap:12px;font-size:.75rem}
  .hero{padding-top:53px}.hero h1{font-size:clamp(4.5rem,12vw,6rem)}.hero-subtitle{font-size:1.375rem;margin-top:18px}.hero-summary{margin-top:26px}.hero-actions{margin-top:23px;gap:24px}.product-preview{margin-top:40px}.product-preview figcaption{font-size:.6875rem;text-align:left}
  .product-rail{margin-top:25px}.product-rail a{padding:16px 12px;gap:9px;min-height:72px;font-size:.75rem;line-height:1.5}.rail-arrow{display:none}.rail-index{font-size:.625rem}
  .feature-section{grid-template-columns:1fr;padding-block:72px;gap:32px}.feature-copy{display:block}.capture-description{margin-top:23px}.trim-desk{padding:24px}.feature-copy h2{max-width:420px}.plain-list{margin-top:18px}.capture-description .feature-footnote{margin-top:15px}
  .insights-section,.workspace-section,.community-section{padding-block:72px}.section-intro{display:block;margin-bottom:30px}.section-intro>p{margin-top:20px;max-width:550px}.insights-grid{grid-template-columns:1fr}.history-detail{padding:24px}.history-plot{height:180px}.metrics-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;font-size:.8125rem}
  .workspace-section{grid-template-columns:1fr;gap:35px}.profile-figure{order:0}.workspace-intro{max-width:550px}.workspace-details{display:grid;grid-template-columns:1fr 1fr;gap:24px}.profile-figure{width:100%;max-width:570px;margin-inline:auto}.game-profiles,.global-profile{margin-inline:25px}.global-profile{padding:22px}
  .community-section .section-intro{margin-bottom:30px}.community-card{padding:25px 20px}
  .download-section{padding-block:72px 65px}.download-grid{grid-template-columns:1fr;gap:32px;margin-top:32px}.compatibility-heading>p{max-width:560px}.platform-symbol{display:none}#requirements{scroll-margin-top:125px}.access-grid{gap:24px}.access-card{gap:13px}
  .footer-bottom{align-items:start;flex-direction:column;gap:15px;margin-top:28px}.footer-bottom p:last-child{text-align:left}
}
@media(max-width:480px){
  .brand-wordmark{width:101px}.brand>img:first-child{width:24px;height:24px}.button-small{min-height:37px;padding:8px 14px}.hero .eyebrow{font-size:.5625rem;letter-spacing:.08em}.hero h1{font-size:clamp(3.7rem,15vw,5rem)}.hero-subtitle{font-size:1.125rem;line-height:1.6}.hero-actions{gap:12px}.hero-actions .button{padding-inline:18px}.hero-actions .text-link{font-size:.8125rem;padding-inline:18px}
  .product-rail{grid-template-columns:1fr}.product-rail a{min-height:54px;padding:14px 0;gap:18px;font-size:.8125rem}.rail-arrow{display:block}
  .trim-desk{padding:16px}.trim-footer{gap:12px}.export-note{display:none}.time-ruler{font-size:.625rem}.save-receipt{padding:9px 12px;left:12px;bottom:12px}.panel-heading{padding:14px 17px;font-size:.625rem}.history-detail{padding:17px}.metric-tabs{gap:2px}.metric-tabs button{font-size:.75rem;padding:8px 5px}.history-stat{gap:10px}.history-plot{height:150px}.chart-context{font-size:.75rem}
  .workspace-details,.community-grid,.access-grid{grid-template-columns:1fr}.workspace-details{gap:0}.community-card{padding:24px 16px}.community-card>div{column-gap:12px}.card-link{margin-left:46px}.game-profiles,.global-profile{margin-inline:15px}.global-profile{padding:16px}.game-profile{gap:9px;padding:12px}.game-profile p{font-size:.625rem}.profile-tag{font-size:.5625rem;padding:4px 5px}
  .installer-card{padding:21px}.install-command-row{padding:14px;gap:10px}.install-command-copy code{font-size:.6875rem}.access-grid{gap:12px}.access-card{padding:20px}.other-paths{margin-top:34px}
  .footer-main{align-items:start;flex-direction:column;gap:23px}.footer-main nav{margin-left:0;gap:28px}
}
@media(max-width:360px){.metric-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

@media(max-width:760px){.gpu-support{scroll-margin-top:137px}.gpu-card{padding:24px}.gpu-card-heading h4{font-size:1.25rem}.gpu-support-grid{gap:16px}}
@media(max-width:480px){.hero-gpu-status{gap:4px 18px;margin-top:16px}.hero-gpu-status a{gap:8px;font-size:.625rem}.hero-gpu-status strong{font-size:.6875rem}.gpu-support-grid{grid-template-columns:1fr}.gpu-support{margin-top:34px}.footer-main nav{gap:12px 20px}}
@media(max-width:360px){.hero-gpu-status{flex-direction:column;align-items:center;gap:0}}



/* presentation.css */
/* Independently implemented Imagine-inspired composition. Typography and media
   placement belong to the website; product imagery and inner controls stay intact. */
/* Low-opacity layers soften the contact edge and the longer shadow falloff. */
:root{--preview-shadow:0 8px 28px -12px #0003,0 28px 70px -18px #0003,0 54px 120px -28px #0002}
.wrap{width:min(1200px,calc(100% - 64px))}
h2{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:500;line-height:1.15;letter-spacing:-.01em;text-wrap:initial}
.hero{display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:64px;padding-block:104px 112px}
.hero-copy{max-width:520px;margin:0;text-align:left;min-width:0}
.hero h1{font-size:clamp(2.75rem,5vw,3.75rem);font-weight:450;line-height:1.08;letter-spacing:-.01em;margin:0}
.hero-subtitle{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:450;line-height:1.15;letter-spacing:-.025em;margin:18px 0 0;color:#a7adb4}
.hero-description{font-size:1.125rem;line-height:1.65;color:var(--muted);margin-top:26px;max-width:480px}
.hero-summary{margin-top:30px}
.hero-actions{justify-content:flex-start;gap:24px}
.button{font-weight:500;border-radius:999px}
.button-primary{background:#f1f2f3;border-color:#f1f2f3;color:#101214}
.button-primary:hover{background:#fff;border-color:#fff;color:#101214}
.hero-actions>.button{min-height:44px;padding:12px 24px}
.hero-actions>.text-link{min-height:44px;padding:10px 0;border:0;background:none;border-radius:0}
.text-link{color:var(--muted);font-size:.875rem;text-decoration:none}
.text-link:hover{color:var(--text)}
.visual-stage{min-width:0;position:relative;padding:0;background:none}
.product-preview{width:100%;min-width:0;max-width:none;margin:0}
/* Flat page canvas; original product imagery keeps its own colors. */
#main-content{overflow:clip}
.feature-section,.showcase-row{position:relative;isolation:isolate}
.topic-title{display:flex;align-items:center;gap:12px}
.topic-title>span{color:inherit}
@media(max-width:360px){#workspace-title{font-size:1.625rem}}
.topic-icon{width:24px;height:24px;flex:0 0 24px}
.preview-frame{box-shadow:var(--preview-shadow);border-color:#ffffff14}
.product-preview figcaption{margin-top:24px;font-size:.75rem;text-align:left;color:var(--quiet)}
.feature-section,.showcase-row{display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;gap:96px;padding-block:96px}
.feature-section{margin-top:0;border-top:1px solid var(--edge)}
.feature-copy h2,.showcase-copy h2{margin:0}
.capture-description{margin-top:20px}
.capture-description>p,.showcase-copy>p{color:var(--muted);font-size:1rem;line-height:1.65}
.showcase-copy>p,.showcase-copy>.workspace-summary{margin-top:20px}
.plain-list{margin-top:22px;font-size:.875rem;color:var(--muted)}
.plain-list li{gap:12px;padding-block:7px}
.plain-list li::before{content:'✓';font-family:NotoSans,Arial,sans-serif;color:var(--quiet);font-size:.8125rem}
.insights-section{padding:0;border:0}
.showcase-row{border-top:1px solid var(--edge)}
.showcase-copy,.feature-visual{min-width:0}
.visual-stage .metric-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.visual-stage .metric-tabs button{white-space:normal}
.workspace-section{grid-template-columns:.82fr 1.18fr;gap:96px;align-items:start;padding-block:56px;border-block:1px solid var(--edge)}
.workspace-section h2{margin:0;font-size:1.875rem;line-height:1.2;letter-spacing:-.01em;font-weight:500}
.workspace-summary{min-width:0;max-width:600px;font-size:1rem;color:var(--muted)}
.workspace-note{margin-top:16px;font-size:.875rem;color:var(--quiet)}
/* Community and compatibility accompany the support card. */
.workspace-setup{width:min(1200px,calc(100% - 64px));display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:stretch;padding-top:80px}
.workspace-aside{display:grid;gap:24px;min-width:0}
.community-section,.gpu-support{display:block;padding:32px;background:#0d0e10;border:1px solid #ffffff16;border-radius:16px;margin:0;scroll-margin-top:110px}
.community-copy h2{font-size:24px;font-weight:450;line-height:1.25;letter-spacing:-.025em}
.community-copy p{font-size:13px;line-height:1.7;color:#aeb1b7;margin-top:14px}
.community-actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:16px}
.community-actions a{display:inline-flex;align-items:center;gap:14px;min-height:40px;font-size:12px;color:#c5c7cb}
.community-actions .button{background:#ffffff04;border-color:#ffffff16;padding:5px 16px}
.community-actions .button:hover{background:#ffffff10}
.compatibility-copy h2{font-size:21px;font-weight:450;line-height:1.25;letter-spacing:-.025em}
.gpu-support-note{color:#aeb1b7;font-size:12px;line-height:1.7;margin-top:14px;max-width:420px}
.compatibility-details{min-width:0;margin-top:28px}
.gpu-support-list{margin:0}
.gpu-support-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:12px;border-bottom:1px solid #ffffff16}
.gpu-support-row h3{font-size:13px;font-weight:450;letter-spacing:0}
.gpu-support-row .gpu-status{padding:0;border-radius:0;background:none;color:#9caaa2;font-size:11px;white-space:nowrap}
#requirements{margin:0;padding:0;background:none;border:0;border-bottom:1px solid #ffffff16;border-radius:0;backdrop-filter:none}
#requirements summary{padding:17px 0;font-size:12px;color:#c6c8cd}
#requirements .requirements-body{padding:0 0 20px;font-size:12px;line-height:1.8;color:#a5a8ae}
#requirements .requirements-body p+p{margin-top:10px}
#requirements .requirements-body a{margin-top:14px;color:#c4c6cc}
@media(max-width:950px){
 .workspace-setup{grid-template-columns:1.2fr 1fr}
 .community-section,.gpu-support{padding:24px}
}
@media(max-width:1050px){
 .hero{gap:40px;padding-block:72px 88px}
 .feature-section,.showcase-row,.workspace-section{gap:48px}
 .visual-stage .metric-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero-description{font-size:1rem}
}
@media(max-width:760px){
 .wrap{width:calc(100% - 40px)}
 .hero{grid-template-columns:1fr;gap:44px;padding-block:48px 56px}
 .hero-copy{max-width:600px}.hero h1{font-size:2.75rem}.hero-subtitle{font-size:1.875rem}
 .hero-description{margin-top:22px;max-width:520px}.hero-summary{margin-top:24px}
 .feature-section,.showcase-row{grid-template-columns:1fr;gap:32px;padding-block:56px}
 .workspace-section{grid-template-columns:1fr;gap:24px;padding-block:36px}.workspace-section h2{font-size:1.625rem}
 .workspace-setup{display:block;width:calc(100% - 40px);padding-top:48px}
 .workspace-aside{margin-top:32px;gap:24px}
 .compatibility-details{margin-top:24px}
}
@media(max-width:480px){
 .hero{padding-top:36px}.hero-actions{gap:22px}.hero-actions>.button{padding-inline:20px}
 .hero-subtitle{font-size:1.75rem}
}

/* A single pinned stage replaces the separate media rows on roomy screens.
   The base document still pairs every topic with its own working preview. */
.product-story{position:relative;isolation:isolate;border-top:1px solid var(--edge);padding-block:64px 96px}
.story-step{display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;gap:96px;padding-block:56px;scroll-margin-top:140px}
.story-step h2{margin:0}
.product-story.is-enhanced{display:grid;grid-template-columns:.82fr 1.18fr;gap:96px;align-items:start}
.story-text{min-width:0;padding-block:90px}
.is-enhanced .story-step{display:flex;align-items:center;min-height:65svh;padding-block:90px}
.is-enhanced .story-step>.feature-copy,.is-enhanced .story-step>.showcase-copy{opacity:.18;transition:opacity .4s ease}
.is-enhanced .story-step.is-current>.feature-copy,.is-enhanced .story-step.is-current>.showcase-copy,.is-enhanced .story-step:focus-within>.feature-copy,.is-enhanced .story-step:focus-within>.showcase-copy{opacity:1}
.story-stage{position:sticky;margin-block:max(0px,calc(90px + 32.5svh - min(620px,100svh - 150px)/2));top:max(100px,calc((100svh - min(620px,100svh - 150px))/2));min-width:0;isolation:isolate}
.story-media{position:relative;height:min(620px,calc(100svh - 150px))}
.story-media>.feature-visual{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s cubic-bezier(0,0,.2,1),visibility 0s linear .3s;pointer-events:none}
.story-media>.feature-visual.is-active{opacity:1;visibility:visible;transition-delay:0s;pointer-events:auto}
.story-media .visual-stage{width:100%}
.product-story .visual-note{font-size:.75rem;margin-top:14px;color:var(--quiet)}
.story-media .scene-preview>img{height:clamp(170px,27svh,270px);object-fit:cover;object-position:center 47%}
.story-media .trim-desk{padding:20px 24px 16px}
.story-media .trim-heading h3{font-size:1.25rem}
.story-media .time-ruler{margin-top:12px}
.story-media .save-receipt{padding:9px 13px;background:#111215e8;backdrop-filter:blur(10px)}
.product-story .overlay-panel{border:1px solid #ffffff14;border-radius:16px;overflow:hidden;background:#111315;box-shadow:var(--preview-shadow)}
.product-story .overlay-panel .panel-heading{padding:14px 18px;font-size:.75rem;text-transform:none;letter-spacing:0}
.product-story .overlay-scene{border-radius:0;isolation:isolate}
.overlay-look{position:absolute;left:1%;top:2%;opacity:0;visibility:hidden;transition:opacity .3s cubic-bezier(0,0,.2,1),visibility 0s linear .3s;max-width:none}
.overlay-look.is-active{opacity:1;visibility:visible;transition-delay:0s}
/* First layout remains useful before script execution or when JS is disabled. */
.overlay-look[data-overlay-look='grid']:not([aria-hidden]){opacity:1;visibility:visible}
.overlay-look.metrics-overlay{width:34%;max-width:none}
.overlay-look.metrics-overlay img{width:100%}
.look-ribbon{width:71.5%;height:auto}
.look-telemetry{width:34.5%;height:auto}
.look-fps{width:13.5%;height:auto;overflow:visible}
.preview-variants{display:flex;align-items:center;gap:12px;margin-top:16px}
.look-tabs{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid #ffffff16;border-radius:999px;background:#08090c66;width:max-content;max-width:100%}
.look-tabs button{background:none;border:0;color:var(--quiet);font-size:.75rem;padding:7px 14px;border-radius:999px;min-height:34px;white-space:nowrap}
.look-tabs button[aria-selected='true']{background:#dedde3;color:#121216}
.look-tabs button:hover{color:var(--text)}
.look-tabs button[aria-selected='true']:hover{color:#121216}
.history-showcase{box-shadow:var(--preview-shadow)}
@media(max-width:1050px){.story-step,.product-story.is-enhanced{gap:48px}.look-tabs button{padding-inline:10px}}
@media(max-width:899px), (max-height:699px){
 .product-story{padding-block:20px 56px}.story-step{grid-template-columns:1fr;gap:32px;padding-block:48px}
 .story-step .feature-copy,.story-step .showcase-copy{max-width:580px}
 .story-step+.story-step{border-top:1px solid var(--edge)}
}
@media(max-width:480px){.preview-variants{gap:5px}.look-tabs button{padding-inline:9px;font-size:.6875rem}.product-story .overlay-panel .panel-heading{padding:12px 14px}}
.replay-menu-preview{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72%;height:auto;filter:drop-shadow(0 8px 25px #0005)}
/* Overlapping real views keep the stage and tabs steady through a crossfade.
   Hidden layers remain painted until fade-out finishes, but are immediately inert. */
.edit-showcase{display:grid;border:0;border-radius:0;background:none;overflow:visible;box-shadow:none}
.replay-view{grid-area:1/1;align-self:center;min-width:0;border:1px solid #ffffff16;border-radius:14px;overflow:hidden;background:#101012;box-shadow:var(--preview-shadow);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s cubic-bezier(0,0,.2,1),visibility 0s linear .3s}
.edit-showcase[data-replay-view='save'] .replay-save-view,.edit-showcase[data-replay-view='edit'] .replay-editor-view{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
/* The editor sets the shared row height. Fill that same space with gameplay so
   both previews end 16px above the fixed tabs, without stretching image pixels. */
.replay-save-view{align-self:stretch;position:relative}
.replay-save-view .scene-preview{position:absolute;inset:0}
.replay-save-view .scene-preview>img{height:100%;object-fit:cover;object-position:center 47%}
.replay-tabs{margin-top:16px}
.replay-tabs button[aria-pressed='true']{background:#dedde3;color:#121216}
.replay-tabs button[aria-pressed='true']:hover{color:#121216}
@media(max-width:480px){.replay-menu-preview{width:78%}}
.profile-usecase{border:1px solid #ffffff14;border-radius:16px;background:#0f1113;overflow:hidden;box-shadow:var(--preview-shadow)}
.profile-usecase>.panel-heading{padding:14px 18px;font-size:.75rem;text-transform:none;letter-spacing:0}
.profile-app{display:grid;grid-template-columns:170px 1fr;min-height:360px;background:#0b0c0e}
.profile-catalog{padding:16px 10px;border-right:1px solid #ffffff12;background:#111315}
.profile-search{display:block;border:1px solid #ffffff14;border-radius:6px;padding:7px 10px;color:var(--quiet);font-size:.625rem;margin-bottom:18px}
.catalog-game{display:flex;align-items:center;gap:8px;width:100%;text-align:left;color:inherit;font:inherit;background:transparent;border:1px solid transparent;padding:10px 6px;border-radius:6px;margin-top:8px;cursor:pointer}.catalog-game:hover{background:#ffffff08}.catalog-game:focus-visible{outline:2px solid var(--soft-red);outline-offset:2px}
.catalog-game.selected{background:#262023;border:1px solid #e7474f44}
.catalog-game b{font-size:.625rem;font-weight:500;display:block}
.catalog-game small{font-size:.5625rem;color:var(--quiet);display:block;margin-top:4px}
.catalog-thumb{width:32px;height:48px;border-radius:4px;flex:none;object-fit:cover}
.profile-game{min-width:0}
.profile-game-banner{position:relative;isolation:isolate;min-height:144px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px 20px;background:#0b0c0e}
.profile-banner-art{position:absolute;inset:0;z-index:-1;pointer-events:none;background:center/cover;opacity:0;transition:opacity .3s cubic-bezier(0,0,.2,1)}
.profile-game[data-selected-game="peak"] .profile-banner-peak,.profile-game[data-selected-game="stardew"] .profile-game-banner>span{font-size:.625rem;color:#dedfe3}.profile-game-banner h3{font-size:1.25rem;font-weight:500;margin-top:5px}
.profile-tabline{display:flex;gap:20px;padding:12px 20px;border-bottom:1px solid #ffffff12;color:var(--quiet);font-size:.6875rem}
.profile-tabline>span:first-child{color:var(--soft-red)}
.profile-fields{padding:20px}
.profile-inheritance{padding:12px 14px;border-radius:7px;background:#17191c;border:1px solid #ffffff0c;margin-bottom:12px}
.profile-inheritance b{font-size:.75rem;font-weight:500}.profile-inheritance p{font-size:.625rem;color:var(--quiet);margin-top:6px}
.profile-field{display:flex;justify-content:space-between;gap:14px;padding:17px 0;border-bottom:1px solid #ffffff12;align-items:center}
.profile-field b{font-size:.6875rem;font-weight:500}.profile-field b small{color:var(--soft-red);font-size:.5625rem;margin-left:6px}
.profile-field p{font-size:.5625rem;color:var(--quiet);margin-top:5px}
.profile-value{display:flex;align-items:center;justify-content:space-between;gap:20px;min-width:100px;border:1px solid #ffffff20;border-radius:6px;background:#1a1b1e;padding:7px 10px;font-size:.6875rem}
.profile-global-note{font-size:.625rem;color:var(--quiet);margin-top:18px}
@media(max-width:1100px){.profile-app{grid-template-columns:130px 1fr}.profile-value{min-width:88px;gap:10px}.profile-fields{padding:16px}.profile-field{gap:8px}}
@media(max-width:480px){.profile-app{grid-template-columns:1fr}.profile-catalog{display:flex;gap:6px;border-right:0;border-bottom:1px solid #ffffff12;padding:8px}.profile-search{display:none}.catalog-game{flex:1;min-width:0;margin:0;padding:6px;gap:6px}.catalog-thumb{width:24px;height:36px}.catalog-game small{font-size:.5rem}.profile-fields{padding:17px}.profile-game-banner{padding:20px 17px}.profile-game-banner h3{font-size:1.125rem}.profile-value{min-width:95px}}

/* Quiet reference-style context and facts replace hero calls to action. */
.hero-context{display:flex;align-items:center;gap:9px;margin:0 0 30px;font-size:.8125rem;color:var(--quiet)}
.hero-context svg{width:17px;height:17px;flex:none}.context-divider{margin-inline:5px;color:#ffffff30}
.hero-facts{list-style:none;display:flex;flex-wrap:wrap;gap:14px 22px;padding:0;margin:30px 0 0;color:var(--quiet);font-size:.75rem;line-height:1.5}
.hero-facts li{display:flex;align-items:center;gap:7px}.hero-facts svg{width:15px;height:15px;flex:none}
.comparison-section{position:relative;isolation:isolate;padding-block:64px 96px;scroll-margin-top:110px}
.comparison-intro{text-align:center;margin:0 auto 32px;max-width:720px}.comparison-intro p{font-size:1rem;line-height:1.65;color:var(--muted);margin-top:18px}
.comparison-scroll{overflow-x:auto;max-width:100%;margin-inline:auto;border:1px solid #ffffff0c;border-radius:16px;background:#ffffff04;backdrop-filter:blur(16px)}
.comparison-scroll:focus-visible{outline:2px solid var(--soft-red);outline-offset:5px}
.comparison-table{width:100%;min-width:780px;border-collapse:collapse;text-align:left;font-size:.875rem;line-height:1.5}
.comparison-table th,.comparison-table td{padding:15px 22px;border-bottom:1px solid #ffffff09;font-weight:400}
.comparison-table thead th{color:var(--quiet);font-size:.75rem;padding-block:15px}.comparison-table tbody th{width:28%;color:var(--muted)}
.comparison-table td{color:var(--muted)}.comparison-table tbody tr:last-child>*{border-bottom:0}
.comparison-featured{background:#ffffff05}.comparison-featured th{box-shadow:inset 2px 0 var(--soft-red)}.comparison-table .comparison-featured th,.comparison-featured .comparison-yes{color:var(--text)}
.comparison-yes{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem}.comparison-check{width:16px;height:16px;flex:none;color:var(--quiet)}.comparison-featured .comparison-check{color:var(--soft-red)}
.comparison-absent{color:#70757d}.comparison-partial{font-size:.8125rem}
@media(max-width:760px){.hero-context{margin-bottom:24px}.hero-facts{gap:12px 20px;margin-top:26px}.comparison-section{padding-block:48px 56px}.comparison-intro{text-align:left;margin-bottom:28px}.comparison-table th,.comparison-table td{padding:14px 16px}.comparison-scroll{border-radius:12px}}


@media(prefers-reduced-motion:reduce){.story-media>.feature-visual,.is-enhanced .story-step>.feature-copy,.is-enhanced .story-step>.showcase-copy,.overlay-look,.replay-view,.profile-banner-art{transition:none;transform:none}}

/* High-density captures are already cropped to the app content. Map both
   layers directly to one frame; no fractional oversizing or source offset. */
.hero-media{position:relative;aspect-ratio:2278/1285}
.hero-media .hero-poster,.hero-media .overview-recording{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;min-height:0;aspect-ratio:auto;object-fit:contain}
.hero-media .overview-recording{pointer-events:none;opacity:0}
.hero-media.is-playing .overview-recording{opacity:1}



/* Navigation, controls and interactive preview components. */

/* navigation.css */
/* A compact header with direct links only. */
.topbar{background:#000;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .2s ease}
.topbar.is-scrolled{background:#000a;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nav-inner{width:100%;max-width:1264px;margin-inline:auto;min-height:72px;padding:12px 32px;gap:32px;flex-wrap:nowrap}
.nav-brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;min-height:40px}
.nav-brand img{width:117px;height:auto}
.nav-inner nav{display:flex;align-items:center;width:auto;order:0;margin:0 0 0 auto;padding:0;gap:0;font-size:.8125rem;color:var(--muted)}
.nav-privacy-link{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.nav-inner nav a:hover{color:var(--text)}
.nav-primary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-left:0;padding:10px 18px;border:1px solid #ffffff3b;border-radius:10px;background:#e9ebed;color:#111316;font-size:.8125rem;line-height:1.4;white-space:nowrap;font-weight:500;flex-shrink:0}
.nav-primary:hover{background:#fff;color:#111316}
@media(max-width:760px){.nav-inner{gap:20px;padding-inline:20px}.nav-brand img{width:108px}.nav-inner nav{font-size:.75rem}.nav-primary{font-size:.75rem;padding-inline:14px}}
@media(max-width:480px){.nav-inner{gap:14px;padding-inline:20px}.nav-brand img{width:96px}.nav-primary{padding-inline:12px}}
@media(max-width:360px){.nav-inner{gap:10px;padding-inline:20px}.nav-brand img{width:82px}.nav-inner nav,.nav-primary{font-size:.6875rem}.nav-primary{padding-inline:10px}}

/* Reuse the transparent Comet R; the wordmark keeps its existing proportions. */
.nav-brand .nav-logo{width:30px;height:30px;object-fit:contain;flex:none}
@media(max-width:480px){.nav-brand{gap:8px}.nav-brand .nav-logo{width:28px;height:28px}}
@media(max-width:360px){.nav-brand .nav-logo{width:24px;height:24px}}



/* content-protection.css */
img,svg,.filmstrip{-webkit-user-drag:none}img,svg,.filmstrip,h1,h2,h3,.topbar,.eyebrow,.panel-heading{-webkit-user-select:none;user-select:none}



/* feature-demos.css */
/* Independently drawn app demonstrations. Only this experimental copy uses them. */
.demo-features{padding-block:64px 88px}
.demo-features-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.demo-features-head h2{font-size:34px;font-weight:450;letter-spacing:-.035em;margin:0}
.demo-features-head p{font-size:14px;color:#999ba2;margin-top:12px}
.feature-demo-motion{border:1px solid #ffffff1a;background:transparent;color:#a9abb1;border-radius:99px;padding:10px 15px;font:11px NotoSans,sans-serif;cursor:pointer;flex:none}
.feature-demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.interface-card{container-type:inline-size;position:relative;min-width:0;padding:30px 30px 26px;border-radius:22px;background:#18181a;overflow:hidden;scroll-margin-top:100px}
.interface-card h3{font-size:18px;font-weight:500;letter-spacing:-.02em;line-height:1.4;margin:0;color:#eeeef0}
.interface-card>.demo-card-copy{font-size:14px;line-height:1.7;color:#a8a8b0;max-width:470px;margin-top:9px;min-height:48px}
.interface-stage{position:relative;margin-top:32px;height:auto;isolation:isolate}
.demo-window{position:relative;isolation:isolate;background:#0c0c0e;border:1px solid #ffffff12;border-radius:12px;box-shadow:0 15px 35px #0002;overflow:hidden;min-width:0}
.demo-window-top{height:40px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 17px;border-bottom:1px solid #ffffff0c;font-size:11px;color:#919199}
.demo-window-top>span:last-child{font:9px Mono,monospace;color:#74747d}
.demo-skeleton{display:block;background:#2b2b30;border-radius:3px;height:5px;width:60%}
.demo-skeleton.short{width:32%}.demo-skeleton.long{width:85%}
.demo-mini-button,.demo-chip{font:10px/1.4 NotoSans,sans-serif;border:1px solid #ffffff1b;border-radius:6px;color:#c5c5cc;background:#19191c;padding:8px 11px;cursor:pointer}
.demo-mini-button[aria-pressed=true],.demo-chip[aria-pressed=true]{border-color:#74323d;background:#241516;color:#ffd3d6}
.demo-mini-button:hover,.demo-chip:hover{border-color:#777;background:#252529}
.demo-mini-button.primary{border-color:#8a3a40;background:#2e171a;color:#f5b9bd}
.demo-mini-button:focus-visible,.demo-chip:focus-visible,.demo-library-game:focus-visible,.feature-demo-motion:focus-visible{outline:2px solid #ff9297;outline-offset:3px}
.interface-cursor{position:absolute;left:0;top:0;width:20px;height:25px;pointer-events:none;z-index:8;opacity:0;filter:drop-shadow(0 2px 3px #0008);transition:opacity .2s}
.interface-cursor svg{display:block;width:100%;height:100%}.interface-card.is-touring .interface-cursor{opacity:1}
/* Replay: a player and thumbnail timeline, sharing the same fictional clip. */
.demo-video-picture{position:relative;aspect-ratio:16/9;overflow:hidden;background:#19191c}
.demo-video-picture>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 56%}
.demo-video-transport{display:flex;align-items:center;gap:10px;padding:7px 14px;background:#101012;color:#a9a9b2;font:8px Mono,monospace}
.demo-video-transport>svg{width:12px;height:12px;flex:none;fill:#d4d4da}
.demo-video-progress{height:3px;flex:1;position:relative;background:#37373e;border-radius:3px}
.demo-video-progress i{display:block;width:20%;height:100%;background:#b4b4bd;border-radius:3px}
.demo-replay-body{padding:12px 15px 15px}
.demo-buffer{position:relative;display:flex;gap:2px;height:40px;padding:3px;background:#17171b;border-radius:4px;overflow:hidden}
.demo-buffer>span{flex:1;min-width:0;background:none;opacity:.65}
.demo-buffer>span:nth-child(3n){background-position:38% center}.demo-buffer>span:nth-child(4n){background-position:65% center}
.demo-buffer-range{position:absolute;top:1px;bottom:1px;left:var(--trim-start,0%);right:calc(100% - var(--trim-end,100%));border:1px solid #e7474f;border-radius:3px}
.demo-buffer-range>i{position:absolute;top:0;bottom:0;width:5px;background:#e7474f;border-radius:2px}
.demo-buffer-range>i::after{content:'';position:absolute;left:2px;top:35%;bottom:35%;width:1px;background:#ffd8db}
.demo-buffer-range>[data-trim-handle=start]{left:-1px}.demo-buffer-range>[data-trim-handle=end]{right:-1px}
.demo-playhead{position:absolute;top:0;bottom:0;left:20%;width:1px;background:#eeeef1;opacity:.7}
.interface-cursor.is-dragging{filter:drop-shadow(0 1px 2px #0006)}
.demo-buffer-times{display:flex;justify-content:space-between;margin-top:7px;font:8px Mono,monospace;color:#81818b}
.demo-replay-actions{display:flex;justify-content:space-between;align-items:center;margin-top:11px;gap:12px}
.demo-replay-actions .demo-mini-button{padding:6px 10px;font-size:9px}
#capture .interface-stage{height:auto}
/* History uses the existing coherent illustrative session and metric selectors. */
.interface-card .history-showcase{border-radius:12px;background:#0c0c0e;border:1px solid #ffffff12;box-shadow:none;overflow:hidden}
.interface-card .history-showcase h3{font-size:11px;color:#919199;font-weight:400}
.interface-card .history-detail{padding:14px 18px}
.interface-card .detail-topline{display:none}
.interface-card .metric-tabs{display:flex;gap:5px;margin:0 0 14px;padding:0;background:transparent;border:0}
.interface-card .metric-tabs button{flex:1;min-height:30px;padding:6px 4px;font-size:9px;border-radius:5px;border:1px solid #ffffff14;background:#19191c;color:#92929c;white-space:nowrap}
.interface-card .metric-tabs button[aria-selected=true]{border-color:#74323d;background:#241516;color:#f5b9bd}
.interface-card .history-stat{margin:0 0 7px}.interface-card .history-stat strong{font-size:24px}.interface-card .history-stat>span{font-size:9px}
.interface-card .history-stat #history-unit{font-size:10px}
.interface-card .history-legend{font-size:9px;margin:6px 0 12px}
.interface-card .history-plot{height:100px}.interface-card .history-chart{height:100px}
.interface-card .chart-axis{font-size:8px}.interface-card .chart-times{font-size:8px;margin-top:7px}
/* Profiles: a small Library, with explicit global versus per-game values. */
.demo-profile-layout{display:grid;grid-template-columns:128px minmax(0,1fr);min-height:285px}
.demo-library{background:#111113;border-right:1px solid #ffffff0c;padding:15px 9px}
.demo-library-caption{font-size:9px;color:#75757e;margin:0 6px 12px}
.demo-library-game{display:flex;align-items:center;gap:9px;width:100%;padding:10px 7px;margin-bottom:6px;border:1px solid transparent;background:transparent;color:#8e8e99;border-radius:6px;cursor:pointer;font:10px NotoSans,sans-serif;text-align:left}
.demo-library-game[aria-pressed=true]{border-color:#754047;background:#241b1e;color:#eeeef0}
.demo-game-icon{display:block;flex:none;width:24px;height:29px;border:1px solid #55555e;border-radius:3px;background:linear-gradient(135deg,#494951 50%,#24242a 50%)}
.demo-game-icon.second{background:linear-gradient(45deg,#29292e 45%,#65656e 45% 55%,#333339 55%)}
.demo-profile-detail{padding:21px 18px;min-width:0}
.demo-name-placeholder{display:block;width:39px;max-width:100%;height:5px;border-radius:2px;background:#92929e45}
.demo-library-game[data-demo-game="2"] .demo-name-placeholder{width:46px}
.demo-library-game[aria-pressed=true] .demo-name-placeholder{background:#b4b4c078}
.demo-profile-name{display:flex;align-items:center;height:21px;margin-bottom:7px}
.demo-profile-name .demo-name-placeholder{width:104px;height:8px;background:#a6a6b05c}
.demo-setting-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid #ffffff0c;font-size:10px;color:#b1b1ba}
.demo-setting-row>span{min-width:0;line-height:1.5}.demo-setting-row .demo-mini-button{font-size:9px;white-space:nowrap;padding:7px 8px}
@media(max-width:1000px){.interface-card{padding:25px 22px 24px}.demo-profile-layout{grid-template-columns:108px minmax(0,1fr)}.demo-profile-detail{padding:18px 13px}.demo-metrics-toolbar .demo-chip{font-size:9px;padding:6px 8px}}
@media(max-width:760px){.demo-features{padding-block:40px 55px}.demo-features-head h2{font-size:28px}.demo-features-head p{font-size:12px}.feature-demo-grid{grid-template-columns:1fr;gap:18px}.interface-card{padding:26px 24px 24px}.interface-card>.demo-card-copy{min-height:0}.interface-stage{margin-top:27px;height:auto}.demo-features-head{align-items:center}.feature-demo-motion{font-size:10px;padding:9px 12px}}
@media(max-width:390px){.interface-card{padding-inline:18px}.demo-profile-layout{grid-template-columns:94px minmax(0,1fr)}.demo-library-game{gap:5px;font-size:9px;padding-inline:4px}.demo-game-icon{width:18px;height:25px}.demo-profile-detail{padding-inline:12px}.demo-setting-row{gap:5px}.demo-metrics-toolbar{gap:4px}.demo-metrics-toolbar .demo-chip{padding:6px;font-size:8px}.demo-window-top{padding-inline:12px}.demo-features-head{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.interface-cursor{display:none}.demo-buffer-range{transition:none}}

/* Noninteractive illustrations; the animated cursor owns the card controls. */
.interface-stage[inert] button{cursor:default}
/* Separate replay capture from the in-app player and trim timeline. */
#instant-replay .interface-stage{height:auto}
.demo-capture-scene{position:relative;height:calc(56.25cqi + 143px);overflow:hidden;background:#17171b}
.demo-capture-scene>img{width:100%;height:100%;object-fit:cover;filter:brightness(.8)}
.demo-replay-menu{position:absolute;top:50%;left:50%;width:89%;max-width:520px;aspect-ratio:520/286;container-type:inline-size;transform:translate(-50%,-50%);background:#09090af5;border:1px solid #3a3a3d;border-radius:10px;box-shadow:0 12px 28px #0004;font-family:Mono,monospace;overflow:hidden}
.demo-replay-menu[hidden],.demo-moment-saved[hidden]{display:none}
.demo-menu-stats{height:23.077%;display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #2a2a2e}
.demo-menu-stats>span{text-align:center;padding:2.1% 0 0;border-right:1px solid #27272b}
.demo-menu-stats>span:last-child{border:0}.demo-menu-stats small{display:block;color:#7f7f89;font-size:1.54cqi;letter-spacing:.05em}
.demo-menu-stats b{display:block;font-size:3.08cqi;font-weight:400;color:#ededf0;margin-top:1.2%;white-space:nowrap}
.demo-menu-body{position:absolute;inset:0;pointer-events:none}.demo-menu-body>p{position:absolute;left:4.615%;top:26.92%;font-size:3.846cqi;color:#eeeef1;line-height:1.2;margin:0}
.demo-menu-durations{position:absolute;left:4.615%;top:43.356%;width:90.769%;height:29.37%;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #2e2e33;border-radius:6px;overflow:hidden}
.demo-menu-durations button{padding:0;border:0;border-right:1px solid #2a2a2e;border-bottom:1px solid #2a2a2e;background:transparent;color:#a7a7b0;font:1.73cqi Mono,monospace;white-space:nowrap}
.demo-menu-durations button:nth-child(4n){border-right:0}.demo-menu-durations button:nth-child(n+5){border-bottom:0}
.demo-menu-durations button[aria-pressed=true]{background:#3d171f;color:#ef727b;box-shadow:inset 0 -2px #e7474f}
.demo-menu-actions{position:absolute;left:4.615%;top:77.622%;width:90.769%;height:16.084%;display:flex;gap:3.39%}.demo-menu-formats{display:flex;flex:180;border:1px solid #343439;border-radius:5px;overflow:hidden}
.demo-menu-formats button{flex:1;border:0;background:transparent;color:#81818c;font:1.73cqi Mono,monospace;padding:0}
.demo-menu-formats button+button{border-left:1px solid #343439}.demo-menu-formats button[aria-pressed=true]{color:#ff919a;background:#3d171f;box-shadow:inset 0 -2px #e7474f}
.demo-menu-actions>[data-menu-save]{flex:276;border:1px solid #b13a45;border-radius:5px;background:#2c1116;color:#f46c76;font:1.73cqi Mono,monospace;white-space:nowrap}
.demo-moment-saved{position:absolute;left:17px;bottom:20px;display:flex;align-items:center;gap:10px;background:#0b0d10ee;border:1px solid #44454a;border-radius:9px;padding:13px 16px;color:#d8d8df;box-shadow:0 7px 18px #0004}
.demo-moment-saved>span{font-size:22px;color:#e7474f}.demo-moment-saved strong{display:block;font:11px NotoSans,sans-serif}.demo-moment-saved small{display:block;font:8px NotoSans,sans-serif;color:#95959f;margin-top:5px}.demo-moment-saved>b{color:#a3bfb5;font-weight:400}
@media(prefers-reduced-motion:reduce){.demo-buffering i{animation:none}}

.demo-buffer-times b{font-weight:400;color:#b7b7c0}

.demo-keypress{opacity:0;position:absolute;bottom:17px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;color:#69696f;white-space:nowrap}
.demo-keypress kbd{padding:6px 9px;border:1px solid #454149;border-bottom-width:2px;border-radius:5px;background:#29262c;color:#eeeaf0;font:9px Mono,monospace;transition:background .12s,color .12s,border-color .12s,transform .12s}
.demo-keypress>span{font:9px Mono,monospace}
.demo-keypress.is-pressed kbd{background:#50202a;border-color:#d85463;color:#ffd1d8;transform:translateY(2px)}
.demo-replay-menu:not([hidden]){animation:replay-menu-in .65s cubic-bezier(.2,.65,.3,1) both}
.demo-moment-saved:not([hidden]){animation:saved-in .34s cubic-bezier(.16,1,.3,1)}
@keyframes replay-menu-in{from{opacity:0}to{opacity:1}}
@keyframes saved-in{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.demo-keypress kbd{transition:none}.demo-replay-menu:not([hidden]),.demo-moment-saved:not([hidden]){animation:none}}

/* Quiet metal edges unify the illustrations without tinting their app UI. */
.interface-card{border:1px solid #ffffff0c;background:linear-gradient(135deg,#ffffff05,transparent 42%),#18181a}
.demo-window,.interface-card .history-showcase{border-color:#b9c4d020;box-shadow:inset 0 1px #ffffff04,0 10px 24px #0002}
.demo-mini-button,.demo-chip,.metric-tabs button,.demo-library-game{transition:background .2s,border-color .2s,color .2s}
#capture .demo-video-picture>img{position:absolute;inset:0;opacity:0;transition:opacity .14s linear}
#capture .demo-video-picture>img.is-current{opacity:1}
#capture .demo-buffer>span{position:relative;background:none;opacity:1;overflow:hidden}
#capture .demo-buffer>span>img{display:block;width:100%;height:100%;object-fit:cover}
#capture .demo-buffer::before,#capture .demo-buffer::after{content:'';position:absolute;top:0;bottom:0;background:#08090bb3;z-index:1;pointer-events:none}
#capture .demo-buffer::before{left:0;width:var(--trim-start,0%)}
#capture .demo-buffer::after{right:0;width:calc(100% - var(--trim-end,100%))}
#capture .demo-buffer-range{z-index:2;box-shadow:none}
#capture .demo-playhead{z-index:3;left:var(--clip-time,20%);width:1px;background:#fff;opacity:.85;box-shadow:none}
#capture .demo-video-progress i{width:var(--clip-time,20%)}
.demo-profile-layout .demo-profile-detail{position:relative}
@media(prefers-reduced-motion:reduce){.demo-mini-button,.demo-chip,.metric-tabs button,.demo-library-game,#capture .demo-video-picture>img{transition:none}}

/* The illustrations use the production workflow at a deliberately compact scale. */
.interface-card{--feature-player-height:clamp(150px,32cqi,190px);padding:22px;border-color:#c5ced311;background:linear-gradient(135deg,#ffffff05,transparent 42%),#18181a}
.interface-card>.demo-card-copy{font-size:13px;line-height:1.6;min-height:42px;margin-top:7px}
.interface-stage{margin-top:14px}
.demo-window,.interface-card .history-showcase{border-color:#bec8d32b;box-shadow:inset 0 1px #ffffff06,0 12px 28px #0003}
.demo-clip-file{height:28px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0c;background:#101012;color:#a7a7ae;font-size:9px}
#capture .demo-video-picture{aspect-ratio:auto;height:var(--feature-player-height);background:#070709}
#capture .demo-video-picture>img{object-fit:cover;object-position:center 58%}
.demo-video-specs,.demo-video-game{position:absolute;z-index:1;pointer-events:none;text-shadow:0 1px 6px #000}
.demo-video-specs{right:12px;top:10px;font:8px Mono,monospace;color:#e0e0e4;background:#07070970;padding:3px 5px;border-radius:3px}
.demo-video-game{left:14px;bottom:12px;color:#efeff2;font-size:11px}
.demo-video-transport{padding:7px 12px;gap:9px}
.demo-transport-play{padding:0;border:0;background:none;width:12px;height:14px;display:flex;align-items:center;color:#d4d4da}
.demo-transport-play>svg{width:12px;height:12px;fill:currentColor}
.demo-transport-jump{font:8px Mono,monospace;color:#94949c}
.demo-video-progress i{position:relative}
.demo-video-progress i::after{content:'';position:absolute;right:-2px;top:-1px;width:5px;height:5px;border:1px solid #dedee3;border-radius:50%;background:#242428}
.demo-replay-body{padding:10px 14px;border-top:1px solid #ffffff0d}
.demo-time-ruler{display:flex;justify-content:space-between;font:7px Mono,monospace;color:#8e8e96;margin-bottom:8px}
#capture .demo-buffer{height:44px;padding:0;gap:1px;border-radius:2px;overflow:visible}
#capture .demo-buffer::before{border-radius:2px 0 0 2px}#capture .demo-buffer::after{border-radius:0 2px 2px 0}
#capture .demo-buffer-range{top:-1px;bottom:-1px;border-width:1px;border-radius:2px}
.demo-buffer-range>i{width:6px}
.demo-buffer-range>i::after{left:3px;top:38%;bottom:38%}
#capture .demo-playhead{top:-5px;bottom:-5px;pointer-events:none}
#capture .demo-playhead::before{content:'';position:absolute;top:-3px;left:-3px;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #fff}
.demo-buffer-times{margin-top:10px;gap:8px;font-size:8px}
.demo-buffer-times>span{white-space:nowrap}
.demo-replay-actions{margin-top:10px}
.demo-replay-actions .demo-mini-button{padding:7px 10px}
.demo-replay-actions [data-demo-trim]{display:inline-flex;align-items:center;gap:7px;background:#202023;border-color:#39383e;color:#dedee3;border-radius:7px}
.demo-replay-actions [data-demo-trim]>svg{width:14px;height:14px;flex:none;color:#e7474f}
.demo-replay-actions [data-demo-save]{background:none;border-color:transparent;color:#a0a0a8;padding-left:0}
.demo-mini-button:disabled,.demo-profile-reset:disabled{opacity:.35}
.demo-export-overlay{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:#0303059c;padding:18px;border-radius:11px;overflow:hidden}
.demo-export-overlay[hidden],.demo-export-dialog [hidden],.demo-profile-options[hidden],.demo-custom-label[hidden],.demo-profile-save[hidden]{display:none}
.demo-export-dialog{width:min(310px,100%);padding:22px;background:#111113;border:1px solid #4b4b53;border-radius:10px;box-shadow:0 18px 40px #0008;animation:demo-dialog-in .22s ease-out}
.demo-export-dialog h4{font-size:15px;font-weight:500;margin:0 0 21px;letter-spacing:-.02em;color:#e8e8ec}
.demo-export-dialog label,.demo-export-folder{display:block;color:#8e8e98;font:9px NotoSans,sans-serif}
.demo-export-dialog input{box-sizing:border-box;display:block;width:100%;padding:10px 11px;margin-top:8px;background:#09090b;border:1px solid #36363c;border-radius:5px;font:10px NotoSans,sans-serif;color:#dedee5;outline:none}
.demo-export-folder{margin-top:16px}
.demo-export-folder strong{display:block;margin-top:8px;padding:10px 11px;background:#0b0b0d;border:1px solid #2e2e34;border-radius:5px;color:#b2b2bc;font-size:10px;font-weight:400}
.demo-export-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.demo-export-dialog p{font-size:10px;line-height:1.7;color:#93939d;margin:0 0 18px}
.demo-export-dialog [data-export-complete]>strong{font:11px NotoSans,sans-serif;color:#d6d6df;overflow-wrap:anywhere}
.demo-export-dialog [data-export-complete]>p{margin-top:8px}
.demo-export-meter{height:3px;background:#2c2c32;border-radius:2px;margin:18px 0 24px;overflow:hidden}
.demo-export-meter>i{display:block;width:100%;height:100%;background:#e7474f;transform-origin:left}
[data-export-state=exporting] .demo-export-meter>i{animation:demo-export-fill 1.05s ease-out both}
@keyframes demo-export-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes demo-dialog-in{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
.demo-capture-scene{height:calc(var(--feature-player-height) + 198px)}
/* Compact graph proportions preserve the same sample geometry. */
.interface-card .history-detail{padding:16px}
.interface-card .history-stat strong{font-size:28px}
.interface-card .history-stat{margin:12px 0 8px}
.interface-card .history-legend{margin:8px 0 12px}
.interface-card .history-plot,.interface-card .history-chart{height:144px}
.interface-card #history-chart{height:144px}
.interface-card .chart-times{margin-top:12px}
/* Library keeps explicit inheritance and drafts; repeated explanations are omitted.
   The app's viewport save bar is scaled into this isolated preview workspace. */
.demo-profile-layout{grid-template-columns:104px minmax(0,1fr);min-height:274px}
.demo-profile-detail{padding:16px 14px 76px}
.demo-profile-name{height:17px;margin-bottom:8px}
.demo-profile-name .demo-name-placeholder{width:88px;height:7px}
.demo-inheritance-banner{display:flex;align-items:center;gap:7px;color:#a6a6af;margin-bottom:16px;min-height:16px}
.demo-inheritance-banner strong{font-size:10px;line-height:1.4;font-weight:400}
.demo-inheritance-dot{width:5px;height:5px;flex:none;border-radius:50%;background:#888892}
[data-profile-value=off] .demo-inheritance-dot,[data-profile-value=on] .demo-inheritance-dot{background:#e88b93}
.demo-setting-row{margin-top:0;min-height:56px;padding:10px 0;gap:10px;align-items:center}
.demo-setting-row>div:first-child{flex:1;min-width:0}
.demo-setting-row>div:first-child>span{display:block;font-size:11px;line-height:1.5;color:#d0d0d7}
.demo-profile-select{position:relative;flex:none}
.demo-profile-select>[data-demo-override],.demo-static-select{display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:91px;border-color:#39383e;background:#202023;font-size:10px;padding:8px 9px;border-radius:7px;color:#dedee3}
.demo-profile-options{position:absolute;right:0;top:calc(100% + 5px);z-index:6;min-width:120px;padding:5px;background:#161616;border:1px solid #494949;border-radius:6px;box-shadow:0 6px 18px #0006}
.demo-profile-options>button{display:flex;justify-content:space-between;align-items:center;gap:8px;box-sizing:border-box;width:100%;text-align:left;font:10px NotoSans,sans-serif;color:#f4f1ed;background:none;border:1px solid transparent;border-radius:4px;padding:8px}
.demo-profile-options>button+button{margin-top:2px}
.demo-profile-options>button::after{content:"✓";color:#e7474f;visibility:hidden}
.demo-profile-options>button[aria-selected=true]::after{visibility:visible}
.demo-profile-select>[data-demo-override]{border-color:#414141;background:#121212}
.demo-profile-select>[data-demo-override]:hover{border-color:#777}
.demo-profile-select>[data-demo-override][aria-expanded=true]{border-color:#e7474f}
.demo-profile-select>[data-demo-override]>span:last-child{display:inline-block;color:#aaa;transition:transform 120ms,color 120ms}
.demo-profile-select>[data-demo-override][aria-expanded=true]>span:last-child{transform:rotate(180deg);color:#e7474f}
.demo-custom-label{font-weight:400;font-size:8px;color:#ef9199;margin-left:5px}
.demo-profile-reset{border:0;padding:0;margin-top:12px;background:none;color:#df9aa1;font:9px NotoSans,sans-serif;display:block}
.demo-profile-save{position:absolute;left:10px;right:10px;bottom:10px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid #333;border-radius:9px;background:#141414;box-shadow:0 10px 28px #0008;animation:demo-dialog-in .2s ease-out}
.demo-profile-save>span{font-size:9px;color:#a9a9b2;white-space:nowrap}
.demo-profile-save-actions{display:flex;gap:8px;flex:none}
.demo-profile-save .demo-mini-button{font-size:9px;padding:8px 10px;border-radius:7px;border-color:#39383e;background:#202023;color:#dddde2}
.demo-profile-save .demo-mini-button.primary{background:#431b21;color:#f4f1ed;border-color:#a13943;box-shadow:inset 0 1px #ffffff0a}
.demo-library{padding:16px 8px}
.demo-library-game{position:relative;box-sizing:border-box;min-width:0;gap:7px;padding:8px 5px;transition:color .2s}
.demo-library{min-width:0}
.demo-library-game .demo-name-placeholder{min-width:0;flex:1}
.demo-library-game::after{content:"";flex:0 0 3px;width:3px;height:3px;border-radius:50%;background:transparent}
.demo-library-game[data-custom=true]::after{background:#d66973}
.demo-game-icon{width:21px;height:28px}
@media(max-width:1000px) and (min-width:761px){
 .interface-card{padding:20px 18px}
 .demo-profile-layout{grid-template-columns:92px minmax(0,1fr)}
 .demo-profile-detail{padding-inline:12px}
 .demo-setting-row{gap:6px}
 .demo-setting-row>div:first-child>span{font-size:10px}
 .demo-profile-select>[data-demo-override],.demo-static-select{min-width:82px;font-size:9px;gap:7px}
 .demo-profile-save>span{font-size:8px}
 .demo-profile-save{padding:10px;gap:6px}
 .demo-profile-save-actions{gap:6px}
 .demo-profile-save .demo-mini-button{font-size:8px;padding:7px}
}
@media(max-width:760px){
 .interface-card{padding:22px 18px 20px;--feature-player-height:clamp(152px,50cqi,190px)}
 .interface-card>.demo-card-copy{min-height:0}
 .interface-stage{margin-top:18px}
 .demo-profile-layout{grid-template-columns:70px minmax(0,1fr);min-height:280px}
 .demo-profile-detail{padding:16px 10px 80px}
 .demo-setting-row{gap:7px;min-height:64px}
 .demo-setting-row>div:first-child>span{font-size:10px}
 .demo-profile-select>[data-demo-override],.demo-static-select{min-width:79px;font-size:9px;gap:7px;padding:7px}
 .demo-game-icon{width:18px;height:25px}
 .demo-library{padding:16px 5px}
 .demo-library-game{gap:5px;padding:8px 4px}
 .demo-inheritance-banner strong{font-size:9px}
 .demo-profile-save{left:8px;right:8px;bottom:8px;padding:10px;gap:6px;flex-wrap:wrap}
 .demo-profile-save>span{font-size:9px}
 .demo-profile-save-actions{margin-left:auto;gap:6px}
 .demo-profile-save .demo-mini-button{font-size:9px;padding:7px}
 .demo-buffer-times{font-size:7px}.demo-time-ruler{font-size:6px}.demo-video-specs{font-size:6px}
 .demo-replay-body{padding-inline:12px}
 #capture .demo-buffer{height:40px}
 .demo-video-transport{gap:8px;padding-inline:12px}
 .demo-transport-jump{font-size:7px}
 .demo-export-dialog{padding:20px}.demo-export-dialog h4{font-size:14px}.demo-export-dialog .demo-mini-button{font-size:9px}
 .interface-card .history-plot,.interface-card #history-chart{height:144px}
}
@media(prefers-reduced-motion:reduce){.demo-export-dialog,.demo-profile-save,[data-export-state=exporting] .demo-export-meter>i{animation:none}}



/* footer.css */
/* Minimal legal information shared by the landing and privacy pages. */
.site-footer{width:100%;margin:0;padding:26px 0 32px;background:none;border-top:1px solid var(--edge)}
.footer-wrap{display:flex;align-items:start;justify-content:space-between;gap:24px;color:var(--quiet)}
.footer-copyright{font-size:.6875rem;line-height:1.8;white-space:nowrap}
.footer-copyright a{color:inherit;text-decoration:underline;text-decoration-color:#ffffff30;text-underline-offset:3px}
.footer-copyright a:hover{color:var(--text);text-decoration-color:currentColor}
.footer-trademarks{font-size:.625rem;line-height:1.8;text-align:right}
@media(max-width:760px){.footer-wrap{flex-direction:column;gap:10px}.footer-trademarks{text-align:left}}

/* Landing page: separator, outline wordmark, then centered legal credits. */
.workspace-footer.appearance-footer{margin-top:128px;padding:42px 0 36px;border-top:0}
.appearance-footer .wordmark-wrap{width:min(1200px,calc(100% - 64px));padding:0}
.footer-wordmark{display:block;position:relative;padding:20px 0 0;-webkit-tap-highlight-color:transparent;outline:none;user-select:none;caret-color:transparent}
.footer-wordmark svg{display:block;width:100%;height:auto;overflow:visible;mask-image:linear-gradient(to bottom,#000 0%,#000e 35%,#0009 62%,#0003 90%,transparent 100%)}
#wordmark-outline{mask-type:alpha}
.wordmark-light{opacity:var(--wordmark-glow,0)}
.footer-wordmark:focus-visible{outline:1px solid #ffffff30;outline-offset:15px;border-radius:4px}
.footer-wordmark:focus-visible svg{filter:brightness(1.4)}
.appearance-footer .footer-legal{padding-top:30px}
.appearance-footer .footer-wrap{width:min(1200px,calc(100% - 64px));display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:#80848c}
.appearance-footer .footer-copyright{font-size:11px;line-height:1.8;letter-spacing:.035em}
.footer-brand-name{color:#c5c8cd;font-weight:500}
.appearance-footer .footer-copyright a{padding-bottom:2px;text-decoration-color:#a65d6b70;transition:color .15s,text-decoration-color .15s}
.appearance-footer .footer-copyright a:hover{color:#e9bdc5;text-decoration-color:#d58b9b}
.appearance-footer .footer-trademarks{max-width:600px;text-align:center;font-size:10px;line-height:1.85;color:#707780}
.footer-ornament{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:5px}
.footer-ornament img{display:block;width:12px;height:18px;flex:none}
.footer-ornament::before,.footer-ornament::after{content:"";width:72px;height:1px;background:linear-gradient(90deg,transparent,#6d737e70)}
.footer-ornament::after{transform:rotate(180deg)}
@media(max-width:760px){.workspace-footer.appearance-footer{margin-top:80px;padding:30px 0}.appearance-footer .wordmark-wrap,.appearance-footer .footer-wrap{width:calc(100% - 40px)}.appearance-footer .footer-legal{padding-top:25px}.appearance-footer .footer-wrap{gap:10px}.appearance-footer .footer-trademarks{font-size:9px}.footer-ornament::before,.footer-ornament::after{width:50px}}
@media(prefers-reduced-motion:reduce){.appearance-footer .footer-copyright a{transition:none}}



/* section-separators.css */
/* Page-width rules live outside the constrained content, so the scrollbar
   never turns a viewport-sized decoration into horizontal page overflow. */
.section-boundary{position:relative;display:flow-root}
.section-boundary::before{content:"";position:absolute;left:0;right:0;top:var(--section-rule-inset,0px);height:2px;background:linear-gradient(to bottom,#000 0 1px,#ffffff14 1px 2px);pointer-events:none}
/* The source section already has a leading gap. Share that offset instead
   of moving the divider or duplicating a second spacing value on the child. */
.source-section-boundary{--section-rule-inset:64px}
@media(max-width:950px){.source-section-boundary{--section-rule-inset:48px}}
@media(max-width:760px){.source-section-boundary{--section-rule-inset:40px}}
@media(forced-colors:active){.section-boundary::before{background:CanvasText;height:1px}}



/* appearance.css */
/* Local website demonstration of Redunar's Global settings UI. */

/* palette-roles.css */

/* Palette roles: accent, panel, text, muted, border; current app values. */
.appearance-workbench[data-palette="Redunar"]{--demo-accent:#e8474f;--demo-panel:#090909;--demo-text:#f2f0ed;--demo-muted:#a1a1a8;--demo-border:#303036}
.palette-redunar{background:#e8474f}
.appearance-workbench[data-palette="Glacier"]{--demo-accent:#5ec7e6;--demo-panel:#071116;--demo-text:#f5fafc;--demo-muted:#9eb8bf;--demo-border:#294047}
.palette-glacier{background:#5ec7e6}
.appearance-workbench[data-palette="Ember"]{--demo-accent:#f2a64a;--demo-panel:#120d08;--demo-text:#fff7f0;--demo-muted:#c2ad94;--demo-border:#45382b}
.palette-ember{background:#f2a64a}
.appearance-workbench[data-palette="Mint"]{--demo-accent:#73d6a1;--demo-panel:#07110c;--demo-text:#f2fff7;--demo-muted:#9cbaa8;--demo-border:#294233}
.palette-mint{background:#73d6a1}
.appearance-workbench[data-palette="Mono"]{--demo-accent:#e8e8e8;--demo-panel:#090909;--demo-text:#f7f7f7;--demo-muted:#ababab;--demo-border:#383838}
.palette-mono{background:#e8e8e8}
.appearance-workbench[data-palette="Amethyst"]{--demo-accent:#b08cff;--demo-panel:#0e0a14;--demo-text:#faf7ff;--demo-muted:#b5a8c4;--demo-border:#3d334a}
.palette-amethyst{background:#b08cff}
.appearance-workbench[data-palette="Solar"]{--demo-accent:#f2d45c;--demo-panel:#121006;--demo-text:#fffced;--demo-muted:#c2b88f;--demo-border:#474229}
.palette-solar{background:#f2d45c}
.appearance-workbench[data-palette="Rose"]{--demo-accent:#ff82ad;--demo-panel:#140910;--demo-text:#fff7fa;--demo-muted:#c4a3b0;--demo-border:#4a303b}
.palette-rose{background:#ff82ad}


.appearance-section{padding-block:80px 112px;scroll-margin-top:110px}
.appearance-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:34px}
.appearance-kicker{font:10px/1.5 Mono,monospace;letter-spacing:.14em;color:#8b8d93;margin:0 0 17px}
.appearance-intro h2{font-size:38px;font-weight:450;line-height:1.2;letter-spacing:-.035em;margin:0}
.appearance-intro p:last-child{font-size:15px;line-height:1.7;color:#a6a8ae;margin-top:17px}
.demo-motion-toggle{flex:none;border:1px solid #ffffff20;border-radius:999px;padding:10px 16px;background:transparent;font:12px NotoSans,sans-serif;color:#b8bac0;cursor:pointer}
.demo-motion-toggle:hover{background:#ffffff08;color:#fff}.demo-motion-toggle[hidden]{display:none}
.appearance-preview-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}

.appearance-workbench{--demo-accent:#e8474f;--demo-panel:#090909;--demo-text:#f2f0ed;--demo-muted:#a1a1a8;--demo-border:#303036;--demo-opacity:.85;background:#141416;border:1px solid #ffffff12;border-radius:18px;overflow:hidden;box-shadow:var(--preview-shadow);font:12px/1.5 NotoSans,Arial,sans-serif;color:#ddd;min-width:0}
.appearance-demo{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;isolation:isolate;min-width:0}
.appearance-scene{position:relative;min-height:530px;min-width:0;overflow:hidden;background:#101016}
.appearance-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;filter:brightness(.82) saturate(.8);display:block;transition:opacity .35s ease}
.appearance-overlay{position:absolute;inset:24px;pointer-events:none}
.hud-layer{position:absolute;inset:0;opacity:0;transition:opacity .25s ease}.hud-layer.is-shown{opacity:1}


.appearance-settings{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:25px 23px;background:#171719;border-left:1px solid #ffffff0b;min-width:0}
.appearance-field{min-width:0}.appearance-field-label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:#d4d4db}
.appearance-field-label>[data-selection]{font-size:10px;color:#898b95}
.appearance-playback-actions{position:relative;top:12px;display:flex;justify-content:flex-end;align-items:center;min-width:112px;min-height:36px;flex:none}
.appearance-resume{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 9px;border:0;border-radius:4px;background:transparent;color:#a6a8ae;font:11px/1.5 NotoSans,sans-serif;white-space:nowrap}
.appearance-resume svg{width:12px;height:12px;flex:none;color:#d68a97}
.appearance-resume:hover{color:#fff}
@media(max-width:760px){.appearance-playback-actions{margin-top:12px}}
.appearance-resume:focus-visible{outline:2px solid #ed8a91;outline-offset:3px}
.appearance-options{display:flex;align-items:center;gap:5px;margin-top:10px;min-width:0}
.appearance-options button{flex:1;min-width:0;border:1px solid #353535;border-radius:7px;background:#151515;color:#f4f1ed;font:11px/1.5 NotoSans,sans-serif;padding:9px 6px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.appearance-options button:not(:disabled):hover{background:#1c1c1c;border-color:#626068}
.appearance-options button[aria-pressed='true']{background:#241516;color:#f4f1ed;border-color:#74323d}
.appearance-options button:disabled{opacity:.4;cursor:not-allowed}
.appearance-options strong{font:inherit;letter-spacing:0}
.options-palette{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
.options-palette button{border-radius:50%;padding:0;border:2px solid #333;aspect-ratio:1;line-height:0;background:transparent}
.options-palette button[aria-pressed='true']{border-color:#333;background:transparent;box-shadow:0 0 0 2px #0b0b0b,0 0 0 4px var(--demo-accent)}
.palette-dot{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff18}
.appearance-control{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:35px}
.appearance-control:nth-of-type(4){margin-top:2px;padding-top:20px;border-top:1px solid #ffffff0a}
.appearance-control label{font-size:11px;color:#a8aab3;cursor:pointer}
.appearance-switch{position:relative;display:inline-flex;width:40px;height:22px;flex:none;cursor:pointer}
.appearance-switch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:1;cursor:pointer;margin:0}
.appearance-switch span{box-sizing:border-box;display:block;width:40px;height:22px;background:#131215;border:1px solid #434047;border-radius:99px}
.appearance-switch span:before{box-sizing:border-box;content:'';position:absolute;left:4px;top:4px;width:14px;height:14px;background:#131215;border:3px solid #8a858d;border-radius:50%;transition:transform .15s,background .15s}
.appearance-switch input:checked+span{background:#30171c;border-color:#7e303b}
.appearance-switch input:checked+span:before{background:#160c0f;border-color:#e7474f;transform:translateX(18px)}
.appearance-control:has([data-value='branding']:disabled){opacity:.4}
.appearance-control:has([data-value='branding']:disabled) label,.appearance-switch input:disabled{cursor:not-allowed}
.appearance-select{display:inline-block;position:relative;min-width:125px;max-width:145px;vertical-align:middle;flex-shrink:0}
.appearance-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:40px;padding:10px 12px;text-align:left;font:12px/1.5 NotoSans,sans-serif;color:#f4f1ed;background:#121212;border:1px solid #414141;border-radius:7px;cursor:pointer;transition:background .12s,border-color .12s}
.appearance-select-trigger:hover{border-color:#777}.appearance-select-trigger[aria-expanded=true]{border-color:#e7474f}
.appearance-select-trigger>svg{width:14px;height:14px;flex:none;color:#aaa;transition:transform .12s}
.appearance-select-trigger[aria-expanded=true]>svg{transform:rotate(180deg);color:#e7474f}
.appearance-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appearance-select-menu{position:absolute;z-index:100;box-sizing:border-box;max-height:300px;overflow-y:auto;overscroll-behavior:contain;padding:7px;margin:0;list-style:none;border:1px solid #494949;border-radius:8px;background:#161616;box-shadow:0 16px 35px #000b;scrollbar-width:thin;font:12px/1.5 NotoSans,sans-serif;color:#f4f1ed}
.appearance-select-option{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:46px;padding:12px 14px;border:1px solid transparent;border-radius:4px;cursor:pointer}
.appearance-select-option+.appearance-select-option{margin-top:3px}
.appearance-select-check{flex:none;color:#e7474f;visibility:hidden}
.appearance-select-option[aria-selected=true] .appearance-select-check{visibility:visible}
.appearance-range{display:flex;align-items:center;gap:12px;min-width:0;width:152px}
.appearance-range output{font:10px Mono,monospace;width:36px;text-align:right;flex:none;color:#b7b7bf}
.appearance-range input{--range-percent:50%;appearance:none;-webkit-appearance:none;display:block;min-width:0;width:104px;height:32px;min-height:32px;background:transparent;border:0;border-radius:5px;padding:0;margin:0;cursor:ew-resize;accent-color:#e7474f}
.appearance-range input::-webkit-slider-runnable-track{height:3px;border-radius:8px;background:linear-gradient(to right,#e7474f 0 var(--range-percent),#37373d var(--range-percent) 100%)}
.appearance-range input::-moz-range-track{height:3px;border-radius:8px;background:linear-gradient(to right,#e7474f 0 var(--range-percent),#37373d var(--range-percent) 100%)}
.appearance-range input::-moz-range-progress{height:3px;background:transparent}
.appearance-range input::-webkit-slider-thumb{appearance:none;box-sizing:border-box;width:14px;height:14px;margin-top:-5.5px;border-radius:50%;background:#0d0d0f;border:3px solid #e7474f;box-shadow:0 0 0 3px #0d0d0f}
.appearance-range input::-moz-range-thumb{box-sizing:border-box;width:14px;height:14px;border-radius:50%;background:#0d0d0f;border:3px solid #e7474f;box-shadow:0 0 0 3px #0d0d0f}
.appearance-range input:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px #e7474f24}
.appearance-range input:hover::-moz-range-thumb{box-shadow:0 0 0 5px #e7474f24}
.demo-cursor{position:absolute;left:0;top:0;display:block;width:23px;height:29px;z-index:101;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 4px #0008);transition:opacity .18s}
.demo-cursor>svg{width:23px;height:29px;display:block}.demo-cursor>span{position:absolute;left:18px;top:24px;font:9px/1.5 NotoSans,sans-serif;color:#fff;background:#e7474f;border-radius:3px;padding:2px 5px;white-space:nowrap}
.demo-cursor.is-visible{opacity:1}
.appearance-section button:focus-visible,.appearance-section select:focus-visible,.appearance-section input:focus-visible{outline:2px solid #ff8288;outline-offset:4px}
.appearance-preview-actions .demo-motion-toggle{margin-top:0}
@media(max-width:760px){.appearance-preview-actions{margin-top:22px;justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.appearance-scene>img{transition:none}}
.appearance-switch:has(:focus-visible){outline:2px solid #ff8288;outline-offset:4px;border-radius:99px}
@keyframes demo-press{0%{box-shadow:0 0 0 0 #ffffff30}100%{box-shadow:0 0 0 7px #ffffff00}}
/* Support, community and compatibility close the product story. */
.support-project-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative;isolation:isolate;overflow:hidden;min-width:0;padding:36px 40px;background:#171518;border:1px solid #ffffff19;border-radius:16px;scroll-margin-top:110px}
.support-project-card::before{content:'';position:absolute;top:0;left:28px;right:28px;height:1px;background:linear-gradient(90deg,transparent,#d6848a88,transparent);pointer-events:none}
.support-pattern{position:absolute;z-index:-2;inset:0;pointer-events:none;mask-image:linear-gradient(90deg,transparent 15%,#0007 60%,#000 100%)}
.support-pattern>div{position:absolute;inset:-220px;background-image:linear-gradient(#cf84910d 1px,transparent 1px),linear-gradient(90deg,#cf84910d 1px,transparent 1px);background-size:64px 64px;transform:rotate(-24deg);animation:support-grid-drift 32s linear infinite}
.support-art{position:absolute;z-index:-1;top:78px;right:-26px;width:230px;height:230px;stroke:#ce7c88;stroke-width:1;pointer-events:none;transform:rotate(-12deg);animation:support-heart-float 9s ease-in-out infinite}
.support-heart-silhouette{fill:#a5415826;stroke:#d7869299}.support-heart-facet{fill:#db798b18;stroke:none}
.support-heart-seams{stroke:#d1859355;stroke-width:.8}.support-heart-frame{stroke:#cf7b8755;stroke-width:.8}
@keyframes support-grid-drift{from{transform:rotate(-24deg) translateY(0)}to{transform:rotate(-24deg) translateY(64px)}}
@keyframes support-heart-float{0%,100%{transform:translateY(0) rotate(-12deg)}50%{transform:translateY(-7px) rotate(-9deg)}}
.support-project-card h2{font-size:38px;font-weight:450;line-height:1.16;letter-spacing:-.035em;max-width:360px;margin:0}
.support-project-description{font-size:14px;line-height:1.8;color:#b0adb5;max-width:400px;margin:20px 0 0}
.support-card-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px 22px;margin-top:28px;padding-top:26px;border-top:1px solid #ffffff12;width:100%}
.install-invitation{width:min(720px,calc(100% - 64px));text-align:center;margin-top:96px;padding:20px 0 0;scroll-margin-top:110px}
.install-invitation h2{font-size:38px;line-height:1.15;font-weight:450;letter-spacing:-.045em;margin:0}
.install-invitation h2 span{display:inline-block}
.install-invitation-description{font-size:14px;line-height:1.7;color:#b8b9c0;margin:14px auto 26px;max-width:520px}
.install-invitation .install-control{width:min(600px,100%);margin:0 auto;position:relative}
.install-invitation .hero-install{background:#0d0d0f;border:1px solid #ffffff1c;border-radius:12px}
.install-invitation .install-command-row{padding:7px 12px;gap:12px}
.install-invitation .install-command-copy code{font-size:11px;color:#dddde1;line-height:1.9}
.install-invitation .copy-icon{flex:none;width:34px;height:34px;border:0;background:transparent;border-radius:7px;color:#d8d8dd}
.install-invitation .copy-icon:hover{background:#ffffff0c;color:#fff}
.install-invitation .install-meta{position:absolute;top:100%;right:14px;padding-top:4px;font-size:11px}
.install-packages{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin:20px 0 0;padding:0;list-style:none;color:#93959f;font-size:11px;line-height:1.7}
.install-packages li{display:inline-flex;gap:7px;white-space:nowrap}
.install-packages li span{font:10px/1.9 Mono,monospace;color:#686c75}
.install-desktop-support{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;color:#85838d;font-size:11px;line-height:1.7}
.install-desktop-support svg{width:14px;height:14px;flex:none;opacity:.8}
.support-patreon-link{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 18px;min-height:44px;border:1px solid #82404a;border-radius:10px;background:#2a181d;color:#f8e8ea;font:13px/1.5 NotoSans,sans-serif;text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s}
.support-patreon-link>svg:first-child{width:20px;height:20px;color:#ea7d86;flex:none;transition:color .2s}
.support-patreon-link>.site-external-icon{width:18px;height:18px;flex:none;color:#b8bec7;margin-left:2px}
.support-patreon-link:hover{color:#fff;background:#3a2027;border-color:#bc626e}.support-patreon-link:hover svg{color:#ffb9be}
.support-patreon-link:focus-visible{outline:2px solid #ed8a91;outline-offset:4px;border-radius:10px}




@media(min-width:761px) and (max-width:1050px){.support-project-card{padding:30px}.support-project-card h2{font-size:34px}.support-art{right:-70px;width:200px;height:200px;opacity:.6}}
@media(max-width:1050px){.appearance-demo{grid-template-columns:minmax(0,1fr) 280px}.appearance-settings{padding:24px 18px}.appearance-overlay{inset:20px}}
@media(max-width:760px){.appearance-section{padding-block:46px 64px}.appearance-intro{display:block}.appearance-intro h2{font-size:31px}.demo-motion-toggle{margin-top:22px}.appearance-workbench{border-radius:15px}.appearance-demo{grid-template-columns:1fr}.appearance-scene{height:300px;min-height:0}.appearance-overlay{inset:18px}.appearance-settings{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px;border-left:0;border-top:1px solid #ffffff0b;padding:24px}.appearance-field[data-setting='palette']{grid-column:1/-1;grid-row:2}.options-palette{max-width:350px;gap:10px}.options-palette button{max-width:32px}.appearance-control:nth-of-type(4){margin:0;padding:0;border:0}.support-project-card{padding:28px 26px}.support-project-card h2{font-size:32px;max-width:320px}.support-project-description{font-size:13px;margin-block:18px 0}.support-art{top:88px;right:-92px;width:220px;height:220px;opacity:.6}.support-card-actions{margin-top:24px;gap:14px}.install-invitation{width:calc(100% - 40px);margin-top:72px;padding-top:16px}.install-invitation h2{font-size:30px;max-width:400px;margin-inline:auto}.install-invitation-description{font-size:13px;margin-block:14px 24px}.install-invitation .install-command-row{padding:8px 10px;gap:8px}.install-invitation .install-command-copy code{font-size:10px}.install-packages{gap:5px 16px;margin-top:18px;font-size:10px}.install-packages li span{font-size:9px}}
@media(max-width:480px){.appearance-settings{grid-template-columns:1fr;padding:24px 21px;gap:22px}.appearance-field[data-setting='palette']{grid-column:auto;grid-row:auto}.appearance-scene{height:280px}.appearance-overlay{inset:16px}.appearance-control:nth-of-type(4){padding-top:18px;border-top:1px solid #ffffff0a}}
@media(prefers-reduced-motion:reduce){.appearance-options button,.hud-layer,.appearance-switch span:before,.support-patreon-link,.support-patreon-link svg{transition:none}.demo-cursor{display:none}.appearance-select-trigger,.appearance-select-trigger>svg{transition:none}.is-demonstrated{animation:none}}

@media(pointer:coarse){.appearance-select-trigger,.appearance-select-option{min-height:44px}.appearance-range input{height:44px;min-height:44px}}

@media(prefers-reduced-motion:reduce){.support-pattern>div,.support-art{animation:none}}



/* racing-scenes.css */
/* Original fictional gameplay stills; live app controls remain separate. */
.demo-capture-scene>img{filter:none;object-position:center 60%}
.demo-replay-menu,.demo-moment-saved,.demo-keypress{z-index:1}



/* metallic-hero.css */
/* A full-width product stage with original Redunar glass/metal accents.
   The app layers retain their shared crop and original recording pixels. */
.hero{display:block;width:min(1200px,calc(100% - 64px));padding-block:clamp(72px,8svh,112px) 80px}
.hero-copy{display:flex;flex-direction:column;gap:24px;align-items:center;justify-content:center;min-height:240px;width:min(920px,100%);max-width:none;margin-inline:auto;text-align:center}
.hero h1{font-size:clamp(2.5rem,4.4vw,4rem);font-weight:500;letter-spacing:-.045em;line-height:1.1;margin:0}
.hero .hero-description{max-width:680px;margin:0;color:#a7adb5;font-size:18px;line-height:1.7;letter-spacing:-.01em}
.hero .product-preview{position:relative;isolation:isolate;width:100%;max-width:none;margin:clamp(128px,17svh,210px) auto 0}
/* Original website's red wash and diagonal silver/red light, behind the
   opaque preview only. Static blurred layers keep text and app pixels crisp. */
.hero .product-preview::before,.hero .product-preview::after{content:"";position:absolute;pointer-events:none;z-index:-2;mask-image:linear-gradient(transparent,#000 65px,#000 35%,transparent 60%),linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-composite:intersect}
.hero .product-preview::before{inset:-100px -70px -40px;background:radial-gradient(ellipse at 56% 45%,var(--ambient-red));filter:blur(64px)}
.hero .product-preview::after{inset:-100px -12% -48px;transform:rotate(-10deg);background:linear-gradient(108deg,#e8e9ed00 20%,#cbd4de04 32%,#e8e9ed25 43%,#eb4c5648 50%,#ef7c881c 60%,#ef7c8804 74%,#ef7c8800 86%);filter:blur(44px);opacity:.72}
/* The padding is the physical rim; gradients never cover the app itself. */
.hero .visual-stage{overflow:hidden;isolation:isolate;padding:2px;border-radius:15px;background:linear-gradient(135deg,#b5bbc277 0%,#45474c66 12%,#141416 32%,#393238 64%,#a86b7444 84%,#a2aab455 100%);box-shadow:0 0 0 1px #ffffff09,0 26px 70px -36px #0009}
/* A translated reflection sits behind the opaque app frame, exposing only
   the two-pixel rim. Reuse the recording's visibility/reduced-motion lifecycle. */
.hero .visual-stage::before{content:"";position:absolute;z-index:0;pointer-events:none;inset:0 auto 0 -50%;width:50%;background:linear-gradient(110deg,transparent 22%,#c8b5bb33 39%,#f3f5f8c9 50%,#b4beca66 58%,transparent 78%);animation:hero-rim-reflection 12s linear -4s infinite;animation-play-state:paused}
.hero .visual-stage:has(.hero-media.is-playing)::before{animation-play-state:running}
.hero .hero-media{position:relative;z-index:1;border:1px solid #000a;border-radius:12px;background:#090909;box-shadow:none}
@keyframes hero-rim-reflection{from{transform:translate3d(-10%,0,0)}to{transform:translate3d(310%,0,0)}}
.hero .product-preview figcaption{text-align:center;margin-top:18px;color:#858890}
.hero-shards{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-shard{position:absolute;object-fit:contain;max-width:none;user-select:none;animation:hero-shard-drift 14s ease-in-out infinite alternate;animation-play-state:paused}
.hero-shard-right{width:126px;height:189px;right:-72px;top:-62px;--shard-angle:12deg;opacity:.86}
.hero-shard-left{width:72px;height:102px;left:-55px;bottom:46px;--shard-angle:-20deg;animation-duration:17s;animation-delay:-8s;opacity:.7}
.product-preview:has(.hero-media.is-playing) .hero-shard{animation-play-state:running}
@keyframes hero-shard-drift{from{transform:translate3d(0,0,0) rotate(var(--shard-angle))}to{transform:translate3d(5px,-12px,0) rotate(calc(var(--shard-angle) + 3deg))}}
/* A quiet separator closes the hero before a compact installation section.
   Introductory copy and command share a row; compatibility stays by the command. */
.install-invitation{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;width:min(1150px,calc(100% - 64px));margin:0 auto;padding:32px 0 36px;border:0;border-top:1px solid #ffffff17;text-align:left}
.install-heading h2{font-size:25px;line-height:1.2;letter-spacing:-.025em;font-weight:450;margin:1px 0 10px}
.install-heading p{max-width:220px;color:#9da1a8;font-size:13px;line-height:1.7;margin:0}
.install-body{min-width:0}
.install-help{display:flex;justify-content:space-between;align-items:baseline;gap:10px 20px;flex-wrap:wrap;margin:18px 14px 0;color:#858b93;font-size:11px;line-height:1.6}
.install-help p{margin:0}.install-help a{color:#bfc4cb;text-decoration:none}.install-help a:hover{color:#fff}.install-help a span{color:#ed747c;margin-left:5px}.install-help a:focus-visible{outline:2px solid #ed8a91;outline-offset:4px}
.install-invitation .install-control{width:100%;min-width:0;margin-top:0;isolation:isolate}
.install-invitation .install-control::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-12px -12px -18px;background:radial-gradient(ellipse at 30% 44%,#e1e5ee0a,transparent 60%),radial-gradient(ellipse at 76% 54%,#e7474f0c,transparent 62%);filter:blur(20px)}
.install-methods{display:flex;align-items:center;gap:2px;padding:8px;margin:0;border:0;border-right:1px solid #ffffff0d;background:none}
.install-methods button{min-width:42px;min-height:28px;padding:4px 8px;border:1px solid transparent;border-radius:6px;background:none;color:#8f8d97;font:11px/1.5 NotoSans,sans-serif}
.install-methods button[aria-selected="true"]{background:#242427;border-color:#ffffff12;color:#eeedf1}
.install-methods button:hover{color:#fff}.install-methods button:focus-visible{outline:2px solid #ed8a91;outline-offset:2px}
/* Dark glass from the original command bar, with a sharper metal bevel. */
.install-surface{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;position:relative;isolation:isolate;overflow:hidden;padding:0;text-align:left;border:1px solid transparent;border-radius:10px;background:linear-gradient(120deg,#ffffff08,transparent 45%,#e7474f08) padding-box,linear-gradient(#17181b,#0d0e10) padding-box,linear-gradient(125deg,#c5cdd18c,#36383c 32%,#77747b 66%,#88394470 88%,#393337) border-box;box-shadow:inset 0 1px #ffffff0d,inset 0 -1px #0008,0 12px 28px -14px #000b}
.install-surface::before{content:"";position:absolute;top:0;left:8%;width:64%;height:1px;background:linear-gradient(90deg,transparent,#edf1f6b3,transparent);pointer-events:none}
.install-surface::after{content:"";position:absolute;inset:1px;border-radius:9px;z-index:-1;background:linear-gradient(115deg,transparent 35%,#ffffff05 48%,#ffffff0c 51%,transparent 65%);pointer-events:none}
.install-invitation .hero-install{position:relative;min-width:0;padding:8px 14px;background:none;border:0;border-radius:0;box-shadow:none}
.install-invitation .install-command-row{padding:0;gap:12px;min-height:34px;align-items:center}
.install-invitation .install-command-copy{min-width:0;overflow:visible;display:flex;align-items:baseline;gap:12px}
.install-invitation .install-command-copy code{font-size:12px;color:#dedce3;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.install-invitation .copy-icon{width:34px;height:34px;border:1px solid #4c484f;border-radius:8px;background:linear-gradient(#262529,#18171b);box-shadow:inset 0 1px #ffffff08;color:#d3cdd5;transition:background .2s,color .2s}
.install-invitation .copy-icon:hover{background:#ffffff10;color:#fff}
.install-invitation .copy-icon:active{background:#e7474f12}
.install-details{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px 22px;margin-top:10px;padding-inline:14px}
.install-packages{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;width:auto;margin:0;padding:0;border:0;background:none}
.install-packages li{display:inline-flex;align-items:baseline;gap:6px;padding:0;white-space:nowrap;font-size:10px;line-height:1.5}
.install-packages li span{font-size:9px;line-height:1.5;color:#777480}
.install-desktop-support{margin:0;color:#85838d;font-size:10px;white-space:nowrap}
.install-desktop-support svg{width:12px;height:12px}
.support-heart-silhouette{fill:url(#support-metal);stroke:#d8a5b299}
.support-heart-facet{fill:#e3c2cc15}
.support-heart-seams{stroke:#d9bac755}
@media(max-width:950px){.hero{width:calc(100% - 64px);padding-block:64px 64px}.hero-copy{width:100%;min-height:220px}.hero .product-preview{width:100%;margin-top:128px}.hero-shard-right{right:-40px;width:86px;height:129px;top:-42px}.hero-shard-left{left:-32px;width:52px;height:74px}.install-invitation{grid-template-columns:1fr;gap:20px;width:calc(100% - 96px)}.install-heading p{max-width:none}}
@media(max-width:760px){.hero{width:calc(100% - 40px);padding-block:40px 48px}.hero-copy{width:100%;min-height:200px;gap:20px}.hero .hero-description{max-width:430px;font-size:15px;line-height:1.7}.hero h1{font-size:clamp(1.75rem,7.6vw,2.75rem);letter-spacing:-.04em;line-height:1.15}.hero .product-preview{margin-top:72px;width:100%}.hero .product-preview::before{inset:-45px -24px -20px;filter:blur(42px)}.hero .product-preview::after{inset:-55px -20% -24px;filter:blur(34px);opacity:.6}.hero-shard-right{width:52px;height:78px;right:-20px;top:-32px;opacity:.65}.hero-shard-left{width:34px;height:48px;left:-19px;bottom:30px;opacity:.5}.hero .visual-stage{padding:1px;border-radius:10px}.hero .hero-media{border-radius:9px}.hero .product-preview figcaption{margin-top:14px;font-size:10px}.install-invitation{width:calc(100% - 40px);padding-block:26px 30px;gap:18px}.install-heading h2{font-size:23px}.install-help{margin-inline:0}.install-methods{flex-direction:column;padding:7px}.install-methods button{min-width:38px;min-height:28px;padding-inline:6px}.install-invitation .hero-install{padding:12px}.install-invitation .install-command-row{padding:0;gap:10px}.install-invitation .install-command-copy code{font-size:11px}.install-details{gap:8px 14px;margin-top:10px;padding-inline:0}.install-packages{gap:6px 14px}}
@media(prefers-reduced-motion:reduce){.hero .visual-stage::before{animation:none;opacity:0}.hero-shard{animation:none;transform:rotate(var(--shard-angle))}}




/* appearance-native.css */
/* Redunar-owned HUD rules adapted from ui/app.css; no native APIs. */
:is(.appearance-workbench,.demo-native-overlay) .appearance-hud{position:absolute;top:0;left:0;display:block;box-sizing:border-box;width:294px;min-width:294px;height:var(--demo-native-height);padding:0;border:1px solid var(--demo-border,#303036);border-left:3px solid var(--demo-accent,#e8474f);border-radius:4px;background:color-mix(in srgb,var(--demo-panel,#090909) calc(var(--demo-opacity) * 100%),transparent);color:var(--demo-text,#f2f0ed);overflow:hidden;font-family:Mono,monospace;transform:scale(calc(var(--demo-fit,1)));transform-origin:top left}:is(.appearance-workbench,.demo-native-overlay) .appearance-hud[hidden]{display:none}:is(.appearance-workbench,.demo-native-overlay) .appearance-hud[data-position='Top right']{left:auto;right:0;transform-origin:top right}:is(.appearance-workbench,.demo-native-overlay) .appearance-hud[data-position='Bottom left']{top:auto;bottom:0;transform-origin:bottom left}:is(.appearance-workbench,.demo-native-overlay) .appearance-hud[data-position='Bottom right']{top:auto;left:auto;bottom:0;right:0;transform-origin:bottom right}:is(.appearance-workbench,.demo-native-overlay) .hud-native-header{height:25px;box-sizing:border-box;padding:6px 8px;border-bottom:1px solid var(--demo-border);font:9px/1 Mono,monospace;color:var(--demo-accent);letter-spacing:1.2px}:is(.appearance-workbench,.demo-native-overlay) .hud-native-frame{position:relative;height:38px;box-sizing:border-box}:is(.appearance-workbench,.demo-native-overlay) .appearance-hud .hud-native-value{position:absolute;top:6px;height:24px;font:24px/24px Mono,monospace;font-weight:500;letter-spacing:0;color:var(--demo-text)}:is(.appearance-workbench,.demo-native-overlay) .hud-native-label{position:absolute;top:15px;height:12px;font:12px/12px Mono,monospace;color:var(--demo-muted)}:is(.appearance-workbench,.demo-native-overlay) .hud-native-fps-value{left:12px}:is(.appearance-workbench,.demo-native-overlay) .hud-native-fps-label{left:70px}:is(.appearance-workbench,.demo-native-overlay) .hud-native-frame-time-value{left:184px}:is(.appearance-workbench,.demo-native-overlay) .hud-native-frame-time-label{left:242px}:is(.appearance-workbench,.demo-native-overlay) .hud-native-row{position:relative;height:26px;box-sizing:border-box;font:12px/12px Mono,monospace;color:var(--demo-muted);white-space:nowrap;letter-spacing:0}:is(.appearance-workbench,.demo-native-overlay) .hud-native-frame+.hud-native-row,:is(.appearance-workbench,.demo-native-overlay) .hud-native-row+.hud-native-row{border-top:0}:is(.appearance-workbench,.demo-native-overlay) .hud-native-frame+.hud-native-row:before,:is(.appearance-workbench,.demo-native-overlay) .hud-native-row+.hud-native-row:before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--demo-border)}:is(.appearance-workbench,.demo-native-overlay) .hud-native-left,:is(.appearance-workbench,.demo-native-overlay) .hud-native-right{position:absolute;top:6px;height:12px;line-height:12px}:is(.appearance-workbench,.demo-native-overlay) .hud-native-left{left:8px}:is(.appearance-workbench,.demo-native-overlay) .hud-native-right{right:8px}:is(.appearance-workbench,.demo-native-overlay) .hud-fps-only{display:flex;flex-direction:row;align-items:baseline;gap:7px;height:24px;color:var(--demo-accent);font:24px/24px Mono,monospace;white-space:nowrap}:is(.appearance-workbench,.demo-native-overlay) .hud-fps-only span{font-size:24px}:is(.appearance-workbench,.demo-native-overlay) .hud-fps-only b{font:24px/24px Mono,monospace;font-weight:500}:is(.appearance-workbench,.demo-native-overlay) .appearance-hud[data-preset='FPS only']{width:116px;min-width:116px;height:24px;border:0;background:transparent;overflow:visible}:is(.appearance-workbench,.demo-native-overlay) .appearance-hud[data-preset='FPS only'] .hud-fps-only{display:flex;flex-direction:row;padding:0}:is(.appearance-workbench,.demo-native-overlay) .appearance-hud[data-layout='Ribbon']:not([data-preset='FPS only']){display:flex;width:var(--demo-ribbon-width);min-width:var(--demo-ribbon-width);height:44px}:is(.appearance-workbench,.demo-native-overlay) .appearance-hud .hud-layout-brand{display:flex;flex-direction:row;align-self:stretch;align-items:center;justify-content:flex-start;width:94px;height:100%;padding:0 10px;color:var(--demo-accent);font-size:9px;line-height:1;letter-spacing:1px}:is(.appearance-workbench,.demo-native-overlay) .hud-ribbon-metric{display:flex;flex-direction:column;justify-content:center;width:89px;padding:0 8px;border-left:1px solid var(--demo-border);white-space:nowrap}:is(.appearance-workbench,.demo-native-overlay) .hud-ribbon-metric small{color:var(--demo-muted);font-size:7px}:is(.appearance-workbench,.demo-native-overlay) .hud-ribbon-metric b{margin-top:4px;color:var(--demo-text);font-size:10px;font-weight:500}:is(.appearance-workbench,.demo-native-overlay) .appearance-hud[data-layout='Telemetry']:not([data-preset='FPS only']){width:300px;min-width:300px;height:auto}:is(.appearance-workbench,.demo-native-overlay) .appearance-hud .hud-telemetry-head,:is(.appearance-workbench,.demo-native-overlay) .appearance-hud .hud-telemetry-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between}:is(.appearance-workbench,.demo-native-overlay) .hud-telemetry-head{height:25px;padding:0 8px;border-bottom:1px solid var(--demo-border);color:var(--demo-accent);font-size:9px;letter-spacing:1px}:is(.appearance-workbench,.demo-native-overlay) .hud-telemetry-head small{color:var(--demo-muted);font-size:7px}:is(.appearance-workbench,.demo-native-overlay) .hud-telemetry-row{height:24px;padding:0 8px;border-bottom:1px solid color-mix(in srgb,var(--demo-border) 60%,transparent);font-size:9px}:is(.appearance-workbench,.demo-native-overlay) .hud-telemetry-row:last-child{border-bottom:0}:is(.appearance-workbench,.demo-native-overlay) .hud-telemetry-row span{color:var(--demo-muted)}:is(.appearance-workbench,.demo-native-overlay) .hud-telemetry-row b{color:var(--demo-text);font-weight:500}:is(.appearance-workbench,.demo-native-overlay) .appearance-hud b{letter-spacing:0}
/* FPS only has no panel; its enabled opacity control fades the text instead. */
.appearance-workbench .appearance-hud[data-preset='FPS only'] .hud-fps-only{opacity:var(--demo-opacity)}



/* source-preview.css */
/* Repository excerpt styled as a quiet workspace. */
.source-section{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);align-items:center;gap:64px;position:relative;margin-top:var(--section-rule-inset,64px);padding-block:64px 48px}
.source-eyebrow{font-size:12px;color:#b48b94;margin-bottom:16px}
.source-intro h2{font-size:32px;font-weight:450;letter-spacing:-.035em;line-height:1.2}
.source-intro>p:not(.source-eyebrow){max-width:390px;font-size:14px;line-height:1.8;color:#9d9ca5;margin-top:18px}
.source-intro>p.source-community-note{max-width:390px;margin-top:12px;color:#87909c;font-size:12px;line-height:1.75}
.source-repository{display:inline-flex;align-items:center;gap:12px;margin-top:23px;padding:10px 16px;min-height:40px;border:1px solid #b9c4d321;border-radius:9px;background:#ffffff03;color:#c4cbd4;font-size:12px;line-height:1.5;box-shadow:none}
.source-repository:hover{color:#fff;border-color:#e7474f99;background:#e7474f15}
.source-showcase{margin:0;min-width:0;position:relative;width:100%;max-width:680px;justify-self:end}
.source-window{min-width:0;border:1px solid #ffffff1a;border-radius:13px;overflow:hidden;background:#0c0e10;box-shadow:0 16px 38px -24px #000a,inset 0 1px #ffffff07}
.source-editor{margin-left:0}
.source-window-head{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:38px;padding:8px 14px;border-bottom:1px solid #ffffff0a;background:#14171b;font:10px/1.5 NotoSans,sans-serif;color:#b9bec7}
.source-file{display:flex;align-items:center;gap:9px}.source-file svg{width:15px;height:15px;color:#c47986}
.source-editor-meta{color:#737e8b;font-size:9px}
.source-editor-body{display:grid;grid-template-columns:123px minmax(0,1fr)}
.source-explorer{display:flex;flex-direction:column;padding:15px 0;background:#101215;border-right:1px solid #ffffff08;font:9px/1.8 NotoSans,sans-serif;color:#969fa9;overflow:hidden}
.source-explorer>span{display:block;white-space:nowrap;padding-block:2px}
.source-explorer-label{font-size:8px;letter-spacing:.12em;padding:0 12px 13px!important;color:#737e8b}
.source-tree-root{padding-left:12px}.source-tree-folder{padding-left:18px}.source-tree-package{padding-left:24px}.source-tree-src{padding-left:30px}
.source-tree-file{padding-left:39px}.source-tree-file b,.source-editor-tab b{font:8px/1.8 Mono,monospace;color:#cc8c99;margin-right:5px}
.source-tree-file.is-current{background:#9c455128;color:#e8c7ce;box-shadow:inset 2px 0 #b95c6a}
.source-tree-manifest{padding-left:27px;color:#7c8591}
.source-code-pane{min-width:0;background:#0c0e10}
.source-editor-tabs{display:flex;align-items:stretch;min-height:31px;background:#111318;font:9px/1.6 NotoSans,sans-serif;color:#757f8a}
.source-editor-tab{display:flex;align-items:center;padding:8px 13px;border-right:1px solid #ffffff05;border-top:1px solid transparent}
.source-editor-tab.is-current{border-top-color:#c27483;color:#d6dbe1;background:#0c0e10}
.source-breadcrumb{padding:9px 13px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:8px/1.6 NotoSans,sans-serif;color:#76808d}
.source-breadcrumb span{padding-inline:4px;color:#5e6571}
.source-editor .source-pre{margin:0;padding:14px 12px 23px;overflow:auto;font:10px/1.9 Mono,monospace;color:#c0c6cf;scrollbar-width:thin;scrollbar-color:#3b3f46 transparent}
.source-pre code{display:grid;font:inherit;white-space:normal;min-width:fit-content}
.source-line{display:grid;grid-template-columns:27px minmax(0,1fr);min-width:0}
.source-number{color:#505b68;user-select:none;font-size:9px;line-height:2.1112}
.source-text{display:block;white-space:pre;min-width:0}
.source-keyword{color:#d797a6}.source-type{color:#b4c5d0}.source-function{color:#e5d5cf}.source-number+.source-text .source-number{color:#b7a8c9;font:inherit;user-select:auto}
.source-editor-status{display:flex;justify-content:space-between;gap:10px;padding:5px 12px;background:#6e303d30;border-top:1px solid #a4586b1c;font:8px/1.5 NotoSans,sans-serif;color:#ab8f97}
.source-editor-status i{font-style:normal;padding-inline:7px;color:#715560}
.source-text.source-edited{display:grid}
.source-edit-reserve,.source-edit-live{grid-area:1/1;min-width:0;white-space:pre}
/* Complete accessible copies reserve geometry throughout the visual animation. */
.source-edit-reserve{opacity:0;pointer-events:none;user-select:none}
.source-caret{display:inline-block;vertical-align:-.12em;width:1px;height:1.05em;margin-left:2px;background:#d797a6}
.source-showcase.code-running .source-caret{animation:source-caret-blink 1.1s step-end infinite}
@keyframes source-caret-blink{0%,45%,100%{opacity:1}46%,99%{opacity:0}}
@media(max-width:950px){.source-section{grid-template-columns:1fr;gap:35px;padding-top:48px}.source-intro>p:not(.source-eyebrow){max-width:500px}.source-showcase{width:100%;max-width:680px;justify-self:center}.source-editor .source-pre{font-size:10px}}
@media(max-width:760px){.source-section{width:calc(100% - 40px);padding-block:40px 28px}.source-intro h2{font-size:28px}.source-editor{margin-left:0}.source-window-head{padding-inline:11px}.source-editor-body{grid-template-columns:88px minmax(0,1fr)}.source-explorer{font-size:8px}.source-explorer-label{font-size:7px;padding-inline:8px!important}.source-tree-root{padding-left:8px}.source-tree-folder{padding-left:12px}.source-tree-package{padding-left:16px}.source-tree-src{padding-left:20px}.source-tree-file{padding-left:24px}.source-tree-manifest{padding-left:16px}.source-editor-tabs{font-size:8px}.source-editor-tab{padding:7px 9px}.source-breadcrumb{padding-left:9px;font-size:7px}.source-editor .source-pre{font-size:9px;padding:12px 9px 20px}.source-line{grid-template-columns:23px minmax(0,1fr)}.source-number{font-size:8px;line-height:2.1375}.source-editor-meta{font-size:8px}}
@media(prefers-reduced-motion:reduce){.source-caret{display:none}}



/* requirements-panel.css */
/* Both views share one grid cell and contribute their natural height, so
   switching content never resizes this card or its community neighbour. */
.compatibility-views{display:grid;min-width:0}
.compatibility-view{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity 240ms ease,transform 240ms ease,visibility 0s 240ms;pointer-events:none}
.compatibility-view.is-current{opacity:1;visibility:visible;transform:none;transition-delay:0s;pointer-events:auto}
.requirements-trigger{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:17px 0;border:0;background:none;color:#c6c8cd;font:12px/1.5 NotoSans,sans-serif;text-align:left;cursor:pointer}
.requirements-direction{width:20px;height:20px;flex:none;color:#d6d8dc}
.requirements-back .requirements-direction{transform:rotate(180deg)}
.requirements-trigger:hover,.requirements-back:hover{color:#fff}
.requirements-trigger:focus-visible,.requirements-back:focus-visible{outline:2px solid #ed8a91;outline-offset:4px;border-radius:4px}
.requirements-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.requirements-panel-heading h2{font-size:21px;font-weight:450;letter-spacing:-.025em;line-height:1.25}
.requirements-back{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0;border:0;background:none;color:#aaa5af;font:11px/1.5 NotoSans,sans-serif;cursor:pointer;white-space:nowrap}
#requirements-panel .requirements-body{padding:0;font-size:12px;line-height:1.8;color:#a5a8ae}
#requirements-panel .requirements-body p+p{margin-top:12px}
#requirements-panel .requirements-body a{margin-top:18px;color:#c4c6cc;font-size:11px}
@media(max-width:480px){.requirements-panel-heading h2{font-size:19px}}
@media(prefers-reduced-motion:reduce){.compatibility-view{transition:none;transform:none}}



/* community-cards.css */
/* Featured support above community and compatibility; keep their approved order. */
.connect-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:80px}
/* Clip artwork without creating a scroll container when panel focus moves. */
.connect-card{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:300px;overflow:clip;padding:30px 32px;border:1px solid #343239;border-radius:18px;background:#121214;transition:border-color 120ms ease-out}
.connect-copy,.connect-actions,.connect-compat .compatibility-views{position:relative;z-index:2}
.connect-copy{max-width:350px}
.connect-card h2{font-size:27px;font-weight:500;line-height:1.25;letter-spacing:-.045em;text-wrap:pretty}
.connect-copy>p{margin-top:10px;color:#b0aeb8;font-size:14px;line-height:1.65;text-wrap:pretty}
.connect-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:auto;padding-top:24px}
.connect-cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:10px 15px;border:1px solid transparent;border-radius:9px;color:white;font:650 12px/1.5 NotoSans,sans-serif;white-space:nowrap;cursor:pointer;transition:background-color 120ms ease-out,color 120ms ease-out,border-color 120ms ease-out}
.connect-cta svg{flex:none;width:16px;height:16px;color:inherit;transition:transform 120ms ease-out}
.connect-cta img{flex:none;width:22px;height:19px;object-fit:contain}
.connect-cta:is(:hover,:focus-visible) svg{transform:translate(1px,-1px)}
.connect-cta:focus-visible{outline:2px solid #a7b0ff;outline-offset:5px}
.connect-card:focus-within{border-color:#64616b}
@media(hover:hover){.connect-card:hover{border-color:#59545f}}
/* Static texture stays on the illustration side, away from reading and actions. */
.connect-card::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background-repeat:repeat;mask-image:linear-gradient(90deg,transparent 30%,#000 65%,#000 78%,transparent 100%),linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask-composite:intersect}
.connect-support::before{background-image:url('assets/brand/kofi-symbol.svg');background-size:88px 70.84px;background-position:26px 16px;opacity:.025}
.connect-community::before{background-image:url('assets/brand/discord-symbol-white.svg');background-size:76px 57px;background-position:22px 12px;opacity:.03}
.connect-compat::before{background-image:linear-gradient(#b2b6c8 1px,transparent 1px),linear-gradient(90deg,#b2b6c8 1px,transparent 1px);background-size:28px 28px;background-position:14px 14px;opacity:.035}

/* One continuous burgundy surface; the cup keeps its original brand artwork. */
.connect-support{grid-column:1/-1;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;min-height:320px;padding:36px 48px;background:linear-gradient(110deg,#1b1417 25%,#24191f 100%);border-color:#45333b}
.connect-support .connect-copy{max-width:none}
.connect-support h2{font-size:44px;line-height:1.12;font-weight:500;margin:0 0 17px}
.connect-support h2 span{color:#e5a1a8}
.connect-support .connect-copy>p{max-width:340px;margin-top:0}
.connect-support .connect-actions{margin-top:0;padding-top:25px}
.connect-support .connect-copy>.connect-support-note{margin-top:18px;font-size:12px;color:#b9a4ac}
.connect-kofi-action{background:#b9434b}
.connect-kofi-action:is(:hover,:focus-visible){background:#c34b54}
.connect-kofi-action:focus-visible{outline-color:#f0a2a9}
.connect-kofi-action img{width:24px;height:20px}
.connect-support-art{position:relative;z-index:1;display:grid;place-items:center;min-width:0;pointer-events:none}
.connect-kofi-art{display:grid;place-items:center;width:200px;height:200px}
.connect-kofi-art img{width:160px;height:auto}

.connect-community{background:#12121a;border-color:#34343e}
/* Reserve the same right-hand illustration space in both small cards. */
.connect-community .connect-copy,.connect-compat .connect-copy{max-width:calc(100% - 132px)}
.connect-community .connect-copy>p,.connect-compat .connect-copy>p{max-width:255px}
.connect-topics,.connect-platforms{display:grid;gap:8px;list-style:none;padding:0;margin:20px 0 0;color:#bcb9c4;font-size:13px;line-height:1.5}
.connect-topics li{display:flex;align-items:baseline;gap:10px}
.connect-topics li::before{content:"#";color:#8788a9;font:12px/1.5 NotoSans,sans-serif}
.connect-platforms{gap:5px;margin-top:18px;color:#d0cbd4;font-size:12px}
.connect-platforms li{padding-left:12px;border-left:2px solid #65515b}
.connect-discord-action{background:#5865f2}
.connect-discord-action:is(:hover,:focus-visible){background:#6571f5}
.connect-discord-art{position:absolute;z-index:1;width:108px;height:auto;right:32px;top:50%;transform:translateY(-50%);pointer-events:none}
.connect-gpu-art{position:absolute;z-index:1;width:152px;height:105px;right:20px;top:50%;fill:none;stroke:#a2a9b8;stroke-width:1.5;opacity:.65;transform:translateY(-50%) rotate(-10deg);pointer-events:none}
.connect-gpu-art .accent{stroke:#b17884}
.connect-compat .connect-compat-action{background:#17171b;border-color:#444249;color:#dedce3;font-weight:500}
.connect-compat-action:is(:hover,:focus-visible){background:#222126;border-color:#747079;color:#fff}

/* Both panels participate in grid sizing, so switching never changes card height. */
.connect-compat .compatibility-views{width:100%;flex:1}
.connect-compat .compatibility-view{display:flex;flex-direction:column;align-items:flex-start}
.connect-compat .requirements-panel-heading{width:100%;gap:12px;margin-bottom:16px}
.connect-compat .requirements-panel-heading h2{font-size:21px;letter-spacing:-.025em}
.connect-compat .requirements-back{min-height:44px;font-size:12px}
.connect-compat #requirements-panel .requirements-body{max-width:none;font-size:14px;line-height:1.55;color:#b8b5bf}
.requirements-facts{display:grid;gap:12px;margin:0}
.requirements-facts>div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px}
.requirements-facts dt{font-size:12px;font-weight:500;color:#e0dce3;line-height:1.8}
.requirements-facts dd{margin:0}
.connect-compat #requirements-panel .requirements-body a{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:12px;font-size:13px}
.connect-compat .requirements-body a svg{width:15px;height:15px;transition:transform 120ms ease-out,color 120ms ease-out}
.connect-compat .requirements-body a:is(:hover,:focus-visible) svg{transform:translate(1px,-1px);color:#f18b96}
.connect-compat:has([data-compatibility-view="requirements"].is-current) .connect-gpu-art{visibility:hidden}

@media(max-width:1050px) and (min-width:761px){
 .connect-card{padding:26px;min-height:330px}
 .connect-support{min-height:300px;padding:32px}
 .connect-support h2{font-size:40px}
 .connect-card:not(.connect-support) h2{font-size:25px}
 .connect-community .connect-copy,.connect-compat .connect-copy{max-width:calc(100% - 88px)}
 .connect-discord-art{width:65px;right:22px}
 .connect-gpu-art{width:92px;right:12px}
 .requirements-facts>div{grid-template-columns:1fr;gap:3px}
}
@media(max-width:760px){
 .connect-grid{grid-template-columns:1fr;gap:14px;margin-top:50px}
 .connect-card{padding:26px;min-height:240px}
 .connect-support{grid-template-columns:minmax(0,1fr) 100px;gap:12px;min-height:290px}
 .connect-support h2{font-size:clamp(30px,6vw,40px)}
 .connect-support .connect-copy>p{font-size:14px}
 .connect-kofi-art{width:100px;height:100px}
 .connect-kofi-art img{width:88px}
 .connect-community .connect-copy,.connect-compat .connect-copy{max-width:calc(100% - 92px)}
 .connect-discord-art{width:68px;right:24px}
 .connect-gpu-art{width:100px;right:15px}
 .connect-compat .requirements-panel-heading h2{font-size:21px}
 /* Let the expanded information use natural height on narrow screens. */
 .connect-compat .compatibility-view:not(.is-current){display:none}
 .requirements-facts>div{grid-template-columns:1fr;gap:3px}
 .connect-compat #requirements-panel .requirements-body a{font-size:14px}
}
@media(max-width:400px){
 .connect-support{grid-template-columns:minmax(0,1fr) 64px;gap:8px}
 .connect-kofi-art{width:64px;height:80px}
 .connect-kofi-art img{width:64px}
 .connect-card h2{font-size:25px}
 .connect-support h2{font-size:32px}
 .connect-community .connect-copy,.connect-compat .connect-copy{max-width:calc(100% - 75px)}
 .connect-discord-art{width:54px;right:20px}
 .connect-gpu-art{width:80px;right:12px}
}
@media(prefers-reduced-motion:reduce){.connect-card,.connect-cta,.connect-cta svg,.connect-compat .requirements-body a svg{transition:none}.connect-cta:is(:hover,:focus-visible) svg,.connect-compat .requirements-body a:is(:hover,:focus-visible) svg{transform:none}}
@media(forced-colors:active){.connect-card,.connect-cta{border:1px solid CanvasText}.connect-card::before,.connect-discord-art,.connect-support-art,.connect-gpu-art{display:none}}



/* Decoration, motion and final preview refinements. */

/* metallic-details.css */
/* Long, same-hue alpha tails avoid abrupt rings and dark transparent fringes.
   These are static light fields: no noise layer or additional animation. */
:root{--preview-metal-border:linear-gradient(125deg,#e2e8f36b,#35373e50 28%,#c8cfd73b 52%,#e7474f59 82%,#ffffff16);--ambient-red:#ed41502c 0%,#ed415022 18%,#ed415014 42%,#ed415009 64%,#ed415002 84%,#ed415000 100%;--ambient-silver:#e3eaf425 0%,#e3eaf41b 18%,#e3eaf411 42%,#e3eaf407 64%,#e3eaf402 84%,#e3eaf400 100%}
/* Original Redunar red/white emphasis, with metal kept on presentation frames.
   Static gradients leave the app UI, game canvas and syntax colors untouched. */
.brand-accent{color:#f0f0f2}
.appearance-workbench{border-color:transparent;background:linear-gradient(#141416,#141416) padding-box,var(--preview-metal-border) border-box;box-shadow:inset 0 1px 0 #ffffff0b,var(--preview-shadow)}
.appearance-section{position:relative;isolation:isolate}
.appearance-section::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:82px;right:3%;width:58%;height:210px;background:radial-gradient(ellipse at 64% 48%,var(--ambient-red)),radial-gradient(ellipse at 34% 32%,var(--ambient-silver));filter:blur(52px)}
.source-window{border-color:transparent;background:linear-gradient(#0c0c0e,#0c0c0e) padding-box,linear-gradient(125deg,#e0e5ed5c,#68707921 35%,#e7474f4d 78%,#ffffff1a) border-box;box-shadow:inset 0 1px 0 #ffffff08,0 14px 48px #0003}
.source-window-head{background:linear-gradient(115deg,#dce4ef12,transparent 42%,#e7474f0b 83%,#ffffff03)}
.support-project-card{background:radial-gradient(ellipse at 82% 48%,#e1c7d11a,transparent 38%),radial-gradient(ellipse at 90% 65%,#bd4d6217,transparent 45%),#151416;border-color:#d8a5b22b}
.support-project-card::before{left:0;right:0;background:linear-gradient(90deg,transparent,#eef2fa77 22%,#c6778799 66%,transparent)}
@media(max-width:760px){.appearance-section::before{right:0;top:110px;width:90%;height:180px;filter:blur(38px)}}
@media(forced-colors:active){.brand-accent{color:CanvasText}.appearance-workbench,.source-window,.install-surface{border-color:CanvasText}}

/* A compact invitation; neighbouring information gets its own balanced row. */
.workspace-setup{grid-template-columns:minmax(0,1fr)}
.workspace-aside{grid-template-columns:1fr 1fr;align-items:stretch;margin-top:0}
.support-project-card{padding:44px 48px;min-height:320px;overflow:clip}
.support-message{position:relative;z-index:1;width:58%;max-width:540px}
.support-project-card h2{font-size:38px;max-width:none;line-height:1.16}
.support-project-description{max-width:440px;margin-top:16px}
.support-card-actions{margin-top:24px;padding-top:0;border-top:0}
.support-art{top:50%;right:8%;width:210px;height:210px;opacity:.9;translate:0 -50%}
.support-heart-frame{display:none}
.support-pattern{opacity:.5;mask-image:radial-gradient(ellipse at 85% 50%,#000,transparent 70%)}
@media(min-width:761px) and (max-width:1050px){.support-project-card{padding:36px;min-height:300px}.support-project-card h2{font-size:34px}.support-art{right:5%;width:190px;height:190px;opacity:.85}}
@media(max-width:760px){.workspace-aside{grid-template-columns:1fr;margin-top:32px}.support-project-card{padding:30px 26px;min-height:0}.support-message{width:100%;max-width:none}.support-project-card h2{font-size:30px;max-width:260px}.support-project-description{max-width:360px}.support-art{top:22px;right:12px;width:105px;height:105px;opacity:.48;translate:none}.support-card-actions{margin-top:22px;padding-top:0}.support-pattern{opacity:.35}}
@media(max-width:420px){.support-project-card h2{font-size:27px;max-width:none}.support-art{top:14px;right:-4px;width:76px;height:76px;opacity:.32}}

/* Charcoal and neutral metal; red stays on the single support action. */
.hero h1{color:#f0f0f2}
.support-project-card{background:radial-gradient(ellipse at 82% 44%,#d6dfed0c,transparent 48%),#111214;border-color:#b8c0cf26}
.support-project-card::before{background:linear-gradient(90deg,transparent,#dbe2ee50 30%,#dbe2ee15 75%,transparent)}
.support-art{stroke:#a9b0bc}
.support-heart-silhouette{fill:url(#support-metal);stroke:#c3cad76b}
.support-heart-facet{fill:#c9d2e80c}
.support-heart-seams{stroke:#c5cedb38}
.support-pattern{opacity:.75;mask-image:linear-gradient(90deg,transparent 20%,#000 70%)}
.support-pattern>div{background:none;background-size:240px 180px;animation:support-shard-drift 64s linear infinite;will-change:transform}
@keyframes support-shard-drift{from{transform:rotate(-16deg) translateY(0)}to{transform:rotate(-16deg) translateY(180px)}}
.support-patreon-link{background:linear-gradient(115deg,#ffffff0b,transparent 55%),#1d1f22;border-color:#e7474f70;color:#f1f2f4;box-shadow:inset 0 1px #ffffff12}
.support-patreon-link>svg:first-child{color:#ff8c95;fill:transparent;transition:color .2s,fill .2s}
.support-patreon-link:hover>svg:first-child,.support-patreon-link:focus-visible>svg:first-child{fill:currentColor}
.support-patreon-link:hover{background:#e7474f15;border-color:#e7474f}
.community-actions{display:grid;gap:0;margin-top:28px}
.community-actions .community-destination{display:flex;gap:14px;padding:16px 0;border-top:1px solid #ffffff12;color:#d5d7dc;text-decoration:none;min-width:0}
.community-destination>svg:not(.site-external-icon){flex:none;width:20px;height:20px;color:#ed747c}
.community-destination>span{flex:1;min-width:0}
.community-destination strong{display:block;font-size:13px;font-weight:500;line-height:1.4}
.community-destination small{display:block;color:#8f949e;font-size:11px;line-height:1.6;margin-top:5px}
.site-external-icon{width:18px;height:18px;flex:none;color:#b8bec7}
.community-destination>.site-external-icon{margin-left:auto;align-self:center}
.community-destination:hover strong{color:#fff}.community-destination:hover>.site-external-icon{color:#ef7d86}
.community-destination:focus-visible{outline:2px solid #ef7d86;outline-offset:5px;border-radius:3px}
@media(max-width:760px){.support-pattern{opacity:.5}.community-actions{margin-top:24px}.community-actions .community-destination{padding-block:15px}}
@media(prefers-reduced-motion:reduce){.support-pattern>div{animation:none;will-change:auto}}

@media(prefers-reduced-motion:reduce){.support-patreon-link svg{transition:none}}

/* Neutral glass and silver edges tie the supporting sections to the hero rim.
   Static highlights avoid extra blur/compositing work inside the live demos. */
.interface-card{background:linear-gradient(135deg,#dce3ed0d,transparent 45%),#141618;box-shadow:inset 0 1px #dbe3ed2b,inset 0 0 0 1px #cbd3df12}
.community-section,.gpu-support{position:relative;overflow:hidden;border-color:#b8c0cf26;background:linear-gradient(125deg,#dce3ed09,transparent 60%) padding-box,linear-gradient(#111315,#0d0f11) padding-box;box-shadow:none}
/* The support trio shares the same quiet silver perimeter and top hairline. */
.community-section::before,.gpu-support::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#dbe2ee50 30%,#dbe2ee15 75%,transparent);pointer-events:none}
.appearance-settings{background:linear-gradient(135deg,#dce3ed0b,transparent 60%),#151719}
.source-eyebrow,.source-file svg{color:#ed747c}
.source-repository>.site-external-icon{color:#b8bec7}
.comparison-scroll{border-color:transparent;background:linear-gradient(#101214,#0c0e10) padding-box,linear-gradient(120deg,#d7e0ea42,#7c879221 45%,#e7474f33) border-box;box-shadow:inset 0 1px #ffffff08}
.comparison-table thead{background:linear-gradient(110deg,#dbe2ec0b,transparent 70%)}
.comparison-featured{background:#e7474f08}
.comparison-featured th{box-shadow:inset 2px 0 #e7474f}
@media(forced-colors:active){.community-section,.gpu-support,.comparison-scroll{border-color:CanvasText}}

/* Quiet graphite controls leave the actual overlay and rail motion legible. */
.appearance-workbench{border-radius:12px}
.appearance-settings{background:linear-gradient(135deg,#dce3ed08,transparent 65%),#121517;gap:17px}
.appearance-options:not(.options-palette) button{border-radius:4px;background:#16191c;border-color:#34393e}
.appearance-options:not(.options-palette) button[aria-pressed="true"]{background:#e7474f10;border-color:#aa454b;box-shadow:inset 0 -1px #e7474f66}

/* Headings share one white tone; red remains on actions and scene lighting. */
.support-project-card h2 span{color:inherit}



/* landing-motion.css */
/* One quiet hero introduction per page load.
   Animate whole lines so the headline reads as a sentence, not separate words. */
@keyframes landing-copy-in{from{opacity:0;transform:translate3d(0,16px,0);filter:blur(2px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes landing-surface-in{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes landing-atmosphere-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
 .landing-enter .hero-title-line{animation:landing-copy-in 1s cubic-bezier(.16,1,.3,1) .08s backwards}
 .landing-enter .hero-title-line+.hero-title-line{animation-delay:.22s}
 .landing-enter .hero-description{animation:landing-copy-in .9s cubic-bezier(.16,1,.3,1) .34s backwards}
 /* Ancestor opacity creates a temporary backdrop root and makes the glass
    change brightness when it disappears. Keep the surface stable; reveal its
    contents inside the blur instead. The click-triggered light is independent. */
 .landing-enter .hero :is(.install-methods,.install-command-row,.install-details,.install-help){animation:landing-surface-in 1s cubic-bezier(.16,1,.3,1) .46s backwards}
 .landing-enter .hero .product-preview{animation:landing-surface-in 1.2s cubic-bezier(.16,1,.3,1) .6s backwards}
 .landing-enter .hero-atmosphere{animation:landing-atmosphere-in 1.8s ease-out backwards}
 .landing-enter .topbar .nav-inner{animation:landing-atmosphere-in .8s ease-out backwards}
 .text-reveal-pending{opacity:0}
}
/* Text stays readable without JS, during printing, and when motion is reduced. */
@media(prefers-reduced-motion:reduce){.text-reveal-pending{opacity:1!important;transform:none!important}}
@media print{.text-reveal-pending{opacity:1!important;transform:none!important}}
@media print{.landing-enter *{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}}



/* pixel-replay.css */
/* Approved cave and winter scenery share a 384 × 256 logical pixel grid.
   Canvas and fallback images use identical cover cropping; UI stays above both. */
.pixel-replay-scene>img,.winter-metrics-scene>img{object-position:center;image-rendering:pixelated;filter:none}
.pixel-game-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;image-rendering:pixelated;pointer-events:none;visibility:hidden}
.pixel-scene-ready>.pixel-game-canvas{visibility:visible}
.pixel-scene-ready>img{opacity:0}
.winter-metrics-scene>.appearance-overlay{z-index:1}
.pixel-replay-scene>:is(.demo-replay-menu,.demo-moment-saved,.demo-keypress){z-index:1}

/* Match both game scenes without dimming their independent interface overlays. */
:is(.pixel-replay-scene,.winter-metrics-scene)>:is(img,.pixel-game-canvas){filter:brightness(.74)}

/* Match the unlit room while the lazy canvas is preparing. */
.winter-metrics-scene>img{filter:brightness(.34)}

/* Approximate the cave ambient while its lit canvas is preparing. */
.pixel-replay-scene>img{filter:brightness(.34)}



/* preview-refinements.css */
/* The installer occupies the breathing room between the hero copy and app. */
.hero{position:relative;isolation:isolate}
/* Fine fixed mesh reveals the original Redunar facets moving behind it.
   Separate horizontal/vertical masks soften every edge, including the corners. */
.hero-atmosphere{position:absolute;z-index:-1;top:-70px;left:50%;width:100vw;height:960px;transform:translateX(-50%);overflow:hidden;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(transparent,#000 16%,#000 70%,transparent);mask-composite:intersect;contain:paint}
/* Both surfaces share the fine mesh, moving shapes, and visibility lifecycle.
   Only the silhouette tile and its scale differ in the support card. */
.hero-atmosphere,.support-pattern{--flow-image:url('assets/sculpture/hero-shard-flow.svg');--flow-width:1200px;--flow-height:900px}
.support-project-card{background:#0d0f12}
.support-pattern{--flow-image:url('assets/sculpture/support-heart-flow.svg');--flow-width:600px;--flow-height:450px;opacity:.95;overflow:hidden;contain:paint;mask-image:linear-gradient(90deg,transparent 12%,#000 48%,#000 86%,transparent),linear-gradient(transparent,#000 18%,#000 78%,transparent);mask-composite:intersect}
.support-pattern>div{inset:0;background:none;transform:none;animation:none;will-change:auto}
:is(.hero-grid-field,.support-heart-grid){position:absolute;inset:0;background:#aab4c00c;mask-image:url('assets/sculpture/hero-fine-grid.svg');mask-repeat:repeat;mask-size:6px 4px}
:is(.hero-grid-field,.support-heart-grid)::before,
:is(.hero-grid-field,.support-heart-grid)::after{content:"";position:absolute;inset:0 0 calc(-1 * var(--flow-height)) calc(-1 * var(--flow-width));background-image:var(--flow-image);background-repeat:repeat;background-size:var(--flow-width) var(--flow-height);filter:blur(9px);animation:hero-shard-flow 32s linear infinite;animation-play-state:paused;opacity:.78}
:is(.hero-grid-field,.support-heart-grid)::after{background-position:calc(var(--flow-width) / 2) calc(var(--flow-height) / 2);animation-duration:49s;filter:blur(22px);opacity:.24}
/* Small hearts stay crisp enough to read through the mesh, without a glow. */
.support-heart-grid::before{filter:blur(.4px);opacity:.9}
.support-heart-grid::after{filter:blur(1px);opacity:.3}
.hero-atmosphere::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 29%,#0a0a0ab3,transparent 64%)}
:is(.hero-atmosphere,.support-pattern).is-animating :is(.hero-grid-field,.support-heart-grid)::before,
:is(.hero-atmosphere,.support-pattern).is-animating :is(.hero-grid-field,.support-heart-grid)::after{animation-play-state:running}
@keyframes hero-shard-flow{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--flow-width),calc(-1 * var(--flow-height)),0)}}
.hero .install-invitation{display:block;width:min(740px,100%);margin:42px auto 0;padding:0;border:0;scroll-margin-top:110px}
.hero .product-preview{margin-top:76px}
.hero .install-surface{border:1px solid #b9c4d343;background:linear-gradient(120deg,#cbd9ec09,transparent 48%,#e7474f06),#11131680;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px #edf3ff12,inset 0 -1px #0008,0 8px 28px #0003}
.hero .install-surface::before,.hero .install-surface::after{content:none}
.hero .install-control::before{inset:-24px -40px -12px;background:radial-gradient(ellipse at 65% 40%,var(--ambient-red)),radial-gradient(ellipse at 28% 38%,var(--ambient-silver));filter:blur(42px);opacity:.75}
.install-metal-edge{position:absolute;z-index:2;inset:-1px;overflow:hidden;border-radius:inherit;pointer-events:none;padding:1px;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor}
/* Keep the masked edge for click feedback, without an idle reflection sweep. */
.install-metal-edge::before{content:none}
.hero .install-methods{padding:9px}
.hero .hero-install{padding:10px 12px}
.hero .copy-icon{background:linear-gradient(#080a0cb3,#21262a80);border-color:#c3cbd32b;box-shadow:inset 0 2px 5px #0006,inset 0 -1px #ffffff0b}
.hero .install-details{justify-content:center;margin-top:14px;padding-inline:0}
.hero .install-packages{width:100%;gap:8px 26px}
.hero .install-help{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin:8px 0 0;gap:6px 20px;font-size:10px;color:#858b93}
.hero .install-help p{margin:0}
.hero .install-help p+p{padding-left:20px;border-left:1px solid #aab4c022}
.hero .install-desktop-support{display:inline-flex;align-items:center;gap:6px;color:inherit}
.hero .install-meta{position:static;height:auto;padding:0;margin:4px 12px 0;font-size:10px}
.hero .install-meta:has([data-copy-feedback]:empty){display:none}
/* One static light source behind darker, translucent feature surfaces. */
.feature-demo-grid{position:relative;isolation:isolate}
.feature-demo-grid::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0 -20px;background:radial-gradient(ellipse at 25% 30%,var(--ambient-silver)),radial-gradient(ellipse at 72% 52%,var(--ambient-red));filter:blur(64px)}
.interface-card{background:linear-gradient(135deg,#dce3ed05,transparent 50%),#0a0c0eac;border:1px solid #cbd3df1a;box-shadow:inset 0 1px #dbe3ed1c;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
/* Compact Library illustration: two settings, one selection, one save bar.
   Space for drafts is reserved so the bar never covers editable controls. */
.demo-profile-window{width:calc(100% - 20px);margin:8px auto 0;background:#0c0e10;border-color:#b6c0ce29;border-radius:10px}
.demo-profile-window .demo-window-top{height:32px;padding-inline:14px;font-size:10px;background:#121416}
.demo-profile-window .demo-profile-layout{grid-template-columns:76px minmax(0,1fr);min-height:286px}
.demo-profile-window .demo-library{padding:14px 7px;background:#0d0f11}
.demo-profile-window .demo-library-game{padding:9px 5px;gap:6px}
.demo-profile-window .demo-game-icon{width:17px;height:23px;background:linear-gradient(135deg,#3b4148,#1d2228);border-color:#626c784d}
.demo-profile-window .demo-profile-detail{padding:18px 18px 80px}
.demo-profile-window .demo-profile-name{font-size:13px;font-weight:500;color:#e2e4e8;height:18px;letter-spacing:-.015em}
.demo-profile-window .demo-inheritance-banner{margin-bottom:13px;gap:6px}
.demo-profile-window .demo-inheritance-banner strong{font-size:9px;color:#9299a3}
.demo-profile-window .demo-setting-row{min-height:48px;padding-block:8px;gap:10px}
.demo-profile-window .demo-setting-row>div:first-child>span{font-size:10px}
.demo-profile-window .demo-custom-label{display:none}
.demo-profile-window .demo-profile-select>[data-demo-override],.demo-profile-window .demo-static-select{min-width:86px;font-size:9px;padding:7px 8px;background:#1b1e22;border-color:#abb5c32b}
.demo-profile-window .demo-profile-options{min-width:99px;background:#1b1e22;border-color:#8995a244}
.demo-profile-window .demo-profile-options>button{font-size:9px;padding:7px}
.demo-profile-window .demo-profile-reset{margin-top:13px;font-size:8px;color:#ba9297}
.demo-profile-window .demo-profile-save{left:8px;right:8px;bottom:8px;padding:10px;border-color:#41464e;background:#15181b;box-shadow:0 6px 18px #0005;gap:6px}
.demo-profile-window .demo-profile-save>span{font-size:8px}
.demo-profile-window .demo-profile-save-actions{gap:6px}
.demo-profile-window .demo-profile-save .demo-mini-button{padding:7px 9px;font-size:8px}
/* Only the edited setting carries copy; surrounding app details stay abstract. */
.demo-profile-chrome{justify-content:space-between}
.demo-chrome-line{width:30%;height:4px;background:#25292d;border-radius:3px}
.demo-chrome-short{width:36px}
.demo-placeholder-copy{display:grid;gap:6px;width:40%}
.demo-placeholder-copy i{height:4px;width:75%;border-radius:2px;background:#34383d}
.demo-placeholder-copy i+i{width:48%;background:#25292e}
.demo-placeholder-select{display:flex;align-items:center;justify-content:space-between;width:86px;height:29px;padding:8px;border:1px solid #abb5c31a;border-radius:7px;background:#171a1d}
.demo-placeholder-select i{height:4px;width:32px;background:#363b41;border-radius:2px}
.demo-placeholder-select i+i{width:6px;height:3px;background:#555b62}
/* Same narrow pointer throughout; the resting state keeps its position. */
.interface-cursor,.demo-cursor{width:14px;height:19px;filter:drop-shadow(0 1px 1px #0008)}
.interface-cursor svg{position:relative;left:-1.5556px;top:-1.1875px;transform-origin:1.5556px 1.1875px}
.demo-cursor>svg{width:100%;height:100%}
/* An inactive body-level cursor must not retain desktop-sized scroll bounds. */
.demo-cursor:not(.is-visible){display:none}
/* The interactive metrics settings share the smaller app windows' controls. */
.appearance-settings{background:#0d0d0f;border-left:1px solid #29292d}
.appearance-field-label,.appearance-control label{color:#aeb5bf}
.appearance-options:not(.options-palette) button,.appearance-select-trigger{border-radius:7px;background:#171719;border-color:#343438;color:#dedee3;transition:background .2s,border-color .2s,color .2s}
.appearance-options:not(.options-palette) button[aria-pressed=true]{background:#e7474f14;border-color:#8e454b;color:#f0d7da;box-shadow:none}
.appearance-select-menu{border-color:#414141;background:#161616}
.appearance-select-option[aria-selected=true]{background:#e7474f14;color:#f0d7da}
.appearance-switch span{background:#131215;border-color:#434047}
.appearance-switch input:checked+span{background:#30171c;border-color:#7e303b}
/* Source lighting stays local; its page-wide divider belongs to section-separators.css. */
.source-section{position:relative}
/* Reuse the grid cards' graphite glass and lighting around the code editor. */
.source-section{isolation:isolate}
.source-section::after{content:"";position:absolute;z-index:-1;pointer-events:none;inset:38px -40px -16px 30%;background:radial-gradient(ellipse at 25% 25%,var(--ambient-silver)),radial-gradient(ellipse at 80% 70%,var(--ambient-red));filter:blur(64px)}
.source-window{background:linear-gradient(135deg,#dce3ed05,transparent 50%),#0a0c0eac;border-color:#cbd3df1a;box-shadow:inset 0 1px #dbe3ed1c;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.source-window-head{background:#121416a6;border-bottom-color:#cbd3df10;color:#aeb5bf}
.source-pre{color:#c7cbd1}
.source-number{color:#59616c}
.source-keyword,.source-file svg{color:#e58d97}
.source-type{color:#b9c7d3}
.source-function{color:#e5e8ed}
.source-number+.source-text .source-number{color:#c0bacb}
.source-caret{background:#ef8e98}
@media(max-width:950px) and (min-width:761px){.demo-profile-window{width:100%}.demo-profile-window .demo-profile-layout{grid-template-columns:54px minmax(0,1fr)}.demo-profile-window .demo-profile-detail{padding-inline:12px}.demo-profile-window .demo-library-game .demo-name-placeholder{display:none}.demo-profile-window .demo-profile-save{flex-wrap:wrap}.demo-profile-window .demo-profile-save-actions{margin-left:auto}}
@media(max-width:760px){
 .hero-atmosphere{top:-40px;height:760px}
 .hero .hero-shards{overflow:clip;inset:-30px -20px}
 .hero-grid-field{opacity:.7}
 .hero .install-invitation{margin-top:30px;width:100%}
 .hero .product-preview{margin-top:62px}
 .hero .install-methods{padding:6px}
 .hero .hero-install{padding:11px 10px}
 .hero .install-details{padding-inline:0;gap:8px 15px}
 .hero .install-packages{gap:7px 12px}
 .hero .install-packages li{font-size:9px;gap:4px}
 .hero .install-help{font-size:9px;gap:5px 12px}
 .hero .install-help p+p{padding-left:0;border-left:0}
 .feature-demo-grid::before{inset:0;filter:blur(44px);background:radial-gradient(ellipse at 25% 24%,var(--ambient-silver)),radial-gradient(ellipse at 76% 57%,var(--ambient-red))}
 .source-section::after{inset:150px 0 0;filter:blur(44px)}
 .demo-profile-window{width:100%;margin-top:0}
 .demo-profile-window .demo-profile-layout{grid-template-columns:54px minmax(0,1fr);min-height:282px}
 .demo-profile-window .demo-profile-detail{padding:16px 12px 82px}
 .demo-profile-window .demo-library-game{justify-content:center}
 .demo-profile-window .demo-library-game .demo-name-placeholder{display:none}
 .demo-profile-window .demo-setting-row{gap:6px}
 .demo-profile-window .demo-setting-row>div:first-child>span{font-size:9px}
 .demo-profile-window .demo-profile-select>[data-demo-override],.demo-profile-window .demo-static-select{min-width:78px;font-size:9px;padding:7px 6px}
 .demo-profile-window .demo-profile-save{flex-wrap:wrap}
 .demo-profile-window .demo-profile-save-actions{margin-left:auto}
}
@supports not (backdrop-filter:blur(1px)){.hero .install-surface{background:#111316e6}.interface-card,.source-window{background:#101214ef}}
@media(forced-colors:active){.hero-atmosphere,.install-metal-edge,.feature-demo-grid::before,.source-section::after{display:none}.hero .install-surface,.interface-card,.source-window{border-color:CanvasText;background:Canvas}}

/* Native export structure, with secondary values abstracted like profiles. */
.demo-export-dialog{width:min(310px,100%);padding:18px;background:#101013;border-color:#414141;border-radius:9px}
.demo-export-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.demo-export-heading h4{margin:0;font-size:14px}
.demo-export-close{font:19px/1 NotoSans,sans-serif;color:#92929a}
[data-export-state=exporting] .demo-export-close{opacity:.35}
.demo-export-field>span,.demo-export-folder>span,.demo-export-progress-label{font:9px/1.5 NotoSans,sans-serif;color:#a7a7ae}
.demo-export-input{display:flex;align-items:center;min-height:32px;margin-top:7px;padding:8px 10px;border:1px solid #3a393f;border-radius:5px;background:#111114}
.demo-export-bar{display:block;width:70%;height:5px;border-radius:2px;background:#4a4a50}
.demo-export-bar.short{width:42%;background:#323238}
.demo-export-folder{margin-top:16px}
.demo-export-destination{display:flex;align-items:center;gap:8px;padding-top:8px;color:#92929a}
.demo-export-destination svg,.demo-export-complete-actions svg{width:13px;height:13px;flex:none}
.demo-export-destination .demo-export-bar{width:48%;background:#37373d}
.demo-export-dialog .demo-export-actions{margin-top:18px;padding-top:13px;border-top:1px solid #2d2d2d;gap:7px}
.demo-export-dialog .demo-mini-button{background:#171719;border-color:#39393d;font-size:9px;padding:7px 10px}
.demo-export-dialog .demo-mini-button.primary{background:#33191d;border-color:#8e454b;color:#f0d7da}
.demo-export-placeholder-copy{display:grid;gap:7px;margin-bottom:18px}
.demo-export-placeholder-copy .demo-export-bar{width:91%;background:#36363c}
.demo-export-placeholder-copy .demo-export-bar.short{width:64%;background:#29292f}
.demo-export-progress-label{display:flex;align-items:center;justify-content:space-between}
.demo-export-progress-label .demo-export-bar{width:20px}
.demo-export-meter{margin:9px 0 16px;background:#2d2d31}
.demo-export-complete-file{padding:4px 0 12px}
.demo-export-complete-file .demo-export-bar{width:82%;height:7px;background:#66666d}
.demo-export-complete-actions{flex-wrap:wrap}
.demo-export-complete-actions>button{display:flex;align-items:center;justify-content:center;gap:6px}
.demo-export-complete-actions .demo-export-bar{width:23px;height:3px}
.demo-export-open-action svg{color:#e4757c}

/* Longer product promise, with restrained red emphasis and natural wrapping. */
.hero .hero-copy{width:min(1120px,100%)}
.hero .hero-context{justify-content:center;margin:0}
.hero h1{font-size:clamp(2.5rem,4.3vw,3.6rem);line-height:1.14}
.hero-title-line{display:block}
.hero .hero-word-emphasis{color:#e7474f}
.hero .hero-shard-left{left:-43px;opacity:.58}
@media(max-width:950px){.hero .hero-shard-left{left:-25px}}
@media(max-width:760px){.hero .hero-shard-left{left:-14px;opacity:.44}}
/* Each line restarts its word entrance rhythm. */
@media(max-width:760px){.hero h1{font-size:clamp(1.7rem,7.2vw,2.75rem);line-height:1.17}.hero .hero-copy{min-height:220px}}

@media(prefers-reduced-motion:reduce){.hero-grid-field::before,.hero-grid-field::after,.support-heart-grid::before,.support-heart-grid::after{animation:none;opacity:.4}.interface-cursor,.demo-cursor{display:none}}

.support-heart-facet{fill:url(#support-side)}
.support-heart-silhouette{stroke:#b9c9db55}
.support-heart-seams{stroke:#b9c9db2e}

/* Refract the completed mesh and shards together; filtering the child would
   leave its CSS mask fixed and make the water motion almost invisible. */
.arrival-filter{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.hero-atmosphere.is-rippling{filter:url(#install-grid-water)}
.install-arrival-edge{position:absolute;inset:0;opacity:0;background:linear-gradient(110deg,#e9f0fa,#e9f0fa70 32%,#ee6978 70%,#e9f0fa);pointer-events:none}
.install-arrival-flash{position:absolute;z-index:3;inset:0;opacity:0;pointer-events:none;background:linear-gradient(108deg,transparent 15%,#ee697859 35%,#f4f7ff85 49%,#f0a3b55c 59%,transparent 78%);background-size:200% 100%;border-radius:inherit}
.install-arrival-glow{position:absolute;z-index:-1;inset:-26px -48px;opacity:0;pointer-events:none;background:radial-gradient(ellipse at 42% 48%,#f3f5ff50 0%,#f3f5ff35 25%,#f3f5ff16 55%,#f3f5ff04 80%,#f3f5ff00 100%),radial-gradient(ellipse at 62% 55%,#f14c6355 0%,#f14c6339 25%,#f14c6319 55%,#f14c6304 80%,#f14c6300 100%);filter:blur(30px)}
@media(prefers-reduced-motion:reduce),(forced-colors:active){.install-arrival-edge,.install-arrival-flash,.install-arrival-glow{display:none}}

/* Reversible banner study: keep the existing profile tour and draft controls.
   Original fictional artwork follows its selected game; secondary copy stays abstract. */
.demo-profile-window.demo-profile-mixed .demo-profile-layout{grid-template-columns:88px minmax(0,1fr);min-height:314px}
.demo-profile-window.demo-profile-mixed .demo-profile-detail{padding:0 16px 68px}
.demo-profile-banner{position:relative;height:88px;margin:0 -16px 12px;overflow:hidden;background:#111417}
.demo-profile-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 57%;transition:opacity .4s ease-out}
.demo-profile-banner .demo-profile-art-first{object-position:center 61%;image-rendering:pixelated}
.demo-profile-banner .demo-profile-art-second{object-position:center 64%}
.demo-profile-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#080a0c0d 25%,#080a0cba)}
.demo-profile-art-second{opacity:0}
[data-profile-game="2"] .demo-profile-art-first{opacity:0}
[data-profile-game="2"] .demo-profile-art-second{opacity:1}
.demo-profile-window.demo-profile-mixed .demo-profile-name{position:absolute;top:57px;left:16px;z-index:1;height:18px;margin:0}
.demo-profile-mixed .demo-profile-name .demo-name-placeholder{background:#e3e6eba6;box-shadow:0 1px 3px #0005}
.demo-profile-window.demo-profile-mixed .demo-game-icon{width:22px;height:30px;background-size:cover;background-position:center;border-color:#8c949d45}
.demo-profile-mixed [data-demo-game="1"] .demo-game-icon{background-image:url("assets/scenes/profile-crystal-mine-pixel.webp")}
.demo-profile-mixed [data-demo-game="2"] .demo-game-icon{background-image:url("assets/scenes/profile-night-drive.webp")}
.demo-profile-window.demo-profile-mixed .demo-setting-row{min-height:42px;padding-block:7px}
.demo-profile-window.demo-profile-mixed .demo-profile-reset{margin-top:10px}
@media(max-width:950px) and (min-width:761px),(max-width:480px){
 .demo-profile-window.demo-profile-mixed .demo-profile-layout{grid-template-columns:54px minmax(0,1fr)}
 .demo-profile-window.demo-profile-mixed .demo-profile-detail{padding:0 10px 74px}
 .demo-profile-mixed .demo-profile-banner{height:78px;margin-inline:-10px}
 .demo-profile-window.demo-profile-mixed .demo-profile-name{top:48px;left:10px}
}
@media(prefers-reduced-motion:reduce){.demo-profile-banner img{transition:none}}



/* clip-export-demo.css */
/* A compact illustration of Redunar's approved selection-export dialog, sized for its preview stage. */
.demo-export-dialog{width:min(360px,100%);max-height:min(300px,100%);overflow:auto;overscroll-behavior:contain;scroll-behavior:smooth;padding:13px;background:#111214;border:1px solid #414349;border-radius:10px;color:#dedee3;scrollbar-width:thin;scrollbar-color:#48464d transparent}
.demo-export-dialog [hidden]{display:none!important}
.demo-export-dialog .demo-export-heading{position:sticky;top:-13px;z-index:7;margin:-13px -13px 10px;padding:13px 13px 10px;background:#111214;box-shadow:0 5px 8px #111214}
.demo-export-dialog .demo-export-heading h4{font-size:14px;margin:0}
.demo-export-source{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:10px}
.demo-export-source>img{width:54px;height:30px;object-fit:cover;border:1px solid #35383d;border-radius:4px;flex:none}
.demo-export-source>div{min-width:0}
.demo-export-source strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:500}
.demo-export-source small{display:block;margin-top:4px;color:#92959e;font:9px/1.4 Mono,monospace}
.demo-export-source [data-export-original]{margin-top:2px;color:#989ba4;font-variant-numeric:tabular-nums}
[data-export-form]{display:flex;flex-direction:column;gap:8px}
.demo-export-format-row{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#a7a7ae}
.demo-export-select{position:relative;width:112px}
.demo-export-dialog .demo-export-select>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:5px 9px;border:1px solid #414141;background:#121212;border-radius:5px;color:#d8dce1;font:10px NotoSans,sans-serif}
.demo-export-dialog .demo-export-select>button:hover{border-color:#777}
.demo-export-dialog .demo-export-select>button[aria-expanded=true]{border-color:#e7474f}
.demo-export-select>button[aria-expanded=true]>svg{transform:rotate(180deg);color:#e7474f}
.demo-export-select svg,.demo-export-compress svg{width:13px;height:13px}
.demo-export-options{position:absolute;top:calc(100% + 5px);right:0;z-index:6;width:100%;padding:5px;border:1px solid #494949;border-radius:6px;background:#161616;box-shadow:0 10px 24px #0007}
.demo-export-options button{display:flex;justify-content:space-between;width:100%;padding:7px;border:1px solid transparent;border-radius:4px;background:none;color:#f4f1ed;font:10px NotoSans,sans-serif}
.demo-export-options button+button{margin-top:2px}
.demo-export-options button span:last-child{visibility:hidden;color:#ed666e}
.demo-export-options button[aria-selected=true] span:last-child{visibility:visible}
.demo-export-dialog .demo-export-field>label{display:block;font:10px NotoSans,sans-serif;color:#a7a7ae;margin:0 0 6px}
.demo-export-filename{position:relative}
.demo-export-dialog .demo-export-filename input{height:28px;margin:0;padding:7px 48px 7px 9px;background:#111214;border-color:#3a3e44;font-size:10px}
.demo-export-filename>span{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#91969f;font-size:10px;pointer-events:none}
.demo-export-size-section{border-top:1px solid #2e3237}
.demo-export-compress{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 0 0;border:0;background:none;color:#a7a7ae;font:10px NotoSans,sans-serif}
.demo-export-compress svg{transition:transform 220ms cubic-bezier(.2,0,0,1)}
.demo-export-compress[aria-expanded=true] svg{transform:rotate(180deg)}
.demo-export-size-controls{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 220ms cubic-bezier(.2,0,0,1),opacity 220ms cubic-bezier(.2,0,0,1)}
[data-export-expanded=true] .demo-export-size-controls{grid-template-rows:1fr;opacity:1}
.demo-export-size-inner{min-height:0;overflow:hidden}
.demo-export-size-inner>label{display:block;text-align:center;font:9px/1.4 NotoSans,sans-serif;color:#969ba3}
.is-foldout .demo-export-size-inner>label{padding-top:7px}
.demo-export-size-value{display:flex;align-items:baseline;justify-content:center;gap:5px;width:max-content;max-width:100%;margin:4px auto 0;padding:0 6px;border:1px solid transparent;border-radius:6px;color:#9da1a8;font-size:14px}
.demo-export-size-value:focus-within{border-color:#e7474f;box-shadow:0 0 0 2px #e7474f15}
.demo-export-dialog .demo-export-size-value input{appearance:textfield;-moz-appearance:textfield;box-sizing:content-box;width:calc(var(--size-digits,2)*1ch);min-width:2ch;padding:0;margin:0;text-align:right;font:25px/1.2 Mono,monospace;color:#e6e7eb;background:none;border:0;border-radius:0;outline:none;box-shadow:none}
.demo-export-size-value input::-webkit-inner-spin-button,.demo-export-size-value input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.demo-export-dialog input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:20px;min-height:20px;margin:3px 0 0;padding:0;border:0;background:transparent;accent-color:#e7474f;cursor:ew-resize}
.demo-export-dialog input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,#e7474f var(--range-fill,6px),#373b40 var(--range-fill,6px));border-radius:3px}
.demo-export-dialog input[type=range]::-moz-range-track{height:3px;background:#373b40;border-radius:3px}
.demo-export-dialog input[type=range]::-moz-range-progress{height:3px;background:#e7474f}
.demo-export-dialog input[type=range]::-webkit-slider-thumb{box-sizing:border-box;appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border:3px solid #e7474f;border-radius:50%;background:#111214;box-shadow:0 0 0 2px #111214}
.demo-export-dialog input[type=range]::-moz-range-thumb{box-sizing:border-box;width:12px;height:12px;border:3px solid #e7474f;border-radius:50%;background:#111214}
.demo-export-size-scale{display:flex;justify-content:space-between;font:8px/1.3 Mono,monospace;color:#858b94}
.demo-export-dialog .demo-export-actions{position:sticky;bottom:-13px;z-index:7;display:flex;gap:9px;margin:10px -13px -13px;padding:10px 13px 13px;border:0;border-top:1px solid #2e3237;background:#111214;box-shadow:0 -6px 10px #111214}
.demo-export-dialog .demo-export-actions .demo-mini-button{min-height:28px;padding:5px 10px;font-size:10px}
.demo-export-dialog .demo-export-actions .primary{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;background:#33191d;border-color:#8e454b}
.demo-export-dialog .demo-export-actions .primary:disabled{opacity:1;color:#e1c9cd}
.demo-export-spinner{display:inline-block;flex:none;box-sizing:border-box;width:13px;height:13px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:demo-export-spin 1.1s linear infinite;animation-play-state:paused}
.is-touring .demo-export-spinner{animation-play-state:running}
.demo-export-output{display:block;font:10px/1.6 Mono,monospace;overflow-wrap:anywhere;color:#c9cbd1;margin:4px 0 12px}
.demo-export-dialog .demo-export-progress-label{font-size:10px}
.demo-export-dialog [data-export-current-size],.demo-export-dialog [data-export-final-size]{font-variant-numeric:tabular-nums}
.demo-export-progress-track{height:3px;overflow:hidden;margin-top:10px;background:#373739}
.demo-export-progress-track>i{display:block;width:100%;height:100%;background:#e7474f;transform:scaleX(0);transform-origin:left}
.demo-export-dialog .demo-export-live-status{margin:10px 0 0;color:#9298a2;font:9px/1.5 NotoSans,sans-serif}
.demo-export-live-status [data-export-current-size]::before{content:" · "}
.demo-export-complete-meta{display:block;color:#9298a2;font:9px Mono,monospace}
[data-export-state=complete] [data-export-complete]{padding:4px 0 10px}
[data-export-state=complete] .demo-export-output{font:12px/1.5 NotoSans,sans-serif;color:#dedee3;margin:0}
.demo-export-dialog .demo-export-destination{margin:8px 0 10px}
.demo-export-destination .demo-export-bar{width:78%;height:4px;background:#383a40}
[data-export-state=complete] .demo-export-actions{gap:6px}
[data-export-state=complete] .demo-export-actions .demo-mini-button{padding-inline:8px;white-space:nowrap}
@keyframes demo-export-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.demo-export-dialog{scroll-behavior:auto}.demo-export-size-controls,.demo-export-compress svg{transition:none}.demo-export-spinner{animation:none}}

.demo-export-dialog .demo-export-size-comparison{margin:8px 0 0;color:#c5c7ce;font:9px/1.5 Mono,monospace;text-align:center;font-variant-numeric:tabular-nums}
.demo-export-dialog .demo-export-size-note{margin:5px 0 0;color:#8b919b;font:9px/1.5 NotoSans,sans-serif;text-align:center}



/* select-feedback.css */
/* The app keeps a grey moving hover plate separate from its red selection. */
.select-feedback{isolation:isolate}
.select-feedback::before{content:"";position:absolute;z-index:0;left:0;top:0;width:var(--select-active-w,0px);height:var(--select-active-h,0px);transform:translate(var(--select-active-x,0px),var(--select-active-y,0px));border-radius:4px;background:#292929;opacity:var(--select-active-visible,0);pointer-events:none;transition:transform 85ms cubic-bezier(.2,.8,.2,1),opacity 70ms}
.select-feedback>[role=option]{position:relative;z-index:1}
.select-feedback>.active{background:transparent}
.select-feedback>[aria-selected=true]{position:relative;z-index:1;background:#271516}
.select-feedback[data-select-input=pointer]>.active{border-color:transparent}
.select-feedback[data-select-input=keyboard]>.active{border-color:#494949}
.select-feedback[data-select-input=keyboard]>[aria-selected=true].active{border-color:#853338}
@media(prefers-reduced-motion:reduce){.select-feedback::before,.demo-profile-select>[data-demo-override]>span:last-child{transition:none}}



/* Interactive appearance editor; isolated from the four feature previews. */

/* appearance-editor.css */
/* Appearance/Metrics editor; all rules stay inside the interactive customizer. */
.appearance-workbench{border-color:#373737;background:#101010;overflow:hidden}
.appearance-demo{grid-template-columns:minmax(0,1fr) 520px;align-items:stretch}
.appearance-scene{min-height:460px}
.appearance-settings{display:flex;flex-direction:column;justify-content:flex-start;gap:0;background:#111;padding:24px 22px;border-color:#2d2d2d}
.appearance-editor-panel-stack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;min-width:0}
.appearance-editor-panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.appearance-editor-panel+.appearance-editor-panel{border-left:1px solid #303030;padding-left:20px}
.appearance-editor-panel .options-preset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.appearance-editor-panel .appearance-field{grid-column:auto;grid-row:auto}
.appearance-editor-panel .appearance-control{margin:0;padding:0;border:0;gap:10px;min-height:35px}
.appearance-metric-hint{font-size:10px;color:#999;line-height:1.7;margin:0;min-height:34px}
.appearance-editor-panel .appearance-range{width:128px;gap:6px}
.appearance-editor-panel .appearance-range input{width:86px}
.appearance-metric-groups{display:grid;gap:12px}
.appearance-metric-group{min-width:0;margin:0;padding:0;border:0}
.appearance-metric-group+.appearance-metric-group{padding-top:12px;border-top:1px solid #303030}
.appearance-metric-group legend{float:left;width:100%;padding:0;margin-bottom:7px;font-size:11px;color:#ddd}
.appearance-metric-group .appearance-metric-options{clear:both}
/* Native checkboxes match preset-controlled metrics in the app. */
.appearance-metric-options{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:0;color-scheme:dark}
.appearance-metric-options label{display:flex;align-items:center;gap:8px;min-width:0;min-height:36px;padding:6px 2px;background:transparent;border:1px solid transparent;border-radius:5px}
.appearance-metric-options input[type=checkbox]{appearance:auto;accent-color:#e7474f;flex:0 0 12px;width:12px;height:12px;min-width:12px;margin:0;padding:0}
.appearance-metric-options label:has(input:enabled){cursor:pointer}
.appearance-metric-options label:has(input:enabled):hover{background:#151515}
.appearance-metric-options input:focus-visible{outline:2px solid #e87880;outline-offset:3px}
.appearance-metric-options span{font-size:11px;line-height:1.5;color:#ccc}
.demo-cursor svg{overflow:visible;transform-origin:0 0}
.appearance-options button{transition:background-color 85ms,border-color 85ms,color 70ms}
.appearance-options button.is-pointer-hovered:not(:disabled){border-color:#626068;background:#1c1c1c}
.appearance-options button[aria-pressed=true].is-pointer-hovered:not(:disabled){background:#241516;border-color:#74323d}
.appearance-switch:has(input.is-pointer-hovered) span{border-color:#777}
@media(max-width:1050px){.appearance-demo{grid-template-columns:minmax(0,1fr) 470px}.appearance-settings{padding:22px 16px}.appearance-editor-panel-stack{gap:16px}.appearance-editor-panel+.appearance-editor-panel{padding-left:14px}}
@media(max-width:950px){.appearance-demo{display:flex;flex-direction:column}.appearance-scene{height:340px;min-height:0;aspect-ratio:auto}.appearance-settings{display:block;border-left:0;border-top:1px solid #2d2d2d;padding:24px}.appearance-editor-panel-stack{gap:28px}.appearance-editor-panel+.appearance-editor-panel{padding-left:28px}}
@media(max-width:540px){.appearance-scene{height:280px}.appearance-settings{padding:20px}.appearance-editor-panel-stack{grid-template-columns:1fr;gap:22px}.appearance-editor-panel+.appearance-editor-panel{padding:22px 0 0;border-left:0;border-top:1px solid #303030}.appearance-editor-panel .appearance-range{width:152px}.appearance-editor-panel .appearance-range input{width:110px}.appearance-metric-options label{min-height:40px}}
@media(prefers-reduced-motion:reduce){.appearance-options button{transition:none}}



/* Targeted export and profile control fidelity. */

/* preview-controls.css */
/* Export compression is an off-by-default switch; the tour never enables it. */
#capture .demo-export-compress{min-height:30px;padding-top:8px;color:#ccc}
.demo-export-switch{position:relative;display:inline-flex;flex:none;width:30px;height:18px;cursor:pointer}
.demo-export-switch input{position:absolute;z-index:1;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.demo-export-switch>span{display:block;width:100%;height:100%;border:1px solid #4c4c4c;border-radius:20px;background:#242424;transition:background-color 120ms,border-color 120ms}
.demo-export-switch>span::after{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#bfc0c5;transition:transform 120ms}
.demo-export-switch:has(input:checked)>span{background:#793039;border-color:#b24955}
.demo-export-switch:has(input:checked)>span::after{transform:translateX(12px);background:#f3e8e9}
.demo-export-switch:has(input:focus-visible)>span{outline:2px solid #e7474f;outline-offset:3px}
.demo-export-switch:hover>span{border-color:#777}
/* App select visuals at the existing small preview scale; no layout redesign. */
#workspace .demo-profile-select>[data-demo-override]{display:flex;align-items:center;justify-content:space-between;gap:8px;border-color:#414141;border-radius:7px;background:#121212;color:#ddd;transition:background-color 120ms,border-color 120ms}
#workspace .demo-profile-select>[data-demo-override]:is(:hover,.is-pointer-hovered){border-color:#777;background:#121212}
#workspace .demo-profile-select>[data-demo-override][aria-expanded=true]{border-color:#e7474f}
#workspace .demo-profile-select>[data-demo-override]>span:last-child{display:flex;transition:transform 120ms;color:#aaa}
#workspace .demo-profile-select>[data-demo-override] svg{display:block;width:12px;height:12px;flex:none}
#workspace .demo-profile-select>[data-demo-override][aria-expanded=true]>span:last-child{transform:rotate(180deg);color:#e7474f}
#workspace .demo-profile-select>[data-demo-override]:focus-visible{outline:2px solid #e7474f;outline-offset:3px}
#workspace .demo-profile-options{border-color:#494949;border-radius:7px;background:#161616;padding:5px}
#workspace .demo-profile-options>[role=option]{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid transparent;border-radius:4px;color:#ddd}
#workspace .demo-profile-options>[role=option]::after{content:"";display:block;flex:none;width:10px;color:#e7474f}
#workspace .demo-profile-options>[aria-selected=true]::after{content:"✓"}
@media(prefers-reduced-motion:reduce){.demo-export-switch>span,.demo-export-switch>span::after,#workspace .demo-profile-select>[data-demo-override],#workspace .demo-profile-select>[data-demo-override]>span:last-child{transition:none}}

/* Compact playback and trimming controls retain their separate purposes. */
#capture .demo-clip-file{height:26px;padding:0 12px;background:#101010}
#capture .demo-clip-file .demo-name-placeholder{width:128px;max-width:45%;height:4px}
#capture .demo-video-transport{gap:9px;padding:8px 12px;background:#101010}
#capture .demo-transport-play{display:flex;align-items:center;justify-content:center;flex:none;width:25px;height:24px;border:1px solid #353538;border-radius:6px;background:#202023;color:#d4d4da}
#capture .demo-transport-play>svg{fill:none;stroke:currentColor;stroke-width:1.5}
#capture [data-clip-time]{font-size:8px;white-space:nowrap}

#capture .demo-video-progress i{background:#e7474f}
#capture .demo-video-progress i::after{right:-4px;top:-3px;width:9px;height:9px;border:2px solid #e7474f;background:#101010;box-sizing:border-box}