:root{
  --sky-top:#1A2140; --sky-bottom:#0B0E1A;
  --ink:#E6E8F2; --muted:#8E95B2; --amber:#E9A25A;
  --card:rgba(255,255,255,.045); --line:rgba(230,232,242,.12);
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--sky-bottom)}
body{
  margin:0;min-height:100vh;color:var(--ink);font:17px/1.6 var(--sans);
  background:linear-gradient(180deg,var(--sky-top) 0,var(--sky-bottom) 720px) var(--sky-bottom);
  background-repeat:no-repeat;
  padding:0 16px env(safe-area-inset-bottom);
  -webkit-text-size-adjust:100%;
}
main,footer{max-width:680px;margin:0 auto}
a{color:var(--amber)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:8px}
header{text-align:center;padding:44px 0 8px}
@property --cut{syntax:"<percentage>";inherits:false;initial-value:46%}
.sky{position:relative;width:200px;height:250px;margin:0 auto -6px}
.sky::before{content:"";position:absolute;left:50%;top:14px;width:96px;height:96px;margin-left:-48px;border-radius:50%;
  box-shadow:0 0 20px 2px rgba(233,162,90,.26),0 0 60px 12px rgba(233,162,90,.12);opacity:.8;transition:opacity 1.6s ease,box-shadow 1.6s ease}
.is-playing .sky::before{opacity:1;box-shadow:0 0 28px 8px rgba(233,162,90,.5),0 0 96px 26px rgba(233,162,90,.3);animation:glow 6s ease-in-out infinite alternate}
@keyframes glow{to{box-shadow:0 0 36px 12px rgba(233,162,90,.6),0 0 120px 34px rgba(233,162,90,.36)}}
.moon{position:absolute;left:50%;top:14px;width:96px;height:96px;margin-left:-48px;border-radius:50%;
  background:
    radial-gradient(circle at 62% 72%,rgba(205,160,105,.26) 0 4.5%,transparent 5.5%),
    radial-gradient(circle at 36% 64%,rgba(205,160,105,.22) 0 3.2%,transparent 4.2%),
    radial-gradient(circle at 72% 40%,rgba(205,160,105,.2) 0 2.6%,transparent 3.6%),
    radial-gradient(circle at 30% 30%,rgba(220,175,125,.22) 0 10%,transparent 20%),
    radial-gradient(circle at 40% 38%,#FFF4E0 0,#FBE2B4 52%,#EDBD80 100%);
  -webkit-mask-image:radial-gradient(circle at 76% 28%,transparent var(--cut),#000 calc(var(--cut) + 5%));
  mask-image:radial-gradient(circle at 76% 28%,transparent var(--cut),#000 calc(var(--cut) + 5%));
  filter:saturate(.9) brightness(.9);transition:--cut 1.8s ease,filter 1.8s ease}
.is-playing .moon{--cut:-12%;filter:none}
.sparks{position:absolute;left:50%;top:96px;width:160px;height:170px;margin-left:-80px;pointer-events:none}
h1{font:600 clamp(28px,7vw,40px)/1.15 var(--serif);margin:0 0 10px;letter-spacing:-.01em}
.lede{color:var(--muted);margin:0 auto;max-width:34em}
.player{margin:28px 0;padding:24px 18px;background:var(--card);border:1px solid var(--line);border-radius:24px;text-align:center}
.play{
  width:112px;height:112px;border-radius:50%;border:0;cursor:pointer;color:#1A1208;
  background:var(--amber);display:inline-grid;place-items:center;
  box-shadow:0 8px 30px rgba(233,162,90,.3);transition:transform .15s;
}
.play:active{transform:scale(.96)}
.play svg{width:44px;height:44px;fill:currentColor}
.play .i-pause{display:none}
.play[aria-pressed="true"] .i-play{display:none}
.play[aria-pressed="true"] .i-pause{display:block}
.status{min-height:1.6em;margin:12px 0 18px;color:var(--muted);font-size:15px}
.colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;margin:0 0 22px;padding:0;border:0}
.colors legend,.row label{color:var(--muted);font-size:14px}
.colors legend{padding:0;margin:0 auto 10px}
.swatch{
  min-height:56px;padding:8px 10px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--ink);font:inherit;font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px
}
.swatch small{font-weight:400;color:var(--muted);font-size:12px}
.swatch[aria-checked="true"]{border-color:var(--amber);background:rgba(233,162,90,.14)}
.row{display:flex;align-items:center;gap:14px;margin:14px 0;text-align:left}
.row label{flex:0 0 76px}
.row input[type=range]{flex:1;min-width:0;height:44px;accent-color:var(--amber)}
.row select{flex:1;min-height:48px;font:inherit;color:var(--ink);background:#141a33;border:1px solid var(--line);border-radius:12px;padding:0 12px}
.hint{color:var(--muted);font-size:13px;margin:10px 0 0}
.promo{
  margin:0 0 40px;padding:20px;border-radius:20px;border:1px solid rgba(233,162,90,.4);
  background:linear-gradient(135deg,rgba(233,162,90,.14),rgba(233,162,90,.04));text-align:center
}
.promo p{margin:0 0 14px;font:400 19px/1.4 var(--serif)}
.btn{display:inline-block;min-height:48px;padding:11px 22px;border-radius:14px;background:var(--amber);color:#1A1208;font-weight:600;text-decoration:none}
section{margin:0 0 36px}
h2{font:600 24px/1.25 var(--serif);margin:0 0 12px}
h3{font:600 18px/1.3 var(--serif);margin:22px 0 4px;color:var(--amber)}
p{margin:0 0 12px}
details{border-top:1px solid var(--line);padding:4px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:600}
details p{color:var(--muted)}
footer{padding:20px 0 40px;color:var(--muted);font-size:14px;text-align:center}
.nosupport{display:none;color:#F2B0A0}
@media (prefers-reduced-motion:reduce){
  .moon,.sky::before{animation:none!important;transition:none!important}.play{transition:none}*{scroll-behavior:auto!important}
}
.spectra{margin:20px 0 8px}.spectra svg text{fill:var(--muted);font:11px/1 var(--sans)}.spectra .gl{stroke:rgba(230,232,242,.10);stroke-width:1}.spectra .ax{font-size:12px}.spectra figcaption{color:var(--muted);font-size:14px;margin-top:8px}
/* Sound picker: noise colors and nature sounds in one radio group */
.group-label{grid-column:1/-1;color:var(--muted);font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin:6px 0 -2px}
.group-label:first-of-type{margin-top:0}
.more{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;margin:0 0 36px;padding:0;list-style:none}
.more a{display:inline-block;min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:15px}
.more a[aria-current="page"]{border-color:var(--amber);color:var(--amber)}
/* iPhone/iPad: the app is the real answer (browsers stop audio when the screen locks) */
.ios-cta,.ios-bar{display:none}
.is-ios .ios-cta{display:block;margin:0 0 36px;padding:18px;border-radius:20px;border:1px solid rgba(233,162,90,.5);
  background:linear-gradient(135deg,rgba(233,162,90,.18),rgba(233,162,90,.05));text-align:center}
.ios-cta p{margin:0 0 12px;font-size:16px}
.ios-cta strong{display:block;font:600 20px/1.3 var(--serif);margin-bottom:4px;color:var(--ink)}
.ios-cta .btn{width:100%;max-width:340px}
.is-ios .ios-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;align-items:center;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(11,14,26,.94);border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.is-ios.bar-closed .ios-bar{display:none}
.is-ios body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.is-ios.bar-closed body{padding-bottom:env(safe-area-inset-bottom)}
.ios-bar img{border-radius:12px;flex:0 0 auto}
.ios-bar span{flex:1;min-width:0;font-size:14px;line-height:1.3}
.ios-bar span b{display:block;font-size:15px}
.ios-bar .btn{min-height:40px;padding:9px 16px;border-radius:999px;flex:0 0 auto}
.ios-bar button{flex:0 0 auto;width:36px;height:44px;border:0;background:none;color:var(--muted);font-size:22px;cursor:pointer}
.is-ios .promo{display:none}
.in-frame .ios-cta,.in-frame .ios-bar,.in-frame .more{display:none!important}
.in-frame body{padding-bottom:0!important}