/* Graydient Apps — component styles.
   Plain CSS on top of tokens.css. Values come from tokens; gradients and tints are composed from them here.
   Class prefix: ga-. State lives in attributes (aria-*, data-state) so a vanilla-JS shell only flips attributes. */

/* ── Base ─────────────────────────────────────────────────────── */
body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 22px; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
.ga-num { font-variant-numeric: tabular-nums; }
.ga-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ga-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ga-icon--sm { width: 16px; height: 16px; }
.ga-grad-text { background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ga-eyebrow { font: 700 11px/14px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.ga-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--job, var(--accent)); flex: none; box-shadow: 0 0 10px var(--job, var(--accent)); }
[data-job="portraits"] { --job: var(--job-portraits); }
[data-job="edits"] { --job: var(--job-edits); }
[data-job="products"] { --job: var(--job-products); }
[data-job="fun"] { --job: var(--job-fun); }
[data-job="style"] { --job: var(--job-style); }
[data-job="fashion"] { --job: var(--job-fashion); }
:where(.ga-btn, .ga-chip, .ga-tile, .ga-card, .ga-drop, .ga-field__control, .ga-drawer > summary, .ga-compare__handle, .ga-gallery__item, .ga-menu__item, .ga-hcard__open, .ga-tab, .ga-generate, .ga-video__play, .ga-link):focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
@media (prefers-reduced-motion: reduce) { [class^="ga-"], [class^="ga-"]::before, [class^="ga-"]::after, [class*=" ga-"], [class*=" ga-"]::before, [class*=" ga-"]::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }

/* ── Button ───────────────────────────────────────────────────── */
.ga-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-md); padding: 0 20px; border-radius: var(--radius-full); border: 0; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 700 15px/20px var(--font-sans); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
.ga-btn:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.ga-btn:active { transform: scale(.97); }
.ga-btn--primary { background: linear-gradient(100deg, var(--accent), var(--accent-2)); color: var(--on-accent); box-shadow: var(--glow-accent); }
.ga-btn--primary:hover { background: linear-gradient(100deg, var(--accent-hover), var(--accent-2)); box-shadow: var(--glow-accent); transform: translateY(-1px); }
.ga-btn--ghost { background: transparent; box-shadow: none; color: var(--ink); }
.ga-btn--ghost:hover { background: var(--surface-raised); box-shadow: none; }
.ga-btn--sm { height: var(--control-sm); padding: 0 14px; font-size: 13px; line-height: 18px; }
.ga-btn--icon { width: var(--control-md); padding: 0; }
.ga-btn--sm.ga-btn--icon { width: var(--control-sm); }
.ga-btn--block { width: 100%; }
.ga-btn:disabled, .ga-btn[aria-disabled="true"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-disabled); cursor: not-allowed; transform: none; }
.ga-btn--on-media { background: var(--scrim); box-shadow: none; color: var(--on-media); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ga-btn--on-media:hover { box-shadow: inset 0 0 0 1px var(--on-media); }

/* ── Generate button (the one primary action) ─────────────────── */
.ga-generate { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: var(--control-lg); border: 0; border-radius: var(--radius-full); background: linear-gradient(100deg, var(--accent), var(--accent-2)); background-size: 100% 100%; color: var(--on-accent); font: 800 17px/20px var(--font-sans); letter-spacing: -.01em; cursor: pointer; box-shadow: var(--glow-accent); transition: transform var(--duration-fast) var(--ease-pop), box-shadow var(--duration-fast) var(--ease-standard), filter var(--duration-fast) var(--ease-standard); }
.ga-generate:hover { transform: translateY(-2px); filter: saturate(1.15) brightness(1.06); }
.ga-generate:active { transform: scale(.98); }
.ga-generate__meta { font: 500 13px/18px var(--font-sans); opacity: .8; font-variant-numeric: tabular-nums; }
.ga-generate:disabled { background: var(--surface-raised); color: var(--ink-disabled); box-shadow: inset 0 0 0 1px var(--line); cursor: not-allowed; transform: none; filter: none; }
.ga-generate[data-state="queued"] { background: linear-gradient(100deg, var(--accent), var(--accent-2), var(--accent)); background-size: 200% 100%; animation: ga-flow var(--duration-shimmer) linear infinite; cursor: progress; transform: none; }
.ga-generate[data-state="rendering"] { background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); cursor: progress; transform: none; filter: none; }
.ga-generate[data-state="again"] { background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); filter: none; }
.ga-generate__bar { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--progress, 0%); background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px var(--accent); transition: width var(--duration-base) linear; }
.ga-generate[data-state="rendering"] .ga-generate__bar { height: 100%; opacity: .3; box-shadow: none; }
.ga-generate[data-state="rendering"] .ga-generate__bar::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-2); }
.ga-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: ga-spin .8s linear infinite; flex: none; }
@keyframes ga-spin { to { transform: rotate(360deg); } }
@keyframes ga-flow { from { background-position: 0% 0; } to { background-position: -200% 0; } }
@keyframes ga-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }

/* ── Field scaffolding ───────────────────────────────────────── */
.ga-field { display: grid; gap: 10px; min-width: 0; border: 0; padding: 0; margin: 0; }
.ga-field__label { display: flex; align-items: baseline; gap: var(--space-2); font: 700 15px/22px var(--font-sans); color: var(--ink); padding: 0; }
.ga-field__opt { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.ga-field__help { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); margin: 0; }
.ga-field__error { display: flex; gap: var(--space-1); align-items: flex-start; font: 600 13px/18px var(--font-sans); color: var(--danger); margin: 0; }

/* ── Text field (input.text) ──────────────────────────────────── */
.ga-field__control { width: 100%; box-sizing: border-box; min-height: var(--control-md); padding: 11px var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-sunken); color: var(--ink); font: 400 15px/22px var(--font-sans); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.ga-field__control::placeholder { color: var(--ink-muted); opacity: 1; }
.ga-field__control:hover { border-color: var(--ink-muted); }
.ga-field__control:focus-visible { border-color: var(--accent); }
textarea.ga-field__control { min-height: 96px; resize: vertical; }
.ga-field__control[aria-invalid="true"] { border-color: var(--danger); }
.ga-field__control:disabled { border-color: var(--line); color: var(--ink-disabled); cursor: not-allowed; }
.ga-field__foot { display: flex; justify-content: space-between; gap: var(--space-3); }

/* ── Photo drop zone (input.image) ────────────────────────────── */
.ga-drop { position: relative; display: grid; place-items: center; align-content: center; text-align: center; gap: var(--space-2); min-height: 220px; padding: var(--space-6) var(--space-4); box-sizing: border-box; border-radius: var(--radius-xl); border: 2px dashed var(--line-strong); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--surface-sunken); color: var(--ink); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-pop); }
.ga-drop:hover { border-color: var(--accent); }
.ga-drop__icon { width: 56px; height: 56px; border-radius: var(--radius-full); display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); box-shadow: var(--glow-accent); margin-bottom: var(--space-1); }
.ga-drop__icon .ga-icon { width: 24px; height: 24px; }
.ga-drop__title { font: 800 17px/22px var(--font-sans); letter-spacing: -.01em; margin: 0; }
.ga-drop__hint { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); margin: 0; }
.ga-drop__hint u { color: var(--accent-ink); font-weight: 600; text-underline-offset: 3px; }
.ga-drop__limits { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); margin: 0; }
.ga-drop__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ga-drop[data-state="over"] { border-style: solid; border-color: var(--accent); background: var(--accent-soft); transform: scale(1.01); box-shadow: var(--glow-accent); }
.ga-drop[data-state="error"] { border-color: var(--danger); background: var(--surface-sunken); }
.ga-drop[data-state="error"] .ga-drop__icon { background: var(--danger-soft); color: var(--danger); box-shadow: none; }
.ga-drop[data-state="filled"] { padding: 0; border: 0; min-height: 0; cursor: default; background: var(--surface-sunken); overflow: hidden; }
.ga-drop__photo { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); }
.ga-drop__bar { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.ga-drop__src { font: 600 12px/16px var(--font-sans); padding: 6px 10px; border-radius: var(--radius-full); background: var(--scrim); color: var(--on-media); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ga-drop[aria-disabled="true"] { border-color: var(--line); background: var(--surface-sunken); color: var(--ink-disabled); cursor: not-allowed; }
.ga-drop[aria-disabled="true"] .ga-drop__icon { background: var(--surface-raised); color: var(--ink-disabled); box-shadow: none; }
.ga-drop[aria-disabled="true"] .ga-drop__hint, .ga-drop[aria-disabled="true"] .ga-drop__limits { color: var(--ink-disabled); }
.ga-drops { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.ga-drops .ga-drop { min-height: 190px; }

/* ── Choice chips (input.choice) ──────────────────────────────── */
.ga-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ga-chip { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); height: 38px; padding: 0 16px; border-radius: var(--radius-full); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 600 13px/18px var(--font-sans); cursor: pointer; user-select: none; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-pop), box-shadow var(--duration-fast) var(--ease-standard); }
.ga-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ga-chip:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.ga-chip:has(input:checked), .ga-chip[aria-checked="true"] { background: var(--ink); color: var(--bg); box-shadow: none; transform: scale(1.03); }
.ga-chip:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.ga-chip:has(input:disabled) { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-disabled); cursor: not-allowed; }
.ga-chip .ga-dot { width: 7px; height: 7px; }
.ga-chip__thumb { width: 26px; height: 26px; border-radius: var(--radius-full); margin-left: -10px; flex: none; }
.ga-chip__thumb.ga-ph::after { content: none; }
.ga-chip--thumb { height: 40px; }

/* ── Preset tiles (input.preset) ──────────────────────────────── */
.ga-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr)); gap: var(--space-3); }
.ga-tile { position: relative; display: grid; gap: var(--space-2); padding: 0; border: 0; background: none; color: var(--ink); font: 700 13px/18px var(--font-sans); text-align: left; cursor: pointer; border-radius: var(--radius-lg); }
.ga-tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.ga-tile__art { aspect-ratio: 1; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-base) var(--ease-pop), filter var(--duration-fast) var(--ease-standard); filter: saturate(.85) brightness(.92); }
.ga-tile__art.ga-ph::after { content: none; }
.ga-tile:hover .ga-tile__art { transform: translateY(-2px); filter: none; }
.ga-tile__name { padding: 0 2px; color: var(--ink-muted); }
.ga-tile__check { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); display: none; place-items: center; }
.ga-tile__check .ga-icon { stroke-width: 3; }
.ga-tile:has(input:checked) .ga-tile__art { box-shadow: 0 0 0 2.5px var(--accent), var(--glow-accent); transform: scale(1.03); filter: none; }
.ga-tile:has(input:checked) .ga-tile__check { display: grid; }
.ga-tile:has(input:checked) .ga-tile__name { color: var(--ink); }
.ga-tile:has(input:focus-visible) .ga-tile__art { box-shadow: var(--focus-ring); }
.ga-tile:has(input:disabled) { color: var(--ink-disabled); cursor: not-allowed; }
.ga-tile:has(input:disabled) .ga-tile__art { opacity: .35; }

/* ── Advanced drawer (graydient.* settings) ───────────────────── */
.ga-drawer { border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); }
.ga-drawer > summary { list-style: none; display: flex; align-items: center; gap: var(--space-3); padding: 14px var(--space-4); cursor: pointer; border-radius: var(--radius-lg); }
.ga-drawer > summary::-webkit-details-marker { display: none; }
.ga-drawer__title { font: 700 15px/22px var(--font-sans); }
.ga-drawer__sum { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); margin-left: auto; text-align: right; }
.ga-drawer__chev { transition: transform var(--duration-base) var(--ease-pop); color: var(--ink-muted); }
.ga-drawer[open] > summary .ga-drawer__chev { transform: rotate(180deg); }
.ga-drawer__body { display: grid; gap: var(--space-5); padding: var(--space-4); border-top: 1px solid var(--line); }
.ga-drawer__reset { justify-self: start; }
.ga-setting { display: grid; gap: var(--space-2); }
.ga-setting__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.ga-setting__label { font: 600 13px/18px var(--font-sans); }
.ga-setting__term { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.ga-setting__value { font: 700 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.ga-range { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; margin: 0; cursor: pointer; }
.ga-range::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--accent), var(--accent-2)) 0 / var(--fill, 50%) 100% no-repeat, var(--line); }
.ga-range::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: var(--line); }
.ga-range::-moz-range-progress { height: 6px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.ga-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--on-media); border: 0; box-shadow: 0 2px 10px var(--scrim), 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }
.ga-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--on-media); border: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }
.ga-range:focus-visible { outline: 2px solid transparent; }
.ga-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.ga-range:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }
.ga-seed { display: flex; gap: var(--space-2); }
.ga-seed .ga-field__control { flex: 1; font-variant-numeric: tabular-nums; }

/* ── Result stage + render status (generating state) ─────────── */
.ga-stage { position: relative; border-radius: var(--radius-xl); background: radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), radial-gradient(50% 40% at 90% 100%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: var(--space-5); box-sizing: border-box; }
.ga-render { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--skeleton); }
.ga-render::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, color-mix(in srgb, var(--accent) 35%, transparent) 60deg, transparent 120deg, color-mix(in srgb, var(--accent-2) 30%, transparent) 200deg, transparent 260deg); filter: blur(40px); animation: ga-spin 6s linear infinite; }
.ga-render[data-state="preview"]::before { content: none; }
.ga-render__preview { position: absolute; inset: 0; filter: blur(16px) saturate(1.1); transform: scale(1.08); opacity: .95; }
.ga-render__preview.ga-ph::after { content: none; }
.ga-render__status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: var(--space-3); text-align: center; width: max-content; max-width: 86%; }
.ga-render__big { font: 800 56px/56px var(--font-sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin: 0; }
.ga-pill { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 14px; border-radius: var(--radius-full); background: var(--surface-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink); font: 700 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--line); }
.ga-pill--accent { background: linear-gradient(100deg, var(--accent), var(--accent-2)); color: var(--on-accent); box-shadow: var(--glow-accent); }
.ga-render__line { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); margin: 0; font-variant-numeric: tabular-nums; }
.ga-render[data-state="preview"] .ga-render__line { color: var(--on-media); background: var(--scrim); padding: 3px 10px; border-radius: var(--radius-full); }
.ga-progress { width: 200px; height: 6px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.ga-progress > i { display: block; height: 100%; width: var(--progress, 30%); background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: inherit; box-shadow: 0 0 12px var(--accent); transition: width var(--duration-base) linear; }
.ga-progress[data-indeterminate] > i { animation: ga-indeterminate 1.2s var(--ease-standard) infinite; }
.ga-stage__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.ga-stage__meta { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ── Result gallery (output.gallery) ──────────────────────────── */
.ga-gallery { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.ga-gallery[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.ga-gallery[data-count="3"], .ga-gallery[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
.ga-gallery[data-count="3"] > :first-child { grid-row: span 2; }
.ga-gallery__item { position: relative; display: block; padding: 0; border: 0; border-radius: var(--radius-lg); overflow: hidden; cursor: zoom-in; background: var(--skeleton); animation: ga-reveal var(--duration-slow) var(--ease-pop) both; transition: transform var(--duration-base) var(--ease-pop); }
.ga-gallery__item:nth-child(2) { animation-delay: 60ms; } .ga-gallery__item:nth-child(3) { animation-delay: 120ms; } .ga-gallery__item:nth-child(4) { animation-delay: 180ms; }
.ga-gallery__item:hover { transform: scale(1.015); }
.ga-gallery__img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ga-gallery[data-count="3"] > :first-child .ga-gallery__img { aspect-ratio: auto; min-height: 100%; }
.ga-gallery__item[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--accent), var(--glow-accent); }
.ga-gallery__num { position: absolute; top: var(--space-2); left: var(--space-2); min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--scrim); color: var(--on-media); font: 700 12px/16px var(--font-sans); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ga-gallery__item[aria-pressed="true"] .ga-gallery__num { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); }
@keyframes ga-reveal { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ── Result actions + Use in another app ──────────────────────── */
.ga-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ga-menu { position: relative; width: 360px; max-width: 100%; box-sizing: border-box; border-radius: var(--radius-xl); background: var(--surface-glass); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--shadow-2); padding: var(--space-2); }
.ga-menu__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3); }
.ga-menu__head .ga-ph { width: 44px; height: 55px; border-radius: var(--radius-sm); flex: none; }
.ga-menu__head .ga-ph::after { content: none; }
.ga-menu__title { font: 800 17px/22px var(--font-sans); letter-spacing: -.01em; margin: 0; }
.ga-menu__sub { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); margin: 2px 0 0; }
.ga-menu__search { margin: 0 var(--space-2) var(--space-2); width: calc(100% - var(--space-4)); border-radius: var(--radius-full); min-height: 40px; padding: 8px var(--space-4); }
.ga-menu__group { padding: var(--space-3) var(--space-3) var(--space-1); }
.ga-menu__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2); border: 0; border-radius: var(--radius-md); background: none; color: var(--ink); text-align: left; cursor: pointer; font: 700 14px/20px var(--font-sans); transition: background var(--duration-fast) var(--ease-standard); }
.ga-menu__item:hover, .ga-menu__item[aria-selected="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ga-menu__thumb { width: 40px; height: 40px; border-radius: var(--radius-sm); flex: none; }
.ga-menu__thumb.ga-ph::after { content: none; }
.ga-menu__role { margin-left: auto; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.ga-menu__item[aria-selected="true"] .ga-menu__role::after { content: " →"; color: var(--accent-ink); }
.ga-sheet-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-sheet); }

/* ── Before/after compare (output.compare) ────────────────────── */
.ga-compare { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 5; background: var(--skeleton); touch-action: pan-y; user-select: none; --pos: 50%; }
.ga-compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ga-compare__img.ga-ph::after { content: none; }
.ga-compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ga-compare__tag { position: absolute; top: var(--space-3); font: 700 11px/14px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--radius-full); background: var(--scrim); color: var(--on-media); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; }
.ga-compare__tag--before { left: var(--space-3); }
.ga-compare__tag--after { right: var(--space-3); background: linear-gradient(100deg, var(--accent), var(--accent-2)); color: var(--on-accent); }
.ga-compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--on-media); box-shadow: 0 0 16px var(--accent); pointer-events: none; }
.ga-compare__handle { position: absolute; top: 50%; left: var(--pos); width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: var(--radius-full); border: 0; background: var(--on-media); color: var(--media-ink); display: grid; place-items: center; cursor: ew-resize; box-shadow: 0 4px 20px var(--scrim), 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent); }

/* ── Video player (output.video) ──────────────────────────────── */
.ga-video { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--media-bg); aspect-ratio: 16 / 9; }
.ga-video video { width: 100%; height: 100%; display: block; }
.ga-video__poster { position: absolute; inset: 0; display: grid; place-items: center; }
.ga-video__play { width: 76px; height: 76px; border-radius: var(--radius-full); border: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); display: grid; place-items: center; cursor: pointer; box-shadow: var(--glow-accent); transition: transform var(--duration-fast) var(--ease-pop); }
.ga-video__play:hover { transform: scale(1.08); }
.ga-video__play .ga-icon { width: 30px; height: 30px; margin-left: 3px; }
.ga-video__dur { position: absolute; right: var(--space-3); bottom: var(--space-3); font: 700 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: var(--radius-full); background: var(--scrim); color: var(--on-media); }

/* ── History card (output.save) ───────────────────────────────── */
.ga-hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min), calc(50% - var(--space-2))), 1fr)); gap: var(--space-4); }
.ga-hcard { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: transform var(--duration-base) var(--ease-pop); }
.ga-hcard:hover { transform: translateY(-3px); }
.ga-hcard__thumb { aspect-ratio: 4 / 5; }
.ga-hcard__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3); }
.ga-hcard__text { min-width: 0; flex: 1 1 110px; }
.ga-hcard__app { display: flex; align-items: center; gap: 6px; font: 700 13px/18px var(--font-sans); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-hcard__time { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); margin: 0; }
.ga-hcard__open { position: absolute; inset: 0 0 auto 0; aspect-ratio: 4 / 5; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.ga-hcard__state { position: absolute; top: var(--space-2); left: var(--space-2); }
.ga-hcard[data-state="rendering"] .ga-hcard__thumb { position: relative; overflow: hidden; background: var(--skeleton); background-image: none; }
.ga-hcard[data-state="rendering"] .ga-hcard__thumb::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(transparent 0deg, color-mix(in srgb, var(--accent) 40%, transparent) 90deg, transparent 180deg, color-mix(in srgb, var(--accent-2) 35%, transparent) 270deg, transparent 360deg); filter: blur(30px); animation: ga-spin 5s linear infinite; }
.ga-hcard[data-state="failed"] .ga-hcard__thumb { background: var(--surface-sunken); background-image: none; display: grid; place-items: center; color: var(--danger); }

/* ── Badge ────────────────────────────────────────────────────── */
.ga-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-full); font: 700 11px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; background: var(--surface-glass); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ga-badge--accent { background: linear-gradient(100deg, var(--accent), var(--accent-2)); color: var(--on-accent); box-shadow: none; }
.ga-badge--media { background: var(--scrim); color: var(--on-media); box-shadow: none; }
.ga-badge--danger { background: var(--danger-soft); color: var(--danger); box-shadow: none; }

/* ── Explore hero ─────────────────────────────────────────────── */
.ga-hero { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: var(--space-16) var(--space-8) var(--space-12); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); isolation: isolate; }
.ga-hero__glow { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(30% 45% at 78% 30%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
  radial-gradient(28% 40% at 92% 75%, color-mix(in srgb, var(--accent-2) 50%, transparent), transparent 70%),
  radial-gradient(22% 35% at 60% 85%, color-mix(in srgb, var(--job-style) 40%, transparent), transparent 70%),
  radial-gradient(20% 30% at 64% 12%, color-mix(in srgb, var(--job-edits) 35%, transparent), transparent 70%);
  filter: blur(20px); }
.ga-hero__title { font: 800 72px/68px var(--font-sans); letter-spacing: -.045em; margin: var(--space-3) 0 var(--space-4); max-width: 11ch; }
.ga-hero__sub { font: 400 17px/26px var(--font-sans); color: var(--ink-muted); margin: 0 0 var(--space-6); max-width: 40ch; }
.ga-search { box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: var(--space-3); max-width: 520px; height: 56px; padding: 0 6px 0 20px; border-radius: var(--radius-full); background: var(--surface-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-muted); }
.ga-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: 500 16px/22px var(--font-sans); outline: none; }
.ga-search input::placeholder { color: var(--ink-muted); }
.ga-search:focus-within { box-shadow: var(--focus-ring); }
.ga-jobs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
@media (max-width: 639px) { .ga-hero { padding: var(--space-10) var(--space-5) var(--space-8); } .ga-hero__title { font-size: 44px; line-height: 44px; } }

/* ── App card (Explore) ───────────────────────────────────────── */
.ga-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min), calc(50% - var(--space-2))), 1fr)); gap: var(--space-5) var(--space-4); }
.ga-card { position: relative; display: grid; align-content: start; gap: var(--space-3); color: var(--ink); text-decoration: none; border-radius: var(--radius-lg); --job: var(--accent); }
.ga-card__cover { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--duration-base) var(--ease-pop), box-shadow var(--duration-base) var(--ease-standard); }
.ga-card:hover .ga-card__cover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 0 0 2px var(--job), 0 18px 40px -12px var(--job); }
.ga-card__badges { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; gap: var(--space-1); }
.ga-card__title { font: 700 17px/22px var(--font-sans); letter-spacing: -.01em; margin: 4px 0 0; }
.ga-card__desc { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); margin: 2px 0 0; }
.ga-group { display: grid; gap: var(--space-5); }
.ga-group__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ga-group__title { display: flex; align-items: center; gap: var(--space-3); font: 750 26px/30px var(--font-sans); letter-spacing: -.025em; margin: 0; }
.ga-group__title .ga-dot { width: 12px; height: 12px; }
.ga-link { color: var(--accent-ink); font: 700 13px/18px var(--font-sans); text-decoration: none; border-radius: var(--radius-xs); }
.ga-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Notice (empty, error, limit) ─────────────────────────────── */
.ga-notice { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.ga-notice__icon { grid-row: span 2; color: var(--ink-muted); margin-top: 1px; }
.ga-notice__title { font: 700 15px/22px var(--font-sans); margin: 0; }
.ga-notice__text { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); margin: 0; }
.ga-notice__actions { grid-column: 2; display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.ga-notice--danger { background: var(--danger-soft); box-shadow: none; }
.ga-notice--danger .ga-notice__icon, .ga-notice--danger .ga-notice__title { color: var(--danger); }
.ga-notice--danger .ga-notice__text { color: var(--ink); }
.ga-notice--warning { background: var(--warning-soft); box-shadow: none; }
.ga-notice--warning .ga-notice__icon, .ga-notice--warning .ga-notice__title { color: var(--warning); }
.ga-notice--warning .ga-notice__text { color: var(--ink); }
.ga-notice--success { background: var(--success-soft); box-shadow: none; }
.ga-notice--success .ga-notice__icon, .ga-notice--success .ga-notice__title { color: var(--success); }
.ga-notice--success .ga-notice__text { color: var(--ink); }
.ga-empty { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-16) var(--space-4); color: var(--ink-muted); }
.ga-empty__icon { width: 64px; height: 64px; border-radius: var(--radius-full); display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); }
.ga-empty__icon .ga-icon { width: 28px; height: 28px; }
.ga-empty__title { font: 800 22px/28px var(--font-sans); letter-spacing: -.02em; color: var(--ink); margin: 0; }

/* ── Shell: header, tabs, app page layout ─────────────────────── */
.ga-header { position: sticky; top: 0; z-index: var(--z-header); display: flex; align-items: center; gap: var(--space-5); height: 64px; padding: 0 var(--space-4); background: var(--surface-glass); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid var(--line); }
.ga-wordmark { font: 800 18px/20px var(--font-sans); letter-spacing: -.03em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.ga-wordmark span { color: var(--accent-ink); }
.ga-nav { display: flex; gap: var(--space-1); }
.ga-tab { display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-full); border: 0; background: none; color: var(--ink-muted); font: 700 13px/18px var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.ga-tab:hover { color: var(--ink); }
.ga-tab[aria-current="page"], .ga-tab[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.ga-header__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.ga-app { display: grid; grid-template-columns: 1fr; gap: var(--space-6); max-width: var(--content-max); margin: 0 auto; padding: var(--space-4); box-sizing: border-box; }
.ga-rail { display: grid; gap: var(--space-6); align-content: start; }
.ga-rail__head { display: grid; gap: var(--space-2); }
.ga-rail__title { font: 800 30px/32px var(--font-sans); letter-spacing: -.035em; margin: 0; }
.ga-rail__desc { font: 400 15px/22px var(--font-sans); color: var(--ink-muted); margin: 0; }
.ga-rail__foot { position: sticky; bottom: 0; z-index: var(--z-rail-footer); margin: 0 calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--surface-glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid var(--line); }
.ga-app--studio .ga-stage { min-height: 380px; }
@media (min-width: 960px) {
  .ga-header { padding: 0 var(--space-8); }
  .ga-app { grid-template-columns: var(--rail-width) minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6) var(--space-8); }
  .ga-rail { position: sticky; top: calc(64px + var(--space-6)); max-height: calc(100vh - 64px - 2 * var(--space-6)); overflow: auto; padding: var(--space-6); border-radius: var(--radius-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .ga-rail__title { font-size: 40px; line-height: 42px; }
  .ga-rail__foot { margin: 0 calc(-1 * var(--space-6)) calc(-1 * var(--space-6)); padding: var(--space-4) var(--space-6) var(--space-6); border-radius: 0 0 var(--radius-xl) var(--radius-xl); background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ga-rail .ga-drop__photo { max-height: 340px; }
  .ga-app--studio { grid-template-columns: 360px minmax(0, 1fr); }
}
@media (max-width: 639px) { .ga-nav--wide { display: none; } }
.ga-menu__group { font: 700 11px/14px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
/* ── Placeholder art ───────────────────────────────────────────
   Stand-ins only, drawn for this system. Replace with real SFW renders from Graydient.
   Every element using one also carries .ga-ph so it is labelled 'Placeholder'. */
:where(.ga-ph) { position: relative; }
.ga-ph { background-color: var(--skeleton); background-size: cover; background-position: center; }
.ga-ph[data-ph-label]::after { content: attr(data-ph-label); position: absolute; left: var(--space-2); bottom: var(--space-2); font: 700 10px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-full); background: var(--scrim); color: var(--on-media); pointer-events: none; }
.ga-ph--landscape { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 500%22 preserveAspectRatio=%22xMidYMid slice%22><defs><linearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22><stop offset=%220%22 stop-color=%22%232b1055%22/><stop offset=%22.55%22 stop-color=%22%23d53f6e%22/><stop offset=%221%22 stop-color=%22%23ffb35c%22/></linearGradient></defs><rect width=%22400%22 height=%22500%22 fill=%22url%28%23s%29%22/><circle cx=%22270%22 cy=%22250%22 r=%2270%22 fill=%22%23ffd27a%22/><path d=%22M0 310 L90 230 L170 290 L260 210 L400 310 V500 H0Z%22 fill=%22%235a1f5e%22/><path d=%22M0 350 Q120 300 220 340 T400 330 V500 H0Z%22 fill=%22%232e0f3d%22/><path d=%22M0 420 Q200 400 400 425 V500 H0Z%22 fill=%22%23160822%22/></svg>"); }
.ga-ph--landscape-winter { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 500%22 preserveAspectRatio=%22xMidYMid slice%22><defs><linearGradient id=%22w%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22><stop offset=%220%22 stop-color=%22%230b1d4d%22/><stop offset=%22.6%22 stop-color=%22%233f6fd1%22/><stop offset=%221%22 stop-color=%22%23a9d3ff%22/></linearGradient></defs><rect width=%22400%22 height=%22500%22 fill=%22url%28%23w%29%22/><circle cx=%22270%22 cy=%22160%22 r=%2240%22 fill=%22%23eaf4ff%22/><path d=%22M0 310 L90 230 L170 290 L260 210 L400 310 V500 H0Z%22 fill=%22%23c9dcf5%22/><path d=%22M0 350 Q120 300 220 340 T400 330 V500 H0Z%22 fill=%22%23f4f9ff%22/><path d=%22M60 340 l16 -46 l16 46Z M112 326 l13 -38 l13 38Z M300 332 l16 -46 l16 46Z%22 fill=%22%2314244d%22/><path d=%22M0 420 Q200 400 400 425 V500 H0Z%22 fill=%22%239fc0ea%22/></svg>"); }
.ga-ph--portrait { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 500%22 preserveAspectRatio=%22xMidYMid slice%22><defs><radialGradient id=%22p%22 cx=%22.7%22 cy=%22.25%22 r=%22.9%22><stop offset=%220%22 stop-color=%22%23ff8a3d%22/><stop offset=%22.5%22 stop-color=%22%23c8325f%22/><stop offset=%221%22 stop-color=%22%232a0f2e%22/></radialGradient></defs><rect width=%22400%22 height=%22500%22 fill=%22url%28%23p%29%22/><path d=%22M70 500 Q80 360 200 350 Q320 360 330 500Z%22 fill=%22%23141826%22/><rect x=%22176%22 y=%22300%22 width=%2248%22 height=%2260%22 rx=%2220%22 fill=%22%23a86a4f%22/><ellipse cx=%22200%22 cy=%22240%22 rx=%2272%22 ry=%2286%22 fill=%22%23c98762%22/><path d=%22M128 236 Q124 150 200 146 Q280 148 274 236 Q262 190 200 186 Q140 190 128 236Z%22 fill=%22%231b1210%22/></svg>"); }
.ga-ph--product { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 500%22 preserveAspectRatio=%22xMidYMid slice%22><defs><radialGradient id=%22g%22 cx=%22.5%22 cy=%22.35%22 r=%22.7%22><stop offset=%220%22 stop-color=%22%233ee0c8%22/><stop offset=%221%22 stop-color=%22%2306343a%22/></radialGradient></defs><rect width=%22400%22 height=%22500%22 fill=%22url%28%23g%29%22/><rect y=%22370%22 width=%22400%22 height=%22130%22 fill=%22%23042428%22/><ellipse cx=%22200%22 cy=%22384%22 rx=%2290%22 ry=%2214%22 fill=%22%2302181a%22/><rect x=%22152%22 y=%22170%22 width=%2296%22 height=%22214%22 rx=%2226%22 fill=%22%23ff4d8d%22/><rect x=%22178%22 y=%22128%22 width=%2244%22 height=%2252%22 rx=%228%22 fill=%22%23ffd54a%22/><rect x=%22164%22 y=%22250%22 width=%2272%22 height=%2260%22 rx=%226%22 fill=%22%23fff4f8%22/></svg>"); }
.ga-ph--illustration { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 500%22 preserveAspectRatio=%22xMidYMid slice%22><rect width=%22400%22 height=%22500%22 fill=%22%231d1b4f%22/><circle cx=%22150%22 cy=%22200%22 r=%22110%22 fill=%22%23ff5c5c%22/><path d=%22M180 430 L300 190 L400 430Z%22 fill=%22%23ffd54a%22/><circle cx=%22300%22 cy=%22120%22 r=%2240%22 fill=%22%235bc8f5%22/><rect x=%2240%22 y=%22400%22 width=%22140%22 height=%2222%22 rx=%2211%22 fill=%22%23a78bfa%22/></svg>"); }
.ga-ph--plush { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 500%22 preserveAspectRatio=%22xMidYMid slice%22><defs><linearGradient id=%22y%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22><stop offset=%220%22 stop-color=%22%23ffd54a%22/><stop offset=%221%22 stop-color=%22%23ff8a3d%22/></linearGradient></defs><rect width=%22400%22 height=%22500%22 fill=%22url%28%23y%29%22/><rect y=%22400%22 width=%22400%22 height=%22100%22 fill=%22%23e8662a%22/><ellipse cx=%22200%22 cy=%22335%22 rx=%22104%22 ry=%2292%22 fill=%22%238a5232%22/><circle cx=%22128%22 cy=%22168%22 r=%2234%22 fill=%22%237a4529%22/><circle cx=%22272%22 cy=%22168%22 r=%2234%22 fill=%22%237a4529%22/><circle cx=%22200%22 cy=%22220%22 r=%2286%22 fill=%22%239c6140%22/><circle cx=%22170%22 cy=%22210%22 r=%229%22 fill=%22%231a1110%22/><circle cx=%22230%22 cy=%22210%22 r=%229%22 fill=%22%231a1110%22/><ellipse cx=%22200%22 cy=%22246%22 rx=%2222%22 ry=%2215%22 fill=%22%23e9b48c%22/></svg>"); }
.ga-ph--interior { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 500%22 preserveAspectRatio=%22xMidYMid slice%22><rect width=%22400%22 height=%22500%22 fill=%22%232a1840%22/><rect y=%22390%22 width=%22400%22 height=%22110%22 fill=%22%2316101f%22/><rect x=%2240%22 y=%22290%22 width=%22260%22 height=%22110%22 rx=%2222%22 fill=%22%23ff6a8f%22/><rect x=%2240%22 y=%22250%22 width=%22260%22 height=%2270%22 rx=%2220%22 fill=%22%23ff8aa6%22/><rect x=%22320%22 y=%22200%22 width=%228%22 height=%22190%22 fill=%22%230c0812%22/><path d=%22M296 150 H352 L338 205 H310Z%22 fill=%22%23ffd54a%22/><circle cx=%22324%22 cy=%22230%22 r=%2260%22 fill=%22%23ffd54a%22 opacity=%22.18%22/><rect x=%22250%22 y=%2280%22 width=%2290%22 height=%2270%22 rx=%224%22 fill=%22%235bc8f5%22/></svg>"); }