@font-face{font-family:Satoshi;src:url(/f/satoshi-500.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:Satoshi;src:url(/f/satoshi-700.woff2) format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/f/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --bg:#08090d;
  --surface:#11131a;
  --surface-2:#161922;
  --line:#22262f;
  --line-2:#2d3240;
  --ink:#f2f4f7;
  --body:#c9cdd6;
  --muted:#979dab;
  --faint:#646a78;
  --accent:#4d94ff;
  --accent-2:#a9d0ff;
  --accent-3:#2c66ff;
  --warm:#ffb454;
  --sans:Satoshi,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Instrument Serif",ui-serif,"Iowan Old Style",Palatino,Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --wrap:1180px;
  --pad:max(clamp(20px,5vw,40px),env(safe-area-inset-left));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;min-height:100svh;
}
::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.01em}
h1 em,h2 em,.brand em,.cta h2 em{
  padding:0 .06em 0 .02em;
  background:linear-gradient(100deg,var(--accent-3) 0%,var(--accent) 30%,#eef6ff 50%,var(--accent-2) 64%,var(--accent) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 8s ease-in-out 1.6s infinite;
}
@keyframes shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
code,kbd{font-family:var(--mono);font-size:.86em}
code{padding:.12em .4em;border-radius:6px;background:#ffffff0d;border:1px solid var(--line);color:var(--accent-2);word-break:break-all}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;z-index:50;left:12px;top:-60px;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* ---------- background ---------- */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg__glow{
  position:absolute;left:58%;top:-18vh;width:min(1100px,140vw);height:min(820px,110vh);transform:translateX(-50%);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 17%,transparent),color-mix(in srgb,var(--accent-3) 6%,transparent) 55%,transparent);
  filter:blur(40px);animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{50%{transform:translateX(-50%) scale(1.1)}}
.bg__dots{
  position:absolute;inset:0;opacity:.55;
  background-image:radial-gradient(circle at 1px 1px,#ffffff1c 1px,transparent 1.4px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(70% 60% at 62% 18%,#000 0,transparent 100%);
          mask-image:radial-gradient(70% 60% at 62% 18%,#000 0,transparent 100%);
}
.grain{
  position:absolute;inset:-50%;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;
  max-width:calc(var(--wrap) + 2 * var(--pad));margin:0 auto;padding:14px var(--pad);
}
.nav::before{ /* frosted strip, appears once the page scrolls under it */
  content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid #ffffff0a;
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  opacity:0;transition:opacity .4s var(--ease-out);
  left:calc(50% - 50vw);right:calc(50% - 50vw);
}
.is-scrolled .nav::before{opacity:1}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;letter-spacing:-.035em;text-decoration:none;white-space:nowrap}
.brand em{font-size:1.12em;letter-spacing:-.02em}
.brand__icon{width:28px;height:28px;flex:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.brand__icon circle{stroke:var(--accent);stroke-width:3}
.brand__icon path{stroke:var(--ink);stroke-width:2.6}
.nav__links{display:flex;gap:4px;margin-left:auto}
.doc .nav__yt{margin-left:auto}
.nav__links a{padding:8px 14px;border-radius:999px;font-size:15px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .25s,background .25s}
.nav__links a:hover{color:var(--ink);background:#ffffff0b}
.nav__yt{
  display:flex;align-items:center;gap:8px;padding:8px 15px 8px 12px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;
  border:1px solid var(--line-2);background:color-mix(in srgb,var(--surface) 70%,transparent);
  transition:background .3s var(--ease-out),border-color .3s,transform .45s var(--spring);
}
.nav__yt:hover{background:var(--surface-2);border-color:#3a4050}
.nav__yt:active{transform:scale(.96)}
.nav__yt svg{width:20px;height:20px;fill:#ff3b3b}
.nav__yt .play{fill:#fff}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(32px,5vw,72px);
  max-width:calc(var(--wrap) + 2 * var(--pad));margin:0 auto;padding:clamp(28px,5vw,56px) var(--pad) clamp(56px,8vw,96px);
  min-height:calc(100svh - 68px);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:6px 14px 6px 12px;border-radius:999px;
  font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--body);
  border:1px solid var(--line-2);background:color-mix(in srgb,var(--surface) 60%,transparent);
}
.eyebrow__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 4%,transparent)}}
h1{font-size:clamp(46px,6.6vw,92px);font-weight:700;line-height:.98;letter-spacing:-.05em;text-wrap:balance}
h1 em{display:inline-block;letter-spacing:-.02em;font-size:1.06em;line-height:.9}
.intro{margin-top:26px;max-width:33em;font-size:clamp(17px,1.6vw,19px);line-height:1.6;color:var(--body);text-wrap:pretty}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;list-style:none}
.facts li{padding:8px 14px;border-radius:12px;font-size:14px;color:var(--muted);border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 55%,transparent)}
.facts b{color:var(--ink);font-weight:700}

/* ---------- timer ---------- */
.timer{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:clamp(22px,3vw,32px);border-radius:32px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 82%,transparent),color-mix(in srgb,var(--surface) 82%,transparent));
  border:1px solid var(--line);
  box-shadow:0 50px 100px -40px #000c,inset 0 1px 0 #ffffff0a;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.timer::before{ /* light catching the top edge */
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 55%,transparent),transparent 34%,transparent 70%,color-mix(in srgb,var(--accent) 22%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.dial{position:relative;width:min(100%,370px);aspect-ratio:1;container-type:inline-size;--tick:#ffffff2a}
.dial__ticks,.dial__lit,.dial__lit::before{position:absolute;inset:0;border-radius:50%}
/* 60 minute ticks, every fifth one longer: two conic gradients cut into rings by radial masks */
.dial__ticks::before,.dial__ticks::after,.dial__lit::before,.dial__lit::after{content:"";position:absolute;inset:0;border-radius:50%}
.dial__ticks::before,.dial__lit::before{
  background:repeating-conic-gradient(from -.5deg,var(--tick) 0 1deg,transparent 1deg 6deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4.5cqi),#000 calc(100% - 4.5cqi + .5px) calc(100% - 1px),transparent);
          mask:radial-gradient(farthest-side,transparent calc(100% - 4.5cqi),#000 calc(100% - 4.5cqi + .5px) calc(100% - 1px),transparent);
}
.dial__ticks::after,.dial__lit::after{
  background:repeating-conic-gradient(from -.8deg,var(--major,#ffffff5c) 0 1.6deg,transparent 1.6deg 30deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7cqi),#000 calc(100% - 7cqi + .5px) calc(100% - 1px),transparent);
          mask:radial-gradient(farthest-side,transparent calc(100% - 7cqi),#000 calc(100% - 7cqi + .5px) calc(100% - 1px),transparent);
}
.dial__lit{ /* the ticks that light up for the time left */
  -webkit-mask:conic-gradient(#000 calc(var(--p) * 360deg),transparent 0);
          mask:conic-gradient(#000 calc(var(--p) * 360deg),transparent 0);
}
.dial__lit::before,.dial__lit::after{--tick:var(--accent);--major:var(--accent-2);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 80%,transparent))}
.dial__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.dial__track,.dial__arc{fill:none;stroke-width:2.5}
.dial__track{stroke:#ffffff0e}
.dial__arc{
  stroke:var(--accent);stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--p));
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 70%,transparent));transition:stroke-dashoffset .35s linear;
}
.dial__face{
  position:absolute;inset:15%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqi;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 11%,transparent),transparent);
}
.time{font-size:21cqi;font-weight:700;line-height:1;letter-spacing:-.03em;display:flex;white-space:nowrap}
.time--long{font-size:15.5cqi}
.time .d{display:inline-block;width:.6em;text-align:center}
.time .c{display:inline-block;width:.3em;text-align:center;opacity:.55;transform:translateY(-.06em)}
.time__state{font-size:max(12px,3.3cqi);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
[data-status=running] .time__state{color:var(--accent-2)}
[data-status=done] .dial{--accent:var(--warm)}
[data-status=done] .time{color:var(--warm);animation:ring 1s ease-in-out 3}
[data-status=done] .time__state{color:var(--warm)}
@keyframes ring{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}

.presets{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;width:100%}
.presets button{
  min-width:0;padding:8px 2px;border-radius:999px;font-size:14px;white-space:nowrap;font-weight:500;color:var(--body);
  border:1px solid var(--line-2);background:#ffffff06;transition:background .25s,border-color .25s,color .25s,transform .4s var(--spring);
}
.presets button:hover{background:#ffffff10;color:var(--ink)}
.presets button:active{transform:scale(.94)}
.presets button[aria-pressed=true]{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 70%,transparent);background:color-mix(in srgb,var(--accent) 18%,transparent)}

.controls{display:flex;align-items:center;gap:8px;width:100%}
.custom{display:flex;align-items:center;height:52px;padding:4px;border-radius:999px;border:1px solid var(--line-2);background:#00000033}
.custom__step{width:42px;height:42px;border-radius:50%;border:0;background:transparent;font-size:20px;color:var(--muted);transition:background .25s,color .25s}
.custom__step:hover{background:#ffffff10;color:var(--ink)}
.custom__field{display:flex;align-items:baseline;gap:5px;padding:0 4px}
.custom__field input{
  width:3.4ch;border:0;background:transparent;text-align:right;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;appearance:textfield;
}
.custom__field input::-webkit-inner-spin-button,.custom__field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.custom__field input:focus{outline:none}
.custom:focus-within{border-color:var(--accent)}
.custom__field span{font-size:13px;color:var(--faint)}
.go{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:9px;height:52px;min-width:104px;padding:0 18px;border-radius:999px;border:0;
  font-size:16px;font-weight:700;color:#04122b;
  background:linear-gradient(180deg,#8cc0ff,var(--accent));
  box-shadow:0 12px 30px -10px color-mix(in srgb,var(--accent) 80%,transparent),inset 0 1px 0 #ffffff80;
  transition:transform .45s var(--spring),box-shadow .3s,filter .3s;
}
.go:hover{filter:brightness(1.08);box-shadow:0 16px 36px -10px color-mix(in srgb,var(--accent) 90%,transparent),inset 0 1px 0 #ffffff80}
.go:active{transform:scale(.95)}
.go svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.go__pause{display:none}
[data-status=running] .go__play{display:none}
[data-status=running] .go__pause{display:block}
[data-status=running] .go{background:linear-gradient(180deg,#f4f6fa,#cfd6e2);box-shadow:0 12px 30px -12px #ffffff40,inset 0 1px 0 #fff}
.tools{display:flex;gap:6px}
.tool{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:#ffffff06;color:var(--muted);
  transition:background .25s,color .25s,transform .4s var(--spring);
}
.tool:hover{background:#ffffff10;color:var(--ink)}
.tool:active{transform:scale(.9)}
.tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tool__mute{display:none}
.tool[aria-pressed=false] .tool__wave{display:none}
.tool[aria-pressed=false] .tool__mute{display:block}
.tool[hidden]{display:none}
.timer__video{
  display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;font-size:14px;color:var(--muted);text-decoration:none;
  background:#ffffff05;border:1px dashed var(--line-2);transition:color .25s,border-color .25s,background .25s;
}
.timer__video:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:#ffffff0a}
.timer__video svg{flex:none;width:14px;height:14px;fill:var(--accent)}
.timer__video b{color:var(--ink);font-weight:700}
.timer__video[hidden]{display:none}
.keys{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;font-size:12px;color:var(--faint)}
.keys kbd{padding:2px 7px;border-radius:6px;border:1px solid var(--line-2);border-bottom-width:2px;color:var(--muted);font-size:11px}
.keys kbd:not(:first-child){margin-left:8px}
@media (hover:none){.keys{display:none}}

/* full screen: the timer becomes a desk clock */
.timer:fullscreen{justify-content:center;gap:4vh;border-radius:0;border:0;background:var(--bg);padding:4vh 4vw}
.timer:fullscreen::before{display:none}
.timer:fullscreen .dial{width:min(76vh,90vw)}
.timer:fullscreen .presets,.timer:fullscreen .custom,.timer:fullscreen .timer__video,.timer:fullscreen .keys{display:none}
.timer:fullscreen::backdrop{background:var(--bg)}

/* OBS / overlay mode (?obs): only the digits on a transparent page */
html.obs{color-scheme:normal}
html.obs,html.obs body{background:transparent!important;overflow:hidden}
.obs-clock{position:fixed;inset:0;display:grid;place-items:center;container-type:inline-size}
.obs-clock .time{font-size:24cqi;color:#fff;text-shadow:0 .02em .08em #0009}
.obs-clock .time--long{font-size:17cqi}
.obs-clock[data-status=done] .time{color:var(--warm)}

/* ---------- sections ---------- */
.sect{max-width:calc(var(--wrap) + 2 * var(--pad));margin:0 auto;padding:clamp(72px,10vw,128px) var(--pad) 0}
.sect__head{max-width:760px;margin-bottom:clamp(32px,5vw,52px)}
.kicker{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.kicker::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
h2{font-size:clamp(34px,4.6vw,58px);font-weight:700;line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
h2 em{letter-spacing:-.015em;font-size:1.05em}
.sect__lead{margin-top:18px;font-size:clamp(16px,1.5vw,18px);color:var(--body);max-width:40em;text-wrap:pretty}

/* library */
.lib{padding:clamp(18px,3vw,30px);border-radius:28px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.lib__bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:26px}
.find{position:relative;flex:1 1 280px;max-width:420px}
.find svg{position:absolute;left:16px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--faint);stroke-width:2;stroke-linecap:round}
.find input{width:100%;height:48px;padding:0 16px 0 44px;border-radius:999px;border:1px solid var(--line-2);background:#00000040;font-size:15px;transition:border-color .25s}
.find input::placeholder{color:var(--faint)}
.find input:focus{outline:none;border-color:var(--accent)}
.lib__count{font-size:14px;color:var(--muted);margin-left:auto}
.lib__group+.lib__group{margin-top:28px}
.lib__title{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.lib__title small{font-size:13px;font-weight:500;color:var(--faint)}
.tiles{display:grid;gap:8px;list-style:none}
.tiles--min{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))}
.tiles--hour{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.tile{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:72px;overflow:hidden;
  border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,#ffffff07,#ffffff02);text-decoration:none;
  transition:border-color .25s,background .25s,transform .45s var(--spring),opacity .3s;
}
.tiles--hour .tile{height:84px}
.tile b{font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.tiles--hour .tile b{font-size:26px}
.tile span{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);transition:color .25s}
.tile::after{ /* share of an hour (or of 12 hours), as a bar along the bottom */
  content:"";position:absolute;left:0;bottom:0;height:2px;width:calc(var(--f,0) * 100%);
  background:linear-gradient(90deg,var(--accent-3),var(--accent));opacity:.55;transition:opacity .25s,height .25s;
}
.tile:hover{border-color:color-mix(in srgb,var(--accent) 65%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent);transform:translateY(-2px)}
.tile:hover span{color:var(--accent-2)}
.tile:hover::after{opacity:1;height:3px}
.tile:active{transform:scale(.96)}
.tile.is-dim{opacity:.16}
.tile.is-hit{border-color:color-mix(in srgb,var(--accent) 65%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.lib__empty{margin-top:20px;color:var(--muted)}
.lib__empty a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--accent)}

/* guide */
.gears{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none}
.gear{
  display:flex;flex-direction:column;padding:28px;border-radius:24px;border:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 80%,transparent),color-mix(in srgb,var(--surface) 70%,transparent));
}
.gear--mid{border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 30px 80px -40px color-mix(in srgb,var(--accent) 50%,transparent)}
.gear__len{display:flex;align-items:baseline;gap:6px;font-size:52px;font-weight:700;letter-spacing:-.05em;line-height:1}
.gear__len small{font-size:15px;font-weight:500;letter-spacing:0;color:var(--muted)}
.gear--mid .gear__len{color:var(--accent-2)}
.gear h3{margin:18px 0 10px;font-size:21px;letter-spacing:-.02em}
.gear p{color:var(--body);font-size:15.5px}
.gear__for{margin-top:12px;color:var(--muted)!important;font-size:14.5px!important}
.gear__go{
  align-self:flex-start;margin-top:auto;transform-origin:left;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;
  border:1px solid var(--line-2);background:#ffffff08;transition:background .25s,border-color .25s,transform .45s var(--spring);
}
.gear p:last-of-type{margin-bottom:22px}
.gear__go::after{content:" ↑";color:var(--accent)}
.gear__go:hover{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.gear__go:active{transform:scale(.95)}

.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px;margin-top:16px;align-items:start}
.split .table-card{grid-row:span 2;align-self:stretch}
.notes{display:contents}
.note--stream{grid-column:1/-1}
.table-card{padding:28px;border-radius:24px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);overflow-x:auto}
.table-card h3,.note h3{font-size:19px;letter-spacing:-.02em;margin-bottom:14px}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:13px 12px 13px 0;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
thead th{border-top:0;padding-top:0;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
tbody th{font-weight:600}
td{color:var(--muted)}
td:nth-child(2){color:var(--accent-2);font-weight:600;white-space:nowrap}
.note{padding:26px 28px;border-radius:24px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.note p{color:var(--body);font-size:15.5px}
.note p+p{margin-top:10px}
.note--stream{border-color:color-mix(in srgb,#a78bfa 35%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,#a78bfa 7%,transparent),color-mix(in srgb,var(--surface) 70%,transparent))}

/* faq */
.sect--faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:clamp(32px,6vw,80px);align-items:start}
.sect--faq .sect__head{position:sticky;top:100px}
.sect__lead a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--accent)}
.faq{display:grid;gap:10px}
.qa{border-radius:18px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);transition:border-color .3s,background .3s}
.qa[open]{border-color:var(--line-2);background:color-mix(in srgb,var(--surface-2) 80%,transparent)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer;list-style:none;border-radius:inherit}
.qa summary::-webkit-details-marker{display:none}
.qa h3{font-size:17px;font-weight:600;letter-spacing:-.01em}
.qa__icon{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);transition:transform .4s var(--ease-out),background .3s}
.qa__icon::before,.qa__icon::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.6px;border-radius:2px;background:var(--muted);transform:translate(-50%,-50%)}
.qa__icon::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .4s var(--ease-out)}
.qa[open] .qa__icon{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:transparent}
.qa[open] .qa__icon::after{transform:translate(-50%,-50%) rotate(0)}
.qa__a{padding:0 24px 22px;color:var(--body);max-width:46em}
.qa__a a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--accent)}

/* closing call to action */
.cta{position:relative;max-width:calc(var(--wrap) + 2 * var(--pad));margin:clamp(80px,11vw,140px) auto 0;padding:0 var(--pad);text-align:center}
.cta h2{font-size:clamp(38px,5.6vw,72px)}
.cta__row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 24px;border-radius:999px;font-size:16px;font-weight:600;text-decoration:none;
  border:1px solid var(--line-2);background:color-mix(in srgb,var(--surface) 70%,transparent);
  transition:background .3s var(--ease-out),transform .45s var(--spring),filter .3s;
}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:scale(.96)}
.btn--primary{border:0;color:#04122b;background:linear-gradient(180deg,#8cc0ff,var(--accent));box-shadow:0 12px 30px -10px color-mix(in srgb,var(--accent) 80%,transparent),inset 0 1px 0 #ffffff80}
.btn--primary:hover{background:linear-gradient(180deg,#8cc0ff,var(--accent));filter:brightness(1.08)}
.cta__mail{margin-top:22px;color:var(--muted);font-size:15px}
.cta__mail a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--accent)}

/* footer */
.foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  max-width:calc(var(--wrap) + 2 * var(--pad));margin:clamp(72px,9vw,120px) auto 0;
  position:relative;padding:26px var(--pad) max(28px,env(safe-area-inset-bottom));font-size:14px;color:var(--faint);
}
.foot::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:var(--line)}
.foot__links{display:flex;gap:20px}
.foot a{color:var(--muted);text-decoration:none;transition:color .25s}
.foot a:hover{color:var(--ink)}
.foot a[aria-current]{color:var(--ink)}

/* ---------- privacy / terms ---------- */
.doc-wrap{max-width:880px;margin:0 auto;padding:clamp(24px,5vw,48px) var(--pad) 0}
.doc h1{font-size:clamp(44px,8.5vw,84px);line-height:1}
.lead{margin-top:24px;max-width:40em;font-size:clamp(17px,2vw,19px);line-height:1.6;color:var(--muted);text-wrap:pretty}
.sec{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:32px 0;border-top:1px solid var(--line)}
.lead+.sec{margin-top:52px}
.sec__n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent);padding-top:5px}
.sec h2{font-size:21px;letter-spacing:-.02em;line-height:1.3;margin-bottom:12px}
.sec p,.sec li{font-size:16px;line-height:1.72;color:var(--body)}
.sec p+p,.sec p+ul,.sec ul+p{margin-top:12px}
.sec ul{padding-left:20px}
.sec li+li{margin-top:6px}
.sec a,.lead a{color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 65%,transparent);text-underline-offset:3px}
.sec a:hover{text-decoration-color:var(--accent)}
.doc .foot{max-width:calc(880px + 2 * var(--pad));margin-top:32px}
.foot__date{color:var(--faint)}

/* 404 */
.lost{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:calc(100svh - 220px);padding:40px var(--pad);text-align:center}
.lost__code{font-size:clamp(96px,22vw,220px);font-weight:700;letter-spacing:-.06em;line-height:.9;
  background:linear-gradient(180deg,var(--ink) 30%,color-mix(in srgb,var(--ink) 30%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent}
.lost p:not(.lost__code){max-width:30em;color:var(--body);font-size:18px}

/* entrance */
.rise{animation:rise 1.1s var(--ease-out) both}
.rise--1{animation-delay:.15s}.rise--2{animation-delay:.35s}.rise--3{animation-delay:.55s}
@keyframes rise{from{opacity:.01;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero{grid-template-columns:1fr;min-height:0;text-align:center;justify-items:center}
  .intro{margin-inline:auto}
  .facts{justify-content:center}
  .timer{width:min(100%,560px)}
  .gears{grid-template-columns:1fr}
  .gear__go{margin-top:0}
  .split{grid-template-columns:1fr}
  .split .table-card{grid-row:auto}
  .sect--faq{grid-template-columns:1fr}
  .sect--faq .sect__head{position:static}
}
@media (max-width:720px){
  .nav{gap:12px;padding-block:12px}
  .nav__links{display:none}
  .nav__yt{margin-left:auto}
  .brand{font-size:18px}
  h1{font-size:clamp(42px,12vw,64px)}
  .timer{border-radius:26px;padding:20px 14px}
  .presets{grid-template-columns:repeat(4,minmax(0,1fr))}
  .presets button{font-size:13.5px}
  .controls{flex-wrap:wrap;justify-content:space-between}
  .go{flex:1 1 100%;order:-1}
  .tool{width:42px;height:42px}
  .custom{height:48px}
  .custom__step{width:38px;height:38px}
  .lib{padding:16px;border-radius:22px}
  .lib__count{margin-left:0}
  .tiles--min{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px}
  .tile{height:62px;border-radius:12px}
  .tile b{font-size:19px}
  .tile span{font-size:10px}
  .tiles--hour{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
  .tiles--hour .tile{height:68px}
  .tiles--hour .tile b{font-size:21px}
  .gear,.table-card,.note{padding:22px;border-radius:20px}
  table{font-size:14px}
  .qa summary{padding:18px}
  .qa__a{padding:0 18px 20px}
  .qa h3{font-size:16px}
  .sec{grid-template-columns:1fr;gap:6px}
  .foot{justify-content:center;text-align:center}
}
@media (max-width:360px){
  .nav__yt span{display:none}
  .nav__yt{padding:8px 10px}
  .custom__step{width:32px}
  .tools{gap:4px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rise{animation:none}
}