/* YukoDSP — home: hero (bars, playhead, "play", live spectrum) and the plugin workspace */
/* hero */
.mascot{display:block;height:1.3em;width:auto;margin:-0.15em 0}
/* the hero logo and its line grow a touch under the pointer and settle back with a soft spring */
.lockup{display:flex;flex-direction:column;align-items:center;transition:scale .6s cubic-bezier(.3,1.4,.5,1)}
.lockup:hover{scale:1.05}
.hero{position:relative;min-height:900px;overflow:clip;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:112px 24px 48px;box-sizing:border-box}
/* bar lines start invisible at the very top and fade in under the bar, then fade out again towards the bottom */
.bars{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 96px,#000 45%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 96px,#000 45%,transparent 100%)}
.bars span{border-left:1px solid rgba(0,0,0,.06);padding:80px 0 0 8px;font-family:"Tracker Mono Pixel",ui-monospace,monospace;font-size:11px;font-weight:400;letter-spacing:.04em;color:rgba(0,0,0,.4)}
.bars span:first-child{border-left:0}
.playhead{position:absolute;top:0;bottom:0;left:0;width:1px;background:linear-gradient(to bottom,transparent 0,#000 96px,#000 45%,transparent 100%);opacity:.35;pointer-events:none}
.word{position:absolute;left:50%;top:50%;transform:translate(calc(-50% - .032em),-60%);margin:0;font-size:max(280px,54vw);font-weight:700;line-height:1;letter-spacing:-0.064em;color:#ffbee3;white-space:nowrap;pointer-events:none;user-select:none}
.spec{position:absolute;left:0;right:0;bottom:0;width:100%;height:58%;pointer-events:none;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 48px);mask-image:linear-gradient(to top,transparent 0,#000 48px)}
.dot{position:absolute;border-radius:50%;pointer-events:none;animation:float 7s ease-in-out infinite}
.dot.p{background:radial-gradient(circle at 35% 30%,#fff 0,#ffbee3 45%,#ff9fd2 100%)}
.dot.l{background:radial-gradient(circle at 35% 30%,#fff 0,#e9d3fd 45%,#c79af5 100%)}
.dot.k{background:#000}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.social{position:absolute;left:max(36px,3.6vw);top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;display:flex;gap:12px;z-index:2}
.social a{display:inline-flex;align-items:center;padding:10px 6px;border-radius:20px;font-size:13px;font-weight:700;letter-spacing:-0.064em;transition:background .15s,color .15s,padding .3s var(--ease)}
.social a:hover{background:#000;color:#fff;padding-top:6px;padding-bottom:6px}
/* external link: on hover the pill makes room, a pink circle grows out of its own centre, then the arrow appears */
.social .ext{position:relative;display:grid;place-items:center;width:20px;height:0;margin-top:0;color:#000;transition:height .3s var(--ease),margin .3s var(--ease)}
.social .ext::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--yuko-1);transform:scale(0);transition:transform .2s ease-in}
.social .ext svg{position:relative;opacity:0;transform:rotate(180deg) scale(.3);transition:opacity .12s,transform .12s ease-in}   /* rotate undoes the column's 180° turn so the arrow points up-right */
.social a:hover .ext,.social a:focus-visible .ext{height:20px;margin-top:8px}
.social a:hover .ext::before,.social a:focus-visible .ext::before{transform:scale(1);transition:transform .38s cubic-bezier(.3,1.5,.5,1) .12s}
.social a:hover .ext svg,.social a:focus-visible .ext svg{opacity:1;transform:rotate(180deg) scale(1);transition:opacity .2s .3s,transform .32s cubic-bezier(.3,1.5,.5,1) .3s}
.social a:focus-visible{outline:2px solid #000;outline-offset:3px}
.down{display:grid;place-items:end center;width:56px;height:44px;margin-top:clamp(16px,1.8vw,28px);border-radius:12px}
.down svg{display:block;animation:nudge 2.4s cubic-bezier(.45,0,.25,1) infinite}
.down:focus-visible{outline:2px solid #000;outline-offset:2px}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media (prefers-reduced-motion:reduce){.down svg,.ray i,.dot,.playhead{animation:none}html{scroll-behavior:auto}}

/* plugins = a little workspace of open plugin windows: Logic's plugin window, drawn as a macOS 26 glass window in our shapes */
.desk{position:relative;isolation:isolate;height:840px;border-radius:38px;border:1px solid rgba(0,0,0,.08);background:radial-gradient(circle,rgba(0,0,0,.09) 1px,transparent 1.2px) 0 0/24px 24px,rgba(255,255,255,.35);overflow:hidden;touch-action:pan-y}
.win{position:absolute;width:340px;display:flex;flex-direction:column;border-radius:38px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:0 0 0 .5px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.9),0 40px 80px -30px rgba(150,70,130,.38),0 14px 30px -16px rgba(0,0,0,.18);transition:box-shadow .25s,width .3s cubic-bezier(.2,.8,.2,1)}
.win.front{box-shadow:0 0 0 .5px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.9),0 50px 90px -30px rgba(150,70,130,.48),0 18px 36px -16px rgba(0,0,0,.24)}
.win.big{width:600px}
/* compact window (default): power + preset only, smaller footer; the arrow in the title bar opens the full editor */
.win:not(.big) .tools{gap:10px;padding:0 12px 10px}
.win:not(.big) .tools .pw{width:40px;height:40px}
.win:not(.big) .tools .pw svg{width:18px;height:18px}
.win:not(.big) .r2{display:none}
.win:not(.big) .preset{width:100%}
.win:not(.big) .body{margin:0 10px;border-radius:24px}
.win:not(.big) .wfoot{padding:12px 12px 12px 18px}
.win:not(.big) .wfoot h3{font-size:22px}
.win:not(.big) .wfoot p{font-size:12px}
.win:not(.big) .more{width:40px;height:40px}
.win:not(.big) .get{height:40px;padding:0 calc(16px + .032em) 0 13px;gap:8px;font-size:14px}
.win:not(.big) .get svg{width:15px;height:15px}
.bar .pop svg{transition:transform .3s}
.win.big .bar .pop svg{transform:rotate(180deg)}
.win.drag{transition:none;cursor:grabbing}
.bar{position:relative;display:flex;align-items:center;height:52px;padding:0 22px;cursor:grab;user-select:none;touch-action:none}
.lights{display:flex;gap:8px}
.lights button{width:13px;height:13px;padding:0;border:0;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18);display:grid;place-items:center}
.lights button svg{opacity:0;transition:opacity .12s}
.lights:hover button svg{opacity:.6}
.lights button:focus-visible{outline:2px solid #000;outline-offset:2px}
.win:not(.front) .lights button{background:#d9d4d8 !important}
.bar .ttl{position:absolute;left:50%;transform:translateX(-50%);font-size:14px;font-weight:700;letter-spacing:-0.064em;white-space:nowrap}
.bar .pop{margin-left:auto;width:30px;height:30px;padding:0;border:0;border-radius:10px;display:grid;place-items:center;background:transparent;color:rgba(0,0,0,.6);cursor:pointer}
.bar .pop:hover{background:rgba(0,0,0,.06);color:#000}
.bar .pop:focus-visible{outline:2px solid #000;outline-offset:2px}
/* Logic's plugin header: big round power button, preset menu on top, the edit buttons under it, View on the right */
.tools{display:flex;align-items:center;gap:14px;padding:2px 16px 14px}
.tools .pw{flex:none;width:58px;height:58px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.08);color:rgba(0,0,0,.45);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 14px -8px rgba(0,0,0,.35);transition:background .15s,color .15s}
.tools .pw.on{background:#ffbee3;color:#000}
.tools .pw:focus-visible{outline:2px solid #000;outline-offset:3px}
.rows{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.r2{display:flex;align-items:center;gap:6px}
.preset{width:62%;height:30px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-radius:11px;background:rgba(0,0,0,.05);font-size:13px;font-weight:500;letter-spacing:-0.064em;color:rgba(0,0,0,.55)}
.seg{display:inline-flex;height:30px;border-radius:11px;background:rgba(0,0,0,.05);overflow:hidden}
.seg i{display:grid;place-items:center;min-width:28px;padding:0 9px;box-sizing:border-box;font-style:normal;font-size:13px;font-weight:500;letter-spacing:-0.064em;color:rgba(0,0,0,.75);white-space:nowrap}
.seg i+i{box-shadow:-1px 0 0 rgba(0,0,0,.06)}
.r2 .sp{flex:1}
.r2 .lbl{font-size:13px;font-weight:500;letter-spacing:-0.064em;color:rgba(0,0,0,.55)}
.body{position:relative;margin:0 12px;aspect-ratio:1/0.78;border-radius:28px;overflow:hidden;border:1px solid #e3e3e3}
.body img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:filter .3s,opacity .3s}
.win.byp .body img{filter:grayscale(1);opacity:.55}
.byp-tag{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);height:28px;display:none;align-items:center;padding:0 12px;border-radius:28px;background:rgba(255,255,255,.8);font-size:13px;font-weight:700;letter-spacing:-0.064em}
.win.byp .byp-tag{display:inline-flex}
.wfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 16px 16px 24px}
.wfoot h3{margin:0;font-size:30px;font-weight:700;line-height:1;letter-spacing:-0.088em}
.wfoot p{margin:5px 0 0;font-size:14px;font-weight:500;letter-spacing:-0.064em;color:rgba(0,0,0,.55)}
.wfoot .acts{display:flex;align-items:center;gap:6px}
.more{width:48px;height:48px;display:grid;place-items:center;border-radius:48px;background:rgba(0,0,0,.05);transition:background .15s}
.more:hover{background:rgba(0,0,0,.1)}
.more:focus-visible{outline:2px solid #000;outline-offset:2px}
.get{flex:none;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px 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:#ffbee3;color:#000}
.get:focus-visible{outline:2px solid #000;outline-offset:3px}
.win.shade .tools,.win.shade .body,.win.shade .wfoot{display:none}
/* closed windows wait in a small dock at the bottom of the workspace */
.dock{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:6px;padding:6px;border-radius:22px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 10px 24px -12px rgba(0,0,0,.25)}
.dock button{height:36px;display:inline-flex;align-items:center;gap:8px;padding:0 calc(14px + .032em) 0 6px;border:0;border-radius:16px;background:transparent;font:inherit;font-size:14px;font-weight:700;letter-spacing:-0.064em;cursor:pointer}
.dock button:hover{background:rgba(0,0,0,.06)}
.dock button:focus-visible{outline:2px solid #000;outline-offset:2px}
.dock img{width:26px;height:26px;border-radius:9px;object-fit:cover}
/* plugin lines: chips that filter the workspace (js/home.js) */
.lines{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 14px}
.lines button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 calc(18px + .032em) 0 calc(18px - .032em);border:0;border-radius:40px;background:rgba(0,0,0,.05);color:#000;font-size:15px;font-weight:700;cursor:pointer;transition:background .35s var(--ease),color .35s}
.lines button:not(:disabled):hover{background:rgba(0,0,0,.09)}
.lines button.on,.lines button.on:hover{background:var(--yuko-1)}
.lines button:disabled{color:rgba(0,0,0,.35);cursor:default;background:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.lines .n{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:22px;background:rgba(0,0,0,.08);font-size:12px;letter-spacing:0;font-variant-numeric:tabular-nums}
.lines button.on .n{background:#000;color:#fff}
.line-about{color:#000}
.line-about:empty{display:none}
/* windows of other lines fade and sink away; the chosen line's windows rise back in (delays set in js) */
.win{transition:box-shadow .25s,width .5s cubic-bezier(.2,.8,.2,1),opacity .35s var(--ease),transform .5s cubic-bezier(.3,1.3,.5,1)}
/* expand / collapse / shade (home.js morph): the height eases, the content clipped to it, the new controls fade up */
.win.morph{overflow:clip;transition:box-shadow .25s,width .5s cubic-bezier(.2,.8,.2,1),height .5s cubic-bezier(.2,.8,.2,1),opacity .35s var(--ease),transform .5s cubic-bezier(.3,1.3,.5,1)}
.win.morph .tools,.win.morph .body,.win.morph .wfoot{animation:winfill .45s var(--ease) backwards}
@keyframes winfill{from{opacity:0;transform:translateY(-6px)}}
.win.out{opacity:0;transform:translateY(24px) scale(.94);pointer-events:none;transition-duration:.25s}
.hint{margin:0 0 20px;font-size:15px;font-weight:500;letter-spacing:-0.064em;color:rgba(0,0,0,.55)}

@media (max-width:900px){
.social{display:none}
/* on a phone the hero is taller than the screen and Safari's bottom bar covers its lower part: the lockup and
   the word go up 40px to sit in the middle of what is visible; the arrow stays where it is */
.lockup{translate:0 -40px}
.word{margin-top:-40px}
/* on a phone the expanded window keeps the compact footer, so Download stays inside the window */
.win.big .wfoot{padding:12px 12px 12px 18px}
.win.big .wfoot h3{font-size:22px}
.win.big .wfoot p{font-size:12px}
.win.big .more{width:40px;height:40px}
.win.big .get{height:40px;padding:0 calc(16px + .032em) 0 13px;gap:8px;font-size:14px}
.win.big .get svg{width:15px;height:15px}
.bars{grid-template-columns:repeat(6,minmax(0,1fr))}
.bars span:nth-child(n+7){display:none}
.desk{height:auto;display:flex;flex-direction:column;gap:20px;padding:16px;border-radius:28px}
.win{position:relative !important;left:auto !important;top:auto !important;width:auto !important}
.bar{cursor:default}
.r2{flex-wrap:wrap}
.preset{width:100%}
.dock{position:static;transform:none;align-self:center}
}
.body .shot{position:absolute;inset:0;z-index:1;border-radius:inherit}
.body .shot:focus-visible{outline:2px solid #000;outline-offset:-4px}
.byp-tag{z-index:2}