@layer features {
/* Zao Moves as music (2026-10-07). The page is a record in tracks; the loops are a mix; each partnership is two
   waves coming into step. Every wave is a rung: the sea flows (M6) and breathes (M8), the dividers grow taller
   track by track (M7), the interference figures settle into step (M4: what fires together wires together).
   Text stays at 12px and above, every control at 44px, and reduced motion keeps each still. */

.zw{--zw-amber:#fde2b0}

/* ---------- the opening: a sea of five waves under the name ---------- */
.zw-hero{position:relative;overflow:hidden;isolation:isolate}
.zw-sea{position:absolute;left:0;right:0;bottom:0;width:100%;height:36%;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%)}
.zw-hero.hero-short{padding-bottom:calc(72px + 12svh)}
.zw-hero::before{content:"";position:absolute;inset:0 -10%;z-index:-2;pointer-events:none;background:radial-gradient(46% 40% at 50% 64%,rgba(46,24,57,.75),transparent 72%)}
.zw-hero .hero-copy{position:relative}
.zw-kicker{display:inline-flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.zw-kicker li{min-height:32px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;border:1px solid rgba(196,206,255,.2);background:rgba(5,11,32,.5);font:600 13px/1 var(--voice);color:var(--ink)}

/* ---------- tracks ---------- */
.zw-track{max-width:980px;margin:0 auto;padding:clamp(56px,10vw,104px) 18px 0}
.zw-track>h2{margin:0 0 16px;font:650 clamp(1.7rem,5vw,2.8rem)/1.12 var(--voice);letter-spacing:-.01em;color:var(--ink)}
.zw-track>.eyebrow{margin-bottom:12px}
.zw-lede{margin:0 0 24px;max-width:52ch;color:var(--ink-2);font-size:1.08rem;line-height:1.65}
.zw-lede strong{color:var(--ink)}
.zw-note{margin:14px 0 0;font:500 13px/1.5 var(--voice);color:var(--ink-2)}
.zw-src{color:var(--sys-text,#9cc3ef);font:500 13px/1.4 var(--voice);text-decoration:underline;text-underline-offset:3px}

/* ---------- dividers: a wave that grows track by track ---------- */
.zw-div{height:60px;margin:clamp(40px,7vw,72px) 0 0;overflow:hidden;pointer-events:none}
.zw-div svg{display:block;width:100%;height:100%;overflow:visible}
.zw-div polyline{fill:none;stroke:rgba(var(--zc,192,132,252),.55);stroke-width:1.6;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px rgba(var(--zc,192,132,252),.45));animation:zwDrift 11s linear infinite}
.zw-div:not(.awake) polyline{animation-play-state:paused}
@keyframes zwDrift{to{transform:translateX(-400px)}}

/* ---------- quotes, in their own words ---------- */
.zw .quotes{margin:6px 0 0}
.zw-more{margin:18px 0 0}

/* ---------- the mix: the loop map's chips as channel strips ---------- */
.zw-mix .lm-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:760px){.zw-mix .lm-chips{grid-template-columns:repeat(3,minmax(0,1fr))}}
.zw-together .lm-chips{grid-template-columns:minmax(0,1fr)!important}
.zw-mix .lm-edge.dashed path{stroke-dasharray:7 7}
.zw-mix .lm-flow{font:600 14px var(--voice);letter-spacing:0}
.zw-mix .lm-node.proposed rect{stroke-dasharray:6 5}
.zw-mix .lm-fold{margin-top:14px}
.zw-now{margin:14px 0 0;padding:16px 16px 14px;border-radius:18px;border:1px solid rgba(196,206,255,.16);background:rgba(10,14,40,.6)}
.zw-now .zw-now-k{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;margin:0 0 6px;font:600 12.5px/1.3 var(--voice);letter-spacing:.08em;color:var(--label)}
.zw-now b{font:650 1.08rem/1.3 var(--voice);letter-spacing:0;color:var(--zw-amber)}
.zw-now b.B{color:#f3b3a9}
.zw-now p{margin:0;color:var(--ink);line-height:1.6}
.zw-now.idle p{color:var(--ink-2)}
.zw-mix .lm-chip{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:92px;padding:12px 12px 30px;border-radius:18px;text-align:left;font:600 14px/1.3 var(--voice);overflow:hidden}
.zw-mix .lm-chip b{font-size:15px}
.zw-mix .lm-chip::before{content:"";position:absolute;left:0;right:0;bottom:6px;height:20px;opacity:.7;background-repeat:repeat-x;background-size:60px 20px;animation:zwStrip 3.4s linear infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M0 10 Q15 0 30 10 T60 10' fill='none' stroke='%23d8b4fe' stroke-width='1.6'/%3E%3C/svg%3E")}
.zw-mix .lm-chip.B::before{animation:none;opacity:.8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M0 10 Q7 6 15 6 H45 Q53 6 60 10' fill='none' stroke='%23f3b3a9' stroke-width='1.6'/%3E%3C/svg%3E")}
.zw-mix .lm-chip[aria-pressed="true"]::before{opacity:1;animation-duration:1.6s}
.zw-mix .lm-chip::after{content:attr(data-state);display:block;font:500 12.5px/1.35 var(--voice);color:var(--ink-2)}
.zw-mix:not(.awake) .lm-chip::before{animation-play-state:paused}
@keyframes zwStrip{to{background-position-x:-60px}}

/* ---------- what you have not heard yet ---------- */
.zw-unseen{display:grid;gap:14px;margin:6px 0 0;padding:0;list-style:none;counter-reset:u}
.zw-unseen>li{position:relative;counter-increment:u;padding:22px 20px 18px;border-radius:var(--r-card);border:1px solid rgba(253,194,111,.32);background:radial-gradient(120% 100% at 0% 0%,rgba(253,194,111,.08),transparent 55%),var(--glass-solid);box-shadow:var(--sheen)}
.zw-unseen>li::before{content:"HIDDEN TRACK " counter(u);display:block;margin:0 0 10px;font:600 12.5px/1 var(--voice);letter-spacing:.12em;color:var(--zw-amber)}
.zw-unseen h3{margin:0 0 10px;font:650 clamp(1.2rem,3.6vw,1.6rem)/1.3 var(--voice);color:var(--ink)}
.zw-unseen p{margin:0 0 10px;color:var(--ink-2);line-height:1.6}
.zw-unseen .zw-test{color:var(--ink);font-size:.98rem}
.zw-unseen .zw-test b{color:var(--zw-amber);font-weight:600}

/* ---------- the core ---------- */
.zw-core{position:relative;padding:24px 20px;border-radius:var(--r-card);border:1px solid rgba(243,179,169,.4);background:radial-gradient(110% 90% at 100% 0%,rgba(232,120,106,.1),transparent 60%),var(--glass-solid);box-shadow:var(--sheen)}
.zw-core h3{margin:0 0 10px;font:650 clamp(1.25rem,3.8vw,1.75rem)/1.28 var(--voice);color:var(--ink)}
.zw-core p{margin:0 0 12px;color:var(--ink-2);line-height:1.62}
.zw-core p strong{color:var(--ink)}
.zw-meter{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center;margin:14px 0 0}
.zw-meter span{font:600 12.5px/1.2 var(--voice);color:var(--ink-2)}
.zw-meter i{position:relative;display:block;height:10px;border-radius:6px;background:rgba(196,206,255,.1);overflow:hidden}
.zw-meter i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,50%);border-radius:6px;background:linear-gradient(90deg,#c084fc,#f18ac6)}
.zw-meter i.zw-cap::after{background:linear-gradient(90deg,#f3b3a9,#e8786a)}

/* ---------- moves ---------- */
.zw-moves{display:grid;gap:10px;margin:6px 0 0;padding:0;list-style:none}
.zw-moves>li{border-radius:18px;border:1px solid rgba(196,206,255,.14);background:rgba(255,255,255,.025)}
.zw-moves details>summary{display:grid;grid-template-columns:58px minmax(0,1fr);gap:4px 14px;align-items:start;padding:16px 16px;cursor:pointer;list-style:none;min-height:44px}
.zw-moves details>summary::-webkit-details-marker{display:none}
.zw-rung{grid-row:span 2;display:grid;place-items:center;width:58px;height:44px;border-radius:14px;border:1px solid rgba(192,132,252,.5);font:650 12.5px/1.1 var(--voice);text-align:center;color:var(--ink)}
.zw-rung.hi{border-color:rgba(253,194,111,.75);color:var(--zw-amber);box-shadow:0 0 18px -8px rgba(253,194,111,.8)}
.zw-moves summary b{font:650 1.08rem/1.35 var(--voice);color:var(--ink)}
.zw-moves summary span{color:var(--ink-2);line-height:1.5}
.zw-moves details[open]>summary b{color:var(--zw-amber)}
.zw-moves dl{margin:0;padding:0 16px 16px 88px}
.zw-moves dt{margin:10px 0 2px;font:600 12.5px/1.3 var(--voice);letter-spacing:.08em;color:var(--label)}
.zw-moves dd{margin:0;color:var(--ink);line-height:1.55}
@media (max-width:520px){.zw-moves dl{padding-left:16px}}

/* ---------- the monthly tide (Dash) ---------- */
.zw-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 18px}
@media (min-width:760px){.zw-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.zw-tile{padding:14px 14px 12px;border-radius:18px;border:1px solid rgba(156,195,239,.24);background:rgba(10,14,40,.55)}
.zw-tile b{display:block;font:650 clamp(1.3rem,4vw,1.8rem)/1.1 var(--voice);color:var(--ink)}
.zw-tile b.amber{color:var(--zw-amber)}
.zw-tile span{display:block;margin-top:6px;font:500 12.5px/1.35 var(--voice);color:var(--ink-2)}
.zw-panel{margin:14px 0 0;padding:22px 20px;border-radius:var(--r-card);border:1px solid rgba(var(--pc,156,195,239),.34);background:radial-gradient(120% 100% at 0% 0%,rgba(var(--pc,156,195,239),.09),transparent 58%),var(--glass-solid);box-shadow:var(--sheen)}
.zw-panel h3{margin:0 0 8px;font:650 clamp(1.15rem,3.4vw,1.5rem)/1.3 var(--voice);color:var(--ink)}
.zw-panel>p{margin:0 0 12px;color:var(--ink-2);line-height:1.62}
.zw-panel dl{margin:8px 0 0}
.zw-panel dt{margin:12px 0 3px;font:600 12.5px/1.3 var(--voice);letter-spacing:.08em;color:var(--label)}
.zw-panel dd{margin:0;color:var(--ink);line-height:1.58}
.zw-steps{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:s}
.zw-steps li{counter-increment:s;position:relative;padding:0 0 0 34px;color:var(--ink);line-height:1.55}
.zw-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(var(--pc,156,195,239),.6);font:650 12.5px/1 var(--voice);color:var(--ink)}
.zw-ints{display:grid;gap:10px;margin:8px 0 0;padding:0;list-style:none}
.zw-ints li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:14px;border-radius:16px;border:1px solid rgba(196,206,255,.14);background:rgba(255,255,255,.02)}
.zw-ints b{font:650 1.02rem/1.35 var(--voice);color:var(--ink)}
.zw-ints span{grid-column:1/-1;color:var(--ink-2);line-height:1.55}
.zw-pill{align-self:start;padding:5px 10px;border-radius:999px;font:600 12px/1 var(--voice);white-space:nowrap;border:1px solid rgba(156,195,239,.5);color:#d8effc}
.zw-pill.build{border-color:rgba(192,132,252,.55);color:#e4ccff}
.zw-pill.live{border-color:rgba(134,239,172,.55);color:#c9f7d8}

/* ---------- interference: two waves come into step ---------- */
.zw-int{margin:6px 0 18px;padding:16px 16px 12px;border-radius:var(--r-card);border:1px solid rgba(196,206,255,.14);background:rgba(5,11,32,.55)}
.zw-int-grid{display:grid;grid-template-columns:92px minmax(0,1fr);gap:0 12px;align-items:stretch}
.zw-int-names{display:grid;grid-template-rows:70fr 60fr 80fr;align-items:center}
.zw-int-names span{font:600 12.5px/1.2 var(--voice);color:var(--ink)}
.zw-int-names span:last-child{color:var(--zw-amber)}
.zw-int-stage{position:relative;height:160px}
.zw-int-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.zw-lane{fill:none;stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linecap:round}
.zw-lane-0{stroke:#f18ac6}
.zw-lane-1{stroke:rgb(var(--pc,156,195,239))}
.zw-lane-2{stroke:#fff1d6;stroke-width:2.4;filter:drop-shadow(0 0 calc(var(--sum,0) * 9px) rgba(253,194,111,.85))}
.zw-int-cap{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;margin:8px 0 0}
.zw-int-cap p{margin:0;font:500 13px/1.45 var(--voice);color:var(--ink-2)}
.zw-int.in-step .zw-int-cap p{color:var(--ink)}
.zw-int button{min-height:44px;padding:0 14px;border-radius:14px;border:1px solid rgba(196,206,255,.22);background:rgba(255,255,255,.03);color:var(--ink);font:600 13px/1 var(--voice);cursor:pointer}
.zw-int button:focus-visible{outline:2px solid rgba(253,194,111,.9);outline-offset:2px}

/* ---------- the honest line on each partnership ---------- */
.zw-status{display:block;margin:0 0 14px;padding:12px 14px;border-radius:14px;border:1px solid rgba(253,194,111,.3);background:rgba(253,194,111,.05);color:var(--ink);font:500 14.5px/1.5 var(--voice)}
.zw-status b{display:block;margin:0 0 4px;color:var(--zw-amber);font:600 12.5px/1.3 var(--voice);letter-spacing:.1em;text-transform:uppercase}

/* ---------- one word, three projects ---------- */
.zw-word{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 0;padding:0;list-style:none}
.zw-word li{padding:14px 12px;border-radius:16px;border:1px solid rgba(196,206,255,.16);background:rgba(255,255,255,.025);text-align:center}
.zw-word b{display:block;font:650 1.02rem/1.25 var(--voice);color:var(--ink);overflow-wrap:anywhere}
.zw-word span{display:block;margin-top:4px;font:500 12.5px/1.35 var(--voice);color:var(--ink-2)}
.zw-word em{font-style:normal;color:var(--zw-amber)}

/* ---------- the tracklist ---------- */
.zw-tracks{margin:30px 0 0;padding:18px 18px 8px;border-radius:var(--r-card);border:1px solid rgba(196,206,255,.14);background:rgba(5,11,32,.55)}
.zw-tracks .eyebrow{margin:0 0 8px}
.zw-tracks ol{margin:0;padding:0;list-style:none;display:grid;gap:0}
@media (min-width:760px){.zw-tracks ol{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px}}
.zw-tracks a{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--ink);text-decoration:none;font:600 15px/1.3 var(--voice);border-bottom:1px solid rgba(196,206,255,.08)}
.zw-tracks b{font:600 13px/1 var(--voice);color:var(--zw-amber);min-width:22px}
.zw-tracks a:hover,.zw-tracks a:focus-visible{color:var(--zw-amber)}

/* ---------- the monthly tide ---------- */
.zw-tide{margin:4px 0 0;max-width:620px}
.zw-tide svg{display:block;width:100%;height:auto;overflow:visible}
.zw-tide-line{fill:none;stroke:url(#zwTide);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(192,132,252,.55))}
.zw-tide-tick{stroke:rgba(196,206,255,.35);stroke-width:1.4;stroke-dasharray:4 5}
.zw-tide-now{fill:#d8effc}
.zw-tide-crest{fill:#fde2b0;filter:drop-shadow(0 0 8px rgba(253,194,111,.9))}
.zw-tide text{fill:#c4c4e6;font:600 22px/1 var(--voice)}
.zw-disclose{margin-top:14px}
.zw-sources{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.zw-sources li{color:var(--ink-2);line-height:1.5}
.zw-panel code{font:600 .92em/1 var(--mono,monospace);color:var(--ink);background:rgba(196,206,255,.08);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){
  .zw-div polyline,.zw-mix .lm-chip::before{animation:none!important}
}
}