/* ==========================================================================
   ORBT: premium-dark link-in-bio. Shared design system.
   Solar-on-ink palette · Clash Display / General Sans / JetBrains Mono
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* surfaces */
  --bg:        #0d0d0d;
  --bg-1:      #0E0E15;
  --bg-2:      #15151F;
  --bg-3:      #1D1D29;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  /* ink */
  --text:      #F4F2EC;   /* warm ivory */
  --muted:     #9A9AA8;
  --faint:     #8a8a96;   /* 5.7:1 on #0d0d0d (was #63636F ≈3.3:1, failed small text) */

  /* brand */
  --accent:    #e11d8f;   /* magenta (brand default) */
  --accent-ink:#ffffff;   /* text on accent */
  --orbit:     #7b2ff7;   /* purple: brand secondary (was old-brand blue) */
  --plasma:    #C8A2FF;   /* tertiary, sparingly */
  --gold:      #F6C453;   /* legacy solar gold: feeds the dark app's glows/washes/focus rings below
                             (kept so the dark look is unchanged); orbt.css remaps it to the magenta
                             accent on marketing pages */

  /* effects */
  --glow:      0 0 60px rgba(225,29,143,.35);
  --radius:    18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  /* type */
  --display: "Clash Display", "Space Grotesk", system-ui, sans-serif;
  --body:    "General Sans", "Inter", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* layout */
  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  /* NOTE: this --ease is what the dark app (dashboard/u.html) uses; on marketing pages
     orbt.css loads after this file and overrides it to cubic-bezier(.2,.7,.2,1) */
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* (G) hide ALL scrollbars everywhere while keeping scroll functional:
   pages, dashboard, popovers, preview, public page. Repeated/important to the user. */
html{scrollbar-width:none;-ms-overflow-style:none}
*{scrollbar-width:none}
::-webkit-scrollbar{width:0;height:0;display:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;            /* clip (not hidden), prevents h-scroll WITHOUT breaking position:sticky */
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------- type scale ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.display{font-size:clamp(2.8rem,7vw,6rem);font-weight:600}
h2{font-size:clamp(2rem,4.5vw,3.4rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.9rem)}
.lead,p{text-wrap:pretty}
.eyebrow{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent);opacity:.6}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:54ch}
.mono{font-family:var(--mono)}

/* ---------- a11y utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* skip-to-content: hidden until keyboard focus, then a branded pill over the nav */
.skip-link{position:fixed;top:14px;left:14px;z-index:1000;
  background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:.9rem;
  padding:.6em 1.2em;border-radius:100px;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
  transform:translateY(calc(-100% - 20px));opacity:0;pointer-events:none;
  transition:transform .25s var(--ease),opacity .2s}
.skip-link:focus,.skip-link:focus-visible{transform:none;opacity:1;pointer-events:auto;
  outline:2px solid var(--text);outline-offset:2px}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{position:relative;padding-block:clamp(52px,7.5vw,100px)}
/* anchors clear the fixed nav at every size (was 88px → clipped on scrolled-down nav) */
section[id],[id]{scroll-margin-top:clamp(96px,12vh,120px)}
.center{text-align:center}
.section-head{max-width:62ch}
.section-head.center{margin-inline:auto}
.section-head h2{margin:.5rem 0 1rem}

/* ---------- buttons ---------- */
.btn{
  --b:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85em 1.5em;border-radius:100px;font-weight:600;font-size:.98rem;
  background:var(--b);color:var(--accent-ink);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .25s;
  will-change:transform;white-space:nowrap;
}
.btn:hover{filter:brightness(1.06);box-shadow:0 10px 40px -8px color-mix(in srgb,var(--gold) 50%,transparent)}
.btn:active{transform:scale(.97)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line-2)}
.btn-ghost:hover{background:var(--bg-2);box-shadow:none;filter:none;border-color:var(--line-2)}
.btn-lg{padding:1.05em 1.9em;font-size:1.05rem}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:18px var(--pad);
  transition:background .4s,backdrop-filter .4s,border-color .4s,padding .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,8,12,.72);backdrop-filter:blur(16px);
  border-bottom-color:var(--line);padding-block:12px;
}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:.94rem;color:var(--muted);transition:color .25s}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:.75rem}
.nav-toggle{display:none}
/* dashboard: one slim unified top bar, small logo, tight padding, page identity folded in.
   Target ~48px total height. The dash-head block is gone; its content lives here as .nav-pill. */
.dash-body .nav,
.dash-body .nav.scrolled{padding-block:6px}
.dash-body .nav .logo{font-size:1.08rem;flex:0 0 auto}
.dash-body .nav-cta{gap:.55rem;flex:0 0 auto}
.dash-body .nav-cta .btn{padding:.5em 1em;font-size:.86rem}

/* folded-in page identity pill (replaces the old chunky .dash-head) */
.nav-pill{display:flex;align-items:center;gap:.6rem;min-width:0;flex:0 1 auto;margin:0 auto 0 .4rem}
.nav-pill-editing{display:inline-flex;gap:.35ch;font-size:.84rem;color:var(--muted);white-space:nowrap;
  max-width:24ch;overflow:hidden;text-overflow:ellipsis}
.nav-pill-editing #dispName{color:var(--text);font-weight:600}
.nav-pill-url{display:inline-flex;align-items:center;background:var(--bg-2);border:1px solid var(--line);
  border-radius:100px;padding:.32rem .7rem;font-family:var(--mono);font-size:.78rem;color:var(--muted);
  max-width:30ch;overflow:hidden;white-space:nowrap}
.nav-pill-url a{color:var(--accent);overflow:hidden;text-overflow:ellipsis}
.nav-pill-copy{display:inline-flex;align-items:center;gap:.35rem;color:var(--muted);font-size:.78rem;
  padding:.32rem .6rem;border-radius:100px;border:1px solid transparent;transition:color .2s,background .2s,border-color .2s}
.nav-pill-copy svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-pill-copy:hover{color:var(--text);background:var(--bg-2);border-color:var(--line)}
/* progressively collapse the pill on narrower widths so the bar never wraps */
@media (max-width:1180px){.nav-pill-editing{display:none}}
@media (max-width:920px){.nav-pill-copy span{display:none}.nav-pill-copy{padding:.32rem .5rem}}
@media (max-width:760px){.nav-pill{display:none}}

/* logo: orb•t with orbiting dot */
.logo{display:inline-flex;align-items:center;font-family:var(--display);font-weight:700;font-size:1.4rem;letter-spacing:-.03em}
.logo .dot{
  display:inline-block;width:.34em;height:.34em;border-radius:50%;
  background:var(--accent);margin:0 .04em;vertical-align:middle;
  box-shadow:0 0 14px 2px color-mix(in srgb,var(--gold) 70%,transparent);
  animation:logo-orbit 6s linear infinite;
}
@keyframes logo-orbit{
  0%{transform:translateY(-.18em)}
  25%{transform:translate(.1em,0)}
  50%{transform:translateY(.18em)}
  75%{transform:translate(-.1em,0)}
  100%{transform:translateY(-.18em)}
}
@media (prefers-reduced-motion:reduce){.logo .dot{animation:none}}

/* ==========================================================================
   HERO: the orbital field signature
   ========================================================================== */
.hero{padding-top:clamp(120px,18vh,200px);overflow:hidden;min-height:100svh;display:flex;align-items:center;position:relative}
.hero .hero-grid{position:relative;z-index:2}
.hero-copy{position:relative;z-index:3}
/* hero shape motif (Orbt style): slow drifting aurora behind the copy */
/* signature: live WebGL gold cosmic field (hero.js). sits at the base of the hero;
   the CSS glow/aurora below are dialed down to seasoning so the shader leads. */
.hero-shader{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none;opacity:.92}
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:.6;
  background:radial-gradient(46% 52% at 76% 34%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),
  radial-gradient(40% 40% at 16% 86%,rgba(122,162,255,.07),transparent 70%)}
/* moving aurora wash on the left so the copy side isn't dead */
.hero-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.32;mix-blend-mode:screen;
  background:
    radial-gradient(38% 44% at 22% 30%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),
    radial-gradient(40% 46% at 8% 78%,rgba(122,162,255,.12),transparent 72%),
    radial-gradient(44% 50% at 38% 60%,rgba(200,162,255,.08),transparent 74%);
  background-size:180% 180%;animation:hero-aurora 26s ease-in-out infinite}
@keyframes hero-aurora{0%,100%{background-position:0% 40%}50%{background-position:100% 60%}}
.hero-rings{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-rings span{position:absolute;top:36%;left:74%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--line);
  transform-origin:center;animation:hero-ring-drift 40s linear infinite}
.hero-rings span:nth-child(1){width:360px;height:360px}
.hero-rings span:nth-child(2){width:600px;height:600px;border-color:rgba(255,255,255,.05);animation-duration:60s;animation-direction:reverse}
.hero-rings span:nth-child(3){width:860px;height:860px;border-color:rgba(255,255,255,.03);animation-duration:90s}
@keyframes hero-ring-drift{
  0%{transform:translate(-50%,-50%) rotate(0) scale(1)}
  50%{transform:translate(-50%,-50%) rotate(180deg) scale(1.06)}
  100%{transform:translate(-50%,-50%) rotate(360deg) scale(1)}
}
@media (prefers-reduced-motion:reduce){.hero-aurora,.hero-rings span{animation:none}}

/* ---------- looks teaser ---------- */
.looks-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,3vw,30px);margin-top:3rem;flex-wrap:wrap}
.phone-sm{position:relative;width:min(244px,74vw);border-radius:34px;padding:9px;background:linear-gradient(160deg,#26262F,#0C0C12);border:1px solid var(--line-2);box-shadow:0 30px 70px -28px rgba(0,0,0,.8);transition:transform .4s var(--ease)}
.phone-sm:hover{transform:translateY(-8px)}
.phone-sm.lift{margin-bottom:34px}
.phone-screen3{border-radius:26px;overflow:hidden;height:430px;overflow-y:auto;scrollbar-width:none}
.phone-screen3::-webkit-scrollbar{display:none}

/* ---------- import ---------- */
.import-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,72px);align-items:center}
.import-visual{display:grid;place-items:center}
.import-box{width:min(380px,88vw);background:linear-gradient(180deg,var(--bg-1),var(--bg));border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;gap:14px}
.import-box .pre{color:var(--faint);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.import-field{background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:.85rem 1rem;color:var(--accent);min-height:2.7em}
.import-arrow{text-align:center;color:var(--muted);font-size:1.3rem}
.import-result{background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);border-radius:10px;padding:.85rem 1rem;color:var(--accent);font-size:.84rem;text-align:center}

/* ---------- footer bottom (no crest) ---------- */
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--faint);font-size:.76rem}
.foot-social{display:flex;gap:.55rem;margin-top:1.1rem}
.foot-social a{width:38px;height:38px;display:inline-flex!important;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:11px;color:var(--muted);transition:color .2s,border-color .2s,transform .2s}
.foot-social a:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-2px)}
.foot-social svg{width:19px;height:19px;fill:currentColor;display:block}

/* ---- dashboard: badges panel + premium CTA + unlock modal ---- */
.badges-list{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.badges-empty{color:var(--muted);font-size:.9rem}
.badge-card{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}
.badge-card.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 8%,var(--bg-2))}
.badge-ico{font-size:30px;line-height:0;flex:none;display:inline-flex}
.badge-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.badge-meta b{font-size:.95rem;color:var(--text);display:flex;align-items:center;gap:.4rem}
.badge-meta span{font-size:.8rem;color:var(--muted)}
.badge-vip{font-size:.62rem;font-weight:700;letter-spacing:.05em;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px;padding:1px 6px}
.badge-toggle{flex:none;font:inherit;font-size:.82rem;font-weight:600;padding:.45rem .9rem;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;transition:.18s}
.badge-toggle:hover{border-color:var(--accent)}
@media (max-width:880px){
  .badge-toggle{min-height:44px;padding:.55rem 1rem}
  .dash-theme-btn{width:44px;height:44px}
}
.badge-toggle.on{background:var(--accent);color:var(--accent-ink,#fff);border-color:var(--accent)}

/* equipped/available split + recolor/mono/hide/reorder controls (guns.lol parity) */
.badges-subhead{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:1.1rem 0 .5rem;display:flex;align-items:center;gap:.5rem}
.badges-subhead:first-child{margin-top:0}
.badges-count{font-weight:600;color:var(--faint,var(--muted))}
.badge-style-bar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.6rem .9rem;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.badge-mono-row{display:flex;align-items:center;gap:.55rem;font-size:.86rem;color:var(--text);cursor:pointer}
.badge-mono-row input{width:16px;height:16px;accent-color:var(--accent)}
.badge-card.equipped{gap:.55rem}
.badge-card.is-hidden{opacity:.55}
.badge-card.is-hidden .badge-ico{opacity:.5}
.badge-card.dragging{opacity:.4}
.badge-drag{flex:none;display:inline-flex;color:var(--faint,var(--muted));cursor:grab;touch-action:none}
.badge-drag:active{cursor:grabbing}
.badge-recolor-btn{padding:.4rem;gap:0}
.badge-recolor-btn .ct-sw{width:16px;height:16px}
.badge-recolor-btn:disabled,.color-trigger:disabled{opacity:.4;cursor:not-allowed}
.badge-recolor-btn:disabled:hover,.color-trigger:disabled:hover{border-color:var(--line-2)}
.badge-hide-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;transition:.16s}
.badge-hide-btn:hover{color:var(--text);border-color:var(--line)}
.badge-hide-btn.on{color:var(--accent)}
@media (max-width:480px){
  .badge-card.equipped{flex-wrap:wrap}
  .badge-card.equipped .badge-meta{flex-basis:100%;order:1}
  .badge-card.equipped .badge-toggle{order:2}
}

/* purchasable custom badge: the old inline card became the top-of-pane tile +
   3-step wizard (renderBadgeTile/openBadgeWizard); their styles live in
   dashboard.css (.bct / .bwz), the file that owns the cream editor skin. */
.bu-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
.bu-modal.on{display:flex}
.bu-scrim{position:absolute;inset:0;background:rgba(5,5,9,.72);backdrop-filter:blur(6px)}
.bu-card{position:relative;width:100%;max-width:380px;background:var(--bg-1,#0d0d13);border:1px solid var(--line);border-radius:22px;padding:2.2rem 1.8rem 1.6rem;text-align:center;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:buPop .4s cubic-bezier(.2,1.1,.4,1)}
@keyframes buPop{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}
.bu-ico{font-size:64px;line-height:0;margin:0 auto .6rem;display:inline-flex;position:relative}
.bu-tag{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.bu-name{font-size:1.4rem;margin:0 0 .3rem}
.bu-desc{color:var(--muted);font-size:.9rem;margin:0 0 1.4rem}
.bu-actions{display:flex;flex-direction:column;gap:.5rem}

/* ---- homepage community: featured + leaderboard ---- */
.community{padding-block:clamp(3rem,7vw,6rem)}
.comm-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2.2rem);margin-top:clamp(2rem,4vw,3rem)}
@media(max-width:760px){.comm-cols{grid-template-columns:1fr}}
.comm-h{font-family:var(--font-head,'Clash Display'),sans-serif;font-weight:600;font-size:1.02rem;margin:0 0 1rem;color:var(--muted);letter-spacing:.01em;display:flex;align-items:center;gap:.45rem}
.comm-h svg{width:1.05em;height:1.05em;fill:var(--accent);flex:none}
.comm-list{display:flex;flex-direction:column;gap:.55rem}
.comm-card{display:flex;align-items:center;gap:.8rem;padding:.7rem .85rem;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);text-decoration:none;transition:border-color .18s,transform .18s}
.comm-card:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);transform:translateY(-2px)}
.cc-rank{font-family:'JetBrains Mono',monospace;font-size:.85rem;color:var(--muted);width:16px;text-align:center;flex:none}
.cc-av{width:42px;height:42px;border-radius:50%;flex:none;background-size:cover;background-position:center;background-color:var(--bg-3,#1a1a22);display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--accent);border:1px solid var(--line)}
.cc-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.cc-name{display:flex;align-items:center;gap:.05rem;min-width:0;color:var(--text);font-weight:600;font-size:.96rem}
.cc-nm-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-handle{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-views{flex:none;text-align:right;font-family:var(--font-head,'Clash Display'),sans-serif;font-weight:600;color:var(--text);font-size:1.02rem;display:flex;flex-direction:column;line-height:1.1}
.cc-views small{font-size:.6rem;font-weight:400;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

@media (max-width:760px){
  .import-grid{grid-template-columns:1fr;text-align:center}
  .import-visual{order:-1}
  .phone-sm.lift{margin-bottom:0}
}

/* ---------- sub-page headers + gallery ---------- */
.nav-links a.active{color:var(--accent)}
.page-head{padding:clamp(118px,17vh,176px) 0 clamp(36px,5vw,64px);text-align:center;position:relative;overflow:hidden}
.page-head .wrap{position:relative;z-index:2}
.page-head h1{font-size:clamp(2.4rem,6vw,4.2rem);margin:.6rem auto 1rem}
.page-head .lead{margin-inline:auto}

/* ----- per-page opening rhythm (shared tokens, distinct spine) -----
   Each sub-page hangs a different "rail" under its lead so the openings don't
   read as the same centered unit recycled. */
/* LOOKS: a live palette rail telegraphing infinite color */
.head-rail{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin-top:1.8rem}
.head-swatch{width:30px;height:30px;border-radius:9px;border:1px solid var(--line-2);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .3s var(--ease)}
.head-rail:hover .head-swatch{transform:translateY(0)}
.head-swatch:hover{transform:translateY(-5px) scale(1.06)}
/* PRICING: a mono fact rail under the lead, in the pricing voice */
.head-facts{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:clamp(.6rem,2vw,1.4rem);margin-top:1.8rem;font-family:var(--mono);
  font-size:.78rem;letter-spacing:.06em;color:var(--muted)}
.head-facts b{color:var(--accent);font-weight:500}
.head-facts .sep{width:4px;height:4px;border-radius:50%;background:var(--line-2)}
@media (max-width:460px){.head-facts .sep{display:none}.head-facts{gap:.5rem 1rem}}
.looks-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(22px,3vw,40px);justify-items:center}
/* marketing preview phones are decorative: links inside must NOT be clickable/navigable
   (the dashboard #preview and public u.html keep their links fully interactive) */
.looks-gallery .orbt-profile,.looks-teaser .orbt-profile{pointer-events:none}
.looks-gallery .orbt-profile a,.looks-teaser .orbt-profile a,
.looks-gallery .op-link,.looks-teaser .op-link,
.looks-gallery .op-feat,.looks-teaser .op-feat,
.looks-gallery .op-video,.looks-teaser .op-video,
.looks-gallery .op-spotify,.looks-teaser .op-spotify,
.looks-gallery .op-social,.looks-teaser .op-social,
.looks-gallery .op-audio-btn,.looks-teaser .op-audio-btn{pointer-events:none;cursor:default}
.look-item{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:256px}
.look-item .phone-sm{width:100%;max-width:248px}
.look-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.feat-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:2.2rem;max-width:760px;margin-inline:auto}
.feat-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-radius:100px;background:var(--bg-2);border:1px solid var(--line);color:var(--muted);font-size:.88rem}
.feat-chip b{color:var(--text);font-weight:600}

/* ---------- video link card ---------- */
.op-video{display:block;border-radius:min(var(--op-radius,15px),22px);overflow:hidden;background:var(--ps);border:1px solid var(--pl);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.op-video:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pa) 60%,transparent);box-shadow:0 10px 30px -12px color-mix(in srgb,var(--pa) 50%,transparent)}
.op-video-thumb{display:block;aspect-ratio:16/9;background:#0d0d12 center/cover no-repeat;position:relative}
.op-play{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--pa) 92%,#000);display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.op-play::after{content:"";border-left:15px solid var(--op-onaccent,var(--pf));border-block:9px solid transparent;margin-left:4px}
.op-video-title{display:block;padding:12px 16px;font-weight:500;font-size:.95rem;color:var(--pt);text-align:left}
.op-video{cursor:pointer}
.op-video.played .op-play{display:none}
.op-embed{position:relative;line-height:0}

/* ---------- spotlight layout: first video/Spotify widget promoted to a hero ---------- */
.op-spotlight-hero{margin-bottom:clamp(20px,4vw,32px);position:relative}
.op-spotlight-hero::before{content:"Featured";display:block;margin-bottom:8px;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pa);text-align:left}
.op-spotlight-hero .op-video,.op-spotlight-hero .op-spotify{border-radius:min(calc(var(--op-radius,15px) + 6px),26px);
  box-shadow:0 24px 60px -24px color-mix(in srgb,var(--pa) 45%,transparent);border-width:1.5px}
.op-spotlight-hero .op-video-thumb{aspect-ratio:16/10}
.op-spotlight-hero .op-play{width:68px;height:68px}
.op-spotlight-hero .op-play::after{border-left-width:19px;border-block-width:12px}
.op-spotlight-hero .op-video-title{font-size:1.05rem;font-weight:600;padding:16px 18px}

/* ---------- hover-motion variants ---------- */
.orbt-profile[data-hover="grow"] .op-link:hover{transform:scale(1.03)}
.orbt-profile[data-hover="slide"] .op-link:hover{transform:translateX(5px)}
.orbt-profile[data-hover="glow"] .op-link:hover{transform:none;box-shadow:0 0 26px -4px color-mix(in srgb,var(--pa) 70%,transparent)}
.orbt-profile[data-hover="none"] .op-link:hover{transform:none;box-shadow:none}

/* ---------- more intro animations ---------- */
.op-content.op-intro[data-intro="fade"] .op-link,.op-content.op-intro[data-intro="fade"] .op-video,.op-content.op-intro[data-intro="fade"] .op-spotify{animation:op-fade .6s both;animation-delay:calc(.2s + var(--i)*.06s)}
.op-content.op-intro[data-intro="zoom"] .op-link,.op-content.op-intro[data-intro="zoom"] .op-video,.op-content.op-intro[data-intro="zoom"] .op-spotify{animation:op-zoom .55s both;animation-delay:calc(.22s + var(--i)*.07s)}
.op-content.op-intro[data-intro="blur"] .op-link,.op-content.op-intro[data-intro="blur"] .op-video,.op-content.op-intro[data-intro="blur"] .op-spotify{animation:op-blurin .6s both;animation-delay:calc(.22s + var(--i)*.07s)}
.op-content.op-intro[data-intro="flip"] .op-link,.op-content.op-intro[data-intro="flip"] .op-video,.op-content.op-intro[data-intro="flip"] .op-spotify{animation:op-flip .6s both;animation-delay:calc(.22s + var(--i)*.08s);transform-origin:top}
.op-content.op-intro[data-intro="drop"] .op-link,.op-content.op-intro[data-intro="drop"] .op-video,.op-content.op-intro[data-intro="drop"] .op-spotify{animation:op-drop .6s cubic-bezier(.5,1.7,.6,1) both;animation-delay:calc(.2s + var(--i)*.07s)}
.op-content.op-intro[data-intro="swing"] .op-link,.op-content.op-intro[data-intro="swing"] .op-video,.op-content.op-intro[data-intro="swing"] .op-spotify{animation:op-swing .7s both;animation-delay:calc(.2s + var(--i)*.07s);transform-origin:top center}
@keyframes op-fade{from{opacity:0}to{opacity:1}}
@keyframes op-zoom{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes op-blurin{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}
@keyframes op-flip{from{opacity:0;transform:perspective(600px) rotateX(-85deg)}to{opacity:1;transform:none}}
@keyframes op-drop{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:none}}
@keyframes op-swing{0%{opacity:0;transform:rotate(-7deg) translateY(14px)}60%{transform:rotate(3deg)}100%{opacity:1;transform:none}}

/* ---------- premium / VIP pill ----------
   A small labeled "VIP" pill in the restrained magenta family (replaces the bare
   crown glyph, which read as game chrome). The .crown class + crownChip() markup
   are unchanged so every gate/collapse hook still works: the glyph is hidden and
   the label drawn via ::after. Subtle on cream; flips to white-on-accent when its
   button is selected so it stays readable on the magenta fill. */
.crown{display:inline-flex;align-items:center;margin-left:.4em;padding:.18em .45em;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:999px;box-shadow:none;vertical-align:middle;flex:none;line-height:1}
.crown svg{display:none}
.crown::after{content:"VIP";font:600 .58rem/1 'General Sans',sans-serif;letter-spacing:.08em}
/* leading chip (starts a line of text): no left gap, a hair of right air */
.crown-lead{margin-left:0;margin-right:.1em}
/* on a SELECTED (accent-filled) seg button / chip, flip to white so it reads on magenta */
.seg button.on .crown,.preset-chip.on .crown,.font-chip.on .crown{color:#fff;background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.5)}

/* ---------- font pickers ---------- */
.font-block + .font-block{margin-top:1.1rem}
.font-sub{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}
.font-grid{display:flex;flex-wrap:wrap;gap:8px}
.font-chip{padding:.5rem .9rem;border-radius:10px;background:var(--bg-2);border:1px solid var(--line-2);color:var(--muted);font-size:1.02rem;line-height:1;transition:color .2s,border-color .2s;display:inline-flex;align-items:center}
.font-chip:hover{color:var(--text)}
.font-chip.on{border-color:var(--accent);color:var(--text)}
.icon-btn.vid.on{color:var(--accent)}
.slider{appearance:none;-webkit-appearance:none;flex:1;max-width:210px;height:5px;border-radius:100px;background:var(--bg-3);outline:none;cursor:pointer}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.slider::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--accent);cursor:pointer}

/* ===== ambient background motion (marketing + dashboard) ===== */
.page-motion{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:clip}
.page-motion::before,.page-motion::after{content:"";position:absolute;border-radius:50%;filter:blur(100px);will-change:transform}
.page-motion::before{width:52vw;height:52vw;top:-16%;right:-12%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 68%);animation:pm-a 28s ease-in-out infinite}
.page-motion::after{width:46vw;height:46vw;bottom:-22%;left:-12%;background:radial-gradient(circle,rgba(122,162,255,.13),transparent 68%);animation:pm-b 34s ease-in-out infinite}
@keyframes pm-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-12%,16%) scale(1.12)}}
@keyframes pm-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(14%,-12%) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.page-motion::before,.page-motion::after{animation:none}}

/* (V) dashboard background, premium depth without noise: a deep radial vignette,
   a faint solar glow up top, and a barely-there dot grid for structure. On-brand, subtle. */
.dash-body{background:var(--bg)}
.dash-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:clip;
  background:
    radial-gradient(120% 70% at 50% -10%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 60%),
    radial-gradient(90% 60% at 100% 100%,color-mix(in srgb,var(--orbit) 7%,transparent),transparent 60%),
    radial-gradient(140% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.45) 100%);
}
.dash-bg::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(color-mix(in srgb,var(--text) 8%,transparent) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask:radial-gradient(120% 80% at 50% 0%,#000,transparent 70%);
          mask:radial-gradient(120% 80% at 50% 0%,#000,transparent 70%);
}
.dash-bg::after{content:"";position:absolute;inset:0;opacity:.025;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* status pill: live presence dot (guns.lol-style) */
.op-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pa);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--pa) 55%,transparent);animation:op-live 1.9s infinite}
@keyframes op-live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pa) 55%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
@media (prefers-reduced-motion:reduce){.op-status::before{animation:none}}

/* emoji quick-picks */
.emoji-picks{display:flex;flex-wrap:wrap;gap:6px;margin-top:.6rem}
.emoji-picks button{width:34px;height:34px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line);font-size:1.05rem;line-height:1;transition:transform .15s,border-color .15s}
.emoji-picks button:hover{transform:scale(1.12);border-color:var(--accent)}
.char-count{float:right;font-family:var(--mono);font-size:.68rem;color:var(--faint);font-weight:400;letter-spacing:.04em}
.import-bar{display:flex;gap:10px;margin-bottom:.6rem;flex-wrap:wrap}
.import-bar .input{flex:1;min-width:160px}
.import-status{font-size:.84rem;color:var(--muted);min-height:1.2em;margin-bottom:1rem}
.status-row{display:flex;gap:10px}
.status-row .status-emoji{max-width:66px;text-align:center;font-size:1.1rem}
.music-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ===== guns.lol-style: status pill, video bg, audio, entry gate ===== */
.op-status{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;padding:.35rem .85rem;border-radius:100px;background:var(--oc-status-bg,color-mix(in srgb,var(--pa) 14%,transparent));border:1px solid color-mix(in srgb,var(--oc-status-bg,var(--pa)) 32%,transparent);font-size:.82rem;color:var(--pt)}
.op-status-emoji{font-size:1rem}
.op-bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.op-bg-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,9,.42),rgba(5,5,9,.62))}
/* now-playing chip: compact + low visual weight (subtle pill, not a chunky bar) */
.op-audio{position:absolute;top:12px;right:66px;z-index:6;display:flex;align-items:center;gap:.3rem;
  padding:3px 3px 3px 4px;border-radius:100px;
  background:color-mix(in srgb,var(--pt) 7%,transparent);backdrop-filter:blur(6px)}
.op-audio-art{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.op-audio.playing .op-audio-art{animation:op-spin 4s linear infinite}
@keyframes op-spin{to{transform:rotate(360deg)}}
.op-audio-btn{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--pa) 92%,#000);box-shadow:0 3px 9px rgba(0,0,0,.4);position:relative;cursor:pointer}
/* the visual stays a compact 32px, but the tap zone extends to a comfortable 44px */
.op-audio-btn::before{content:"";position:absolute;inset:-6px;border-radius:50%}
.op-audio-btn svg{width:14px;height:14px;fill:var(--op-onaccent,var(--pf));position:absolute}
.op-audio .op-ico-pause{display:none}
.op-audio.playing .op-ico-play{display:none}
.op-audio.playing .op-ico-pause{display:block}
.op-audio-title{max-width:108px;font-size:.66rem;color:var(--pt);padding:0 .4rem 0 .15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.82}
.op-audio.playing .op-audio-btn::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid color-mix(in srgb,var(--pa) 55%,transparent);animation:op-ping 1.6s ease-out infinite}
@keyframes op-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
/* the now-playing chip clears the top-bar Share button (both top-right) at ALL
   widths via right:66px above; on phones also trim the song title so it fits. */
@media (max-width:430px){
  .op-audio-title{max-width:88px}
}
.op-enter{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(8,8,12,.94);backdrop-filter:blur(10px);cursor:pointer;text-align:center;transition:opacity .6s var(--ease)}
.op-enter.gone{opacity:0;pointer-events:none}
.op-enter .oe-brand{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-bottom:1.2rem}
.op-enter .oe-mascot{width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 8px 28px rgba(225,29,143,.5))}
.op-enter .oe-word{font-family:"Unbounded",var(--display,"General Sans"),system-ui,sans-serif;font-weight:800;
  letter-spacing:-.01em;font-size:1.45rem;color:#fff}
.op-enter .logo{font-size:2.2rem;margin-bottom:1.1rem}  /* legacy text-logo fallback */
.op-enter .ec{font-family:var(--mono);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.4}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.op-enter .ec{animation:none}}

/* public-page top bar: small menu (left) + share (right), Linktree-style.
   Adapts ink to the profile theme via the data-theme on .op-topbar. */
.op-topbar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  padding:14px clamp(14px,4vw,26px);pointer-events:none}
.op-topbar .op-tb-btn{pointer-events:auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,#08080C 42%,transparent);color:#F4F2EC;border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;
  transition:transform .2s var(--ease),background .2s,border-color .2s}
.op-topbar[data-theme="light"] .op-tb-btn{background:color-mix(in srgb,#fff 55%,transparent);color:#16151A;border-color:rgba(0,0,0,.12)}
.op-tb-btn:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--accent,#e11d8f) 88%,#08080C);color:#fff;border-color:transparent}
.op-tb-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.op-tb-btn.copied{background:#62D08A;color:#08080C;border-color:transparent}
/* keep content clear of the bar */
.op-stage .orbt-profile .op-content{padding-top:64px}

/* import typewriter caret */
.import-typed{color:var(--accent)}
.import-typed::after{content:"";display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:2px;vertical-align:text-bottom;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* compare table */
.table-wrap{margin-top:3rem;overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;min-width:560px}
.cmp th,.cmp td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line);font-size:.95rem}
.cmp th{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.cmp td:first-child,.cmp th:first-child{text-align:left;color:var(--text)}
.cmp td:first-child{color:var(--muted)}
.cmp .hl{color:var(--accent);font-weight:600}
.cmp thead th.hl{background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:10px 10px 0 0}
.cmp tbody td.hl{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.cmp-note{margin-top:1rem;font-size:.78rem;color:var(--faint)}
/* SVG cells (no glyph icons) */
.cmp .ck,.cmp .dash{display:inline-block;width:20px;height:20px;vertical-align:middle}
.cmp .ck{stroke:currentColor;stroke-width:2.4;fill:none;color:var(--muted)}
/* "No" cell: a clearly visible muted token (circled dash) so the contrast with
   Orbt's gold checks is honest & readable, not a near-invisible hairline. */
.cmp .dash{width:22px;height:22px;padding:0;box-sizing:border-box;
  border-radius:50%;background:color-mix(in srgb,var(--muted) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--muted) 26%,transparent);
  stroke:var(--muted);stroke-width:2.6;fill:none;opacity:.78}
.cmp td.hl .ck{color:var(--accent)}
.cmp .star{font-family:var(--mono);font-size:.7rem;color:var(--accent);vertical-align:super;margin-left:1px}

.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;width:100%;
}
.hero-copy{position:relative;z-index:3}
.hero h1{margin:1.2rem 0}
.hero h1 em{font-style:normal;color:var(--accent);position:relative}
/* SplitText line masks so chars slide up from behind each line */
.hero .display .hl-line{overflow:hidden;padding-bottom:.08em}
.hero .display .hl-line > *{will-change:transform}
.hero .lead{margin-bottom:2rem}

/* claim-handle input */
.claim{
  display:flex;align-items:center;gap:.4rem;max-width:440px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:100px;
  padding:.4rem .4rem .4rem 1.1rem;transition:border-color .3s,box-shadow .3s;
}
.claim:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 12%,transparent)}
.claim .pre{color:var(--faint);font-family:var(--mono);font-size:.95rem;white-space:nowrap}
.claim input{
  flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);
  font-size:1rem;font-family:var(--mono);padding:.55rem .2rem;
}
.claim input::placeholder{color:var(--faint)}
.claim .btn{padding:.7em 1.2em}
.hero-trust{display:flex;align-items:center;gap:.7rem;margin-top:1.4rem;color:var(--muted);font-size:.88rem}
.hero-trust .avatars{display:flex}
.hero-trust .avatars span{
  width:28px;height:28px;border-radius:50%;border:2px solid var(--bg);margin-left:-8px;
  background:linear-gradient(135deg,var(--accent),var(--orbit));
}
.hero-trust .avatars span:first-child{margin-left:0}

/* orbital stage */
.orbital{
  position:relative;aspect-ratio:1;width:100%;max-width:560px;margin-inline:auto;
  display:grid;place-items:center;
}
@media (min-width:1500px){.orbital{max-width:640px}}
.orbital .ring{
  position:absolute;border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);border-radius:50%;
  top:50%;left:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--accent) 8%,transparent);
}
.orbital .ring-halo{border-color:color-mix(in srgb,var(--accent) 12%,transparent);border-style:dashed;box-shadow:none}
.orbital .core{
  position:relative;z-index:5;width:clamp(96px,22%,140px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE7A8,var(--accent) 45%,#9A6B12 100%);
  box-shadow:0 0 70px 6px color-mix(in srgb,var(--gold) 45%,transparent),inset 0 0 30px rgba(255,255,255,.35);
  display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--accent-ink);font-size:1.5rem;
}
.orbital .core::after{
  content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);animation:pulse 3.5s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.sat{
  position:absolute;top:50%;left:50%;z-index:4;
  width:clamp(40px,9%,54px);aspect-ratio:1;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(21,21,31,.85);border:1px solid var(--line-2);
  backdrop-filter:blur(6px);
  box-shadow:0 8px 30px -8px rgba(0,0,0,.6);
  transition:transform .2s var(--ease);
  will-change:transform;
}
.sat svg{width:54%;height:54%;fill:var(--text)}
.sat:hover{transform:scale(1.18) translate(var(--sx,0),var(--sy,0))!important;border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.orbital .core::after{animation:none}}

/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--line);padding-block:0;overflow:hidden;background:var(--bg-1)}
.marquee-track{display:flex;padding:26px 0;width:max-content;animation:scroll-x 34s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll-x{to{transform:translateX(-50%)}}
.marquee-track span{display:inline-flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.95rem;white-space:nowrap;margin-right:4rem}
.marquee-track svg{width:20px;height:20px;fill:var(--muted)}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- bento features ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:3rem}
.card{
  background:linear-gradient(180deg,var(--bg-1),var(--bg));
  border:1px solid var(--line);border-radius:var(--radius);padding:28px;
  position:relative;overflow:hidden;transition:border-color .4s,transform .4s var(--ease);
}
.card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.card .ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:1.1rem;
  background:color-mix(in srgb,var(--gold) 10%,transparent);border:1px solid color-mix(in srgb,var(--gold) 20%,transparent);
}
.card .ico svg{width:22px;height:22px;stroke:var(--accent);fill:none}
.card h3{font-size:1.25rem;margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.96rem}
.card.span-3{grid-column:span 3}
.card.span-2{grid-column:span 2}
.card.span-4{grid-column:span 4}
/* spotlight follows cursor */
.card.spot::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--gold) 10%,transparent),transparent 60%);
}
.card.spot:hover::before{opacity:1}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:3rem;counter-reset:step}
.step{position:relative;padding-top:2.4rem;border-top:1px solid var(--line)}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--mono);font-size:.8rem;color:var(--accent);
  position:absolute;top:-.9rem;left:0;background:var(--bg);padding-right:.6rem;
}
.step h3{font-size:1.3rem;margin-bottom:.5rem}
.step p{color:var(--muted)}

/* orbit-path scrub: a rail the "you" planet traces across the three steps on scroll */
.steps-stage{position:relative}
.steps-orbit{position:absolute;top:1.2rem;left:0;width:100%;height:clamp(140px,18vw,300px);z-index:0;pointer-events:none;overflow:visible}
.steps-orbit #stepsPathTrail{stroke-dasharray:1 1;will-change:stroke-dasharray} /* JS overrides for the trail draw */
.steps-planet{
  position:absolute;top:0;left:0;z-index:1;width:clamp(18px,2.4vw,26px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE7A8,var(--accent) 48%,#9A6B12 100%);
  box-shadow:0 0 22px 3px color-mix(in srgb,var(--gold) 45%,transparent),inset 0 0 8px rgba(255,255,255,.4);
  pointer-events:none;opacity:0;will-change:transform;
}
.steps-planet.lit{opacity:1}
.steps-stage .steps{position:relative;z-index:2}
/* the rail is designed for the 3-across desktop layout; on the stacked layout it
   would cross the step text, so hide it (steps go single-column at 760px) */
@media (max-width:760px){.steps-orbit,.steps-planet{display:none}}
/* reduced-motion / no-JS: hide the moving rail+planet, keep the clean static steps */
@media (prefers-reduced-motion:reduce){.steps-orbit,.steps-planet{display:none}}
html:not(.js) .steps-orbit,html:not(.js) .steps-planet{display:none}

/* ---------- pricing ---------- */
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:3rem;max-width:820px;margin-inline:auto}
/* hybrid pricing: Free / Monthly / Lifetime three-up */
.prices.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1080px}
@media (max-width:920px){.prices.three{grid-template-columns:1fr;max-width:480px}}
/* a sub-amount line under the headline price (e.g. "or $3.50/mo") */
.price .amt-alt{font-family:var(--mono);font-size:.82rem;color:var(--faint);margin:-.1rem 0 .2rem}
.price{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;
  position:relative;
}
.price.feat{border-color:transparent;
  background:
    radial-gradient(120% 80% at 50% -10%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 60%),
    var(--bg-1);
  box-shadow:0 30px 80px -30px color-mix(in srgb,var(--accent) 30%,transparent),0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent);
  transform:translateY(-8px)}
@media (max-width:760px){.price.feat{transform:none}}
/* "Best value" ribbon: the plan we steer people toward */
.price-badge{position:absolute;top:0;right:24px;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .85rem;border-radius:100px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--accent-ink,#08080C);background:linear-gradient(135deg,var(--accent),var(--orbit));
  box-shadow:0 8px 22px -8px color-mix(in srgb,var(--accent) 70%,transparent);z-index:2;white-space:nowrap}
.price.feat::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--a,0deg),var(--accent),var(--orbit),var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin-border 6s linear infinite;
}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin-border{to{--a:360deg}}
.price .tag{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;color:var(--accent)}
.price .amt{font-family:var(--display);font-size:3rem;margin:.4rem 0 .2rem}
.price .amt small{font-size:1rem;color:var(--muted);font-family:var(--body)}
.price ul{list-style:none;margin:1.5rem 0;display:grid;gap:.7rem}
.price li{display:flex;gap:.6rem;color:var(--muted);font-size:.95rem}
.price li svg{width:18px;height:18px;stroke:var(--accent);fill:none;flex:none;margin-top:2px}
.price .btn{width:100%}
@media (prefers-reduced-motion:reduce){.price.feat::before{animation:none}}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:3rem auto 0}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:24px 0;text-align:left;font-size:1.1rem;font-family:var(--display);font-weight:500}
.q .plus{flex:none;width:22px;height:22px;position:relative;transition:transform .35s var(--ease)}
.q .plus::before,.q .plus::after{content:"";position:absolute;background:var(--accent);inset:50% 0;height:2px;transform:translateY(-50%)}
.q .plus::after{transform:translateY(-50%) rotate(90deg);transition:transform .35s var(--ease)}
.q.open .plus::after{transform:translateY(-50%) rotate(0)}
.q .ans{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.q.open .ans{grid-template-rows:1fr}
.q .ans > *{min-height:0;overflow:hidden}
.q .ans-in{min-height:0}
.q .ans p{padding-bottom:24px;color:var(--muted);max-width:62ch;margin:0}
@media (prefers-reduced-motion:reduce){.q .ans{transition:none}}

/* ---------- CTA band ---------- */
.cta-band{text-align:center;background:
  radial-gradient(70% 120% at 50% 0%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 60%);}
.cta-band h2{margin-bottom:1.2rem}
.cta-band .claim{margin:2rem auto 0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding-block:64px 40px;background:var(--bg-1)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.foot-grid h5{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:1rem}
.foot-grid a{display:block;color:var(--muted);font-size:.92rem;padding:.3rem 0;transition:color .2s}
.foot-grid a:hover{color:var(--text)}
.foot-blurb{color:var(--muted);font-size:.92rem;max-width:30ch;margin-top:1rem}

/* ---------- legal / about body ---------- */
.legal-body{color:var(--muted);font-size:1.02rem}
.legal-body h2{font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--text);margin:2.2rem 0 .7rem}
.legal-body h2:first-child{margin-top:0}
.legal-body p{margin-bottom:1rem;max-width:64ch}
.legal-body ul{margin:0 0 1rem 1.1rem;display:grid;gap:.5rem}
.legal-body a{color:var(--accent)}
.legal-body .updated{font-family:var(--mono);font-size:.78rem;color:var(--faint);letter-spacing:.06em;margin-bottom:1.6rem}

/* ---------- reveal ----------
   Only hide reveal blocks when JS is present (html.js, set by app.js as its
   first act). If app.js fails to load/parse, the hidden state never applies and
   every block stays visible: no blank homepage. */
html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js [data-reveal]{opacity:1;transform:none}}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero .lead,.hero .section-head{margin-inline:auto}
  .claim,.hero-trust{margin-inline:auto}
  .hero-trust{justify-content:center}
  .orbital{order:-1;max-width:420px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .card.span-3,.card.span-4,.card.span-2{grid-column:span 1}
  .steps{grid-template-columns:1fr}
  .demo{grid-template-columns:1fr;text-align:center}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .nav-toggle{display:grid}
  .bento{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .claim{flex-wrap:wrap;border-radius:18px;padding:.6rem}
  .claim .btn{width:100%}
}

/* mobile menu */
.nav-toggle{width:42px;height:42px;border-radius:10px;border:1px solid var(--line-2);place-items:center}
.nav-toggle span{width:18px;height:2px;background:var(--text);position:relative;transition:.3s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;width:18px;height:2px;background:var(--text);left:0;transition:.3s}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.menu-open .nav-toggle span{background:transparent}
.menu-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
.menu-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:0;z-index:90;background:rgba(8,8,12,.97);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  opacity:0;pointer-events:none;transition:opacity .4s;
}
.menu-open .mobile-menu{opacity:1;pointer-events:auto}
.mobile-menu a{font-family:var(--display);font-size:1.8rem;color:var(--text)}
/* the primary CTA pill fills with --text (near-black on marketing), so its label
   must flip to --bg (cream) or it goes black-on-black. Higher specificity than the
   .mobile-menu a rule above (and than orbt.css's copy of it), so it wins by weight. */
.mobile-menu a.btn{color:var(--bg)}
.mobile-menu .btn{margin-top:1rem}

/* ==========================================================================
   AUTH PAGES (signup / login)
   ========================================================================== */
.auth{
  min-height:100svh;display:grid;place-items:center;padding:90px var(--pad) 40px;position:relative;overflow:hidden;
}
.auth::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 40% at 80% 10%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 60%),
    radial-gradient(46% 40% at 12% 88%,rgba(122,162,255,.12),transparent 60%);
}
.auth-card{
  position:relative;z-index:1;width:100%;max-width:430px;
  background:linear-gradient(180deg,var(--bg-1),var(--bg));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,40px);box-shadow:0 40px 100px -40px rgba(0,0,0,.8);
}
.auth-card .logo{font-size:1.6rem;margin-bottom:1.6rem}
.auth-card h1{font-size:clamp(1.7rem,3vw,2.1rem);margin-bottom:.4rem}
.auth-card .sub{color:var(--muted);font-size:.95rem;margin-bottom:1.8rem}
.field{margin-bottom:1.05rem}
.field label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.input{
  width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;
  color:var(--text);font-size:1rem;padding:.85rem 1rem;transition:border-color .25s,box-shadow .25s;
}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 12%,transparent)}
.input::placeholder{color:var(--faint)}
/* handle field with prefix */
.field-handle{display:flex;align-items:center;background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.field-handle:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 12%,transparent)}
.field-handle .pre{padding:.85rem .2rem .85rem 1rem;color:var(--faint);font-family:var(--mono);font-size:.95rem;white-space:nowrap}
.field-handle input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:var(--mono);font-size:.95rem;padding:.85rem .4rem}
.field-hint{font-size:.78rem;margin-top:.4rem;min-height:1.1em;font-family:var(--mono)}
.field-hint.ok{color:#62D08A}
.field-hint.bad{color:#FF6B6B}
.field-hint.muted{color:var(--faint)}
/* Discord-presence opt-in checkbox: the browser default (~13px) is too small to tap
   comfortably, so give it a ~20px box and the brand accent. */
#presenceToggle{width:20px;height:20px;flex:none;accent-color:var(--accent);cursor:pointer}
/* password field with show/hide eye toggle */
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:3rem}
.pw-eye{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;padding:0;background:none;border:0;border-radius:8px;color:var(--faint);cursor:pointer;transition:color .2s}
.pw-eye:hover{color:var(--text)}
.pw-eye:focus-visible{outline:none;color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent)}
.pw-eye svg{width:1.15rem;height:1.15rem;display:block}
.pw-eye .eye-off{display:none}
.pw-eye.show .eye-on{display:none}
.pw-eye.show .eye-off{display:block}
.auth-card .btn{width:100%;margin-top:.6rem}
.auth-alt{margin-top:1.4rem;text-align:center;color:var(--muted);font-size:.92rem}
.auth-alt a{color:var(--accent);font-weight:600}
.auth-back{position:absolute;top:26px;left:var(--pad);z-index:2;color:var(--muted);font-size:.9rem;display:inline-flex;align-items:center;gap:.4rem}
.auth-back:hover{color:var(--text)}
.alert{border-radius:12px;padding:.8rem 1rem;font-size:.9rem;margin-bottom:1.2rem;display:none}
.alert.show{display:block}
.alert.err{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.3);color:#FF9D9D}
.alert.ok{background:rgba(98,208,138,.1);border:1px solid rgba(98,208,138,.3);color:#8AE0A8}
.btn[disabled]{opacity:.55;pointer-events:none}
.spin{width:16px;height:16px;border:2px solid rgba(26,21,3,.35);border-top-color:var(--accent-ink);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   ORBIT-BUILD TRANSITION: full-screen system assemble on successful signup
   ========================================================================== */
.orbit-build{
  position:fixed;inset:0;z-index:9999;display:none;place-items:center;
  background:radial-gradient(60% 60% at 50% 46%,#0C0C13,var(--bg) 72%);
  opacity:0;
}
.orbit-build.run{display:grid}
.orbit-build::before{ /* faint vignette + grain-free deep field */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 42% at 50% 50%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%);
}
.ob-stage{width:min(78vmin,560px);height:min(78vmin,560px);overflow:visible}
.ob-ring{stroke:color-mix(in srgb,var(--accent) 40%,transparent);stroke-width:1.4}
.ob-ring-dash{stroke:color-mix(in srgb,var(--accent) 22%,transparent);stroke-dasharray:2 9;stroke-width:1.4}
.ob-sat{transform-box:fill-box;transform-origin:center}
.ob-sat-dot{fill:var(--accent)}
.ob-status{
  position:absolute;left:0;right:0;bottom:clamp(48px,12vh,120px);text-align:center;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}
.ob-status b{color:var(--accent);font-weight:500}

/* ==========================================================================
   PROFILE VIEW (.orbt-profile): shared by dashboard preview + public page
   --pa = accent ; data-theme = dark|light
   ========================================================================== */
.orbt-profile{
  --pa:#e11d8f;--pa2:#7b2ff7;
  --pf:#0d0d0d;--ps:#15151F;--pt:#F4F2EC;--pm:#9A9AA8;--pl:rgba(255,255,255,.10);
  --op-d:"Clash Display";--op-b:"General Sans";
  position:relative;isolation:isolate;overflow:hidden;border-radius:inherit;
  min-height:100%;width:100%;background:var(--pf);color:var(--pt);
  font-family:var(--op-b),var(--body);
}
.orbt-profile[data-theme="light"]{--pf:#F6F4EE;--ps:#FFFFFF;--pt:#16151A;--pm:#6B6B76;--pl:rgba(0,0,0,.09)}
/* font pairs */
.orbt-profile[data-font="clash"]{--op-d:"Clash Display";--op-b:"General Sans"}
.orbt-profile[data-font="editorial"]{--op-d:"Fraunces";--op-b:"General Sans"}
.orbt-profile[data-font="grotesk"]{--op-d:"Space Grotesk";--op-b:"Inter"}
.orbt-profile[data-font="mono"]{--op-d:"Space Mono";--op-b:"Space Mono"}
/* button shapes */
.orbt-profile[data-btnshape="rounded"]{--op-radius:15px}
.orbt-profile[data-btnshape="pill"]{--op-radius:100px}
.orbt-profile[data-btnshape="soft"]{--op-radius:9px}
.orbt-profile[data-btnshape="sharp"]{--op-radius:3px}
/* notched / asymmetric shapes use clip-path on the link/video/spotify cards */
.orbt-profile[data-btnshape="cut"]{--op-radius:4px}
.orbt-profile[data-btnshape="cut"] .op-link,.orbt-profile[data-btnshape="cut"] .op-spotify,.orbt-profile[data-btnshape="cut"] .op-video,.orbt-profile[data-btnshape="cut"] .op-feat{
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.orbt-profile[data-btnshape="tab"]{--op-radius:14px}
.orbt-profile[data-btnshape="tab"] .op-link,.orbt-profile[data-btnshape="tab"] .op-spotify,.orbt-profile[data-btnshape="tab"] .op-video,.orbt-profile[data-btnshape="tab"] .op-feat{
  border-radius:3px var(--op-radius) var(--op-radius) 3px}

/* ---------- BACKGROUND LAYER ---------- */
.op-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.op-bg canvas,.op-bg .op-bgvideo,.op-bg .op-spot{border-radius:inherit}
.op-bg canvas{position:absolute;inset:0}
.op-bg-solid::after,.op-bg-stars::before,.op-bg-grain::after{content:"";position:absolute;inset:0 0 auto;height:340px;
  background:radial-gradient(120% 80% at 50% -20%,color-mix(in srgb,var(--oc-bg,var(--pa)) 22%,transparent),transparent 60%)}
/* mesh */
.op-bg-mesh::before,.op-bg-mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(64px);opacity:.5}
.op-bg-mesh::before{width:62%;aspect-ratio:1;top:-12%;left:-6%;background:var(--oc-bg,var(--pa));animation:op-float calc(15s / var(--op-bgspeed,1)) ease-in-out infinite}
.op-bg-mesh::after{width:56%;aspect-ratio:1;bottom:-12%;right:-6%;background:var(--oc-bg,var(--pa2));animation:op-float calc(19s / var(--op-bgspeed,1)) ease-in-out infinite reverse}
@keyframes op-float{0%,100%{transform:translate(0,0)}50%{transform:translate(14%,12%)}}
/* aurora */
.op-bg-aurora{background:
  radial-gradient(55% 50% at 18% 12%,color-mix(in srgb,var(--oc-bg,var(--pa)) 42%,transparent),transparent 70%),
  radial-gradient(55% 50% at 82% 28%,color-mix(in srgb,var(--oc-bg,var(--pa2)) 40%,transparent),transparent 70%),
  radial-gradient(70% 60% at 50% 102%,color-mix(in srgb,var(--oc-bg,var(--pa)) 30%,transparent),transparent 70%);
  background-size:200% 200%;animation:op-aurora calc(20s / var(--op-bgspeed,1)) ease infinite}
@keyframes op-aurora{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* grain */
.op-bg-grain::before{content:"";position:absolute;inset:-50%;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* waves: animated gradient bands that drift diagonally */
.op-bg-waves{background:
  linear-gradient(120deg,
    color-mix(in srgb,var(--oc-bg,var(--pa)) 26%,transparent) 0%,
    transparent 28%,
    color-mix(in srgb,var(--oc-bg,var(--pa2)) 24%,transparent) 50%,
    transparent 72%,
    color-mix(in srgb,var(--oc-bg,var(--pa)) 22%,transparent) 100%);
  background-size:300% 300%;animation:op-waves calc(18s / var(--op-bgspeed,1)) ease-in-out infinite}
@keyframes op-waves{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
/* noise: animated film grain (shifting noise tile) */
.op-bg-noise::before{content:"";position:absolute;inset:-50%;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:op-noise max(.12s,calc(.6s / var(--op-bgspeed,1))) steps(4) infinite}
.op-bg-noise::after{content:"";position:absolute;inset:0 0 auto;height:340px;
  background:radial-gradient(120% 80% at 50% -20%,color-mix(in srgb,var(--oc-bg,var(--pa)) 22%,transparent),transparent 60%)}
@keyframes op-noise{0%{transform:translate(0,0)}25%{transform:translate(-6%,4%)}50%{transform:translate(4%,-6%)}75%{transform:translate(-4%,-4%)}100%{transform:translate(0,0)}}
/* spotlight */
.op-bg-spotlight .op-spot{position:absolute;left:0;top:0;width:420px;height:420px;margin:-210px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--oc-bg,var(--pa)) 30%,transparent),transparent 70%);will-change:transform}
/* image */
.op-bg-image{background-size:cover;background-position:center}
.op-bg-image::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pf) 62%,transparent),color-mix(in srgb,var(--pf) 90%,transparent))}

/* ---------- CONTENT LAYER ---------- */
.op-content{position:relative;z-index:1;padding:54px 22px 40px;text-align:center}
/* legibility scrim: sits behind the content over busy media backgrounds */
.orbt-profile[data-card="on"] .op-content::before{
  content:"";position:absolute;z-index:-1;inset:16px 12px;border-radius:24px;
  background:color-mix(in srgb,var(--pf) calc(var(--op-card-op,.55)*100%),transparent);
  -webkit-backdrop-filter:blur(var(--op-card-blur,10px));backdrop-filter:blur(var(--op-card-blur,10px));
  border:1px solid color-mix(in srgb,var(--pt) 8%,transparent);
}
@media (max-width:480px){.orbt-profile[data-card="on"] .op-content::before{inset:10px 6px}}

/* ==========================================================================
   (F/W) FULL-BLEED LAYOUT: public page + desktop preview (guns.lol-style)
   The chosen background fills the ENTIRE profile element (which itself fills
   the viewport via .op-stage), and the content sits in a centered glass card.
   data-layout="framed" (default) keeps the existing phone-style stack.
   ========================================================================== */
.orbt-profile[data-layout="full"]{min-height:100%;display:flex;align-items:safe center;justify-content:center}
/* (FLAGSHIP) ambient stage: a centered accent spotlight + edge vignette so the
   card never floats in dead space on big screens. Reads on top of any background,
   below the content. Strength scales with the accent the creator picked. */
.orbt-profile[data-layout="full"]::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 52% at 50% 42%,color-mix(in srgb,var(--pa) 16%,transparent),transparent 70%),
    radial-gradient(140% 120% at 50% 50%,transparent 52%,color-mix(in srgb,var(--pf) 72%,#000 0) 100%);
}
/* (FLANKS) edge-to-edge ambient: two drifting accent glows bleeding in from the
   left & right so a wide screen feels alive beyond the card. The chosen bg's
   accents (--pa/--pa2) push color into the side gutters; drift speed follows
   the per-profile bg_speed. Subtle by default, richer on wide screens (below).
   Rendered as a sibling layer below the card so it never sits over the content. */
.orbt-profile[data-layout="full"] > .op-flank{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  border-radius:inherit;
  /* keep it tasteful at small sizes: the flank glows fade toward the centered card */
  opacity:.5;transition:opacity .4s ease;
}
.orbt-profile[data-layout="full"] > .op-flank::before,
.orbt-profile[data-layout="full"] > .op-flank::after{
  content:"";position:absolute;top:50%;width:46vw;max-width:760px;aspect-ratio:1;
  border-radius:50%;filter:blur(90px);opacity:.42;
  will-change:transform;
}
.orbt-profile[data-layout="full"] > .op-flank::before{
  left:-12vw;transform:translateY(-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--pa) 70%,transparent),transparent 68%);
  animation:op-flankL calc(26s / var(--op-bgspeed,1)) ease-in-out infinite}
.orbt-profile[data-layout="full"] > .op-flank::after{
  right:-12vw;transform:translateY(-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--pa2) 70%,transparent),transparent 68%);
  animation:op-flankR calc(31s / var(--op-bgspeed,1)) ease-in-out infinite}
@keyframes op-flankL{0%,100%{transform:translate(0,-50%) scale(1)}50%{transform:translate(8%,-42%) scale(1.12)}}
@keyframes op-flankR{0%,100%{transform:translate(0,-50%) scale(1)}50%{transform:translate(-8%,-58%) scale(1.12)}}
/* wide screens: let the flanks read maximal & edge-to-edge (guns.lol energy) */
@media (min-width:1280px){
  .orbt-profile[data-layout="full"] > .op-flank{opacity:.9}
  .orbt-profile[data-layout="full"] > .op-flank::before,
  .orbt-profile[data-layout="full"] > .op-flank::after{opacity:.5;filter:blur(110px)}
}
@media (min-width:1700px){
  .orbt-profile[data-layout="full"] > .op-flank::before{left:-6vw}
  .orbt-profile[data-layout="full"] > .op-flank::after{right:-6vw}
}
/* small screens: the card hugs the viewport, so dial the flanks down further
   (they're already behind the card, but keep the gutters quiet on phones) */
@media (max-width:760px){
  .orbt-profile[data-layout="full"] > .op-flank{opacity:.32}
}
@media (prefers-reduced-motion:reduce){
  .orbt-profile[data-layout="full"] > .op-flank::before,
  .orbt-profile[data-layout="full"] > .op-flank::after{animation:none!important}
}
.orbt-profile[data-layout="full"] .op-content{
  margin-inline:auto;width:100%;max-width:480px;
  padding:clamp(28px,4vw,52px) clamp(20px,3vw,40px);
  display:flex;flex-direction:column;align-items:center;
}
/* the centered card: a tasteful glass panel so content reads on any background.
   It's always present in full mode (not just media bgs) for that intentional, framed look. */
.orbt-profile[data-layout="full"] .op-content::before{
  content:"";position:absolute;z-index:-1;inset:0;border-radius:28px;
  background:color-mix(in srgb,var(--pf) calc(max(var(--op-card-op,.55),.62)*100%),transparent);
  -webkit-backdrop-filter:blur(calc(max(var(--op-card-blur,10px),18px))) saturate(1.15);
          backdrop-filter:blur(calc(max(var(--op-card-blur,10px),18px))) saturate(1.15);
  border:1px solid color-mix(in srgb,var(--pt) 20%,transparent);
  box-shadow:
    0 48px 140px -44px rgba(0,0,0,.78),
    0 0 0 1px color-mix(in srgb,var(--pa) 16%,transparent),
    0 0 80px -10px color-mix(in srgb,var(--pa) 24%,transparent),
    inset 0 1px 0 color-mix(in srgb,var(--pt) 26%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--pt) 5%,transparent);
}
/* hairline gradient top edge + faint inner accent rim for a defined glass-panel read */
.orbt-profile[data-layout="full"] .op-content::after{
  content:"";position:absolute;z-index:-1;inset:0;border-radius:28px;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--pa) 10%,transparent),transparent 58%),
    linear-gradient(180deg,color-mix(in srgb,var(--pt) 11%,transparent),transparent 40%);
  -webkit-mask:linear-gradient(#000,#000);mask:linear-gradient(#000,#000);
}
.orbt-profile[data-layout="full"] .op-links{width:100%}
/* desktop: a bit more presence, larger card, generous breathing room */
@media (min-width:900px){
  .orbt-profile[data-layout="full"] .op-content{max-width:540px;padding:60px 52px}
}
/* phone: card hugs the screen so it never looks like a tiny rectangle in a void */
@media (max-width:560px){
  .orbt-profile[data-layout="full"] .op-content{max-width:none;padding:44px 22px;min-height:100%}
  .orbt-profile[data-layout="full"] .op-content::before,
  .orbt-profile[data-layout="full"] .op-content::after{inset:10px;border-radius:24px}
}
@media (max-width:380px){
  .orbt-profile[data-layout="full"] .op-content::before,
  .orbt-profile[data-layout="full"] .op-content::after{inset:0;border-radius:0}
}

/* ==========================================================================
   (CARD/OPEN) two more layout_mode page WRAPPERS on top of the full-bleed
   layout above, orthogonal to list/bento/spotlight arrangement (both render
   a plain list; el.dataset.pagemode carries the choice, set in profile-view.js).
   'card': the content card never grows past the viewport: it locks to a
             fixed height and scrolls INSIDE itself, so the profile always
             reads as one self-contained floating card, never a long page.
   'open': the opposite instinct: no centered glass card at all, a wide
             column that flows top-to-bottom like a real webpage. The page
             itself scrolls normally; nothing is boxed in.
   ========================================================================== */
.orbt-profile[data-layout="full"][data-pagemode="card"] .op-content{
  max-height:calc(100svh - 56px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
          mask-image:linear-gradient(180deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
}
@media (max-width:560px){
  .orbt-profile[data-layout="full"][data-pagemode="card"] .op-content{max-height:calc(100svh - 24px)}
}
.orbt-profile[data-layout="full"][data-pagemode="open"] .op-content{
  max-width:760px;background:none;box-shadow:none;
}
.orbt-profile[data-layout="full"][data-pagemode="open"] .op-content::before,
.orbt-profile[data-layout="full"][data-pagemode="open"] .op-content::after{content:none}
@media (min-width:900px){
  .orbt-profile[data-layout="full"][data-pagemode="open"] .op-content{max-width:820px;padding:72px 40px}
}

/* ---------- username effects (data-namefx) ---------- */
.orbt-profile[data-namefx="gradient"] .op-name{
  background:linear-gradient(100deg,var(--pa),var(--pa2),var(--pa));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:op-name-shimmer 6s linear infinite}
@keyframes op-name-shimmer{to{background-position:200% center}}
.orbt-profile[data-namefx="glow"] .op-name{text-shadow:0 0 18px color-mix(in srgb,var(--pa) 65%,transparent),0 0 4px color-mix(in srgb,var(--pa) 40%,transparent)}
@media (prefers-reduced-motion:reduce){.orbt-profile[data-namefx="gradient"] .op-name{animation:none}}

/* ---------- spotify facade (click-to-load) ---------- */
.op-spotify{display:flex;align-items:center;gap:.8rem;padding:calc(13px*var(--op-lscale,1)) calc(16px*var(--op-lscale,1));
  border-radius:var(--op-radius,15px);background:var(--ps);border:1px solid var(--pl);color:var(--pt);
  text-align:left;font-weight:500;font-size:calc(.95rem*var(--op-lscale,1));cursor:pointer;position:relative;
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.op-spotify:hover{transform:translateY(-2px);border-color:color-mix(in srgb,#1DB954 60%,transparent);box-shadow:0 10px 30px -12px rgba(29,185,84,.4)}
.op-spotify .op-link-ico{flex:none;width:calc(34px*var(--op-iscale,1));height:calc(34px*var(--op-iscale,1));border-radius:clamp(4px,calc(var(--op-radius,15px) - 6px),14px);display:grid;place-items:center;background:color-mix(in srgb,#1DB954 18%,transparent);color:#1DB954}
.op-spotify .op-link-ico svg{width:calc(18px*var(--op-iscale,1));height:calc(18px*var(--op-iscale,1));fill:currentColor}
.op-spotify .op-link-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-play-sm{position:static;width:30px;height:30px;flex:none;margin:0;border-radius:50%;background:var(--pa);display:grid;place-items:center}
/* keep the Spotify-green only where it belongs (Spotify blocks); TikTok/Twitch/YouTube/IG
   facades reuse .op-play-sm and should take the profile accent, not Spotify's brand green. */
.op-spotify .op-play-sm{background:#1DB954}
.op-play-sm::after{content:"";border-left:11px solid #fff;border-block:7px solid transparent;margin-left:3px}
.op-spotify.played{padding:0;background:none;border:none;box-shadow:none;display:block}
.op-spotify.played:hover{transform:none}

/* avatar */
.op-avatar-wrap{position:relative;width:calc(104px*var(--op-ascale,1));height:calc(104px*var(--op-ascale,1));margin:0 auto 16px;display:grid;place-items:center}
.op-avatar-wrap.has-ring::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:conic-gradient(from 0deg,var(--oc-ring,var(--pa)),var(--oc-ring,var(--pa2)),var(--oc-ring,var(--pa)));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  animation:spin 8s linear infinite}
.op-avatar{width:calc(88px*var(--op-ascale,1));height:calc(88px*var(--op-ascale,1));overflow:hidden;border:2px solid var(--pl);box-shadow:0 14px 40px -12px rgba(0,0,0,.5)}
.op-avatar img{width:100%;height:100%;object-fit:cover}
.op-avatar-fallback{width:100%;height:100%;display:grid;place-items:center;font-family:var(--op-d);font-weight:700;font-size:1.9rem;
  color:var(--pf);background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--pa) 80%,#fff),var(--pa) 55%,color-mix(in srgb,var(--pa) 55%,#000))}
.orbt-profile[data-avatar="circle"] .op-avatar-wrap,.orbt-profile[data-avatar="circle"] .op-avatar{border-radius:50%}
.orbt-profile[data-avatar="squircle"] .op-avatar-wrap,.orbt-profile[data-avatar="squircle"] .op-avatar{border-radius:30%}
.orbt-profile[data-avatar="hex"] .op-avatar{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border:none;position:relative;z-index:1}
/* clip-matched accent ring: a hex-clipped ::before sits just behind the (smaller) avatar so
   the shape keeps an edge instead of silently dropping its ring. Static (no spin) to avoid wobble. */
.orbt-profile[data-avatar="hex"] .op-avatar-wrap.has-ring::before{-webkit-mask:none;mask:none;animation:none;
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
/* rounded: soft square */
.orbt-profile[data-avatar="rounded"] .op-avatar-wrap,.orbt-profile[data-avatar="rounded"] .op-avatar{border-radius:20px}
/* diamond: rotated square (counter-rotate the image so it stays upright) */
.orbt-profile[data-avatar="diamond"] .op-avatar{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border:none}
.orbt-profile[data-avatar="diamond"] .op-avatar-wrap.has-ring::before{-webkit-mask:none;mask:none;clip-path:polygon(50% -2%,102% 50%,50% 102%,-2% 50%,50% -2%,50% 6%,8% 50%,50% 94%,92% 50%,50% 6%);background:var(--oc-ring,var(--pa))}
/* flower: scalloped petals via clip-path */
.orbt-profile[data-avatar="flower"] .op-avatar{border:none;position:relative;z-index:1;
  clip-path:polygon(50% 0,61% 12%,76% 8%,80% 24%,95% 32%,88% 47%,100% 60%,86% 68%,88% 85%,71% 84%,61% 98%,50% 88%,39% 98%,29% 84%,12% 85%,14% 68%,0 60%,12% 47%,5% 32%,20% 24%,24% 8%,39% 12%)}
/* clip-matched accent ring for the scalloped flower shape (static, sits behind the avatar) */
.orbt-profile[data-avatar="flower"] .op-avatar-wrap.has-ring::before{-webkit-mask:none;mask:none;animation:none;
  clip-path:polygon(50% 0,61% 12%,76% 8%,80% 24%,95% 32%,88% 47%,100% 60%,86% 68%,88% 85%,71% 84%,61% 98%,50% 88%,39% 98%,29% 84%,12% 85%,14% 68%,0 60%,12% 47%,5% 32%,20% 24%,24% 8%,39% 12%)}

.op-name{font-family:var(--op-d);font-weight:600;font-size:calc(1.55rem*var(--op-nscale,1));letter-spacing:-.02em;line-height:1.12;text-wrap:balance;color:var(--oc-name,var(--op-heading,inherit))}
.op-handle{font-family:var(--mono);font-size:.78rem;color:var(--pa);margin-top:.3rem;opacity:.9}
.op-member-no{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pm);opacity:.85;margin-top:.2rem}
/* subtle viral-loop badge: public profile only (free pages); VIP hide_branding removes it.
   small centered pill, low-opacity, sits at the very bottom; no layout shift, reduced-motion safe. */
.op-brand{display:inline-flex;align-items:center;gap:.5em;margin:30px auto 0;padding:.42rem .8rem;
  border-radius:100px;background:color-mix(in srgb,var(--pt) 6%,transparent);border:1px solid var(--pl);
  font-size:.7rem;line-height:1;letter-spacing:.01em;color:var(--pm);opacity:.62;
  text-decoration:none;backdrop-filter:blur(6px);
  transition:opacity .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.op-brand:hover{opacity:1;transform:translateY(-1px);border-color:color-mix(in srgb,var(--pa) 45%,var(--pl));
  background:color-mix(in srgb,var(--pa) 8%,transparent)}
.op-brand-mark{display:inline-flex;align-items:center;font-family:var(--op-d);font-weight:600;
  letter-spacing:-.02em;color:var(--op-heading,var(--pt))}
.op-brand-dot{display:inline-block;width:.32em;height:.32em;border-radius:50%;margin:0 .07em;
  vertical-align:middle;background:var(--pa);box-shadow:0 0 8px 1px color-mix(in srgb,var(--pa) 55%,transparent);
  animation:logo-orbit 6s linear infinite}
.op-brand-label{color:var(--pm)}
@media (prefers-reduced-motion:reduce){.op-brand-dot{animation:none}}
.op-bio{color:var(--oc-bio,var(--op-text,var(--pm)));font-size:calc(.93rem*var(--op-bscale,1));max-width:32ch;margin:.85rem auto 0;line-height:1.55;text-wrap:pretty}
/* typewriter bio: blinking caret while typing; min-height holds layout so there's no shift */
.op-bio-type{min-height:1.55em}
.op-bio-type.is-typing::after{content:"";display:inline-block;width:.06em;height:1.05em;margin-left:.04em;
  vertical-align:-.16em;background:var(--pa);border-radius:1px;animation:op-caret 1s steps(1) infinite}
@keyframes op-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .op-bio-type.is-typing::after{display:none} }
/* (L) granular text colors: only override when the creator sets one (else inherit theme) */
.op-status span:last-child{color:var(--oc-status-text,var(--oc-bio,var(--op-text,var(--pt))))}
.op-link-title,.op-link-main .op-link-title{color:var(--oc-btn-text,var(--op-linktext,inherit))}
.op-link-sub,.op-feat-sub{color:var(--op-text,var(--pm))}
.op-links{margin-top:26px;display:flex;flex-direction:column;gap:12px}

/* ==========================================================================
   BENTO EDITOR CONTROLS: the dashboard-side layout toggle + per-block tile
   size picker. Tile size only does anything in Bento layout, but we still SHOW
   the group in every layout (so people discover it and learn WHY it's off) and
   LOCK it outside bento: dimmed, non-interactive, with a gated hint that points
   to the Layout switch. .is-locked is toggled by syncAdvTilePickers(), so it
   stays reactive to the Design > Layout seg while a panel is open.
   ========================================================================== */
.adv-tile-group{display:block}
.adv-tile-group.is-locked .adv-label{opacity:.5}
.adv-tile-group.is-locked .adv-tile-seg button{opacity:.4;cursor:not-allowed;pointer-events:none}
/* two hints share the slot: the live one shows in bento, the gated one when locked */
.adv-tile-hint-gated{display:none}
.adv-tile-group.is-locked .adv-tile-hint-live{display:none}
.adv-tile-group.is-locked .adv-tile-hint-gated{display:block;color:var(--accent)}
/* keep the tile chips compact + on one row so the panel stays dense */
.adv-tile-seg{flex-wrap:wrap}
.adv-tile-seg button{flex:1 1 0;min-width:54px}

/* ==========================================================================
   BENTO LAYOUT: order-based + size-based tile grid (profile.layout_mode='bento')
   2 columns on desktop, grid-auto-flow:dense so tiles pack with no gaps. Each tile
   is an .op-wrap.op-tile carrying --tw (1|2 cols) / --th (1|2 rows). Collapses to a
   single column on phones. Tiles fill their cell so the grid stays flush.
   ========================================================================== */
.op-links.is-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(76px,auto);grid-auto-flow:dense;gap:12px;align-items:stretch}
.op-links.is-bento > .op-tile{margin:0;display:flex;
  grid-column:span var(--tw,2);grid-row:span var(--th,1);min-width:0}
/* the wrap stretches; its single rendered block fills the whole tile */
.op-links.is-bento > .op-tile > :not(.op-sched-tag){flex:1;min-width:0;width:100%}
/* tall tiles (h=2) let media/link blocks grow to fill the doubled row height */
.op-links.is-bento > .op-tile.op-tile-tall > .op-link,
.op-links.is-bento > .op-tile.op-tile-tall > .op-feat,
.op-links.is-bento > .op-tile.op-tile-tall > .op-spotify,
.op-links.is-bento > .op-tile.op-tile-tall > .op-block{height:100%}
/* a small (1x1) link tile stacks icon over a compact, clamped title */
.op-links.is-bento > .op-tile[data-tile="1x1"] > .op-link,
.op-links.is-bento > .op-tile[data-tile="1x2"] > .op-link{flex-direction:column;align-items:flex-start;
  justify-content:space-between;gap:.5rem;text-align:left}
.op-links.is-bento > .op-tile[data-tile="1x1"] > .op-link .op-link-main,
.op-links.is-bento > .op-tile[data-tile="1x2"] > .op-link .op-link-main{width:100%}
.op-links.is-bento > .op-tile[data-tile="1x1"] > .op-link .op-link-title,
.op-links.is-bento > .op-tile[data-tile="1x2"] > .op-link .op-link-title{white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.op-links.is-bento > .op-tile[data-tile="1x1"] > .op-link .op-link-arrow,
.op-links.is-bento > .op-tile[data-tile="1x2"] > .op-link .op-link-arrow{position:absolute;top:14px;right:14px}
/* featured/gallery/video/embeds clip tastefully and fill the tile */
.op-links.is-bento > .op-tile .op-feat{min-height:100%}
.op-links.is-bento > .op-tile .op-gallery,
.op-links.is-bento > .op-tile .op-faq,
.op-links.is-bento > .op-tile .op-countdown,
.op-links.is-bento > .op-tile .op-text,
.op-links.is-bento > .op-tile .op-embed{height:100%;overflow:hidden}
.op-links.is-bento > .op-tile .op-gallery{display:flex;flex-direction:column}
.op-links.is-bento > .op-tile .op-gallery .op-gal-track{flex:1;min-height:0}
.op-links.is-bento > .op-tile .op-gallery .op-gal-cell{height:100%}
/* a long text/faq tile scrolls inside itself rather than overflowing the grid */
.op-links.is-bento > .op-tile.op-tile-tall .op-text,
.op-links.is-bento > .op-tile.op-tile-tall .op-faq{overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}
.op-links.is-bento > .op-tile.op-tile-tall .op-text::-webkit-scrollbar,
.op-links.is-bento > .op-tile.op-tile-tall .op-faq::-webkit-scrollbar{display:none}
/* section dividers always span the full row, no min-height */
.op-links.is-bento > .op-tile[data-tile="2x1"]:has(.op-section){grid-row:auto}
.op-links.is-bento > .op-tile .op-section{margin:6px 2px}
/* phone: collapse to a single column; every tile becomes full width / natural height */
@media (max-width:560px){
  .op-links.is-bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .op-links.is-bento > .op-tile{grid-column:1/-1!important;grid-row:auto!important}
  .op-links.is-bento > .op-tile.op-tile-tall > .op-link,
  .op-links.is-bento > .op-tile.op-tile-tall > .op-feat,
  .op-links.is-bento > .op-tile.op-tile-tall > .op-spotify,
  .op-links.is-bento > .op-tile.op-tile-tall > .op-block{height:auto}
  .op-links.is-bento > .op-tile.op-tile-tall .op-text,
  .op-links.is-bento > .op-tile.op-tile-tall .op-faq{overflow:visible}
}

/* link base */
.op-link{display:flex;align-items:center;gap:.8rem;padding:calc(15px*var(--op-lscale,1)) calc(16px*var(--op-lscale,1));border-radius:var(--op-radius,15px);
  background:var(--oc-btn-bg,var(--ps));border:1px solid var(--pl);color:var(--oc-btn-text,var(--pt));text-align:left;
  font-weight:500;font-size:calc(.95rem*var(--op-lscale,1));position:relative;overflow:hidden;
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s,background .25s,color .25s}
.op-link::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .25s;background:color-mix(in srgb,var(--pa) 12%,transparent)}
.op-link:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pa) 60%,transparent);box-shadow:0 10px 30px -12px color-mix(in srgb,var(--pa) 50%,transparent)}
.op-link:hover::before{opacity:1}
.op-link-ico{flex:none;width:calc(34px*var(--op-iscale,1));height:calc(34px*var(--op-iscale,1));border-radius:clamp(4px,calc(var(--op-radius,15px) - 6px),14px);display:grid;place-items:center;background:var(--oc-icon-bg,color-mix(in srgb,var(--pa) 14%,transparent));color:var(--oc-icon,inherit);position:relative;z-index:1;overflow:hidden;transition:background .25s}
.op-link-ico svg{width:calc(18px*var(--op-iscale,1));height:calc(18px*var(--op-iscale,1));fill:currentColor}
.op-link-ico img.ic-img{width:calc(24px*var(--op-iscale,1));height:calc(24px*var(--op-iscale,1));object-fit:cover;border-radius:6px}
.op-social img.ic-img{width:22px;height:22px;object-fit:cover;border-radius:6px}
.op-link-title{flex:1;min-width:0;position:relative;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-link-arrow{flex:none;opacity:.4;position:relative;z-index:1;transition:opacity .25s,transform .25s}
.op-link-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.op-link:hover .op-link-arrow{opacity:1;transform:translate(2px,-2px)}
/* link-style variants */
/* 16% solid tint (not 7%): over presets that pair glass links with a mesh/aurora/
   stars bg the legibility card is OFF, so if backdrop-filter is unsupported the button
   must still read as a plate rather than near-invisible text on the background. */
.orbt-profile[data-linkstyle="glass"] .op-link{background:color-mix(in srgb,var(--pt) 16%,transparent);backdrop-filter:blur(8px);border-color:color-mix(in srgb,var(--pt) 14%,transparent)}
.orbt-profile[data-linkstyle="outline"] .op-link{background:transparent;border-color:color-mix(in srgb,var(--pt) 26%,transparent)}
.orbt-profile[data-linkstyle="outline"] .op-link:hover{background:color-mix(in srgb,var(--pa) 8%,transparent)}
.orbt-profile[data-linkstyle="ignite"] .op-link{background:transparent;border-color:color-mix(in srgb,var(--pt) 16%,transparent);color:var(--pm)}
.orbt-profile[data-linkstyle="ignite"] .op-link-ico{background:transparent}
.orbt-profile[data-linkstyle="ignite"] .op-link:hover{background:var(--pa);color:var(--op-onaccent,var(--pf));border-color:var(--pa);transform:translateY(-2px)}
.orbt-profile[data-linkstyle="ignite"] .op-link:hover .op-link-ico{background:color-mix(in srgb,#000 16%,transparent)}
.orbt-profile[data-linkstyle="ignite"] .op-link:hover::before{opacity:0}
/* NEW link styles */
/* neon: glowing accent border */
.orbt-profile[data-linkstyle="neon"] .op-link{background:color-mix(in srgb,var(--pf) 55%,transparent);border-color:var(--pa);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pa) 50%,transparent),0 0 16px -4px color-mix(in srgb,var(--pa) 60%,transparent),inset 0 0 12px -8px var(--pa)}
.orbt-profile[data-linkstyle="neon"] .op-link:hover{box-shadow:0 0 0 1px var(--pa),0 0 28px -2px color-mix(in srgb,var(--pa) 80%,transparent),inset 0 0 18px -8px var(--pa)}
.orbt-profile[data-linkstyle="neon"] .op-link-ico{background:transparent;color:var(--pa)}
/* gradient: accent→accent2 fill, ink auto-contrasts */
.orbt-profile[data-linkstyle="gradient"] .op-link{background:linear-gradient(100deg,var(--pa),var(--pa2));border-color:transparent;color:var(--op-onaccent,var(--pf))}
.orbt-profile[data-linkstyle="gradient"] .op-link .op-link-sub{color:color-mix(in srgb,var(--op-onaccent,var(--pf)) 72%,transparent)}
.orbt-profile[data-linkstyle="gradient"] .op-link-ico{background:color-mix(in srgb,#000 14%,transparent);color:var(--op-onaccent,var(--pf))}
.orbt-profile[data-linkstyle="gradient"] .op-link::before{display:none}
.orbt-profile[data-linkstyle="gradient"] .op-link:hover{filter:brightness(1.05);box-shadow:0 12px 30px -10px color-mix(in srgb,var(--pa) 60%,transparent)}
/* 3d: raised with a hard bottom edge that compresses on hover */
.orbt-profile[data-linkstyle="3d"] .op-link{background:var(--ps);border-color:transparent;
  box-shadow:0 5px 0 0 color-mix(in srgb,var(--pa) 75%,#000),0 8px 18px -8px rgba(0,0,0,.5)}
.orbt-profile[data-linkstyle="3d"] .op-link:hover{transform:translateY(2px);box-shadow:0 3px 0 0 color-mix(in srgb,var(--pa) 75%,#000),0 5px 12px -8px rgba(0,0,0,.5)}
.orbt-profile[data-linkstyle="3d"] .op-link:active{transform:translateY(5px);box-shadow:0 0 0 0 color-mix(in srgb,var(--pa) 75%,#000)}
/* underline: minimal, no card; an accent rule grows under the row on hover */
.orbt-profile[data-linkstyle="underline"] .op-link{background:transparent;border:none;border-bottom:1px solid color-mix(in srgb,var(--pt) 14%,transparent);border-radius:10px 10px 0 0;padding-inline:10px;
  transition:transform .25s var(--ease),background .25s,border-color .25s}
.orbt-profile[data-linkstyle="underline"] .op-link-ico{background:transparent;color:var(--pa)}
.orbt-profile[data-linkstyle="underline"] .op-link::before{top:auto;bottom:-1px;height:2px;background:var(--pa);opacity:1;width:0;transition:width .3s var(--ease)}
/* designed hover: faint accent wash + the underline still wipes in, reads interactive, not a bare list */
.orbt-profile[data-linkstyle="underline"] .op-link:hover{transform:none;box-shadow:none;border-bottom-color:transparent;
  background:color-mix(in srgb,var(--pa) 7%,transparent)}
.orbt-profile[data-linkstyle="underline"] .op-link:hover::before{width:100%}

/* ---------- per-element color overrides (profiles.colors) ----------
   When the creator sets an explicit button background / text / icon color, it must
   win across EVERY link style. These selectors only bite when the matching --oc-* var
   is set (data-btnbg flag for the fill; the var presence for icon/text), so an unset
   override leaves each link style exactly as before. */
.orbt-profile[data-btnbg="custom"] .op-link{background:var(--oc-btn-bg)!important;border-color:color-mix(in srgb,var(--oc-btn-bg) 70%,#000)}
.orbt-profile[data-btnbg="custom"] .op-link::before{background:color-mix(in srgb,#fff 10%,transparent)}
/* icon chip background / glyph: applied via the vars on .op-link-ico above; these
   ensure variants that force transparent/accent icons still honor an explicit override */
.orbt-profile[style*="--oc-icon-bg"] .op-link-ico,
.orbt-profile[style*="--oc-icon"] .op-link-ico{background:var(--oc-icon-bg,color-mix(in srgb,var(--pa) 14%,transparent));color:var(--oc-icon,inherit)}

/* ---------- prominent hover effects (data-hover) ---------- */
/* pop: clear scale + lift */
.orbt-profile[data-hover="pop"] .op-link:hover{transform:translateY(-3px) scale(1.035);box-shadow:0 16px 36px -14px color-mix(in srgb,var(--pa) 60%,transparent)}
/* tilt: slight 3d rotate toward the viewer */
.orbt-profile[data-hover="tilt"] .op-link{transform-style:preserve-3d}
.orbt-profile[data-hover="tilt"] .op-link:hover{transform:perspective(700px) rotateX(7deg) translateY(-2px);box-shadow:0 18px 34px -16px rgba(0,0,0,.6)}
/* glow: strong accent halo */
.orbt-profile[data-hover="glow"] .op-link:hover{transform:translateY(-1px);box-shadow:0 0 0 1px color-mix(in srgb,var(--pa) 55%,transparent),0 0 34px -6px color-mix(in srgb,var(--pa) 75%,transparent)}
/* shine: diagonal sweep across the card */
.orbt-profile[data-hover="shine"] .op-link::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,#fff 38%,transparent) 48%,transparent 66%);
  transform:translateX(-120%);transition:none}
.orbt-profile[data-hover="shine"] .op-link:hover{transform:translateY(-2px)}
.orbt-profile[data-hover="shine"] .op-link:hover::after{animation:op-shine .8s var(--ease)}
@keyframes op-shine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
/* slide-fill: accent wipes in from the left, ink flips to read on it */
.orbt-profile[data-hover="slide-fill"] .op-link{z-index:0}
.orbt-profile[data-hover="slide-fill"] .op-link::before{opacity:1;background:var(--pa);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)}
.orbt-profile[data-hover="slide-fill"] .op-link:hover{transform:translateY(-2px);color:var(--op-onaccent,var(--pf));border-color:var(--pa)}
.orbt-profile[data-hover="slide-fill"] .op-link:hover::before{transform:scaleX(1)}
.orbt-profile[data-hover="slide-fill"] .op-link:hover .op-link-ico{background:color-mix(in srgb,#000 16%,transparent);color:var(--op-onaccent,var(--pf))}
@media (prefers-reduced-motion:reduce){.orbt-profile[data-hover="shine"] .op-link:hover::after{animation:none}}

/* ---------- link subtitle (small muted line under the title) ---------- */
.op-link-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;position:relative;z-index:1;text-align:left;justify-content:center}
.op-link-main .op-link-title{flex:none;width:100%}
.op-link-sub{font-size:calc(.74rem*var(--op-lscale,1));color:var(--pm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;opacity:.85}
.op-link.has-sub{align-items:center}

/* ---------- section header (titled divider grouping the links beneath it) ---------- */
.op-section{display:flex;align-items:center;gap:.85rem;margin:18px 2px 2px;text-align:left}
.op-section:first-child{margin-top:0}
.op-section::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--pt) 18%,transparent),transparent)}
.op-section-label{flex:none;font-family:var(--op-d);font-weight:600;font-size:calc(.74rem*var(--op-lscale,1));
  letter-spacing:.16em;text-transform:uppercase;color:var(--oc-header,var(--pa));opacity:.92;white-space:nowrap}
/* ---------- collapsible link folder (toggle header + folding group) ---------- */
.op-section-toggle{appearance:none;width:100%;background:none;border:0;cursor:pointer;font:inherit;
  color:inherit;padding:0;gap:.7rem}
.op-section-toggle .op-section-label{transition:opacity .2s ease}
.op-section-toggle:hover .op-section-label{opacity:1}
.op-section-toggle::after{order:1}
.op-section-chev{order:2;flex:none;display:grid;place-items:center;width:24px;height:24px;color:var(--oc-header,var(--pa));
  opacity:.85;transition:transform .32s var(--ease)}
.op-section-chev svg{width:18px;height:18px}
.op-section-toggle.is-collapsed .op-section-chev{transform:rotate(-90deg)}
.op-section-group{height:auto;will-change:height;transition:height .34s var(--ease)}
.op-section-group.is-collapsed{height:0;overflow:hidden}
.op-section-group>:first-child{margin-top:6px}
@media (prefers-reduced-motion:reduce){
  .op-section-chev,.op-section-group{transition:none}
}

/* ---------- featured image card (large branded image link) ---------- */
.op-feat{display:flex;align-items:flex-end;position:relative;overflow:hidden;min-height:148px;
  border-radius:var(--op-radius,15px);background:var(--ps) center/cover no-repeat;border:1px solid var(--pl);
  color:#fff;text-decoration:none;isolation:isolate;
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.op-feat-scrim{position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 42%,rgba(0,0,0,.12) 100%)}
.op-feat-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;
  padding:calc(15px*var(--op-lscale,1)) calc(17px*var(--op-lscale,1));max-width:calc(100% - 44px)}
.op-feat-title{font-family:var(--op-d);font-weight:600;font-size:calc(1.05rem*var(--op-lscale,1));line-height:1.18;
  letter-spacing:-.01em;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.op-feat-sub{font-size:calc(.8rem*var(--op-lscale,1));color:rgba(255,255,255,.82);font-weight:400;
  text-shadow:0 1px 10px rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-feat-arrow{position:absolute;z-index:1;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:color-mix(in srgb,var(--pa) 92%,#000);color:var(--op-onaccent,#000);
  opacity:0;transform:translateY(-4px) scale(.9);transition:opacity .25s,transform .25s;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.op-feat-arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4}
.op-feat:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pa) 60%,transparent);
  box-shadow:0 14px 38px -14px color-mix(in srgb,var(--pa) 55%,transparent)}
.op-feat:hover .op-feat-arrow{opacity:1;transform:translateY(0) scale(1)}
/* featured cards + section headers ride the same intro stagger as link cards */
.op-content.op-intro[data-intro="fade"] .op-feat,.op-content.op-intro[data-intro="fade"] .op-section{animation:op-fade .6s both;animation-delay:calc(.2s + var(--i)*.06s)}
.op-content.op-intro[data-intro="zoom"] .op-feat,.op-content.op-intro[data-intro="zoom"] .op-section{animation:op-zoom .55s both;animation-delay:calc(.22s + var(--i)*.07s)}
.op-content.op-intro[data-intro="blur"] .op-feat,.op-content.op-intro[data-intro="blur"] .op-section{animation:op-blurin .6s both;animation-delay:calc(.22s + var(--i)*.07s)}
.op-content.op-intro[data-intro="flip"] .op-feat,.op-content.op-intro[data-intro="flip"] .op-section{animation:op-flip .6s both;animation-delay:calc(.22s + var(--i)*.08s);transform-origin:top}
.op-content.op-intro[data-intro="drop"] .op-feat,.op-content.op-intro[data-intro="drop"] .op-section{animation:op-drop .6s cubic-bezier(.5,1.7,.6,1) both;animation-delay:calc(.2s + var(--i)*.07s)}
.op-content.op-intro[data-intro="swing"] .op-feat,.op-content.op-intro[data-intro="swing"] .op-section{animation:op-swing .7s both;animation-delay:calc(.2s + var(--i)*.07s);transform-origin:top center}
.op-content.op-intro[data-intro="stagger"] .op-feat,.op-content.op-intro[data-intro="stagger"] .op-section{animation:op-rise .6s both;animation-delay:calc(.26s + var(--i)*.07s)}
.op-content.op-intro[data-intro="orbital"] .op-feat,.op-content.op-intro[data-intro="orbital"] .op-section{animation:op-orbit-in .7s both;animation-delay:calc(.26s + var(--i)*.08s)}
.op-content.op-intro[data-intro="decode"] .op-feat,.op-content.op-intro[data-intro="decode"] .op-section{animation:op-rise .55s both;animation-delay:calc(.2s + var(--i)*.06s)}

/* ---------- social-icon row (Linktree-style) ---------- */
.op-socials{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:1rem}
.op-social{position:relative;width:34px;height:34px;display:grid;place-items:center;color:var(--oc-social,var(--pm));border-radius:50%;transition:color .2s,transform .2s,background .2s}
/* keep the 34px glyph but give each icon a 44px tap zone (row gap is 14px, so zones never overlap) */
.op-social::before{content:"";position:absolute;inset:-5px;border-radius:50%}
.op-social svg{width:21px;height:21px;fill:currentColor}
.op-social:hover{color:var(--oc-social,var(--pa));transform:translateY(-2px);background:color-mix(in srgb,var(--oc-social,var(--pa)) 12%,transparent)}

/* ---------- profile glow (data-glow): avatar / name / card ---------- */
.orbt-profile[data-glow="gold"] .op-avatar,.orbt-profile[data-glow="aura"] .op-avatar{box-shadow:0 0 32px -4px color-mix(in srgb,var(--oc-glow,var(--pa,#e11d8f)) 70%,transparent),0 14px 40px -12px rgba(0,0,0,.5)}
.orbt-profile[data-glow="accent"] .op-avatar,.orbt-profile[data-glow="neon"] .op-avatar{box-shadow:0 0 32px -4px color-mix(in srgb,var(--oc-glow,var(--pa)) 75%,transparent),0 14px 40px -12px rgba(0,0,0,.5)}
.orbt-profile[data-glow="gold"] .op-name{text-shadow:0 0 22px color-mix(in srgb,var(--oc-glow,var(--pa,#e11d8f)) 55%,transparent)}
.orbt-profile[data-glow="accent"] .op-name{text-shadow:0 0 22px color-mix(in srgb,var(--oc-glow,var(--pa)) 55%,transparent)}
.orbt-profile[data-glow="neon"] .op-name{text-shadow:0 0 8px color-mix(in srgb,var(--oc-glow,var(--pa)) 90%,transparent),0 0 22px color-mix(in srgb,var(--oc-glow,var(--pa)) 60%,transparent)}
.orbt-profile[data-glow="aura"]::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 40% at 50% 18%,color-mix(in srgb,var(--oc-glow,var(--pa)) 22%,transparent),transparent 70%)}
.orbt-profile[data-glow="neon"] .op-link,.orbt-profile[data-glow="aura"] .op-link{box-shadow:0 0 24px -10px color-mix(in srgb,var(--oc-glow,var(--pa)) 60%,transparent)}

.op-empty{color:var(--pm);font-size:.9rem;padding:24px;border:1px dashed var(--pl);border-radius:14px}
.op-brand{display:inline-flex;margin-top:30px;font-family:var(--op-d);font-weight:600;font-size:.85rem;color:var(--pm);opacity:.7;transition:opacity .25s}
.op-brand:hover{opacity:1}
.op-dot{display:inline-block;width:.32em;height:.32em;border-radius:50%;background:var(--pa);margin:0 .04em;vertical-align:middle}

/* ---------- INTRO ANIMATIONS ---------- */
.op-content.op-intro .op-avatar-wrap,.op-content.op-intro .op-name,.op-content.op-intro .op-handle,.op-content.op-intro .op-socials,.op-content.op-intro .op-status,.op-content.op-intro .op-bio,.op-content.op-intro .op-brand{animation:op-rise .7s both}
.op-content.op-intro .op-name{animation-delay:.08s}
.op-content.op-intro .op-handle{animation-delay:.12s}
.op-content.op-intro .op-socials{animation-delay:.16s}
.op-content.op-intro .op-status{animation-delay:.18s}
.op-content.op-intro .op-bio{animation-delay:.22s}
/* video + spotify cards share the per-link reveal (they carry --i too) */
.op-content.op-intro[data-intro="stagger"] .op-link,.op-content.op-intro[data-intro="stagger"] .op-video,.op-content.op-intro[data-intro="stagger"] .op-spotify{animation:op-rise .6s both;animation-delay:calc(.26s + var(--i)*.07s)}
.op-content.op-intro[data-intro="orbital"] .op-link,.op-content.op-intro[data-intro="orbital"] .op-video,.op-content.op-intro[data-intro="orbital"] .op-spotify{animation:op-orbit-in .7s both;animation-delay:calc(.26s + var(--i)*.08s)}
.op-content.op-intro[data-intro="decode"] .op-link,.op-content.op-intro[data-intro="decode"] .op-video,.op-content.op-intro[data-intro="decode"] .op-spotify{animation:op-rise .55s both;animation-delay:calc(.2s + var(--i)*.06s)}
.op-content.op-intro[data-intro="iris"]{animation:op-iris .85s both}
@keyframes op-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes op-orbit-in{from{opacity:0;transform:translate(38px,28px) rotate(7deg) scale(.92)}to{opacity:1;transform:none}}
@keyframes op-iris{from{clip-path:circle(0% at 50% 28%)}to{clip-path:circle(150% at 50% 28%)}}
/* ==========================================================================
   WAVE 1A BLOCKS: text / gallery / faq / countdown / embed / platform embeds,
   plus scheduled-link tags + highlight emphasis + gallery lightbox.
   All on-brand (accent vars), --op-radius-aware, responsive, reduced-motion-safe.
   ========================================================================== */
/* shared block scaffolding (carry --i so they ride the intro stagger like links) */
.op-block{position:relative;text-align:left}
.op-block-head,.op-text-head{font-family:var(--op-d);font-weight:600;font-size:calc(.95rem*var(--op-lscale,1));
  letter-spacing:-.01em;color:var(--op-heading,var(--pt));margin:0 2px .6rem}
.op-block .op-empty,.op-empty{color:var(--pm);font-size:.88rem;padding:18px;border:1px dashed var(--pl);border-radius:var(--op-radius,14px);text-align:center}

/* block cards ride the same per-link intro reveal (they carry --i) */
.op-content.op-intro[data-intro="fade"] .op-block,.op-content.op-intro[data-intro="zoom"] .op-block,.op-content.op-intro[data-intro="blur"] .op-block,.op-content.op-intro[data-intro="flip"] .op-block,.op-content.op-intro[data-intro="drop"] .op-block,.op-content.op-intro[data-intro="swing"] .op-block,.op-content.op-intro[data-intro="stagger"] .op-block,.op-content.op-intro[data-intro="orbital"] .op-block,.op-content.op-intro[data-intro="decode"] .op-block{animation:op-rise .6s both;animation-delay:calc(.26s + var(--i)*.07s)}

/* ---------- text block (safe markdown) ---------- */
.op-text-body{color:var(--op-text,var(--pm));font-size:calc(.92rem*var(--op-bscale,1));line-height:1.6;text-wrap:pretty}
.op-text-body > :first-child{margin-top:0}
.op-text-body > :last-child{margin-bottom:0}
.op-text-body p{margin:.55em 0}
.op-text-body h2{font-family:var(--op-d);font-weight:600;font-size:calc(1.12rem*var(--op-bscale,1));color:var(--op-heading,var(--pt));margin:.7em 0 .35em;letter-spacing:-.01em}
.op-text-body h3{font-family:var(--op-d);font-weight:600;font-size:calc(1rem*var(--op-bscale,1));color:var(--op-heading,var(--pt));margin:.65em 0 .3em}
.op-text-body h4{font-weight:600;font-size:calc(.92rem*var(--op-bscale,1));color:var(--op-heading,var(--pt));margin:.6em 0 .3em}
.op-text-body strong{color:var(--op-heading,var(--pt));font-weight:700}
.op-text-body a{color:var(--pa);text-decoration:underline;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--pa) 55%,transparent);transition:text-decoration-color .2s}
.op-text-body a:hover{text-decoration-color:var(--pa)}
.op-text-body code{font-family:var(--mono,monospace);font-size:.86em;background:color-mix(in srgb,var(--pt) 8%,transparent);border-radius:6px;padding:.08em .38em}
.op-text-body ul,.op-text-body ol{margin:.5em 0;padding-left:1.4em}
.op-text-body li{margin:.22em 0}
.op-text-body ul li::marker{color:var(--pa)}

/* ---------- gallery (grid / carousel) ---------- */
/* grid block: cards of people / merch / links */
.op-grid .op-grid-track{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
/* email-capture block */
.op-email{display:flex;flex-direction:column;gap:9px}
.op-email-form{display:flex;gap:8px}
.op-email-in{flex:1;min-width:0;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--pa) 30%,rgba(255,255,255,.14));background:color-mix(in srgb,var(--pa) 6%,rgba(255,255,255,.04));color:inherit;font:inherit;font-size:.95rem}
.op-email-in:focus{outline:none;border-color:var(--pa)}
.op-email-in::placeholder{color:color-mix(in srgb,currentColor 45%,transparent)}
.op-email-btn{flex:none;padding:12px 18px;border-radius:12px;border:0;background:var(--pa);color:var(--op-onaccent,#fff);font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;transition:filter .18s,transform .18s}
.op-email-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.op-email-btn:disabled{opacity:.6;cursor:default}
.op-email-ok{padding:11px 14px;border-radius:12px;background:color-mix(in srgb,var(--pa) 12%,rgba(255,255,255,.05));color:inherit;font-size:.92rem;text-align:center}
@media(max-width:420px){.op-email-form{flex-direction:column}.op-email-btn{width:100%}}
.op-gcell{display:flex;flex-direction:column;gap:7px;text-decoration:none;color:inherit;min-width:0}
.op-gcell-img{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  background-size:cover;background-position:center;background-color:color-mix(in srgb,var(--pa) 13%,rgba(255,255,255,.05));
  font-family:var(--op-d);font-weight:700;font-size:1.7rem;color:var(--pa);transition:transform .25s var(--ease,ease),box-shadow .25s}
.op-gcell:hover .op-gcell-img{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(0,0,0,.65)}
.op-gcell-tx{display:flex;flex-direction:column;gap:1px;padding:0 2px;min-width:0}
.op-gcell-title{font-family:var(--op-d);font-weight:600;font-size:.9rem;line-height:1.25;
  color:var(--op-linktext,var(--op-heading,inherit));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-gcell-sub{font-size:.74rem;color:var(--op-text,var(--op-bio,inherit));opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* grid block editor (dashboard) */
.blk-grid-items{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.blk-grid-item{display:flex;align-items:center;gap:10px}
.blk-grid-thumb{flex:none;width:46px;height:46px;border-radius:11px;border:1px solid var(--line-2);
  background:var(--bg-2) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--faint);cursor:pointer;overflow:hidden}
.blk-grid-thumb svg{width:18px;height:18px}
.blk-grid-flds{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.blk-grid-title,.blk-grid-url{width:100%;padding:.5rem .6rem;background:var(--bg-2);border:1px solid var(--line-2);border-radius:9px;color:var(--text);font:inherit;font-size:.88rem}
.blk-grid-title:focus,.blk-grid-url:focus{outline:none;border-color:var(--accent)}
.blk-grid-urlrow{display:flex;gap:6px}
.blk-grid-url{flex:1;min-width:0}
.blk-grid-fetch{flex:none;width:38px;border:1px solid var(--line-2);background:var(--bg-2);border-radius:10px;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.blk-grid-fetch:hover{color:var(--accent);border-color:var(--accent)}
.blk-grid-fetch svg{width:16px;height:16px}
.blk-grid-rm{flex:none;width:30px;height:30px;border:0;background:transparent;color:var(--faint);cursor:pointer;border-radius:8px}
.blk-grid-rm:hover{color:#FF6B6B;background:rgba(255,107,107,.1)}
.op-gallery .op-gal-track{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
.op-gallery[data-count="1"] .op-gal-track{grid-template-columns:1fr}
.op-gallery[data-count="2"] .op-gal-track{grid-template-columns:repeat(2,1fr)}
.op-gallery[data-count="4"] .op-gal-track{grid-template-columns:repeat(2,1fr)}
.op-gal-cell{display:block;padding:0;border:0;cursor:zoom-in;border-radius:clamp(8px,calc(var(--op-radius,15px) - 2px),16px);
  overflow:hidden;background:var(--ps);aspect-ratio:1;position:relative;outline-offset:2px}
.op-gal-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.op-gal-cell::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--pa) 0%,transparent);transition:background .25s}
.op-gal-cell:hover img{transform:scale(1.06)}
.op-gal-cell:hover::after{background:color-mix(in srgb,var(--pa) 10%,transparent)}
.op-gal-cell:focus-visible{outline:2px solid var(--pa)}
/* carousel: horizontal snap scroller, no visible scrollbar */
.op-gallery-carousel .op-gal-track{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.op-gallery-carousel .op-gal-track::-webkit-scrollbar{display:none}
.op-gallery-carousel .op-gal-cell{flex:0 0 78%;aspect-ratio:4/3;scroll-snap-align:center;cursor:grab}

/* ---------- faq accordion ---------- */
.op-faq{display:flex;flex-direction:column;gap:8px}
.op-faq-item{border:1px solid var(--pl);border-radius:var(--op-radius,15px);background:var(--ps);overflow:hidden;transition:border-color .25s,background .25s}
.op-faq-item.open{border-color:color-mix(in srgb,var(--pa) 45%,transparent)}
.op-faq-q{display:flex;align-items:center;justify-content:space-between;gap:.8rem;width:100%;
  padding:calc(13px*var(--op-lscale,1)) calc(15px*var(--op-lscale,1));background:none;border:0;cursor:pointer;
  text-align:left;font-family:var(--op-b);font-weight:500;font-size:calc(.93rem*var(--op-lscale,1));color:var(--op-linktext,var(--pt));
  transition:color .2s}
.op-faq-q:hover{color:var(--pa)}
.op-faq-chev{flex:none;width:18px;height:18px;color:var(--pa);transition:transform .3s var(--ease)}
.op-faq-item.open .op-faq-chev{transform:rotate(180deg)}
.op-faq-a{height:0;overflow:hidden;transition:height .32s var(--ease)}
.op-faq-a-inner{padding:0 calc(15px*var(--op-lscale,1)) calc(13px*var(--op-lscale,1));color:var(--op-text,var(--pm));
  font-size:calc(.87rem*var(--op-bscale,1));line-height:1.55}
.op-faq-a-inner > :first-child{margin-top:0}.op-faq-a-inner > :last-child{margin-bottom:0}
.op-faq-a-inner a{color:var(--pa);text-decoration:underline;text-underline-offset:2px}

/* ---------- countdown ---------- */
.op-countdown{border:1px solid var(--pl);border-radius:var(--op-radius,15px);background:var(--ps);
  padding:calc(16px*var(--op-lscale,1)) calc(14px*var(--op-lscale,1));text-align:center;
  background-image:radial-gradient(120% 80% at 50% -10%,color-mix(in srgb,var(--pa) 10%,transparent),transparent 70%)}
.op-cd-label{font-family:var(--op-d);font-weight:600;font-size:calc(.92rem*var(--op-lscale,1));color:var(--op-heading,var(--pt));margin-bottom:.7rem;letter-spacing:-.01em}
.op-cd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.op-cd-unit{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.55rem .2rem;
  border-radius:clamp(8px,calc(var(--op-radius,15px) - 4px),14px);background:color-mix(in srgb,var(--pt) 5%,transparent)}
.op-cd-num{font-family:var(--op-d);font-weight:600;font-size:calc(1.5rem*var(--op-lscale,1));line-height:1;color:var(--pa);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.op-cd-cap{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pm);font-weight:500}
.op-cd-done{font-family:var(--op-d);font-weight:600;font-size:calc(1.15rem*var(--op-lscale,1));color:var(--pa);padding:.4rem 0}
.op-countdown.elapsed{border-color:color-mix(in srgb,var(--pa) 45%,transparent)}

/* ---------- platform embeds (facade + iframes) ---------- */
.op-embed{position:relative;line-height:0;border-radius:min(var(--op-radius,15px),22px);overflow:hidden}
.op-embed .op-block-head{line-height:1.2}
.op-embed-frame-el{width:100%;border:0;display:block;border-radius:min(var(--op-radius,15px),22px);background:var(--ps);
  aspect-ratio:var(--em-ratio,16/9)}
.op-embed-frame-el[style*="--em-h"],.op-embed.op-embed-applemusic .op-embed-frame-el,.op-embed.op-embed-soundcloud .op-embed-frame-el{aspect-ratio:auto;height:var(--em-h,166px)}
.op-embed.is-tall .op-embed-frame-el{height:var(--em-h,450px)}
/* click-to-load facade for heavy embeds */
.op-embed[data-src]{cursor:pointer;background:var(--ps);border:1px solid var(--pl);transition:border-color .25s,box-shadow .25s,transform .25s}
.op-embed[data-src]:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pa) 55%,transparent);box-shadow:0 12px 32px -14px color-mix(in srgb,var(--pa) 50%,transparent)}
.op-embed[data-src]:focus-visible{outline:2px solid var(--pa);outline-offset:2px}
.op-embed-facade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  min-height:148px;padding:24px;line-height:1.3;text-align:center;position:relative;
  background:radial-gradient(120% 90% at 50% 0,color-mix(in srgb,var(--pa) 12%,transparent),transparent 70%)}
.op-embed-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--pa);
  background:color-mix(in srgb,var(--pa) 14%,transparent)}
.op-embed-ico svg{width:24px;height:24px;fill:currentColor}
.op-embed-cta{font-weight:500;font-size:.92rem;color:var(--pt);max-width:90%}
.op-play-sm{position:static;margin:0;width:38px;height:38px}
/* thumb-bearing embed facade (YouTube): show the real video thumbnail behind a
   legibility scrim so the card previews the clip, then loads the player on click */
.op-embed.has-thumb{background-size:cover;background-position:center}
.op-embed.has-thumb .op-embed-facade{min-height:176px;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.58))}
.op-embed.has-thumb .op-embed-ico{color:#fff;background:rgba(0,0,0,.45)}
.op-embed.has-thumb .op-embed-cta{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.65)}

/* ---------- raw embed (sandboxed) ---------- */
.op-embed-html{position:relative;line-height:1.4}
.op-embed-frame{line-height:0}
.op-embed-sandbox{width:100%;min-height:120px;border:0;display:block;border-radius:min(var(--op-radius,15px),22px);
  background:var(--ps)}

/* ---------- highlight emphasis (data highlight: pulse | shimmer | hero) ---------- */
.op-wrap{position:relative}
.op-hl{border-radius:var(--op-radius,15px)}
/* pulse: subtle gold breathing glow */
.op-hl-pulse{animation:op-hl-pulse 2.4s ease-in-out infinite}
@keyframes op-hl-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pa) 0%,transparent)}50%{box-shadow:0 0 22px -2px color-mix(in srgb,var(--pa) 55%,transparent)}}
/* shimmer: a diagonal light sweep across the block */
.op-hl-shimmer{overflow:hidden}
.op-hl-shimmer::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 38%,color-mix(in srgb,var(--pa) 42%,transparent) 50%,transparent 62%);
  transform:translateX(-130%);animation:op-hl-shimmer 3.4s var(--ease) infinite}
@keyframes op-hl-shimmer{0%,100%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
/* hero: larger, accent border + glow ring; scales its child up slightly */
.op-hl-hero{padding:3px;background:linear-gradient(135deg,color-mix(in srgb,var(--pa) 70%,transparent),color-mix(in srgb,var(--pa2) 70%,transparent));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pa) 40%,transparent),0 16px 40px -16px color-mix(in srgb,var(--pa) 55%,transparent)}
.op-hl-hero > .op-link,.op-hl-hero > .op-feat,.op-hl-hero > .op-block,.op-hl-hero > .op-video,.op-hl-hero > .op-spotify,.op-hl-hero > .op-embed{margin:0}
.op-hl-hero > .op-link{font-size:calc(1.04rem*var(--op-lscale,1));padding:calc(18px*var(--op-lscale,1)) calc(18px*var(--op-lscale,1))}

/* ---------- scheduled-link tag (dashboard preview only) ---------- */
.op-sched{position:relative}
.op-sched > :not(.op-sched-tag){opacity:.5;filter:saturate(.6)}
.op-sched-tag{position:absolute;top:-9px;right:8px;z-index:5;font-size:.62rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:.2rem .55rem;border-radius:100px;background:var(--pf);color:var(--pa);
  border:1px solid color-mix(in srgb,var(--pa) 50%,transparent);line-height:1.2;box-shadow:0 4px 12px -4px rgba(0,0,0,.5)}
.op-sched-expired .op-sched-tag{color:var(--pm);border-color:var(--pl)}

/* ---------- PER-LINK STYLE OVERRIDES (link.data.style = {accent,textColor,border}) ----------
   The overridden card is wrapped in .op-wrap.op-ovr-* carrying inline custom props
   (--pa / --oc-btn-* / --ovr-bd) that cascade into just that card. op-ovr-fill paints the
   button in its OWN accent across every page link style (so a hero button pops); op-ovr-border
   draws a solid border in the chosen color. Cards without these classes are untouched. The
   text-color override rides the inline --oc-btn-text / --op-* vars (no rule needed here).
   Placed after the link-style + [data-btnbg="custom"] rules so source order wins. */
.op-wrap.op-ovr-fill > .op-link,
.op-wrap.op-ovr-fill > .op-feat{
  background:var(--pa)!important;
  border-color:color-mix(in srgb,var(--pa) 68%,#000)!important;
  color:var(--oc-btn-text,var(--op-onaccent,#fff))!important}
.op-wrap.op-ovr-fill > .op-link .op-link-title,
.op-wrap.op-ovr-fill > .op-link .op-link-sub,
.op-wrap.op-ovr-fill > .op-link .op-link-arrow{color:var(--oc-btn-text,var(--op-onaccent,#fff))}
.op-wrap.op-ovr-fill > .op-link .op-link-ico{background:color-mix(in srgb,#000 16%,transparent);color:var(--oc-btn-text,var(--op-onaccent,#fff))}
.op-wrap.op-ovr-border > .op-link,
.op-wrap.op-ovr-border > .op-feat,
.op-wrap.op-ovr-border > .op-block{border:2px solid var(--ovr-bd)!important}

/* ---------- gallery lightbox (scoped to the profile element) ---------- */
.op-lightbox{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  padding:24px;background:color-mix(in srgb,#000 82%,transparent);backdrop-filter:blur(8px)}
.op-lightbox.open{display:flex;animation:op-fade .25s both}
.op-lb-img{max-width:100%;max-height:100%;border-radius:var(--op-radius,15px);box-shadow:0 30px 80px -20px rgba(0,0,0,.8);object-fit:contain}
.op-lb-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:color-mix(in srgb,#fff 12%,transparent);color:#fff;transition:background .2s}
.op-lb-close:hover{background:color-mix(in srgb,var(--pa) 80%,transparent);color:var(--op-onaccent,#000)}
.op-lb-close svg{width:20px;height:20px}
/* in framed (phone) layout the lightbox stays inside the phone frame */
.orbt-profile[data-layout="framed"] .op-lightbox{border-radius:inherit;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .op-bg-mesh::before,.op-bg-mesh::after,.op-bg-aurora,.op-bg-waves,.op-bg-noise::before,.op-avatar-wrap.has-ring::before,.op-content.op-intro *,.op-content.op-intro{animation:none!important}
  .op-content.op-intro,.op-content.op-intro *{clip-path:none!important}
  .op-hl-pulse,.op-hl-shimmer::after{animation:none!important}
  .op-gal-cell img{transition:none}
}

/* ==========================================================================
   DASHBOARD
   ========================================================================== */
/* floating manual-save bar */
.save-bar[hidden]{display:none}
.save-bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(0);z-index:40;
  display:flex;align-items:center;gap:16px;padding:.5rem .5rem .5rem 1.3rem;border-radius:100px;
  background:color-mix(in srgb,var(--bg-1) 92%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line-2));
  box-shadow:3px 3px 0 0 rgba(13,13,13,.14),0 18px 44px -24px rgba(13,13,13,.35),0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent);
  backdrop-filter:blur(14px);animation:save-bar-in .35s var(--ease);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.save-bar[hidden]{display:none}
/* fade/slide OUT after a successful save (J) instead of vanishing instantly */
.save-bar.leaving{opacity:0;transform:translateX(-50%) translateY(14px);pointer-events:none}
@keyframes save-bar-in{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.save-hint{font-size:.88rem;color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap}
.save-hint::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent);animation:op-live 1.9s infinite}
.save-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:var(--accent-ink);font-weight:600;padding:.62rem 1.4rem;border-radius:100px;transition:filter .2s,transform .2s,box-shadow .2s}
.save-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.save-btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 8px 22px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.save-btn:active{transform:translateY(0)}
.save-btn:disabled{opacity:.45;cursor:default;filter:none;transform:none;box-shadow:none}
/* VIP-locked save state: free user has unsaved VIP features (steady amber, no live pulse) */
.save-bar.vip-lock .save-hint{color:#e11d8f;font-weight:600}
.save-bar.vip-lock .save-hint::before{animation:none;background:#e11d8f;box-shadow:none}
.save-bar.vip-lock .save-btn{background:linear-gradient(180deg,#e11d8f,#7b2ff7);color:#fff;border-color:transparent}
.save-bar.saved .save-hint{color:var(--muted)}
.save-bar.saved .save-hint::before{background:#62D08A;box-shadow:none;animation:none}
.save-bar.saved .save-icon-btn,.save-bar.saved .save-preview-btn span{opacity:.55}
@media (prefers-reduced-motion:reduce){.save-bar,.save-hint::before{animation:none}}
/* <=880px: the bottom tab rail (.ed-rail) is fixed at z40 too, so lift the save bar
   fully above it (rail height + safe area + breathing room), or Save is untappable */
@media (max-width:880px){
  .save-bar{bottom:calc(66px + env(safe-area-inset-bottom,0px) + 12px)}
}
@media (max-width:480px){
  .save-bar{left:10px;right:10px;transform:none;justify-content:space-between;gap:10px;padding:.45rem .45rem .45rem .85rem}
  /* let the hint wrap to a second line instead of showing an ugly "Unsaved ..." ellipsis;
     the actions stay put (flex:none) so wrapping only grows the bar's height a little. */
  .save-hint{display:block;min-width:0;white-space:normal;line-height:1.2;font-size:.82rem}
  .save-hint::before{display:inline-block;vertical-align:0;margin-right:.5rem}
  .save-bar-actions{flex:none}
  /* Preview lives in the Edit | Preview toggle on phones; the duplicate icon only overflows
     (.save-bar prefix so this outranks the later .save-icon-btn display rule) */
  .save-bar .save-preview-btn{display:none}
  .save-btn{padding:.6rem 1.05rem}
  .save-bar.leaving{transform:translateY(14px);opacity:0}
  @keyframes save-bar-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

/* undo / redo / preview cluster inside the save bar */
.save-bar-actions{display:flex;align-items:center;gap:8px}
.save-icon-btn{display:inline-flex;align-items:center;gap:.42rem;justify-content:center;width:38px;height:38px;padding:0;border-radius:100px;
  background:color-mix(in srgb,var(--bg-2) 70%,transparent);border:1px solid var(--line-2);color:var(--text);
  transition:filter .18s,transform .18s,background .18s,opacity .18s,border-color .18s}
.save-icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.save-icon-btn:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 14%,var(--bg-2));border-color:color-mix(in srgb,var(--accent) 36%,var(--line-2));transform:translateY(-1px)}
.save-icon-btn:active:not(:disabled){transform:translateY(0)}
.save-icon-btn:disabled{opacity:.32;cursor:default}
.save-preview-btn{width:auto;padding:0 1rem;font-weight:600;font-size:.86rem}
.save-preview-btn span{white-space:nowrap}
@media (max-width:540px){.save-preview-btn span{display:none}.save-preview-btn{width:38px;padding:0}}

/* ============ PREVIEW-BEFORE-PUBLISH full-screen overlay ============ */
.pv-overlay[hidden]{display:none}
.pv-overlay{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
  background:var(--bg);animation:pv-fade .26s var(--ease)}
@keyframes pv-fade{from{opacity:0}to{opacity:1}}
.pv-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:.7rem clamp(.8rem,3vw,1.6rem);background:color-mix(in srgb,var(--bg-1) 94%,transparent);
  border-bottom:1px solid var(--line-2);backdrop-filter:blur(12px);z-index:2}
.pv-bar-info{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.pv-bar-info strong{font-size:.98rem;letter-spacing:-.01em}
.pv-bar-sub{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-overlay.has-unsaved .pv-bar-sub{color:var(--accent)}
.pv-bar-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.pv-bar-actions .save-btn{padding:.58rem 1.2rem}
.pv-close{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:100px;
  background:color-mix(in srgb,var(--bg-2) 70%,transparent);border:1px solid var(--line-2);color:var(--text);transition:background .18s,border-color .18s}
.pv-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pv-close:hover{background:color-mix(in srgb,var(--accent) 14%,var(--bg-2));border-color:color-mix(in srgb,var(--accent) 36%,var(--line-2))}
.pv-stage{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pv-stage::-webkit-scrollbar{display:none}
.pv-screen{min-height:100%;display:flex}
.pv-screen > .orbt-profile{flex:1;width:100%;min-height:100%}
@media (max-width:560px){.pv-bar-actions .save-btn span,.pv-keep span{display:none}.pv-bar-actions .save-btn,.pv-keep{padding:.58rem;width:38px;justify-content:center}}
@media (prefers-reduced-motion:reduce){.pv-overlay{animation:none}}

/* account dropdown (T) */
.acct{position:relative}
.acct-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.32rem .6rem .32rem .35rem;border-radius:100px;
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);font-size:.85rem;transition:border-color .2s,background .2s}
.acct-btn:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line-2));background:color-mix(in srgb,var(--accent) 6%,var(--bg-2))}
.acct-btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.acct-btn:hover .acct-caret{stroke:var(--text)}
.acct-av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:.8rem;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 85%,#fff),var(--accent) 65%,color-mix(in srgb,var(--accent) 55%,#000));
  color:var(--accent-ink);background-size:cover;background-position:center}
.acct-av.lg{width:40px;height:40px;font-size:1.05rem}
.acct-av.img{color:transparent}
.acct-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.acct-caret{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.acct-btn[aria-expanded="true"] .acct-caret{transform:rotate(180deg)}
.acct-menu{position:absolute;right:0;top:calc(100% + 10px);width:248px;z-index:60;padding:8px;border-radius:16px;
  background:var(--bg-2);border:1px solid var(--line-2);box-shadow:4px 4px 0 0 rgba(13,13,13,.1),0 18px 44px -20px rgba(13,13,13,.28);animation:cp-in .16s var(--ease)}
.acct-menu[hidden]{display:none}
.acct-head{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem .75rem}
.acct-id{min-width:0}
.acct-id strong{display:block;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-id span{display:block;font-size:.74rem;color:var(--muted);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-sep{height:1px;background:var(--line);margin:6px 4px}
.acct-item{display:flex;align-items:center;gap:.65rem;width:100%;padding:.6rem .7rem;border-radius:10px;color:var(--text);font-size:.88rem;text-align:left;transition:background .15s,color .15s}
.acct-item:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.acct-item svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.acct-item.danger{color:#FF8585}
.acct-item.danger:hover{background:color-mix(in srgb,#FF6B6B 14%,transparent)}
@media (max-width:560px){.acct-name{display:none}}

/* editor + preview start much higher now that the header is folded into the slim top bar.
   ONE constant frame on every rail: no Design-only widening, so the container never
   re-centers and the left rail never visually moves when switching sections. */
.dash{padding:18px var(--pad) 80px;width:100%;max-width:1760px;margin:0 auto}
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(420px,32vw,520px);gap:28px;align-items:start}
/* ── App-shell (desktop ≥881px): keep the dashboard exactly one viewport tall so
   expanding/collapsing a section scrolls INSIDE the editor column instead of
   growing/shrinking the whole page. Below 881px the layout stacks and keeps
   natural document scroll. ── */
@media (min-width:881px){
  body.dash-body{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
  main.dash{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding-bottom:0}
  .dash-grid{flex:1;min-height:0;align-items:stretch}
  .editor-col{height:100%;min-height:0;align-items:stretch}
  .editor-stage{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;padding-bottom:96px;scrollbar-gutter:stable}
  .preview-col{position:static;top:auto;height:100%;justify-content:center}
}
.panel{position:relative;background:linear-gradient(180deg,var(--bg-1),var(--bg));border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:16px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
/* a barely-there solar glaze in the top-left corner that warms on hover:
   gives each panel an intentional light source instead of a flat fill */
.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.55;
  transition:opacity .3s var(--ease);
  background:radial-gradient(80% 60% at 0% 0%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 60%)}
.panel:hover::before{opacity:1}
.panel:hover{border-color:color-mix(in srgb,var(--accent) 22%,var(--line));box-shadow:0 1px 0 0 color-mix(in srgb,var(--accent) 8%,transparent) inset,0 18px 50px -34px rgba(0,0,0,.9)}
.panel > *{position:relative}
/* .chart-head h2 (analytics "Views over time") is one wrapper deeper but must ride
   the exact same panel-h2 path (size + accent tick), not the giant display default */
.panel > h2,.panel .chart-head h2{font-size:1.15rem;margin-bottom:.3rem;display:flex;align-items:center;gap:.55rem}
.panel > h2::before,.panel .chart-head h2::before{content:"";width:4px;height:1.05em;border-radius:3px;flex:none;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 35%,transparent))}
.panel > .desc{color:var(--muted);font-size:.88rem;margin-bottom:1.2rem}
/* public member number: a quiet "you were creator #N" mark on the Profile card */
.panel > .member-no-pill{position:absolute;top:22px;right:22px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.08em;color:var(--faint,var(--muted));white-space:nowrap}
.panel > .member-no-pill[hidden]{display:none}

/* profile editor */
.avatar-row{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.avatar-pick{position:relative;width:76px;height:76px;flex:none;border-radius:50%;overflow:hidden;cursor:pointer;border:1px solid var(--line-2)}
.avatar-pick img{width:100%;height:100%;object-fit:cover}
.avatar-pick .ph{width:100%;height:100%;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--accent-ink);
  background:radial-gradient(circle at 35% 30%,#FFE7A8,var(--accent) 60%,#9A6B12)}
.avatar-pick .cam{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.5);opacity:0;transition:opacity .25s}
.avatar-pick:hover .cam{opacity:1}
.avatar-pick .cam svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8}
.avatar-row .meta{font-size:.85rem;color:var(--muted)}
.avatar-row .meta strong{color:var(--text);display:block;font-size:.95rem}
textarea.input{resize:vertical;min-height:72px;line-height:1.5;font-family:var(--body)}
.char-count{text-align:right;font-family:var(--mono);font-size:.72rem;color:var(--faint);margin-top:.3rem}

/* theme + accent */
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.1rem}
.opt-row .opt-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.seg{display:inline-flex;gap:4px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:100px;padding:4px}
.seg button{box-sizing:border-box;padding:.4rem 1rem;border-radius:100px;font-size:.85rem;color:var(--muted);transition:color .2s,background .2s,transform .12s}
.seg button:hover:not(.on){color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.seg button:active{transform:scale(.96)}
.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:600;box-shadow:0 2px 10px -4px color-mix(in srgb,var(--accent) 70%,transparent)}
.swatches{display:flex;gap:8px;align-items:center}
.swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .2s}
.swatch:hover{transform:scale(1.12)}
.swatch.on{border-color:var(--text)}
.swatch.custom{display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--line-2);overflow:hidden;position:relative}
.swatch.custom input{position:absolute;inset:0;opacity:0;cursor:pointer}
.swatch.custom svg{width:14px;height:14px;stroke:var(--muted);fill:none}

/* links editor */
.link-add{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.link-add .input{flex:1;min-width:140px}
.links-list{display:flex;flex-direction:column;gap:10px}
.link-item{
  display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;
  background:var(--bg-2);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s,opacity .2s;
}
.link-item:hover{border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}
.link-item.dragging{opacity:.4;border-style:dashed}
/* landed-here flash: the command palette's "jump to this link" confirmation */
.cmdk-jump-flash{animation:cmdk-flash 1.5s var(--ease)}
@keyframes cmdk-flash{
  0%,100%{box-shadow:none}
  12%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}
}
@media (prefers-reduced-motion:reduce){.cmdk-jump-flash{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}}
.link-item.drag-over{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 15%,transparent)}
.link-item.inactive{opacity:.55}
.drag-handle{flex:none;cursor:grab;color:var(--faint);padding:2px;touch-action:none}
.drag-handle svg{width:18px;height:18px;fill:currentColor}
.link-item .li-ico{flex:none;position:relative;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--bg-3);border:1px solid transparent;cursor:pointer;transition:border-color .18s,background .18s}
.link-item .li-ico:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg-3))}
.link-item .li-ico svg{width:18px;height:18px;fill:var(--text)}
.link-item .li-ico img.ic-img{width:22px;height:22px;object-fit:cover;border-radius:6px}
.li-ico-edit{position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;background:var(--accent);display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.li-ico-edit svg{width:9px!important;height:9px!important;fill:none!important;stroke:var(--accent-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.link-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.link-fields .li-sub{font-size:.78rem;color:var(--muted);font-family:var(--body)}
.link-fields .li-sub::placeholder{color:var(--faint)}

/* ---------- socials manager (explicit social-icon row) ---------- */
.socials-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.socials-empty{padding:14px;border-radius:14px;border:1px dashed var(--line);background:var(--bg-2);color:var(--muted);font-size:.9rem;text-align:center}
.social-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s,opacity .2s}
.social-item:hover{border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}
.social-item.dragging{opacity:.4;border-style:dashed}
.social-ico{flex:none;position:relative;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--bg-3);border:1px solid transparent;cursor:pointer;transition:border-color .18s,background .18s}
.social-ico:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg-3))}
.social-ico svg{width:18px;height:18px;fill:var(--text)}
.social-url{flex:1;min-width:0}
.social-move{flex:none;display:flex;flex-direction:column;gap:2px}
.social-move .icon-btn{width:26px;height:20px;padding:0}
.social-move .icon-btn svg{width:14px;height:14px}
.social-move .icon-btn[disabled]{opacity:.3;pointer-events:none}
.social-del{flex:none}
.socials-actions{display:flex;gap:10px;flex-wrap:wrap}

/* icon picker popover: scrollable but NO visible scrollbar (Q) */
.icon-pop{position:fixed;z-index:320;width:288px;max-height:min(460px,72vh);overflow-y:auto;padding:12px;border-radius:16px;
  background:var(--bg-2);border:1px solid var(--line-2);box-shadow:4px 4px 0 0 rgba(13,13,13,.1),0 18px 44px -20px rgba(13,13,13,.28);
  animation:cp-in .16s var(--ease);scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.icon-pop::-webkit-scrollbar{display:none;width:0;height:0}
@keyframes cp-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* custom-icon upload row (R) */
.ip-upload-row{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.ip-upload{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.55rem .8rem;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 12%,var(--bg-3));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line-2));
  color:var(--text);font-size:.82rem;font-weight:500;transition:border-color .16s,background .16s}
.ip-upload:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--bg-3))}
.ip-upload svg{width:15px;height:15px}
.ip-upload .spin{width:13px;height:13px;border:2px solid color-mix(in srgb,var(--accent) 40%,transparent);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
.ip-custom{width:38px;height:38px;aspect-ratio:auto;flex:none}
.ip-custom img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.ip-group-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:.7rem 0 .4rem;padding-left:2px}
.ip-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ip-btn{aspect-ratio:1;border-radius:9px;display:grid;place-items:center;background:var(--bg-3);border:1px solid transparent;color:var(--text);overflow:hidden;transition:transform .14s,border-color .14s,background .14s}
.ip-btn:hover{transform:translateY(-2px);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg-3))}
.ip-btn svg{width:18px;height:18px;fill:currentColor}
.ip-btn img.ic-img{width:20px;height:20px;object-fit:cover;border-radius:5px}
.ip-btn.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--bg-3));color:var(--accent)}

/* small inline hint under a control group */
.opt-hint{margin-top:.7rem;font-size:.78rem;color:var(--faint);line-height:1.5}
/* clearer "this is editable" affordance (S): inputs read as fields, light up on focus */
.link-fields input{background:none;border:none;border-bottom:1px solid transparent;outline:none;color:var(--text);font-family:inherit;width:100%;padding:2px 1px;border-radius:2px;transition:border-color .18s,background .18s}
.link-item:hover .link-fields input{border-bottom-color:color-mix(in srgb,var(--text) 12%,transparent)}
.link-fields input:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.link-fields input:focus{color:var(--text);border-bottom-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.link-fields .li-title{font-weight:500;font-size:.95rem}
.link-fields .li-url{font-size:.8rem;color:var(--muted);font-family:var(--mono)}
/* a small "Edit" cue that appears on hover so the row clearly invites editing */
.link-item .li-ico::after{content:"Edit";position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);font-size:.6rem;font-weight:600;letter-spacing:.04em;color:var(--accent);background:var(--bg-1);border:1px solid var(--line-2);padding:1px 6px;border-radius:100px;opacity:0;pointer-events:none;transition:opacity .15s;white-space:nowrap;z-index:5}
.link-item .li-ico:hover::after{opacity:1}
.li-actions{flex:none;display:flex;align-items:center;gap:4px}
.icon-btn{position:relative;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--muted);transition:background .2s,color .2s,transform .15s var(--ease),box-shadow .2s}
.icon-btn:hover{background:var(--bg-3);color:var(--text);transform:scale(1.08)}
.icon-btn:active{transform:scale(.96)}
.icon-btn:focus-visible{outline:none;color:var(--text);background:var(--bg-3);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)}
.icon-btn.del:hover{color:#FF6B6B}
/* direct child only: the VIP crown chip's own svg must keep its filled styling */
.icon-btn > svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
/* VIP pill on an icon button (link-row Advanced gear) = a corner pip, not a
   second grid child stacking under the glyph inside the 32px cell */
.icon-btn .crown{position:absolute;top:-7px;right:-9px;margin-left:0;padding:.14em .34em;
  background:color-mix(in srgb,var(--accent) 13%,var(--bg-1))}
.icon-btn .crown::after{font-size:.5rem}
.switch{position:relative;width:38px;height:22px;flex:none;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;background:var(--bg-3);border:1px solid var(--line-2);border-radius:100px;transition:.25s}
.switch .track::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--muted);top:2px;left:2px;transition:.25s}
.switch input:checked + .track{background:var(--accent);border-color:var(--accent)}
.switch input:checked + .track::after{background:var(--accent-ink);transform:translateX(16px)}
.links-empty{color:var(--muted);font-size:.9rem;padding:20px;text-align:center;border:1px dashed var(--line-2);border-radius:14px}

/* section-header row in the editor: visually distinct, simpler controls */
.link-item.is-section{background:color-mix(in srgb,var(--accent) 7%,var(--bg-2));border-style:dashed;
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}
.link-item.is-section:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.li-sectag{flex:none;display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 11px;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 14%,var(--bg-3));color:var(--accent);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.li-sectag svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.li-sectitle{font-family:var(--display,var(--body))!important;font-weight:600!important;letter-spacing:.01em}
.li-sectitle::placeholder{color:var(--faint)}

/* featured-image (thumbnail) control */
.icon-btn.li-thumb{position:relative;overflow:visible}
.icon-btn.li-thumb .li-thumb-sw{position:absolute;inset:2px;border-radius:6px;background:center/cover no-repeat;opacity:0;transition:opacity .18s}
.icon-btn.li-thumb.on .li-thumb-sw{opacity:1}
.icon-btn.li-thumb.on .li-thumb-ic{opacity:0}
.icon-btn.li-thumb.on{color:var(--accent);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 60%,transparent)}
.li-thumb-ic{transition:opacity .18s}
.li-thumb-x{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;display:none;
  place-items:center;background:#FF6B6B;color:#fff;font-size:9px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.5);z-index:2}
.icon-btn.li-thumb.on .li-thumb-x{display:grid}
.li-thumb-x:hover{filter:brightness(1.1)}

/* ==========================================================================
   WAVE 1A: block editors, advanced controls, block picker
   ========================================================================== */
/* "Add block" button gets a tiny leading icon */
.block-add-btn{display:inline-flex;align-items:center;gap:.4rem}
.block-add-btn svg{width:15px;height:15px}

/* block picker popover: grouped menu, scrollable, no visible scrollbar */
.block-pop{position:fixed;z-index:330;width:min(340px,92vw);max-height:min(560px,76vh);overflow-y:auto;padding:12px;border-radius:16px;
  background:var(--bg-2);border:1px solid var(--line-2);box-shadow:4px 4px 0 0 rgba(13,13,13,.1),0 18px 44px -20px rgba(13,13,13,.28);
  animation:cp-in .16s var(--ease);scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.block-pop::-webkit-scrollbar{display:none;width:0;height:0}
.bp-hint{font-size:.78rem;color:var(--muted);padding:2px 4px 6px;line-height:1.4}
.bp-group-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:.7rem 0 .4rem;padding-left:2px}
.bp-grid{display:flex;flex-direction:column;gap:4px}
.bp-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border-radius:11px;
  background:var(--bg-3);border:1px solid transparent;color:var(--text);transition:transform .14s,border-color .14s,background .14s}
.bp-item:hover{transform:translateY(-1px);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg-3))}
.bp-ico{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,var(--bg-2));color:var(--accent)}
.bp-ico svg{width:18px;height:18px;fill:currentColor}
.bp-ico svg[stroke]{fill:none;stroke:currentColor}
.bp-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.bp-name{font-weight:600;font-size:.9rem}
.bp-desc{font-size:.74rem;color:var(--muted);font-family:var(--body)}

/* block editor rows: wider body, stacked fields */
.link-item.is-block{align-items:flex-start;flex-wrap:wrap}
.link-item.is-block .li-actions{margin-left:auto}
.li-blktag{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 12%,var(--bg-3));color:var(--accent);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.li-blktag svg{width:15px;height:15px;fill:currentColor}
.li-blktag svg[stroke]{fill:none;stroke:currentColor}
.li-blktag span{line-height:1}
.blk-fields{gap:7px;flex-basis:200px}
.blk-fields .blk-title{font-weight:600;font-size:.92rem}
.blk-textarea{width:100%;min-height:62px;resize:vertical;background:var(--bg-3);border:1px solid var(--line);border-radius:9px;
  color:var(--text);font-family:var(--body);font-size:.86rem;line-height:1.5;padding:8px 10px;outline:none;transition:border-color .18s}
.blk-textarea:focus{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--bg-3))}
.blk-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.blk-hint,.blk-warn{font-size:.73rem;color:var(--faint);line-height:1.4;flex:1;min-width:140px}
.blk-warn{color:color-mix(in srgb,#FFB347 70%,var(--muted))}
.blk-fields .input{width:100%}
/* embed block: widget picker (guns.lol parity, paste a link instead of raw HTML) */
.blk-wt-tabs{display:flex;flex-wrap:wrap;gap:4px}
.blk-wt-tab{font:inherit;font-size:.76rem;font-weight:600;padding:.32rem .65rem;border-radius:100px;border:1px solid var(--line);background:var(--bg-3);color:var(--muted);cursor:pointer;transition:.16s}
.blk-wt-tab:hover{color:var(--text);border-color:var(--accent)}
.blk-wt-tab.on{background:var(--accent);color:var(--accent-ink,#fff);border-color:var(--accent)}
.blk-wt-body{display:flex;flex-direction:column;gap:6px}
.blk-widget-msg{font-size:.73rem;min-height:1.1em;font-family:var(--mono)}
.blk-widget-msg.ok{color:#62D08A}.blk-widget-msg.bad{color:#FF6B6B}

/* compact segmented controls inside block rows (reuses the global .seg pill look,
   just tightened for the dense editor context) */
.blk-align-seg,.blk-gal-layout,.adv-hl-seg{font-size:.82rem}
.blk-align-seg button,.blk-gal-layout button,.adv-hl-seg button{padding:.32rem .7rem;font-size:.78rem}

/* gallery editor thumbs */
.blk-gal-thumbs{display:flex;flex-wrap:wrap;gap:7px}
.blk-gal-empty{font-size:.78rem;color:var(--faint);padding:8px 2px}
.blk-gal-cell{position:relative;width:58px;height:58px;border-radius:9px;overflow:visible}
.blk-gal-cell img{width:100%;height:100%;object-fit:cover;border-radius:9px;display:block;border:1px solid var(--line)}
.blk-gal-rm{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:#FF6B6B;color:#fff;font-size:10px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.5);z-index:2}
.blk-gal-rm:hover{filter:brightness(1.1)}
.blk-gal-add{display:inline-flex;align-items:center;gap:.35rem}
.blk-gal-add svg{width:14px;height:14px}
.blk-gal-add .spin{width:13px;height:13px;border:2px solid color-mix(in srgb,var(--accent) 40%,transparent);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}

/* faq editor items */
.blk-faq-items{display:flex;flex-direction:column;gap:8px}
.blk-faq-item{display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:10px;background:var(--bg-3);border:1px solid var(--line)}
.blk-faq-arow{display:flex;gap:6px;align-items:flex-start}
.blk-faq-a{flex:1}
.blk-faq-rm{flex:none}
.blk-faq-add{align-self:flex-start;font-size:.82rem}

/* countdown editor */
.blk-cd-field{display:flex;flex-direction:column;gap:4px}
.blk-cd-field>span,.adv-field>span{font-size:.72rem;color:var(--muted);font-weight:500}
input[type="datetime-local"].input{font-family:var(--body);color-scheme:dark}

/* platform url validity hint */
.blk-url-hint{font-size:.73rem;line-height:1.3;min-height:1em}
.blk-url-hint.ok{color:#62D08A}
.blk-url-hint.bad{color:#FF8DB0}

/* ---- advanced (schedule / highlight / QR) inline panel ---- */
.icon-btn.li-adv.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.icon-btn.sec-collapse.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.link-item.adv-open{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.li-adv-panel{flex-basis:100%;width:100%;margin-top:10px;padding-top:12px;border-top:1px dashed var(--line-2);
  display:flex;flex-direction:column;gap:14px;animation:adv-in .18s var(--ease)}
.li-adv-panel[hidden]{display:none}   /* display:flex above overrode the UA hidden rule, so closed panels never collapsed */
@keyframes adv-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.adv-group{display:flex;flex-direction:column;gap:7px}
.adv-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.adv-sched-row{display:flex;gap:10px;flex-wrap:wrap}
.adv-field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:150px}
.adv-hint{font-size:.73rem;color:var(--faint);line-height:1.4}
.adv-qr-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adv-qr-btn{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem}
.adv-qr-btn svg{width:15px;height:15px}
.adv-qr-row .adv-hint{flex:1;min-width:140px}
/* per-link style overrides: three color triggers + a reset, laid out like the other adv rows */
.adv-style-row{display:flex;gap:8px;flex-wrap:wrap}
.adv-style-row .adv-style-trig{flex:1 1 120px;min-width:110px;justify-content:flex-start}
.adv-style-trig .ct-lbl{font-size:.8rem;color:var(--text)}
.adv-style-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adv-style-reset{font-size:.8rem;padding:.34rem .7rem}
.adv-style-foot .adv-hint{flex:1;min-width:150px}
/* (SOCIAL) one-click "show as a social icon" row: a big, obvious, full-width tap
   target (whole card toggles the switch) so it reads clearly at any age. */
.adv-social-toggle{display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.adv-social-toggle:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.adv-social-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.adv-social-ico svg{width:18px;height:18px}
.adv-social-copy{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.adv-social-title{font-size:.9rem;font-weight:600;color:var(--text)}
.adv-social-toggle .switch{flex:none}

/* (Advanced panel VIP gate: free users can't open the panel at all now, so the old
   .is-locked frame + emoji ribbon rules are gone. The gate affordance is the crown
   pip on the gear button; toggleAdv routes free clicks straight to openUpgrade.) */

@media (max-width:560px){
  .link-item.is-block{gap:8px}
  .blk-fields{flex-basis:100%}
  .adv-sched-row{flex-direction:column}
}
/* narrow widths: let the action cluster wrap below the fields so the (now denser)
   link row never forces horizontal scroll. The advanced gear added a 6th control. */
@media (max-width:560px){
  .link-item{flex-wrap:wrap}
  /* keep the icon + title/url fields together on the first row (fields grow to fill the
     space beside the 38px icon) and drop the action cluster onto its own full-width row,
     so the platform icon is never orphaned above its title. */
  .link-item .link-fields{flex:1 1 auto;min-width:0}
  .li-actions{flex-basis:100%;margin-left:0;flex-wrap:wrap;justify-content:flex-end}
  .li-adv-panel{flex-basis:100%;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .bp-item:hover,.li-adv-panel{transform:none;animation:none}
}

/* live preview: pinned high (just under the slim top bar) and ANCHORED: it sticks at a constant
   vertical spot regardless of the #tabs row or which tab is open (tabs live in the left column,
   so they never push the preview down). */
.preview-col{position:sticky;top:58px;align-self:start;display:flex;flex-direction:column;align-items:center;isolation:isolate}
/* a soft accent spotlight behind the device so the live preview reads as a lit stage,
   not a mockup pasted on flat canvas, ties it to the brand without distraction */
.preview-col::before{content:"";position:absolute;z-index:-1;left:50%;top:18%;
  width:min(520px,118%);aspect-ratio:1;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 62%);
  filter:blur(8px)}

/* (W) device-size switcher */
.device-switch{display:inline-flex;gap:2px;padding:4px;margin-bottom:14px;border-radius:100px;
  background:var(--bg-2);border:1px solid var(--line-2)}
.device-switch button{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .8rem;border-radius:100px;
  font-size:.78rem;color:var(--muted);transition:color .2s,background .2s}
.device-switch button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.device-switch button:hover{color:var(--text)}
.device-switch button.on{color:var(--accent-ink);background:var(--accent);font-weight:600;
  box-shadow:0 2px 10px -3px color-mix(in srgb,var(--accent) 65%,transparent)}
@media (max-width:420px){.device-switch button span{display:none}.device-switch button{padding:.42rem .6rem}}

/* deliberate brand-ink hardware: a flat #0d0d0d frame with the house offset
   "sticker" shadow, so the device reads as a designed cream-world object instead
   of a dark-era gradient leftover */
.preview-frame{
  position:relative;
  width:max-content;max-width:100%;margin:0 auto;border-radius:46px;padding:13px;
  background:#0d0d0d;border:1px solid #0d0d0d;
  box-shadow:7px 7px 0 0 rgba(13,13,13,.16),0 30px 60px -36px rgba(13,13,13,.45),inset 0 1px 0 rgba(255,255,255,.07);
  transition:border-radius .4s var(--ease),padding .3s var(--ease);
}
/* hairline top rim-light on the bezel: reads as real glass catching the light */
.preview-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 30%)}
/* phone/tablet stage: #preview renders at a REAL device size (390x844 phone,
   768x1024 tablet) and transform-scales to fit the column (fitPhonePreview sets
   --phscale). Same source-then-scale trick as the desktop --dscale and the preset
   tiles, so the phone keeps true proportions at every viewport instead of
   squeezing into whatever width the column happens to have. The screen hugs the
   scaled size; scrolling lives on the stage itself so long pages still scroll. */
.preview-screen{border-radius:34px;overflow:hidden;
  width:calc(390px * var(--phscale,1));height:calc(844px * var(--phscale,1));
  transition:border-radius .4s var(--ease)}
.preview-screen #preview{width:390px;height:844px;min-height:0;overflow-y:auto;overflow-x:hidden;
  transform:scale(var(--phscale,1));transform-origin:top left;scrollbar-width:none}
.preview-screen #preview::-webkit-scrollbar{display:none}
.preview-label{text-align:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}

/* tablet (iPad): wider frame, gentler corners */
.preview-col[data-device="tablet"] .preview-frame{border-radius:30px;padding:16px}
.preview-col[data-device="tablet"] .preview-screen{border-radius:18px;
  width:calc(768px * var(--phscale,1));height:calc(1024px * var(--phscale,1))}
.preview-col[data-device="tablet"] .preview-screen #preview{width:768px;height:1024px}

/* desktop (1920×1080): render a fixed-size full-bleed canvas, scaled to fit the column.
   The inner #preview is sized 1920×1080 and transform-scaled; the frame becomes a monitor bezel.
   --dscale is computed in JS from BOTH the column width and the available column height so the
   canvas uses the vertical space too (no dead void below). */
.preview-col[data-device="desktop"]{justify-content:center;min-height:calc(100vh - 90px)}
.preview-col[data-device="desktop"] .preview-frame{
  width:max-content;max-width:none;border-radius:18px;padding:12px;
  margin-left:calc(-1 * var(--dshift,0px));
  background:#0d0d0d;
  box-shadow:8px 8px 0 0 rgba(13,13,13,.16),0 36px 70px -40px rgba(13,13,13,.45)}
/* the screen is sized to exactly the scaled canvas so the bezel hugs it (no empty frame) */
.preview-col[data-device="desktop"] .preview-screen{
  border-radius:9px;overflow:hidden;
  width:calc(1920px * var(--dscale,.2));height:calc(1080px * var(--dscale,.2))}
.preview-col[data-device="desktop"] .preview-screen #preview{
  width:1920px;height:1080px;overflow:hidden;transform:scale(var(--dscale,.2));transform-origin:top left}
/* subtle monitor stand so the area reads as an intentional desktop, not an empty rail */
.preview-col[data-device="desktop"] .preview-frame::after{
  content:"";position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);
  width:18%;height:22px;border-radius:0 0 8px 8px;
  background:#0d0d0d;
  box-shadow:6px 6px 0 0 rgba(13,13,13,.14)}
.preview-col[data-device="desktop"] .preview-frame{position:relative;margin-bottom:30px}

/* toast */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translate(-50%,120%);z-index:200;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:100px;
  padding:.7rem 1.3rem;font-size:.9rem;display:flex;align-items:center;gap:.5rem;
  box-shadow:3px 3px 0 0 rgba(13,13,13,.14),0 14px 34px -16px rgba(13,13,13,.3);transition:transform .4s var(--ease),opacity .3s,visibility .3s;
  opacity:0;visibility:hidden;
}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}
.toast svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2}

/* analytics */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:1.2rem}
.stat{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px}
.stat-n{font-family:var(--display);font-weight:600;font-size:1.8rem;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.stat-l{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.5rem}
.breakdown{display:flex;flex-direction:column;gap:12px}
.bd-row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.bd-row .bd-title{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-row .bd-count{font-family:var(--mono);font-size:.85rem;color:var(--accent)}
.bd-bar{grid-column:1/-1;height:6px;border-radius:100px;background:var(--bg-3);overflow:hidden}
.bd-bar span{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--accent),var(--orbit));transition:width .6s var(--ease)}
.bd-empty{color:var(--muted);font-size:.88rem;text-align:center;padding:14px}

/* views-over-time chart (guns.lol parity) */
.chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:1rem}
.chart-head h2{margin:0}
.chart-range{display:inline-flex;gap:2px;padding:3px;border-radius:100px;background:var(--bg-2);border:1px solid var(--line);flex:none}
.chart-range button{font:inherit;font-size:.78rem;font-weight:600;padding:.4rem .8rem;border-radius:100px;border:0;background:transparent;color:var(--muted);cursor:pointer;transition:.16s}
.chart-range button:hover{color:var(--text)}
.chart-range button.on{background:var(--accent);color:var(--accent-ink,#fff)}
.views-chart-svg{width:100%;height:auto;display:block;overflow:visible}
.vc-area{fill:url(#vcGrad)}
.vc-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.vc-grid line{stroke:var(--line);stroke-width:1}
.vc-dot{fill:var(--accent);stroke:var(--bg-1);stroke-width:2}
.vc-xlabels{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.vc-legend{display:flex;gap:16px;margin-bottom:10px;font-size:.82rem;color:var(--muted)}
.vc-legend span{display:inline-flex;align-items:center;gap:6px}
.vc-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.vc-tooltip{position:absolute;pointer-events:none;background:var(--bg-1);border:1px solid var(--line);border-radius:10px;
  padding:6px 10px;font-size:.78rem;box-shadow:var(--sticker-sm,0 6px 18px rgba(0,0,0,.18));opacity:0;transition:opacity .12s;white-space:nowrap;z-index:5}
.vc-tooltip.on{opacity:1}
.vc-wrap{position:relative}

/* design controls */
.opt-block{margin-top:1.2rem}
.opt-block .opt-label{display:block;margin-bottom:.7rem}
/* multi-row pickers: a rounded RECTANGLE (a full pill looks broken once items wrap),
   with chips that grow to fill each row (no dead space on the right) and a smaller
   chip radius inset from the container corners (so the selected chip never pokes past). */
.seg.wrap{flex-wrap:wrap;width:100%;border-radius:14px;gap:5px}
.seg.wrap button{flex:1 1 auto;min-width:0;border-radius:9px;white-space:nowrap;text-align:center}
.seg.wrap button.on{border-radius:9px}
.preset-row{display:flex;flex-wrap:wrap;gap:8px}
.preset-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .8rem;border-radius:100px;background:var(--bg-2);border:1px solid var(--line-2);font-size:.85rem;color:var(--muted);transition:color .2s,border-color .2s}
.preset-chip:hover{color:var(--text)}
.preset-chip.on{border-color:var(--accent);color:var(--text)}
.preset-chip .dot2{width:14px;height:14px;border-radius:50%;box-shadow:0 0 8px -1px currentColor}
.avatar-opts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ring-toggle{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted)}

/* ==========================================================================
   (O) DESIGN TAB: left section nav + scrolling sections + scrollspy
   (N/D) size controls under their sections · (L) color resets · (M) speed
   ========================================================================== */
.design-pane{display:grid;grid-template-columns:180px minmax(0,1fr);gap:22px;align-items:start}
.design-pane[hidden]{display:none}
/* left vertical nav: sticky, no visible scrollbar */
.design-nav{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;align-self:start;
  max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:none;-ms-overflow-style:none;
  padding:6px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--bg-1),var(--bg))}
.design-nav::-webkit-scrollbar{display:none;width:0;height:0}
.design-nav button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;
  padding:.6rem .7rem;border-radius:10px;font-size:.86rem;color:var(--muted);
  transition:color .2s,background .2s;position:relative}
.design-nav button svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.design-nav button:hover{color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent)}
.design-nav button.on{color:var(--accent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 15%,transparent),color-mix(in srgb,var(--accent) 6%,transparent))}
.design-nav button.on::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:3px;background:var(--accent);
  box-shadow:0 0 10px -1px color-mix(in srgb,var(--accent) 70%,transparent)}
.design-sections{min-width:0;scroll-margin-top:90px}
.design-sec{scroll-margin-top:90px}
.design-sec[hidden]{display:none}

/* ---- theme tools: Surprise me + Save current look ---- */
.theme-tools{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.5rem}
.theme-tool-btn{display:inline-flex;align-items:center;gap:.55rem;padding:.62rem 1.1rem;border-radius:12px;
  font-size:.9rem;font-weight:500;color:var(--text);background:var(--bg-2);border:1px solid var(--line-2);
  transition:border-color .2s,background .2s,transform .12s,box-shadow .2s}
.theme-tool-btn svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-tool-btn:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line-2));background:var(--bg-3)}
.theme-tool-btn:active{transform:scale(.97)}
.theme-tool-btn.primary{color:var(--accent-ink);background:var(--accent);border-color:transparent;
  box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.theme-tool-btn.primary svg{stroke-width:2}
.theme-tool-btn.primary:hover{filter:brightness(1.06);background:var(--accent);border-color:transparent}

/* ---- saved looks gallery ---- */
.saved-themes{margin-top:1.5rem;display:grid;gap:.7rem}
.saved-themes[hidden]{display:none}
.saved-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.look-card{display:flex;align-items:center;background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;
  overflow:hidden;transition:border-color .2s,background .2s}
.look-card:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line-2))}
.look-apply{flex:1;min-width:0;display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;text-align:left;color:var(--text)}
.look-sw{flex:none;width:22px;height:22px;border-radius:7px;border:1px solid var(--line-2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.look-name{flex:1;min-width:0;font-size:.86rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.look-del{flex:none;width:34px;align-self:stretch;display:grid;place-items:center;color:var(--faint);
  border-left:1px solid var(--line);transition:color .2s,background .2s}
.look-del svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.look-del:hover{color:#FF6B6B;background:color-mix(in srgb,#FF6B6B 12%,transparent)}

/* ---- shareable theme codes: export / paste a code / copy by @handle ----
   Lives inside the Design pane's narrow (~250px) 2-column flow, so everything
   stacks vertically with minmax(0,1fr) tracks to guarantee no min-content
   overflow, and buttons sit full-width under their input (big, obvious taps). */
.theme-share{margin-top:1.6rem;padding-top:1.4rem;border-top:1px dashed var(--line);
  display:grid;grid-template-columns:minmax(0,1fr);gap:.85rem}
.theme-share .ts-hint{margin:-.2rem 0 .1rem;font-size:.82rem;line-height:1.5;color:var(--muted)}
.ts-export{width:100%;justify-content:center}
/* revealed code readout: a mono field + a small copy button beside it */
.ts-codeout{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:6px;align-items:stretch}
.ts-codeout[hidden]{display:none}
.ts-input{width:100%;min-width:0;height:44px;padding:0 .8rem;border-radius:11px;font-size:.92rem;
  color:var(--text);background:var(--bg-2);border:1px solid var(--line-2);
  transition:border-color .2s,box-shadow .2s}
.ts-input::placeholder{color:var(--faint)}
.ts-input:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 55%,var(--line-2));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.ts-mono{font-family:var(--mono);font-size:.82rem;letter-spacing:.01em}
.ts-icon{width:44px;padding:0;justify-content:center}
.ts-icon svg{width:17px;height:17px}
.ts-field{display:grid;grid-template-columns:minmax(0,1fr);gap:.42rem}
.ts-label{font-size:.84rem;font-weight:500;color:var(--text)}
.ts-row{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
.ts-row .theme-tool-btn{width:100%;justify-content:center}
/* @handle field: the leading "@" sits inside the input's left edge */
.ts-athandle{position:relative}
.ts-athandle .ts-at{position:absolute;left:.75rem;top:22px;transform:translateY(-50%);
  font-size:.95rem;font-weight:600;color:var(--faint);pointer-events:none;z-index:1}
.ts-athandle .ts-input{padding-left:1.6rem}

/* size controls grouped under their section */
.size-ctl{margin-top:1.1rem;padding-top:1.1rem;border-top:1px dashed var(--line)}
.size-ctl[hidden]{display:none}
.size-slide{display:flex;align-items:center;gap:.7rem;flex:1;max-width:260px}
.size-slide .slider{max-width:none}
.size-tick{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--faint);flex:none}

/* (L) color trigger that can read "Auto" + reset */
.color-reset{cursor:pointer}
.color-reset .ct-sw{background:repeating-conic-gradient(var(--line-2) 0% 25%,var(--bg-3) 0% 50%) 50%/8px 8px}
.color-reset.set .ct-sw{background-image:none}

@media (max-width:880px){
  .design-pane{grid-template-columns:minmax(0,1fr)}
  /* horizontal scroll-strip nav on narrow screens */
  .design-nav{position:sticky;top:56px;flex-direction:row;max-height:none;overflow-x:auto;z-index:6;
    background:var(--bg);border-radius:12px}
  .design-nav button span{white-space:nowrap}
  .design-nav button.on::before{left:50%;top:auto;bottom:0;transform:translateX(-50%);width:18px;height:3px}
}

/* ---------- tabs ---------- */
.dash-tabs{display:flex;flex-wrap:nowrap;gap:6px;margin-bottom:24px;border-bottom:1px solid var(--line);
  min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.dash-tabs::-webkit-scrollbar{display:none;width:0;height:0}
.dash-tabs button{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.1rem;font-size:.95rem;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
@media (max-width:440px){
  .dash-tabs{gap:2px}
  .dash-tabs button{padding:.7rem .6rem;font-size:.86rem;gap:.35rem}
  .dash-tabs button svg{width:15px;height:15px}
}
.dash-tabs button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dash-tabs button:hover{color:var(--text)}
.dash-tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
.tab-pane[hidden]{display:none}
/* premium tab-switch motion: fade + soft spring rise (the homepage's house spring
   token when orbt.css is loaded), GPU-only (opacity/transform), no layout shift */
.tab-pane.pane-enter{animation:pane-in .38s var(--spring,cubic-bezier(.22,.61,.36,1)) both}
@keyframes pane-in{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tab-pane.pane-enter{animation:none}}
.link-btn{color:var(--accent);font-size:inherit;text-decoration:underline;text-underline-offset:2px}
.preview-label{display:flex;align-items:center;justify-content:center;gap:.4rem}

/* ---------- analytics insights ---------- */
.insight-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.insight{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0;
  display:flex;flex-direction:column;justify-content:space-between}
.ins-l{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);margin-bottom:.3rem}
.ins-ico{width:15px;height:15px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ins-v{display:block;font-family:var(--display);font-weight:600;font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-row .bd-first{font-family:var(--mono);font-size:.7rem;color:var(--orbit);margin-left:.4rem}

/* ---------- share tab ---------- */
.share-url{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;padding:.7rem .7rem .7rem 1.1rem;margin-bottom:1.4rem}
.share-url .mono{font-size:.92rem;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.share-btn{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-radius:12px;font-weight:500;font-size:.92rem;
  background:var(--bg-2);border:1px solid var(--line);color:var(--text);transition:transform .2s var(--ease),border-color .2s,background .2s}
.share-btn:hover{transform:translateY(-2px);border-color:var(--line-2);background:var(--bg-3)}
.share-btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.qr-wrap{display:grid;width:max-content;place-items:center;padding:16px;background:#fff;border-radius:16px;margin-bottom:1rem}
.qr-wrap img{display:block;border-radius:6px}
.embed-code{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;font-family:var(--mono);font-size:.78rem;color:var(--muted);white-space:pre-wrap;word-break:break-all;margin-bottom:1rem;line-height:1.5}

/* ---------- custom color picker ---------- */
.cp-pop{position:fixed;z-index:300;width:224px;padding:12px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line-2);box-shadow:4px 4px 0 0 rgba(13,13,13,.1),0 18px 44px -20px rgba(13,13,13,.28)}
.cp-sv{position:relative;width:100%;height:140px;border-radius:10px;cursor:crosshair;touch-action:none;overflow:hidden}
.cp-sv-thumb{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(0,0,0,.45);pointer-events:none}
.cp-hue{position:relative;width:100%;height:14px;border-radius:100px;margin:12px 0;cursor:pointer;touch-action:none;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.cp-hue-thumb{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:none}
.cp-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cp-preview{width:34px;height:34px;border-radius:8px;border:1px solid var(--line-2);flex:none}
.cp-hex{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line-2);border-radius:8px;color:var(--text);font-family:var(--mono);font-size:.85rem;padding:.5rem;text-transform:uppercase}
.cp-hex:focus{outline:none;border-color:var(--accent)}
.cp-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.cp-sw{aspect-ratio:1;border-radius:6px;border:1px solid var(--line);cursor:pointer;transition:transform .15s}
.cp-sw:hover{transform:scale(1.12)}

/* color trigger + bg sub-controls */
.bg-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.bg-ctl[hidden]{display:none}
.color-trigger{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:10px;background:var(--bg-2);border:1px solid var(--line-2);font-size:.85rem;color:var(--text)}
.color-trigger:hover{border-color:var(--accent)}
.color-trigger .ct-sw{width:18px;height:18px;border-radius:5px;border:1px solid var(--line-2)}
.color-pair{display:inline-flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.bg-ctl .angle{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--muted)}
.bg-ctl .angle input{accent-color:var(--accent)}

@media (max-width:880px){
  .dash-grid{grid-template-columns:minmax(0,1fr)}
  .preview-col{position:static;order:-1;min-width:0}
  .preview-frame{max-width:100%}
}

/* ==========================================================================
   MOBILE DASHBOARD (<=880px): edit/preview toggle, full-screen preview,
   bottom-sheet popovers, and comfortably-tappable controls.
   Desktop (>880px) keeps the side-by-side sticky preview untouched.
   ========================================================================== */
/* the mobile Edit | Preview segmented toggle + the in-preview "back" button are
   desktop-hidden; they only matter when the layout single-columns. */
.mobile-view-switch,.preview-back{display:none}

@media (max-width:880px){
  /* sticky segmented toggle under the tabs: full width, big tap zone */
  .mobile-view-switch{display:flex;position:sticky;top:0;z-index:8;gap:4px;padding:5px;margin:0 0 16px;border-radius:100px;
    background:color-mix(in srgb,var(--bg-1) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border:1px solid var(--line-2);box-shadow:0 8px 24px -14px rgba(0,0,0,.7)}
  .mobile-view-switch button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    min-height:44px;border-radius:100px;font-size:.92rem;font-weight:500;color:var(--muted);transition:color .2s,background .2s}
  .mobile-view-switch button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mobile-view-switch button.on{color:var(--accent-ink);background:var(--accent);font-weight:600;
    box-shadow:0 3px 12px -4px color-mix(in srgb,var(--accent) 70%,transparent)}

  /* editor gets the full width; the preview rail is hidden until toggled on.
     We override the 880px order:-1 above so the editor is the default view.
     NOTE: preview mode hides .editor-stage, NOT .editor-col, because the fixed
     bottom tab rail (.ed-rail) lives inside .editor-col; display:none on the
     parent would take the rail down with it and strand the user with no nav. */
  .preview-col{order:0;display:none}
  body.show-preview .editor-stage{display:none}
  body.show-preview .preview-col{display:flex;order:0}

  /* "back to editor" pill above the preview */
  .preview-back{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;margin-bottom:14px;
    min-height:40px;padding:.5rem 1rem;border-radius:100px;background:var(--bg-2);border:1px solid var(--line-2);
    color:var(--text);font-size:.88rem;font-weight:500}
  .preview-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .preview-back:active{transform:scale(.97)}

  /* bigger touch targets across the editor (>=40px) */
  .icon-btn{width:40px;height:40px}
  .link-item .li-ico{width:42px;height:42px}
  .switch{width:46px;height:28px}
  .switch .track::after{width:22px;height:22px}
  .switch input:checked + .track::after{transform:translateX(18px)}
  .seg button{min-height:38px;padding:.5rem 1rem}
  .swatch{width:30px;height:30px}
  .color-trigger,.preset-chip,.lang-chip{min-height:42px}
  .design-nav button{min-height:42px}
  .dash-tabs button{min-height:46px}
}

/* (layout pass C) mobile PEEK PREVIEW: in Edit mode the LIVE preview column
   docks as a small fixed thumbnail above the bottom tab bar, on the right.
   body.peek-mini (added once in dashboard.js) only REPOSITIONS + RESCALES the
   real .preview-col, no clone, so canvas backgrounds render exactly once.
   Custom-property overrides beat the inline --phscale/--dscale that
   fitPhonePreview/fitDesktopPreview set, and stop applying the moment the class
   scope exits (body.show-preview = full Preview mode, or >880px). Tap = opens
   full Preview mode (wired in dashboard.js). Delete this block + the JS class
   toggles to revert. */
/* safe-area token (per the house sticky/fixed rule): the peek card is bottom-
   anchored so it only consumes the bottom inset, but the top token is declared
   here so any future fixed top chrome in this sheet has it to build on */
:root{--safe-t:env(safe-area-inset-top,0px)}
@media (max-width:880px){
  body.peek-mini:not(.show-preview) .preview-col{
    /* top:auto kills the desktop sticky top:58px; bottom-anchored, so only the
       bottom inset matters (safe-area-inset-top is a no-op for this card) */
    display:flex;position:fixed;top:auto;left:auto;right:12px;z-index:39;order:0;margin:0;padding:0;
    bottom:calc(78px + env(safe-area-inset-bottom,0px));   /* clear of the fixed tab rail */
    width:auto;height:auto;min-height:0;max-width:96px;max-height:190px;overflow:hidden;
    cursor:pointer;border-radius:20px;
    --phscale:.185!important;   /* 390x844 phone renders as a ~72x156 screen */
    --dscale:.045!important;    /* stale desktop device pick: still a tiny thumb, never 500px wide */
  }
  body.peek-mini:not(.show-preview) .preview-col > *{pointer-events:none}
  body.peek-mini:not(.show-preview) .preview-col::before{display:none}
  body.peek-mini:not(.show-preview) .preview-col .preview-back,
  body.peek-mini:not(.show-preview) .preview-col .device-switch,
  body.peek-mini:not(.show-preview) .preview-col .preview-toolbar{display:none}
  body.peek-mini:not(.show-preview) .preview-col .preview-frame{
    margin:0;padding:4px;border-radius:18px;border-width:1px;
    box-shadow:3px 3px 0 0 rgba(13,13,13,.16),0 14px 30px -18px rgba(13,13,13,.5)}
  body.peek-mini:not(.show-preview) .preview-col .preview-screen{border-radius:14px}
  /* the save bar docks just above the tab rail; step the mini card above it */
  body.peek-mini:not(.show-preview):has(.save-bar:not([hidden])) .preview-col{
    bottom:calc(146px + env(safe-area-inset-bottom,0px))}
  /* keyboard likely open (typing in a field): get out of the way entirely */
  body.peek-mini.kb-open:not(.show-preview) .preview-col{display:none}
  /* Edit mode only: on the Analytics / Share / Sell tabs the card stays away */
  body.peek-mini:not(.show-preview):not(:has(.tab-pane[data-pane="editor"]:not([hidden]))) .preview-col{display:none}
}

/* ----- shared bottom-sheet popovers (add-block / icon / color) ----- */
.sheet-scrim{position:fixed;inset:0;z-index:299;background:rgba(4,4,8,.6);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .22s var(--ease)}
.sheet-scrim[hidden]{display:none}
.sheet-scrim.show{opacity:1}
@media (prefers-reduced-motion:reduce){.sheet-scrim{transition:none}}

@media (max-width:880px){
  /* any popover flagged .as-sheet docks to the bottom as a full-width sheet */
  .block-pop.as-sheet,.icon-pop.as-sheet,.cp-pop.as-sheet{
    left:0!important;right:0!important;top:auto!important;bottom:0!important;
    width:100%!important;max-width:100%!important;max-height:80vh!important;
    border-radius:22px 22px 0 0!important;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))!important;
    box-shadow:0 -18px 50px -20px rgba(13,13,13,.35)!important;
    animation:sheet-up .26s var(--ease)!important;z-index:300}
  /* a grabber bar so it reads as a draggable sheet */
  .block-pop.as-sheet::before,.icon-pop.as-sheet::before,.cp-pop.as-sheet::before{
    content:"";display:block;width:40px;height:4px;border-radius:100px;background:var(--line-2);
    margin:-4px auto 12px}
  /* roomier tap targets inside the sheets */
  .bp-item{padding:13px 12px}
  .ip-grid{grid-template-columns:repeat(5,1fr);gap:8px}
  .ip-btn{min-height:46px}
  .cp-pop.as-sheet{width:100%!important}
  .cp-pop.as-sheet .cp-sv{height:180px}
  .cp-pop.as-sheet .cp-swatches{grid-template-columns:repeat(8,1fr)}
}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .block-pop.as-sheet,.icon-pop.as-sheet,.cp-pop.as-sheet{animation:none!important}
}

/* ==========================================================================
   HOMEPAGE MOTION UPGRADE: gravity well, grain, scroll-orbit, counters,
   orbital divider, stat proof strip, constellation CTA, 3D phone tilt.
   All compositor-friendly + reduced-motion-safe.
   ========================================================================== */

/* --- film grain: kills banding on dark gradients, adds human texture --- */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px}
@media (prefers-reduced-motion:no-preference){
  @keyframes grain-shift{to{background-position:160px 160px}}
  .grain{animation:grain-shift 5s steps(6) infinite}
}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}

/* --- gravity well: gold glow that lags toward the cursor like mass --- */
.hero-gravity{position:absolute;inset:0;z-index:0;pointer-events:none;
  --gx:76%;--gy:34%;opacity:.9;
  background:radial-gradient(34% 40% at var(--gx) var(--gy),
    color-mix(in srgb,var(--accent) 22%,transparent),transparent 66%)}

/* --- scroll-orbit progress ring on the logo --- */
.logo .scroll-orbit{width:18px;height:18px;border-radius:50%;margin-left:.5em;flex:none;
  background:conic-gradient(var(--accent) var(--p,0%),rgba(255,255,255,.1) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 0)}
@property --p{syntax:'<percentage>';inherits:false;initial-value:0%}
@media (prefers-reduced-motion:no-preference){
  @keyframes orbt-progress{to{--p:100%}}
  .logo .scroll-orbit{animation:orbt-progress linear both;animation-timeline:scroll(root block)}
}
@media (prefers-reduced-motion:reduce){.logo .scroll-orbit{--p:25%}}

/* --- scroll-driven section reveal (compositor thread) --- */
@media (prefers-reduced-motion:no-preference){
  @keyframes orbt-rise{
    from{opacity:0;transform:translateY(34px) scale(.985);filter:blur(8px)}
    to{opacity:1;transform:none;filter:blur(0)}
  }
  .reveal-sd{animation:orbt-rise both;animation-timeline:view();
    animation-range:entry 6% cover 40%;animation-timing-function:var(--ease)}
}
@supports not (animation-timeline:view()){.reveal-sd{opacity:1}}

/* --- stat proof strip + animated counters --- */
.proof{padding-block:clamp(40px,5vw,64px)}
.proof-grid{display:flex;align-items:stretch;justify-content:center;gap:clamp(14px,4vw,56px);flex-wrap:wrap}
.proof-cell{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;min-width:120px}
.proof-num{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.5vw,3.2rem);line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#FFE7A8,var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-num{font-variant-numeric:tabular-nums}
.proof-lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.proof-sep{width:1px;align-self:center;height:38px;background:linear-gradient(180deg,transparent,var(--line-2),transparent)}
@media (max-width:680px){.proof-sep{display:none}.proof-grid{gap:28px 18px}.proof-cell{min-width:42%}}

/* --- orbital section divider: a gold dot orbiting a hairline --- */
.orbt-divider{position:relative;height:1px;margin:clamp(2.5rem,6vw,5rem) auto;max-width:var(--maxw);
  width:calc(100% - var(--pad)*2);
  background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.orbt-divider span{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%,#FFE7A8,var(--accent));
  box-shadow:0 0 14px 2px color-mix(in srgb,var(--accent) 60%,transparent)}
@media (prefers-reduced-motion:no-preference){
  @keyframes orbt-travel{from{left:6%}to{left:94%}}
  .orbt-divider span{animation:orbt-travel linear both;
    animation-timeline:view();animation-range:cover 12% cover 88%}
}

/* --- constellation field behind the final CTA --- */
.cta-band{position:relative;overflow:hidden}
.cta-field{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:auto;opacity:.85}
.cta-band .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .cta-field{display:none}
  .cta-band{background:
    radial-gradient(70% 120% at 50% 0%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 60%),
    radial-gradient(40% 70% at 50% 100%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%)}
}

/* --- 3D gravity-tilt on the looks phones (glass-under-light) --- */
.tilt{transform-style:preserve-3d;transition:transform .55s var(--ease);will-change:transform}
.phone-sm.tilt::after{content:"";position:absolute;inset:9px;border-radius:26px;pointer-events:none;z-index:3;
  background:radial-gradient(180px circle at var(--lx,50%) var(--ly,50%),rgba(255,255,255,.16),transparent 60%);
  opacity:0;transition:opacity .35s;mix-blend-mode:screen}
.phone-sm.tilt:hover::after{opacity:1}
.phone-sm.tilt:hover{transform:translateY(-8px)}
@media (prefers-reduced-motion:reduce){.tilt{transition:none}.phone-sm.tilt::after{display:none}}

/* ==========================================================================
   (K) SETTINGS overlay: account / language / accessibility / data / danger
   ========================================================================== */
/* ==========================================================================
   (PALETTE) COMMAND PALETTE: Cmd/Ctrl-K
   ========================================================================== */
/* discoverable trigger in the top bar: the palette itself was previously
   keyboard-shortcut-only with no visible entry point */
.nav-search-btn{display:inline-flex;align-items:center}
.nav-search-kbd{margin-left:.55rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--faint);
  border:1px solid var(--line-2);border-radius:6px;padding:.2em .5em;background:var(--bg-3)}
@media (max-width:1180px){.nav-search-btn span{display:none}.nav-search-btn{padding-inline:.6rem}.nav-search-kbd{margin-left:0}}
@media (max-width:760px){.nav-search-btn{display:none}}
.cmdk{position:fixed;inset:0;z-index:360;display:flex;justify-content:center;align-items:flex-start;padding:clamp(14px,10vh,140px) clamp(12px,4vw,40px) 20px}
.cmdk-scrim{position:absolute;inset:0;background:rgba(4,4,8,.62);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);opacity:0;transition:opacity .16s var(--ease)}
.cmdk.open .cmdk-scrim{opacity:1}
.cmdk-panel{position:relative;width:min(560px,100%);max-height:min(64vh,560px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--line-2);border-radius:18px;
  box-shadow:6px 6px 0 0 rgba(13,13,13,.12),0 30px 80px -40px rgba(13,13,13,.35);overflow:hidden;
  opacity:0;transform:translateY(-10px) scale(.985);transition:opacity .16s var(--ease),transform .16s var(--ease)}
.cmdk.open .cmdk-panel{opacity:1;transform:none}
.cmdk.leaving .cmdk-scrim,.cmdk.leaving .cmdk-panel{opacity:0;transition:opacity .14s var(--ease)}
@media (prefers-reduced-motion:reduce){.cmdk-scrim,.cmdk-panel{transition:none}}
.cmdk-search{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cmdk-search > svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cmdk-input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:var(--body);font-size:1.02rem}
.cmdk-input::placeholder{color:var(--faint)}
.cmdk-esc{flex:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--faint);
  border:1px solid var(--line-2);border-radius:6px;padding:.2em .5em;background:var(--bg-3)}
.cmdk-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:7px;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.cmdk-list::-webkit-scrollbar{display:none;width:0;height:0}
.cmdk-group{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:.7rem .6rem .35rem}
.cmdk-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 11px;border-radius:11px;
  background:transparent;border:1px solid transparent;color:var(--text);transition:background .12s,border-color .12s}
.cmdk-row.on{background:color-mix(in srgb,var(--accent) 12%,var(--bg-3));border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.cmdk-ico{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 11%,var(--bg-2));color:var(--accent)}
.cmdk-ico svg{width:17px;height:17px}
.cmdk-label{flex:1;min-width:0;font-size:.94rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-grp{flex:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.cmdk-empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:.9rem}
@media (max-width:640px){
  .cmdk{padding:0;align-items:flex-end}
  .cmdk-panel{width:100%;max-height:78vh;border-radius:20px 20px 0 0}
}

.settings-overlay{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(12px,3vw,40px)}
.settings-overlay[hidden]{display:none}
.settings-scrim{position:absolute;inset:0;background:rgba(4,4,8,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:set-fade .25s var(--ease)}
.settings-panel{position:relative;width:min(860px,100%);height:min(86vh,820px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--bg-1),var(--bg));border:1px solid var(--line-2);border-radius:22px;
  box-shadow:6px 6px 0 0 rgba(13,13,13,.12),0 30px 80px -40px rgba(13,13,13,.35);overflow:hidden;animation:set-rise .3s var(--ease)}
@keyframes set-fade{from{opacity:0}to{opacity:1}}
@keyframes set-rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.settings-scrim,.settings-panel{animation:none}}
.settings-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.settings-head h2{font-family:var(--display);font-size:1.3rem;font-weight:600}
.settings-close{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted);border:1px solid var(--line-2);transition:color .2s,background .2s}
.settings-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.settings-close:hover{color:var(--text);background:var(--bg-2)}
.settings-body{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:0;flex:1}
.settings-nav{display:flex;flex-direction:column;gap:2px;padding:14px;border-right:1px solid var(--line);overflow:auto}
.settings-nav button{display:flex;align-items:center;gap:.6rem;text-align:left;padding:.62rem .7rem;border-radius:10px;
  font-size:.88rem;color:var(--muted);transition:color .2s,background .2s}
.settings-nav button svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.settings-nav button:hover{color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent)}
.settings-nav button.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent)}
.settings-nav button.danger.on{color:#FF6B6B;background:color-mix(in srgb,#FF6B6B 11%,transparent)}
.settings-sections{padding:22px clamp(18px,3vw,28px);overflow:auto;min-height:0}
/* .settings-sec is a <section>, so the global section{padding-block:clamp(..,100px)} leaks in. Reset it */
.settings-sec{padding-block:0}
.settings-sec h3{font-family:var(--display);font-size:1.1rem;font-weight:600;margin-bottom:.25rem}
.settings-sec .desc{color:var(--muted);font-size:.9rem;margin-bottom:1.2rem}
.settings-divider{height:1px;background:var(--line);margin:1.3rem 0}
.set-row-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;font-size:.9rem}
.set-row-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.set-row-btn[hidden]{display:none}
.set-handle{display:flex;align-items:center;background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.set-handle:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 12%,transparent)}
.set-handle-pre{padding:.8rem .1rem .8rem 1rem;color:var(--faint);font-family:var(--mono);font-size:.92rem;white-space:nowrap}
.set-handle input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:var(--mono);font-size:.92rem;padding:.8rem .5rem}
.set-field-msg{font-size:.78rem;margin-top:.4rem;min-height:1.05em;font-family:var(--mono)}
.set-field-msg.ok{color:#62D08A}.set-field-msg.bad{color:#FF6B6B}.set-field-msg.muted{color:var(--faint)}
/* handle change locked (server-enforced 90-day cooldown) */
.set-handle:has(input.locked){opacity:.6}
.set-handle input.locked{cursor:not-allowed}
#setHandleLock{line-height:1.4;white-space:normal}
/* page aliases (Settings ▸ Account) */
.alias-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.6rem}
.alias-list:empty{display:none}
/* Settings ▸ Team access */
.team-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.6rem}
.team-list:empty{display:none}
.team-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line,rgba(244,242,236,.12));border-radius:12px}
.team-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.team-meta b{font:600 .92rem 'General Sans',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-handle{font-size:.78rem;color:var(--muted,#9a9aa6)}
.team-chip{font:600 .7rem 'General Sans',sans-serif;letter-spacing:.02em;padding:3px 9px;border-radius:999px}
.team-chip.pending{color:#F5C044;background:rgba(245,192,68,.12);border:1px solid rgba(245,192,68,.35)}
.team-chip.active{color:#7CE7A8;background:rgba(124,231,168,.1);border:1px solid rgba(124,231,168,.3)}
.team-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.team-actions .set-row-btn{margin:0;padding:7px 12px;font-size:.82rem}
a.team-manage{text-decoration:none}
.alias-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--bg-2)}
.alias-row span{font-family:var(--mono);font-size:.86rem;color:var(--text)}
.alias-row button{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;padding:.2rem;display:inline-flex;transition:color .16s}
.alias-row button:hover{color:#FF6B6B}
.alias-row button svg{width:15px;height:15px}
#aliasInput{cursor:text}
#aliasAddBtn{margin:.35rem;flex:none}
/* language grid */
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.lang-chip{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-radius:12px;text-align:left;
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);transition:border-color .2s,background .2s}
.lang-chip:hover{border-color:var(--line-2);background:var(--bg-3)}
.lang-chip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.lang-code{flex:none;width:32px;height:24px;display:grid;place-items:center;border-radius:6px;
  font-family:var(--mono,monospace);font-size:.66rem;font-weight:600;letter-spacing:.04em;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)}
.lang-name{font-size:.9rem;font-weight:500}
.lang-native{display:block;font-size:.72rem;color:var(--muted)}
/* accessibility + danger toggle rows */
.set-toggle-row,.set-danger-row{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1rem 0;border-bottom:1px solid var(--line)}
.set-toggle-row:last-child,.set-danger-row:last-child{border-bottom:none}
.set-toggle-row strong,.set-danger-row strong{display:block;font-size:.95rem;margin-bottom:.15rem}
.set-toggle-row span,.set-danger-row span{display:block;font-size:.82rem;color:var(--muted);max-width:44ch}
.set-danger-row.danger strong{color:#FF6B6B}
.set-del-btn{background:#FF6B6B;color:#1A0606;font-weight:600;padding:.6rem 1.2rem}
.set-del-btn:hover{filter:brightness(1.06);box-shadow:0 10px 30px -10px rgba(255,107,107,.5)}
/* SEO ▸ social share image */
.set-seo-image{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.set-seo-thumb{flex:none;width:120px;aspect-ratio:1200/630;border-radius:12px;border:1px dashed var(--line-2);
  background:var(--surface-2,rgba(255,255,255,.04)) center/cover no-repeat;background-size:cover}
.set-seo-thumb.has-img{border-style:solid}
.set-seo-image-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.btn-text-danger{background:none;border:none;color:#FF8A8A;font-size:.85rem;cursor:pointer;padding:.3rem .2rem;font-family:inherit}
.btn-text-danger:hover{text-decoration:underline}
textarea.input{resize:vertical;min-height:4.5rem;line-height:1.45}

/* Settings ▸ Account: subscription block (manage / lifetime note) */
.set-sub-label{display:block;font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin-bottom:.7rem}
.set-sub-monthly{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.set-sub-plan{font-size:.95rem;font-weight:500;color:var(--text)}
.set-sub-hint{font-size:.8rem;color:var(--muted);margin:0}
.set-sub-lifetime{font-size:.92rem;color:var(--text);background:color-mix(in srgb,var(--accent) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:12px;padding:.85rem 1rem;margin:0;line-height:1.45}
/* live subscription card (driven by my_subscription RPC) */
.sub-card{border:1px solid var(--line,#23232b);border-radius:14px;padding:.9rem 1rem;background:rgba(255,255,255,.018);
  display:flex;flex-direction:column;gap:.65rem}
.sub-card[data-status="lifetime"],.sub-card[data-status="grant_perm"]{
  border-color:color-mix(in srgb,var(--accent) 38%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,transparent),color-mix(in srgb,var(--accent) 2%,transparent))}
.sub-card[data-status="grant"],.sub-card[data-status="monthly"]{border-color:color-mix(in srgb,var(--accent) 26%,transparent)}
.sub-card-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.sub-badge{font-weight:700;font-size:.9rem;letter-spacing:-.01em;padding:.28rem .7rem;border-radius:999px;background:#1a1a20;color:#cfcfd6;white-space:nowrap}
.sub-card[data-status="lifetime"] .sub-badge,.sub-card[data-status="grant"] .sub-badge,
.sub-card[data-status="grant_perm"] .sub-badge,.sub-card[data-status="monthly"] .sub-badge{
  background:linear-gradient(105deg,#e11d8f,#7b2ff7);color:#fff}
.sub-days{font-weight:600;font-size:.78rem;color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);
  padding:.22rem .6rem;border-radius:999px;white-space:nowrap}
.sub-detail{margin:0;font-size:.86rem;color:var(--muted);line-height:1.45}
.sub-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.15rem}
.sub-actions:empty{display:none}
.sub-actions .sub-cta{background:linear-gradient(105deg,#e11d8f,#7b2ff7);color:#fff;border:none;font-weight:700}
.sub-actions .sub-cta:hover{filter:brightness(1.06)}

/* two-factor authentication (Settings ▸ Account) */
.mfa-card{border:1px solid var(--line,#23232b);border-radius:14px;padding:.9rem 1rem;background:rgba(255,255,255,.018);display:flex;flex-direction:column;gap:.6rem}
.mfa-card[data-status="on"]{border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.mfa-card-row{display:flex;flex-direction:column;gap:.35rem}
.mfa-badge{align-self:flex-start;font-weight:700;font-size:.82rem;letter-spacing:-.01em;padding:.24rem .65rem;border-radius:999px;background:#1a1a20;color:#cfcfd6}
.mfa-card[data-status="on"] .mfa-badge{background:linear-gradient(105deg,#e11d8f,#7b2ff7);color:#fff}
.mfa-detail{margin:0;font-size:.86rem;color:var(--muted);line-height:1.45}
.mfa-enroll{margin-top:.8rem;padding:1rem;border:1px dashed var(--line);border-radius:14px;background:var(--bg-2);display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center}
.mfa-enroll-qr{width:176px;height:176px;border-radius:10px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center}
.mfa-enroll-qr img,.mfa-enroll-qr svg{width:100%;height:100%;display:block}
.mfa-enroll .opt-hint{margin:0;max-width:340px}
.mfa-secret{font-family:var(--mono);font-size:.86rem;letter-spacing:.06em;padding:.5rem .8rem;border-radius:9px;background:var(--bg-1);border:1px solid var(--line);word-break:break-all;user-select:all}
.mfa-enroll .field{width:100%;max-width:220px}
.mfa-enroll-actions{display:flex;gap:.6rem}
.mfa-card[hidden],.mfa-enroll[hidden]{display:none}

/* ==========================================================================
   VIP UPGRADE CHOOSER: on-brand modal with two plans (monthly / lifetime)
   ========================================================================== */
/* z-index:400 keeps this blocking modal ABOVE the editor popovers (cp-pop/icon-pop/
   block-pop top out at 360). A VIP swatch in a popover can open this, and at 200 it
   rendered behind the still-open popover. Stays below toasts (9999). */
.up-chooser{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:24px}
.up-scrim{position:absolute;inset:0;background:rgba(5,5,8,.66);backdrop-filter:blur(6px);opacity:0;transition:opacity .22s var(--ease,ease)}
.up-chooser.show .up-scrim{opacity:1}
.up-card{position:relative;z-index:1;width:min(620px,100%);max-height:92vh;overflow-y:auto;
  background:radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 55%),var(--bg-1);
  border:1px solid var(--line-2);border-radius:24px;padding:34px 32px 28px;text-align:center;
  box-shadow:6px 6px 0 0 rgba(13,13,13,.12),0 30px 80px -44px rgba(13,13,13,.35);transform:translateY(14px) scale(.98);opacity:0;
  transition:transform .26s var(--ease,cubic-bezier(.2,.7,.2,1)),opacity .26s var(--ease,ease)}
.up-chooser.show .up-card{transform:none;opacity:1}
.up-x{position:absolute;top:14px;right:14px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:var(--bg-2);border:1px solid var(--line);color:var(--muted);cursor:pointer;transition:color .2s,border-color .2s}
.up-x:hover{color:var(--text);border-color:var(--line-2)}
.up-x svg{width:18px;height:18px}
/* the modal's hero mark is the shared .crown chip scaled up; unlike the little
   VIP pills it KEEPS the crown glyph (re-shown below), only the tile chrome here */
.up-crown{width:54px;height:54px;margin:0 auto .9rem;display:grid;place-items:center;border-radius:16px;border:0;padding:0;
  color:var(--accent-ink,#08080C);background:linear-gradient(135deg,var(--accent),var(--orbit,#7b2ff7));
  box-shadow:0 14px 34px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.up-crown svg{display:block;width:72%;height:72%;fill:currentColor}
.up-crown::after{content:none}
.up-title{font-family:var(--display);font-size:1.6rem;font-weight:600;margin:0 0 .3rem}
.up-sub{color:var(--muted);font-size:.95rem;margin:0 auto 1.6rem;max-width:42ch;line-height:1.5}
.up-plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left}
.up-plan{position:relative;display:flex;flex-direction:column;gap:.4rem;padding:22px 20px;border-radius:18px;
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);cursor:pointer;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.up-plan:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 18px 44px -22px color-mix(in srgb,var(--accent) 50%,transparent)}
.up-plan:disabled{opacity:.55;cursor:default;transform:none}
.up-plan-feat{border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%),var(--bg-2)}
.up-plan-badge{position:absolute;top:0;right:18px;transform:translateY(-50%);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  padding:.32rem .7rem;border-radius:100px;color:var(--accent-ink,#08080C);
  background:linear-gradient(135deg,var(--accent),var(--orbit,#7b2ff7));white-space:nowrap}
.up-plan-tag{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--accent)}
.up-plan-price{font-family:var(--display);font-size:2rem;line-height:1;font-weight:600}
.up-plan-price small{font-size:.9rem;font-weight:400;color:var(--muted);margin-left:.2rem;font-family:var(--body)}
.up-plan-desc{font-size:.82rem;color:var(--muted);line-height:1.45;min-height:2.4em}
.up-plan-cta{margin-top:.6rem;display:inline-flex;align-items:center;justify-content:center;
  padding:.65rem 1rem;border-radius:12px;font-size:.9rem;font-weight:600;
  background:var(--bg-3,rgba(255,255,255,.05));border:1px solid var(--line-2);color:var(--text);transition:background .2s}
.up-plan:hover .up-plan-cta{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.up-plan-feat .up-plan-cta{background:linear-gradient(135deg,var(--accent),var(--orbit,#7b2ff7));color:var(--accent-ink,#08080C);border-color:transparent}
.up-foot{margin:1.4rem 0 0;font-family:var(--mono);font-size:.74rem;color:var(--faint)}
@media (max-width:560px){
  .up-card{padding:30px 20px 22px;border-radius:22px}
  .up-plans{grid-template-columns:1fr}
  .up-plan-desc{min-height:0}
  .up-plan-feat{order:-1}
}
@media (prefers-reduced-motion:reduce){
  .up-scrim,.up-card{transition:opacity .15s}
  .up-card{transform:none}
  .up-plan:hover{transform:none}
}

@media (max-width:640px){
  /* settings becomes a full-width bottom sheet on phones */
  .settings-overlay{place-items:end center;padding:0}
  .settings-panel{width:100%;height:auto;max-height:92vh;border-radius:22px 22px 0 0;animation:sheet-up .3s var(--ease)}
  .settings-head{padding:16px 18px}
  .settings-body{grid-template-columns:1fr}
  .settings-nav{flex-direction:row;border-right:none;border-bottom:1px solid var(--line);overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
    /* fade the right edge so it reads as scrollable (SEO / Your data / Danger zone sit off-screen) */
    -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);
    mask-image:linear-gradient(90deg,#000 84%,transparent)}
  .settings-nav::-webkit-scrollbar{display:none}
  .settings-nav button{flex:0 0 auto;min-height:44px;white-space:nowrap}
  .settings-nav button span{white-space:nowrap}
  .settings-nav button svg{display:none}
  .settings-sections{padding:18px}
  .settings-close{width:42px;height:42px}
  .set-row-btn{min-height:44px}
  .set-toggle-row,.set-danger-row{flex-direction:column;align-items:flex-start;gap:.7rem}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.settings-panel{animation:none}}

/* (K) accessibility prefs applied live to the dashboard body. High contrast is tuned
   for the CREAM editor (only dashboard.js toggles this class): pure-ink text, darker
   secondary text, stronger hairlines and offset shadows, thicker focus rings. Scoped
   under .dash-body so it always outranks the dashboard.css / .dash-light token layers
   and can never hand white text tokens to a light surface (the old dark-era values
   whitewashed the whole editor). */
body.dash-body.a11y-contrast{--text:#000000;--muted:#3b372f;--faint:#4c473d;
  --line:rgba(0,0,0,.32);--line-2:rgba(0,0,0,.5);--accent-text:#a81169;
  --sticker:3px 3px 0 0 rgba(0,0,0,.3);--sticker-sm:2px 2px 0 0 rgba(0,0,0,.32)}
body.dash-body.a11y-contrast :focus-visible{outline-width:3px}
body.a11y-large{font-size:1.08rem}
body.a11y-reduce *,body.a11y-reduce *::before,body.a11y-reduce *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}

/* ==========================================================================
   ONBOARDING: first-run wizard (branded, responsive, reduced-motion-safe)
   ========================================================================== */
.onb-overlay{position:fixed;inset:0;z-index:1200;display:grid;place-items:safe center;overflow-y:auto;padding:clamp(12px,3vw,32px)}
.onb-scrim{position:absolute;inset:0;background:rgba(4,4,8,.72);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);opacity:0;transition:opacity .32s var(--ease)}
.onb-overlay.open .onb-scrim{opacity:1}
.onb-overlay.leaving .onb-scrim{opacity:0}
.onb-modal{position:relative;display:flex;flex-direction:column;width:min(960px,100%);max-height:min(92vh,760px);
  /* the modal is a fixed dark surface, but on the dashboard the page tokens are the cream
     theme (near-black --text, dark --muted/--line). Re-pin the palette to a dark-theme set
     locally so every descendant using var(--text)/var(--muted)/var(--line) stays legible.
     Fixes all three steps: niche names, field labels and the typed input. */
  --text:#F4F2EC;--muted:#A9A7B6;--faint:#8a8a96;
  --line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.18);
  --bg:#0c0c12;--bg-1:#0E0E15;--bg-2:#15151F;--bg-3:#1D1D29;--accent-ink:#ffffff;
  color:var(--text);
  background:linear-gradient(180deg,#101019,#0b0b12);border:1px solid var(--line-2);
  border-radius:26px;box-shadow:0 40px 120px -30px rgba(0,0,0,.8),0 0 0 1px color-mix(in srgb,var(--gold) 6%,transparent) inset;
  overflow:hidden;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .34s var(--ease),transform .34s var(--ease)}
.onb-overlay.open .onb-modal{opacity:1;transform:none}
.onb-overlay.leaving .onb-modal{opacity:0;transform:translateY(8px) scale(.99)}
.onb-modal::before{content:"";position:absolute;top:-40%;left:-10%;width:60%;height:120%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 16%,transparent),transparent 70%);pointer-events:none;filter:blur(8px)}

.onb-skip{position:absolute;top:14px;right:16px;z-index:3;background:transparent;border:0;
  color:var(--muted);font:inherit;font-size:.85rem;cursor:pointer;padding:.5em .7em;border-radius:10px;transition:color .2s,background .2s}
.onb-skip:hover{color:var(--text);background:rgba(255,255,255,.05)}

.onb-grid{display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:minmax(0,1fr);flex:1;min-height:0}
.onb-main{display:flex;flex-direction:column;padding:clamp(22px,3vw,40px);min-width:0;min-height:0;overflow:hidden}
.onb-brand{margin-bottom:18px}
.onb-logo{font-family:var(--display);font-weight:700;font-size:1.4rem;letter-spacing:-.02em;color:var(--text)}
.onb-logo-dot{display:inline-block;width:.34em;height:.34em;border-radius:50%;background:var(--accent);margin:0 .04em;vertical-align:middle;box-shadow:0 0 14px color-mix(in srgb,var(--gold) 60%,transparent)}

.onb-dots{display:flex;gap:7px;margin-bottom:22px}
.onb-dot{width:26px;height:5px;border-radius:3px;background:rgba(255,255,255,.12);transition:background .3s var(--ease)}
.onb-dot.on{background:var(--accent)}
.onb-dot.done{background:color-mix(in srgb,var(--accent) 55%,transparent)}

.onb-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.onb-body::-webkit-scrollbar{display:none;width:0}
.onb-enter{animation:onbIn .42s var(--ease) both}
@keyframes onbIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.onb-step-head h2{font-family:var(--display);font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 .5rem}
.onb-step-head p{color:var(--muted);font-size:.95rem;line-height:1.5;margin:0 0 1.4rem;max-width:42ch}

.onb-cards{display:flex;flex-direction:column;gap:10px}
.onb-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.025);
  color:var(--text);font:inherit;transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease)}
.onb-card:hover{border-color:var(--line-2);background:rgba(255,255,255,.05);transform:translateX(2px)}
.onb-card.on{border-color:var(--accent);background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 12%,transparent),rgba(255,255,255,.03))}
.onb-card-ic{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(140deg,color-mix(in srgb,var(--c,#e11d8f) 26%,#15151f),#12121a);
  border:1px solid color-mix(in srgb,var(--c,#e11d8f) 40%,transparent);color:var(--c,#e11d8f)}
.onb-card-ic svg{width:23px;height:23px}
.onb-card-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.onb-card-name{font-weight:600;font-size:1rem}
.onb-card-desc{color:var(--muted);font-size:.84rem;line-height:1.35}
.onb-card-check{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line-2);color:#0a0a0f;background:transparent;opacity:0;transform:scale(.6);transition:all .22s var(--ease)}
.onb-card-check svg{width:14px;height:14px}
.onb-card.on .onb-card-check{opacity:1;transform:none;background:var(--accent);border-color:var(--accent)}

.onb-fields{display:flex;flex-direction:column;gap:18px;max-width:420px}
.onb-field{display:flex;flex-direction:column;gap:7px}
.onb-field>span{font-size:.82rem;font-weight:600;color:var(--muted)}
.onb-field input{width:100%;padding:.82em 1em;border-radius:13px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);color:var(--text);font:inherit;transition:border-color .2s,box-shadow .2s}
.onb-field input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 16%,transparent)}
.onb-handle-wrap{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:13px;
  background:rgba(255,255,255,.03);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.onb-handle-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 16%,transparent)}
.onb-handle-pre{padding-left:1em;color:var(--muted);font-size:.95rem;white-space:nowrap}
.onb-handle-wrap input{border:0;box-shadow:none;background:transparent;padding-left:.15em}
.onb-handle-wrap input:focus{box-shadow:none}
.onb-field-msg{font-size:.8rem;min-height:1.1em}
.onb-field-msg.bad{color:#FF8484}.onb-field-msg.ok{color:#62D08A}.onb-field-msg.muted{color:var(--muted)}

.onb-done{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.onb-done-orb{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px;
  background:radial-gradient(circle at 38% 34%,#FFE6A8,var(--accent) 55%,#a87a1e);position:relative;
  box-shadow:0 0 50px -6px color-mix(in srgb,var(--gold) 55%,transparent)}
.onb-done-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:#fff;
  top:6px;left:50%;transform-origin:0 25px;animation:onbOrbit 3.6s linear infinite}
@keyframes onbOrbit{to{transform:rotate(360deg)}}
.onb-done h2{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 .5rem;letter-spacing:-.02em}
.onb-done>p{color:var(--muted);margin:0 0 1.3rem;max-width:40ch;line-height:1.5}
.onb-done-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.onb-done-list li{display:flex;align-items:center;gap:10px;font-size:.92rem}
.onb-done-list svg{flex:none;width:18px;height:18px;color:var(--accent)}

.onb-foot{display:flex;align-items:center;gap:12px;padding-top:22px;margin-top:6px;border-top:1px solid var(--line)}
.onb-foot-sp{flex:1}
.onb-foot .btn{padding:.78em 1.5em}
.onb-foot .spin{width:16px;height:16px;border:2px solid rgba(26,21,3,.35);border-top-color:var(--accent-ink);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}

.onb-preview-col{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:0;overflow:hidden;
  padding:clamp(20px,2.5vw,34px);background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--gold) 6%,transparent),transparent 60%),rgba(0,0,0,.22);
  border-left:1px solid var(--line)}
.onb-preview-label{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.onb-phone{width:min(248px,72%);aspect-ratio:9/19;border-radius:30px;padding:8px;
  background:linear-gradient(160deg,#1c1c26,#0c0c12);border:1px solid var(--line-2);
  box-shadow:0 30px 70px -22px rgba(0,0,0,.7);overflow:hidden}
.onb-phone .orbt-profile{height:100%;border-radius:23px}

@media (prefers-reduced-motion:reduce){
  .onb-scrim,.onb-modal,.onb-enter,.onb-done-dot{transition:none;animation:none}
  .onb-overlay.open .onb-modal{transform:none}
}

@media (max-width:760px){
  .onb-grid{grid-template-columns:1fr}
  .onb-preview-col{order:-1;border-left:0;border-bottom:1px solid var(--line);flex-direction:row;gap:16px;padding:18px}
  .onb-phone{width:104px}
  .onb-modal{max-height:94vh}
  /* keep the footer CTA off the modal's rounded bottom so its drop-shadow is not sheared */
  .onb-foot{padding-bottom:8px}
}
@media (max-width:440px){
  .onb-preview-col{display:none}
  .onb-card-desc{display:none}
  .onb-foot .btn{padding:.72em 1.1em;font-size:.92rem}
}

/* ==========================================================================
   START FROM A PRESET: Page tab
   ========================================================================== */
.preset-panel{padding-block:clamp(18px,2.2vw,26px)}
.preset-disc{margin:0}
.preset-summary{display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  user-select:none;outline:none;border-radius:14px}
.preset-summary::-webkit-details-marker{display:none}
.preset-summary:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}
.preset-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.preset-head h2{margin:0}
.preset-head .desc{margin:0}
.preset-toggle{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--muted);
  transition:transform .28s var(--ease),color .2s,border-color .2s}
.preset-toggle svg{width:18px;height:18px}
.preset-summary:hover .preset-toggle{color:var(--text);border-color:var(--line-2)}
.preset-disc[open] .preset-toggle{transform:rotate(180deg);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line-2))}

.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;
  margin-top:20px}
.preset-card{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:18px;min-width:0;
  border:1px solid var(--line);background:rgba(255,255,255,.025);
  transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease)}
.preset-card:hover{border-color:var(--line-2);background:rgba(255,255,255,.05);transform:translateY(-2px)}
/* stacked full-width so "Use this preset" never clips (side-by-side it was ~84px,
   too narrow for the label). Preview (ghost) on top, Use (primary) below. */
.preset-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.preset-actions .btn{width:100%;justify-content:center;padding-inline:12px;min-width:0;white-space:nowrap}
.preset-phone{width:100%;aspect-ratio:9/16;border-radius:20px;padding:6px;overflow:hidden;
  background:linear-gradient(160deg,#1c1c26,#0c0c12);border:1px solid var(--line-2);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.6);pointer-events:none}
.preset-phone .orbt-profile{height:100%;border-radius:15px}
.preset-meta{display:flex;align-items:center;gap:11px;min-width:0}
.preset-ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(140deg,color-mix(in srgb,var(--c,#e11d8f) 26%,#15151f),#12121a);
  border:1px solid color-mix(in srgb,var(--c,#e11d8f) 40%,transparent);color:var(--c,#e11d8f)}
.preset-ic svg{width:19px;height:19px}
.preset-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.preset-tx strong{font-weight:600;font-size:.96rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preset-tx span{color:var(--muted);font-size:.8rem;line-height:1.3}
.preset-use{width:100%;padding:.62em 1em;font-size:.9rem}

/* on-brand confirm dialog */
.preset-confirm{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:clamp(16px,4vw,32px)}
.pc-scrim{position:absolute;inset:0;background:rgba(4,4,8,.72);backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);opacity:0;transition:opacity .22s var(--ease)}
.preset-confirm.open .pc-scrim{opacity:1}
.preset-confirm.leaving .pc-scrim{opacity:0}
.pc-modal{position:relative;width:min(420px,100%);background:linear-gradient(180deg,#101019,#0b0b12);
  border:1px solid var(--line-2);border-radius:22px;padding:26px;
  box-shadow:0 40px 110px -30px rgba(0,0,0,.8),0 0 0 1px color-mix(in srgb,var(--gold) 6%,transparent) inset;
  opacity:0;transform:translateY(12px) scale(.985);transition:opacity .24s var(--ease),transform .24s var(--ease)}
.preset-confirm.open .pc-modal{opacity:1;transform:none}
.preset-confirm.leaving .pc-modal{opacity:0;transform:translateY(6px) scale(.99)}
.pc-modal h3{margin:0 0 .55rem;font-family:var(--display);font-size:1.28rem;letter-spacing:-.01em}
.pc-modal p{margin:0 0 1.4rem;color:var(--muted);line-height:1.5;font-size:.95rem}
.pc-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.pc-actions .btn{padding:.7em 1.3em}

@media (prefers-reduced-motion:reduce){
  .preset-card,.preset-toggle,.pc-scrim,.pc-modal{transition:none}
  .preset-card:hover{transform:none}
}
@media (max-width:560px){
  /* one full-width card per row on phones/small tablets: 2 cols clipped the
     preview phones off-screen below ~560px (cards have their own min-content width). */
  .preset-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   DASHBOARD THEME TOGGLE (editor chrome only) + LIGHT VARIANT
   --------------------------------------------------------------------------
   The toggle button lives in the top bar. .dash-light overrides the
   dashboard's own design tokens to a clean, premium light scheme. It does NOT
   touch the live profile preview, that scopes its own --pf/--pt tokens under
   .orbt-profile, so the previewed page keeps the user's chosen theme.
   ========================================================================== */
.dash-theme-btn{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
  color:var(--muted);background:transparent;border:1px solid var(--line-2);
  transition:color .2s,background .2s,border-color .2s,transform .12s}
.dash-theme-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dash-theme-btn:hover{color:var(--text);background:var(--bg-2);border-color:var(--line-2)}
.dash-theme-btn:active{transform:scale(.94)}
/* show the icon for the mode you'd switch TO: dark shows sun, light shows moon */
.dash-theme-btn .dt-sun{display:none}
.dash-theme-btn .dt-moon{display:block}
.dash-light .dash-theme-btn .dt-sun{display:block}
.dash-light .dash-theme-btn .dt-moon{display:none}

/* ---- the light token set (premium, warm-neutral, NOT pure white) ---- */
.dash-light{
  --bg:        #F4F2EC;   /* warm paper */
  --bg-1:      #FBFAF6;
  --bg-2:      #FFFFFF;
  --bg-3:      #ECE9E1;
  --line:      rgba(20,18,12,.10);
  --line-2:    rgba(20,18,12,.16);
  --text:      #1B1810;   /* near-black ink */
  --muted:     #6A6657;
  --faint:     #97917F;
  --glow:      0 0 50px color-mix(in srgb,var(--gold) 30%,transparent);
}
/* neutralize the dark corner-vignette baked into the dash background */
.dash-light .dash-bg{
  background:
    radial-gradient(120% 70% at 50% -10%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%),
    radial-gradient(90% 60% at 100% 100%,color-mix(in srgb,var(--orbit) 9%,transparent),transparent 60%),
    radial-gradient(140% 100% at 50% 50%,transparent 60%,rgba(20,18,12,.05) 100%);
}
.dash-light .dash-bg::after{display:none}              /* drop the overlay grain: too gritty on light */
.dash-light .page-motion::before{opacity:.55}
.dash-light .page-motion::after{opacity:.45}
/* panels: lift them with a soft shadow instead of relying on a dark gradient */
.dash-light .panel{box-shadow:0 1px 2px rgba(20,18,12,.04),0 10px 30px -22px rgba(20,18,12,.5)}
.dash-light .panel:hover{box-shadow:0 1px 0 0 color-mix(in srgb,var(--accent) 14%,transparent) inset,0 14px 36px -26px rgba(20,18,12,.55)}
/* save bar reads on light too (token-driven), just soften its big black shadow */
.dash-light .save-bar{box-shadow:0 18px 44px -20px rgba(20,18,12,.4),0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent),0 0 32px -16px color-mix(in srgb,var(--accent) 45%,transparent)}
/* command palette + settings + popovers: rebuild their dark glass for light */
.dash-light .cmdk-scrim,.dash-light .settings-scrim{background:rgba(40,36,26,.34)}
.dash-light .cmdk-panel{box-shadow:0 40px 100px -34px rgba(20,18,12,.4),0 0 0 1px rgba(20,18,12,.06)}
.dash-light .cmdk-row.on{background:color-mix(in srgb,var(--accent) 18%,var(--bg-2))}
.dash-light .settings-panel{box-shadow:0 40px 100px -38px rgba(20,18,12,.4)}
/* keep the on-segment crown chip legible: white on the magenta fill */
.dash-light .seg button.on .crown,.dash-light .preset-chip.on .crown,.dash-light .font-chip.on .crown{color:#fff;background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.5)}
/* the preset-confirm modal is hard-coded dark: give it a light face */
.dash-light .pc-modal{background:linear-gradient(180deg,#FFFFFF,#FBFAF6);box-shadow:0 40px 100px -34px rgba(20,18,12,.4),0 0 0 1px color-mix(in srgb,var(--gold) 12%,transparent) inset}