:root{
  --page-bg:#f5f5f1;
  --panel:#ffffff;
  --panel-alt:#fbfaf7;
  --text:#101010;
  --muted:#6f6e69;
  --line:rgba(16,16,16,.08);
  --line-strong:rgba(16,16,16,.14);
  --soft:rgba(16,16,16,.04);
  --accent:#111111;
  --accent-strong:#111111;
  --accent-soft:rgba(17,17,17,.10);
  --accent-secondary:#111111;
  --accent-tertiary:#ffffff;
  --radius:30px;
  --hero-radius:34px;
  --shadow:0 24px 70px rgba(15,23,42,.08);
  --inner-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  --body-orb-a:rgba(255,255,255,.72);
  --body-orb-b:rgba(235,232,225,.9);
  --body-grid:rgba(17,17,17,.03);
  --dock-bg:rgba(255,255,255,.76);
  --dock-border:rgba(17,17,17,.08);
  --dock-text:#121212;
  --dock-muted:#737373;
  --dock-shadow:0 18px 48px rgba(15,23,42,.12);
  --chip-bg:rgba(255,255,255,.88);
  --chip-text:#171717;
  --chip-active-bg:#111111;
  --chip-active-text:#ffffff;
  --mode-toggle-bg:rgba(255,255,255,.86);
  --save-glow:rgba(17,17,17,.14);
  --result-poster-glow:rgba(255,255,255,.48);
  --title-tracking:-.06em;
  --title-weight:800;
  --button-primary-text:#ffffff;
  --device-badge-bg:rgba(255,255,255,.86);
  --device-badge-text:#111111;
  --device-badge-border:rgba(17,17,17,.08);
  --screen-accent:rgba(255,255,255,.08);
  --screen-overlay:transparent;
  --scanline:transparent;
  --ring:0 0 0 1px rgba(255,255,255,.08);
  --card-blur:none;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-right:env(safe-area-inset-right, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);
}

html[data-theme="social"][data-mode="day"]{
  --page-bg:
    linear-gradient(90deg, rgba(43,31,37,.040) 1px, transparent 1px),
    linear-gradient(180deg, rgba(43,31,37,.040) 1px, transparent 1px),
    radial-gradient(circle at 16% 7%, rgba(255,248,238,.95), transparent 31%),
    radial-gradient(circle at 86% 4%, rgba(111,29,46,.13), transparent 25%),
    radial-gradient(circle at 14% 92%, rgba(84,104,86,.13), transparent 27%),
    linear-gradient(180deg, #f6eee2 0%, #e7dbcf 100%);
  --panel:#fff8ee;
  --panel-alt:#efe2d4;
  --text:#1b1517;
  --muted:#76665f;
  --line:rgba(43,31,37,.18);
  --line-strong:rgba(43,31,37,.34);
  --soft:rgba(111,29,46,.075);
  --accent:#6f1d2e;
  --accent-strong:#26191d;
  --accent-soft:rgba(111,29,46,.14);
  --accent-secondary:#546856;
  --accent-tertiary:#dcc39d;
  --radius:22px;
  --hero-radius:28px;
  --shadow:0 14px 0 rgba(43,31,37,.055), 0 28px 54px rgba(72,40,36,.12);
  --body-orb-a:rgba(255,248,238,.48);
  --body-orb-b:rgba(111,29,46,.10);
  --body-grid:rgba(43,31,37,.065);
  --dock-bg:rgba(255,248,238,.94);
  --dock-border:rgba(43,31,37,.18);
  --dock-text:#1b1517;
  --dock-muted:#76665f;
  --dock-shadow:0 12px 0 rgba(43,31,37,.055), 0 20px 42px rgba(72,40,36,.12);
  --chip-bg:#fffdf8;
  --chip-active-bg:#26191d;
  --chip-active-text:#ffffff;
  --save-glow:rgba(111,29,46,.20);
  --result-poster-glow:rgba(255,255,255,.88);
  --screen-accent:
    linear-gradient(90deg, rgba(43,31,37,.052) 1px, transparent 1px),
    linear-gradient(180deg, rgba(43,31,37,.052) 1px, transparent 1px);
  --ring:none;
}

html[data-theme="social"][data-mode="night"]{
  color-scheme:dark;
  --page-bg:
    linear-gradient(90deg, rgba(231,205,178,.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(231,205,178,.055) 1px, transparent 1px),
    radial-gradient(circle at 18% 0%, rgba(124,43,60,.24), transparent 27%),
    radial-gradient(circle at 82% 7%, rgba(84,104,86,.16), transparent 24%),
    linear-gradient(180deg, #171114 0%, #09070a 100%);
  --panel:rgba(27,21,25,.94);
  --panel-alt:rgba(34,27,31,.96);
  --text:#f3e8dc;
  --muted:#b9a99d;
  --line:rgba(243,232,220,.16);
  --line-strong:rgba(243,232,220,.28);
  --soft:rgba(231,205,178,.075);
  --accent:#e5c79a;
  --accent-strong:#f0d9ad;
  --accent-soft:rgba(229,199,154,.13);
  --accent-secondary:#cf7486;
  --accent-tertiary:#26191d;
  --radius:22px;
  --hero-radius:28px;
  --shadow:0 14px 0 rgba(231,205,178,.035), 0 30px 70px rgba(0,0,0,.56);
  --body-orb-a:rgba(229,199,154,.10);
  --body-orb-b:rgba(207,116,134,.08);
  --body-grid:rgba(231,205,178,.08);
  --dock-bg:rgba(18,14,17,.88);
  --dock-border:rgba(243,232,220,.16);
  --dock-text:#f3e8dc;
  --dock-muted:#b9a99d;
  --dock-shadow:0 20px 56px rgba(0,0,0,.44);
  --chip-bg:rgba(243,232,220,.07);
  --chip-text:#f3e8dc;
  --chip-active-bg:#f0d9ad;
  --chip-active-text:#1b1517;
  --mode-toggle-bg:rgba(231,205,178,.07);
  --device-badge-bg:rgba(231,205,178,.07);
  --device-badge-text:#f3e8dc;
  --device-badge-border:rgba(243,232,220,.08);
  --save-glow:rgba(229,199,154,.12);
  --result-poster-glow:rgba(229,199,154,.06);
  --screen-accent:
    linear-gradient(90deg, rgba(231,205,178,.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(231,205,178,.055) 1px, transparent 1px);
  --ring:none;
}

html[data-theme="messenger"][data-mode="day"]{
  --page-bg:
    radial-gradient(circle at 14% 8%, rgba(255,255,255,.92), transparent 26%),
    radial-gradient(circle at 86% 6%, rgba(171,158,255,.48), transparent 28%),
    radial-gradient(circle at 17% 92%, rgba(64,224,208,.18), transparent 27%),
    radial-gradient(circle at 78% 90%, rgba(255,143,125,.13), transparent 26%),
    linear-gradient(180deg, #f4f5ff 0%, #e1e5ff 100%);
  --panel:rgba(255,255,255,.94);
  --panel-alt:rgba(248,249,255,.95);
  --text:#11152b;
  --muted:#66708c;
  --line:rgba(79,70,229,.12);
  --line-strong:rgba(79,70,229,.22);
  --soft:rgba(79,70,229,.06);
  --accent:#4f46e5;
  --accent-strong:linear-gradient(90deg, #4f46e5, #06b6d4);
  --accent-soft:rgba(79,70,229,.11);
  --accent-secondary:#06b6d4;
  --accent-tertiary:#ecebff;
  --shadow:0 24px 64px rgba(79,70,229,.12);
  --dock-bg:rgba(255,255,255,.84);
  --dock-border:rgba(79,70,229,.12);
  --dock-text:#11152b;
  --dock-muted:#6c7390;
  --dock-shadow:0 20px 52px rgba(79,70,229,.14);
  --chip-bg:rgba(255,255,255,.94);
  --chip-text:#11152b;
  --chip-active-bg:linear-gradient(90deg, #4f46e5, #06b6d4);
  --chip-active-text:#ffffff;
  --device-badge-bg:rgba(255,255,255,.9);
  --device-badge-text:#11152b;
  --device-badge-border:rgba(79,70,229,.10);
  --save-glow:rgba(79,70,229,.20);
  --result-poster-glow:rgba(255,255,255,.46);
}

html[data-theme="messenger"][data-mode="night"]{
  color-scheme:dark;
  --page-bg:
    radial-gradient(circle at 18% 6%, rgba(139,92,246,.28), transparent 28%),
    radial-gradient(circle at 82% 0%, rgba(34,211,238,.17), transparent 22%),
    radial-gradient(circle at 14% 96%, rgba(251,113,133,.10), transparent 28%),
    linear-gradient(180deg, #0b0d20 0%, #0d1028 52%, #060712 100%);
  --panel:rgba(15,18,42,.88);
  --panel-alt:rgba(19,23,50,.92);
  --text:#f6f7ff;
  --muted:#adb4d2;
  --line:rgba(165,180,252,.16);
  --line-strong:rgba(196,181,253,.24);
  --soft:rgba(255,255,255,.05);
  --accent:#a5b4fc;
  --accent-strong:linear-gradient(90deg, #8b5cf6, #22d3ee);
  --accent-soft:rgba(165,180,252,.16);
  --accent-secondary:#22d3ee;
  --accent-tertiary:#141b34;
  --shadow:0 28px 80px rgba(2,5,23,.50);
  --dock-bg:rgba(12,15,34,.80);
  --dock-border:rgba(255,255,255,.09);
  --dock-text:#f6f7ff;
  --dock-muted:#adb4d2;
  --dock-shadow:0 22px 58px rgba(0,0,0,.46);
  --chip-bg:rgba(255,255,255,.055);
  --chip-text:#f6f7ff;
  --chip-active-bg:linear-gradient(90deg, #8b5cf6, #22d3ee);
  --chip-active-text:#ffffff;
  --device-badge-bg:rgba(255,255,255,.05);
  --device-badge-text:#f6f7ff;
  --device-badge-border:rgba(255,255,255,.08);
  --save-glow:rgba(139,92,246,.20);
  --result-poster-glow:rgba(34,211,238,.08);
}

html[data-theme="apple"][data-mode="day"]{
  --page-bg:
    radial-gradient(circle at 14% 5%, rgba(255,255,255,.98), transparent 23%),
    radial-gradient(circle at 84% 4%, rgba(157,202,255,.30), transparent 28%),
    radial-gradient(circle at 18% 94%, rgba(218,197,255,.20), transparent 30%),
    radial-gradient(circle at 78% 90%, rgba(170,236,235,.18), transparent 33%),
    linear-gradient(180deg, #fcfdff 0%, #f4f8ff 44%, #edf1f7 100%);
  --panel:rgba(255,255,255,.74);
  --panel-alt:rgba(255,255,255,.58);
  --text:#08111f;
  --muted:#667082;
  --line:rgba(88,107,142,.12);
  --line-strong:rgba(88,107,142,.20);
  --soft:rgba(255,255,255,.50);
  --accent:#2f80ed;
  --accent-strong:linear-gradient(135deg, #2f80ed 0%, #76b7ff 52%, #d8c7ff 100%);
  --accent-soft:rgba(47,128,237,.12);
  --accent-secondary:#d8c7ff;
  --accent-tertiary:#ffffff;
  --radius:36px;
  --hero-radius:46px;
  --shadow:0 28px 86px rgba(54,79,126,.13), inset 0 1px 0 rgba(255,255,255,.70);
  --body-orb-a:rgba(255,255,255,.88);
  --body-orb-b:rgba(157,202,255,.22);
  --body-grid:rgba(255,255,255,.20);
  --dock-bg:rgba(255,255,255,.34);
  --dock-border:rgba(255,255,255,.52);
  --dock-text:#11131a;
  --dock-muted:#747d8e;
  --dock-shadow:0 18px 52px rgba(41,82,140,.16), inset 0 1px 0 rgba(255,255,255,.72);
  --chip-bg:rgba(255,255,255,.50);
  --chip-text:#12141b;
  --chip-active-bg:linear-gradient(135deg, rgba(47,128,237,.94), rgba(118,183,255,.90));
  --chip-active-text:#ffffff;
  --device-badge-bg:rgba(255,255,255,.70);
  --device-badge-text:#11131a;
  --device-badge-border:rgba(19,21,27,.06);
  --save-glow:rgba(47,128,237,.20);
  --result-poster-glow:rgba(255,255,255,.72);
  --screen-accent:
    radial-gradient(circle at 50% -12%, rgba(255,255,255,.88), transparent 46%),
    linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.42) 48%, transparent 62%);
  --ring:0 0 0 1px rgba(255,255,255,.52);
  --card-blur:blur(8px);
  --liquid-glass:
    radial-gradient(circle at 18% 4%, rgba(255,255,255,.94), rgba(255,255,255,.26) 36%, transparent 68%),
    linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.28) 48%, rgba(255,255,255,.14));
  --liquid-edge:rgba(255,255,255,.66);
  --liquid-inner:rgba(255,255,255,.74);
  --liquid-shadow:0 16px 46px rgba(43,82,140,.17), inset 0 1px 0 rgba(255,255,255,.76), inset 0 -1px 0 rgba(255,255,255,.24);
  --liquid-specular:rgba(255,255,255,.68);
}

html[data-theme="apple"][data-mode="night"]{
  color-scheme:dark;
  --page-bg:
    radial-gradient(circle at 18% 0%, rgba(96,145,255,.28), transparent 26%),
    radial-gradient(circle at 86% 8%, rgba(148,118,255,.20), transparent 24%),
    radial-gradient(circle at 20% 92%, rgba(121,220,220,.12), transparent 32%),
    radial-gradient(circle at 76% 92%, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(180deg, #101827 0%, #070b14 56%, #030407 100%);
  --panel:rgba(18,23,34,.64);
  --panel-alt:rgba(24,31,46,.58);
  --text:#f8fbff;
  --muted:#b1bdd1;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.20);
  --soft:rgba(255,255,255,.08);
  --accent:#bfd7ff;
  --accent-strong:linear-gradient(135deg, #ffffff 0%, #bfd7ff 48%, #d5c7ff 100%);
  --accent-soft:rgba(157,202,255,.18);
  --accent-secondary:#d5c7ff;
  --accent-tertiary:#171920;
  --radius:36px;
  --hero-radius:46px;
  --shadow:0 30px 96px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.14);
  --body-orb-a:rgba(143,183,255,.18);
  --body-orb-b:rgba(180,94,255,.12);
  --body-grid:rgba(255,255,255,.035);
  --dock-bg:rgba(18,24,35,.42);
  --dock-border:rgba(255,255,255,.16);
  --dock-text:#f5f6fb;
  --dock-muted:#bbc3d0;
  --dock-shadow:0 24px 72px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.16);
  --chip-bg:rgba(255,255,255,.07);
  --chip-text:#f5f6fb;
  --chip-active-bg:linear-gradient(135deg, rgba(255,255,255,.96), rgba(159,203,255,.88) 58%, rgba(116,236,255,.84));
  --chip-active-text:#06111f;
  --device-badge-bg:rgba(255,255,255,.05);
  --device-badge-text:#f5f6fb;
  --device-badge-border:rgba(255,255,255,.08);
  --save-glow:rgba(128,205,255,.24);
  --result-poster-glow:rgba(143,183,255,.12);
  --screen-accent:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.18), transparent 52%),
    linear-gradient(115deg, transparent 0 32%, rgba(255,255,255,.12) 48%, transparent 64%);
  --ring:0 0 0 1px rgba(255,255,255,.10);
  --card-blur:blur(8px);
  --liquid-glass:
    radial-gradient(circle at 18% 4%, rgba(255,255,255,.22), rgba(255,255,255,.08) 36%, transparent 68%),
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08) 48%, rgba(255,255,255,.04));
  --liquid-edge:rgba(255,255,255,.20);
  --liquid-inner:rgba(255,255,255,.18);
  --liquid-shadow:0 18px 54px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.07);
  --liquid-specular:rgba(255,255,255,.28);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

html[data-theme][data-mode] body{
  min-height:100vh;
  color:var(--text);
  background:var(--page-bg);
  position:relative;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  padding-bottom:var(--safe-bottom);
}

html[data-theme][data-mode] body::before,
html[data-theme][data-mode] body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}

html[data-theme][data-mode] body::before{
  background:
    radial-gradient(circle at 15% 10%, var(--body-orb-a), transparent 28%),
    radial-gradient(circle at 85% 0%, var(--body-orb-b), transparent 24%);
  opacity:.88;
}

html[data-theme][data-mode] body::after{
  background:
    linear-gradient(90deg, transparent 0, transparent 96%, var(--body-grid) 96%, transparent 100%),
    linear-gradient(180deg, transparent 0, transparent 96%, var(--body-grid) 96%, transparent 100%);
  background-size:140px 140px;
  opacity:.4;
  mix-blend-mode:soft-light;
}

html[data-theme][data-mode] .shell{
  position:relative;
  z-index:1;
  max-width:1220px;
  margin:0 auto;
  padding:
    calc(112px + var(--safe-top))
    calc(20px + var(--safe-right))
    calc(72px + var(--safe-bottom))
    calc(20px + var(--safe-left));
}

html[data-theme][data-mode] .card,
html[data-theme][data-mode] .question,
html[data-theme][data-mode] .poster-box,
html[data-theme][data-mode] .type-box,
html[data-theme][data-mode] .analysis-box,
html[data-theme][data-mode] .dim-box,
html[data-theme][data-mode] .note-box,
html[data-theme][data-mode] .author-box{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)),
    var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow), var(--ring);
  backdrop-filter:var(--card-blur);
  -webkit-backdrop-filter:var(--card-blur);
  transform:translateZ(0);
  backface-visibility:hidden;
}

html[data-theme][data-mode] .hero{
  border-radius:var(--hero-radius);
  overflow:hidden;
}

html[data-theme][data-mode] .hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--screen-accent);
  opacity:.5;
  pointer-events:none;
}

html[data-theme][data-mode] .hero::after{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  width:220px;
  height:220px;
  top:-80px;
  right:-80px;
  pointer-events:none;
}

html[data-theme][data-mode] .hero-minimal{
  min-height:46vh;
  justify-content:flex-start;
  align-items:center;
  text-align:center;
  padding:42px;
}

html[data-theme][data-mode] h1,
html[data-theme][data-mode] h2,
html[data-theme][data-mode] h3{
  color:var(--text);
}

html[data-theme][data-mode] .hero h1{
  width:max-content;
  max-width:min(100%, 900px);
  margin:0 auto;
  text-align:center;
  letter-spacing:var(--title-tracking);
  font-size:clamp(40px,5.4vw,72px);
  line-height:1.02;
  font-weight:var(--title-weight);
  position:relative;
  z-index:1;
  word-break:keep-all;
  overflow-wrap:normal;
  text-wrap:balance;
}

html[data-theme][data-mode] .hero h1 span{
  display:block;
}

html[data-theme="social"][data-mode="day"] .hero h1,
html[data-theme="social"][data-mode="night"] .hero h1{
  max-width:min(100%, 860px);
  font-size:clamp(44px,5.2vw,72px);
  line-height:1.02;
}

html[data-theme="messenger"][data-mode] .hero h1{
  max-width:min(100%, 820px);
  font-size:clamp(42px,5vw,66px);
  line-height:1.04;
}

html[data-theme="apple"][data-mode] .hero-minimal{
  align-items:center;
  text-align:center;
}

html[data-theme="apple"][data-mode] .hero h1{
  max-width:min(100%, 780px);
  font-size:clamp(34px,5vw,64px);
  line-height:1.02;
}

html[data-theme="apple"][data-mode="day"] .hero,
html[data-theme="apple"][data-mode="night"] .hero{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02)),
    var(--panel);
}

html[data-theme="social"][data-mode] body::before{
  opacity:.5;
  background:
    radial-gradient(circle at 50% -8%, var(--body-orb-a), transparent 28%),
    radial-gradient(circle at 16% 22%, var(--body-orb-b), transparent 20%);
}

html[data-theme="social"][data-mode] body::after{
  background:
    linear-gradient(90deg, var(--body-grid) 1px, transparent 1px),
    linear-gradient(180deg, var(--body-grid) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.72;
  mix-blend-mode:normal;
}

html[data-theme="social"][data-mode] .card,
html[data-theme="social"][data-mode] .question,
html[data-theme="social"][data-mode] .poster-box,
html[data-theme="social"][data-mode] .type-box,
html[data-theme="social"][data-mode] .analysis-box,
html[data-theme="social"][data-mode] .dim-box,
html[data-theme="social"][data-mode] .note-box,
html[data-theme="social"][data-mode] .author-box{
  background:var(--panel);
  border:1.5px solid var(--line-strong);
  box-shadow:var(--shadow);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

html[data-theme="social"][data-mode] .hero{
  border:1.5px solid var(--line-strong);
}

html[data-theme="social"][data-mode] .hero::before{
  background:
    linear-gradient(90deg, var(--body-grid) 1px, transparent 1px),
    linear-gradient(180deg, var(--body-grid) 1px, transparent 1px);
  background-size:24px 24px;
  opacity:.62;
}

html[data-theme="social"][data-mode] .hero::after{
  width:108px;
  height:108px;
  top:26px;
  right:28px;
  border:1.5px solid var(--line-strong);
  border-radius:50%;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) center/42px 2px no-repeat,
    linear-gradient(90deg, var(--line-strong), var(--line-strong)) center/2px 42px no-repeat;
  opacity:.56;
}

html[data-theme="social"][data-mode] .hero h1{
  text-transform:uppercase;
  letter-spacing:-.035em;
  color:var(--text);
  text-shadow:none;
}

html[data-theme="social"][data-mode] .btn-primary{
  border:1.5px solid var(--accent-strong);
  box-shadow:0 8px 0 color-mix(in srgb, var(--accent-strong) 14%, transparent), 0 20px 34px var(--save-glow);
}

html[data-theme="social"][data-mode] .home-theme-switch,
html[data-theme="social"][data-mode] .theme-dock{
  border:1.5px solid var(--line-strong);
  background:var(--dock-bg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

html[data-theme="social"][data-mode] .theme-chip,
html[data-theme="social"][data-mode] .mode-chip,
html[data-theme="social"][data-mode] .option,
html[data-theme="social"][data-mode] .dim-item{
  border-width:1.5px;
  border-radius:16px;
}

html[data-theme="social"][data-mode] .question::before{
  display:none;
}

html[data-theme="social"][data-mode] .question::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background:var(--accent-strong);
  opacity:.9;
}

html[data-theme="social"][data-mode] .poster-image{
  border:1.5px solid var(--line-strong);
  box-shadow:none;
}

html[data-theme="apple"][data-mode] body::before{
  background:
    radial-gradient(circle at 16% 6%, var(--body-orb-a), transparent 26%),
    radial-gradient(circle at 84% 8%, var(--body-orb-b), transparent 28%),
    radial-gradient(circle at 52% 96%, var(--accent-soft), transparent 32%);
  opacity:.92;
}

html[data-theme="apple"][data-mode] body::after{
  background:
    radial-gradient(circle at 50% -4%, rgba(255,255,255,.48), transparent 44%),
    linear-gradient(132deg, transparent 0 36%, rgba(255,255,255,.18) 48%, transparent 62%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.08));
  background-size:auto;
  opacity:.66;
  mix-blend-mode:screen;
}

html[data-theme="apple"][data-mode] body{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-feature-settings:"kern";
  text-rendering:geometricPrecision;
}

html[data-theme="apple"][data-mode] .shell{
  max-width:1260px;
}

html[data-theme="apple"][data-mode] .hero{
  background:
    radial-gradient(circle at 50% -13%, rgba(255,255,255,.86), transparent 45%),
    linear-gradient(148deg, rgba(255,255,255,.60), rgba(255,255,255,.24) 50%, rgba(255,255,255,.12)),
    var(--panel);
  border:1px solid var(--liquid-edge);
  box-shadow:0 28px 90px rgba(39,74,126,.14), inset 0 1px 0 var(--liquid-inner), inset 0 -1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(10px) saturate(1.22);
  -webkit-backdrop-filter:blur(10px) saturate(1.22);
}

html[data-theme="apple"][data-mode="night"] .hero{
  border-color:var(--liquid-edge);
  box-shadow:0 32px 100px rgba(0,0,0,.50), inset 0 1px 0 var(--liquid-inner), inset 0 -1px 0 rgba(255,255,255,.06);
}

html[data-theme="apple"][data-mode] .hero-minimal{
  min-height:372px;
  padding:52px 44px 76px;
  gap:0;
}

html[data-theme="apple"][data-mode] .hero::before{
  background:
    linear-gradient(115deg, transparent 0 32%, var(--liquid-specular) 48%, transparent 64%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.62), transparent 46%),
    radial-gradient(circle at 78% 18%, var(--accent-soft), transparent 32%);
  opacity:.82;
}

html[data-theme="apple"][data-mode] .hero::after{
  width:310px;
  height:310px;
  top:-126px;
  right:50%;
  transform:translateX(50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.78), transparent 25%),
    radial-gradient(circle, color-mix(in srgb, var(--accent-secondary) 42%, white 58%), transparent 68%);
  filter:none;
  opacity:.46;
}

html[data-theme="apple"][data-mode] .hero h1{
  background:linear-gradient(135deg, var(--text) 0%, var(--accent) 42%, var(--accent-secondary) 72%, color-mix(in srgb, var(--accent-secondary) 44%, white 56%) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  max-width:min(100%, 760px);
  font-size:clamp(44px,5.7vw,76px);
  line-height:.98;
  font-weight:760;
  letter-spacing:-.065em;
  filter:drop-shadow(0 8px 18px var(--save-glow));
}

html[data-theme="apple"][data-mode] .card,
html[data-theme="apple"][data-mode] .question,
html[data-theme="apple"][data-mode] .poster-box,
html[data-theme="apple"][data-mode] .type-box,
html[data-theme="apple"][data-mode] .analysis-box,
html[data-theme="apple"][data-mode] .dim-box,
html[data-theme="apple"][data-mode] .note-box,
html[data-theme="apple"][data-mode] .author-box{
  background:
    linear-gradient(145deg, rgba(255,255,255,.30), rgba(255,255,255,.08)),
    var(--panel);
  border-color:var(--liquid-edge);
  box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.20);
}

html[data-theme="apple"][data-mode="night"] .card,
html[data-theme="apple"][data-mode="night"] .question,
html[data-theme="apple"][data-mode="night"] .poster-box,
html[data-theme="apple"][data-mode="night"] .type-box,
html[data-theme="apple"][data-mode="night"] .analysis-box,
html[data-theme="apple"][data-mode="night"] .dim-box,
html[data-theme="apple"][data-mode="night"] .note-box,
html[data-theme="apple"][data-mode="night"] .author-box{
  border-color:rgba(255,255,255,.12);
  box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.08);
}

html[data-theme="apple"][data-mode] .btn-primary{
  position:relative;
  background:var(--accent-strong);
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  min-height:50px;
  padding:0 24px;
  font-size:16px;
  font-weight:650;
  letter-spacing:-.018em;
  box-shadow:0 16px 42px var(--save-glow), inset 0 1px 0 rgba(255,255,255,.40);
  overflow:hidden;
  isolation:isolate;
}

html[data-theme="apple"][data-mode] .btn-secondary{
  border-radius:999px;
  min-height:50px;
  padding:0 24px;
  color:var(--text);
  background:var(--liquid-glass);
  border:1px solid var(--liquid-edge);
  box-shadow:var(--liquid-shadow);
}

html[data-theme="apple"][data-mode] .btn-primary::before{
  content:"";
  position:absolute;
  inset:1px;
  z-index:-1;
  border-radius:inherit;
  background:
    linear-gradient(115deg, rgba(255,255,255,.46), transparent 42%),
    radial-gradient(circle at 70% 0%, rgba(255,255,255,.42), transparent 40%);
  opacity:.75;
}

html[data-theme="apple"][data-mode] .home-theme-switch,
html[data-theme="apple"][data-mode] .theme-dock{
  background:var(--liquid-glass);
  border-color:var(--liquid-edge);
  box-shadow:var(--liquid-shadow);
  backdrop-filter:blur(18px) saturate(1.45) brightness(1.03);
  -webkit-backdrop-filter:blur(18px) saturate(1.45) brightness(1.03);
}

html[data-theme="apple"][data-mode] .home-theme-switch{
  gap:8px;
  margin-top:22px;
  padding:8px;
  border-radius:999px;
}

html[data-theme="apple"][data-mode] .home-theme-row{
  gap:6px;
}

html[data-theme="apple"][data-mode] .home-mode-row{
  padding-left:10px;
}

html[data-theme="apple"][data-mode] .hero-actions-single{
  margin-top:28px;
}

html[data-theme="apple"][data-mode="night"] .home-theme-switch,
html[data-theme="apple"][data-mode="night"] .theme-dock{
  border-color:var(--liquid-edge);
  box-shadow:var(--liquid-shadow);
}

html[data-theme="apple"][data-mode] .theme-chip,
html[data-theme="apple"][data-mode] .mode-chip{
  min-width:72px;
  height:34px;
  padding:0 14px;
  background:var(--chip-bg);
  border-color:rgba(255,255,255,.24);
  border-radius:999px;
  font-size:13px;
  font-weight:650;
  letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32);
  backdrop-filter:blur(8px) saturate(1.25);
  -webkit-backdrop-filter:blur(8px) saturate(1.25);
}

html[data-theme="apple"][data-mode] .theme-chip.is-active,
html[data-theme="apple"][data-mode] .mode-chip.is-active{
  background:var(--chip-active-bg);
  color:var(--chip-active-text);
  border-color:rgba(255,255,255,.34);
  box-shadow:0 8px 22px var(--save-glow), inset 0 1px 0 rgba(255,255,255,.48);
}

html[data-theme="apple"][data-mode] .option,
html[data-theme="apple"][data-mode] .dim-item,
html[data-theme="apple"][data-mode] .match{
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.04)),
    color-mix(in srgb, var(--panel) 78%, var(--soft) 22%);
  border-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
}

html[data-theme="apple"][data-mode] .test-wrap,
html[data-theme="apple"][data-mode] .result-wrap{
  border-radius:40px;
  padding:30px;
}

html[data-theme="apple"][data-mode] .question,
html[data-theme="apple"][data-mode] .poster-box,
html[data-theme="apple"][data-mode] .type-box,
html[data-theme="apple"][data-mode] .analysis-box,
html[data-theme="apple"][data-mode] .dim-box,
html[data-theme="apple"][data-mode] .note-box,
html[data-theme="apple"][data-mode] .author-box{
  border-radius:30px;
}

html[data-theme="apple"][data-mode] .question{
  padding:24px;
}

html[data-theme="apple"][data-mode] .question-title,
html[data-theme="apple"][data-mode] .analysis-box p,
html[data-theme="apple"][data-mode] .dim-item p,
html[data-theme="apple"][data-mode] .note-box p{
  letter-spacing:-.012em;
}

html[data-theme="apple"][data-mode] .option{
  min-height:56px;
  align-items:center;
  border-radius:20px;
  padding:15px 16px;
}

html[data-theme="apple"][data-mode] .progress{
  height:9px;
  border:0;
  background:color-mix(in srgb, var(--panel-alt) 82%, rgba(255,255,255,.18) 18%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
}

html[data-theme="apple"][data-mode] .progress > span{
  background:var(--accent-strong);
  box-shadow:0 0 18px var(--save-glow);
}

html[data-theme="apple"][data-mode] .type-name{
  font-weight:760;
  letter-spacing:-.065em;
}

html[data-theme="apple"][data-mode] .match{
  min-height:40px;
  padding:9px 14px;
  border-radius:999px;
  font-weight:650;
}

html[data-theme="apple"][data-mode] .poster-image{
  box-shadow:0 26px 72px rgba(0,0,0,.10), 0 0 0 1px rgba(255,255,255,.52);
}

html[data-theme][data-mode] .hero-actions-single{
  justify-content:center;
  width:100%;
  margin-top:26px;
  position:relative;
  z-index:3;
  pointer-events:auto;
}

html[data-theme="apple"][data-mode] .hero-actions-single{
  justify-content:center;
}

html[data-theme][data-mode] .intro-author,
html[data-theme][data-mode] .intro-disclaimer{
  color:var(--muted);
  position:relative;
  z-index:1;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

html[data-theme][data-mode] .preview-feature-note{
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--soft);
  font-size:12px;
  font-weight:700;
}

html[data-theme="apple"][data-mode] .preview-feature-note{
  background:rgba(255,255,255,.34);
}

html[data-theme][data-mode] .home-theme-switch{
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:20px;
  margin-left:auto;
  margin-right:auto;
  padding:10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--soft);
  pointer-events:auto;
}

html[data-theme][data-mode] .home-theme-switch button,
html[data-theme][data-mode] #startBtn{
  position:relative;
  z-index:4;
  pointer-events:auto;
}

html[data-theme][data-mode] .home-theme-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
}

html[data-theme][data-mode] .home-mode-row{
  padding-left:8px;
  border-left:1px solid var(--line);
}

html[data-theme][data-mode] button{
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .2s ease;
  transform:translateZ(0);
  backface-visibility:hidden;
}

html[data-theme][data-mode] .btn-primary{
  color:var(--button-primary-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    var(--accent-strong);
  border:1px solid transparent;
  box-shadow:0 18px 36px var(--save-glow);
}

html[data-theme][data-mode] .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 40px var(--save-glow);
}

html[data-theme][data-mode] .btn-secondary{
  color:var(--accent);
  background:var(--soft);
  border:1px solid var(--line);
}

html[data-theme="social"][data-mode="night"] .btn-primary,
html[data-theme="apple"][data-mode="night"] .btn-primary{
  color:#111214;
}

html[data-theme][data-mode] .test-wrap,
html[data-theme][data-mode] .result-wrap{
  padding:28px;
}

html[data-theme][data-mode] .topbar{
  margin-bottom:22px;
}

html[data-theme][data-mode] .progress{
  background:var(--soft);
  border:1px solid var(--line);
  height:12px;
}

html[data-theme][data-mode] .progress > span{
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent-secondary) 70%, white 30%), var(--accent-strong));
}

html[data-theme][data-mode] .progress-text,
html[data-theme][data-mode] .hint,
html[data-theme][data-mode] .question-meta,
html[data-theme][data-mode] .poster-search-tip,
html[data-theme][data-mode] .type-subname,
html[data-theme][data-mode] .poster-caption,
html[data-theme][data-mode] .note-box p,
html[data-theme][data-mode] .author-content p,
html[data-theme][data-mode] .dim-item p{
  color:var(--muted);
}

html[data-theme][data-mode] .question-list{
  gap:18px;
}

html[data-theme][data-mode] .question{
  position:relative;
  overflow:hidden;
  padding:22px;
}

html[data-theme][data-mode] .question::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:92px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  pointer-events:none;
}

html[data-theme][data-mode] .question-meta{
  position:relative;
  z-index:1;
}

html[data-theme][data-mode] .badge{
  background:var(--soft);
  border:1px solid var(--line);
  color:var(--accent);
  font-weight:700;
}

html[data-theme="apple"][data-mode] .badge{
  background:rgba(255,255,255,.35);
}

html[data-theme][data-mode] .question-title{
  position:relative;
  z-index:1;
  font-size:17px;
  line-height:1.8;
}

html[data-theme][data-mode] .option{
  background:color-mix(in srgb, var(--panel) 82%, var(--soft) 18%);
  border:1px solid var(--line);
  border-radius:18px;
}

html[data-theme][data-mode] .option:hover{
  border-color:var(--line-strong);
  background:color-mix(in srgb, var(--panel) 72%, var(--soft) 28%);
}

html[data-theme="messenger"][data-mode] .option{
  border-radius:22px;
}

html[data-theme="apple"][data-mode] .option{
  border-radius:24px;
}

html[data-theme][data-mode] .option input{
  accent-color:var(--accent-strong);
}

html[data-theme][data-mode] .option-code,
html[data-theme][data-mode] .type-kicker,
html[data-theme][data-mode] .dim-item-score,
html[data-theme][data-mode] .top3-score{
  color:var(--accent-strong);
}

html[data-theme][data-mode] .result-top{
  align-items:stretch;
  gap:20px;
}

html[data-theme][data-mode] .poster-box{
  position:relative;
  min-height:320px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0)),
    var(--panel-alt);
}

html[data-theme="messenger"][data-mode] .poster-box,
html[data-theme="messenger"][data-mode] .type-box,
html[data-theme="messenger"][data-mode] .analysis-box,
html[data-theme="messenger"][data-mode] .dim-box,
html[data-theme="messenger"][data-mode] .note-box,
html[data-theme="messenger"][data-mode] .author-box{
  border-radius:32px;
}

html[data-theme="apple"][data-mode] .poster-box,
html[data-theme="apple"][data-mode] .type-box,
html[data-theme="apple"][data-mode] .analysis-box,
html[data-theme="apple"][data-mode] .dim-box,
html[data-theme="apple"][data-mode] .note-box,
html[data-theme="apple"][data-mode] .author-box{
  border-radius:34px;
}

html[data-theme][data-mode] .poster-image{
  position:relative;
  z-index:1;
  background:var(--result-poster-glow);
  border-radius:22px;
  box-shadow:0 18px 46px rgba(0,0,0,.06);
}

html[data-theme][data-mode] .poster-caption{
  position:relative;
  z-index:1;
  font-size:14px;
}

html[data-theme][data-mode] .type-box,
html[data-theme][data-mode] .analysis-box,
html[data-theme][data-mode] .dim-box,
html[data-theme][data-mode] .note-box{
  padding:20px 20px 22px;
}

html[data-theme][data-mode] .type-name{
  font-size:clamp(34px,5vw,58px);
  line-height:1.02;
  letter-spacing:-.05em;
}

html[data-theme][data-mode] .match{
  margin-top:16px;
  background:var(--soft);
  border:1px solid var(--line);
  color:var(--accent);
  box-shadow:none;
}

html[data-theme][data-mode] .analysis-box p{
  color:var(--text);
  opacity:.92;
}

html[data-theme][data-mode] .dim-item{
  background:color-mix(in srgb, var(--panel-alt) 86%, var(--soft) 14%);
  border:1px solid var(--line);
  border-radius:18px;
}

html[data-theme][data-mode] .author-box summary::after{
  background:var(--soft);
  border:1px solid var(--line);
  color:var(--accent);
}

html[data-theme][data-mode] .result-action-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

html[data-theme][data-mode] .save-feedback{
  color:var(--muted);
  min-height:20px;
  margin-top:12px;
  font-size:13px;
  line-height:1.7;
}

.theme-dock{
  position:fixed;
  top:calc(16px + var(--safe-top));
  right:calc(16px + var(--safe-right));
  z-index:9999;
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 12px;
  border:1px solid var(--dock-border);
  border-radius:26px;
  background:var(--dock-bg);
  box-shadow:var(--dock-shadow);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transform:translateZ(0);
  backface-visibility:hidden;
}

body[data-screen="intro"] .theme-dock{
  display:none;
}

.dock-group{
  display:flex;
  align-items:center;
  gap:8px;
}

.theme-dock-label{
  color:var(--dock-muted);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.theme-dock-list{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.theme-chip,
.mode-chip{
  min-width:66px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--chip-bg);
  color:var(--chip-text);
  font-size:12px;
  font-weight:800;
  line-height:1;
}

.theme-chip:hover,
.mode-chip:hover{
  transform:none;
  opacity:.92;
}

.theme-chip.is-active,
.mode-chip.is-active{
  background:var(--chip-active-bg);
  color:var(--chip-active-text);
}

.device-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 12px;
  border:1px solid var(--device-badge-border);
  border-radius:999px;
  background:var(--device-badge-bg);
  color:var(--device-badge-text);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.device-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent-strong);
  box-shadow:0 0 0 6px var(--accent-soft);
}

html[data-device="mobile"] .shell{
  max-width:480px;
  padding-top:calc(120px + var(--safe-top));
  padding-right:calc(14px + var(--safe-right));
  padding-bottom:calc(48px + var(--safe-bottom));
  padding-left:calc(14px + var(--safe-left));
}

html[data-device="mobile"] .hero-minimal{
  min-height:auto;
  padding:26px 22px;
}

html[data-device="mobile"] .hero h1{
  max-width:100%;
  font-size:clamp(30px,9vw,38px);
  line-height:1.08;
  letter-spacing:-.04em;
}

html[data-device="mobile"][data-theme="apple"] .hero h1{
  font-size:clamp(30px,9vw,38px);
}

html[data-device="mobile"] .test-wrap,
html[data-device="mobile"] .result-wrap{
  padding:16px;
}

html[data-device="mobile"] .result-top{
  grid-template-columns:1fr;
}

html[data-device="mobile"] .poster-search-tip{
  writing-mode:horizontal-tb;
  text-align:center;
  padding:0 0 4px;
}

html[data-device="mobile"] .result-action-row{
  flex-direction:column;
}

html[data-device="mobile"] .result-action-row button{
  width:100%;
}

html[data-device="mobile"] .question{
  padding:18px 16px;
}

html[data-device="mobile"] .theme-dock{
  left:calc(12px + var(--safe-left));
  right:calc(12px + var(--safe-right));
  top:calc(12px + var(--safe-top));
  flex-wrap:wrap;
  justify-content:space-between;
  border-radius:22px;
  padding:12px;
}

html[data-device="mobile"] .dock-group{
  width:100%;
  justify-content:space-between;
}

html[data-device="mobile"] .theme-dock-list{
  justify-content:flex-end;
}

html[data-device="mobile"] .theme-chip,
html[data-device="mobile"] .mode-chip{
  min-width:auto;
  padding:9px 11px;
}

html[data-device="mobile"] .home-theme-switch{
  width:100%;
  border-radius:22px;
  margin-top:18px;
}

html[data-device="mobile"] .home-theme-row{
  width:100%;
}

html[data-device="mobile"] .home-mode-row{
  padding-left:0;
  padding-top:8px;
  border-left:0;
  border-top:1px solid var(--line);
}

html[data-device="mobile"] .card,
html[data-device="mobile"] .question,
html[data-device="mobile"] .poster-box,
html[data-device="mobile"] .type-box,
html[data-device="mobile"] .analysis-box,
html[data-device="mobile"] .dim-box,
html[data-device="mobile"] .note-box,
html[data-device="mobile"] .author-box,
html[data-device="mobile"] .theme-dock,
html[data-device="mobile"] .home-theme-switch{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

html[data-device="mobile"] body::after{
  opacity:.34;
}

html[data-device="mobile"][data-theme="apple"] body::after{
  opacity:.42;
}

html[data-device="mobile"][data-theme="apple"] .theme-dock,
html[data-device="mobile"][data-theme="apple"] .home-theme-switch{
  backdrop-filter:blur(12px) saturate(1.28);
  -webkit-backdrop-filter:blur(12px) saturate(1.28);
}

html[data-device="mobile"] .screen.active .question:nth-child(n+5){
  animation-delay:.08s;
}

@media (width<=860px){
  html[data-theme][data-mode] .result-top{
    grid-template-columns:1fr;
  }

  html[data-theme][data-mode] .poster-search-tip{
    writing-mode:horizontal-tb;
    text-align:center;
  }
}

@media (prefers-reduced-motion:reduce){
  html[data-theme][data-mode] *,
  html[data-theme][data-mode] *::before,
  html[data-theme][data-mode] *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@keyframes socialEnter{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

@keyframes socialFade{
  from{opacity:0;transform:translate3d(0,10px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

@keyframes messengerBubble{
  0%{opacity:0;transform:translate3d(0,18px,0) scale(.985)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

@keyframes appleReveal{
  from{opacity:0;transform:translate3d(0,16px,0) scale(.992)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

html[data-theme="social"] .screen.active .hero,
html[data-theme="social"] .screen.active .test-wrap,
html[data-theme="social"] .screen.active .result-wrap{
  animation:socialEnter .48s cubic-bezier(.16,1,.3,1) both;
  will-change:transform, opacity;
}

html[data-theme="social"] .screen.active .question,
html[data-theme="social"] .screen.active .result-top > *,
html[data-theme="social"] .screen.active .analysis-box,
html[data-theme="social"] .screen.active .dim-box,
html[data-theme="social"] .screen.active .note-box,
html[data-theme="social"] .screen.active .author-box{
  animation:socialFade .38s cubic-bezier(.16,1,.3,1) both;
  will-change:transform, opacity;
}

html[data-theme="messenger"] .screen.active .hero,
html[data-theme="messenger"] .screen.active .test-wrap,
html[data-theme="messenger"] .screen.active .result-wrap,
html[data-theme="messenger"] .screen.active .question{
  animation:messengerBubble .42s cubic-bezier(.16,1,.3,1) both;
  will-change:transform, opacity;
}

html[data-theme="apple"] .screen.active .hero,
html[data-theme="apple"] .screen.active .test-wrap,
html[data-theme="apple"] .screen.active .result-wrap,
html[data-theme="apple"] .screen.active .question,
html[data-theme="apple"] .screen.active .result-top > *,
html[data-theme="apple"] .screen.active .analysis-box,
html[data-theme="apple"] .screen.active .dim-box,
html[data-theme="apple"] .screen.active .note-box,
html[data-theme="apple"] .screen.active .author-box{
  animation:appleReveal .5s cubic-bezier(.16,1,.3,1) both;
  will-change:transform, opacity;
}

.screen.active .question:nth-child(1){animation-delay:.02s}
.screen.active .question:nth-child(2){animation-delay:.04s}
.screen.active .question:nth-child(3){animation-delay:.06s}
.screen.active .question:nth-child(4){animation-delay:.08s}
.screen.active .question:nth-child(5){animation-delay:.10s}
.screen.active .question:nth-child(6){animation-delay:.12s}
.screen.active .question:nth-child(n+7){animation-delay:.12s}
.screen.active .result-top > *:nth-child(1){animation-delay:.04s}
.screen.active .result-top > *:nth-child(2){animation-delay:.07s}
.screen.active .result-top > *:nth-child(3){animation-delay:.10s}
.screen.active .analysis-box{animation-delay:.13s}
.screen.active .dim-box{animation-delay:.16s}
.screen.active .note-box{animation-delay:.19s}
.screen.active .author-box{animation-delay:.22s}

.save-preview-overlay{
  position:fixed;
  inset:0;
  z-index:10001;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    calc(24px + var(--safe-top))
    calc(20px + var(--safe-right))
    calc(24px + var(--safe-bottom))
    calc(20px + var(--safe-left));
  background:rgba(6,8,12,.58);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}

.save-preview-overlay.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.save-preview-panel{
  width:min(100%, 420px);
  max-height:min(100%, 820px);
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)),
    var(--panel);
  box-shadow:var(--shadow), var(--ring);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}

.save-preview-close{
  align-self:flex-end;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--soft);
  color:var(--accent);
  font-size:12px;
  font-weight:800;
}

.save-preview-copy h3{
  margin:0 0 8px;
  font-size:20px;
}

.save-preview-copy p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
  font-size:13px;
}

.save-preview-image-wrap{
  flex:1;
  min-height:0;
  overflow:auto;
  border-radius:24px;
  background:color-mix(in srgb, var(--panel-alt) 88%, var(--soft) 12%);
  border:1px solid var(--line);
  padding:10px;
}

.save-preview-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.14);
}

body.has-save-preview{
  overflow:hidden;
}

html[data-device="mobile"] .save-preview-panel{
  width:min(100%, 460px);
  border-radius:28px;
}