/* Current desktop UI, captured locally in all three languages. */
.showcase { --accent:#98b5ff; margin:60px auto 0; max-width:1090px; text-align:left; scroll-margin-top:28px; }
.showcase-intro { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:24px; }
.showcase-intro h2 { margin:9px 0 0; font-size:clamp(25px,3vw,36px); font-weight:550; letter-spacing:-1px; }
.showcase-intro>p { max-width:300px; margin:0 0 3px; color:#a5b5ce; font-size:13px; line-height:1.7; }
.showcase-frame { position:relative; border:1px solid #839bce4a; border-radius:18px; background:#101626; box-shadow:0 32px 100px #0005,0 0 80px #6c63ff0a; overflow:hidden; }
.showcase-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 22px; border-bottom:1px solid #a7b9e51a; background:linear-gradient(110deg,#1c2440,#141d2f); }
.showcase-brand { display:flex; align-items:center; gap:10px; letter-spacing:2px; font-size:12px; font-weight:700; }
.showcase-brand img { width:22px; height:26px; }
.showcase-build { display:flex; align-items:center; gap:8px; color:#b4c6df; font-size:10px; letter-spacing:.3px; }
.showcase-tabs { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); padding:12px; gap:5px; border-bottom:1px solid #a7b9e517; background:#0e1626; }
.showcase-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:69px; margin:0; padding:10px 4px; border:1px solid transparent; border-radius:9px; background:transparent; color:#8b9cb6; font-size:11px; line-height:1.35; transition:color .2s,background .2s,border-color .2s; }
.showcase-tab .ui-icon { width:20px; height:20px; }
.showcase-tab:hover { color:#d8e6ff; background:#8eacff0b; }
.showcase-tab[aria-selected=true] { background:linear-gradient(145deg,#6277ca35,#4d5cb01a); border-color:#9aafff48; color:#d2deff; }
.showcase-panel { padding:22px 22px 0; }
.showcase-copy { display:flex; align-items:start; justify-content:space-between; gap:24px; min-height:90px; }
.showcase-copy h3 { margin:0 0 7px; color:#eef3ff; font-size:22px; font-weight:550; letter-spacing:-.4px; }
.showcase-copy p { margin:0; color:#9dadc7; font-size:12px; line-height:1.7; max-width:610px; }
.showcase-index { color:#738cb2; font-size:11px; font-variant-numeric:tabular-nums; letter-spacing:1px; padding-top:5px; white-space:nowrap; }
.showcase-viewport { position:relative; isolation:isolate; display:block; width:100%; padding:0; aspect-ratio:1280/820; border:1px solid #b2c5ed28; border-radius:9px 9px 0 0; overflow:hidden; background:#191920; color:#fff; cursor:zoom-in; text-align:inherit; }
.showcase-viewport img { display:block; width:100%; height:100%; position:absolute; inset:0; object-fit:contain; opacity:0; transition:opacity .55s ease; }
.showcase-viewport img.is-active { opacity:1; }
.showcase-zoom { display:flex; align-items:center; gap:7px; position:absolute; right:14px; bottom:14px; z-index:2; border:1px solid #bbceff50; background:#0d162ee6; color:#e2ecff; border-radius:7px; padding:9px 12px; font-size:11px; box-shadow:0 4px 20px #0004; backdrop-filter:blur(12px); transition:background .2s,transform .2s; }
.showcase-viewport:hover .showcase-zoom { background:#23375bf5; transform:translateY(-2px); }
.showcase-zoom .ui-icon { width:15px; height:15px; }
.showcase-error { position:absolute; z-index:3; inset:0; display:grid; place-content:center; padding:24px; text-align:center; background:#151d30; color:#c5d4ed; font-size:14px; }
.showcase-bottom { padding:15px 22px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid #9aaee925; }
.showcase-views { display:flex; align-items:center; gap:5px; }
.showcase-views button { border:1px solid transparent; border-radius:6px; background:transparent; color:#92a7c7; padding:7px 10px; font-size:11px; }
.showcase-views button[aria-pressed=true] { border-color:#91aeeb3f; background:#587bb423; color:#dbe8ff; }
.showcase-controls { display:flex; align-items:center; gap:7px; }
.showcase-controls button,.showcase-dialog button { width:36px; height:34px; border:1px solid #9ab8e332; border-radius:7px; background:#1c2940; color:#c5d8f1; display:grid; place-items:center; }
.showcase-controls button:hover,.showcase-dialog button:hover { background:#304465; color:#fff; }
.showcase-controls button[aria-pressed=false] { border-color:#93baff69; background:#2c4063; }
.showcase-controls .previous { transform:rotate(180deg); }
.showcase-timeline { display:grid; grid-template-columns:repeat(8,1fr); gap:5px; margin-top:17px; }
.showcase-track { position:relative; height:3px; border-radius:3px; overflow:hidden; background:#a4bbed21; }
.showcase-track::after { content:''; position:absolute; inset:0; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,#91c4f6,#ada8ff); }
.showcase-track.is-before::after { transform:scaleX(1); background:#8396bd75; }
.showcase-track.is-current::after { transform:scaleX(var(--progress,0)); }
.showcase-note { display:flex; justify-content:space-between; gap:16px; margin:13px 0 0; color:#8093b0; font-size:10px; line-height:1.7; }
.showcase-note a { color:#afc7ec; white-space:nowrap; }
.showcase-dialog { width:min(1500px,96vw); max-width:96vw; max-height:96dvh; margin:auto; padding:0; border:1px solid #9eb8e360; border-radius:13px; background:#111b2c; color:#edf4ff; box-shadow:0 30px 120px #0009; }
.showcase-dialog::backdrop { background:#020711e8; backdrop-filter:blur(9px); }
.showcase-dialog[open] { display:flex; flex-direction:column; }
.showcase-dialog-header { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:16px; padding:12px 16px; border-bottom:1px solid #ffffff17; }
.showcase-dialog-header h2 { margin:0; font-size:15px; font-weight:550; }
.showcase-dialog-actions { display:flex; gap:7px; }
.showcase-dialog .showcase-size { width:auto; padding:0 12px; font-size:12px; }
.showcase-dialog-body { overflow:auto; min-height:0; overscroll-behavior:contain; }
.showcase-dialog-body img { display:block; width:100%; height:auto; max-height:calc(96dvh - 70px); object-fit:contain; }
.showcase-dialog-body.is-zoomed img { width:1280px; max-width:none; max-height:none; }
body.showcase-modal-open { overflow:hidden; }
@media(max-width:800px) {
  .showcase-intro { align-items:start; flex-direction:column; gap:12px; }.showcase-intro>p {max-width:540px;}
  .showcase-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:10px; }
  .showcase-tab { min-height:62px; padding:8px 3px; font-size:11px; }
  .showcase-copy { min-height:100px; }.showcase-panel { padding:18px 16px 0; }.showcase-copy p {font-size:12px;}
}
@media(max-width:560px) {
  .showcase { margin-top:44px; }.showcase-intro { margin-bottom:19px; }.showcase-intro h2 {font-size:27px;letter-spacing:-.6px;}
  .showcase-bar {padding:12px;}.showcase-build {font-size:9px;gap:5px;}.showcase-brand {font-size:10px;gap:7px;}
  .showcase-panel {padding:17px 9px 0;}.showcase-copy {padding:0 3px;gap:9px;min-height:118px;}.showcase-copy h3 {font-size:19px;}.showcase-copy p {font-size:11px;}
  .showcase-index {font-size:9px;padding-top:4px;}.showcase-tabs {padding:8px;}.showcase-tab {font-size:10px;gap:6px;min-height:60px;}
  .showcase-bottom {padding:11px 9px;gap:4px;flex-wrap:wrap;}.showcase-views {gap:1px;}.showcase-views button {font-size:10px;padding:7px 6px;}
  .showcase-controls {gap:4px;margin-left:auto;}.showcase-controls button {width:30px;height:32px;}
  .showcase-zoom {right:7px;bottom:7px;font-size:9px;padding:6px 8px;gap:4px;}.showcase-zoom .ui-icon {width:12px;height:12px;}
  .showcase-note {flex-direction:column;gap:3px;font-size:9px;}.showcase-frame {border-radius:13px;}
  .showcase-dialog-header {padding:10px;gap:8px;}.showcase-dialog-header h2 {font-size:13px;}
}
@media(prefers-reduced-motion:reduce) { .showcase-track.is-current::after {transform:scaleX(1);} }