@font-face{font-family:"Inter Tight";src:url("assets/fonts/inter-tight-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";src:url("assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{--b8-bg:#000;--b8-ink:#f4f5f8;--b8-ink2:#c9ccd4;--b8-mute:#8e939e;--b8-line:#1d1f25;--b8-panel:#0c0d10;--b8-accent:#aab7f4;--b8-on-accent:#0b1030;--b8-font:"Inter Tight",ui-sans-serif,system-ui,-apple-system,sans-serif}
/* watereject — homepage. Everything is scoped under .we- so it can live inside a WordPress page.
   Hero rule: the tool is minimal (headline, speaker, one button). Sound options live in the settings sheet. */
:root{
  --we-bg:#000; --we-ink:#f4f5f8; --we-ink2:#c9ccd4; --we-mute:#8e939e; --we-dim:#767b86;
  --we-line:#1d1f25; --we-panel:#0c0d10; --we-panel2:#121318;
  --we-accent:#aab7f4; --we-blue1:#c4ceff; --we-blue2:#8193f2; --we-navy:#0b1030;
  --we-font:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --we-serif:"Instrument Serif",ui-serif,Georgia,serif;
  --we-spk:clamp(170px,calc(100svh - 490px),min(60vw,236px));
}
.we-body{margin:0;background:var(--we-bg);color:var(--we-ink);font-family:var(--we-font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.we-app{position:relative;overflow-x:clip;min-height:100svh;background:var(--we-bg)}
.we-app *,.we-app *::before,.we-app *::after{box-sizing:border-box}
.we-app button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.we-app :focus-visible{outline:2px solid var(--we-accent);outline-offset:3px;border-radius:10px}
.we-app a{color:var(--we-blue1)}
.we-app em{font-family:var(--we-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--we-accent)}

/* header */
.we-top{position:relative;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1120px;margin:0 auto;padding:14px 20px}
.we-logo{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--we-ink) !important}
.we-wm{font-size:23px;font-weight:800;letter-spacing:-.06em;line-height:1}
.we-wm b,.we-foot-big b{font-weight:800;color:var(--we-accent)}
/* the dot in ".live" is a water drop */
.we-dot{display:inline-block;width:.27em;height:.27em;margin:0 .07em 0 .1em;border-radius:0 50% 50% 50%;transform:rotate(45deg);
  background:linear-gradient(135deg,#ffffff,#aab7f4 45%,#6f80d8);box-shadow:0 0 .35em rgba(170,183,244,.55)}
.we-nav{display:none}
.we-top-r{display:flex;align-items:center;gap:8px}
.we-getapp{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px 0 12px;border-radius:999px;background:#fff;color:#000 !important;
  text-decoration:none;font-weight:600;font-size:14px;letter-spacing:-.01em;transition:transform .15s}
.we-getapp svg{width:16px;height:16px;margin-top:-2px}
.we-getapp:hover{transform:translateY(-1px)}
.we-app .we-menu-btn{display:grid;place-content:center;gap:6px;width:44px;height:44px;border-radius:50%;border:1px solid #24262d}
.we-menu-btn i{display:block;width:18px;height:1.8px;border-radius:2px;background:var(--we-ink);transition:transform .25s}
.we-menu-btn[aria-expanded=true] i:first-child{transform:translateY(3.9px) rotate(45deg)}
.we-menu-btn[aria-expanded=true] i:last-child{transform:translateY(-3.9px) rotate(-45deg)}
.we-menu{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:we-fade .2s ease}
.we-menu[hidden]{display:none}
.we-menu-in{margin:72px 12px 0;padding:8px 8px 10px;border-radius:24px;background:#0e0f13;border:1px solid #22242b;box-shadow:0 30px 60px -20px rgba(0,0,0,.9);animation:we-drop-in .28s cubic-bezier(.2,.8,.2,1)}
@keyframes we-drop-in{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.we-menu nav{display:flex;flex-direction:column}
.we-menu nav a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 14px;border-radius:14px;color:var(--we-ink) !important;text-decoration:none;font-size:18px;font-weight:600;letter-spacing:-.02em}
.we-menu nav a span{color:var(--we-dim);font-size:16px}
.we-menu nav a:active,.we-menu nav a:hover{background:#17191f}
.we-menu-app{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;margin:8px 6px 0;border-radius:999px;background:#fff;color:#000 !important;text-decoration:none;font-weight:700;font-size:16px}
.we-menu-app svg{width:18px;height:18px;margin-top:-2px}
.we-menu-open,.we-menu-open body{overflow:hidden}
@keyframes we-fade{from{opacity:0}}

/* ============ hero tool ============ */
.we-hero{position:relative;max-width:520px;margin:0 auto;padding:22px 20px 24px;text-align:center}
.we-hero>*:not(.we-liquid){position:relative;z-index:1}
/* liquid light: blurred glows drifting behind the hero */
.we-liquid{position:absolute;left:50%;top:-40px;z-index:0;width:min(980px,150vw);height:min(720px,110svh);transform:translateX(-50%);pointer-events:none;
  filter:blur(70px);opacity:.5;transition:opacity 1s}
.we-liquid i{position:absolute;border-radius:50%;mix-blend-mode:screen}
.we-liquid i:nth-child(1){left:18%;top:28%;width:44%;height:42%;background:radial-gradient(circle,rgba(70,96,232,.9),transparent 70%);animation:we-blob1 17s ease-in-out infinite alternate}
.we-liquid i:nth-child(2){left:42%;top:40%;width:40%;height:40%;background:radial-gradient(circle,rgba(40,170,214,.6),transparent 70%);animation:we-blob2 21s ease-in-out infinite alternate}
.we-liquid i:nth-child(3){left:28%;top:52%;width:36%;height:36%;background:radial-gradient(circle,rgba(150,120,240,.55),transparent 70%);animation:we-blob3 25s ease-in-out infinite alternate}
@keyframes we-blob1{to{transform:translate(18%,14%) scale(1.15)}}
@keyframes we-blob2{to{transform:translate(-24%,-10%) scale(.9)}}
@keyframes we-blob3{to{transform:translate(14%,-18%) scale(1.2)}}

.we-h1{display:flex;align-items:center;justify-content:center;gap:9px;margin:16px auto 0;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--we-ink2);
  transition:opacity .45s,transform .45s}
.we-h1 svg{width:22px;height:22px;flex:none;color:var(--we-accent)}
.we-h1 svg path.w1,.we-h1 svg path.w2{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;animation:we-sound 1.8s ease-in-out infinite}
.we-h1 svg path.w2{animation-delay:.3s}
@keyframes we-sound{0%,100%{opacity:.25}50%{opacity:1}}
.we-app.is-playing .we-h1{opacity:0;transform:translateY(-6px)}
.we-app.is-playing .we-liquid{opacity:.85}
.we-display{margin:0;font-weight:800;font-size:clamp(42px,11.5vw,72px);line-height:.98;letter-spacing:-.05em}
.we-display span{display:block}
.we-display-b{background:linear-gradient(180deg,#e9ebf0 0%,#9a9fa9 70%,#6f747e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}

.we-stage{position:relative;width:var(--we-spk);height:var(--we-spk);margin:34px auto 0}
.we-fx{position:absolute;left:50%;top:50%;width:min(100vw,calc(var(--we-spk)*3));height:calc(var(--we-spk)*2.8);transform:translate(-50%,-50%);pointer-events:none;z-index:3}
.we-halo{position:absolute;inset:-26%;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(130,150,240,.26),rgba(130,150,240,.07) 55%,transparent 72%);transition:opacity .4s}
.we-spk,.we-halo{z-index:1}

.we-spk{position:absolute;inset:0;border-radius:50%;
  /* metal basket: six mounting screws, brushed rim, light from the top-left */
  background:
    radial-gradient(circle calc(var(--we-spk) * .026) at 90.9% 73.6%,#050607 0 34%,#5d626e 44%,#2b2e35 62%,#101114 78%,transparent 82%),
    radial-gradient(circle calc(var(--we-spk) * .026) at 50.0% 97.2%,#050607 0 34%,#5d626e 44%,#2b2e35 62%,#101114 78%,transparent 82%),
    radial-gradient(circle calc(var(--we-spk) * .026) at 9.1% 73.6%,#050607 0 34%,#5d626e 44%,#2b2e35 62%,#101114 78%,transparent 82%),
    radial-gradient(circle calc(var(--we-spk) * .026) at 9.1% 26.4%,#050607 0 34%,#5d626e 44%,#2b2e35 62%,#101114 78%,transparent 82%),
    radial-gradient(circle calc(var(--we-spk) * .026) at 50.0% 2.8%,#050607 0 34%,#5d626e 44%,#2b2e35 62%,#101114 78%,transparent 82%),
    radial-gradient(circle calc(var(--we-spk) * .026) at 90.9% 26.4%,#050607 0 34%,#5d626e 44%,#2b2e35 62%,#101114 78%,transparent 82%),
    radial-gradient(circle closest-side,transparent 0 87%,rgba(0,0,0,.75) 88.5%,transparent 91%),
    repeating-conic-gradient(rgba(255,255,255,.04) 0 .5deg,rgba(0,0,0,.06) .5deg 1.3deg),
    conic-gradient(from 225deg,#454953,#1d1f24 24%,#0e0f12 50%,#24272e 76%,#454953);
  box-shadow:0 34px 64px -22px rgba(0,0,0,1),0 0 0 1px rgba(0,0,0,.9),
             inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 4px rgba(0,0,0,.7)}
/* rubber surround: a half-roll that catches a highlight along its crest */
.we-surround{position:absolute;inset:5.5%;border-radius:50%;
  background:
    conic-gradient(from 300deg,rgba(255,255,255,.13),rgba(255,255,255,0) 26%,rgba(0,0,0,0) 48%,rgba(0,0,0,.45) 66%,rgba(0,0,0,0) 86%,rgba(255,255,255,.13)),
    radial-gradient(circle closest-side,#050506 0 75%,#0b0c0e 77%,#1c1e23 82%,#363941 87.5%,#1b1d21 92.5%,#08090a 97%,#000 100%);
  box-shadow:0 0 0 2px #050506,inset 0 0 0 1px rgba(255,255,255,.04)}
/* paper cone: a funnel, so it's lit on the side AWAY from the light (bottom-right faces the top-left light);
   it darkens into a dip where it meets the dust cap */
.we-cone{position:absolute;inset:16%;border-radius:50%;will-change:transform;
  background:
    radial-gradient(circle closest-side,rgba(0,0,0,.6) 0 39%,rgba(0,0,0,.22) 46%,rgba(0,0,0,0) 58%),
    repeating-radial-gradient(circle,rgba(255,255,255,.03) 0 1px,rgba(255,255,255,0) 1.6px 6px),
    repeating-conic-gradient(rgba(255,255,255,.014) 0 .9deg,rgba(0,0,0,.03) .9deg 2.1deg),
    linear-gradient(315deg,rgba(222,230,250,.16) 0,rgba(222,230,250,.04) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.36) 100%),
    radial-gradient(circle closest-side,#0e1014 0 40%,#171a20 62%,#20242c 86%,#15171c 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.85),inset 0 0 22px rgba(0,0,0,.55)}
/* dust cap: a dome, so it's lit on the light side (top-left), shades bottom-right and casts a small shadow on the cone */
.we-cap{position:absolute;inset:31%;border-radius:50%;will-change:transform;
  background:
    radial-gradient(ellipse 60% 45% at 36% 30%,rgba(232,238,252,.2) 0,rgba(232,238,252,.05) 55%,rgba(232,238,252,0) 100%),
    linear-gradient(135deg,#2c3039 0,#1b1e25 48%,#0c0e12 100%);
  box-shadow:calc(var(--we-spk) * .012) calc(var(--we-spk) * .018) calc(var(--we-spk) * .035) rgba(0,0,0,.7),
             inset 1px 1px 1px rgba(255,255,255,.1),inset -2px -3px 6px rgba(0,0,0,.55)}
/* glue bead around the cap: a thin convex ring, bright where it faces the light */
.we-cap::before{content:"";position:absolute;inset:-7%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 270deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 14%,rgba(0,0,0,0) 30%,rgba(0,0,0,.6) 50%,rgba(0,0,0,0) 72%,rgba(255,255,255,.05) 88%,rgba(255,255,255,.22)),#0b0c10;
  -webkit-mask:radial-gradient(closest-side,transparent 88%,#000 90%,#000 99%,transparent 100%);mask:radial-gradient(closest-side,transparent 88%,#000 90%,#000 99%,transparent 100%)}

.we-status{display:flex;align-items:center;justify-content:center;gap:9px;margin:26px 0 0;min-height:14px;
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--we-dim)}
.we-status i{width:6px;height:6px;border-radius:50%;background:var(--we-dim);flex:none}
.we-app.is-playing .we-status{color:var(--we-accent)}
.we-app.is-playing .we-status i{background:var(--we-accent);box-shadow:0 0 10px var(--we-accent);animation:we-blink 1s infinite}
.we-app.is-done .we-status{color:#b9f0cf}
.we-app.is-done .we-status i{background:#7fe0a8;box-shadow:0 0 10px #7fe0a8}
@keyframes we-blink{50%{opacity:.35}}

/* one button + a settings button beside it */
.we-action{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:360px;margin:22px auto 0}
.we-btnwrap{--p:0;position:relative;flex:1;padding:3px;border-radius:999px;
  background:conic-gradient(var(--we-blue1) calc(var(--p)*1turn),rgba(170,183,244,.35) 0);
  box-shadow:0 12px 34px -14px rgba(110,130,245,.8)}
.we-btnwrap::before{content:"";position:absolute;inset:1.5px;border-radius:inherit;background:var(--we-bg)}
.we-ripple{position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(170,183,244,.5);pointer-events:none;animation:we-ripple 2.8s cubic-bezier(.2,.6,.3,1) infinite}
.we-ripple+.we-ripple{animation-delay:1.4s}
@keyframes we-ripple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.12,1.55)}}
.we-app.is-playing .we-ripple{display:none}
.we-app .we-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;border-radius:999px;
  background:linear-gradient(180deg,var(--we-blue1) 0%,#a2b0fb 50%,var(--we-blue2) 100%);color:var(--we-navy);
  font-size:17px;font-weight:700;letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(30,40,110,.22);transition:transform .15s,filter .2s}
.we-app .we-btn svg{width:20px;height:20px}
.we-app .we-btn:hover{filter:brightness(1.06)}
.we-app .we-btn:active{transform:scale(.985)}
.we-app .we-btn:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:999px}
.we-app.is-playing .we-btnwrap{background:conic-gradient(var(--we-blue1) calc(var(--p)*1turn),#24272f 0)}
.we-app.is-playing .we-btn{background:linear-gradient(180deg,#171a24,#101219);color:var(--we-blue1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.we-app .we-gear{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
  background:var(--we-panel);border:1px solid #24262d;color:var(--we-ink2);transition:color .2s,border-color .2s}
.we-app .we-gear:hover{color:var(--we-ink);border-color:#3a3d47}
.we-gear svg{width:22px;height:22px}
.we-app .we-summary{margin:10px auto 0;min-height:32px;padding:0 10px;color:var(--we-mute);font-size:13px;font-weight:500;letter-spacing:.01em;
  border-radius:8px;transition:color .2s}
.we-app .we-summary:hover{color:var(--we-ink)}
.we-summary.is-flash{animation:we-flash 1.2s}
@keyframes we-flash{0%,40%{color:var(--we-accent)}}

.we-done{width:100%;max-width:360px;margin:14px auto 0;padding:16px 18px;border-radius:18px;background:var(--we-panel);border:1px solid var(--we-line);
  text-align:left;animation:we-rise .5s cubic-bezier(.2,.8,.2,1)}
.we-done p{margin:0;color:var(--we-ink2);font-size:15px;line-height:1.5}
.we-done em{font-family:inherit;font-style:normal;color:var(--we-ink)}
.we-done-cta{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:12px 16px;border-radius:12px;
  background:var(--we-accent);color:var(--we-navy) !important;font-weight:700;font-size:15px;text-decoration:none}
.we-done-cta svg{width:20px;height:20px}
@keyframes we-rise{from{opacity:0;transform:translateY(8px)}}

/* ============ settings sheet ============ */
.we-sheet{width:100%;max-width:520px;max-height:100svh;max-height:100dvh;margin:auto auto 0;padding:0;border:0;background:transparent;color:var(--we-ink);font-family:var(--we-font)}
.we-sheet::backdrop{background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.we-sheet *{box-sizing:border-box}
.we-sheet button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.we-sheet-in{max-height:calc(100svh - 12px);max-height:calc(100dvh - 12px);overflow-y:auto;overscroll-behavior:contain;padding:8px 22px calc(24px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;background:#0d0e12;border:1px solid #22242b;border-bottom:0}
.we-sheet[open] .we-sheet-in{animation:we-up .34s cubic-bezier(.2,.8,.2,1)}
@keyframes we-up{from{transform:translateY(100%)}}
.we-sheet-grab{width:38px;height:5px;margin:2px auto 10px;border-radius:5px;background:#33363f}
.we-sheet-head{display:flex;align-items:center;gap:6px}
.we-sheet-head .we-sheet-title{flex:1}
.we-sheet-head .we-sheet-title{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em}
.we-sheet .we-sheet-x{min-height:44px;padding:0 4px;color:var(--we-accent);font-size:16px;font-weight:600}
.we-flabel{margin:14px 0 8px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--we-mute)}
.we-dial{position:relative;margin:0 -22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.we-dial::after{content:"";position:absolute;left:50%;bottom:0;width:2px;height:14px;margin-left:-1px;border-radius:2px;background:var(--we-accent);pointer-events:none}
.we-dial-track{position:relative;display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 50% 18px;scrollbar-width:none;overscroll-behavior-x:contain;
  background:repeating-linear-gradient(90deg,#2a2c33 0 1px,transparent 1px 9px) left bottom/100% 8px no-repeat}
.we-dial-track::-webkit-scrollbar{display:none}
.we-sheet .we-dial-track button{flex:none;scroll-snap-align:center;min-height:40px;padding:0 12px;border-radius:10px;white-space:nowrap;
  color:var(--we-dim);font-size:15px;font-weight:600;transition:color .2s,transform .2s}
.we-sheet .we-dial-track [aria-checked=true]{color:var(--we-ink);transform:scale(1.12)}
.we-devtip{margin:4px 0 0;min-height:1.45em;text-wrap:pretty;color:var(--we-mute);font-size:13.5px;line-height:1.45}
.we-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:16px;background:#060708;border:1px solid var(--we-line)}
.we-modes button{display:flex;align-items:center;justify-content:center;gap:7px;height:38px;border-radius:12px;
  color:var(--we-mute);font-size:15px;font-weight:600;transition:color .2s,background .2s}
.we-modes svg{width:18px;height:18px}
.we-modes button:hover{color:var(--we-ink2)}
.we-modes [aria-checked=true]{color:var(--we-ink);background:#22252e;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.we-modes [aria-checked=true] svg{color:var(--we-accent)}
.we-modedesc{margin:8px 0 0;color:var(--we-mute);font-size:13.5px;line-height:1.4;text-wrap:pretty}
.we-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.we-row .we-flabel{margin:18px 0 0}
.we-seg{display:grid;grid-template-columns:repeat(3,60px);margin-top:12px;padding:3px;border-radius:12px;background:#060708;border:1px solid var(--we-line)}
.we-seg button{position:relative;height:36px;border-radius:9px;font-size:14px;font-weight:600;color:var(--we-mute)}
.we-seg button::after{content:"";position:absolute;inset:-4px 0}
.we-seg [aria-checked=true]{background:#22252e;color:var(--we-ink)}
.we-slider{margin-top:4px}
.we-shead{display:flex;justify-content:space-between;align-items:baseline}
.we-shead .we-flabel{margin-bottom:0}
.we-shead output{font-size:15px;font-weight:700;color:var(--we-ink);font-variant-numeric:tabular-nums}
.we-slider input{--fill:50%;display:block;width:100%;-webkit-appearance:none;appearance:none;height:40px;margin:2px 0 0;background:transparent;cursor:pointer}
.we-slider input::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--we-accent) var(--fill),#262932 var(--fill))}
.we-slider input::-moz-range-track{height:4px;border-radius:4px;background:#262932}
.we-slider input::-moz-range-progress{height:4px;border-radius:4px;background:var(--we-accent)}
.we-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:#fff;border:3px solid var(--we-blue2);box-shadow:0 2px 6px rgba(0,0,0,.6)}
.we-slider input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--we-blue2)}
.we-slider input:focus-visible{outline:none}
.we-slider input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(170,183,244,.45)}
.we-slider input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px rgba(170,183,244,.45)}
.we-fine{margin-top:12px;border-top:1px solid var(--we-line)}
.we-fine summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;cursor:pointer;list-style:none;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--we-mute)}
.we-fine summary::-webkit-details-marker{display:none}
.we-fine summary output{margin-left:auto;color:var(--we-ink2);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none}
.we-fine summary::after{content:"";width:8px;height:8px;margin:-4px 4px 0 0;border-right:2px solid var(--we-mute);border-bottom:2px solid var(--we-mute);transform:rotate(45deg);transition:transform .25s}
.we-fine[open] summary::after{transform:rotate(225deg);margin-top:4px}
.we-fine .we-slider:first-of-type .we-flabel{margin-top:0}
.we-sheet .we-reset{min-height:44px;padding:0 10px;color:var(--we-mute);font-size:15px;font-weight:500}
.we-sheet .we-reset:hover{color:var(--we-ink)}

/* ============ after-run popup ============ */
.we-pop{width:calc(100% - 24px);max-width:420px;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;background:transparent;color:var(--we-ink);font-family:var(--we-font)}
.we-pop::backdrop{background:rgba(0,0,0,.65);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.we-pop *{box-sizing:border-box}
.we-pop button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.we-pop-in{position:relative;max-height:calc(100dvh - 24px);overflow:auto;padding:26px 22px 22px;border-radius:28px;text-align:center;
  background:radial-gradient(90% 60% at 50% 0%,rgba(129,147,242,.22),transparent 70%),#0d0e12;border:1px solid #23252c}
.we-pop[open] .we-pop-in{animation:we-pop .3s cubic-bezier(.2,.8,.2,1)}
@keyframes we-pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
.we-pop .we-pop-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;color:var(--we-mute);font-size:24px;line-height:1}
.we-pop h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1.05}
.we-pop .we-kicker{margin-bottom:10px}
.we-feel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.we-pop .we-feel button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 6px;border-radius:18px;background:#14161b;border:1px solid #23252c;
  font-size:14px;font-weight:600;color:var(--we-ink2);transition:border-color .2s,transform .15s}
.we-pop .we-feel button:hover{border-color:var(--we-accent)}
.we-pop .we-feel button:active{transform:scale(.97)}
.we-feel i{font-style:normal;font-size:30px;line-height:1}
.we-pop-reply{margin:6px 8px 0;font-size:17px;font-weight:600;line-height:1.4;color:var(--we-ink);text-wrap:balance}
.we-pop .we-pop-run{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin-top:14px;padding:0 22px;border-radius:999px;
  background:linear-gradient(180deg,var(--we-blue1),var(--we-blue2));color:var(--we-navy);font-weight:700;font-size:15px}
.we-pop .we-mini{margin:22px 0 10px;color:var(--we-dim)}
.we-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.we-week span{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0 12px;border-radius:14px;background:#14161b;
  color:var(--we-mute);font-size:12px;font-weight:700}
.we-week span::after{content:"";width:6px;height:6px;border-radius:50%;background:#262932}
.we-week span:has(i)::after{display:none}
.we-week .sun{background:rgba(170,183,244,.14);color:var(--we-ink);box-shadow:inset 0 0 0 1px rgba(170,183,244,.45)}
.we-week i,.we-legend i{display:block;width:14px;height:14px;flex:none}
.we-week i.d,.we-legend i.d{border-radius:0 50% 50% 50%;transform:rotate(45deg) scale(.85);background:linear-gradient(135deg,#fff,var(--we-accent))}
.we-week i.c,.we-legend i.c{border-radius:50%;background:var(--we-accent);box-shadow:0 0 0 3px rgba(170,183,244,.25)}
.we-legend i.b{border-radius:3px;background:repeating-linear-gradient(90deg,#9fe8bd 0 2px,transparent 2px 4px)}
.we-legend{list-style:none;margin:16px 0 0;padding:0;text-align:left}
.we-legend li{display:flex;align-items:flex-start;gap:12px;padding:10px 4px;border-top:1px solid #1d1f26}
.we-legend i{margin-top:4px}
.we-legend b{display:block;font-size:14.5px}
.we-legend span{display:block;color:var(--we-mute);font-size:13.5px;line-height:1.4}
.we-pop-cta{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;margin-top:18px;border-radius:999px;background:#fff;color:#000 !important;text-decoration:none;font-weight:700;font-size:16px}
.we-pop-cta svg{width:18px;height:18px;margin-top:-2px}
.we-pop-note{margin:10px 0 0;color:var(--we-mute);font-size:13px}

/* ============ shared section type ============ */
.we-kicker{margin:0 0 14px;color:var(--we-accent);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.we-head{display:grid;gap:18px;align-items:end}
.we-head .we-lede{margin:0;max-width:620px}
.we-head h2,.we-faq-head h2,.we-app-copy h2{margin:0;font-size:clamp(32px,6vw,54px);line-height:1.02;letter-spacing:-.045em;font-weight:800}
.we-head em,.we-faq-head em,.we-app-copy em{font-size:1.08em}
.we-lede{text-wrap:pretty;margin:18px 0 0;max-width:620px;color:var(--we-mute);font-size:17px;line-height:1.6}
.we-js .we-reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.we-js .we-reveal.is-in{opacity:1;transform:none}

/* tape: two crossing bands of words */
.we-tape{position:relative;padding:56px 0 40px;overflow:hidden}
.we-tape-row{width:110vw;margin-left:-5vw;overflow:hidden;white-space:nowrap}
.we-tape-track{display:inline-flex;align-items:center;will-change:transform}
.we-tape-track span{padding:0 .45em;word-spacing:.18em;font-size:clamp(26px,5vw,46px);font-weight:800;letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.we-tape-track i{font-style:normal;font-size:.55em}
.we-tape-a{position:relative;z-index:2;padding:14px 0;background:linear-gradient(90deg,var(--we-blue2),var(--we-blue1),var(--we-blue2));transform:rotate(-3deg);box-shadow:0 20px 40px -18px rgba(110,130,245,.6)}
.we-tape-a span,.we-tape-a i{color:var(--we-navy);font-size:clamp(26px,5vw,46px)}
.we-tape-a i{font-size:clamp(14px,2.6vw,24px)}
.we-tape-b{margin-top:-6px;padding:12px 0;transform:rotate(2deg);border-top:1px solid #1d1f26;border-bottom:1px solid #1d1f26;background:#050506}
.we-tape-b span{color:#050506;text-shadow:1px 0 0 var(--we-accent),-1px 0 0 var(--we-accent),0 1px 0 var(--we-accent),0 -1px 0 var(--we-accent),.7px .7px 0 var(--we-accent),-.7px -.7px 0 var(--we-accent),.7px -.7px 0 var(--we-accent),-.7px .7px 0 var(--we-accent)}
.we-tape-b i{color:var(--we-accent);font-size:clamp(14px,2.6vw,24px)}

/* manifesto: words light up as you scroll */
.we-manifesto{max-width:1000px;margin:0 auto;padding:64px 24px 8px;text-align:center}
.we-lit{margin:0;text-wrap:balance;font-size:clamp(27px,5.2vw,52px);line-height:1.16;font-weight:700;letter-spacing:-.035em;color:#5c6070}
.we-lit span{transition:color .35s}
.we-lit span.on{color:var(--we-ink)}
.we-lit span.we-acc.on{color:var(--we-accent)}

/* how: cutaway + numbered steps */
.we-sec{max-width:1120px;margin:0 auto;padding:104px 20px 0}
.we-how-grid{display:grid;gap:40px;margin-top:40px}
.we-cut{margin:0;padding:22px 18px 20px;border-radius:28px;border:1px solid #17191e;
  background:radial-gradient(70% 70% at 70% 40%,rgba(120,140,240,.12),transparent 70%),#050506}
.we-cut svg{display:block;width:100%;height:auto;overflow:visible}
.we-cut figcaption{margin:14px 4px 0;color:var(--we-mute);font-size:14px;line-height:1.5}
.we-cut-mem{animation:we-mem .14s ease-in-out infinite alternate}
@keyframes we-mem{to{transform:translateX(-9px)}}
.we-cut-air path{opacity:0;animation:we-air 1.8s linear infinite}
.we-cut-air path:nth-child(2){animation-delay:-.6s}
.we-cut-air path:nth-child(3){animation-delay:-1.2s}
@keyframes we-air{0%{opacity:0;transform:translateX(0)}12%{opacity:.85}100%{opacity:0;transform:translateX(-235px)}}
.we-cut-drops circle{animation:we-drop 2.6s cubic-bezier(.55,0,.75,.55) infinite}
.we-cut-drops circle:nth-child(2){animation-delay:-.7s}
.we-cut-drops circle:nth-child(3){animation-delay:-1.4s}
.we-cut-drops circle:nth-child(4){animation-delay:-2s}
@keyframes we-drop{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}38%{transform:translate(0,0)}100%{opacity:0;transform:translate(-52px,72px)}}
.we-steps{list-style:none;margin:0;padding:0}
.we-steps li{display:grid;grid-template-columns:64px 1fr;gap:8px;padding:26px 0;border-top:1px solid var(--we-line)}
.we-steps li:last-child{border-bottom:1px solid var(--we-line)}
.we-steps li>span{font-family:var(--we-serif);font-style:italic;font-size:38px;line-height:1;color:var(--we-accent)}
.we-steps h3{margin:2px 0 6px;font-size:21px;letter-spacing:-.02em}
.we-steps p{margin:0;color:var(--we-mute);font-size:16px;line-height:1.55}

/* numbers */
.we-nums{display:grid;grid-template-columns:1fr 1fr;max-width:1120px;margin:96px auto 0;padding:0 20px}
.we-num{padding:30px 16px 30px 0;border-top:1px solid var(--we-line)}
.we-num:nth-child(even){padding-left:16px;border-left:1px solid var(--we-line)}
.we-num b{display:block;font-size:clamp(48px,10vw,76px);font-weight:800;letter-spacing:-.055em;line-height:1}
.we-num small{margin-left:4px;font-family:var(--we-serif);font-style:italic;font-weight:400;font-size:.42em;letter-spacing:0;color:var(--we-accent)}
.we-num p{margin:14px 0 0;color:var(--we-mute);font-size:14.5px;line-height:1.5}
.we-num strong{color:var(--we-ink2);font-weight:600}

/* modes as moving waveforms */
.we-wave-list{display:grid;margin-top:44px;border-bottom:1px solid var(--we-line)}
.we-wave-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name try" "svg svg" "text text";gap:14px 16px;align-items:center;padding:28px 0;border-top:1px solid var(--we-line)}
.we-wave-name{grid-area:name}
.we-wave-name h3{margin:0;font-size:30px;font-weight:800;letter-spacing:-.035em}
.we-wave-name span{display:block;margin-top:2px;color:var(--we-accent);font-size:13px;font-weight:600}
.we-wave-svg{grid-area:svg;display:block;width:100%;height:56px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.we-wave-svg path{fill:none;stroke:var(--we-accent);stroke-width:2;vector-effect:non-scaling-stroke;animation:we-scroll 3.2s linear infinite}
.we-wave-row:nth-child(2) .we-wave-svg path{animation-duration:2.6s}
.we-wave-row:nth-child(3) .we-wave-svg path{animation-duration:5s}
.we-wave-row:nth-child(4) .we-wave-svg path{animation-duration:4s}
.we-wave-row:nth-child(5) .we-wave-svg path{animation-duration:3.6s}
.we-wave-row:nth-child(6) .we-wave-svg path{animation-duration:2.4s}
@keyframes we-scroll{to{transform:translateX(-400px)}}
.we-wave-row p{grid-area:text;margin:0;color:var(--we-mute);font-size:16px;line-height:1.55}
.we-app .we-try{grid-area:try;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid #2a2d36;color:var(--we-ink2);font-size:14px;font-weight:600;transition:border-color .2s,color .2s}
.we-app .we-try:hover{border-color:var(--we-accent);color:var(--we-ink)}

/* soaked: struck-out don'ts, numbered do's */
.we-soak-grid{display:grid;gap:44px;margin-top:44px}
.we-mini{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.we-dont .we-mini{color:#f3a3a3}.we-do .we-mini{color:#9fe8bd}
.we-dont ul{list-style:none;margin:0;padding:0}
.we-dont li{padding:14px 0;border-top:1px solid var(--we-line)}
.we-dont s{position:relative;display:inline-block;font-size:clamp(30px,5.6vw,48px);font-weight:800;letter-spacing:-.045em;line-height:1.05;
  text-decoration:none;color:var(--we-ink2);transition:color .5s}
.we-dont s::after{content:"";position:absolute;left:-5%;right:-5%;top:52%;height:max(3px,.085em);border-radius:4px;background:#f07f7f;
  box-shadow:0 0 18px rgba(240,127,127,.35);transform:rotate(-2.5deg) scaleX(0);transform-origin:left center;transition:transform .6s cubic-bezier(.75,0,.2,1)}
.we-dont.is-in s,html:not(.we-js) .we-dont s{color:#4a4d57}
.we-dont.is-in s::after,html:not(.we-js) .we-dont s::after{transform:rotate(-2.5deg) scaleX(1)}
.we-dont li:nth-child(1) s,.we-dont li:nth-child(1) s::after{transition-delay:.35s}
.we-dont li:nth-child(2) s,.we-dont li:nth-child(2) s::after{transition-delay:.75s}
.we-dont li:nth-child(3) s,.we-dont li:nth-child(3) s::after{transition-delay:1.15s}
.we-dont li:nth-child(4) s,.we-dont li:nth-child(4) s::after{transition-delay:1.55s}
.we-dont li span{display:block;margin-top:4px;color:var(--we-mute);font-size:14.5px}
.we-do ol{list-style:none;margin:0;padding:0;counter-reset:wd}
.we-do li{counter-increment:wd;position:relative;padding:18px 0 18px 48px;border-top:1px solid var(--we-line);color:var(--we-ink2);font-size:17px;line-height:1.5}
.we-do li::before{content:counter(wd);position:absolute;left:0;top:16px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(127,224,168,.1);color:#9fe8bd;font-size:14px;font-weight:700}

/* sounds: one oscilloscope + a tuner */
.we-scope{max-width:760px;margin:36px auto 0}
.we-scope-screen{position:relative;height:200px;border-radius:26px;overflow:hidden;border:1px solid #1b1d23;
  background:
    linear-gradient(rgba(170,183,244,.07) 1px,transparent 1px) 0 50%/100% 40px,
    linear-gradient(90deg,rgba(170,183,244,.07) 1px,transparent 1px) 50% 0/40px 100%,
    radial-gradient(80% 90% at 50% 50%,#0b0d16,#030304);
  box-shadow:inset 0 0 60px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.02)}
.we-scope-screen::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(170,183,244,.18)}
.we-scope-tl,.we-scope-tr{position:absolute;top:14px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--we-accent);font-variant-numeric:tabular-nums}
.we-scope-tl{left:18px}.we-scope-tr{right:18px;color:var(--we-mute);letter-spacing:.06em}
.we-scope-svg{position:absolute;inset:34px 0 26px;width:100%;height:calc(100% - 60px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.we-scope-svg path{fill:none;stroke:#c4ceff;stroke-width:2.2;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .45s;
  filter:drop-shadow(0 0 4px rgba(170,183,244,.9)) drop-shadow(0 0 14px rgba(129,147,242,.6));animation:we-scroll 3.2s linear infinite}
.we-scope-svg path.is-on{opacity:1}
.we-scope-svg path[data-scope="pulse"]{animation-duration:2.6s}.we-scope-svg path[data-scope="sweep"]{animation-duration:5s}
.we-scope-svg path[data-scope="wobble"]{animation-duration:4s}.we-scope-svg path[data-scope="burst"]{animation-duration:3.6s}.we-scope-svg path[data-scope="chirp"]{animation-duration:2.4s}
.we-scope-scan{position:absolute;top:0;bottom:0;left:-30%;width:30%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(170,183,244,.07),transparent);animation:we-scan 3.6s linear infinite}
@keyframes we-scan{to{left:100%}}
.we-tuner{position:relative;display:flex;gap:4px;margin:14px 0 0;padding:4px;overflow-x:auto;scrollbar-width:none;border-radius:999px;background:#08090b;border:1px solid #191b20}
.we-tuner::-webkit-scrollbar{display:none}
.we-app .we-tuner button{flex:1 0 auto;min-height:42px;padding:0 16px;border-radius:999px;color:var(--we-mute);font-size:15px;font-weight:600;transition:color .25s,background .25s}
.we-app .we-tuner button:not([aria-checked=true]):hover{color:var(--we-ink)}
.we-app .we-tuner [aria-checked=true]{color:#000;background:#f4f5f8}
.we-scope-desc{margin:18px 0 0;text-align:center;color:var(--we-mute);font-size:15.5px;min-height:1.5em;text-wrap:balance}
.we-app .we-scope-go{display:flex;align-items:center;gap:8px;margin:14px auto 0;min-height:48px;padding:0 24px;border-radius:999px;
  background:linear-gradient(180deg,var(--we-blue1),var(--we-blue2));color:var(--we-navy);font-size:15.5px;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 26px -12px rgba(110,130,245,.8);transition:filter .2s}
.we-app .we-scope-go:hover{filter:brightness(1.06)}
.we-scope-go svg{width:18px;height:18px}
.we-scope-go b{font-weight:700}
.we-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* sounds as tiles */
.we-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:36px}
.we-tile{position:relative;padding:18px 16px 16px;border-radius:20px;border:1px solid #17191e;background:#050506;transition:border-color .25s,background .25s}
.we-tile:hover{border-color:#2c2f38}
.we-tile.is-on{border-color:rgba(170,183,244,.45);background:linear-gradient(180deg,rgba(170,183,244,.08),#050506 70%)}
.we-tile h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.03em}
.we-tile::after{content:"Use";position:absolute;top:20px;right:16px;color:var(--we-dim);font-size:12px;font-weight:600}
.we-tile.is-on::after{content:"Selected";color:var(--we-accent)}
.we-tile svg{display:block;width:100%;height:34px;margin:14px 0 12px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.we-tile svg path{fill:none;stroke:var(--we-accent);stroke-width:1.6;vector-effect:non-scaling-stroke;animation:we-scroll 3.2s linear infinite}
.we-tile:nth-child(2) svg path{animation-duration:2.6s}.we-tile:nth-child(3) svg path{animation-duration:5s}
.we-tile:nth-child(4) svg path{animation-duration:4s}.we-tile:nth-child(5) svg path{animation-duration:3.6s}.we-tile:nth-child(6) svg path{animation-duration:2.4s}
.we-tile p{margin:0;color:var(--we-mute);font-size:13.5px;line-height:1.4}
.we-app .we-tile-use{position:absolute;inset:0;border-radius:inherit;font-size:0;color:transparent}
.we-app .we-tile-use:focus-visible{outline:2px solid var(--we-accent);outline-offset:2px;border-radius:20px}

/* devices: one row of big names */
.we-brands{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;margin-top:28px}
.we-pods{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:36px;padding:22px 24px;border-radius:22px;background:#07080a;border:1px solid #191b20}
.we-pods h3{margin:0 0 4px;font-size:19px;letter-spacing:-.02em}
.we-pods p{margin:0;color:var(--we-mute);font-size:15px;line-height:1.5}
.we-app .we-brand{font-size:clamp(24px,4.2vw,38px);font-weight:800;letter-spacing:-.045em;line-height:1.12;color:#767b86;transition:color .25s}
.we-app .we-brand:not(:last-child)::after{content:"/";margin:0 .3em;color:#2a2c33;font-weight:300}
.we-app .we-brand:hover,.we-app .we-brand.is-on{color:var(--we-ink)}
.we-app .we-brand.is-on{color:var(--we-accent)}

/* airpods: three short steps */
.we-trio{list-style:none;display:grid;margin:36px 0 0;padding:0;border-bottom:1px solid var(--we-line)}
.we-trio li{display:grid;grid-template-columns:52px 1fr;column-gap:8px;padding:22px 0;border-top:1px solid var(--we-line)}
.we-trio span{grid-row:span 2;font-family:var(--we-serif);font-style:italic;font-size:32px;line-height:1;color:var(--we-accent)}
.we-trio h3{margin:2px 0 4px;font-size:19px;letter-spacing:-.02em}
.we-trio p{margin:0;color:var(--we-mute);font-size:15px;line-height:1.5}
.we-aside{margin:22px 0 0;color:var(--we-mute);font-size:15px}
.we-app .we-link{color:var(--we-accent);font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* devices */
.we-devs{display:grid;gap:12px;margin-top:44px}
.we-dev{padding:26px 24px;border-radius:24px;background:linear-gradient(180deg,#0b0c0f,#060608);border:1px solid #17191e}
.we-dev h3{margin:0;font-size:24px;font-weight:800;letter-spacing:-.03em}
.we-dev p{margin:8px 0 18px;color:var(--we-mute);font-size:15px;line-height:1.55}
.we-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.we-app .we-chips button{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid #24262d;color:var(--we-ink2);font-size:14px;font-weight:500;transition:border-color .2s,color .2s,background .2s}
.we-app .we-chips button:hover{border-color:var(--we-accent);color:var(--we-ink);background:rgba(170,183,244,.06)}

/* airpods */
.we-ap-grid{display:grid;gap:40px;margin-top:44px}
.we-ap-steps ol{list-style:none;margin:0;padding:0;counter-reset:ap}
.we-ap-steps li{counter-increment:ap;position:relative;padding:18px 0 18px 48px;border-top:1px solid var(--we-line);color:var(--we-mute);font-size:17px;line-height:1.5}
.we-ap-steps li:last-child{border-bottom:1px solid var(--we-line)}
.we-ap-steps li b{color:var(--we-ink);font-weight:600}
.we-ap-steps li::before{content:counter(ap);position:absolute;left:0;top:16px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(170,183,244,.12);color:var(--we-blue1);font-size:14px;font-weight:700}
.we-ap-sound{margin-top:28px;padding:22px;border-radius:20px;background:#08090b;border:1px solid #1a1c22}
.we-ap-sound h3{margin:0 0 6px;font-size:19px;letter-spacing:-.02em}
.we-ap-sound p{margin:0 0 16px;color:var(--we-mute);font-size:15px;line-height:1.55}
.we-ap-table table{width:100%;border-collapse:collapse}
.we-ap-table th{padding:0 0 12px;text-align:left;color:var(--we-dim);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.we-ap-table th:last-child,.we-ap-table td:last-child{text-align:right}
.we-ap-table td{padding:18px 0;border-top:1px solid var(--we-line);color:var(--we-ink2);font-size:16px;line-height:1.4;vertical-align:top}
.we-ap-table td b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--we-ink)}
.we-ap-table td span{display:block;color:var(--we-dim);font-size:13px}
.we-ap-table td:first-child{padding-right:16px}
.we-note{margin:14px 0 0;color:var(--we-dim);font-size:13.5px;line-height:1.5}

/* app */
.we-appcard{display:grid;gap:16px;padding:30px 24px 34px;border-radius:34px;overflow:hidden;border:1px solid #1c1e25;
  background:radial-gradient(60% 60% at 85% 20%,rgba(129,147,242,.30),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgba(129,147,242,.10),transparent 70%),#06070a}
.we-app-copy p{color:var(--we-mute);font-size:17px;line-height:1.6;margin:18px 0 0;max-width:460px}
.we-store{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:10px 20px 10px 16px;border-radius:14px;background:#fff;color:#000 !important;text-decoration:none;min-height:56px}
.we-store svg{width:26px;height:26px}
.we-store span{display:flex;flex-direction:column;font-size:20px;font-weight:700;line-height:1.05;letter-spacing:-.02em}
.we-store small{font-size:11px;font-weight:500;letter-spacing:0}
.we-app-copy .we-kicker{display:flex;align-items:center;gap:10px}
.we-appicon{width:30px;height:30px;border-radius:8px}
.we-shots{position:relative;order:-1;height:300px;margin:-8px 0 0}
.we-shots img{position:absolute;top:50%;left:50%;width:128px;height:auto;border-radius:16px;background:#fff;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.we-shots img:nth-child(1){transform:translate(-118%,-46%) rotate(-7deg)}
.we-shots img:nth-child(2){z-index:2;transform:translate(-50%,-52%)}
.we-shots img:nth-child(3){transform:translate(18%,-46%) rotate(7deg)}
.we-facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0;margin:28px 0 0}
.we-facts div{padding:0 22px;border-left:1px solid #23252c}
.we-facts div:first-child{padding-left:0;border-left:0}
.we-facts dt{color:var(--we-dim);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.we-facts dd{margin:6px 0 0;font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1}
.we-facts dd i{font-style:normal;color:#ffd166;font-size:.8em;margin-left:2px}
.we-facts dd small{display:block;margin-top:6px;color:var(--we-mute);font-size:12.5px;font-weight:500;letter-spacing:0}
.we-quotes{display:grid;gap:18px;margin-top:30px;padding-top:24px;border-top:1px solid #1c1e25}
.we-quotes figure{margin:0}
.we-quotes blockquote{margin:0;font-family:var(--we-serif);font-style:italic;font-size:24px;line-height:1.25;color:var(--we-ink)}
.we-quotes figcaption{margin-top:6px;color:var(--we-dim);font-size:13px}
.we-phone{position:relative;justify-self:center;width:250px;height:440px;margin-bottom:-100px;padding:56px 22px 0;border-radius:46px;
  background:linear-gradient(180deg,#f7f8fc,#eceff7);border:9px solid #1a1b20;text-align:center;color:#0d1020;
  box-shadow:0 0 0 1px #2d3039,0 40px 80px -20px rgba(0,0,0,1),0 0 140px -30px rgba(129,147,242,.55)}
.we-phone-isl{position:absolute;top:12px;left:50%;width:78px;height:22px;margin-left:-39px;border-radius:20px;background:#0b0b0d}
.we-phone-k{margin:0;color:#6b7393;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.we-phone-t{margin:4px 0 0;font-size:24px;font-weight:800;letter-spacing:-.04em}
.we-phone-ring{position:relative;width:132px;height:132px;margin:22px auto 0;border-radius:50%;
  background:conic-gradient(#7b8ff0 0 68%,#dfe3f1 0);display:grid;place-items:center}
.we-phone-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#f4f6fb}
.we-phone-ring i{position:relative;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 38% 30%,#a9b6f8,#6f82e6 60%,#5367cf);box-shadow:0 8px 20px rgba(83,103,207,.35)}
.we-phone-lr{display:flex;justify-content:center;gap:8px;margin-top:18px}
.we-phone-lr span{display:grid;place-items:center;width:34px;height:26px;border-radius:8px;background:#fff;border:1px solid #dfe3ef;color:#4b5375;font-size:12px;font-weight:700}
.we-phone-btn{margin:18px 0 0;padding:13px 0;border-radius:999px;background:linear-gradient(180deg,#8b9cf5,#6c7fe6);color:#fff;font-weight:700;font-size:14px}
.we-phone-vib{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 0;color:#5a6282;font-size:12px;font-weight:600}
.we-phone-vib i{width:8px;height:8px;border-radius:50%;background:#45c37f}

/* faq */
.we-faq-head p{margin:18px 0 0;color:var(--we-mute);font-size:17px;line-height:1.6;max-width:360px}
.we-faq{margin-top:36px}
.we-faq details{border-top:1px solid var(--we-line)}
.we-faq details:last-child{border-bottom:1px solid var(--we-line)}
.we-faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--we-ink)}
.we-faq summary::-webkit-details-marker{display:none}
.we-faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-9px;border-right:2px solid var(--we-accent);border-bottom:2px solid var(--we-accent);transform:rotate(45deg);transition:transform .25s}
.we-faq details[open] summary::after{transform:rotate(225deg);margin-top:-3px}
.we-faq details p{margin:0;padding:0 40px 24px 0;color:var(--we-mute);font-size:16px;line-height:1.6}

/* footer */
.we-foot{max-width:1120px;margin:120px auto 0;padding:0 20px 110px}
.we-foot-big{white-space:nowrap;font-size:min(calc((100vw - 40px) / 6.9),184px);font-weight:800;letter-spacing:-.065em;line-height:.88;color:#1b1c22}
.we-foot .we-foot-big b{color:#363d66}
.we-foot-big .we-dot{box-shadow:none;opacity:.8}
.we-foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:36px;padding-top:24px;border-top:1px solid var(--we-line)}

.we-logo-sm{font-size:19px}.we-logo-sm svg{width:24px;height:24px}
.we-foot nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.we-foot nav a{color:var(--we-ink2) !important;text-decoration:none;font-size:15px;min-height:36px;display:inline-flex;align-items:center}
.we-foot nav a:hover{color:var(--we-ink) !important}
.we-foot-c{margin:0;color:var(--we-dim);font-size:14px}

@media (min-width:768px){
  .we-sheet{margin:auto;max-width:440px}
  .we-sheet-in{border-radius:26px;border-bottom:1px solid #22242b;padding-bottom:24px}
  .we-sheet[open] .we-sheet-in{animation:we-pop .25s cubic-bezier(.2,.8,.2,1)}
  @keyframes we-pop{from{opacity:0;transform:scale(.96)}}
  .we-sheet-grab{display:none}
  .we-nums{grid-template-columns:repeat(4,1fr)}
  .we-num{padding:36px 24px 36px 24px;border-left:1px solid var(--we-line)}
  .we-num:first-child{padding-left:0;border-left:0}
  .we-wave-list{grid-template-columns:1fr 1fr;column-gap:56px}
  .we-wave-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name try" "svg svg" "text text"}
  .we-devs{grid-template-columns:1fr 1fr}
  .we-ap-grid{grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
  .we-quotes{grid-template-columns:1fr 1fr}
  .we-soak-grid{grid-template-columns:1.1fr 1fr;gap:64px}
  .we-appcard{grid-template-columns:1.15fr 1fr;align-items:center;padding:64px 64px 0}
  .we-app-copy{padding-bottom:64px}
  .we-appcard{padding:64px}
  .we-app-copy{padding-bottom:0}
  .we-shots{order:0;height:500px;margin:0}
  .we-shots img{width:210px;border-radius:22px}
  .we-shots:hover img:nth-child(1){transform:translate(-128%,-47%) rotate(-9deg)}
  .we-shots:hover img:nth-child(3){transform:translate(28%,-47%) rotate(9deg)}
  .we-tiles{grid-template-columns:repeat(3,1fr);gap:12px}
  .we-trio{grid-template-columns:repeat(3,1fr);column-gap:32px;border-bottom:0}
  .we-trio li{grid-template-columns:1fr;row-gap:10px}
  .we-trio span{grid-row:auto}
  .we-faq-sec{display:grid;grid-template-columns:1fr 1.45fr;gap:64px;align-items:start}
  .we-faq-head{position:sticky;top:40px}
  .we-faq{margin-top:0}
}
@media (min-width:960px){
  .we-h1{font-size:18px}
  .we-scope-screen{height:240px}
  .we-nav{display:flex;gap:4px}
  .we-nav a{padding:8px 12px;border-radius:999px;color:var(--we-mute);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .2s,background .2s}
  .we-nav a:hover{color:var(--we-ink);background:#0f1014}
  .we-app .we-menu-btn{display:none}
  :root{--we-spk:clamp(200px,calc(100svh - 470px),280px)}
  .we-top{padding:18px 32px}
  .we-hero{min-height:calc(100svh - 80px);display:flex;flex-direction:column;justify-content:center;padding-bottom:60px}
  .we-how-grid{grid-template-columns:1.15fr 1fr;gap:72px;align-items:center}
  .we-manifesto{padding-top:120px}
}
@media (max-width:560px){
  .we-getapp{display:none}
}
@media (max-width:420px){
  .we-facts{grid-template-columns:1fr 1fr;row-gap:20px}
  .we-facts div:nth-child(3){padding-left:0;border-left:0}
}
@media (max-height:640px) and (max-width:767px){
  .we-display{font-size:36px}
  .we-stage{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
.we-ripple{display:none}
  .we-dont s,.we-dont s::after{transition:none !important}
  .we-liquid i,.we-h1 svg path{animation:none}
  .we-app.is-playing .we-status i,.we-cut-mem,.we-cut-air path,.we-cut-drops circle,.we-wave-svg path{animation:none}
  .we-cut-air path{opacity:.5}
  .we-js .we-reveal{opacity:1;transform:none;transition:none}
}

/* ===== Round 14 (2026-10-11): big-screen manifesto, scroll-scrubbed don'ts, faster reveals, settings sheet polish ===== */
/* manifesto: the tight tracking that looks right on a 13" Retina crowds the words on big, lower-density monitors */
@media (min-width:1100px){
  .we-manifesto{max-width:min(1500px,58vw)}
  .we-lit{font-size:clamp(42px,2.9vw,78px);font-weight:650;letter-spacing:-.022em;word-spacing:.05em;line-height:1.18}
}
/* reveals: start sooner, travel less, finish faster, so nothing arrives after you've scrolled past */
.we-js .we-reveal{transform:translateY(16px);transition-duration:.6s}
/* don'ts: each strike follows your scroll (drawn as the line reaches it), never on a timer */
.we-js .we-dont s,.we-js .we-dont.is-in s{color:var(--we-ink2);transition:color .3s;transition-delay:0s !important}
.we-js .we-dont s::after,.we-js .we-dont.is-in s::after{transform:rotate(-2.5deg) scaleX(var(--p,0));transition:transform .12s linear;transition-delay:0s !important}
.we-js .we-dont li.is-struck s{color:#4a4d57}
.we-js .we-do li{opacity:0;transform:translateX(-12px);transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1)}
.we-js .we-do li.is-in{opacity:1;transform:none}
/* settings sheet: one rhythm (label 24px above, helper text 12px below its control) */
.we-sheet .we-flabel{margin:24px 0 10px}
.we-sheet .we-sheet-head + .we-flabel{margin-top:12px}
.we-sheet .we-devtip{margin:12px 0 0}
.we-sheet .we-modedesc{margin:12px 0 0}
.we-sheet .we-row{margin-top:8px}
.we-sheet .we-row .we-flabel{margin:24px 0 0}
/* fine-tune: its own panel, value as a pill, scale labels under each slider */
.we-sheet .we-fine{margin-top:22px;padding:0 16px;border:1px solid var(--we-line);border-radius:16px;background:#0a0b0e}
.we-sheet .we-fine summary{min-height:54px}
.we-sheet .we-fine[open]{padding-bottom:12px}
.we-sheet .we-fine[open] summary{border-bottom:1px solid var(--we-line);margin-bottom:12px}
.we-sheet .we-fine summary output{padding:5px 11px;border-radius:999px;background:#17191f;font-size:13.5px}
.we-sheet .we-fine .we-slider + .we-slider{margin-top:14px}
.we-sheet .we-fine .we-flabel{margin:0}
.we-scale{display:flex;justify-content:space-between;margin-top:-4px;font-size:12px;color:var(--we-dim)}
.we-slider input::-webkit-slider-runnable-track{height:6px;border-radius:6px}
.we-slider input::-webkit-slider-thumb{margin-top:-9px}
.we-slider input::-moz-range-track,.we-slider input::-moz-range-progress{height:6px;border-radius:6px}
/* page behind an open sheet doesn't move */
html.we-locked,html.we-locked body{overflow:hidden;overscroll-behavior:none}
@media (prefers-reduced-motion:reduce){.we-js .we-do li{opacity:1;transform:none;transition:none}.we-js .we-dont s::after{transition:none}}
/* Boost: the newest sound gets the full-width first row of the sound picker */
.we-modes [data-mode=boost]{grid-column:1/-1;order:-1}
.we-modes [data-mode=boost]::after{content:"New";margin-left:4px;padding:2px 7px;border-radius:999px;background:rgba(170,183,244,.16);color:var(--we-accent);font-size:11px;font-weight:700;letter-spacing:.06em}

/* ===== Round 15 (2026-10-11) ===== */
/* no double-tap zoom on iPhone (fast taps on Eject, sound pills or popup buttons were zooming the page); pinch zoom still works */
html{touch-action:manipulation}
/* Eject row: the button sits dead centre, the settings button balances it on the right, more room between them */
.we-action{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;align-items:center;gap:14px;max-width:420px}
.we-action .we-btnwrap{grid-column:2}
.we-app .we-action .we-gear{grid-column:3;justify-self:start;width:56px;height:56px}
@media (max-width:380px){.we-action{grid-template-columns:50px minmax(0,1fr) 50px;gap:12px}.we-app .we-action .we-gear{width:50px;height:50px}}
/* big monitors: the gaps grow with the text (manifesto, tape, next section) instead of staying phone-sized */
@media (min-width:1100px){
  .we-manifesto{padding-top:clamp(120px,8vw,220px)}
  .we-tape{padding:clamp(56px,4.6vw,130px) 0 clamp(40px,3.4vw,100px)}
  .we-tape + .we-sec{padding-top:clamp(104px,6.5vw,190px)}
}
/* feedback popup: a bigger, clearly separate close button that never gets an automatic focus ring */
.we-pop .we-pop-x{top:8px;right:8px;z-index:2;width:44px;height:44px;display:grid;place-items:center;background:#1a1c22 !important;color:var(--we-ink2);font-size:22px}
.we-pop .we-pop-x:focus{outline:none}
.we-pop .we-pop-x:focus-visible{outline:2px solid var(--we-accent);outline-offset:2px}
.we-pop h2:focus{outline:none}
.we-pop h2{padding:0 40px}   /* keep the title clear of the close button on both sides, so it stays centred */
/* device line under the dial: always one line */
.we-sheet .we-devtip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0}