/* YukoDSP — shared: base, top bar (Logic-like transport + LCD), phone menu, page transitions */
@font-face{font-family:"Tracker Mono Pixel";src:url(../fonts/tracker-mono-pixel.woff2)format("woff2");font-weight:400;font-display:block}
:root{--yuko-1:#ffbee3;--yuko-2:#ffe2ff;--yuko-3:#dcb5fb;--line:#e3e3e3;--ease:cubic-bezier(.2,.8,.2,1)}
/* the page colour behind the content is what iPhone Safari paints under the clock and below the page: the soft pink
   of the glow at the top, and the footer's grey once the footer is in view (site.js sets html.at-foot).
   No text autosizing: iOS would otherwise enlarge long paragraphs (About) above the 17px the plugin pages use. */
html{scroll-behavior:smooth;background:#fff8fc;-webkit-text-size-adjust:100%;text-size-adjust:100%;transition:background-color .3s}
html.at-foot{background:#f5f5f7}
body{margin:0;background:#fff;color:#000;font-family:'Inter',sans-serif;letter-spacing:-0.064em;-webkit-font-smoothing:antialiased}
/* the tracking is set on every element, not inherited: inherited it would arrive in the body's pixels and run
   tighter on small text. :where() keeps it at zero specificity, so any rule that sets its own tracking still wins */
:where(*){letter-spacing:-0.064em}
/* big bold headings and plugin names keep the tighter -0.088em of the YukoDSP wordmark (set in each page's css) */
:where(h1,h2,h3,.text .lead,.pitch .lead,.plate .nm b,.next b,.more b,.card b,.item) :where(*){letter-spacing:inherit}   /* words inside them (spans, names) follow the heading */
a{color:#000;text-decoration:none}
button{font-family:inherit;letter-spacing:-0.064em;color:#000}   /* iOS Safari paints button text system blue otherwise */
.page-root{position:relative;width:100%;overflow:clip}

/* very soft blurred brand glow at the top of every page */
.glow{position:absolute;left:0;right:0;top:0;height:min(1500px,100%);overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%)}
.glow i{position:absolute;border-radius:50%}
.glow i:nth-child(1){left:-10%;top:-180px;width:55%;height:630px;background:var(--yuko-1);opacity:.22;filter:blur(120px)}
.glow i:nth-child(2){right:-12%;top:90px;width:50%;height:585px;background:var(--yuko-3);opacity:.2;filter:blur(130px)}
.glow i:nth-child(3){left:25%;top:630px;width:55%;height:585px;background:var(--yuko-2);opacity:.45;filter:blur(120px)}

/* mascot (left) and Sign up (right) stay pinned; the transport + LCD in the centre scrolls away with the page */
.fl{position:fixed;top:0;z-index:11;height:64px;display:flex;align-items:center}
.fl.l{left:max(16px,2.2vw)}
.fl.r{right:max(16px,2.2vw);gap:calc(max(16px,2.2vw) - 7px)}
.brand{display:block;line-height:0;border-radius:8px}
.brand:focus-visible{outline:2px solid #000;outline-offset:4px}
.mascot-nav{display:block;height:40px;width:auto}
.logo-nav{display:block;height:32px;width:auto}
.cta{display:inline-flex;align-items:center;gap:8px;height:38px;box-sizing:border-box;padding:0 18px 1px 20px;border-radius:38px;background:var(--yuko-1);color:#000;font-size:clamp(15px,1.1vw,17px);font-weight:700;letter-spacing:-0.064em;transition:background .15s,color .15s}
.cta:hover{background:#000;color:#fff}
.cta:focus-visible{outline:2px solid #000;outline-offset:3px}
.burger{display:none;background:none;border:0;padding:0;cursor:pointer;width:40px;height:40px;place-content:center;gap:6px;margin-right:-7px;border-radius:50%}
.burger i{display:block;width:26px;height:2px;border-radius:2px;background:#000;transition:transform .25s,opacity .2s}
.burger.open i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.burger:focus-visible{outline:2px solid #000;outline-offset:2px}

.top{position:absolute;top:0;left:0;right:0;z-index:10;height:64px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.ctrl{display:flex;align-items:center;gap:10px;pointer-events:auto}
/* transport: one shared shape; the engaged button fills its half edge to edge, like Logic */
.tp{display:flex;height:44px;border-radius:14px;overflow:hidden;background:rgba(0,0,0,.05)}
.tp button{display:grid;place-items:center;width:46px;height:100%;padding:0;border:0;border-radius:14px;background:transparent;color:rgba(0,0,0,.75);cursor:pointer;transition:background .15s,color .15s}
.tp button:hover{background:rgba(0,0,0,.05);color:#000}
.tp button.on{background:rgba(0,0,0,.1);color:#000}
.tp button:focus-visible{outline:2px solid #000;outline-offset:-2px}
.lcd{display:flex;align-items:stretch;height:44px;padding:0 6px;border-radius:14px;background:#000;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.lcd>a,.nav-i>a{display:flex;align-items:center;padding:0 calc(clamp(10px,1.1vw,16px) + .032em) 0 calc(clamp(10px,1.1vw,16px) - .032em);font-size:clamp(15px,1.1vw,17px);font-weight:700;letter-spacing:-0.064em;color:#fff;transition:color .15s}
.lcd>a+a,.lcd>a+.nav-i>a,.nav-i+.nav-i>a{box-shadow:-1px 0 0 rgba(255,255,255,.12)}
.lcd>a.on,.lcd>a:hover,.nav-i>a.on,.nav-i:hover>a,.nav-i:focus-within>a{color:var(--yuko-1)}
.lcd>a:focus-visible,.nav-i>a:focus-visible{outline:none;text-decoration:underline;text-underline-offset:6px}

/* hover menus: the black LCD bar itself grows downwards. All four menus sit side by side on one strip inside it;
   the tab under the pointer slides to the middle, in focus, the others wait at the sides, smaller and blurred.
   Rows and pink circles of the menu in focus pop in like the Instagram / YouTube pills on the home page (site.js) */
.lcd{position:relative}
.lcd:has(.mega){background:transparent;box-shadow:none}   /* the growing panel is the bar's background now */
.lcd>:not(.mega){position:relative;z-index:1}
.nav-i{display:flex}
.nav-i.cur>a{color:var(--yuko-1)}
.dd{display:none}
.mega{position:absolute;left:0;right:0;top:0;z-index:0;height:44px;border-radius:14px;background:#000;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);overflow:hidden;
  transition:height .32s cubic-bezier(.4,0,.2,1),border-radius .32s,box-shadow .32s}
.mega.open{border-radius:14px 14px 24px 24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px -20px rgba(150,70,130,.45),0 12px 24px -12px rgba(0,0,0,.35);
  transition:height .55s cubic-bezier(.3,1.25,.5,1),border-radius .4s var(--ease),box-shadow .4s}
.mega-strip{position:absolute;left:0;right:0;top:44px;bottom:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.mega-strip::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:rgba(255,255,255,.1)}
.grp{position:absolute;left:50%;top:10px;width:270px;margin-left:-135px;display:grid;gap:2px;transform-origin:50% 0;
  transition:transform .55s var(--ease),opacity .45s,filter .45s}
.mega.still .grp{transition:none}
.grp a{display:flex;align-items:center;gap:12px;padding:7px 14px 7px 7px;border-radius:16px;color:#fff;white-space:nowrap;transition:background .15s}
.grp a:hover,.grp a:focus-visible{background:rgba(255,255,255,.09);outline:none}
.grp a:hover b,.grp a:focus-visible b{color:var(--yuko-1)}
.grp.pop a{animation:ddrow .45s var(--ease) var(--dl,0s) both}
.grp a:nth-child(1){--dl:.05s}.grp a:nth-child(2){--dl:.11s}.grp a:nth-child(3){--dl:.17s}.grp a:nth-child(4){--dl:.23s}.grp a:nth-child(5){--dl:.29s}
/* Plugins: the lines (Shortcuts, more later) as small tabs; the chosen line's plugins show under them */
.dd-lines{display:flex;align-items:center;gap:6px;padding:0 4px 8px 7px}
.grp.pop .dd-lines{animation:ddrow .45s var(--ease) both}
.dd-lines button{height:26px;padding:0 calc(12px + .032em) 0 calc(12px - .032em);border:0;border-radius:26px;background:rgba(255,255,255,.09);color:rgba(255,255,255,.75);font-size:12px;font-weight:700;cursor:pointer;transition:background .25s var(--ease),color .25s}
.dd-lines button:not(:disabled):hover{background:rgba(255,255,255,.16);color:#fff}
.dd-lines button.on,.dd-lines button.on:hover{background:var(--yuko-1);color:#000}
.dd-lines button:disabled{background:none;color:rgba(255,255,255,.35);cursor:default}
.grp .dd-lines a.all{margin-left:auto;padding:0 6px;font-size:12px;font-weight:700;color:rgba(255,255,255,.5);animation:none;background:none}
.grp .dd-lines a.all:hover{color:var(--yuko-1)}
.dd-list{display:grid;gap:2px}
.dd-list[hidden]{display:none}
/* plugins still in the works: a body in their M1 colour with a little black screen */
.dd-ic.m1{background:var(--c)}
.dd-ic.m1 i{display:block;width:14px;height:10px;border-radius:3px;background:#101216;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.grp a.soon b{color:rgba(255,255,255,.7)}

@keyframes ddrow{from{opacity:0;transform:translateY(-6px)}}
.dd-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--yuko-1);color:#000;overflow:hidden}
.grp.pop .dd-ic{animation:ddpop .42s cubic-bezier(.3,1.5,.5,1) calc(var(--dl,0s) + .08s) both}
.grp.pop .dd-ic>*{animation:ddpop .35s cubic-bezier(.3,1.5,.5,1) calc(var(--dl,0s) + .22s) both}
@keyframes ddpop{from{opacity:0;transform:scale(0)}}
.dd-ic.pic{background:var(--yuko-2)}
.dd-ic img{display:block;width:26px;height:26px;object-fit:contain}
/* plugin renders are square photos on white: they fill the whole circle, zoomed in on the device */
.dd-ic.dev{background:#fff}
.dd-ic.dev img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;scale:1.9}
.dd-t{display:grid;gap:1px}
.dd-t b{font-size:15px;font-weight:700;line-height:1.2;transition:color .15s}
.dd-t small{font-size:12px;font-weight:500;line-height:1.2;letter-spacing:-0.04em;color:rgba(255,255,255,.5)}
.dd-ext{margin-left:auto;padding-left:10px;display:grid;color:rgba(255,255,255,.45)}
/* MICKEY BEAR Studio: the producer bear on white, his violet on hover */
.dd-ic.mb-ic{background:#fff}
.dd-ic.mb-ic img{width:22px;height:22px}
.grp a.mb:hover b,.grp a.mb:focus-visible b{color:#a260ff}
/* external links: the arrow is hidden until hover, then pops in on a circle (pink, violet for MICKEY BEAR) like the footer pills */
.grp a .dd-ext{position:relative;width:22px;height:22px;margin:0 -1px 0 auto;padding:0;place-items:center;color:#000}
.grp a .dd-ext::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--yuko-1);transform:scale(0);transition:transform .2s ease-in}
.grp a .dd-ext svg{position:relative;opacity:0;transform:scale(.3);transition:opacity .12s,transform .12s ease-in}
.grp a:hover .dd-ext::before,.grp a:focus-visible .dd-ext::before{transform:scale(1);transition:transform .38s cubic-bezier(.3,1.5,.5,1) .12s}
.grp a:hover .dd-ext svg,.grp a:focus-visible .dd-ext svg{opacity:1;transform:scale(1);transition:opacity .2s .3s,transform .32s cubic-bezier(.3,1.5,.5,1) .3s}
.grp a.mb .dd-ext{color:#fff}
.grp a.mb .dd-ext::before{background:#a260ff}
.grp a.mb:hover,.grp a.mb:focus-visible{background:rgba(162,96,255,.16)}
.lcd .clock{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 14px 0 8px;box-shadow:1px 0 0 rgba(255,255,255,.12);font-variant-numeric:tabular-nums;white-space:nowrap}
.lcd .clock b,.lcd .clock small,.lcd .meta{font-family:"Tracker Mono Pixel",ui-monospace,monospace;font-weight:400;letter-spacing:.04em}   /* MICKEY BEAR's own pixel face, tracking 40 */
.lcd .clock b{font-size:15px;line-height:1;color:#fff}
.lcd .clock small{font-size:11px;line-height:1;color:rgba(255,255,255,.6)}
.lcd .meta{display:flex;align-items:center;gap:10px;padding:0 10px 0 14px;box-shadow:-1px 0 0 rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.6);white-space:nowrap}

/* phones: the sections move into a side menu */
.scrim{position:fixed;inset:0;z-index:8;background:rgba(255,255,255,.3);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.scrim.open{opacity:1;visibility:visible;transition:opacity .3s}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:9;width:min(88vw,420px);box-sizing:border-box;display:flex;flex-direction:column;padding:64px 28px 28px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);border-left:1px solid rgba(0,0,0,.06);transform:translateX(102%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s}
.drawer.open{transform:none;visibility:visible;transition:transform .45s var(--ease)}
.drawer nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px}
.item{font-size:34px;font-weight:700;line-height:1.2;letter-spacing:-0.088em;color:#000;transition:color .15s}
.item:hover,.item:focus-visible,.item.on{color:var(--yuko-1);outline:none}
.drawer-foot{font-size:14px;font-weight:500;letter-spacing:-0.064em;color:rgba(0,0,0,.55)}

/* black pill with the download arrow (plugins, Hub) */
.get{flex:none;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 calc(22px + .032em) 0 18px;border-radius:48px;background:#000;color:#fff;font-size:16px;font-weight:700;letter-spacing:-0.064em;transition:background .15s,color .15s}
.get:hover{background:var(--yuko-1);color:#000}
.get:focus-visible{outline:2px solid #000;outline-offset:3px}

/* page transitions, like mickeybear.studio's focus pull: the page comes in out of a soft blur, a touch larger, and settles.
   Leaving, it blurs out again before the next page loads. The mascot, Sign up and the control bar stay put. */
/* main is its own layer above the background glow: otherwise the glow sits over the panels as soon as the pull
   animation (whose transform lifts main) ends, which reads as a flicker */
main{position:relative;z-index:0;animation:pull 1.1s cubic-bezier(.2,.7,.2,1) .05s backwards}
@keyframes pull{from{filter:blur(14px);opacity:0;transform:scale(1.04)}}
/* the background visuals sit outside main, so they fade with it: otherwise they stay alone on screen between pages */
.viz{animation:vizin 1.1s cubic-bezier(.2,.7,.2,1) .05s backwards}
@keyframes vizin{from{opacity:0}}
html.leaving .viz{opacity:0;transition:opacity .34s cubic-bezier(.4,0,1,1)}
html.leaving main{filter:blur(14px);opacity:0;transform:scale(.985);transition:filter .34s cubic-bezier(.4,0,1,1),opacity .34s cubic-bezier(.4,0,1,1),transform .34s cubic-bezier(.4,0,1,1)}
/* no cross-document View Transitions: Safari runs the pull under its snapshot and then shows the blur again for a
   frame when the snapshot goes, a visible flicker. The header sits outside main, so it stays put without them. */

@media (max-width:900px){
.ctrl{display:none}
.burger{display:grid}
.cta{height:34px;padding:0 14px;font-size:15px}
.mascot-nav{height:34px}
.logo-nav{height:28px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
main{animation:none}
html.leaving main,html.leaving .viz{transition:none}
.viz{animation:none}
.mega,.grp{transition:none !important}.grp.pop a,.grp.pop .dd-ic,.grp.pop .dd-ic>*{animation:none !important}
}
[hidden]{display:none !important}
/* Inter's -0.064em tracking leaves a negative gap after the last letter, so centred labels in pills and badges
   sit a hair right of centre. Badges with digits drop the tracking; pills give the right side that gap back. */
.num{letter-spacing:0;font-variant-numeric:tabular-nums}

/* while the page is scrolled, the band under the pinned mascot and Sign up slides down and blurs what passes beneath it:
   strongest at the very top, easing to nothing about 110px down (stacked layers, each blurring a lower band less) */
.topblur{position:fixed;left:0;right:0;top:0;height:110px;z-index:9;pointer-events:none}
/* --tb (0..1) follows the first 160px of scroll, eased, from site.js. Opacity and movement sit on the blur layers
   themselves: on the parent they would make it a backdrop root, and the layers would have nothing left to blur */
.topblur i{position:absolute;inset:0;opacity:var(--tb,0);transform:translateY(calc((var(--tb,0) - 1) * 60%))}
.topblur i:nth-child(1){-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);-webkit-mask-image:linear-gradient(#000 0%,#000 60%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 60%,transparent 100%)}
.topblur i:nth-child(2){-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-mask-image:linear-gradient(#000 0%,#000 40%,transparent 75%);mask-image:linear-gradient(#000 0%,#000 40%,transparent 75%)}
.topblur i:nth-child(3){-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-mask-image:linear-gradient(#000 0%,#000 20%,transparent 50%);mask-image:linear-gradient(#000 0%,#000 20%,transparent 50%)}
.topblur i:nth-child(4){-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask-image:linear-gradient(#000 0%,transparent 28%);mask-image:linear-gradient(#000 0%,transparent 28%)}
/* the Yuko mark in front of every "Hub", like "Apple iPhone": sits on the text, a touch taller than the capitals */
.hubmark{white-space:nowrap}
.hubmark img{display:inline-block;width:auto;height:1.12em;margin-right:.02em;vertical-align:-.24em}
/* the ® after MICKEY BEAR: small and raised, like on mickeybear.studio */
.reg{position:relative;top:-.55em;margin-left:.06em;font-size:.55em;line-height:0;letter-spacing:0}

/* footer, Apple-style: the MICKEY BEAR logo, a note, columns of links, the legal text, then the copyright line.
   Same -0.064em tracking as the rest of the site; only the legal text runs at 0 */
.foot{position:relative;background:#f5f5f7;color:rgba(0,0,0,.56);font-size:13px;font-weight:500;line-height:1.45}
.foot-in{max-width:1320px;margin:0 auto;padding:28px max(16px,2.2vw) 28px;box-sizing:border-box}
.foot a{color:rgba(0,0,0,.72);transition:color .15s}
.foot a:hover{color:#f08bc0}   /* every footer link lights up pink, like the email */
/* links to MICKEY BEAR: like the home Instagram/YouTube pills, a black pill with his violet circle and arrow.
   Padding is taken back by negative margins, so the text around never moves */
.foot a.mbl{position:relative;display:inline-block;padding:3px 9px;margin:-3px -9px;line-height:18px;border-radius:12px;transition:background .15s,color .15s,padding .3s var(--ease),margin .3s var(--ease)}
.foot a.mbl:hover,.foot a.mbl:focus-visible{background:#000;color:#fff;padding-right:27px;margin-right:-27px;outline:none}
/* the circle sits 3px in from the pill's top, bottom and end: 18px circle in a 24px pill */
.foot .mbl .ext{position:absolute;right:3px;top:3px;width:18px;height:18px;display:grid;place-items:center;color:#fff}
/* the bottom-right site link grows to the left, so the arrow comes in on its left */
.foot a.mbl.l:hover,.foot a.mbl.l:focus-visible{padding-right:9px;margin-right:-9px;padding-left:27px;margin-left:-27px}
.foot .mbl.l .ext{right:auto;left:3px}
.foot .mbl .ext::before{content:"";position:absolute;inset:0;border-radius:50%;background:#a260ff;transform:scale(0);transition:transform .2s ease-in}
.foot .mbl .ext svg{position:relative;display:block;opacity:0;transform:scale(.3);transition:opacity .12s,transform .12s ease-in}
.foot a.mbl:hover .ext::before,.foot a.mbl:focus-visible .ext::before{transform:scale(1);transition:transform .38s cubic-bezier(.3,1.5,.5,1) .12s}
.foot a.mbl:hover .ext svg,.foot a.mbl:focus-visible .ext svg{opacity:1;transform:scale(1);transition:opacity .2s .3s,transform .32s cubic-bezier(.3,1.5,.5,1) .3s}
.foot a:focus-visible{outline:2px solid #000;outline-offset:2px;border-radius:2px}
.foot-logo{display:inline-block;line-height:0;margin-bottom:18px}
.foot-logo img{display:block;height:30px;width:auto}
.foot-note{margin:0;padding-bottom:16px;border-bottom:1px solid #d2d2d7;text-align:justify}
.foot-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;padding:24px 0 26px}
.foot-col h3{margin:0 0 10px;font-size:13px;font-weight:700;color:#000}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-legal{padding:16px 0;border-top:1px solid #d2d2d7;font-size:11px;line-height:1.5;letter-spacing:0}
.foot-legal *:not(.reg){letter-spacing:0}
.foot-legal{text-align:justify}
.foot-legal p{display:inline;margin:0}   /* one justified flow, like mickeybear.studio: both edges sit on the footer's side insets */
.foot-low{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid #d2d2d7;font-size:12px}
.foot-low p{margin:0}
@media (max-width:900px){
.foot-cols{grid-template-columns:1fr 1fr;gap:28px 16px}
.foot-low{flex-direction:column;align-items:flex-start;gap:8px}
}

/* page displays (js/viz.js): drawn like the home spectrum, behind the content, moved by the transport */
.viz{position:absolute;display:block;pointer-events:none;z-index:0}
.viz-scope{left:0;bottom:0;width:100%;height:120px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent),linear-gradient(to top,transparent 0,#000 40px);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent),linear-gradient(to top,transparent 0,#000 40px);mask-composite:intersect}
.viz-xy{left:50%;top:min(50%,52vh);width:min(860px,92vw);height:min(860px,92vw);transform:translate(-50%,-50%);opacity:.75;filter:blur(1.6px)}   /* softened so it stays behind the text */
.viz-comp{left:0;bottom:0;width:100%;height:240px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 92%,transparent)}
.viz-spec{left:0;bottom:0;width:100%;height:46%;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 48px);mask-image:linear-gradient(to top,transparent 0,#000 48px)}
.viz-spec.top{top:0;bottom:auto;height:520px;opacity:.6;filter:blur(1.6px);-webkit-mask-image:linear-gradient(to top,transparent 0,#000 160px);mask-image:linear-gradient(to top,transparent 0,#000 160px)}
/* running text is justified edge to edge, like the footer note; headings, captions and centred intros stay as they are */
.text p:not(.lead),.dash-note,.steps li p,.pitch p:not(.lead),.blk p.sub,.play .side p,.feat p,.step p{text-align:justify}