/* lunise.art homepage hero – light + dark mode (app/routes/_index.tsx, classes lh-*).
   Mode: html[data-theme] (root.tsx script + components/lunaris/ThemeToggle.tsx).
   Resources: public/lunaris/lunise/* (backgrounds, swoosh, brush stroke, card, demo work). */

:root {
  --lh-base: #fbf1ea;
  --lh-img: url('/lunaris/lunise/hero-light.jpg');
  --lh-ink: #2a1631;
  --lh-muted: #4f4055;
  --lh-accent: #7b4f9e;
  --lh-accent-2: #9466b7;
  --lh-kicker: #7a58a3;
  --lh-line: rgba(122, 88, 163, .55);
  --lh-card-border: #b9a2d8;
  --lh-card-bg: rgba(255, 255, 255, .55);
  --lh-badge-bg: #e2f0d9;
  --lh-badge-ink: #2c6a26;
  --lh-swoosh: url('/lunaris/lunise/swoosh-light.jpg');
  --lh-stroke: url('/lunaris/lunise/stroke-light.jpg');
  --lh-blend: multiply;
  --lh-chip: #6d4891;
}
html[data-theme='dark'] {
  --lh-base: #2a1530;
  --lh-img: url('/lunaris/lunise/hero-dark.jpg');
  --lh-ink: #fbf5fb;
  --lh-muted: rgba(251, 245, 251, .82);
  --lh-accent: #8a5cb0;
  --lh-accent-2: #a274c6;
  --lh-kicker: #c5aee6;
  --lh-line: rgba(197, 174, 230, .5);
  --lh-card-border: rgba(255, 255, 255, .38);
  --lh-card-bg: rgba(255, 255, 255, .05);
  --lh-badge-bg: #def0d0;
  --lh-badge-ink: #2c6a26;
  --lh-swoosh: url('/lunaris/lunise/swoosh-dark.jpg');
  --lh-stroke: url('/lunaris/lunise/stroke-dark.jpg');
  --lh-blend: lighten;
  --lh-chip: #e2d2f5;
  color-scheme: dark;
}

.lh {
  position: relative;
  padding: 0 clamp(18px, 5vw, 56px) clamp(40px, 6vw, 80px);
  color: var(--lh-ink);
  background: var(--lh-img) center top / cover no-repeat, var(--lh-base);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  transition: background-color .4s ease;
}
.lh a { color: inherit; }

/* ---------- header ---------- */
.lh-top { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 26px 0 0; max-width: 1240px; margin: 0 auto; }
.lh-logo { text-decoration: none; }
.lh-logo .lx-logo { font-size: clamp(30px, 8.6vw, 34px); color: var(--lh-ink); letter-spacing: -.02em; font-weight: 600; }
.lh-top__tools { display: flex; align-items: center; gap: 14px; }
.lx-theme { display: inline-flex; gap: 6px; }
.lx-theme button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--lh-ink); opacity: .55; cursor: pointer; transition: opacity .25s, color .25s, background .25s; }
.lx-theme button:hover { opacity: .9; }
.lx-theme button.is-on { opacity: 1; color: var(--lh-accent-2); }
html[data-theme='light'] .lx-theme button.is-on:first-child { color: var(--lh-ink); }
.lh-menu-btn { display: grid; place-items: center; width: 40px; height: 40px; margin-left: 8px; padding: 0; border: 0; background: none; color: var(--lh-ink); cursor: pointer; }
.lh-discover { grid-column: 1 / -1; justify-self: end; display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding-bottom: 4px; font-weight: 600; font-size: 17px; text-decoration: none; border-bottom: 1.5px solid var(--lh-accent-2); }
.lh-sheet { position: absolute; right: 0; top: 76px; z-index: 6; display: grid; min-width: 220px; padding: 10px; border-radius: 16px; background: var(--lh-base); border: 1px solid var(--lh-card-border); box-shadow: 0 24px 50px rgba(30, 10, 40, .25); }
.lh-sheet a { padding: 12px 14px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.lh-sheet a:hover { background: rgba(140, 100, 190, .12); }

/* ---------- copy ---------- */
.lh-grid { position: relative; max-width: 1240px; margin: 0 auto; }
.lh-kicker { display: flex; align-items: center; gap: 16px; margin: 30px 0 0; font-size: 14px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--lh-kicker); }
.lh-kicker i { display: block; flex: 0 1 170px; height: 1.5px; background: var(--lh-line); }
.lh-h1 { position: relative; margin: 18px 0 0; font-size: clamp(44px, 12.4vw, 76px); line-height: 1.02; font-weight: 800; letter-spacing: -.025em; }
.lh-h1 > span:not(.lh-swoosh) { display: block; position: relative; z-index: 1; }
.lh-swoosh { position: absolute; right: -6%; top: -22%; width: min(78%, 520px); aspect-ratio: 3 / 2; background: var(--lh-swoosh) center / contain no-repeat; mix-blend-mode: var(--lh-blend); pointer-events: none; z-index: 0; }
.lh-lead { margin: 18px 0 0; max-width: 30ch; font-size: clamp(18px, 5vw, 21px); line-height: 1.4; color: var(--lh-muted); }

.lh-cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; min-height: 64px; padding: 0 24px; border-radius: 12px; background: linear-gradient(180deg, var(--lh-accent-2), var(--lh-accent)); color: #fff; font-size: 21px; font-weight: 600; cursor: pointer; box-shadow: 0 14px 30px rgba(110, 70, 150, .3); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s; }
.lh-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(110, 70, 150, .38); }
.lh-cta input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lh-cta.is-busy { cursor: progress; font-size: 17px; }
.lh-cta-note { margin: 12px 0 0; text-align: center; font-size: 15px; color: var(--lh-muted); }

.lh-file { display: grid; grid-template-columns: auto 1fr; gap: 0; align-items: center; margin-top: 20px; padding: 14px; border-radius: 18px; border: 1.5px solid var(--lh-card-border); background: var(--lh-card-bg); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lh-file__thumb { width: 132px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; margin-right: 22px; box-shadow: 0 6px 14px rgba(40, 20, 50, .18); }
.lh-file__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lh-file__info { display: grid; gap: 6px; padding-left: 22px; border-left: 1.5px solid var(--lh-card-border); min-width: 0; }
.lh-file__info strong { font-size: 21px; line-height: 1.12; font-weight: 700; overflow-wrap: anywhere; }
.lh-file__info em { font-style: normal; font-size: 17px; color: var(--lh-chip); }
.lh-badge { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 14px; border-radius: 8px; background: var(--lh-badge-bg); color: var(--lh-badge-ink); font-size: 16px; font-weight: 600; }
.lh-badge.is-busy { background: rgba(140, 100, 190, .16); color: var(--lh-ink); }
.lh-badge.is-error { background: #f6dede; color: #8a2a2a; }

.lh-style { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; font-size: 17px; font-weight: 500; }
.lh-swatches { display: flex; gap: 8px; }
.lh-swatches i { display: block; width: 26px; height: 26px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.lh-stroke { position: relative; display: grid; justify-items: center; margin-top: 6px; }
.lh-stroke__paint { display: block; width: 100%; aspect-ratio: 3 / 1; background: var(--lh-stroke) center / contain no-repeat; mix-blend-mode: var(--lh-blend); }
.lh-stroke__arrow { margin-top: -18px; font-size: 30px; line-height: 1; color: var(--lh-accent-2); }

/* ---------- presentation ---------- */
.lh-show { margin-top: 26px; }
.lh-show__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.lh-show__head h2 { margin: 0; font-size: clamp(30px, 8.6vw, 40px); line-height: 1.06; font-weight: 800; letter-spacing: -.02em; }
.lh-chip { flex: none; padding: 6px 14px; border-radius: 8px; border: 1.5px solid var(--lh-chip); color: var(--lh-chip); font-size: 15px; font-weight: 600; }
.lh-chip.is-live { background: var(--lh-accent); border-color: var(--lh-accent); color: #fff; }

.lh-card { position: relative; overflow: hidden; margin-top: 22px; padding: 22px 26px 26px; border-radius: 18px; color: #fff; text-align: center;
  background: url('/lunaris/lunise/card.jpg') center / cover no-repeat, #3a1a3c; box-shadow: 0 24px 50px rgba(40, 15, 45, .32); }
html[data-theme='dark'] .lh-card { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 50px rgba(0, 0, 0, .45); }
.lh-card__bg { position: absolute; inset: 0; background: center / cover no-repeat; }
.lh-card__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 10, 30, .35), rgba(30, 10, 30, .15) 40%, rgba(30, 10, 30, .55)); }
.lh-card__top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.lh-card__logo { font-size: 24px !important; }
.lh-card__icons { display: flex; gap: 20px; }
.lh-card__body { position: relative; z-index: 2; display: grid; justify-items: center; }
.lh-card__title { margin: 14px 0 0; font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(34px, 9.4vw, 42px); line-height: 1.08; }
.lh-card__frame { display: block; width: min(100%, 300px); margin-top: 16px; padding: 4px; background: linear-gradient(135deg, #b8893a, #f0d589 28%, #a87a2e 55%, #e9c977 80%, #9b6d26); box-shadow: 0 18px 34px rgba(10, 2, 12, .55); }
.lh-card__frame .la-art { display: block; box-shadow: inset 0 0 0 1px rgba(60, 30, 10, .4); }
.lh-demo-art { position: relative; overflow: hidden; }
.lh-demo-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lh-card__meta { margin: 20px 0 0; font-size: 16px; opacity: .92; }
.lh-card__price { margin: 6px 0 0; font-size: 26px; font-weight: 500; letter-spacing: .01em; }
.lh-card__btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 34px; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 4px; color: #fff !important; font-size: 17px; font-weight: 500; text-decoration: none; transition: background .3s; }
.lh-card__btn:hover { background: rgba(255, 255, 255, .12); }

.lh-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding-bottom: 3px; color: var(--lh-chip) !important; font-weight: 600; font-size: 16px; text-decoration: none; border-bottom: 1.5px solid currentColor; }
.lh-note { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--lh-muted); }
.lh-note a { color: var(--lh-chip); font-weight: 600; }
.lh-note button { margin-left: 4px; padding: 0; border: 0; background: none; color: var(--lh-ink); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ---------- desktop ---------- */
@media (min-width: 980px) {
  /* the painted corners as their own layers that fade into the base colour (no visible image edges) */
  .lh { background: var(--lh-base); padding-bottom: 90px; overflow: hidden; isolation: isolate; }
  .lh::before, .lh::after { content: ""; position: absolute; z-index: -1; width: min(900px, 58vw); aspect-ratio: 941 / 1672; background: var(--lh-img) center / 100% 100% no-repeat; pointer-events: none; }
  .lh::before { left: -70px; top: -90px; -webkit-mask-image: radial-gradient(ellipse 95% 58% at 0% 0%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 95% 58% at 0% 0%, #000 55%, transparent 100%); }
  .lh::after { right: -70px; bottom: -90px; -webkit-mask-image: radial-gradient(ellipse 95% 58% at 100% 100%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 95% 58% at 100% 100%, #000 55%, transparent 100%); }
  .lh-top { grid-template-columns: auto 1fr auto auto; gap: 30px; padding-top: 30px; }
  .lh-logo .lx-logo { font-size: 32px; }
  .lh-top__tools { grid-column: 4; }
  .lh-discover { grid-column: 3; grid-row: 1; margin: 0; }
  .lh-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(50px, 6vw, 100px); align-items: start; padding-top: 40px; }
  .lh-kicker { margin-top: 20px; }
  .lh-h1 { font-size: clamp(60px, 5.6vw, 84px); }
  .lh-cta, .lh-file, .lh-style, .lh-stroke { max-width: 520px; }
  .lh-cta-note { max-width: 520px; }
  .lh-show { margin-top: 10px; }
  .lh-card { max-width: 500px; }
  .lh-sheet { top: 70px; }
}
@media (max-width: 400px) {
  .lh-file__thumb { width: 104px; margin-right: 14px; }
  .lh-file__info { padding-left: 14px; }
  .lh-file__info strong { font-size: 18px; }
  .lh-style { font-size: 15px; }
  .lh-cta { font-size: 19px; }
}

/* ---------- the rest of the homepage in the new colours (lunaris-landing.css uses --ld-* variables) ---------- */
.ld { --ld-violet: #7b4f9e; --ld-violet-d: #66408a; --ld-bg: #fbf4ef; transition: background-color .4s ease; }
html[data-theme='dark'] .ld {
  --ld-ink: #f6eef8; --ld-text: #e9e0ed; --ld-muted: rgba(240, 230, 245, .7); --ld-bg: #22132a; --ld-line: rgba(255, 255, 255, .14);
  --ld-violet: #c3a3e6; --ld-violet-d: #b08ad8;
}
html[data-theme='dark'] .ld-close h2,
html[data-theme='dark'] .ld-foot__cols p,
html[data-theme='dark'] .ld-foot__brand .ld-logo { color: #f6eef8; }
html[data-theme='dark'] .ld-close .ld-cta { background: linear-gradient(180deg, #a274c6, #8a5cb0); box-shadow: 0 16px 34px rgba(0, 0, 0, .35); }
html[data-theme='dark'] .ld-close .ld-cta:hover { background: linear-gradient(180deg, #ad80d0, #9466b7); }
html[data-theme='dark'] .ld-foot__brand .ld-logo .lx-logo { color: #f6eef8; }

/* swoosh + brush stroke are JPGs with their own paper colour: blend it away and soften the edges,
   so no rectangle shows on either background */
.lh-swoosh, .lh-stroke__paint {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}
/* the room band shows a light wall photo – its text stays dark in both modes */
html[data-theme='dark'] .ld-band--room { --ld-ink: #1c1240; --ld-text: #2a2340; --ld-muted: #5d5670; color: #2a2340; }

/* ---------- the page in the colours of the visitor's upload (lib/lunaris/site-theme.ts, .ld.is-own) ---------- */
.ld.is-own {
  --lh-accent: var(--own-accent); --lh-accent-2: var(--own-accent-2); --lh-kicker: var(--own-kicker-l); --lh-chip: var(--own-chip-l);
  --lh-line: var(--own-line); --lh-card-border: var(--own-border); --lh-base: var(--own-base-l);
  --ld-violet: var(--own-accent); --ld-violet-d: var(--own-accent); --ld-bg: var(--own-base-l);
}
html[data-theme='dark'] .ld.is-own {
  --lh-kicker: var(--own-kicker-d); --lh-chip: var(--own-chip-d); --lh-base: var(--own-base-d); --lh-card-border: rgba(255, 255, 255, .38);
  --ld-violet: var(--own-kicker-d); --ld-violet-d: var(--own-kicker-d); --ld-bg: var(--own-base-d);
}
/* its own hero backgrounds, once painted (until then: the design's backgrounds on the work's base tone) */
html:not([data-theme='dark']) .ld.is-own.has-img-l { --lh-img: var(--own-img-l); }
html[data-theme='dark'] .ld.is-own.has-img-d { --lh-img: var(--own-img-d); }
.ld.is-own:not(.has-img-l) .lh, html[data-theme='dark'] .ld.is-own:not(.has-img-d) .lh { background-blend-mode: luminosity, normal; }
/* swoosh + brush stroke turned to the work's colour */
.ld.is-own .lh-swoosh, .ld.is-own .lh-stroke__paint { filter: hue-rotate(var(--own-hue)) saturate(1.15); }
.lh, .lh-file, .lh-chip { transition: background-color .8s ease, border-color .8s ease; }

/* ---------- desktop hero: upload left, the live 3D monitor right (DeviceShowcase compact) ---------- */
.lh-3d { display: none; }
@media (min-width: 980px) {
  .lh-3d { display: block; margin-top: 18px; }
  .lh-show .lh-card { display: none; }
  /* the separate 3D section below would repeat the hero – desktop shows it only up here */
  .ld > .ds:not(.ds--compact) { display: none; }
  .lh-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
.ds--compact { padding: 0; background: none; overflow: visible; color: var(--lh-ink); }
.ds--compact .ds-glow { display: none; }
.ds--compact .ds-scene { width: 100%; margin: 0; }
.ds--compact .ds-rig { padding-bottom: 4%; }
.ds--compact .ds-desk { width: 84%; }
.ds--compact .ds-phone { width: 25%; right: 0; bottom: -6%; }
.ds--compact .ds-floor { opacity: .5; }
.ds--compact .ds-nav { position: relative; bottom: auto; margin: 18px auto 0; width: 100%; max-width: none;
  background: var(--lh-card-bg); border-color: var(--lh-card-border); box-shadow: 0 14px 30px rgba(40, 15, 45, .16); }
.ds--compact .ds-caption { color: var(--lh-muted); }
.ds--compact .ds-caption b { color: var(--lh-ink); }
.ds--compact .ds-tabs button { color: var(--lh-muted); border-color: var(--lh-card-border); background: transparent; padding: 8px 12px 10px; font-size: 13px; }
.ds--compact .ds-tabs button:hover { color: var(--lh-ink); }
.ds--compact .ds-tabs button span { color: var(--lh-kicker); }
.ds--compact .ds-tabs button.is-on { background: linear-gradient(180deg, var(--lh-accent-2), var(--lh-accent)); border-color: transparent; color: #fff; }
.ds--compact .ds-tabs button.is-on span { color: rgba(255, 255, 255, .85); }

/* ---------- upload: hero bricks tumble away, the presentation moves to the top ---------- */
@keyframes lh-brick-out {
  0% { opacity: 1; transform: none; }
  22% { opacity: 1; transform: translateY(-10px) rotate(calc(var(--br, 4deg) * -.4)); }
  100% { opacity: 0; transform: translate(var(--bx, 0px), 160px) rotate(var(--br, 4deg)) scale(.82); }
}
.ld.is-leaving .lh-brick { animation: lh-brick-out .78s cubic-bezier(.5, 0, .75, .35) calc(var(--bi, 0) * 55ms) both; transform-origin: 50% 100%; }
.ld.is-leaving .lh-h1 > .lh-brick:not(.lh-swoosh) { display: inline-block; }
.ld.is-leaving .lh-brick:nth-child(odd) { --br: -7deg; --bx: -18px; }
.ld.is-leaving .lh-brick:nth-child(even) { --br: 6deg; --bx: 22px; }
.ld.is-leaving .lh-h1 > .lh-brick:nth-child(2) { --br: -11deg; --bx: -40px; }
.ld.is-leaving .lh-cta { --br: 3deg; --bx: 0px; }
/* the presentation dims while the bricks fall, then rises at the top */
.ld.is-leaving .lh-show { animation: lh-show-out .5s ease .45s both; }
@keyframes lh-show-out { to { opacity: 0; transform: translateY(-14px); } }
.lh-show.is-top { margin-top: 18px; animation: lh-show-in .9s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes lh-show-in { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
.ld.is-collapsed .lh-grid { display: block; }
.ld.is-collapsed .lh-show.is-top { max-width: 1120px; margin-left: auto; margin-right: auto; }
.lh-show__head { flex-wrap: wrap; }
.lh-show__title { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--lh-muted); }
.lh-show__title strong { color: var(--lh-ink); font-size: 19px; font-weight: 700; }
.lh-show__title em { font-style: normal; font-size: 15px; }
.lh-again { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; border: 1.5px solid var(--lh-accent); color: var(--lh-accent); background: var(--lh-card-bg); font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .25s, color .25s; }
html[data-theme='dark'] .lh-again { color: var(--lh-ink); }
.lh-again:hover { background: var(--lh-accent); color: #fff; }
.lh-again input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lh-again svg { width: 18px; height: 18px; }
.lh-again.is-busy { opacity: .7; pointer-events: none; }
@media (min-width: 980px) {
  .ld.is-collapsed .lh-grid { padding-top: 34px; }
  .ld.is-collapsed .lh-show__head h2 { font-size: 46px; }
  .ld.is-collapsed .lh-show__head .lh-chip { margin-right: auto; align-self: center; }
  .ld.is-collapsed .lh-3d { max-width: 1040px; margin: 22px auto 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ld.is-leaving .lh-brick, .ld.is-leaving .lh-show, .lh-show.is-top { animation-duration: .01s; animation-delay: 0s; }
}

/* ---------- the loading screen (UploadOverlay) ---------- */
.lu { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px 16px; overflow: auto;
  background: color-mix(in srgb, var(--lh-base) 94%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); color: var(--lh-ink); }
html[data-theme='dark'] .lu { background: color-mix(in srgb, var(--lh-base) 90%, #000); }
.lu__glow { position: absolute; inset: -20%; pointer-events: none; opacity: .5;
  background: radial-gradient(40% 35% at 20% 15%, color-mix(in srgb, var(--lu-a) 45%, transparent), transparent 70%),
              radial-gradient(35% 30% at 85% 85%, color-mix(in srgb, var(--lu-b) 40%, transparent), transparent 70%);
  animation: lu-drift 9s ease-in-out infinite alternate; }
html[data-theme='dark'] .lu__glow { opacity: .35; }
@keyframes lu-drift { to { transform: translate(3%, -2%) scale(1.06); } }
.lu__box { position: relative; width: min(420px, 100%); display: grid; justify-items: center; text-align: center; }
.lu__logo { font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--lh-ink); }
.lu__mark { position: relative; width: 190px; aspect-ratio: 1; margin: 30px 0 8px; }
.lu__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.lu__track { fill: none; stroke: color-mix(in srgb, var(--lh-ink) 12%, transparent); stroke-width: 7; }
.lu__fill { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.22, 1, .36, 1); }
.lu__photo { position: absolute; inset: 22%; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--lh-ink) 8%, transparent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22); animation: lu-breathe 2.6s ease-in-out infinite; }
.lu__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lu__brush { position: absolute; inset: 30%; border-radius: 50%; background: linear-gradient(135deg, var(--lu-a), var(--lu-b)); }
@keyframes lu-breathe { 50% { transform: scale(.95); } }
.lu__orbit { position: absolute; inset: -6px; animation: lu-spin 7s linear infinite; }
.lu__orbit i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 4px; box-shadow: 0 3px 8px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .25);
  transform: rotate(calc(360deg / var(--n) * var(--i))) translateY(-101px) rotate(45deg); }
@keyframes lu-spin { to { transform: rotate(360deg); } }
.lu__pct { margin: 14px 0 0; font-size: 46px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.lu__pct small { font-size: 22px; font-weight: 600; margin-left: 2px; color: var(--lh-muted); }
.lu__label { margin: 10px 0 0; min-height: 1.4em; font-size: 17px; color: var(--lh-muted); animation: ld-in .5s cubic-bezier(.22, 1, .36, 1) both; }
.lu__bar { width: 100%; height: 8px; margin-top: 22px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--lh-ink) 10%, transparent); }
.lu__bar span { position: relative; display: block; height: 100%; border-radius: inherit; overflow: hidden; background: linear-gradient(90deg, var(--lu-a), var(--lu-b), var(--lu-c)); transition: width .6s cubic-bezier(.22, 1, .36, 1); }
.lu__bar span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-100%); animation: lu-shine 1.6s ease-in-out infinite; }
@keyframes lu-shine { to { transform: translateX(100%); } }
.lu__steps { display: flex; justify-content: space-between; width: 100%; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--lh-muted); }
.lu__steps li { opacity: .5; transition: opacity .4s, color .4s; }
.lu__steps li.is-done { opacity: .9; }
.lu__steps li.is-now { opacity: 1; color: var(--lh-ink); font-weight: 700; }
.lu__cancel { margin-top: 30px; padding: 12px 30px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--lh-ink) 30%, transparent); background: transparent; color: var(--lh-ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color .25s, border-color .25s; }
.lu__cancel:hover { background: color-mix(in srgb, var(--lh-ink) 8%, transparent); border-color: var(--lh-ink); }
.lu__hint { margin: 14px 0 0; font-size: 13px; color: var(--lh-muted); opacity: .8; }
@media (prefers-reduced-motion: reduce) { .lu__glow, .lu__photo, .lu__orbit, .lu__bar span::after { animation: none; } }

/* ---------- light/dark switch: one clearly active button (filled), on a small glass pill ---------- */
.lx-theme { --pill: color-mix(in srgb, var(--lh-base, #fbf1ea) 62%, transparent); padding: 3px; border-radius: 99px; background: var(--pill); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lh-ink, #2a1631) 14%, transparent); }
.lx-theme button { width: 34px; height: 34px; opacity: .62; }
.lx-theme button.is-on, html[data-theme='light'] .lx-theme button.is-on:first-child { opacity: 1; background: var(--lh-ink, #2a1631); color: var(--lh-base, #fbf1ea); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }

/* ---------- header ink follows the image behind it (contrast.ts → data-logo-ink / data-tools-ink) ---------- */
.lh-logo .lx-logo { transition: color .4s ease, text-shadow .4s ease; }
.lh-top[data-logo-ink='light'] .lh-logo .lx-logo { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 2px 18px rgba(0, 0, 0, .35); }
.lh-top[data-logo-ink='dark'] .lh-logo .lx-logo { color: #1d1222; text-shadow: 0 0 2px rgba(255, 255, 255, .35), 0 2px 18px rgba(255, 255, 255, .55); }
@media (max-width: 979px) {
  .lh-top[data-tools-ink='light'] .lh-top__tools, .lh-top[data-tools-ink='light'] .lh-discover { --lh-ink: #fff; --lh-base: #24142a; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
  .lh-top[data-tools-ink='dark'] .lh-top__tools, .lh-top[data-tools-ink='dark'] .lh-discover { --lh-ink: #1d1222; --lh-base: #fbf3ec; color: #1d1222; text-shadow: 0 1px 12px rgba(255, 255, 255, .5); }
}
.lh-menu-btn { border-radius: 50%; background: color-mix(in srgb, var(--lh-base) 55%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---------- logo on mixed paint (light + dark strokes behind it): a soft glass backing ---------- */
.lh-logo .lx-logo { display: inline-block; border-radius: 14px; transition: color .4s ease, text-shadow .4s ease, background-color .4s ease, padding .3s ease; }
.lh-top[data-logo-busy] .lh-logo .lx-logo { margin: -6px -14px; padding: 6px 14px; -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); text-shadow: none; }
.lh-top[data-logo-busy][data-logo-ink='light'] .lh-logo .lx-logo { background: rgba(24, 14, 28, .42); }
.lh-top[data-logo-busy][data-logo-ink='dark'] .lh-logo .lx-logo { background: rgba(255, 250, 246, .62); }

/* ---------- after an upload (desktop + phone): the presentation's head, centred above the devices ---------- */
.lh-show__actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lh-show__actions .lh-chip { display: inline-flex; align-items: center; gap: 8px; }
.lh-show__actions .lh-chip .ld-spin { width: 13px; height: 13px; border-width: 2px; }
.ld.is-collapsed .lh-show__head { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; }
.ld.is-collapsed .lh-show__head h2 { max-width: 16ch; text-wrap: balance; }
.ld.is-collapsed .lh-show__actions { justify-content: center; }
.ld.is-collapsed .lh-show__title { justify-content: center; text-align: center; margin-top: 14px; }
@media (min-width: 980px) {
  .ld.is-collapsed .lh-show__head h2 { max-width: none; font-size: clamp(44px, 4.2vw, 60px); }
  .ld.is-collapsed .lh-show__head .lh-chip { margin-right: 0; }
  .ld.is-collapsed .lh-grid { padding-top: 18px; }
  .ld.is-collapsed .lh-3d { margin-top: 30px; }
}

/* ---------- after an upload: like the original homepage – text left, the live monitor right ---------- */
.ld.is-collapsed .lh-show__head { flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 18px; }
.ld.is-collapsed .lh-show__head h2 { max-width: 14ch; text-wrap: balance; }
.ld.is-collapsed .lh-show__actions { justify-content: flex-start; }
.ld.is-collapsed .lh-show__title { flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 6px; margin-top: 18px; }
.lh-publish { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 10px; background: linear-gradient(180deg, var(--lh-accent-2), var(--lh-accent)); color: #fff !important; font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px rgba(40, 20, 50, .22); }
.lh-publish svg { width: 16px; height: 16px; }
@media (min-width: 980px) {
  .ld.is-collapsed .lh-show.is-top { max-width: 1240px; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); column-gap: clamp(36px, 4vw, 70px); align-items: start; }
  .ld.is-collapsed .lh-show.is-top > * { grid-column: 1; }
  .ld.is-collapsed .lh-show.is-top > .lh-3d { grid-column: 2; grid-row: 1 / span 6; max-width: none; margin: 0; }
  .ld.is-collapsed .lh-show__head { padding-top: clamp(30px, 5vw, 80px); }
  .ld.is-collapsed .lh-show__head h2 { max-width: 12ch; font-size: clamp(46px, 4.4vw, 66px); line-height: 1.02; }
  .ld.is-collapsed .lh-show__title strong { font-size: 22px; }
  .ld.is-collapsed .lh-show__title em { font-size: 16px; }
  .ld.is-collapsed .lh-show__actions { flex-wrap: wrap; max-width: 460px; }
}

/* ---------- sharing + the work's addresses (components/lunaris/ShareLinks.tsx) ---------- */
.lh-share { margin-top: 22px; max-width: 480px; }
.lh-share__label { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lh-kicker); }
.lh-share__icons { display: flex; flex-wrap: wrap; gap: 8px; }
.lh-share__btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; text-decoration: none;
  background: var(--net, var(--lh-ink)); color: #fff !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .16); transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s; }
.lh-share__btn:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, .22); }
.lh-share__btn--plain { background: color-mix(in srgb, var(--lh-ink) 10%, transparent); color: var(--lh-ink) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lh-ink) 22%, transparent); }
.lh-share__letter { font: 800 19px/1 'Plus Jakarta Sans', system-ui, sans-serif; }
.lh-share__letter.is-small { font-size: 15px; letter-spacing: -.02em; }
.lh-share__addr { display: grid; gap: 8px; margin: 18px 0 0; }
.lh-share__addr > div { display: grid; grid-template-columns: 74px 1fr; align-items: baseline; gap: 10px; }
.lh-share__addr dt { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lh-muted); }
.lh-share__addr dd { margin: 0; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.lh-share__addr button { min-width: 0; padding: 0; border: 0; background: none; color: var(--lh-ink); font: 600 15px/1.4 'Plus Jakarta Sans', system-ui, sans-serif; text-align: left; cursor: copy; overflow-wrap: anywhere; border-bottom: 1px dashed color-mix(in srgb, var(--lh-ink) 35%, transparent); }
.lh-share__ok { font-size: 12px; color: var(--lh-badge-ink); background: var(--lh-badge-bg); padding: 1px 8px; border-radius: 99px; }
.lh-share__note { margin: 10px 0 0; font-size: 13px; color: var(--lh-muted); }
@media (max-width: 979px) { .lh-share { margin-top: 18px; } .lh-share__icons { gap: 5px; } .lh-share__btn { width: 32px; height: 32px; } .lh-share__btn svg { width: 17px; height: 17px; } .lh-share__letter { font-size: 15px; } .lh-share__letter.is-small { font-size: 12px; } }
.lh-share__link { min-width: 0; color: var(--lh-ink) !important; font: 600 15px/1.4 'Plus Jakarta Sans', system-ui, sans-serif; text-decoration: none; overflow-wrap: anywhere; border-bottom: 1.5px solid color-mix(in srgb, var(--lh-accent) 60%, transparent); }
.lh-share__link:hover { border-bottom-color: var(--lh-accent); }
.lh-share__addr .lh-share__copy { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: color-mix(in srgb, var(--lh-ink) 8%, transparent); color: var(--lh-ink); cursor: pointer; }
.lh-share__addr dd { align-items: center; }