@font-face{font-family:"Tenor Sans";src:url(/fonts/tenor-sans.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Mulish";src:url(/fonts/mulish.woff2) format("woff2");font-weight:300 700;font-display:swap}
:root{--sage:#27332c;--sage2:#34443a;--sand:#efe2cc;--clay:#c4704f;--clay2:#9c5038;--sun:#f3c48a}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--sage);color:var(--sand);font:400 15px/1.55 "Mulish",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.room{position:relative;height:100vh;height:100svh;min-height:700px;overflow:hidden;display:flex;flex-direction:column;padding:max(28px,env(safe-area-inset-top)) 64px max(34px,env(safe-area-inset-bottom));
  background:radial-gradient(120% 70% at 50% 108%,#45563f 0%,transparent 60%),linear-gradient(180deg,#1f2a24 0%,var(--sage) 45%,var(--sage2) 100%)}
.glow{position:absolute;left:50%;top:22%;width:640px;height:640px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(243,196,138,.34) 0%,rgba(243,196,138,.10) 38%,transparent 66%);pointer-events:none;animation:breathe 10s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(.92)}40%{transform:translate(-50%,-50%) scale(1.06)}}

.mast{position:relative;text-align:center}
.word{font:400 clamp(30px,4.4vw,66px)/1 "Tenor Sans",sans-serif;letter-spacing:.62em;text-transform:uppercase;margin-right:-.62em;color:var(--sand)}
.horizon{display:flex;align-items:center;gap:22px;margin-top:20px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(239,226,204,.7)}
.horizon .hl{flex:1;height:1px;background:rgba(239,226,204,.38)}
.horizon a{text-decoration:none}

.arches{position:relative;flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-end;gap:34px;margin-top:26px}
.arch{position:relative;height:100%;aspect-ratio:3/4.3;border-radius:999px 999px 6px 6px;overflow:hidden;box-shadow:0 0 0 1px rgba(239,226,204,.45),0 30px 60px rgba(0,0,0,.25);transition:height .6s,opacity .6s}
.arch img{width:100%;height:100%;object-fit:cover;display:block}
.arch.side{height:64%;opacity:.55;filter:saturate(.7)}
.arch figcaption{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.arch.main figcaption{display:none}

.now{position:relative;text-align:center;margin:18px 0 18px}
.phase{font:400 30px/1 "Tenor Sans";letter-spacing:.14em;text-transform:uppercase}
.phase .clock{font:300 15px/1 "Mulish";letter-spacing:.12em;margin-left:14px;color:rgba(239,226,204,.75);font-variant-numeric:tabular-nums}
.song{font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-top:10px;color:rgba(239,226,204,.75)}

.floor{position:relative;display:flex;align-items:center;gap:26px}
.breath{position:relative;width:64px;height:64px;flex:none;display:grid;place-items:center}
.breath .ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--sand);animation:inout 10s ease-in-out infinite}
.breath .lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase}
@keyframes inout{0%,100%{transform:scale(.78);opacity:.6}40%{transform:scale(1.05);opacity:1}}
.track{position:relative;flex:1;height:118px}
.notches{position:absolute;left:0;right:0;bottom:6px;top:0;border-bottom:1px dashed rgba(239,226,204,.28)}
.notch{position:absolute;top:0;bottom:-6px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.14em;color:rgba(239,226,204,.55);white-space:nowrap}
.notch::after{content:"";width:1px;height:10px;background:rgba(239,226,204,.45)}
.notch.on{color:var(--sun)}
.notch.on::before{background:var(--sun)}

.mat{position:absolute;left:0;bottom:22px;height:74px;width:0;border-radius:8px 0 0 8px;overflow:hidden;
  background:linear-gradient(180deg,#d07b59 0%,var(--clay) 55%,#b6623f 100%);box-shadow:0 18px 30px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.06);transition:width .7s cubic-bezier(.3,.7,.2,1)}
.mat::before{content:"";position:absolute;inset:0;opacity:.18;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(0,0,0,.25) 6px 7px)}
.segs{position:absolute;inset:0}
.seg{position:absolute;top:0;bottom:0;border-right:1px solid rgba(255,235,210,.35);cursor:pointer}
.seg:hover{background:rgba(255,235,210,.08)}
.seg.done{background:rgba(60,20,10,.14)}
.phases{position:absolute;inset:0;pointer-events:none}
.ph{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;padding:9px 0 9px 12px;border-left:2px solid rgba(255,240,220,.7)}
.ph:first-child{border-left:0}
.ph.narrow b{visibility:hidden}
.ph b{font:400 11px/1 "Tenor Sans";letter-spacing:.22em;text-transform:uppercase;color:#fff3e4;white-space:nowrap}
.ph svg{width:30px;height:30px;stroke:#fff3e4;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.bead{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 6px rgba(243,196,138,.25),0 0 24px rgba(243,196,138,.9);z-index:2}
.roll{position:absolute;bottom:14px;width:46px;height:90px;margin-left:-14px;border-radius:23px;cursor:ew-resize;touch-action:none;
  background:radial-gradient(circle at 50% 50%,#8a432d 0 7px,#b45e3e 8px 11px,#9c5038 12px 15px,#c4704f 16px 19px,#a6573b 20px 23px) 50% 50%/46px 46px no-repeat,
  linear-gradient(90deg,#8d4630 0%,#cf7b58 35%,#dd8c66 50%,#b4613f 80%,#7d3d29 100%);
  box-shadow:0 16px 26px rgba(0,0,0,.35);transition:left .7s cubic-bezier(.3,.7,.2,1)}
.roll span{position:absolute;left:50%;top:-16px;width:1px;height:10px;background:var(--sun)}
.tip{position:absolute;top:22px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(239,226,204,.55);white-space:nowrap;transition:left .7s;margin-left:46px}

.practice{background:#1f2a24;padding:110px 64px}
.pr-in{max-width:820px;margin:0 auto}
.practice h2{font:400 42px/1.15 "Tenor Sans";letter-spacing:.04em;color:var(--sand)}
.practice p{margin-top:22px;font-size:17px;color:rgba(239,226,204,.8)}
.practice .credit{font-weight:700;color:var(--sun)}
.foot{display:flex;justify-content:space-between;gap:16px;padding:26px 64px max(40px,env(safe-area-inset-bottom));font-size:12px;color:rgba(239,226,204,.55);border-top:1px solid rgba(239,226,204,.1);background:#1f2a24}

@media (max-width:760px){
  .room{padding:max(22px,env(safe-area-inset-top)) 18px max(26px,env(safe-area-inset-bottom));min-height:560px}
  .word{font-size:21px;letter-spacing:.42em;margin-right:-.42em}
  .horizon{font-size:9px;gap:12px;margin-top:14px;letter-spacing:.24em}
  .glow{width:420px;height:420px;top:30%}
  .arches{gap:0;margin-top:22px}
  .arch.main{z-index:2;height:100%}
  .arch.side{height:58%;margin:0 -34px;opacity:.45}
  .arch.side figcaption{display:none}
  .phase{font-size:22px}
  .phase .clock{display:block;margin:10px 0 0}
  .song{font-size:11px}
  .floor{gap:10px}
  .breath{width:44px;height:44px}
  .breath .lbl{font-size:8px;letter-spacing:.12em}
  .track{height:104px}
  .mat{height:60px;bottom:24px}
  .ph{padding:7px 0 7px 6px}
  .ph b{font-size:0}
  .ph svg{width:22px;height:22px}
  .roll{width:34px;height:74px;margin-left:-10px;background-size:34px 34px,auto}
  .notch{font-size:9px}
  .tip{display:none}
  .practice{padding:70px 24px}
  .practice h2{font-size:28px}
  .practice p{font-size:15px}
  .foot{padding:22px 24px 34px}
}

.copy{margin-top:18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sun);border-bottom:1px solid currentColor;padding-bottom:3px}
.roll:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--sun);outline-offset:4px}
.room.done .bead{background:var(--sand)}
.room.done .phase #phase{color:var(--sun)}
/* persistent player: a breathing pebble bottom-right once the room scrolls away */
.chip{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:20;display:flex;flex-direction:row-reverse;align-items:center;gap:12px;padding:6px 6px 6px 16px;border-radius:40px;
  background:rgba(31,42,36,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(239,226,204,.25),0 14px 30px rgba(0,0,0,.35);color:var(--sand);transition:opacity .4s,transform .4s}
.chip[hidden]{display:flex;opacity:0;pointer-events:none;transform:translateY(16px)}
.chip button{position:relative;width:44px;height:44px;display:grid;place-items:center;font-size:10px;color:var(--sun)}
.chip svg{position:absolute;inset:0;transform:rotate(-90deg)}
.chip circle{fill:none;stroke-width:2}
.chip .trk{stroke:rgba(239,226,204,.2)}
.chip .prg{stroke:var(--sun);stroke-dasharray:125.7;stroke-dashoffset:125.7;stroke-linecap:round}
.chip-txt{display:flex;flex-direction:column;font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.3}
.chip-txt b{font:400 14px/1 "Tenor Sans";letter-spacing:.18em}
.nf{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#1f2a24,#34443a)}
.nf main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:50px 24px;gap:14px}
.nf-arch{width:180px;aspect-ratio:3/4;border-radius:999px 999px 6px 6px;overflow:hidden;box-shadow:0 0 0 1px rgba(239,226,204,.45)}
.nf-arch img{width:100%;height:100%;object-fit:cover;display:block}
.nf h1{font:400 clamp(26px,4vw,40px)/1.1 "Tenor Sans";letter-spacing:.14em;text-transform:uppercase;margin-top:18px}
.nf main p{color:rgba(239,226,204,.8)}

/* an empty arch keeps the row symmetric at the first and last phase */
.arch.empty{background:transparent;box-shadow:inset 0 0 0 1px rgba(239,226,204,.32);opacity:.7;filter:none}
.arch.empty img{display:none}
.arch.empty figcaption{top:50%;bottom:auto;transform:translateY(-50%);color:rgba(239,226,204,.7);text-shadow:none}
.status{min-height:1.4em;margin-top:8px;font-size:12px;letter-spacing:.12em;color:var(--sun)}
.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 14px;background:var(--sand);color:var(--sage);font-size:13px;border-radius:6px}
.skip:focus{top:12px}
.phasesec{background:#1f2a24;padding:10px 64px 90px}
.phasesec>.pr-in>p{margin-top:18px;font-size:16px;color:rgba(239,226,204,.8);max-width:720px}
.phasesec h2,.faq h2{font:400 34px/1.15 "Tenor Sans";letter-spacing:.04em;color:var(--sand)}
.phlist{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.phc{display:grid;grid-template-columns:84px 1fr;gap:18px;padding:18px;border-radius:14px;background:#26322b;box-shadow:inset 0 0 0 1px rgba(239,226,204,.1)}
.phc img{width:84px;height:112px;object-fit:cover;border-radius:42px 42px 4px 4px}
.phc h3{font:400 17px/1.2 "Tenor Sans";letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.phc h3 span{color:var(--sun);margin-right:6px}
.phc p{font-size:13.5px;margin-top:6px;color:rgba(239,226,204,.8)}
.phc ul{list-style:none;margin-top:10px;font-size:13px;line-height:1.75}
.phc li span{font-size:11.5px;color:rgba(239,226,204,.62)}
.faq{background:#1f2a24;padding:20px 64px 100px}
.faq details{border-top:1px solid rgba(239,226,204,.14);padding:18px 0}
.faq h2{margin-bottom:26px}
.faq details:last-child{border-bottom:1px solid rgba(239,226,204,.14)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-size:16px;font-weight:600;color:var(--sand)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--sun);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:10px;font-size:15px;color:rgba(239,226,204,.8);max-width:700px}
.foot a{text-decoration:none;border-bottom:1px solid rgba(239,226,204,.3)}
@media (max-width:760px){
  .phasesec{padding:0 24px 60px}.faq{padding:10px 24px 70px}
  .phasesec h2,.faq h2{font-size:26px}
  .phlist{grid-template-columns:1fr;margin-top:28px}
  .phc{grid-template-columns:64px 1fr;padding:14px;gap:14px}
  .phc img{width:64px;height:86px}
  .status{font-size:10.5px}
  .foot{flex-direction:column}
}
@media (max-width:360px){.word{font-size:18px;letter-spacing:.34em;margin-right:-.34em}}
@media (prefers-reduced-motion:reduce){
  .glow,.breath .ring{animation:none!important}
  *,*::before,*::after{transition-duration:.01ms!important}
}