/* Deliberately expressive second-round preview. Never loaded by the live page. */
body.ota-design-preview.ota-showcase {
  --showcase-electric: color-mix(in srgb,var(--accent) 76%,var(--ink));
  --showcase-edge: color-mix(in srgb,var(--accent) 30%,var(--line));
  --showcase-play:running;
  isolation:isolate; background:var(--bg);
}
.ota-showcase .showcase-ambient { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.ota-showcase .showcase-aurora { position:absolute; width:760px; height:620px; border-radius:50%; opacity:.72; will-change:transform; animation-play-state:var(--showcase-play) !important; }
.ota-showcase .showcase-aurora-a { top:-220px; left:-310px; background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 15%,transparent),transparent 67%); animation:showcase-drift-a 22s ease-in-out infinite alternate; }
.ota-showcase .showcase-aurora-b { right:-330px; top:80px; background:radial-gradient(ellipse,color-mix(in srgb,var(--accent-2) 14%,transparent),transparent 68%); animation:showcase-drift-b 26s ease-in-out infinite alternate; }
.ota-showcase .showcase-grain { position:absolute; inset:0; opacity:.2; background-image:radial-gradient(var(--muted-2) .55px,transparent .55px); background-size:22px 22px; mask-image:linear-gradient(#000,transparent 700px); }
.ota-showcase .site-shell { width:min(1280px,100%); }
.ota-showcase .neu-header { padding-block:23px; border-color:color-mix(in srgb,var(--line) 65%,transparent); }
.ota-showcase .neu-logo { border-radius:13px; box-shadow:0 0 24px color-mix(in srgb,var(--accent) 10%,transparent),inset 0 0 16px color-mix(in srgb,var(--accent) 6%,transparent); }
.ota-showcase .neu-brand strong { font-size:22px; letter-spacing:-.05em; }
.ota-showcase .neu-nav a { border-radius:25px; }
.ota-showcase .neu-nav a.is-active { background:var(--preview-tint); box-shadow:inset 0 0 0 1px var(--preview-ring); }
.ota-showcase .neu-support { border-radius:25px; background:transparent; }
.ota-showcase .neu-header .theme-toggle { border-radius:25px; background:color-mix(in srgb,var(--panel) 70%,transparent); }
.ota-showcase .showcase-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:25px; align-items:center; padding:28px 0 36px; }
.ota-showcase .showcase-hero > div:first-child { position:relative; z-index:1; }
.ota-showcase .showcase-hero .neu-eyebrow { display:flex; gap:10px; align-items:center; font-size:10px; letter-spacing:.2em; color:var(--accent); margin-bottom:20px; }
.ota-showcase .showcase-hero .neu-eyebrow::before { content:''; width:26px; height:1px; background:var(--accent); box-shadow:0 0 10px color-mix(in srgb,var(--accent) 45%,transparent); }
.ota-showcase .showcase-hero h1 { font-size:clamp(45px,5.2vw,72px); letter-spacing:-.065em; line-height:1.02; margin:0 0 20px; }
.ota-showcase .showcase-hero h1 > span { display:block; font-weight:800; padding-bottom:.08em; background:linear-gradient(105deg,var(--accent),var(--accent-2) 72%); background-clip:text; -webkit-background-clip:text; color:transparent; }
.ota-showcase .showcase-hero .neu-intro-copy { max-width:510px; color:var(--muted); font-size:13px; line-height:1.8; }
.ota-showcase .showcase-hero .neu-brands { max-width:none; justify-content:flex-start; gap:9px 19px; margin-top:24px; font-size:10px; letter-spacing:.025em; color:var(--muted-2); }
.ota-showcase .showcase-visual { position:relative; height:325px; width:100%; perspective:900px; pointer-events:auto; }
.ota-showcase .showcase-halo { position:absolute; width:310px; height:310px; border-radius:50%; top:3px; left:50%; transform:translateX(-50%); background:radial-gradient(circle,color-mix(in srgb,var(--accent) 15%,transparent),color-mix(in srgb,var(--accent-2) 6%,transparent) 48%,transparent 70%); }
.ota-showcase .showcase-orbit { position:absolute; width:280px; height:280px; left:calc(50% - 140px); top:20px; border-radius:50%; border:1px solid color-mix(in srgb,var(--accent) 16%,transparent); animation:showcase-orbit 24s linear infinite; animation-play-state:var(--showcase-play); }
.ota-showcase .showcase-orbit::before { content:''; position:absolute; top:23px; left:40px; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 16px var(--accent); }
.ota-showcase .showcase-orbit-b { width:330px; height:330px; left:calc(50% - 165px); top:-5px; transform:rotate(35deg); border-style:dashed; border-color:color-mix(in srgb,var(--accent-2) 13%,transparent); animation-direction:reverse; animation-duration:38s; }
.ota-showcase .showcase-orbit-b::before { background:var(--accent-2); width:4px; height:4px; box-shadow:0 0 12px var(--accent-2); }
.ota-showcase .showcase-device-float { position:absolute; top:16px; left:calc(50% - 78px); width:156px; height:280px; animation:showcase-device-float 6s ease-in-out infinite; animation-play-state:var(--showcase-play); }
.ota-showcase .showcase-device { position:relative; width:100%; height:100%; padding:7px; border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:27px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 18%,var(--panel)),var(--bg) 60%); transform:rotateX(calc(8deg + var(--tilt-x,0deg))) rotateY(calc(-18deg + var(--tilt-y,0deg))) rotateZ(8deg); box-shadow:14px 19px 0 -9px color-mix(in srgb,var(--accent) 15%,var(--bg)),22px 30px 50px color-mix(in srgb,var(--bg) 75%,transparent),0 0 70px color-mix(in srgb,var(--accent) 12%,transparent); transition:transform 180ms ease-out; }
.ota-showcase .showcase-device::after { content:''; position:absolute; right:-3px; top:64px; width:3px; height:28px; border-radius:3px; background:color-mix(in srgb,var(--accent) 65%,var(--line)); }
.ota-showcase .showcase-device-screen { height:100%; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 13%,var(--bg)),var(--bg) 52%,color-mix(in srgb,var(--accent-2) 13%,var(--bg))); }
.ota-showcase .showcase-device-screen::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 3px,color-mix(in srgb,var(--ink) 2%,transparent) 4px); pointer-events:none; }
.ota-showcase .showcase-device-camera { position:absolute; top:9px; width:5px; height:5px; border-radius:50%; background:var(--bg); box-shadow:0 0 0 1px var(--line); }
.ota-showcase .showcase-device-kicker { font-size:7px; letter-spacing:.25em; color:var(--muted-2); }
.ota-showcase .showcase-device-mark { color:var(--accent); font-size:44px; font-weight:800; line-height:1.2; letter-spacing:-.07em; text-shadow:0 0 24px color-mix(in srgb,var(--accent) 25%,transparent); }
.ota-showcase .showcase-device-name { color:var(--ink); max-width:125px; padding-inline:5px; text-align:center; font-size:10px; font-weight:700; }
.ota-showcase .showcase-device-build { color:var(--muted); font-family:monospace; font-size:9px; }
.ota-showcase .showcase-device-bottom { position:absolute; width:45px; height:3px; border-radius:4px; bottom:9px; background:var(--muted-2); }
.ota-showcase .showcase-float-badge { position:absolute; z-index:1; display:flex; align-items:center; gap:9px; padding:10px 13px; border:1px solid var(--preview-ring); border-radius:12px; background:color-mix(in srgb,var(--panel) 90%,transparent); backdrop-filter:blur(12px); box-shadow:0 10px 32px color-mix(in srgb,var(--bg) 40%,transparent); }
.ota-showcase .showcase-float-badge-a { top:79px; left:calc(50% - 210px); transform:rotate(-6deg); }
.ota-showcase .showcase-float-badge-b { right:calc(50% - 205px); bottom:46px; transform:rotate(5deg); }
.ota-showcase .showcase-badge-icon { color:var(--accent); font-size:20px; }
.ota-showcase .showcase-badge-copy { color:var(--ink); font-size:10px; font-weight:650; white-space:nowrap; }

/* The picker is a lit control deck, not another card inside a card. */
.ota-showcase .ota-container { border-radius:25px; padding:26px; border-color:var(--showcase-edge); background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 4%,var(--panel)),var(--panel) 45%); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 3%,transparent),0 18px 70px color-mix(in srgb,var(--bg) 35%,transparent),0 -10px 60px color-mix(in srgb,var(--accent) 4%,transparent); }
.ota-showcase .neu-picker-heading { margin-bottom:25px; }
.ota-showcase .neu-picker-heading h2 { font-size:28px; letter-spacing:-.045em; }
.ota-showcase #otaForm .ota-row label { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; }
.ota-showcase .showcase-step { display:inline-flex; justify-content:center; align-items:center; width:21px; height:21px; border:1px solid var(--preview-ring); border-radius:7px; color:var(--accent); background:var(--preview-tint); font-size:9px; font-variant-numeric:tabular-nums; }
.ota-showcase #otaForm .ota-device-trigger,.ota-showcase #otaForm .ota-region-trigger,.ota-showcase #otaForm .ota-version-trigger { min-height:54px; border-radius:12px; border-color:color-mix(in srgb,var(--line) 85%,var(--accent)); background:color-mix(in srgb,var(--bg) 37%,var(--card)); }
.ota-showcase #otaForm [aria-expanded="true"] { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent),0 0 30px color-mix(in srgb,var(--accent) 8%,transparent); }
.ota-showcase #otaResolveBtn { min-height:54px; border-radius:12px; background:var(--accent); color:var(--preview-action-ink,var(--bg)); border-color:var(--accent); font-weight:800; box-shadow:0 5px 28px color-mix(in srgb,var(--accent) 18%,transparent); }
.ota-showcase .preview-toolbar { padding-block:0 15px; border:0; margin-bottom:12px; }
.ota-showcase .showcase-motion-toggle { margin-left:auto; border:1px solid var(--preview-ring); border-radius:20px; padding:6px 10px; color:var(--accent); background:var(--preview-tint); font-size:10px; cursor:pointer; }
.ota-showcase .showcase-motion-toggle[aria-checked="false"] { color:var(--muted); border-color:var(--line); background:transparent; }
.ota-showcase .showcase-motion-toggle:disabled { cursor:default; }
.ota-showcase .preview-toolbar .preview-live-link { margin-left:8px; }

/* Bigger hierarchy, richer surfaces; popovers deliberately remain unclipped. */
.ota-showcase .ota-result { margin-top:26px; padding-top:25px; border-top-color:color-mix(in srgb,var(--accent) 18%,var(--line)); }
.ota-showcase .ota-result-grid { gap:18px; }
.ota-showcase .ota-package-panel,.ota-showcase .ota-extract-panel { border-radius:19px; background:radial-gradient(ellipse 450px 270px at var(--glow-x,15%) var(--glow-y,0%),color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%),linear-gradient(140deg,color-mix(in srgb,var(--accent) 3%,var(--card)),var(--card)) !important; border-color:var(--showcase-edge); box-shadow:0 7px 30px color-mix(in srgb,var(--bg) 24%,transparent); }
.ota-showcase .ota-package-panel { border-top:1px solid var(--showcase-edge); }
.ota-showcase .ota-package-panel::before { content:''; position:absolute; top:-1px; left:17%; right:17%; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); box-shadow:0 0 14px color-mix(in srgb,var(--accent) 40%,transparent); pointer-events:none; }
.ota-showcase .ota-package-title { font-size:clamp(24px,2.6vw,33px); letter-spacing:-.045em; }
.ota-showcase .preview-device-identity { padding-left:61px; min-height:49px; }
.ota-showcase .preview-brand-mark { width:46px; height:46px; border-radius:14px; font-size:29px; background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 17%,var(--panel)),var(--panel)); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 7%,transparent),0 0 22px color-mix(in srgb,var(--accent) 6%,transparent); }
.ota-showcase .ota-version-highlight { color:var(--showcase-electric); font-size:1.3em; }
.ota-showcase .ota-package-panel > .neu-tool-label,.ota-showcase .ota-extract-panel > .neu-tool-label { letter-spacing:.18em; color:var(--muted); }
.ota-showcase .neu-tool-label svg { width:17px; height:17px; filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 25%,transparent)); }
.ota-showcase #downloadBtn { border-radius:12px; min-height:48px; background:linear-gradient(110deg,var(--accent),color-mix(in srgb,var(--accent) 82%,var(--accent-2))); box-shadow:0 5px 22px color-mix(in srgb,var(--accent) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.18); }
.ota-showcase #downloadBtn:hover { box-shadow:0 5px 33px color-mix(in srgb,var(--accent) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.2); }
.ota-showcase #copyBtn { border-radius:12px; }
.ota-showcase .preview-status-tile { background:color-mix(in srgb,var(--bg) 26%,var(--panel)) !important; border-color:color-mix(in srgb,var(--accent) 13%,var(--line)) !important; }
.ota-showcase .preview-status-tile > strong { font-size:14px; letter-spacing:-.025em; }
.ota-showcase .preview-cache-bar > i { box-shadow:0 0 9px color-mix(in srgb,var(--accent) 60%,transparent); }
.ota-showcase #otaImageDownloadBtn,.ota-showcase #otaRootPatchBtn { background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 18%,var(--card)),color-mix(in srgb,var(--accent-2) 10%,var(--card))); border-radius:11px; }
.ota-showcase .ota-root-patch-panel { background:radial-gradient(ellipse 700px 300px at var(--glow-x,90%) var(--glow-y,0%),color-mix(in srgb,var(--accent-2) 12%,transparent),transparent 70%),var(--card) !important; border-color:color-mix(in srgb,var(--accent-2) 30%,var(--line)); }
.ota-showcase .showcase-selection { animation:showcase-select 450ms ease-out; }
.ota-showcase .neu-empty { padding-block:30px; background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%); }
.ota-showcase .neu-empty-symbol { padding:9px; width:54px; height:58px; border:1px solid var(--preview-ring); border-radius:15px; background:var(--preview-tint); box-shadow:0 0 30px color-mix(in srgb,var(--accent) 8%,transparent); }
.ota-showcase .neu-empty h3 { font-size:20px; }
.ota-showcase .neu-resource { border-radius:17px; background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 5%,var(--card)),var(--card)); }

@keyframes showcase-drift-a { to { transform:translate(120px,65px) scale(1.08); } }
@keyframes showcase-drift-b { to { transform:translate(-110px,-50px) scale(.95); } }
@keyframes showcase-orbit { to { transform:rotate(360deg); } }
@keyframes showcase-device-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes showcase-select { from { box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 34%,transparent),0 0 35px color-mix(in srgb,var(--accent) 13%,transparent); } to { box-shadow:0 7px 30px color-mix(in srgb,var(--bg) 24%,transparent); } }
@media (hover:hover) and (pointer:fine) {
  .ota-showcase .ota-region-option:hover { background:color-mix(in srgb,var(--accent) 15%,var(--panel)); }
  .ota-showcase .neu-resource { transition:border-color 180ms ease,box-shadow 180ms ease; }
  .ota-showcase .neu-resource:hover { border-color:var(--accent); box-shadow:0 4px 25px color-mix(in srgb,var(--accent) 9%,transparent); }
}
@media (max-width:1020px) and (min-width:701px) {
  .ota-showcase .showcase-hero { grid-template-columns:minmax(0,1.2fr) minmax(230px,.8fr); gap:10px; }
  .ota-showcase .showcase-hero h1 { font-size:52px; }
  .ota-showcase .showcase-visual { transform:scale(.85); transform-origin:center; }
}
@media (max-width:700px) {
  .ota-showcase .neu-header { padding-block:15px 11px; }
  .ota-showcase .neu-brand strong { font-size:18px; }
  .ota-showcase .showcase-hero { display:block; padding:28px 0 23px; }
  .ota-showcase .showcase-hero > div:first-child { max-width:100%; }
  .ota-showcase .showcase-hero h1 { font-size:clamp(37px,9.4vw,51px); line-height:1.05; margin-bottom:13px; }
  .ota-showcase .showcase-hero .neu-eyebrow { font-size:8px; margin-bottom:14px; letter-spacing:.16em; }
  .ota-showcase .showcase-hero .neu-intro-copy { max-width:94%; font-size:12px; }
  .ota-showcase .showcase-hero .neu-brands { margin-top:16px; gap:8px 16px; font-size:9px; }
  .ota-showcase .showcase-visual { position:absolute; right:-18px; top:6px; width:160px; height:210px; transform:scale(.63); transform-origin:top right; opacity:.22; pointer-events:none; }
  .ota-showcase .showcase-float-badge { display:none; }
  .ota-showcase .showcase-device-name,.ota-showcase .showcase-device-build,.ota-showcase .showcase-device-kicker { visibility:hidden; }
  .ota-showcase .showcase-aurora { width:480px; height:600px; opacity:.45; }
  .ota-showcase .ota-container { padding:19px 14px; border-radius:19px; }
  .ota-showcase .neu-picker-heading { margin-bottom:19px; }
  .ota-showcase .neu-picker-heading h2 { font-size:24px; }
  .ota-showcase .ota-package-title { font-size:22px; }
  .ota-showcase .preview-device-identity { padding-left:47px; min-height:37px; }
  .ota-showcase .preview-brand-mark { width:35px; height:35px; border-radius:10px; font-size:24px; }
  .ota-showcase .ota-version-highlight { font-size:1.15em; }
  .ota-showcase .ota-result-grid { gap:13px; }
  .ota-showcase .ota-package-panel,.ota-showcase .ota-extract-panel { border-radius:15px; }
  .ota-showcase .preview-status-tile > strong { font-size:12px; }
  .ota-showcase #downloadBtn { min-height:44px; }
  .ota-showcase .showcase-motion-toggle { font-size:9px; padding:5px 8px; }
  .ota-showcase .preview-toolbar { flex-wrap:wrap; gap:6px; }
}
.ota-showcase[data-showcase-effects="off"] .showcase-aurora,.ota-showcase[data-showcase-effects="off"] .showcase-orbit,.ota-showcase[data-showcase-effects="off"] .showcase-device-float { animation:none; }
.ota-showcase[data-showcase-effects="off"] .showcase-device { transform:rotateZ(5deg); }
.ota-showcase[data-showcase-effects="off"] .showcase-selection { animation:none; }
.ota-showcase[data-showcase-effects="off"] *,
.ota-showcase[data-showcase-effects="off"] *::before,
.ota-showcase[data-showcase-effects="off"] *::after { animation:none !important; transition:none !important; }
.ota-showcase[data-showcase-effects="off"] #downloadBtn::before { display:none; }
@media (prefers-reduced-motion:reduce) {
  .ota-showcase .showcase-aurora,.ota-showcase .showcase-orbit,.ota-showcase .showcase-device-float,.ota-showcase .showcase-selection { animation:none !important; }
  .ota-showcase .showcase-device { transform:rotateZ(5deg); transition:none; }
}