/* ============================================================
   MODULES · The WIZARD ADS Design Bible — living visual brandbook
   A numbered catalog of every design module on the platform:
   buttons · toggles · inputs · cards · glows · animations ·
   nodes · data-viz · frames · overlays.
   Inherits all tokens from styles.css.
   ============================================================ */

.mod{
  flex:1 1 auto; min-width:0; height:100vh; min-height:0;
  display:flex; position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(1000px 600px at 14% -12%, rgba(22,192,216,.13), transparent 58%),
    radial-gradient(860px 620px at 106% 8%, rgba(22,192,216,.08), transparent 56%),
    radial-gradient(1000px 700px at 104% 118%, rgba(46,211,198,.10), transparent 56%),
    linear-gradient(160deg,var(--bg-grad-a),var(--bg-grad-b));
  /* demo accent palette for the node/card showcases — obsidian originals
     (blue · purple · green). Arctic remaps these to one icy-cyan family
     in theme.css so the gallery matches the single-accent mood. */
  --demo-c1:#5b8cff;
  --demo-c2:#16c0d8;
  --demo-c3:#46d9a0;
}

/* ============================================================ INDEX RAIL (left TOC) */
.mod-index{
  flex:0 0 252px; width:252px; display:flex; flex-direction:column; min-height:0;
  background:var(--glass-rail); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border-right:1px solid var(--line);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.03), 22px 0 60px -40px rgba(0,0,0,.9);
}
.mod-index-head{ padding:20px 20px 16px; border-bottom:1px solid var(--line-soft); }
.mod-eyebrow{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:8px; }
.mod-eyebrow .spark{ color:var(--ai-b); filter:drop-shadow(0 0 6px var(--ai-b)); }
.mod-index-head h1{ margin:11px 0 0; font-size:var(--fs-stat-1); font-weight:var(--fw-black); letter-spacing:-.03em; line-height:1.04;
  background:linear-gradient(118deg,#fff,#bfeef4 54%,#2ec7c2); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 30px rgba(22,192,216,.25); }
.mod-index-head .cap{ margin-top:6px; font-size:var(--fs-label); font-weight:var(--fw-med); color:var(--ink-3); line-height:1.45; }

.mod-toc{ flex:1; overflow-y:auto; min-height:0; padding:12px 10px 18px; display:flex; flex-direction:column; gap:2px; }
.mod-toc-row{ display:flex; align-items:center; gap:12px; height:40px; padding:0 11px; border-radius:11px;
  cursor:pointer; color:var(--ink-2); position:relative; border:1px solid transparent;
  transition:background .16s var(--out), color .16s var(--out), transform .2s var(--spring), box-shadow .2s var(--out); }
.mod-toc-row:hover{ background:var(--hover); color:var(--ink); transform:translateX(2px); }
.mod-toc-row.on{ color:#fff; background:linear-gradient(100deg,var(--acc-soft),rgba(22,192,216,.05));
  border-color:var(--acc-line); box-shadow:0 6px 22px -12px var(--acc-glow); }
.mod-toc-row.on::before{ content:''; position:absolute; left:-11px; top:50%; transform:translateY(-50%);
  width:3.5px; height:20px; border-radius:4px; background:var(--acc); box-shadow:0 0 14px 1px var(--acc-glow); }
.mod-toc-num{ font-size:var(--fs-label); font-weight:var(--fw-black); color:var(--ink-4); font-family:'JetBrains Mono',monospace;
  flex:0 0 auto; min-width:20px; transition:.16s var(--out); }
.mod-toc-row:hover .mod-toc-num, .mod-toc-row.on .mod-toc-num{ color:var(--acc-2); }
.mod-toc-row .nm{ flex:1; font-size:var(--fs-base); font-weight:var(--fw-bold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mod-toc-row .ct{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); color:var(--ink-4); font-variant-numeric:tabular-nums; }

.mod-toc-foot{ flex:0 0 auto; padding:12px 14px 14px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; gap:9px; font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-3); }
.mod-toc-foot .pulse{ width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 9px var(--good);
  animation:bpPulseDot 2s ease-in-out infinite; }

/* ============================================================ MAIN SCROLL */
.mod-main{ flex:1 1 auto; min-width:0; min-height:0; overflow-y:auto; scroll-behavior:smooth; position:relative; }
.mod-main::after{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:var(--noise); }
.mod-inner{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:30px clamp(20px,3.4vw,52px) 120px; }

/* hero */
.mod-hero{ position:relative; padding:34px 34px 30px; border-radius:var(--r-xl); overflow:hidden; margin-bottom:34px;
  background:linear-gradient(135deg,rgba(22,192,216,.16),rgba(46,211,198,.07));
  border:1px solid var(--acc-line); box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.06); }
.mod-hero::after{ content:''; position:absolute; right:-60px; top:-80px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(46,211,198,.26),transparent 70%); z-index:0; }
.mod-hero > *{ position:relative; z-index:1; }
.mod-hero .he-eyebrow{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); letter-spacing:.2em; text-transform:uppercase; color:var(--acc-2);
  display:flex; align-items:center; gap:9px; }
.mod-hero h2{ margin:14px 0 0; font-size:clamp(30px,4vw,46px); font-weight:var(--fw-black); letter-spacing:-.035em; line-height:1.02;
  background:linear-gradient(118deg,#fff,#cdeef4 52%,#2ec7c2); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 40px rgba(22,192,216,.3); max-width:18ch; }
.mod-hero p{ margin:16px 0 0; font-size:var(--fs-body); font-weight:var(--fw-reg); color:var(--ink-2); line-height:1.6; max-width:62ch; }
.mod-hero-stats{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.mod-hstat{ display:flex; flex-direction:column; gap:3px; padding:12px 18px; border-radius:14px;
  background:rgba(8,9,14,.4); border:1px solid var(--line-soft); backdrop-filter:blur(8px); }
.mod-hstat .v{ font-size:var(--fs-stat-1); font-weight:var(--fw-black); letter-spacing:-.02em; color:#fff;
  background:var(--ai-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mod-hstat .l{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }

/* ============================================================ SECTION */
.mod-section{ scroll-margin-top:18px; padding-top:26px; margin-top:18px; }
.mod-section:first-of-type{ margin-top:0; padding-top:0; }
.mod-shead{ display:flex; align-items:flex-end; gap:16px; margin-bottom:22px; padding-bottom:16px;
  border-bottom:1px solid var(--line-soft); position:relative; }
.mod-shead::after{ content:''; position:absolute; left:0; bottom:-1px; width:62px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--acc),var(--ai-b)); box-shadow:0 0 14px var(--acc-glow); }
.mod-snum{ font-size:clamp(34px,5vw,52px); font-weight:var(--fw-black); line-height:.85; letter-spacing:-.04em;
  font-family:'JetBrains Mono',monospace; color:transparent; -webkit-text-stroke:1.4px rgba(22,192,216,.5);
  text-shadow:0 0 30px rgba(22,192,216,.18); flex:0 0 auto; }
.mod-stt{ flex:1; min-width:0; }
.mod-stt h3{ margin:0; font-size:clamp(20px,2.4vw,27px); font-weight:var(--fw-black); letter-spacing:-.025em; color:#fff; }
.mod-stt .sd{ margin-top:5px; font-size:var(--fs-base); font-weight:var(--fw-reg); color:var(--ink-3); line-height:1.45; max-width:64ch; }
.mod-scount{ flex:0 0 auto; font-size:var(--fs-eyebrow); font-weight:var(--fw-black); letter-spacing:.04em; color:var(--ink-3);
  padding:5px 11px; border-radius:20px; background:rgba(255,255,255,.04); border:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums; white-space:nowrap; }

/* grid of spec cells */
.mod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); gap:16px; align-items:stretch; }
.mod-grid.wide{ grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); }
.mod-grid.full{ grid-template-columns:1fr; }
.mod-grid.two{ grid-template-columns:repeat(auto-fill,minmax(440px,1fr)); }

/* the spec cell */
.mod-cell{ display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden; position:relative;
  background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line-soft); box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .2s var(--out), box-shadow .26s var(--out), transform .26s var(--spring); }
.mod-cell:hover{ border-color:var(--line-strong); transform:translateY(-3px);
  box-shadow:var(--shadow-soft), 0 0 36px -16px var(--acc-glow); }
.mod-cell.span2{ grid-column:span 2; }

.mod-cell-head{ display:flex; align-items:center; gap:10px; padding:12px 14px 11px; flex:0 0 auto; }
.mc-num{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); color:var(--acc-2); font-family:'JetBrains Mono',monospace;
  padding:3px 8px; border-radius:7px; background:var(--acc-soft); border:1px solid var(--acc-line);
  flex:0 0 auto; letter-spacing:.03em; }
.mc-tt{ flex:1; min-width:0; }
.mc-name{ font-size:var(--fs-base); font-weight:var(--fw-black); letter-spacing:-.01em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-desc{ font-size:var(--fs-label); font-weight:var(--fw-med); color:var(--ink-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* the live stage — dotted obsidian backdrop so glows + neon read true */
.mod-stage{ flex:1 1 auto; min-height:120px; display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; padding:24px 20px; position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(22,192,216,.06), transparent 64%),
    linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.4));
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.mod-stage::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.2px);
  background-size:18px 18px;
  mask-image:radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%); }
.mod-stage > *{ position:relative; z-index:1; }
.mod-stage.tall{ min-height:200px; }
.mod-stage.col{ flex-direction:column; }
.mod-stage.start{ align-items:flex-start; justify-content:flex-start; }
.mod-stage.pad-lg{ padding:32px 26px; }
.mod-stage.dark{ background:linear-gradient(180deg,#080a10,#06070b); }

/* cell footer — mono class caption + variation chips */
.mod-cell-foot{ flex:0 0 auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:11px 14px 12px; }
.mc-code{ font-size:var(--fs-eyebrow); font-weight:var(--fw-med); color:var(--ink-3); font-family:'JetBrains Mono',monospace;
  padding:3px 8px; border-radius:6px; background:rgba(0,0,0,.32); border:1px solid var(--line-soft);
  letter-spacing:0; white-space:nowrap; }
.mc-tag{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2);
  padding:3px 8px; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid var(--line-soft); }
.mc-tag.anim{ color:var(--ai-b); background:rgba(46,211,198,.1); border-color:rgba(46,211,198,.28); }
.mc-tag.hover{ color:var(--acc-2); background:var(--acc-soft); border-color:var(--acc-line); }

/* small caption row used inside stages */
.mod-cap{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); }

/* ============================================================ FOUNDATION SPECIFICS */
/* color swatch grid */
.mod-swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:11px; width:100%; }
.mod-sw{ border-radius:13px; overflow:hidden; border:1px solid var(--line-soft); background:var(--panel-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition:transform .22s var(--spring), box-shadow .22s var(--out); }
.mod-sw:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.mod-sw .chip{ height:62px; position:relative; }
.mod-sw .chip::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 -1px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08); }
.mod-sw .sm{ padding:9px 11px; }
.mod-sw .sm .nm{ font-size:var(--fs-label); font-weight:var(--fw-black); color:var(--ink); }
.mod-sw .sm .hex{ font-size:var(--fs-micro); font-weight:var(--fw-med); color:var(--ink-3); font-family:'JetBrains Mono',monospace; margin-top:2px; }

/* type specimen rows */
.mod-typerow{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; width:100%;
  padding:13px 0; border-bottom:1px solid var(--line-soft); }
.mod-typerow:last-child{ border-bottom:none; }
.mod-typerow .spec{ flex:0 0 auto; font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-4); font-family:'JetBrains Mono',monospace; text-align:right; min-width:96px; }
.mod-type-display{ font-size:var(--fs-stat-4); font-weight:var(--fw-black); letter-spacing:-.03em;
  background:linear-gradient(118deg,#fff,#bfeef4 58%,#2ec7c2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mod-type-h{ font-size:var(--fs-stat-1); font-weight:var(--fw-black); letter-spacing:-.02em; color:var(--ink); }
.mod-type-body{ font-size:var(--fs-body); font-weight:var(--fw-reg); color:var(--ink-2); }
.mod-type-eyebrow{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.mod-type-mono{ font-size:var(--fs-base); font-weight:var(--fw-med); color:var(--ink-2); font-family:'JetBrains Mono',monospace; }

/* radius + shadow + easing demos */
.mod-radii{ display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; width:100%; justify-content:center; }
.mod-radius{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.mod-radius .box{ width:60px; height:60px; background:linear-gradient(135deg,rgba(22,192,216,.3),rgba(46,211,198,.16));
  border:1px solid var(--acc-line); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.mod-radius .lb{ font-size:var(--fs-micro); font-weight:var(--fw-black); color:var(--ink-3); font-family:'JetBrains Mono',monospace; }

.mod-shadow{ display:flex; flex-direction:column; align-items:center; gap:11px; }
.mod-shadow .box{ width:84px; height:60px; border-radius:14px; background:var(--glass-3);
  border:1px solid var(--line-soft); display:grid; place-items:center; }
.mod-shadow .box.soft{ box-shadow:var(--shadow-soft); }
.mod-shadow .box.pop{ box-shadow:var(--shadow-pop); }
.mod-shadow .box.float{ box-shadow:var(--shadow-float); }
.mod-shadow .box.glow{ box-shadow:0 0 30px -6px var(--acc-glow), 0 0 0 1px var(--acc-line); }
.mod-shadow .lb{ font-size:var(--fs-micro); font-weight:var(--fw-black); color:var(--ink-3); }

.mod-ease{ width:100%; display:flex; flex-direction:column; gap:14px; }
.mod-ease-row{ display:flex; align-items:center; gap:14px; }
.mod-ease-row .nm{ flex:0 0 96px; font-size:var(--fs-label); font-weight:var(--fw-black); color:var(--ink-2); font-family:'JetBrains Mono',monospace; }
.mod-ease-track{ flex:1; height:34px; border-radius:10px; background:rgba(0,0,0,.34); border:1px solid var(--line-soft); position:relative; overflow:hidden; }
.mod-ease-dot{ position:absolute; top:50%; left:5px; width:18px; height:18px; border-radius:50%; margin-top:-9px;
  background:#fff; box-shadow:0 0 0 4px var(--acc-soft), 0 0 14px var(--acc-glow); }
.mod-ease-dot.spring{ animation:modEaseSpring 2.4s var(--spring) infinite alternate; }
.mod-ease-dot.out{ animation:modEaseOut 2.4s var(--out) infinite alternate; }
.mod-ease-dot.linear{ animation:modEaseLin 2.4s linear infinite alternate; }
@keyframes modEaseSpring{ from{ left:5px; } to{ left:calc(100% - 23px); } }
@keyframes modEaseOut{ from{ left:5px; } to{ left:calc(100% - 23px); } }
@keyframes modEaseLin{ from{ left:5px; } to{ left:calc(100% - 23px); } }

/* ============================================================ ANIMATION TILES */
.mod-anim-tile{ width:90px; height:90px; border-radius:16px; display:grid; place-items:center; position:relative;
  background:var(--panel-2); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.mod-orb{ width:42px; height:42px; border-radius:50%; background:var(--ai-grad); box-shadow:0 0 24px -2px var(--ai-glow); }
.mod-pulsering{ width:34px; height:34px; border-radius:50%; background:var(--acc); box-shadow:0 0 16px var(--acc-glow); }
.mod-pulsering::after{ content:''; position:absolute; inset:0; margin:auto; width:34px; height:34px; border-radius:50%;
  box-shadow:0 0 0 0 var(--acc-glow); animation:vpulse 2.6s ease-out infinite; }

/* tiny demo helpers reused across cells */
.mod-glowdot{ width:9px; height:9px; border-radius:50%; }
.mod-glowdot.good{ background:var(--good); box-shadow:0 0 10px 1px var(--good); }
.mod-glowdot.warn{ background:var(--warn); box-shadow:0 0 10px 1px var(--warn); }
.mod-glowdot.bad{ background:var(--bad); box-shadow:0 0 10px 1px var(--bad); }
.mod-glowdot.acc{ background:var(--acc); box-shadow:0 0 10px 1px var(--acc-glow); }
.mod-glowdot.ai{ background:var(--ai-b); box-shadow:0 0 10px 1px var(--ai-glow); }
.mod-glowdot.blink{ animation:sxblink 1.6s ease-in-out infinite; }

/* status badge demos (vault) */
.mod-statusbadge{ display:flex; align-items:center; gap:6px; height:24px; padding:0 9px 0 8px; border-radius:20px;
  background:rgba(8,9,14,.62); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.12);
  font-size:var(--fs-eyebrow); font-weight:var(--fw-black); color:#fff; box-shadow:0 4px 12px -4px rgba(0,0,0,.6); }
.mod-statusbadge .dot{ width:7px; height:7px; border-radius:50%; }

/* live indicator pill */
.mod-live{ display:flex; align-items:center; gap:7px; height:28px; padding:0 11px; border-radius:8px; font-size:var(--fs-eyebrow); font-weight:var(--fw-black);
  letter-spacing:.04em; color:#cbe9d8; background:rgba(70,217,160,.1); border:1px solid rgba(70,217,160,.3); }
.mod-live .d{ width:6px; height:6px; border-radius:50%; background:var(--good); box-shadow:0 0 8px var(--good); animation:mtxGlow 1.8s ease-in-out infinite; }
.mod-live.rec{ color:#ffd2d8; background:rgba(255,107,125,.1); border-color:rgba(255,107,125,.32); }
.mod-live.rec .d{ background:var(--bad); box-shadow:0 0 8px var(--bad); animation:scrRec 1.4s ease-in-out infinite; }

/* ============================================================ NODE DEMO (compact, authentic) */
.mod-node{ position:relative; width:188px; border-radius:13px; --nc:#16c0d8;
  background:linear-gradient(180deg, rgba(26,29,42,.94), rgba(16,18,27,.96));
  border:1px solid color-mix(in srgb,var(--nc) 60%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--nc) 40%,transparent), 0 18px 40px -20px rgba(0,0,0,.85);
  animation:bpNodePulse 2.6s ease-in-out infinite; }
.mod-node-head{ display:flex; align-items:center; gap:9px; height:44px; padding:0 11px; border-radius:13px 13px 0 0;
  background:linear-gradient(180deg, color-mix(in srgb,var(--nc) 22%,transparent), color-mix(in srgb,var(--nc) 7%,transparent));
  border-bottom:1px solid var(--line-soft); }
.mod-node-ic{ width:28px; height:28px; flex:0 0 28px; border-radius:8px; display:grid; place-items:center; color:#fff;
  background:color-mix(in srgb,var(--nc) 32%,#14161e); border:1px solid color-mix(in srgb,var(--nc) 50%,transparent);
  box-shadow:0 0 14px -5px var(--nc), inset 0 1px 0 rgba(255,255,255,.2); }
.mod-node-ic svg{ filter:drop-shadow(0 0 5px var(--nc)); }
.mod-node-tt .nn{ font-size:var(--fs-base); font-weight:var(--fw-black); letter-spacing:-.01em; }
.mod-node-tt .ns{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-4); font-family:'JetBrains Mono',monospace; margin-top:1px; }
.mod-node-st{ margin-left:auto; width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 9px var(--good); animation:bpPulseDot 1.8s ease-in-out infinite; }
.mod-node-body{ position:relative; padding:11px; display:flex; flex-direction:column; gap:8px; }
.mod-node-port{ position:absolute; top:54px; width:13px; height:13px; border-radius:50%; background:#0c0d13; border:2px solid var(--nc);
  box-shadow:0 0 9px -1px var(--nc); }
.mod-node-port.in{ left:-7px; } .mod-node-port.out{ right:-7px; }
.mod-node-line{ height:6px; border-radius:4px; background:rgba(255,255,255,.06); }
.mod-node-line.s{ width:64%; }

/* ============================================================ MINI 9:16 FRAME (cards/frames sections) */
.mod-frame916{ position:relative; width:120px; aspect-ratio:9/16; border-radius:14px; overflow:hidden; --ch:248;
  background:
    radial-gradient(135% 90% at 28% 16%, hsl(var(--ch) 72% 56% / .42), transparent 56%),
    radial-gradient(120% 70% at 82% 96%, hsl(calc(var(--ch) + 40) 70% 50% / .30), transparent 60%),
    repeating-linear-gradient(135deg,#1b1e2b 0 10px,#161924 10px 20px);
  box-shadow:0 26px 56px -22px rgba(0,0,0,.85), 0 0 0 1px var(--line-strong),
    inset 0 1px 0 rgba(255,255,255,.08), 0 0 36px -12px var(--acc-glow); }
.mod-frame916::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 60%,rgba(0,0,0,.7)); }
.mod-frame916 .scan{ position:absolute; left:0; right:0; top:0; height:34%; background:linear-gradient(180deg,rgba(22,192,216,.22),transparent); animation:vwscan 2.6s ease-in-out infinite; }
.mod-frame916 .play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.16); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.32); box-shadow:0 8px 22px -6px rgba(0,0,0,.6); z-index:2; }

/* spline demo svg */
.mod-spline{ width:100%; height:100%; overflow:visible; }
.mod-spline path{ fill:none; stroke-linecap:round; filter:drop-shadow(0 0 4px currentColor); }
.mod-spline .flow{ stroke-dasharray:7 7; animation:bpFlow .5s linear infinite; }

/* reduced motion: keep resting state visible, drop loops */
@media (prefers-reduced-motion:reduce){
  .mod-ease-dot, .mod-orb, .mod-pulsering::after, .mod-node, .mod-frame916 .scan,
  .mod-spline .flow, .mod-live .d{ animation:none !important; }
}

/* ---- class-collision guards (scoped to the gallery) ----
   blueprint.css ships a global `.bp{ height:100vh }` (the Auto-workspace
   root). The loop-engine score chip also uses `.le-band .bp`, so inside the
   gallery that number inherited 100vh and ballooned its row. Neutralise any
   stray single-letter platform-root classes when shown inside .mod. */
.mod .bp{ height:auto; min-height:0; }

/* time field demo (03.08) — tokenized so it reads in both palettes */
.mod-timefield{ height:40px; padding:0 12px; border-radius:11px; background:var(--well);
  border:1px solid var(--line); color:var(--ink); font-size:var(--fs-body); font-weight:var(--fw-bold);
  font-family:'JetBrains Mono',monospace; color-scheme:dark; }
html[data-theme="arctic"] .mod-timefield{ color-scheme:light; }

/* responsive */
@media (max-width:1080px){
  .mod-index{ flex-basis:208px; width:208px; }
}