button,input,select { font:inherit; }
button { touch-action:manipulation; }
[hidden] { display:none!important; }
:focus-visible { outline:2px solid #fbf2e3; outline-offset:5px; }
.wordmark { display:none; }
#pebli-touch { position:fixed; top:0; left:0; min-width:48px; min-height:48px; padding:0; border:0; border-radius:46% 46% 36% 36% / 65% 65% 35% 35%; background:transparent; cursor:pointer; touch-action:manipulation; }
#pebli-touch:focus-visible { outline:2px solid #f4f0e2b0; outline-offset:12px; }
#pebli-touch:active { background:#dfefff08; }
#corner { display:none; }
#valley-fog { position:fixed; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; visibility:hidden; }
#scene { z-index:4; }
.tap-hint { bottom:18%; margin:0; padding:12px 24px; border:0; background:none; font:500 24px/1.4 'Fraunces',serif; color:#fbf2e3; text-shadow:0 2px 18px #18304380; white-space:nowrap; }
.tap-hint.show { pointer-events:auto; cursor:pointer; }
#arrival-more { position:fixed; bottom:calc(18% - 46px); left:50%; transform:translateX(-50%); padding:12px 20px; min-height:44px; border:0; background:none; color:#fbf2e3; font-size:12px; text-shadow:0 1px 8px #183043cc; opacity:.75; visibility:hidden; cursor:pointer; white-space:nowrap; }
body.arriving #arrival-more { visibility:visible; }
#arrival-more:hover { opacity:1; }
#home { position:fixed; inset:0; display:none; flex-direction:column; align-items:center; justify-content:flex-end; padding:0 24px 10vh; background:none; pointer-events:none; }
body.home #home { display:flex; }
#home>* { pointer-events:auto; }
#home-prompt { font:400 13px/1.6 'Inter',sans-serif; color:#fbf2e3; opacity:.86; margin:0 0 20px; text-align:center; letter-spacing:0; text-shadow:0 1px 14px #183043cc; }
#home-needs { display:flex; flex-direction:row; align-items:center; justify-content:center; width:auto; max-width:none; gap:22px; }
.need { padding:10px 12px; min-height:44px; border:0; border-radius:0; color:#fbf2e3; background:none; font:500 25px/1.3 'Fraunces',serif; text-shadow:0 2px 14px #18304380; transition:opacity .2s,transform .2s; cursor:pointer; }
.need:hover { opacity:.75; }
.need:active { transform:translateY(2px); }
.need.dur { font-size:23px; }
#home-back { background:none; border:0; padding:12px 20px; min-height:44px; margin:17px 0 0; color:#fbf2e3; opacity:.65; font:400 12px 'Inter',sans-serif; text-shadow:0 1px 8px #183043cc; cursor:pointer; letter-spacing:0; }
#home-back:hover { opacity:1; }
.skip { border:0; background:none; font:12px 'Inter',sans-serif; padding:12px; }
#player:not(.show),.skip:not(.show),.gate:not(.show),.tap-hint:not(.show) { visibility:hidden; }
body.pdim #player.show:has(:focus-visible) { opacity:1; pointer-events:auto; }
#ptitle { font:500 clamp(22px,3vw,32px)/1.35 'Fraunces',serif; }
#playback-status { max-width:440px; color:#fbf2e3; font:12px/1.6 'Inter',sans-serif; text-shadow:0 1px 6px #183043; padding:0 20px; margin:15px auto 0; }
#cap .line.sub { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(17px,2.3vw,24px); }
#studio-backdrop { position:fixed; inset:0; width:100%; height:100%; z-index:29; background:none; border:0; }
#dbg { position:fixed; inset:auto 16px 16px auto; width:300px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; padding:18px; border:1px solid #f6e7d225; border-radius:14px; background:#1d2529ed; backdrop-filter:blur(10px); color:#f6e7d2; box-shadow:0 12px 40px #13233430; font:11px/1.5 'Inter',sans-serif; }
.studio-header { display:flex; align-items:center; justify-content:space-between; gap:15px; }
#dbg h2 { font:500 14px 'Inter',sans-serif; margin:0; }
#dbg #studio-close { width:32px; height:32px; padding:0; margin:-5px -4px 0 0; background:none; color:#f6e7d2; font-size:23px; line-height:1; }
.studio-intro { color:#bbc1bb; font-size:10px; margin:10px 0 16px; }
#design-templates { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
#dbg .scene-preset { display:block; width:100%; padding:5px; margin:0; border:1px solid #f6e7d225; border-radius:8px; background:none; color:#f6e7d2; font:11px 'Inter',sans-serif; text-align:left; overflow:hidden; }
#dbg .scene-preset[aria-pressed="true"] { border-color:#f6e7d2a0; background:#f6e7d213; }
.scene-thumb { display:block; position:relative; aspect-ratio:1.8; background-color:#78a4d8; background-size:cover; background-position:50% 62%; border-radius:4px; overflow:hidden; }
.scene-thumb img { position:absolute; width:24px; height:28px; object-fit:contain; left:calc(50% - 12px); top:calc(50% - 11px); filter:drop-shadow(0 3px 3px #16243140); }
.scene-preset-label { display:flex; align-items:center; justify-content:space-between; padding:8px 3px 3px; }
.scene-preset-label::after { content:""; width:5px; height:5px; border-radius:50%; background:transparent; }
[aria-pressed="true"]>.scene-preset-label::after { background:#f6e7d2; }
.studio-preview { margin-top:20px; }
#dbg h3 { font:500 11px 'Inter',sans-serif; margin:0 0 8px; }
.studio-preview>div,.studio-actions { display:flex; gap:6px; }
#dbg button { color:#f6e7d2; background:#f6e7d216; border:1px solid transparent; border-radius:6px; padding:7px 9px; font:10px 'Inter',sans-serif; margin:4px 4px 0 0; cursor:pointer; }
#dbg button:hover { border-color:#f6e7d255; }
#dbg .studio-preview button { flex:1; margin:0; min-height:34px; }
#dbg .studio-preview button[aria-pressed="true"] { background:#f6e7d22b; }
.studio-actions { margin-top:14px; }
#dbg .studio-actions button { margin:0; min-height:34px; }
#studio-status { font-size:10px; line-height:1.6; color:#bbc1bb; margin:12px 0 0; overflow-wrap:anywhere; user-select:text; }
.studio-finetune { border-top:1px solid #f6e7d225; margin-top:15px; }
.studio-finetune summary { cursor:pointer; padding:14px 0; font-size:10px; }
#dbg .t { color:#f6e7d2; font-size:11px; }
#dbg .row { gap:8px; margin:10px 0; }
#dbg .row .k { color:#bbc1bb; width:48px; font-size:10px; }
#dbg .row .v { font-size:10px; color:#f6e7d2; }
#dbg .row input { min-width:0; width:100%; accent-color:#d0c4ad; }
#dbg .hint { color:#bbc1bb; line-height:1.5; font-size:9px; }
.studio-footnote { color:#bbc1bb; font-size:9px; padding-top:12px; border-top:1px solid #f6e7d225; }
.home-notice { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:28; width:max-content; max-width:calc(100vw - 40px); padding:12px 18px; background:#1d2529e6; border-radius:8px; color:#f6e7d2; font:12px/1.7 'Inter',sans-serif; text-align:center; }
@media(max-width:600px) {
  .wordmark { font-size:22px; }
  .tap-hint { font-size:22px; bottom:18%; }
  #home { padding-bottom:max(6vh,env(safe-area-inset-bottom)); }
  #home-prompt { font-size:12px; margin-bottom:14px; }
  #home-needs { flex-direction:column; gap:3px; }
  .need { font-size:25px; padding:6px 24px; }
  #home-back { margin-top:9px; }
}
@media(max-height:600px) {
  #home { padding-bottom:3vh; }
  #home-prompt { margin-bottom:8px; font-size:12px; }
  #home-needs { flex-direction:row; flex-wrap:wrap; gap:5px; max-width:100%; }
  .need,.need.dur { font-size:20px; padding:5px 12px; }
  #home-back { margin-top:3px; }
  .tap-hint { bottom:13%; font-size:21px; }
  #arrival-more { bottom:calc(13% - 38px); font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

#capscrim { height:60vh; opacity:0; transition:opacity .6s; background:linear-gradient(to top,#0816229c,transparent); }
body[data-scene="night"] { background:#081127; }
body.home #capscrim,body.coursing #capscrim,body.playing #capscrim,body.meditating #capscrim { opacity:1; }
#home { padding:0 24px max(28px,5vh,env(safe-area-inset-bottom)); }
#home-prompt { margin:0 0 16px; font:400 13px/1.6 'Inter',sans-serif; text-shadow:0 1px 12px #091725; }
#home-prompt:empty { display:none; }
#home-needs { display:flex; flex-direction:column; gap:4px; width:min(100%,340px); }
.need { display:flex; align-items:center; gap:18px; width:100%; min-height:60px; margin:0; padding:12px 16px; border:1px solid transparent; border-radius:18px; text-align:left; background:none; color:#fbf2e3; text-shadow:0 1px 12px #091725a0; cursor:pointer; }
.need:hover,.need:focus-visible { background:#e7f0f00c; border-color:#e7f0f022; }
.need:active { background:#e7f0f020; }
.need:focus-visible { outline-offset:-3px; }
.need-copy { display:flex; flex:1; flex-direction:column; gap:3px; }
.need-title { font:500 25px/1.15 'Fraunces',serif; }
.need-icon { display:grid; place-items:center; width:36px; height:36px; color:#e6e8e0b3; flex-shrink:0; }
.need-icon svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.need-chevron { font:400 24px/1 'Inter',sans-serif; color:#e6e8e088; }
#home-back { min-width:80px; min-height:48px; margin:12px 0 0; padding:12px 20px; font:400 13px/1.5 'Inter',sans-serif; }
#home-needs[data-layout="moments"],#home-needs[data-layout="duration"] { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#home-needs[data-layout="moments"] .need,#home-needs[data-layout="duration"] .need { justify-content:center; min-height:60px; padding:12px; border:1px solid #f0f1e322; border-radius:22px; text-align:center; font:500 22px/1.4 'Fraunces',serif; background:#10233814; }
#home-needs[data-layout="duration"] .need:last-child { grid-column:1 / -1; }
#player .ctrls button { min-width:52px; min-height:52px; }
#player .pclose,.skip { min-width:48px; min-height:48px; }
.skip { font-size:14px; }
#dbg #studio-close { width:44px; height:44px; }
#dbg .studio-preview button,#dbg .studio-actions button { min-height:44px; font-size:11px; }
.studio-select { display:grid; gap:7px; margin:16px 0; color:#bbc1bb; }
.studio-select select { width:100%; min-height:44px; padding:8px; border:1px solid #f6e7d233; border-radius:7px; background:#273036; color:#f6e7d2; font-size:12px; }
#dbg input[type="range"] { min-height:32px; }
#course-view { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:0 20px max(22px,4vh,env(safe-area-inset-bottom)); text-align:center; pointer-events:none; color:#fbf2e3; }
#course-view>* { pointer-events:auto; }
.course-heading h1 { max-width:min(500px,85vw); font:500 28px/1.2 'Fraunces',serif; margin:0 0 10px; }
.course-heading p { font:400 12px/1.5 'Inter',sans-serif; margin:0; opacity:.8; }
#course-preview-note { font-size:10px; margin-bottom:10px; letter-spacing:.03em; }
#course-path { width:100%; max-height:clamp(144px,28dvh,252px); margin:18px 0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#e3e7e140 transparent; overscroll-behavior-y:contain; }
#course-rail { position:relative; margin:auto; }
.course-stop { position:relative; display:flex; align-items:center; gap:18px; width:100%; min-height:72px; padding:12px 16px; border:1px solid transparent; border-radius:14px; background:none; color:#e7eceb; cursor:pointer; text-align:left; }
.course-stop[aria-pressed="true"] { border-color:#e7ebdc38; background:#e7ebdc09; }
.course-stop-copy { display:flex; flex-direction:column; gap:5px; min-width:0; }
.course-stop-title { font:500 19px/1.25 'Fraunces',serif; overflow-wrap:anywhere; }
.course-stop-meta { font:400 12px/1.4 'Inter',sans-serif; opacity:.75; }
.course-stop .path-stone { flex-shrink:0; }
.path-stone { display:grid; place-items:center; width:36px; height:40px; border:1px solid #e5e9e555; border-radius:48% 46% 41% 39%; font:500 12px 'Inter',sans-serif; background:linear-gradient(135deg,#afbdc62b,#20344780); box-shadow:0 5px 12px #06182d33; transition:background .25s,box-shadow .25s; }
[data-state="completed"] .path-stone { background:linear-gradient(135deg,#d3dace80,#8b9ca17a); border-color:#d3daceaa; color:#f9f8ef; }
[data-state="next"] .path-stone { border-color:#edf0db; }
.course-stop[aria-pressed="true"] .path-stone { box-shadow:0 0 0 5px #e7ebdc15,0 0 0 6px #e7ebdc55,0 5px 12px #06182d33; }
.course-selection { min-height:0; max-width:min(480px,85vw); margin-bottom:20px; }
#course-step-state { margin:0 0 7px; font:400 11px/1.4 'Inter',sans-serif; color:#e2e8ddd0; }
#course-lesson-title { margin:0 0 7px; font:500 24px/1.2 'Fraunces',serif; }
#course-lesson-meta { margin:0; font:400 12px/1.5 'Inter',sans-serif; opacity:.75; }
#course-lesson-meta:empty { display:none; }
#course-title,#course-lesson-title,#ptitle { overflow-wrap:anywhere; }
.scene-action { min-height:54px; min-width:220px; max-width:calc(100% - 16px); margin-top:8px; padding:14px 24px; border:1px solid #f6f2e166; border-radius:28px; background:#dfe7e414; color:#fbf2e3; font:500 15px/1.4 'Inter',sans-serif; cursor:pointer; }
.scene-action:disabled { opacity:.6; cursor:default; }
.scene-back { min-height:48px; min-width:80px; padding:12px 20px; margin-top:7px; background:none; border:0; color:#fbf2e3b3; font:400 13px/1.5 'Inter',sans-serif; cursor:pointer; }
#course-browse { align-self:flex-start; margin:0 0 6px; padding:8px 4px; }
#course-catalog { width:100%; margin-top:12px; }
.course-card { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; min-height:100px; padding:18px 12px; border:0; border-bottom:1px solid #e7ebdc20; background:none; color:inherit; text-align:left; cursor:pointer; }
.course-card-copy { display:flex; flex-direction:column; gap:6px; }
.course-card-state,.course-card-meta,.course-next-label { font:400 12px/1.4 'Inter',sans-serif; opacity:.75; }
.course-card-title,.course-next-title { font:500 22px/1.25 'Fraunces',serif; overflow-wrap:anywhere; }
.course-card-arrow { font:300 28px/1 'Inter',sans-serif; opacity:.65; }
#course-next { display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; min-height:64px; margin-top:18px; padding:14px 8px 4px; border:0; border-top:1px solid #e7ebdc20; background:none; color:inherit; cursor:pointer; }
#course-count:empty { display:none; }
#course-view .course-heading { flex-shrink:0; }
@media(max-height:650px) {
  #course-view { padding-bottom:max(8px,env(safe-area-inset-bottom)); }
  .course-heading h1 { font-size:24px; margin-bottom:5px; }
  #course-lesson-title { font-size:22px; }
  .scene-back { margin-top:1px; }
}
@media(max-width:600px) {
  #home { padding-bottom:max(24px,env(safe-area-inset-bottom)); }
  #home-needs { width:min(100%,320px); }
  #home-prompt { margin-bottom:14px; }
}
@media(max-height:650px) and (max-width:600px) {
  #home { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .need { min-height:58px; padding:8px 12px; }
  .need-title { font-size:23px; }
  #home-back { margin-top:4px; }
}
@media(max-height:550px) and (orientation:landscape) {
  #home { inset:0 4% 0 50%; justify-content:center; padding:20px 0; }
  #home-needs { width:min(100%,320px); }
  .need { min-height:56px; padding:8px 12px; }
  .need-title { font-size:22px; }
  #home-back { margin-top:4px; }
  #course-view { inset:0 2% 0 48%; padding:12px; justify-content:center; }
  #course-preview-note { margin-bottom:4px; }
}

#home { inset:auto; top:60%; left:50%; width:min(360px,calc(100% - 48px)); height:auto; padding:0; transform:translateX(-50%); justify-content:flex-start; overflow-y:auto; scrollbar-width:none; overscroll-behavior:contain; }
#home-needs { width:100%; }
#home-needs[data-layout="duration"] { display:block; }
.timer-setup { display:flex; flex-direction:column; align-items:center; gap:24px; width:100%; }
.timer-setter { display:flex; align-items:center; justify-content:center; gap:20px; }
.timer-adjust { display:grid; place-items:center; width:52px; height:52px; border:1px solid #e7ebdc45; border-radius:50%; background:#dfe7e408; color:#fbf2e3; font:300 27px/1 'Inter',sans-serif; cursor:pointer; }
.timer-adjust:disabled { opacity:.3; cursor:default; }
.timer-adjust:not(:disabled):hover { background:#dfe7e418; }
.timer-duration { display:flex; flex-direction:column; align-items:center; gap:4px; color:#fbf2e3; font:400 12px/1.4 'Inter',sans-serif; }
.timer-duration input { width:108px; min-height:56px; padding:0; border:0; border-radius:8px; background:none; color:inherit; font:500 44px/1.2 'Fraunces',serif; font-variant-numeric:tabular-nums; text-align:center; appearance:textfield; }
.timer-duration input::-webkit-inner-spin-button,.timer-duration input::-webkit-outer-spin-button { appearance:none; margin:0; }
.timer-duration input[aria-invalid="true"] { outline:1px solid #f3cba7; outline-offset:3px; }
.timer-setup .scene-action { margin-top:0; }
#course-view { inset:auto; top:50%; left:50%; width:min(560px,calc(100% - 40px)); height:auto; padding:0 0 8px; transform:translateX(-50%); justify-content:flex-start; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#e3e7e140 transparent; overscroll-behavior:contain; }
#home>*,#course-view>* { flex-shrink:0; }
#course-title:focus,#course-lesson-title:focus { outline:none; }
#course-view[data-introductory="true"] .course-selection { min-height:0; margin-bottom:20px; }
@media(max-height:550px) and (orientation:landscape) {
  #home { left:75%; width:min(340px,44%); transform:translate(-50%,-50%); }
  #course-view { left:74%; width:46%; transform:translate(-50%,-50%); }
  #course-path { max-height:clamp(72px,calc(100dvh - 258px),180px); margin:8px 0; }
  #course-next { display:none; }
}

#ptitle { left:50%; right:auto; width:min(480px,calc(100% - 48px)); padding:0; transform:translateX(-50%); font:500 clamp(22px,3vw,30px)/1.25 'Fraunces',serif; letter-spacing:-.015em; text-wrap:balance; }
#ptime { font-weight:400; letter-spacing:.04em; }
#ptimer { min-height:27px; }
body:not(.playing):not(.meditating) #ptimer,body:not(.playing) #ptitle { visibility:hidden; }
#player { bottom:auto; }
#player,#ptitle { transition:opacity .22s ease; }
body.pdim #player,body.pdim #ptitle { transition-duration:.6s; }
#player .ctrls { display:grid; grid-template-columns:52px 64px 52px; gap:22px; width:max-content; margin:auto; }
#player .play { grid-column:2; grid-row:1; width:64px; height:64px; border:1px solid #f4f2e394; background:#dce8e810; backdrop-filter:blur(6px); }
#player .play svg { width:23px; height:23px; }
#player .play[data-loading="true"] svg { fill:none; stroke:currentColor; animation:loading-turn 1.2s linear infinite; }
@keyframes loading-turn { to { transform:rotate(360deg); } }
#player .vol { grid-column:3; grid-row:1; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; opacity:.7; }
#player .vol svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
#player .vol:hover,#player .vol:focus-visible { background:#e8eeee0e; opacity:1; }
#player .nav.off,#player .nav:disabled { display:none; }
#player .ctrls:has(.nav:not(.off):not(:disabled)) { display:flex; }
#player .pclose,.skip { width:48px; height:48px; padding:0; font:300 28px/1 'Inter',sans-serif; top:calc(12px + env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right)); bottom:auto; }
#playback-status { font-size:13px; }
#playback-status:empty { display:none; }
body[data-stage="sit"] #pvol { display:none; }
@media(max-height:550px) {
  #player .play { width:56px; height:56px; }
  #player .ctrls { grid-template-columns:48px 56px 48px; gap:16px; }
  #ptitle { font-size:22px; }
  .timer-setter { gap:14px; }
  .timer-duration input { width:88px; }
}