:root {
  --bg: #604C3D;
  --bg-panel: #6C5747;
  --bg-panel-2: #FFFFFF;
  --border: #7E6857;
  --accent: #FF5B14;
  --accent-dark: #D9480A;
  --text: #F6F1E9;
  --text-muted: #D2C5B6;
  --success: #86BE84;
  --warn: #E9B24C;
  --error: #E85A4D;
  --surface-light: #FFFFFF;
  --ink: #2B211A;
  --ink-muted: #6B5E54;
  --line-light: #E9E2D9;
  --surface-light-hover: #F7F2EC;
  --highlight-light: #FFF0E7;
  --transparent: transparent;
  --veil: #2A1F17;
  --line-on-dark: rgba(246,241,233,.3);
  --line-on-dark-strong: rgba(246,241,233,.72);
  --chip-fill: rgba(42,31,23,.46);
  --chip-fill-hover: rgba(42,31,23,.72);
  --shadow-ink: #120C08;
  --fab-shadow: 0 8px 32px rgba(18,12,8,.25);
  --scene-wall: #5E4A3B;
  --scene-wall-deep: #4C3B2F;
  --scene-shelf: #8A6A4E;
  --scene-shelf-edge: #6E523B;
  --book-1: #7D6A58;
  --book-2: #8E6047;
  --book-3: #695A4C;
  --book-4: #A08566;
  --book-5: #5B4E44;
  --scene-box: #9A8670;
  --scene-desk: #6E4B31;
  --scene-desk-edge: #8A6244;
  --scene-grain: #83593A;
  --lamp-metal: #3B2F26;
  --lamp-shade: #30251D;
  --lamp-glow: #F2BE73;
  --lamp-bulb: #FFF1D6;
  --laptop-bezel: #1C1713;
  --laptop-silver: #8F8880;
  --laptop-silver-dim: #625B55;
  --screen-bg: #2A211B;
  --screen-gutter: #251D18;
  --screen-bar: #3A2F27;
  --screen-tab: #2A211B;
  --screen-tabbar: #211A15;
  --screen-curline: #3A2D22;
  --code-key: #E7C38C;
  --code-val: #F6F1E9;
  --code-dim: #B5A493;
  --code-str: #B9D6A8;
  --paper: #E4D8C6;
  --paper-ink: #47382C;
  --paper-soft: #8C7B6B;
  --paper-rule: #BFAF9B;
  --phone-body: #221A15;
  --phone-screen: #14100D;
  --mug: #8C7C6E;
  --mug-rim: #A59484;
  --mug-inner: #3A2E25;
  --mug-shade: #6E6054;
  --font-display: Georgia, "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "Noto Sans SC", serif;
  --font-body: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radius: 6px;
  --radius-round: 50%;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --gutter: 32px;
  --container: 1200px;
  --reading: 800px;
  --utility-h: 40px;
  --mainbar-h: 72px;
  --nav-h: 113px;
  --facts-h: 44px;
  --section-space: 88px;
  --motion-fast: 160ms;
  --motion-reveal: 600ms;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.nav-open { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--weight-regular) 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: .22em; text-decoration-color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: var(--transparent); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
svg, .dot, .brand-mark { flex-shrink: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3, h4, p, figure { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
h1 { font: var(--weight-regular) clamp(34px,3.3vw,48px)/1.18 var(--font-display); letter-spacing: .015em; }
h2 { font: var(--weight-regular) clamp(26px,2.6vw,36px)/1.3 var(--font-display); }
h3 { font-size: 21px; line-height: 1.4; font-weight: var(--weight-semibold); }
p { margin-bottom: 1.25em; }
ul, ol { padding-left: 1.5em; }
code, pre, kbd { font-family: var(--font-mono); }
code { font-size: .9em; overflow-wrap: anywhere; }
pre {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--screen-bg);
  color: var(--code-val);
  font-size: 14px;
  line-height: 1.8;
  tab-size: 2;
}
pre code { font-size: inherit; white-space: pre; overflow-wrap: normal; word-break: normal; }
pre .code-key { color: var(--code-key); }
pre .code-string { color: var(--code-str); }
pre .code-comment { color: var(--code-dim); }
.no-break { white-space: nowrap; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: 8px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 100;
  padding: 8px 14px;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  background: var(--surface-light);
  color: var(--ink);
  text-decoration: none;
}
.skip-link:focus { width: auto; height: auto; overflow: visible; clip-path: none; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.reading { max-width: var(--reading); margin-inline: auto; min-width: 0; }
.section { padding-top: var(--section-space); padding-bottom: var(--section-space); }
.surface-light { background: var(--surface-light); color: var(--ink); }
.surface-dark { background: var(--bg); color: var(--text); }
.surface-panel { background: var(--bg-panel); color: var(--text); }
.muted { color: var(--text-muted); }
.surface-light .muted { color: var(--ink-muted); }
.section-heading { max-width: 740px; margin-bottom: 36px; }
.section-heading p { color: var(--text-muted); }
.surface-light .section-heading p { color: var(--ink-muted); }
.grid { display: grid; gap: 24px; }
.grid > *, .feature-browser > *, .footer-grid > *, .prose, .article-body { min-width: 0; }
.grid-two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 22px;
  border: 2px solid var(--transparent);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  text-align: center;
  text-decoration: none;
  gap: 8px;
  line-height: 1.4;
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}
.btn svg { width: 18px; height: 18px; }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 14.5px; }
.btn-lg { min-height: 48px; padding: 11px 26px; font-size: 15.5px; }
.btn-solid { background: var(--accent); border-color: var(--accent); color: var(--surface-light); }
.btn-solid:hover, .btn-solid.is-hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--surface-light); }
.btn-outline { background: var(--transparent); border-color: var(--accent); color: var(--accent-dark); }
.btn-paper { background: var(--surface-light); border-color: var(--accent); color: var(--accent-dark); }
.btn-outline:hover, .btn-paper:hover { background: var(--surface-light-hover); color: var(--accent-dark); }
.surface-dark .btn-outline, .surface-panel .btn-outline { color: var(--text); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn.is-focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.panel, .card { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); color: var(--text); }
.surface-light .panel, .surface-light .card { border-color: var(--line-light); background: var(--surface-light); color: var(--ink); }
.card > :last-child, .panel > :last-child { margin-bottom: 0; }
.prose, .article-body { line-height: 1.85; }
.prose h2, .article-body h2 { margin-top: 2.2em; scroll-margin-top: 24px; }
.prose h3, .article-body h3 { margin-top: 1.7em; }
.prose li + li { margin-top: .55em; }
.prose img { border-radius: var(--radius); }
.prose > :first-child { margin-top: 0; }
.reveal { opacity: 1; transform: none; }
.reveal-pending .reveal:not(.shown) { opacity: 0; transform: translateY(16px); }
.reveal-pending .reveal { transition: opacity var(--motion-reveal) ease, transform var(--motion-reveal) ease; }

/* 白色双层页头；独立宽版心，不沿用正文宽度。 */
.masthead { position: relative; z-index: 40; border-bottom: 1px solid var(--line-light); background: var(--surface-light); color: var(--ink); }
.header-wrap { width: 100%; max-width: min(100%,calc(1280px + var(--gutter) * 2)); margin-inline: auto; padding-inline: var(--gutter); }
.utility .header-wrap { height: var(--utility-h); display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.utility-group { display: flex; align-items: center; gap: 28px; }
.utility-item { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: var(--transparent); color: var(--ink); text-decoration: none; font: inherit; font-weight: var(--weight-medium); }
.utility-item svg { width: 15px; height: 15px; fill: none; stroke: var(--ink-muted); stroke-width: 1.5; }
.utility-item:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.caret { font-size: 11px; color: var(--ink-muted); }
.mainbar .header-wrap { height: var(--mainbar-h); display: flex; align-items: center; gap: 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; flex-shrink: 0; }
.brand-mark { width: 34px; height: 34px; }
.brand-name { font-size: 17px; font-weight: var(--weight-bold); letter-spacing: .01em; }
.primary-nav { margin-left: 52px; min-width: 0; }
.primary-nav > ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 34px; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--mainbar-h); padding: 0; border: 0; background: var(--transparent); color: var(--ink); font: var(--weight-medium) 15.5px var(--font-body); text-decoration: none; white-space: nowrap; }
.nav-link:hover, .nav-link[aria-current="page"], .nav-link.is-current { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.nav-link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.more, .language-picker { position: relative; }
.more-menu, .language-menu {
  position: absolute;
  z-index: 45;
  top: calc(100% - 8px);
  left: -18px;
  min-width: 232px;
  margin: 0;
  padding: 10px;
  list-style: none;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  background: var(--surface-light);
  color: var(--ink);
}
.language-menu { top: calc(100% + 10px); min-width: 176px; left: 0; }
.more-menu a, .language-menu a { display: block; min-height: 44px; padding: 9px 10px; border-radius: var(--radius); color: var(--ink); text-decoration: none; font-size: 14.5px; }
.more-menu a:hover, .language-menu a:hover, .language-menu a[aria-current] { background: var(--surface-light-hover); color: var(--ink); }
.more-menu a[aria-current] { text-decoration: underline; text-decoration-color: var(--accent); }
.more-menu small { display: block; color: var(--ink-muted); font-size: 12px; }
.more-group-title { margin: 6px 10px 2px; font-size: 11.5px; letter-spacing: .12em; color: var(--ink-muted); font-weight: var(--weight-semibold); }
.mainbar-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; padding-left: 24px; flex-shrink: 0; }
.mobile-language, .menu-toggle, .mobile-drawer, .nav-veil { display: none; }
.menu-toggle { align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 10px; border: 1px solid var(--line-light); border-radius: var(--radius); background: var(--surface-light); color: var(--ink); }
.menu-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.language-short { display: none; }
.preview-disclosure > summary { cursor: pointer; list-style: none; }
.preview-disclosure > summary::-webkit-details-marker { display: none; }

/* 拍板稿首屏：场景在后，文字不动。 */
.hero { position: relative; overflow-x: clip; overflow-y: hidden; background: var(--veil); color: var(--text); min-height: calc(100svh - var(--nav-h) - var(--facts-h)); display: grid; align-content: center; }
.hero-visual { position: absolute; inset: 0; pointer-events: none; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 48px; padding-bottom: clamp(230px,32vh,360px); }
.eyebrow { margin: 0 0 18px; font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: .24em; color: var(--text); }
.hero-title { margin: 0 0 18px; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(26px,3.3vw,48px); line-height: 1.18; letter-spacing: .015em; color: var(--text); }
.hero-title .line { display: block; }
.stop { color: var(--accent); }
.hero-lede { margin: 0 0 28px; max-width: 35em; font-size: 16px; line-height: 1.75; color: var(--text-muted); }
.hero-lede strong { color: var(--text); font-weight: var(--weight-semibold); }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.platforms ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.platform { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 7px 14px; border: 1px solid var(--line-on-dark); border-radius: var(--radius); background: var(--chip-fill); color: var(--text); font-size: 13.5px; font-weight: var(--weight-medium); text-decoration: none; }
.platform svg { width: 15px; height: 15px; }
.platform:hover { border-color: var(--line-on-dark-strong); background: var(--chip-fill-hover); color: var(--text); }
.facts { min-height: var(--facts-h); background: var(--bg-panel); color: var(--text); border-top: 1px solid var(--border); }
.facts .wrap { min-height: var(--facts-h); display: flex; align-items: center; justify-content: center; }
.facts ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0; padding: 0; list-style: none; gap: 0; }
.facts li { display: inline-flex; align-items: center; gap: 10px; padding: 6px 26px; font: 12.5px/1.4 var(--font-mono); }
.facts li + li { border-left: 1px solid var(--border); }
.facts .k { color: var(--text-muted); }
.facts .dot { width: 7px; height: 7px; border-radius: var(--radius-round); background: var(--success); }
.s-wall { fill: var(--scene-wall); }
.s-wall-deep { fill: var(--scene-wall-deep); }
.s-shelf { fill: var(--scene-shelf); }
.s-shelf-edge { fill: var(--scene-shelf-edge); }
.b1 { fill: var(--book-1); }
.b2 { fill: var(--book-2); }
.b3 { fill: var(--book-3); }
.b4 { fill: var(--book-4); }
.b5 { fill: var(--book-5); }
.s-box { fill: var(--scene-box); }
.s-desk { fill: var(--scene-desk); }
.s-desk-edge { fill: var(--scene-desk-edge); }
.s-grain { fill: none; stroke: var(--scene-grain); stroke-width: 2; opacity: .55; }
.s-lamp-arm { fill: none; stroke: var(--lamp-metal); stroke-linecap: round; }
.s-lamp-joint { fill: var(--lamp-metal); }
.s-lamp-shade { fill: var(--lamp-shade); }
.lamp-rim { fill: var(--lamp-glow); }
.lamp-bulb { fill: var(--lamp-bulb); }
.veil-top { stop-color: var(--veil); stop-opacity: .55; }
.veil-bottom { stop-color: var(--veil); stop-opacity: .8; }
.halo-0 { stop-color: var(--lamp-glow); stop-opacity: .4; }
.halo-1 { stop-color: var(--lamp-glow); stop-opacity: .19; }
.halo-2 { stop-color: var(--lamp-glow); stop-opacity: .06; }
.halo-3 { stop-color: var(--lamp-glow); stop-opacity: 0; }
.cone-0 { stop-color: var(--lamp-glow); stop-opacity: .2; }
.cone-1 { stop-color: var(--lamp-glow); stop-opacity: 0; }
.pool-0 { stop-color: var(--lamp-glow); stop-opacity: .26; }
.pool-1 { stop-color: var(--lamp-glow); stop-opacity: 0; }
.paper-shadow { flood-color: var(--shadow-ink); flood-opacity: .55; }
.paper { fill: var(--paper); }
.paper-kicker { fill: var(--paper-soft); font: var(--weight-bold) 9.5px var(--font-body); letter-spacing: .18em; }
.paper-head { fill: var(--paper-ink); font: var(--weight-semibold) 14px var(--font-body); }
.paper-line { fill: var(--paper-ink); font: 10.5px var(--font-body); }
.paper-mono { fill: var(--paper-ink); font: 10px var(--font-mono); }
.paper-rule { fill: var(--paper-rule); }
.lt-bezel { fill: var(--laptop-bezel); }
.lt-cam, .lt-hinge, .lt-notch { fill: var(--laptop-silver-dim); }
.lt-screen, .lt-tab { fill: var(--screen-bg); }
.lt-menubar { fill: var(--screen-bar); }
.lt-tabbar { fill: var(--screen-tabbar); }
.lt-gutter { fill: var(--screen-gutter); }
.lt-curline { fill: var(--screen-curline); }
.lt-deck { fill: var(--laptop-silver); }
.lt-cat { fill: var(--surface-light); }
.lt-cat-eye { fill: var(--screen-bar); }
.mb-text { fill: var(--text-muted); font: 9px var(--font-body); }
.mb-icon { fill: none; stroke: var(--text); stroke-width: 1.2; stroke-linecap: round; }
.code { font: 12px var(--font-mono); fill: var(--code-val); }
.code-tab { font: 10px var(--font-mono); fill: var(--text-muted); }
.code-ln { font: 10.5px var(--font-mono); fill: var(--code-dim); }
.ck { fill: var(--code-key); }
.cs { fill: var(--code-str); }
.ph-body { fill: var(--phone-body); stroke: var(--laptop-silver-dim); stroke-width: 1.2; }
.ph-screen { fill: var(--phone-screen); }
.ph-toggle { fill: var(--success); }
.ph-knob { fill: var(--text); }
.mug { fill: var(--mug); }
.mug-rim { fill: var(--mug-rim); }
.mug-inner { fill: var(--mug-inner); }
.mug-shade { fill: var(--mug-shade); }
.mug-handle { fill: none; stroke: var(--mug); stroke-width: 7; stroke-linecap: round; }

/* 页脚 */
.site-footer { background: var(--bg); color: var(--text); border-top: 1px solid var(--border); padding-top: 64px; padding-bottom: 28px; }
.footer-grid { display: grid; grid-template-columns: 1.25fr .8fr 1.5fr .7fr; gap: 40px; }
.footer-brand p { margin-top: 20px; max-width: 26em; color: var(--text-muted); font-size: 14px; }
.footer-heading { margin-bottom: 18px; font: var(--weight-semibold) 15px var(--font-body); }
.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links li + li { margin-top: 9px; }
.footer-links a { color: var(--text-muted); font-size: 14px; text-decoration: none; overflow-wrap: break-word; }
.footer-links a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 13px; }
.footer-bottom p { margin: 0; }
@media (max-width: 1180px) {
  .primary-nav { margin-left: 32px; }
  .primary-nav > ul { gap: 24px; }
  .mainbar-actions > .btn-outline { display: none; }
}
@media (max-width: 1000px) {
  .primary-nav { display: none; }
  .mainbar-actions { margin-left: auto; padding-left: 12px; gap: 10px; }
  .mainbar-actions > .btn-solid { display: none; }
  .mobile-language, .menu-toggle { display: inline-flex; }
  .utility-language { visibility: hidden; }
  .mobile-language .language-menu { left: auto; right: 0; }
  .mobile-language .utility-item { min-height: 44px; }
  .mobile-drawer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 44;
    padding: 16px var(--gutter) 24px;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--line-light);
    background: var(--surface-light);
    color: var(--ink);
  }
  .mobile-drawer.is-open { display: block; }
  .mobile-drawer ul { list-style: none; margin: 0; padding: 0; }
  .mobile-drawer a { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px 12px; color: var(--ink); text-decoration: none; }
  .mobile-drawer a:hover, .mobile-drawer a[aria-current] { background: var(--surface-light-hover); color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
  .drawer-label { margin: 20px 12px 8px; color: var(--ink-muted); font-size: 13px; }
  .nav-veil.is-open { display: block; position: fixed; inset: var(--nav-h) 0 0; z-index: 30; border: 0; background: var(--chip-fill-hover); color: var(--text); }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .hero-inner { padding-bottom: clamp(180px,30vh,260px); }
  .facts { padding-top: 7px; padding-bottom: 7px; }
  .facts li { padding-inline: 14px; }
  .facts li + li { border-left: 0; }
}
@media (max-width: 768px) {
  h1, .hero-title { font-size: clamp(24px,4.5vw,30px); }
  .grid-three { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --gutter: 18px; --section-space: 56px; }
  .grid-two { grid-template-columns: 1fr; }
  .tilt, [data-tilt] { transform: none !important; }
  .brand-name { font-size: 15.5px; }
  .brand { gap: 8px; }
  .brand-mark { width: 30px; height: 30px; }
  .utility-group-right { gap: 22px; }
  .language-long { display: none; }
  .language-short { display: inline; }
  .hero-lede { font-size: 15px; }
  .hero-inner { padding-top: 42px; }
  .platform { padding-inline: 11px; }
  .btn-sm { padding-inline: 14px; }
  .panel, .card { padding: 22px; }
  pre { padding: 18px; font-size: 12.5px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-pending .reveal:not(.shown) { opacity: 1; transform: none; }
}