/* funniimusic. Flat, quiet and exact: one ground, one ink, the funnii violet on the action. Rubik throughout.
   Fragments of the real product (marked data-ui in the HTML) keep the product's own conventions: small radii, 1px control edges. */
@font-face{font-family:Rubik;src:url(fonts/Rubik-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Rubik;src:url(fonts/Rubik-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:Rubik;src:url(fonts/Rubik-Bold.ttf) format("truetype");font-weight:700;font-display:swap}

:root{
  --bg:#0f0d17; --surface:#171424; --field:#211d33;
  --ink:#f2f0f9; --muted:#aaa4c2;
  --accent:#7c5cff; --on-accent:#0b0912; --accent-text:#9a82ff;
  --m:clamp(20px,2.4vw,36px);                       /* the one page margin, both sides */
  --ease:cubic-bezier(.16,1,.3,1);
  --step-display:clamp(2.6rem,8.4vw,8rem);          /* the five sizes */
  --step-statement:clamp(1.75rem,4.4vw,3.5rem);
  --step-title:1.75rem;
  --step-body:1.0625rem;
  --step-small:.9375rem;
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#f0eef6; --surface:#e6e3ef; --field:#d9d5e6;
  --ink:#14111f; --muted:#4d4866; --accent-text:#4a2fd0;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);font:500 var(--step-body)/1.55 Rubik,system-ui,sans-serif;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;
  scrollbar-color:var(--field) var(--bg);accent-color:var(--accent)}
::selection{background:var(--accent);color:var(--on-accent)}
body{--page:color-mix(in srgb,var(--bg),var(--surface) calc(var(--tone,0) * 100%));min-height:100svh;display:flex;flex-direction:column;background:var(--page)}   /* --tone is set from the scroll, so sections change tone without an edge */
main{flex:1}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
img{display:block;max-width:100%;height:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pad{padding-inline:var(--m)}

/* ---- the bar: wordmark, two links, the theme switch */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;padding-inline:var(--m)}
.mark{font-weight:700;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.mark b{color:var(--accent-text);font-weight:700}
.top .mark{font-size:1.25rem}
.top__r{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px)}
.top nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px)}
.top nav a{font-weight:600;font-size:var(--step-small);text-decoration:none;color:var(--muted);transition:color 150ms var(--ease)}
.top nav a:hover,.top nav a[aria-current="page"]{color:var(--ink)}
/* the Dark / Light tray, as in the plugins' Appearance setting: an accent thumb slides to the chosen side, then that side carries the fill */
.mode{position:relative;display:flex;gap:2px;height:32px;padding:3px;border-radius:11px;background:var(--surface)}
.mode__thumb{position:absolute;left:3px;top:3px;bottom:3px;width:calc(50% - 3px);border-radius:8px;background:var(--accent);transition:transform 200ms var(--ease)}
.mode[data-on="light"] .mode__thumb{transform:translateX(calc(100% + 2px))}
.mode button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;min-width:76px;height:26px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--muted);font:600 .75rem/1 Rubik,sans-serif;cursor:pointer;transition:color 150ms var(--ease)}
.mode button:hover:not([aria-pressed="true"]){color:var(--ink)}
.mode button[aria-pressed="true"]{color:var(--on-accent)}
.mode button.settled{background:var(--accent)}
.mode svg{flex:none}
@media (max-width:520px){.mode button{min-width:38px;padding:0 9px}.mode button span{display:none}}

/* ---- buttons: flat, square, one fill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:0;background:var(--accent);color:var(--on-accent);
  font:600 1rem/1 Rubik,sans-serif;text-decoration:none;cursor:pointer;transition:transform 120ms var(--ease),background-color 150ms var(--ease)}
.btn:hover{background:#9279ff}
.btn:active{transform:translateY(1px)}
.btn--quiet{background:var(--field);color:var(--ink)}
.btn--quiet:hover{background:var(--surface)}
.btn--small{min-height:36px;padding:0 14px;font-size:var(--step-small)}
.link{color:var(--ink);text-underline-offset:4px;text-decoration-thickness:1px}
.link:hover{color:var(--accent-text)}

/* ---- headlines */
h1,h2,h3{text-wrap:balance}
.display{font-size:var(--step-display);font-weight:700;line-height:.98;letter-spacing:-.035em}
.statement{font-size:var(--step-statement);font-weight:600;line-height:1.1;letter-spacing:-.025em}
h3,.title{font-size:var(--step-title);font-weight:600;line-height:1.15;letter-spacing:-.015em}
.lede{font-size:var(--step-body);color:var(--ink);max-width:40ch}
.muted{color:var(--muted)}

/* ---- the first screen */
.hero{position:sticky;top:0;z-index:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--m);row-gap:36px;align-content:center;min-height:calc(100svh - 72px);padding:24px var(--m) 72px}   /* stays while the next section slides over it */
.hero h1{grid-column:1/-1}
@media (min-width:1000px){.hero h1{grid-column:1/9}}
.hero .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero .line>span{display:block}
.hero__side{grid-column:1/-1;display:grid;gap:14px;align-content:start}
@media (min-width:1000px){.hero__side{grid-column:9/13;grid-row:1;align-self:center}}
.hero.is-covered{position:relative;visibility:hidden}
.hero h1,.hero__lede,.hero__next{transform:translate3d(0,calc(var(--hp,0) * -50px),0) scale(calc(1 - var(--hp,0) * .05));transform-origin:left top;opacity:calc(1 - var(--hp,0) * 1.15)}
.hero__side{transform:translate3d(0,calc(var(--hp,0) * -36px),0);opacity:calc(1 - var(--hp,0) * 1.3)}
.hero__lede{grid-column:1/-1}
@media (min-width:1000px){.hero__lede{grid-column:1/7}}
.hero__next{grid-column:1/-1;display:grid;gap:14px;max-width:56ch}
.hero__next p{color:var(--ink)}
.hero__next:empty{display:none}

/* ---- the live controls (fragments of the product, so they keep its small radius and 1px edge) */
.chip{display:grid;gap:10px;padding:14px 16px;background:var(--surface);border-radius:10px}
.chip__k{font-size:var(--step-small);color:var(--muted)}
.chip__v{font-weight:600}
.seg{display:flex;gap:2px;padding:3px;background:var(--bg);border-radius:8px}
.seg button{flex:1;border:0;background:none;padding:9px 8px;border-radius:6px;font:600 var(--step-small)/1 Rubik,sans-serif;color:var(--muted);cursor:pointer;transition:background-color 150ms var(--ease),color 150ms var(--ease)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.seg button:hover:not([aria-pressed="true"]){color:var(--ink)}
@media (min-width:1000px){
  .hero__side .chip:nth-child(1){transform:rotate(-2deg)}
  .hero__side .chip:nth-child(2){transform:rotate(1.6deg);margin-left:24px}
}
.cmd{display:flex;align-items:flex-start;gap:12px;width:100%;max-width:64ch;padding:10px 10px 10px 14px;background:var(--field);border-radius:10px}
.cmd code{flex:1;min-width:0;padding-block:5px;font:500 .8rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);overflow-wrap:anywhere;user-select:all}

/* ---- how it works: a held stage; the installer shows each step as you scroll */
.how{position:relative;z-index:1;height:460svh;background:var(--surface)}   /* the last 100svh is the cover: the next section slides over the held stage */
.how__pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);will-change:transform,opacity}
.how__text{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:calc(var(--m) + 8px) var(--m) var(--m)}
.how__slides{display:grid}
.how__slide{grid-area:1/1;display:grid;gap:20px;align-content:start;will-change:transform,opacity}
.how__clause{font-size:clamp(2.25rem,4.6vw,4.75rem);font-weight:700;line-height:1;letter-spacing:-.03em;max-width:12ch}
.how__detail{color:var(--muted);max-width:46ch;font-size:var(--step-body)}
.how__names{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.how__names button{position:relative;border:0;border-top:4px solid var(--field);background:none;padding:12px 0 0;text-align:left;font:600 var(--step-body)/1.2 Rubik,sans-serif;color:var(--muted);cursor:pointer;transition:color 200ms var(--ease)}
.how__names button::before{content:"";position:absolute;left:0;top:-4px;width:100%;height:4px;background:var(--accent);transform:scaleX(var(--f,0));transform-origin:left}
.how__names button[aria-current="step"]{color:var(--ink)}
.how__names button:hover{color:var(--ink)}
.how__field{position:relative;overflow:hidden;background:var(--field)}
.frag{position:absolute;inset:0;will-change:transform,opacity}
.frag--install{display:grid;align-content:center;justify-items:start;gap:16px;padding:var(--m)}
.frag--install .install{max-width:560px}
.appframe{position:absolute;left:var(--m);top:var(--m);width:900px;height:700px;transform-origin:0 0;border-radius:12px;overflow:hidden;background:var(--bg)}
.appframe iframe{width:900px;height:700px;border:0;display:block;pointer-events:none}   /* a picture of the app: the wheel scrolls the page, never the frame */
@media (max-width:820px){
  .how__pin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}   /* the title first, so the curtain reaches the picture before it reaches the words */
  .how__text{padding:20px var(--m) var(--m)}
  .how__clause{font-size:clamp(1.9rem,9vw,2.6rem)}
  .how__names{gap:6px}
  .how__names button{font-size:var(--step-small)}
}
html:not(.js) .how{height:auto}
html:not(.js) .how__pin{position:static;height:auto}
html:not(.js) .how__field{min-height:320px}
html:not(.js) .frag--install{position:static}
html:not(.js) .how__slide:not(:first-child){display:none}

/* ---- play them first: a held stage; each plugin's editor wipes in as you scroll */
.work{position:relative;z-index:2;height:330svh;margin-top:-100svh;background:var(--bg)}   /* slides up over the held stage above; its own last 100svh is covered in turn */
.work__pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);will-change:transform,opacity}
.work__text{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:calc(var(--m) + 8px) var(--m) var(--m)}
.work__text h2{font-size:clamp(2.75rem,6.2vw,6rem);font-weight:700;line-height:.95;letter-spacing:-.04em}
.work__text .lede{margin-top:20px;color:var(--muted)}
.work__index{list-style:none;display:grid;gap:2px}
.work__index button{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;min-height:52px;border:0;background:none;padding:8px 0;text-align:left;font:600 1.75rem/1.1 Rubik,sans-serif;color:var(--muted);cursor:pointer;transition:color 200ms var(--ease)}
.work__index button small{font-size:var(--step-small);font-weight:500}
.work__index button[aria-current="true"],.work__index button:hover{color:var(--ink)}
.work__stage{position:relative;overflow:hidden;background:var(--surface)}
.shot{position:absolute;inset:0;display:grid;place-items:center;padding:var(--m);overflow:hidden}
.shot img{will-change:transform}
.shot img{width:min(100%,860px);border-radius:12px}
.shot__go{position:absolute;left:var(--m);bottom:var(--m)}
@media (max-width:820px){
  .work{height:380svh}
  .work__pin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .work__text{padding:20px var(--m) 16px;gap:12px}
  .work__text h2{font-size:clamp(2.6rem,13vw,3.6rem)}
  .work__text .lede{display:none}
  .work__index button{font-size:1.25rem;min-height:44px}
}
html:not(.js) .work{height:auto}
html:not(.js) .work__pin{position:static;height:auto}
html:not(.js) .shot{position:static;clip-path:none;padding:var(--m)}

/* ---- the lineup: a narrow column of two-ended rows */
.lineup{position:relative;z-index:3;margin-top:-100svh;background:var(--page);display:grid;grid-template-columns:minmax(0,1fr);padding:clamp(96px,12vw,160px) var(--m) clamp(32px,5vw,64px)}
@media (min-width:1000px){.lineup{grid-template-columns:22% minmax(0,1fr)}.lineup>*{grid-column:2}.lineup .rows{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px)}}
.lineup h2{font-size:1.75rem;font-weight:600;letter-spacing:-.015em;margin-bottom:28px}
.rows{list-style:none;display:grid;grid-template-columns:minmax(0,1fr)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:9px 0;min-height:44px;align-items:baseline}
.row__name{font-weight:600;text-decoration:none}
a.row__name:hover{color:var(--accent-text)}
.row__desc{grid-column:1;font-size:var(--step-small);color:var(--muted)}
.row__val{grid-column:2;grid-row:1;font-size:var(--step-small);color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}

/* ---- the close: a statement and one action */
.close{display:grid;gap:28px;justify-items:start;padding:clamp(72px,9vw,140px) var(--m)}
.close .statement{max-width:24ch}
.close__row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.close{position:relative}
.close__stats{color:var(--muted);font-size:var(--step-small)}
.close [data-discord-icon]{display:none}
@media (min-width:1000px){.close [data-discord-icon]:not([hidden]){display:block;position:absolute;right:var(--m);top:50%;width:clamp(180px,22vw,320px);height:auto;aspect-ratio:1;transform:translateY(-50%);border-radius:28px;background:var(--field)}}

/* ---- the footer: one quiet line */
.foot{display:grid;grid-template-columns:1fr auto 1fr;gap:16px 24px;align-items:baseline;padding:clamp(48px,7vw,96px) var(--m) 30px;font-size:var(--step-small);color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:center}
.foot nav a{color:var(--ink);text-decoration:none}
.foot nav a:hover{color:var(--accent-text)}
.foot span:last-child{text-align:right}
@media (max-width:760px){.foot{grid-template-columns:1fr;gap:8px;padding-top:80px}.foot nav{justify-content:flex-start}.foot span:last-child{text-align:left}}

/* ---- inner pages */
.head{display:grid;gap:20px;padding:clamp(40px,7vw,96px) var(--m) clamp(32px,5vw,64px)}
.head h1{font-size:clamp(2.6rem,8vw,7rem);font-weight:700;line-height:.98;letter-spacing:-.035em}
.head .lede{color:var(--muted)}
.head__text{display:grid;gap:20px;align-content:center}
@media (min-width:900px){.head--split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--m);align-items:center}.head--split .picture{margin-top:0}}
.band{padding:clamp(48px,8vw,112px) var(--m)}
.split{display:grid;gap:28px 64px}
@media (min-width:900px){.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.split>div:first-child{display:grid;gap:14px;align-content:start}
.split h2{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:700;line-height:1.05;letter-spacing:-.03em}
.prose{display:grid;gap:14px;max-width:62ch}
.prose p{color:var(--muted)}
.prose p:first-child{color:var(--ink)}
.prose a{color:var(--ink);text-underline-offset:4px}

/* demo window on the plugin pages */
.demo{position:relative;width:100%;max-width:var(--demo-max,1000px);aspect-ratio:var(--ar,640/460);margin-inline:auto;overflow:hidden;background:var(--bg);border-radius:12px}
.demo iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;display:block}
.demobar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;max-width:var(--demo-max,1000px);margin:16px auto 0;color:var(--muted);font-size:var(--step-small)}
.demobar .note{flex:1 1 220px}
.hint{display:none;margin-top:10px;font-size:var(--step-small);color:var(--muted)}
@media (max-width:640px){.hint{display:block}}
.stagefield{padding:clamp(20px,4vw,56px) var(--m)}
.gestures{display:grid;grid-template-columns:auto 1fr;gap:12px 28px;margin-top:8px;align-items:baseline}
.gestures dt{font-weight:600;white-space:nowrap}
.gestures dd{color:var(--muted);font-size:var(--step-small)}
@media (max-width:560px){.gestures{grid-template-columns:1fr;gap:2px}.gestures dd{margin-bottom:10px}}

/* ---- downloads */
.install{display:grid;gap:16px;align-content:start;justify-items:start;min-width:0;width:100%}
.install__os{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.install__body{min-width:0;width:100%;min-height:var(--h,0)}   /* as tall as the tallest system, so choosing another never moves the page */
.os-pane{display:none;gap:12px;justify-items:start;align-content:start;min-width:0}
.os-pane.on,.os-pane.measure{display:grid}
.install__steps{font-size:1rem;color:var(--muted);max-width:60ch}
.install__steps a,.install__all a,.catalog a:not(.btn){color:var(--ink);text-underline-offset:3px}
.install__detected{display:none;font-size:var(--step-small);color:var(--muted)}
.install__detected[data-on]{display:inline}
.install__all{font-size:var(--step-small);color:var(--muted)}
.steps{display:grid;gap:10px;padding-left:1.2em;max-width:56ch;font-size:1rem}
.steps li{padding-left:6px}
.steps li::marker{color:var(--accent-text);font-weight:600}
.tray{--n:2;--on:0;position:relative;display:flex;gap:2px;padding:3px;background:var(--bg);border-radius:8px}
.tray .opt{flex:1;min-width:72px;padding:9px 12px;border:0;border-radius:6px;background:none;font:600 var(--step-small)/1 Rubik,sans-serif;color:var(--muted);cursor:pointer;transition:background-color 150ms var(--ease),color 150ms var(--ease)}
.tray .opt.on{background:var(--accent);color:var(--on-accent)}
.tray .opt:hover:not(.on){color:var(--ink)}
.manual details{background:var(--surface)}
.manual summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 var(--m);font-weight:600;cursor:pointer;list-style:none}
.manual summary::-webkit-details-marker{display:none}
.manual summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform 200ms var(--ease)}
.manual details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.manual__count{margin-left:auto;margin-right:16px;font-weight:500;font-size:var(--step-small);color:var(--muted)}
.manual__body{display:grid;gap:12px;padding:8px var(--m) 32px}
.catalog{list-style:none;display:grid;max-width:760px}
.catalog__row{display:grid;gap:12px 24px;padding:16px 0;align-items:center}
@media (min-width:720px){.catalog__row{grid-template-columns:minmax(0,1fr) auto}}
.catalog__main{display:grid;gap:2px;justify-items:start}
.catalog h3{font-size:1.25rem}
.catalog__fmt{font-size:var(--step-small);color:var(--muted)}
.catalog__links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:4px;font-size:var(--step-small);font-weight:600}
.catalog__act{display:flex;align-items:center;gap:10px}

/* ---- Discord and contact */
.discord{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 28px}
.discord__id{display:flex;align-items:center;gap:18px;min-width:0}
.discord__icon{flex:none;width:64px;height:64px;border-radius:14px;background:var(--field)}
.discord__icon[hidden]{display:none}
.discord__stats{color:var(--muted);font-size:var(--step-small)}
.contact{list-style:none;display:grid;max-width:760px}
.contact li{display:grid;gap:6px 24px;padding:18px 0;align-items:center}
@media (min-width:720px){.contact li{grid-template-columns:minmax(0,1fr) auto auto}}
.contact h3{font-size:1.25rem}
.contact__addr{font-weight:600;text-underline-offset:4px;overflow-wrap:anywhere}

/* ---- the music dock */
.dock{position:fixed;right:var(--m);bottom:var(--m);z-index:40;display:flex;align-items:center;gap:12px;height:48px;padding:6px 14px 6px 6px;background:var(--field);border-radius:999px}
.dock[hidden]{display:none}
.dock__btn{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer;transition:background-color 150ms var(--ease)}
.dock__btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.dock__btn svg{grid-area:1/1}
.dock__btn .i-pause{display:none}
.dock__btn[aria-pressed="true"] .i-play{display:none}
.dock__btn[aria-pressed="true"] .i-pause{display:block}
.dock__vol{width:84px;height:20px;cursor:pointer}
.dock__meter{display:flex;align-items:flex-end;gap:3px;width:27px;height:20px}
.dock__meter i{display:block;width:3px;height:100%;background:var(--accent-text);transform-origin:bottom;transform:scaleY(.12)}

/* ---- the entrance: the name and one click */
html.entrance-pending{overflow:hidden}
html.entrance-pending body>:not(.entrance):not(script){visibility:hidden}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
.entrance{position:fixed;inset:0;z-index:100;background:var(--bg);opacity:1;transition:opacity 360ms var(--ease),visibility 0s}
.entrance.leaving{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 360ms var(--ease),visibility 0s linear 360ms}
.entrance__go{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:28px;width:100%;border:0;background:none;color:var(--ink);cursor:pointer;font:inherit}
.entrance__go .mark{font-size:clamp(2.8rem,10vw,7rem);line-height:1;letter-spacing:-.035em}
.entrance__cta{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;background:var(--accent);color:var(--on-accent);font:600 1rem/1 Rubik,sans-serif;transition:background-color 150ms var(--ease)}
.entrance__go:hover .entrance__cta,.entrance__go:focus-visible .entrance__cta{background:#9279ff}
.entrance__go:focus-visible{outline:none}
.entrance__skip{position:absolute;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:10px 16px;border:0;background:none;color:var(--muted);font:600 var(--step-small)/1 Rubik,sans-serif;cursor:pointer}
.entrance__skip:hover{color:var(--ink)}

.d0{--i:0}.d1{--i:1}.d2{--i:2}.d3{--i:3}
.discord__dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--accent-text)}
.discord__sep{margin-inline:8px}
.siblings{display:flex;flex-wrap:wrap;gap:10px;padding-block:clamp(40px,6vw,80px) 0}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--m)}
.tile{display:grid;gap:12px;align-content:start;text-decoration:none}
.tile img{width:100%;height:auto;border-radius:12px}
.tile span{font-weight:600}
.tile:hover span{color:var(--accent-text)}
.picture{width:100%;max-width:860px;border-radius:12px;margin-top:24px}
.band .statement{margin-bottom:clamp(24px,3vw,40px);max-width:24ch}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.gestures+p{margin-top:24px}

/* the theme reveal: no default crossfade; the new theme is revealed as a circle from the switch (assets/site.js) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ---- motion: arrivals in reading order, one masked headline, nothing hidden without script */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease),transform 700ms var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js [data-reveal].in{opacity:1;transform:none}
.js .hero .line>span{transform:translateY(110%);transition:transform 900ms var(--ease)}
.js .hero .line:nth-child(2)>span{transition-delay:110ms}
.js.loaded .hero .line>span{transform:none}
.js .hero [data-load]{opacity:0;transform:translateY(16px);transition:opacity 700ms var(--ease),transform 700ms var(--ease);transition-delay:calc(450ms + var(--i,0) * 90ms)}
.js.loaded .hero [data-load]{opacity:1;transform:none}
main{transition:opacity 150ms var(--ease)}
html.nav-leave main{opacity:0}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js .hero [data-load],.js .hero .line>span{opacity:1;transform:none;transition:none}
  .tray .opt,.btn,.mode__thumb,.entrance,.entrance.leaving,main{transition:none}
  .hero__side .chip{transform:none!important}
  .dock__meter{display:none}
}
@media (max-width:480px){.top nav{gap:12px}.top__r{gap:12px}}