/* Universe selection — animated worlds floating in space, with a dive-in reveal. */
/* --- Deep space stage ---------------------------------------------------- */
.universe-page { min-height: 100svh; }
#universe-field { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
#universe-space { position: fixed; inset: 0; z-index: 4; pointer-events: auto; }
.universe-travel { height: 520vh; pointer-events: none; }

.universe-intro { position: fixed; z-index: 6; top: 128px; left: clamp(30px, 7vw, 130px); max-width: min(420px, 44vw); pointer-events: none; transition: opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.universe-intro.traveling{opacity:0;transform:translate3d(-70px,-36px,0) scale(.88);filter:blur(5px)}
.universe-intro h1 { font-size: clamp(44px, 5vw, 86px); }
.universe-legend { display: flex; align-items: center; margin-top: 30px; color: rgba(224,233,247,.72); font-size: clamp(10px,.7vw,12px); letter-spacing: .24em; }
.universe-legend::before { content: ""; width: clamp(30px,3.2vw,58px); height: 1px; margin-right: 14px; background: linear-gradient(90deg, rgba(214,229,250,.12), rgba(214,229,250,.72)); box-shadow: 0 0 12px rgba(176,208,248,.18); }
.universe-legend span { display: block; }

/* Depth readout */
.universe-depth { position: fixed; z-index: 6; right: clamp(30px, 4vw, 74px); top: 50%; transform: translateY(-50%); display: grid; gap: 12px; justify-items: end; pointer-events: none; }
.universe-depth em { width: 1px; height: 190px; background: rgba(216,230,251,.12); font-style: normal; position: relative; }
.universe-depth em::after { content: ""; position: absolute; left: -1px; top: 0; width: 3px; height: 34px; border-radius: 2px; background: linear-gradient(180deg, #e6f0ff, rgba(150,186,236,.2)); box-shadow: 0 0 12px rgba(176,208,248,.5); transform: translateY(calc(var(--travel, 0) * 156px)); }
.universe-depth span { color: #59636f; font-size: 7px; letter-spacing: .22em; writing-mode: vertical-rl; }

/* Floating name plates that track each world in 3D */
.universe-tag { position: absolute; left: 0; top: 0; display: grid; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; white-space: nowrap; transform-origin: left center; will-change: transform, opacity; }
.universe-tag::before { content: ""; position: absolute; inset: -22px -34px; border-radius: 10px; }
.universe-tag .u-name { font-size: clamp(24px,2vw,40px); line-height: 1; letter-spacing: -.01em; color: #eef3fb; transition: color .35s, text-shadow .45s; }
.universe-tag .u-status { color: rgba(171,184,203,.58); font-size: 7px; letter-spacing: .24em; }
.universe-tag .u-enter { display: flex; align-items: center; gap: 9px; color: #8f9cad; font-size: 7px; letter-spacing: .2em; opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .5s; }
.universe-tag[data-hot="1"] .u-name { color: #fff; text-shadow: 0 0 30px rgba(168,200,244,.45); }
.universe-tag[data-hot="1"] .u-enter { opacity: 1; transform: none; }
.universe-tag[data-status="incoming"] .u-name { color: #b9c3d1; }
.universe-tag[data-side="left"] { text-align: right; transform-origin: right center; }
.universe-tag[data-side="left"] .u-status { justify-self: end; }
.universe-tag[data-side="left"] .u-enter { justify-content: flex-end; }

/* Dive transition */
body.universe-diving { overflow: hidden; }
body.universe-diving #universe-space { pointer-events: none; }
/* While the detail view fades out the field is already interactive again, so the
   outgoing overlay must not intercept the next selection. */
.universe-detail.dismissing { pointer-events: none; }
body.universe-diving .universe-intro,
body.universe-diving .universe-depth,
body.universe-diving .topbar { opacity: 0; transform: translateY(-18px); transition: opacity .5s, transform .7s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
body.universe-diving .universe-depth { transform: translateY(-50%) translateX(24px); }
.dive-flash { position: fixed; inset: 0; z-index: 40; opacity: 0; pointer-events: none; background: radial-gradient(circle at center, rgba(229,240,255,.56) 0%, rgba(157,193,241,.25) 20%, rgba(55,76,108,.2) 42%, rgba(3,6,11,.3) 65%, transparent 84%); }
.dive-flash.fire { animation: diveFlash .98s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes diveFlash { 0% { opacity: 0; transform: scale(.4); } 28% { opacity: .66; } 54% { opacity: .31; } 100% { opacity: 0; transform: scale(1.82); } }

/* Universe detail */
.universe-detail { position:fixed;inset:0;z-index:30;display:none;overflow-y:auto;background:#050507;opacity:0;isolation:isolate; }
.universe-detail.open { display: block; }
.universe-detail.visible { opacity: 1; transition: opacity .7s ease; }
.universe-detail.dismissing { opacity: 0; transition: opacity .34s ease; }
.universe-detail::before { content:"";position:fixed;z-index:1;inset:-14%;pointer-events:none;background:radial-gradient(ellipse at 72% 28%,rgba(157,190,235,.09),transparent 38%),radial-gradient(ellipse at 30% 76%,rgba(93,116,154,.065),transparent 34%);mix-blend-mode:screen;opacity:.65;transform:translate3d(-1.5%,1%,0) scale(1.02);animation:detailAtmosphere 14s ease-in-out infinite alternate; }
.universe-detail::after { content:"";position:fixed;z-index:1;inset:-8%;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0,transparent 4px,rgba(220,235,255,.015) 5px),linear-gradient(112deg,transparent 30%,rgba(220,235,255,.022) 47%,transparent 64%);opacity:.55;will-change:transform;animation:detailScan 18s ease-in-out infinite alternate; }
@keyframes detailAtmosphere { from{transform:translate3d(-1.5%,1%,0) scale(1.02);opacity:.48} to{transform:translate3d(2%,-1.5%,0) scale(1.07);opacity:.78} }
@keyframes detailScan { from{transform:translate3d(-3%,0,0)} to{transform:translate3d(3%,1.5%,0)} }
.detail-art { position: absolute; inset: 0; overflow: hidden; }
.detail-art img { width:100%;height:100%;object-fit:cover;filter:grayscale(.22) brightness(.66) contrast(1.09);transform:scale(1.12);transition:transform 2.6s cubic-bezier(.2,.8,.2,1);will-change:transform; }
.universe-detail.visible .detail-art img { animation:detailArtDrift 24s ease-in-out 2.2s infinite alternate; }
@keyframes detailArtDrift { from{transform:scale(1.025) translate3d(-.5%,.35%,0)} to{transform:scale(1.085) translate3d(1.2%,-.8%,0)} }
.detail-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, #050507 4%, rgba(5,5,7,.9) 34%, rgba(5,5,7,.42) 66%, rgba(5,5,7,.72)), linear-gradient(180deg, rgba(5,5,7,.86), transparent 26%, rgba(5,5,7,.72)); opacity:1; transition:opacity 2s; }
.universe-detail.visible .detail-art::after { opacity:.84; }
.detail-particles { position:fixed;z-index:1;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity 1.1s ease; }
.universe-detail.visible .detail-particles { opacity:.9; }
.detail-shell { position: relative; z-index: 2; display: grid; align-content: start; min-height: 100svh; padding: 108px clamp(30px, 7vw, 130px) 90px; }
.detail-top { position: absolute; top: 34px; left: clamp(30px, 7vw, 130px); right: clamp(30px, 7vw, 130px); display: flex; align-items: center; }
.detail-back { display: flex; align-items: center; gap: 11px; min-height:44px; padding: 11px 16px; border: 1px solid rgba(214,228,250,.18); border-radius: 3px; background: rgba(6,8,11,.5); color: #b9c6d8; font: inherit; font-size: 8px; letter-spacing: .2em; transition: color .3s, border-color .3s, background .3s; }
.detail-back:hover { color: #eef4ff; border-color: rgba(226,238,255,.42); background: rgba(16,20,27,.72); }
.detail-title { margin:0;font-size:clamp(52px,7.4vw,132px);font-weight:400;line-height:.9;letter-spacing:-.035em;opacity:0;transform:translateY(24px);text-shadow:0 3px 30px rgba(0,0,0,.9); }
.detail-title::after { content:"";display:block;width:clamp(150px,19vw,272px);height:2px;margin:22px 0 20px;background:linear-gradient(90deg,rgba(233,242,255,.96) 0%,rgba(198,220,252,.82) 42%,rgba(150,183,232,.34) 76%,transparent 100%);box-shadow:0 0 14px rgba(178,209,255,.5),0 0 34px rgba(126,168,228,.24); }
.detail-lead { margin:0;max-width:min(820px,62vw);font-size:clamp(22px,2.35vw,42px);font-weight:400;line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(222,230,244,.62);text-shadow:0 3px 30px rgba(0,0,0,.78);opacity:0;transform:translateY(22px); }
.detail-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 46px 0 0; max-width: 1000px; }
.detail-features article { padding: 20px; border: 1px solid rgba(220,230,248,.12); background: linear-gradient(150deg, rgba(15,18,24,.72), rgba(5,6,8,.4)); opacity: 0; transform: translateY(26px); }
.detail-features small { display: block; margin-bottom: 12px; color: #6a7484; font-size: 7px; letter-spacing: .2em; }
.detail-features b { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 400; letter-spacing: .12em; color: #e7eefb; }
.detail-features p { margin: 0; color: #7b8595; font-family: "Segoe UI", sans-serif; font-size: 13px; line-height: 1.6; }
.is-live-product .detail-title { font-size:clamp(52px,6.4vw,112px); }
.is-live-product .detail-features { display:block;max-width:1180px; }
.detail-feature-head { grid-column: 1/-1; display: flex; align-items: end; justify-content: space-between; padding: 0 2px 14px; border-bottom: 1px solid rgba(220,230,248,.14); }
.detail-feature-head span { color: #6e798a; font-size: 8px; letter-spacing: .22em; }
.detail-feature-head b { color: #dce6f5; font-size: 13px; font-weight: 400; letter-spacing: .15em; }
.detail-feature-columns { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px;margin-top:10px; }
.detail-feature-column { display:flex;flex-direction:column;gap:10px;min-width:0; }
.feature-group { position:relative;isolation:isolate;overflow:hidden;border:0;background:linear-gradient(100deg,rgba(11,14,19,.46),rgba(7,8,11,.12) 72%,transparent);box-shadow:inset 1px 0 rgba(213,228,249,.11);opacity:0;transform:translateY(26px);transition:background .35s,box-shadow .35s;backdrop-filter:blur(3px); }
.feature-group::before { content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(108deg,rgba(188,213,246,.075),transparent 30%);opacity:0;transform:translateX(-18%);transition:opacity .45s,transform .65s cubic-bezier(.2,.8,.2,1); }
.feature-group::after { content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(220,233,250,.26),rgba(220,233,250,.08) 62%,transparent 96%);transition:opacity .35s,filter .35s; }
.feature-group:hover,.feature-group[open] { background:linear-gradient(100deg,rgba(15,19,26,.59),rgba(7,8,11,.18) 73%,transparent);box-shadow:inset 2px 0 rgba(218,233,252,.34),0 16px 42px rgba(0,0,0,.1); }
.feature-group:hover::after,.feature-group[open]::after { filter:drop-shadow(0 0 7px rgba(174,207,249,.32)); }
.feature-group:hover::before,.feature-group[open]::before { opacity:1;transform:none; }
.feature-group summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; padding: 18px 20px; cursor: pointer; list-style: none; }
.feature-group summary::-webkit-details-marker { display: none; }
.feature-group summary span { display: grid; gap: 10px; }
.feature-group summary small { color: #657183; font-size: 7px; letter-spacing: .2em; }
.feature-group summary b { color: #e5edf9; font-size: 14px; font-weight: 400; letter-spacing: .12em; }
.feature-group summary em { flex: 0 0 auto; color: #768295; font-size: 7px; font-style: normal; letter-spacing: .18em; }
.feature-group summary em::after { content: "+"; display: inline-block; margin-left: 14px; color: #dbe8fa; font-size: 14px; transition: transform .3s; }
.feature-group[open] summary em::after { transform: rotate(45deg); }
.feature-description { margin:0;padding:2px 20px 18px;max-width:920px;color:#a4afbf;font-family:"Segoe UI",sans-serif;font-size:14px;line-height:1.6; }
.feature-group ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 22px; margin: 0; padding: 4px 20px 22px; list-style: none; }
.feature-group li { position: relative; padding-left: 13px; color: #909baa; font-family: "Segoe UI",sans-serif; font-size: 13px; line-height: 1.45; }
.feature-group li::before { content: ""; position: absolute; left: 0; top: .65em; width: 4px; height: 1px; background: #b8c9e1; box-shadow: 0 0 6px rgba(175,205,244,.5); }
.coming-soon-panel { grid-column: 1/-1; display: grid; gap: 13px; max-width: 680px; padding: 42px; border: 1px solid rgba(220,230,248,.12); background: linear-gradient(145deg,rgba(15,18,24,.72),rgba(5,6,8,.45)); }
.coming-soon-panel span { color: #718095; font-size: 8px; letter-spacing: .22em; }
.coming-soon-panel b { color: #e8eef8; font-size: clamp(26px,3vw,48px); font-weight: 400; letter-spacing: .08em; }
.coming-soon-panel p { min-height: 0; color: #7f8a9a; }
.detail-commerce { display:none; opacity:0; transform:translateY(20px); }
.is-live-product .detail-commerce { position:absolute;top:clamp(180px,20vh,250px);right:clamp(180px,14vw,340px);display:grid;width:clamp(360px,24vw,470px);padding:22px 6px 22px 24px;border:0;border-top:1px solid rgba(220,230,248,.21);border-bottom:1px solid rgba(220,230,248,.1);background:linear-gradient(105deg,rgba(10,13,18,.68),rgba(7,8,11,.24) 78%,transparent);box-shadow:inset 2px 0 rgba(218,233,252,.28),0 30px 80px rgba(0,0,0,.12);backdrop-filter:blur(5px); }
.is-live-product .detail-commerce::before { content:"";position:absolute;inset:-1px 0 auto 0;height:1px;background:linear-gradient(90deg,rgba(225,237,255,.42),rgba(155,190,236,.16),transparent 88%);box-shadow:0 0 18px rgba(144,183,235,.16); }
.commerce-kicker { margin:0 0 9px;color:#778397;font-size:8px;letter-spacing:.23em; }
.detail-commerce h3 { margin:0;color:#edf3fc;font-size:22px;font-weight:400;letter-spacing:.055em; }
.commerce-copy { margin:10px 0 19px;color:#909baa;font-family:"Segoe UI",sans-serif;font-size:13px;line-height:1.55; }
.license-tiers { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0; }
.license-tier { position:relative;display:grid;gap:7px;min-height:72px;padding:12px 13px;text-align:left;border:0;border-top:1px solid rgba(220,230,248,.12);background:linear-gradient(120deg,rgba(215,230,250,.018),transparent 70%);color:#8c97a8;font:inherit;transition:background .25s,color .25s,box-shadow .25s; }
.license-tier:nth-child(odd) { border-right:1px solid rgba(220,230,248,.075); }
/* Lifetime closes the ladder as one full-width row instead of half of a lopsided last row. */
.license-tier[data-tier="lifetime"] { grid-column:1/-1;border-right:0; }
.license-tier:hover,.license-tier.selected { background:linear-gradient(120deg,rgba(206,225,249,.1),rgba(206,225,249,.018) 70%,transparent);color:#eef4ff;box-shadow:inset 2px 0 rgba(218,233,252,.42); }
.license-tier span { font-size:8px;letter-spacing:.17em; }
.license-tier b { font-size:21px;font-weight:400;letter-spacing:.02em; }
.license-tier small { position:absolute;right:12px;bottom:12px;color:#687486;font-size:7px;letter-spacing:.12em; }
.commerce-session { margin:18px 0 0;padding:14px 0 0;border-top:1px solid rgba(220,230,248,.1); }
/* Announced-but-unpurchasable: same slot and chrome as the live checkout, with
   the headline given the stencil treatment used elsewhere on the site. */
.is-announced .detail-commerce h3 em { color:transparent;-webkit-text-stroke:1px rgba(226,238,255,.5); }
.is-announced .commerce-session strong { color:#9fb4d2; }
.commerce-session strong { display:block;margin-bottom:7px;color:#dfe8f6;font-size:9px;font-weight:400;letter-spacing:.18em; }
.commerce-session p { margin:0;color:#7f8b9c;font-family:"Segoe UI",sans-serif;font-size:12px;line-height:1.55; }
.detail-actions { display:flex;align-items:center;gap:10px;margin:17px 0 0; }
.detail-actions .commerce-action { flex:1 1 0;width:auto;min-width:0;min-height:58px;justify-content:flex-start;text-decoration:none; }
.detail-actions .commerce-action-secondary { border-color:rgba(218,231,250,.16);background:linear-gradient(108deg,rgba(217,230,250,.035),rgba(154,185,228,.012) 54%,rgba(217,230,250,.025));color:#b8c5d7; }
.detail-actions .commerce-action-secondary:hover,.detail-actions .commerce-action-secondary:focus-visible { border-color:rgba(225,238,255,.42);background:linear-gradient(108deg,rgba(211,228,251,.1),rgba(126,168,224,.03) 55%,rgba(211,228,251,.07));color:#f4f8ff; }
.detail-actions .login-submit-label::after { width:min(150px,calc(100% + 72px)); }
/* Full-viewport scrim. Lives on <body> (see universes.js) because
   .detail-commerce's backdrop-filter would otherwise contain it to the panel.
   The blur does the separating so the checkout content can sit directly on the
   scrim with no card or frame of its own. */
.checkout-preview {
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;
  background:radial-gradient(112% 86% at 50% 44%,rgba(5,7,11,.3),rgba(3,4,7,.7) 62%,rgba(2,3,5,.86));
  backdrop-filter:blur(7px) saturate(.96);
  -webkit-backdrop-filter:blur(7px) saturate(.96);
  animation:pmScrimIn .34s cubic-bezier(.4,0,.2,1) both;
}
.checkout-preview .checkout-panel { animation:pmPanelIn .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pmScrimIn { from { opacity:0 } to { opacity:1 } }
@keyframes pmPanelIn { from { opacity:0;transform:translateY(14px) scale(.985) } to { opacity:1;transform:none } }
@media(prefers-reduced-motion:reduce){
  .checkout-preview,.checkout-preview .checkout-panel{animation:none}
}
.checkout-preview[hidden] { display:none; }
/* ── Checkout · "Monolith" ───────────────────────────────────────────────────
   Structure ported from the live products.html payment modal: hairline method
   rows, a sliding accent bar for selection, and a total that restrikes when
   crypto is chosen. Reconciled to the redesign's squarer, stencilled surfaces
   and Momo headings rather than the live site's rounded ivory treatment. */
/* No card. The blurred scrim already separates the checkout from the page, so
   the panel is a bare content column — no fill, no border, no shadow — and the
   typography carries the whole thing. */
.checkout-panel {
  --pm-acc:#8fc6e4;
  --pm-hair:rgba(255,255,255,.09);
  --pm-hair-2:rgba(220,230,248,.16);
  --pm-t1:#eef3fc;--pm-t2:#a9b3c4;--pm-t3:#77808f;--pm-t4:#525b69;
  position:relative;width:min(400px,100%);padding:0;border:0;background:none;box-shadow:none;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}
.pm-top { display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-bottom:10px; }
/* Close control: a machined dial rather than a bare glyph. A hairline ring, an
   inner bevel and a faint conic sheen give it weight at 34px; hovering swaps the
   whole assembly to a warning red and spins the sheen. */
.pm-x {
  --x-ring:rgba(220,230,248,.16);
  --x-ink:#8b95a5;
  --x-red:#e2564f;
  position:relative;display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;
  border:1px solid var(--x-ring);border-radius:50%;background:radial-gradient(circle at 50% 30%,rgba(226,236,252,.07),rgba(6,8,12,.5) 72%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.5),0 6px 16px -8px rgba(0,0,0,.85);
  color:var(--x-ink);cursor:pointer;isolation:isolate;
  transition:color .32s cubic-bezier(.4,0,.2,1),border-color .32s cubic-bezier(.4,0,.2,1),box-shadow .32s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.4,0,.2,1);
}
/* Sheen ring, revealed on hover. */
.pm-x::before {
  content:"";position:absolute;z-index:-1;inset:-1px;border-radius:50%;opacity:0;
  background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--x-red) 55%,transparent) 22%,transparent 46%,color-mix(in srgb,var(--x-red) 34%,transparent) 68%,transparent 92%);
  mask:radial-gradient(circle,transparent 63%,#000 66%);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 66%);
  transition:opacity .32s ease;animation:pmDial 5.5s linear infinite;animation-play-state:paused;
}
.pm-x svg { width:13px;height:13px;position:relative;transition:transform .38s cubic-bezier(.2,.8,.2,1),filter .32s ease; }
.pm-x:hover,.pm-x:focus-visible {
  outline:0;color:var(--x-red);border-color:color-mix(in srgb,var(--x-red) 52%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.5),
             0 0 0 3px color-mix(in srgb,var(--x-red) 11%,transparent),
             0 0 24px color-mix(in srgb,var(--x-red) 26%,transparent);
}
.pm-x:hover::before,.pm-x:focus-visible::before { opacity:1;animation-play-state:running; }
.pm-x:hover svg,.pm-x:focus-visible svg { transform:rotate(90deg);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--x-red) 62%,transparent)); }
.pm-x:active { transform:scale(.94); }
@keyframes pmDial { to { rotate:360deg; } }
@media(prefers-reduced-motion:reduce){
  .pm-x::before{animation:none!important}
  .pm-x:hover svg,.pm-x:focus-visible svg{transform:none}
}
/* Title follows the site headline pattern: first word solid, remainder
   stencilled via <em> (same as `h1 em, h2 em` on the homepage). */
.pm-title {
  margin:0 0 2px;color:var(--pm-t1);font-family:"Momo",sans-serif;font-size:clamp(32px,3.4vw,44px);
  font-weight:400;line-height:.94;letter-spacing:-.035em;text-transform:uppercase;
  text-shadow:0 3px 24px rgba(2,3,6,.66);
}
.pm-title em {
  font-style:normal;color:rgba(3,4,6,.72);-webkit-text-stroke:1px rgba(226,232,246,.76);
  text-shadow:1px 2px 0 rgba(1,2,3,.5),0 4px 26px rgba(2,3,6,.66);
}
/* The price, stated once — solid, so it reads as the one hard fact against the
   stencilled title. */
.pm-total-row { display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:18px;padding:17px 0 15px;border-top:1px solid var(--pm-hair);border-bottom:1px solid var(--pm-hair); }
.pm-total-label { padding-bottom:6px;color:var(--pm-t3);font-size:9px;letter-spacing:.22em; }
.pm-order-price { color:var(--pm-t1);font-family:"Momo",sans-serif;font-size:clamp(38px,4.2vw,52px);font-weight:400;line-height:.88;letter-spacing:-.04em;white-space:nowrap;text-shadow:0 4px 28px rgba(2,3,6,.6); }
.pm-original-price { margin-right:9px;color:var(--pm-t4);font-size:17px;letter-spacing:-.02em;text-decoration:line-through; }
.pm-discount-price { color:#34d399; }
/* Method rows: hairlines, not boxes. */
.pm-label { display:block;margin:19px 0 4px;color:var(--pm-t3);font-size:9px;letter-spacing:.22em; }
.pm-rows { margin-bottom:22px; }
.pm-row { position:relative;display:flex;width:100%;align-items:center;gap:14px;padding:14px 4px 14px 14px;border:0;border-bottom:1px solid var(--pm-hair);background:none;text-align:left;font-family:inherit;cursor:pointer;transition:background .35s; }
.pm-row::before { content:"";position:absolute;left:0;top:50%;width:2px;height:0;border-radius:2px;background:var(--pm-acc);box-shadow:0 0 10px color-mix(in srgb,var(--pm-acc) 55%,transparent);transform:translateY(-50%);transition:height .35s cubic-bezier(.4,0,.2,1); }
.pm-row:hover { background:rgba(255,255,255,.018); }
.pm-row-text { flex:1;min-width:0; }
.pm-row-text strong { display:block;color:var(--pm-t2);font-family:"Segoe UI",sans-serif;font-size:13.5px;font-weight:600;letter-spacing:-.01em;transition:color .35s; }
.pm-row-text small { display:block;margin-top:3px;color:var(--pm-t4);font-family:"Segoe UI",sans-serif;font-size:11px; }
.pm-row-meta { flex-shrink:0;color:var(--pm-t4);font-size:9px;letter-spacing:.14em;transition:color .35s; }
.pm-row[aria-checked="true"]::before { height:24px; }
.pm-row[aria-checked="true"] .pm-row-text strong { color:var(--pm-t1); }
.pm-row[aria-checked="true"] .pm-row-meta { color:var(--pm-acc); }
.checkout-panel .primary { width:100%; }
.checkout-fine { display:flex;align-items:center;justify-content:center;gap:7px;margin:13px 0 0;color:var(--pm-t4);font-family:"Segoe UI",sans-serif;font-size:11px;text-align:center; }
.checkout-fine svg { width:11px;height:11px;flex-shrink:0;opacity:.55; }
.universe-detail.visible .detail-title,
.universe-detail.visible .detail-lead,
.universe-detail.visible .detail-features article,
.universe-detail.visible .feature-group,
.universe-detail.visible .detail-commerce { opacity: 1; transform: none; transition: opacity .85s cubic-bezier(.2,.8,.2,1), transform .95s cubic-bezier(.2,.8,.2,1); transition-delay: var(--in, 0ms); }
.universe-detail.visible .detail-title { --in: 120ms; }
.universe-detail.visible .detail-lead { --in: 240ms; }
.universe-detail.visible .detail-features article:nth-child(1) { --in: 420ms; }
.universe-detail.visible .detail-features article:nth-child(2) { --in: 490ms; }
.universe-detail.visible .detail-features article:nth-child(3) { --in: 560ms; }
.universe-detail.visible .detail-features article:nth-child(4) { --in: 630ms; }
.universe-detail.visible .feature-group:nth-of-type(1) { --in: 400ms; }
.universe-detail.visible .feature-group:nth-of-type(2) { --in: 450ms; }
.universe-detail.visible .feature-group:nth-of-type(3) { --in: 500ms; }
.universe-detail.visible .feature-group:nth-of-type(4) { --in: 550ms; }
.universe-detail.visible .feature-group:nth-of-type(n+5) { --in: 600ms; }
.universe-detail.visible .detail-commerce { --in: 700ms; }

@media (max-width: 1850px) {
  .is-live-product .detail-commerce { position:relative;top:auto;right:auto;width:auto;max-width:1180px;margin-top:24px; }
}

@media (max-width: 1180px) {
  .detail-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-feature-columns { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .universe-intro { top: 96px; left: 24px; max-width: 78vw; }
  .universe-depth { display: none; }
  .universe-tag .u-name { font-size: 21px; }
  .universe-tag::before { inset: -26px -38px; }
  .detail-shell { padding: 96px 24px 70px; }
  .detail-title::after { margin:16px 0 14px; }
  .detail-lead { max-width:100%;font-size:clamp(18px,6.4vw,28px);line-height:1.12; }
  .detail-features { grid-template-columns: 1fr; }
  .feature-group ul { grid-template-columns: 1fr; }
  .feature-group summary { align-items: flex-start; }
  .detail-feature-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .detail-commerce { padding:20px; }
  .detail-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .detail-actions .commerce-action { width:100%;min-width:0;flex:none; }
}
@media (prefers-reduced-motion:reduce) {
  .universe-detail::before,.universe-detail::after,.universe-detail.visible .detail-art img { animation:none!important; }
  .universe-detail.visible .detail-art img { transform:scale(1.025); }
  .universe-detail.visible .detail-particles { opacity:.72; }
}