/* 01 theme effects (v1.5 proposal). Colours come only from dist/themes.css variables; no raw values here.
   Each theme changes the vibe, never the layout: the same components, roles and progress logic. */

/* ===== Retro: 1984 neon ===== */
.zo-theme-retro .zo-screen { background: radial-gradient(120% 60% at 50% 110%, color-mix(in srgb, var(--zo-fx-glow-c) 16%, transparent), transparent 60%), var(--zo-canvas); }
.zo-theme-retro .zo-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 9; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--zo-fx-glow-d) 5%, transparent) 0 1px, transparent 1px 3px); }
.zo-theme-retro .zo-display { font-family: var(--zo-font-display); font-weight: 400; font-size: 38px; line-height: 44px; letter-spacing: 1px; color: var(--zo-fx-glow-d);
  text-shadow: 0 0 4px color-mix(in srgb, var(--zo-fx-glow-b) 80%, transparent), 0 0 14px color-mix(in srgb, var(--zo-fx-glow-a) 55%, transparent), 0 0 30px color-mix(in srgb, var(--zo-fx-glow-c) 40%, transparent); }
.zo-theme-retro .zo-title { font-style: oblique 10deg; font-stretch: 75%; font-weight: 700; letter-spacing: 0;
  background: linear-gradient(to bottom, var(--zo-ink-primary) 0 54%, transparent 54% 59%, var(--zo-fx-glow-b) 59% 68%, transparent 68% 72%, var(--zo-fx-glow-a) 72% 82%, transparent 82% 86%, var(--zo-fx-glow-c) 86%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.zo-theme-retro .zo-metric, .zo-theme-retro .zo-timer { color: var(--zo-fx-glow-d); text-shadow: 0 0 10px color-mix(in srgb, var(--zo-fx-glow-b) 55%, transparent); }
.zo-theme-retro .zo-timerHero { font-family: var(--zo-font-display); font-weight: 400; font-size: 104px; line-height: 112px; letter-spacing: 2px; color: var(--zo-fx-glow-d);
  text-shadow: 0 0 6px var(--zo-fx-glow-b), 0 0 22px color-mix(in srgb, var(--zo-fx-glow-a) 70%, transparent), 0 0 48px color-mix(in srgb, var(--zo-fx-glow-c) 50%, transparent); }
.zo-theme-retro .zo-card, .zo-theme-retro .zo-list { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zo-fx-glow-c) 26%, transparent); }
.zo-theme-retro .zo-btn.primary { background: var(--zo-accent) linear-gradient(180deg, var(--zo-fx-glow-d) 0, var(--zo-accent) 30%, var(--zo-fx-glow-b) 72%, var(--zo-fx-glow-a) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--zo-fx-glow-d) 60%, transparent), 0 0 18px color-mix(in srgb, var(--zo-fx-glow-b) 55%, transparent), 0 0 44px color-mix(in srgb, var(--zo-fx-glow-a) 30%, transparent); }
.zo-theme-retro .zo-restline b { background: linear-gradient(90deg, var(--zo-fx-glow-c), var(--zo-fx-glow-a), var(--zo-fx-glow-b), var(--zo-accent)); box-shadow: 0 0 12px var(--zo-fx-glow-b); }
.zo-theme-retro .zo-ring .arc { filter: drop-shadow(0 0 3px var(--zo-fx-glow-b)); }
.zo-theme-retro .zo-rail i.done { background: var(--zo-ink-primary); box-shadow: 0 0 6px color-mix(in srgb, var(--zo-fx-glow-b) 70%, transparent); }
.zo-theme-retro .zo-tab-main { background: var(--zo-canvas); color: var(--zo-accent); box-shadow: 0 0 0 2px var(--zo-accent), 0 0 16px var(--zo-fx-glow-b), inset 0 0 12px color-mix(in srgb, var(--zo-fx-glow-a) 40%, transparent); }
.zo-theme-retro .zo-tab[aria-current] { color: var(--zo-fx-glow-d); text-shadow: 0 0 8px var(--zo-fx-glow-b); }
.zo-theme-retro .zo-check { background: transparent; color: var(--zo-fx-glow-d); box-shadow: 0 0 0 2px var(--zo-fx-glow-d), 0 0 14px var(--zo-fx-glow-b); }
/* The card: a theme picks its default edition (components.css), the person can pick any. */
.zo-theme-retro .zo-member.ed-auto { --ed-1: var(--zo-ed-neon-1); --ed-2: var(--zo-ed-neon-2); --ed-3: var(--zo-ed-neon-3); --ed-4: var(--zo-ed-neon-1); --ed-ink: var(--zo-ed-neon-ink); --ed-ink2: var(--zo-ed-neon-ink2); --ed-ink3: var(--zo-ed-neon-ink3); --ed-mark: var(--zo-ed-neon-mark); --ed-shine: 14%; }
.zo-theme-retro .zo-confetti, .zo-theme-freak .zo-confetti, .zo-theme-princess .zo-confetti { display: none; }

/* Retro celebration: concentric neon rings and a striped sunset */
.fx-rings { position: absolute; left: 50%; top: 32px; width: 180px; height: 180px; margin-left: -90px; pointer-events: none; z-index: 0; }
.fx-rings circle { fill: none; stroke-width: 3; }
.fx-rings .r1 { stroke: var(--zo-fx-glow-d); filter: drop-shadow(0 0 6px var(--zo-fx-glow-b)); }
.fx-rings .r2 { stroke: var(--zo-fx-glow-b); filter: drop-shadow(0 0 6px var(--zo-fx-glow-a)); }
.fx-rings .r3 { stroke: var(--zo-fx-glow-a); filter: drop-shadow(0 0 8px var(--zo-fx-glow-c)); }
.fx-rings .r4 { stroke: var(--zo-fx-glow-c); filter: drop-shadow(0 0 10px var(--zo-fx-glow-c)); opacity: .8; }
.fx-sun { position: absolute; left: 50%; top: 60px; width: 220px; height: 110px; margin-left: -110px; border-radius: 110px 110px 0 0; pointer-events: none; z-index: 0; opacity: .85;
  background: linear-gradient(to bottom, var(--zo-fx-sunset-1), var(--zo-fx-sunset-2) 30%, var(--zo-fx-sunset-3) 55%, var(--zo-fx-sunset-4) 78%, var(--zo-fx-sunset-5));
  -webkit-mask-image: linear-gradient(to bottom, black 0 40%, transparent 40% 46%, black 46% 62%, transparent 62% 70%, black 70% 80%, transparent 80% 90%, black 90%);
  mask-image: linear-gradient(to bottom, black 0 40%, transparent 40% 46%, black 46% 62%, transparent 62% 70%, black 70% 80%, transparent 80% 90%, black 90%); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--zo-fx-glow-a) 60%, transparent)); }

/* ===== Retro in daylight: the printed poster ===== */
.zo-theme-retro.zo-light .zo-screen { background: linear-gradient(to top, color-mix(in srgb, var(--zo-fx-glow-b) 14%, transparent) 0, transparent 22%), var(--zo-canvas); }
.zo-theme-retro.zo-light .zo-screen::after { background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--zo-ink-primary) 2.5%, transparent) 0 1px, transparent 1px 3px); }
.zo-theme-retro.zo-light .zo-display, .zo-theme-retro.zo-light .zo-timerHero { color: var(--zo-ink-primary); text-shadow: 2px 2px 0 var(--zo-fx-glow-a), 4px 4px 0 var(--zo-fx-glow-b); }
.zo-theme-retro.zo-light .zo-metric, .zo-theme-retro.zo-light .zo-timer { color: var(--zo-ink-primary); text-shadow: none; }
.zo-theme-retro.zo-light .zo-card, .zo-theme-retro.zo-light .zo-list { box-shadow: inset 0 0 0 1px var(--zo-separator-strong); }
.zo-theme-retro.zo-light .zo-btn.primary { background: var(--zo-accent) linear-gradient(180deg, var(--zo-accent) 0, var(--zo-fx-glow-b) 62%, var(--zo-fx-glow-a) 100%); box-shadow: 3px 3px 0 var(--zo-ink-primary); }
.zo-theme-retro.zo-light .zo-restline b { box-shadow: none; }
.zo-theme-retro.zo-light .zo-ring .arc { filter: none; }
.zo-theme-retro.zo-light .zo-rail i.done { box-shadow: none; }
.zo-theme-retro.zo-light .zo-tab-main { background: var(--zo-ink-primary); color: var(--zo-accent); box-shadow: 0 0 0 2px var(--zo-accent), 3px 3px 0 2px var(--zo-fx-glow-a); }
.zo-theme-retro.zo-light .zo-tab[aria-current] { color: var(--zo-ink-primary); text-shadow: none; }
.zo-theme-retro.zo-light .zo-check { color: var(--zo-ink-primary); box-shadow: 0 0 0 2px var(--zo-ink-primary), 2px 2px 0 2px var(--zo-fx-glow-a); }
.zo-theme-retro.zo-light .fx-rings circle { filter: none; }
.zo-theme-retro.zo-light .fx-rings .r1 { stroke: var(--zo-ink-primary); }
.zo-theme-retro.zo-light .fx-sun { filter: none; opacity: 1; }

/* ===== Freak: metal-print gym wear, chrome, sharp edges, cybersigilism ===== */
.zo-theme-freak { --sigil: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60'><g id='h'><path d='M144 30C118 22 78 12 18 28C70 20 116 28 144 35Z'/><path d='M122 23C113 12 102 5 86 1C99 9 107 15 116 25Z'/><path d='M110 31C101 43 89 51 71 58C86 48 96 40 104 30Z'/><path d='M66 20C59 13 52 9 42 7C51 12 56 16 61 22Z'/><path d='M40 25C30 31 19 34 3 34C17 30 27 27 36 23Z'/><path d='M86 28C80 34 74 37 64 38C72 35 78 31 82 27Z'/></g><g transform='matrix(-1 0 0 1 300 0)'><path d='M144 30C118 22 78 12 18 28C70 20 116 28 144 35Z'/><path d='M122 23C113 12 102 5 86 1C99 9 107 15 116 25Z'/><path d='M110 31C101 43 89 51 71 58C86 48 96 40 104 30Z'/><path d='M66 20C59 13 52 9 42 7C51 12 56 16 61 22Z'/><path d='M40 25C30 31 19 34 3 34C17 30 27 27 36 23Z'/><path d='M86 28C80 34 74 37 64 38C72 35 78 31 82 27Z'/></g><path d='M150 2L157 30L150 58L143 30Z'/></svg>");
  --chrome: linear-gradient(180deg, var(--zo-fx-chrome-1) 0, var(--zo-fx-chrome-3) 30%, var(--zo-fx-chrome-2) 50%, var(--zo-fx-chrome-4) 52%, var(--zo-fx-chrome-3) 80%, var(--zo-fx-chrome-1) 100%);
  --cut: polygon(var(--zo-fx-chamfer) 0, 100% 0, 100% calc(100% - var(--zo-fx-chamfer)), calc(100% - var(--zo-fx-chamfer)) 100%, 0 100%, 0 var(--zo-fx-chamfer)); }
.zo-theme-freak.zo-light { --chrome: linear-gradient(180deg, var(--zo-ink-secondary) 0, var(--zo-ink-primary) 50%, var(--zo-ink-secondary) 100%); }
/* v1.7: buttons get a smooth chrome, no hard horizon line: a soft highlight at the top, the body, a darker foot. The same structure in dark (polished steel) and light (graphite). */
.zo-theme-freak { --chrome-btn: linear-gradient(180deg, var(--zo-fx-chrome-1) 0, var(--zo-fx-chrome-3) 26%, var(--zo-accent) 58%, color-mix(in srgb, var(--zo-accent) 78%, var(--zo-fx-chrome-2)) 100%); }
.zo-theme-freak.zo-light { --chrome-btn: linear-gradient(180deg, color-mix(in srgb, var(--zo-accent) 70%, white) 0, color-mix(in srgb, var(--zo-accent) 88%, white) 26%, var(--zo-accent) 58%, color-mix(in srgb, var(--zo-accent) 80%, black) 100%); }
.zo-theme-freak .zo-screen { background: radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--zo-ink-primary) 7%, transparent), transparent 70%), var(--zo-canvas); }
.zo-theme-freak.zo-light .zo-screen { background: repeating-linear-gradient(90deg, color-mix(in srgb, white 30%, transparent) 0 1px, transparent 1px 4px), linear-gradient(170deg, var(--zo-surface-1), var(--zo-canvas) 40%, var(--zo-surface-2)) var(--zo-canvas); }
.zo-theme-freak .zo-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 9; opacity: var(--zo-fx-grit); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.zo-theme-freak .zo-display, .zo-theme-freak .zo-title { font-family: var(--zo-font-display); font-weight: 400; letter-spacing: .3px; font-stretch: 100%; }
.zo-theme-freak .zo-display { font-size: 44px; line-height: 48px; }
.zo-theme-freak .zo-title { font-size: 28px; line-height: 32px; }
.zo-theme-freak .zo-metric, .zo-theme-freak .zo-timer, .zo-theme-freak .zo-timerHero { font-family: var(--zo-font-numbers); font-weight: 400; text-transform: uppercase; letter-spacing: .5px; font-stretch: 100%; }
.zo-theme-freak .zo-metric { font-size: 34px; line-height: 38px; }
.zo-theme-freak .zo-timerHero { font-size: 132px; line-height: 132px; letter-spacing: -1px; }
.zo-theme-freak.zo-dark .zo-timerHero, .zo-theme-freak.zo-dark .zo-display { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* The sigil sits under every screen title and exercise name, etched in chrome. */
.zo-theme-freak .zo-head-row .zo-display::after, .zo-theme-freak .zo-scroll > .zo-display::after { content: ""; display: block; width: 150px; height: 24px; margin: 0 0 4px -12px; background: var(--chrome); -webkit-mask: var(--sigil) no-repeat left center / contain; mask: var(--sigil) no-repeat left center / contain; }
.zo-theme-freak .zo-btn.primary { clip-path: var(--cut); background: var(--zo-accent) var(--chrome-btn); color: var(--zo-on-accent); font-family: var(--zo-font-numbers); font-weight: 400; font-size: 20px; text-transform: uppercase; letter-spacing: 1.5px; box-shadow: inset 0 1px 0 color-mix(in srgb, white 45%, transparent); }
.zo-theme-freak .zo-card, .zo-theme-freak .zo-list { clip-path: var(--cut); box-shadow: inset 0 0 0 1px var(--zo-separator-strong), inset 0 1px 0 color-mix(in srgb, var(--zo-ink-primary) 14%, transparent); }
.zo-theme-freak .zo-tab-main { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 64px; height: 64px; margin-top: -8px; background: var(--zo-accent) var(--chrome-btn); color: var(--zo-on-accent); }
.zo-theme-freak .zo-rail i, .zo-theme-freak .zo-steps i, .zo-theme-freak .zo-restline, .zo-theme-freak .zo-restline b { border-radius: 0; }
.zo-theme-freak .zo-restline b { background: var(--chrome); }
.zo-theme-freak .zo-check { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--zo-ink-primary); color: var(--zo-canvas); }
.zo-theme-freak .zo-member.ed-auto { --ed-1: var(--zo-ed-chrome-1); --ed-2: var(--zo-ed-chrome-2); --ed-3: var(--zo-ed-chrome-3); --ed-4: var(--zo-ed-chrome-4); --ed-ink: var(--zo-ed-chrome-ink); --ed-ink2: var(--zo-ed-chrome-ink2); --ed-ink3: var(--zo-ed-chrome-ink3); --ed-mark: var(--zo-ed-chrome-mark); --ed-shine: var(--zo-ed-chrome-shine); }
.zo-theme-freak .zo-member.ed-auto .stripe, .zo-member.ed-chrome .stripe { background: var(--ed-ink); }

/* Freak celebration: the chrome stamp, sigil wings and steel shards */
.fx-slam ~ .zo-scroll .zo-check { visibility: hidden; }
.fx-wings { position: absolute; left: 50%; top: 78px; width: 340px; height: 68px; margin-left: -170px; z-index: 0; pointer-events: none; background: var(--chrome); -webkit-mask: var(--sigil) no-repeat center / contain; mask: var(--sigil) no-repeat center / contain; }
.fx-slam { position: absolute; left: 50%; top: 84px; transform: translateX(-50%) rotate(-6deg); z-index: 1; pointer-events: none; padding: 4px 18px 6px; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  font: 400 50px/54px var(--zo-font-display); white-space: nowrap; background: var(--zo-accent) var(--chrome); color: var(--zo-on-accent); }
.fx-dust { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.fx-dust i { position: absolute; width: 2px; border-radius: 0; background: var(--chrome); }
.fx-dust i.a { width: 3px; background: var(--zo-ink-primary); }

/* ===== Princess: soft power ===== */
.zo-theme-princess .zo-screen { background: radial-gradient(90% 50% at 85% 0%, color-mix(in srgb, var(--zo-fx-lilac) 22%, transparent), transparent 70%), radial-gradient(80% 40% at 0% 100%, color-mix(in srgb, var(--zo-accent) 14%, transparent), transparent 70%), var(--zo-canvas); }
.zo-theme-princess .zo-display, .zo-theme-princess .zo-title { font-family: var(--zo-font-display); font-style: italic; font-weight: 600; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72; letter-spacing: -.3px; }
.zo-theme-princess .zo-display { font-size: 38px; line-height: 44px; }
.zo-theme-princess .zo-timer, .zo-theme-princess .zo-timerHero { font-family: var(--zo-font); }
.zo-theme-princess .zo-card, .zo-theme-princess .zo-list { background: linear-gradient(140deg, var(--zo-surface-1) 0, var(--zo-surface-1) 55%, color-mix(in srgb, var(--zo-fx-lilac) 12%, var(--zo-surface-1)) 100%); }
.zo-theme-princess .zo-btn.primary { box-shadow: var(--zo-accent-edge), 0 8px 22px color-mix(in srgb, var(--zo-accent) 45%, transparent); }
.zo-theme-princess .zo-tab-main { background: linear-gradient(140deg, var(--zo-accent), var(--zo-fx-lilac)); color: var(--zo-on-accent); }
.zo-theme-princess .zo-restline b { background: linear-gradient(90deg, var(--zo-fx-lilac), var(--zo-accent)); }
.zo-theme-princess .zo-rail i, .zo-theme-princess .zo-steps i { border-radius: 4px; }
.zo-theme-princess .zo-member.ed-auto { --ed-1: var(--zo-ed-pink-1); --ed-2: var(--zo-ed-pink-2); --ed-3: var(--zo-ed-pink-3); --ed-4: var(--zo-ed-pink-4); --ed-ink: var(--zo-ed-pink-ink); --ed-ink2: var(--zo-ed-pink-ink2); --ed-ink3: var(--zo-ed-pink-ink3); --ed-mark: var(--zo-ed-pink-mark); --ed-shine: 42%; }
.zo-theme-princess .zo-member.ed-auto .stripe { background: var(--ed-ink); }
.zo-theme-princess .zo-member.ed-auto .founding { background: color-mix(in srgb, var(--ed-ink) 12%, transparent); color: var(--ed-ink); }
/* Princess celebration: sparkles */
.fx-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.fx-sparkles svg { position: absolute; }
.fx-sparkles .p { fill: var(--zo-accent); }
.fx-sparkles .l { fill: var(--zo-fx-lilac); }
.fx-sparkles .w { fill: var(--zo-fx-pearl-1); filter: drop-shadow(0 0 3px var(--zo-accent)); }

/* Theme picker tiles */
.zo-themetile { position: relative; border-radius: 18px; overflow: hidden; padding: 14px; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; background: var(--zo-canvas); color: var(--zo-ink-primary); box-shadow: inset 0 0 0 1px var(--zo-separator-strong); }
.zo-themetile .word { font: 700 30px/34px var(--zo-font-display, var(--zo-font)); }
.zo-themetile .pill { align-self: flex-start; height: 26px; padding: 0 12px; border-radius: 13px; background: var(--zo-accent); color: var(--zo-on-accent); font: 600 13px/26px var(--zo-font); }
.zo-themetile .meta { font: 400 13px/18px var(--zo-font); color: var(--zo-ink-secondary); }
.zo-themetile.on { outline: 3px solid var(--zo-picker-ring, currentColor); outline-offset: 3px; }
.zo-themetile .lock { position: absolute; right: 12px; top: 12px; color: var(--zo-ink-secondary); }

/* v1.6 matching app icons: the approved mark at the same size and place as today's icon; only the background changes. */
.zo-appicon { position: relative; border-radius: 22.4%; overflow: hidden; flex: none; box-shadow: 0 8px 22px color-mix(in srgb, black 28%, transparent), inset 0 0 0 1px color-mix(in srgb, white 8%, transparent); }
.zo-appicon .bg { position: absolute; inset: 0; }
.zo-appicon .mk { position: absolute; left: 11.1%; top: 11.2%; width: 77%; height: 77%; fill: currentColor; }
.zo-appicon.ic-core .bg { background: var(--zo-brand-signal); }
.zo-appicon.ic-core .mk { color: var(--zo-brand-onyx); }
.zo-appicon.ic-retro .bg { background: radial-gradient(90% 60% at 50% 110%, color-mix(in srgb, var(--zo-fx-glow-c) 55%, transparent), transparent 70%), var(--zo-ed-neon-2); }
.zo-appicon.ic-retro .bg::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: -52%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(to bottom, var(--zo-fx-sunset-1), var(--zo-fx-sunset-2) 25%, var(--zo-fx-sunset-3) 45%, var(--zo-fx-sunset-4) 65%, var(--zo-fx-sunset-5));
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0 7%, transparent 7% 10%); mask-image: repeating-linear-gradient(to bottom, black 0 7%, transparent 7% 10%); opacity: .9; }
.zo-appicon.ic-retro .mk { color: var(--zo-brand-ink); filter: drop-shadow(0 0 3px var(--zo-fx-glow-b)) drop-shadow(0 0 10px var(--zo-fx-glow-a)); }
.zo-appicon.ic-freak .bg { background: repeating-linear-gradient(90deg, color-mix(in srgb, white 5%, transparent) 0 1px, transparent 1px 3px), linear-gradient(155deg, var(--zo-ed-chrome-2), var(--zo-ed-chrome-3) 45%, var(--zo-ed-chrome-4) 75%, var(--zo-ed-chrome-1)); }
.zo-appicon.ic-freak .bg::after { content: ""; position: absolute; left: -6%; right: -6%; top: 26%; height: 48%; background: color-mix(in srgb, white 30%, transparent); -webkit-mask: var(--sigil) no-repeat center / contain; mask: var(--sigil) no-repeat center / contain; }
.zo-appicon.ic-freak .mk { color: var(--zo-brand-ink); filter: drop-shadow(0 2px 2px color-mix(in srgb, black 60%, transparent)); }
.zo-appicon.ic-princess .bg { background: radial-gradient(70% 70% at 80% 10%, color-mix(in srgb, white 45%, transparent), transparent 60%), linear-gradient(150deg, var(--zo-ed-pink-1), var(--zo-ed-pink-2) 45%, var(--zo-ed-pink-4)); }
.zo-appicon.ic-princess .mk { color: var(--zo-brand-onyx); }
.zo-homescreen { display: flex; gap: 28px; flex-wrap: wrap; padding: 28px; border-radius: 28px; background: linear-gradient(160deg, var(--zo-surface-2), var(--zo-surface-3)); }
.zo-homescreen figure { margin: 0; display: grid; justify-items: center; gap: 8px; font: 500 13px/18px var(--zo-font); color: var(--zo-ink-secondary); }

/* 4 Oct gaps: the temporary (trial) card in a theme. It takes the theme's edition material like the real card;
   only the dashed inner edge and the outlined Trial pill say it is not yours yet, both in the edition's own ink (never core yellow). */
.zo-theme-retro .zo-member.is-trial.ed-auto, .zo-theme-freak .zo-member.is-trial.ed-auto, .zo-theme-princess .zo-member.is-trial.ed-auto { background: var(--ed-2) linear-gradient(155deg, var(--ed-1) 0%, var(--ed-2) 42%, var(--ed-3) 72%, var(--ed-4) 100%); }
.zo-theme-retro .zo-member.is-trial::after, .zo-theme-freak .zo-member.is-trial::after, .zo-theme-princess .zo-member.is-trial::after { border-color: color-mix(in srgb, var(--ed-ink) 45%, transparent); }
.zo-theme-retro .zo-member.is-trial .top .zo-mark, .zo-theme-freak .zo-member.is-trial .top .zo-mark, .zo-theme-princess .zo-member.is-trial .top .zo-mark { color: var(--ed-mark); }
.zo-theme-retro .zo-member .founding.trial, .zo-theme-freak .zo-member .founding.trial, .zo-theme-princess .zo-member .founding.trial { background: transparent; color: var(--ed-ink); box-shadow: inset 0 0 0 1px var(--ed-ink); }