.brand-mark.brand-mark-canvas{
  position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 48px;
  border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(17,24,39,.95),rgba(6,10,18,.94));
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 24px rgba(3,8,18,.32)
}
.brand-mark.brand-mark-canvas canvas{display:block;width:100%;height:100%}
.brand-mark.brand-mark-canvas.is-live{border-color:rgba(100,236,255,.28);box-shadow:inset 0 1px rgba(255,255,255,.06),0 0 23px rgba(124,105,255,.16)}

.brand-mark.brand-mark-canvas .brand-s{
  position:absolute;
  inset:3px;
  width:calc(100% - 6px);
  height:calc(100% - 6px);
  overflow:visible;
  z-index:2;
  pointer-events:none;
}
.brand-mark.brand-mark-canvas .brand-s-outline{
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-size:25px;
  font-weight:900;
  fill:rgba(4,7,8,.64);
  stroke:url(#brand-s-rainbow);
  stroke-width:1.7px;
  paint-order:stroke fill;
  letter-spacing:-.04em;
}

.cycle-card{display:flex;flex-direction:column}
.cycle-hero{
  position:relative;isolation:isolate;min-height:236px;margin:2px 0 16px;border-radius:24px;overflow:hidden;
  padding:20px 22px 18px;background:linear-gradient(180deg,rgba(7,11,19,.96),rgba(5,9,16,.88))
}
.cycle-hero-shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:
  linear-gradient(180deg,rgba(4,7,13,.32) 0%,rgba(4,7,13,.14) 18%,rgba(4,7,13,.06) 38%,rgba(4,7,13,.28) 68%,rgba(4,7,13,.72) 100%),
  linear-gradient(90deg,rgba(4,7,13,.26),rgba(4,7,13,.08) 35%,rgba(4,7,13,.2) 100%)}
.card-topline,.cycle-title,.cycle-media-label{position:relative;z-index:5}
.card-topline{display:flex;justify-content:space-between;align-items:center;gap:16px}
.cycle-title{margin-top:44px!important;display:flex;flex-direction:column;gap:4px;text-shadow:0 10px 30px rgba(2,4,10,.44)}
.cycle-title strong{display:block;line-height:.88}
.cycle-media{
  position:relative;height:148px;margin:18px 0 22px;border-radius:20px;overflow:hidden;background:rgba(5,9,16,.9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 12px 34px rgba(2,5,12,.34)
}
#cycle-live-canvas,.cycle-media-fallback{position:absolute;inset:0;width:100%;height:100%}
#cycle-live-canvas{z-index:2;display:block;opacity:0;transition:opacity 1.8s ease}
.cycle-hero[data-live-canvas-state="live"] #cycle-live-canvas{opacity:1}
.cycle-media-fallback{z-index:1;background:#07101a;overflow:hidden;transition:opacity 1.8s ease;opacity:1}
.cycle-hero[data-live-canvas-state="live"] .cycle-media-fallback{opacity:0}
.cycle-media-fallback:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(0,210,180,.09),transparent 31%,rgba(101,86,255,.13) 61%,rgba(255,87,175,.08));mix-blend-mode:screen}
.cycle-media-fallback i{position:absolute;width:72%;aspect-ratio:1;border-radius:50%;filter:blur(34px);opacity:.6;will-change:opacity,transform}
.cycle-media-fallback i:nth-child(1){left:-24%;top:-78%;background:rgba(60,230,175,.54);animation:cycleAmbientA 24s ease-in-out infinite alternate}
.cycle-media-fallback i:nth-child(2){right:-26%;top:-66%;background:rgba(73,199,255,.52);animation:cycleAmbientB 31s ease-in-out infinite alternate}
.cycle-media-fallback i:nth-child(3){left:20%;bottom:-96%;background:rgba(104,72,255,.56);animation:cycleAmbientC 29s ease-in-out infinite alternate}
.cycle-media-fallback i:nth-child(4){right:2%;bottom:-108%;background:rgba(233,58,184,.40);animation:cycleAmbientD 37s ease-in-out infinite alternate}
@keyframes cycleAmbientA{0%{transform:translate3d(0,0,0) scale(.98)}50%{transform:translate3d(12%,18%,0) scale(1.16)}100%{transform:translate3d(24%,30%,0) scale(1.08)}}
@keyframes cycleAmbientB{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-10%,12%,0) scale(1.14)}100%{transform:translate3d(-20%,24%,0) scale(1.04)}}
@keyframes cycleAmbientC{0%{transform:translate3d(0,0,0) scale(.94)}50%{transform:translate3d(8%,-12%,0) scale(1.12)}100%{transform:translate3d(-8%,-20%,0) scale(1.02)}}
@keyframes cycleAmbientD{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6%,-10%,0) scale(1.12)}100%{transform:translate3d(-12%,-24%,0) scale(1.08)}}
.cycle-media-label{position:absolute;left:22px;right:22px;bottom:16px;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;color:rgba(221,230,244,.78);font-size:.49rem;letter-spacing:.13em;text-transform:uppercase;text-shadow:0 1px 8px #000}
.cycle-media-label b{font-weight:800;color:#9aa8bd}.cycle-hero[data-live-canvas-state="live"] .cycle-media-label b{color:#a7f36b}
.cycle-progress-copy{position:relative;z-index:5}
@media(max-width:680px){.brand-mark.brand-mark-canvas{width:34px;height:34px;flex-basis:34px;border-radius:10px}.cycle-hero{min-height:194px;padding:16px 16px 14px}.cycle-title{margin-top:30px!important}.cycle-media-label{left:16px;right:16px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.cycle-media-fallback i{animation:none!important}.cycle-media-fallback,#cycle-live-canvas{transition:none!important}}


/* Stage 10D.4f — live generation fidelity.
   In live mode the generation canvas is shown without a full-surface tint.
   Foreground copy remains legible via text shadow rather than image treatment. */
.cycle-hero[data-live-canvas-state="live"] .cycle-hero-shade{
  opacity:0;
  background:none;
}
.cycle-hero[data-live-canvas-state="live"] #cycle-live-canvas{
  opacity:1;
  filter:none;
  mix-blend-mode:normal;
}
.cycle-hero[data-live-canvas-state="live"] .card-topline,
.cycle-hero[data-live-canvas-state="live"] .cycle-title,
.cycle-hero[data-live-canvas-state="live"] .cycle-media-label{
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    0 3px 12px rgba(0,0,0,.82),
    0 8px 28px rgba(0,0,0,.58);
}
.cycle-hero[data-live-canvas-state="live"] .cycle-title strong{
  -webkit-text-stroke:1px rgba(0,0,0,.24);
}


/* Stage 10D.4g — native live-art stage.
   The generation frame defines the upper-card geometry instead of being letterboxed inside it. */
.cycle-hero{
  aspect-ratio:var(--cycle-art-aspect,3 / 2);
  min-height:0;
  height:auto;
  box-sizing:border-box;
  padding:20px 22px 18px;
}
.cycle-hero[data-live-canvas-state="live"]{
  background:#050811;
}
.cycle-hero[data-live-canvas-state="live"] #cycle-live-canvas{
  width:100%;
  height:100%;
}
.cycle-hero[data-live-canvas-state="live"] #cycle-media-mode{
  display:none;
}
.cycle-hero[data-live-canvas-state="live"] .cycle-media-label{
  justify-content:flex-end;
  pointer-events:none;
}
.cycle-hero[data-live-canvas-state="live"] .card-topline,
.cycle-hero[data-live-canvas-state="live"] .cycle-title,
.cycle-hero[data-live-canvas-state="live"] .cycle-media-label{
  color:#fff;
}
.cycle-hero[data-live-canvas-state="live"] .card-topline{
  text-shadow:0 1px 2px rgba(0,0,0,1),0 3px 12px rgba(0,0,0,.92),0 10px 28px rgba(0,0,0,.72);
}
.cycle-hero[data-live-canvas-state="live"] .cycle-title{
  margin-top:auto!important;
  position:absolute;
  left:22px;
  bottom:28px;
  z-index:5;
  color:rgba(255,255,255,.94);
  text-shadow:0 2px 3px rgba(0,0,0,1),0 5px 18px rgba(0,0,0,.95),0 12px 34px rgba(0,0,0,.78);
}
.cycle-hero[data-live-canvas-state="live"] .cycle-title strong{
  font-size:clamp(4.8rem,7vw,6.55rem);
  color:#fff;
  -webkit-text-stroke:1px rgba(0,0,0,.32);
}
.cycle-hero[data-live-canvas-state="live"] .cycle-media-label{
  left:auto;
  right:22px;
  bottom:18px;
  width:auto;
  text-shadow:0 1px 2px rgba(0,0,0,1),0 3px 12px rgba(0,0,0,.92);
}
.cycle-hero[data-live-canvas-state="live"] .cycle-media-label b{
  color:#b8ff7a;
}
@media(max-width:680px){
  .cycle-hero{aspect-ratio:var(--cycle-art-aspect,3 / 2);min-height:0;padding:16px}
  .cycle-hero[data-live-canvas-state="live"] .cycle-title{left:16px;bottom:24px}
  .cycle-hero[data-live-canvas-state="live"] .cycle-title strong{font-size:clamp(4.1rem,22vw,5.5rem)}
  .cycle-hero[data-live-canvas-state="live"] .cycle-media-label{right:16px;bottom:14px}
}