/* Lake of Lumière (Healing Quest™ sanctuary prototype, Elyxium, Oct 2026) */
@font-face{font-family:"InterV";src:url(/fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#05060d;color:#f3efe6;font-family:"InterV",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#stage{position:absolute;inset:0}
#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#fx{pointer-events:none}
/* intro */
/* pass 5: touch-action:none only on the scene, so the intro and the sound panel can scroll on small phones */
#stage{touch-action:none}#intro{touch-action:pan-y}#tools button,#lang,#mixer button{touch-action:manipulation}#mixer{touch-action:pan-y}
/* intro (pass 5): a smaller title card and a short guide to the sanctuary. The whole screen still enters (click / a still tap), the button too. */
#intro{position:absolute;inset:0;z-index:20;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:clamp(12px,2.4vh,22px);
  padding:max(56px,calc(env(safe-area-inset-top) + 48px)) max(18px,env(safe-area-inset-right)) max(22px,calc(env(safe-area-inset-bottom) + 18px)) max(18px,env(safe-area-inset-left));
  background:#05060d url(assets/title-blur.webp) center/cover no-repeat;transition:opacity 1.4s ease,visibility 0s linear 1.4s}
#intro::before{content:"";position:fixed;inset:0;background:radial-gradient(120% 90% at 50% 40%,rgba(5,6,13,.42),rgba(5,6,13,.9));pointer-events:none}
#intro .card{position:relative;flex:none;width:min(500px,82vw,calc(27vh * 16 / 9));border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,226,170,.14),0 0 60px rgba(255,200,120,.10)}
#intro .card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
#intro .t{position:relative;text-align:center;max-width:760px;width:100%}
#intro .kick{margin:0 0 6px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,226,170,.78)}
#intro .world{margin:2px 0 4px;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(15px,1.6vw,18px);color:rgba(255,236,200,.88);letter-spacing:.06em}
#intro .name{font-size:clamp(26px,3.4vw,38px);font-weight:500;letter-spacing:.02em;margin:0;color:#ffe9b8;text-shadow:0 0 28px rgba(255,190,90,.4);font-family:Georgia,"Times New Roman",serif}
#intro .sub{font-size:clamp(14px,1.5vw,16.5px);color:rgba(243,239,230,.78);margin:6px 0 0;font-style:italic}
#intro .lead{margin:14px auto 0;max-width:560px;font-size:clamp(14px,1.5vw,15.5px);line-height:1.5;color:rgba(246,240,228,.86)}
#intro .how{list-style:none;margin:16px auto 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;text-align:left}
#intro .how li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,226,170,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#intro .how b{display:block;font-weight:600;font-size:14px;color:#fff1d4;margin-bottom:3px}
#intro .how span{font-size:13px;line-height:1.45;color:rgba(243,239,230,.74)}
#intro .ic{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(255,214,150,.16),rgba(255,214,150,.03));border:1px solid rgba(255,214,150,.25)}
#intro .ic svg{width:30px;height:30px;fill:none;stroke:#ffd89a;stroke-width:1.6;stroke-linecap:round}
#intro .ic svg .o{stroke:rgba(255,216,154,.32)}#intro .ic svg .f{fill:#fff1d4;stroke:none}#intro .ic svg .f2{fill:rgba(255,226,170,.85);stroke:none}
#intro .ic.chipic{flex-direction:column;gap:0;line-height:1;color:#fff;background:rgba(160,190,255,.2);border-color:rgba(170,200,255,.55);box-shadow:0 0 14px rgba(150,185,255,.3)}
#intro .ic.chipic i{font-style:normal;font-size:12.5px;font-weight:600;align-self:end}#intro .ic.chipic small{font-size:8.5px;opacity:.7;align-self:start}
#intro .enter{display:inline-block;margin-top:clamp(16px,2.6vh,24px);padding:14px 34px;border-radius:99px;font:600 16.5px/1 inherit;font-family:inherit;color:#fff7e6;
  background:rgba(255,214,150,.14);border:1px solid rgba(255,214,150,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:breathe 5s ease-in-out infinite;cursor:pointer;touch-action:manipulation}
#intro .enter:focus-visible{outline:2px solid #ffc978;outline-offset:3px}
#intro .hp{font-size:12.5px;color:rgba(243,239,230,.55);margin:10px 0 0}
#intro .marks{font-size:11px;letter-spacing:.04em;color:rgba(243,239,230,.42);margin:6px 0 0}
@media (max-width:640px){#intro .how{grid-template-columns:1fr;gap:8px}#intro .how li{padding:10px 12px;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(18,20,34,.55)}#intro .enter{animation:none;opacity:1}#intro .card{width:min(74vw,calc(22vh * 16 / 9))}#intro{justify-content:flex-start}
  #intro{padding-bottom:calc(max(22px,env(safe-area-inset-bottom) + 18px) + 70px)}
  #intro .enter{position:fixed;left:50%;transform:translateX(-50%);bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));z-index:3;margin:0;white-space:nowrap;background:rgba(58,42,22,.96);box-shadow:0 10px 30px rgba(0,0,0,.6)}
  #intro::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(110px + env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(5,6,13,.95),rgba(5,6,13,0));pointer-events:none;z-index:2}}
@media (max-height:560px) and (min-width:641px){#intro .card{width:min(300px,40vw)}#intro{justify-content:flex-start}}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(255,200,120,.0);opacity:.85}40%{box-shadow:0 0 28px 4px rgba(255,200,120,.28);opacity:1}}
.entered #intro{opacity:0;visibility:hidden;pointer-events:none}
/* minimal UI */
.ui{position:absolute;z-index:10;opacity:0;transition:opacity 1.2s ease .6s;pointer-events:none}
.entered .ui{opacity:1;pointer-events:auto}
#tools{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:flex;flex-direction:column;gap:10px}
#tools button,#lang{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(10,12,24,.32);color:rgba(255,246,230,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .3s,color .3s,border-color .3s}
#tools button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#tools button[aria-pressed="true"]{background:rgba(255,206,130,.22);border-color:rgba(255,206,130,.5);color:#fff3da}
#tools button:focus-visible,#lang:focus-visible,#intro .enter:focus-visible{outline:2px solid #ffc978;outline-offset:3px}
#tools button[hidden]{display:none}
#lang{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));font:600 13px/1 inherit;font-family:inherit;text-decoration:none;z-index:21}
#tag{left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));display:flex;gap:8px;align-items:center;flex-wrap:wrap;pointer-events:none!important}
#tag .pv{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:99px;background:rgba(255,206,130,.16);border:1px solid rgba(255,206,130,.35);color:#ffe2b0}
#tag .mk{font-size:11.5px;color:rgba(243,239,230,.6);text-shadow:0 1px 6px rgba(0,0,0,.6)}
#hint{left:50%;bottom:max(46px,calc(env(safe-area-inset-bottom) + 40px));transform:translateX(-50%);font-size:15px;color:rgba(255,244,225,.85);text-shadow:0 1px 12px rgba(0,0,0,.7);
  white-space:nowrap;pointer-events:none!important;transition:opacity 2.4s ease}
#hint.gone{opacity:0!important}
.noscript{position:absolute;inset:auto 0 20px;text-align:center;z-index:30}
/* sound panel (pass 2) */
#mixer{top:max(12px,env(safe-area-inset-top));right:calc(max(12px,env(safe-area-inset-right)) + 54px);width:min(360px,calc(100vw - 84px));max-height:calc(100vh - 24px);overflow:auto;
  padding:14px 16px 16px;border-radius:20px;background:rgba(10,12,26,.52);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 20px 60px rgba(0,0,0,.45);color:#f6efe2;font-size:14px;z-index:40;transition:opacity .35s ease,transform .35s ease;transform:translateY(0)}
#mixer[hidden]{display:block!important;opacity:0!important;pointer-events:none!important;transform:translateY(-6px);visibility:hidden}
.mx-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
#mx-t{margin:0;font-weight:600;font-size:15px;color:#ffe9b8;letter-spacing:.01em}
#mx-close{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:inherit;display:grid;place-items:center;cursor:pointer;padding:0}
#mx-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
#mixer .mute{width:100%;min-height:40px;margin:2px 0 8px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:inherit;font:600 14px/1 inherit;font-family:inherit;cursor:pointer}
#mixer .mute[aria-pressed="true"]{background:rgba(255,206,130,.22);border-color:rgba(255,206,130,.5);color:#fff3da}
#mixer .row{display:grid;grid-template-columns:118px 1fr 30px;align-items:center;gap:10px;min-height:44px}
#mixer .lab{font-size:13.5px;color:rgba(246,239,226,.9);line-height:1.2}
#mixer .lab small{display:block;font-size:10.5px;color:rgba(246,239,226,.55);margin-top:2px}
#mixer output{font-size:12px;color:rgba(246,239,226,.6);text-align:right;font-variant-numeric:tabular-nums}
#mixer input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;margin:0;cursor:pointer;touch-action:pan-x}
#mixer input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,rgba(255,206,130,.75) var(--v,50%),rgba(255,255,255,.16) var(--v,50%))}
#mixer input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.16)}
#mixer input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:rgba(255,206,130,.75)}
#mixer input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:#fff3da;border:0;box-shadow:0 0 0 4px rgba(255,206,130,.18),0 2px 8px rgba(0,0,0,.4)}
#mixer input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff3da;border:0;box-shadow:0 0 0 4px rgba(255,206,130,.18)}
#mixer input[type=range]:focus-visible{outline:2px solid #ffc978;outline-offset:2px;border-radius:6px}
#mixer .sol{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}
#mixer .chips{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:4px}
#mixer .chip{min-width:0;min-height:44px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;border-radius:99px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:rgba(246,239,226,.88);font:500 12.5px/1 inherit;font-family:inherit;cursor:pointer;font-variant-numeric:tabular-nums}
#mixer .chip[aria-pressed="true"]{background:rgba(160,190,255,.22);border-color:rgba(170,200,255,.6);color:#fff}
#mixer .chip:focus-visible,#mixer .mute:focus-visible,#mx-close:focus-visible{outline:2px solid #ffc978;outline-offset:2px}
#mixer .chip small{font-size:9.5px;opacity:.65;margin-top:1px}
#mixer .chip em{font-style:normal;font-size:8.5px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,226,170,.8);margin-top:2px}
#mixer .chip[aria-pressed="true"]{box-shadow:0 0 0 1px rgba(170,200,255,.6),0 0 14px rgba(150,185,255,.35)}
#mixer .sol-h{margin:2px 0 2px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:600;font-size:14px;color:#dfe8ff}
#mixer .sol-h .now{font-weight:400;font-size:12px;color:rgba(246,239,226,.65)}#mixer .sol-h b{color:#fff;font-weight:600}
#mixer .sol-k{margin:6px 0 2px;font-size:12px;color:rgba(246,239,226,.7)}
#mixer .note{margin:8px 0 0;font-size:11px;color:rgba(246,239,226,.5)}
#tools button[aria-expanded="true"]{background:rgba(255,206,130,.22);border-color:rgba(255,206,130,.5);color:#fff3da}
/* phones: the panel becomes a bottom sheet, full width, scrolls if needed (pass 5) */
@media (max-width:560px),(max-height:520px){#mixer{top:auto;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));width:auto;
  max-height:min(78vh,calc(100vh - 80px));max-height:min(78dvh,calc(100dvh - 80px));padding:12px 14px 14px;border-radius:22px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  #mixer{background:rgba(10,12,26,.82);z-index:40}#mixer[hidden]{transform:translateY(14px)}#mixer .row{grid-template-columns:108px 1fr 28px}}
@media (max-height:520px) and (min-width:561px){#mixer{left:auto;width:min(420px,calc(100vw - 24px))}}
.mx-open #hint,.mx-open #tag{opacity:0!important;transition:opacity .3s ease}
/* pass 6 (Oct 25 evening): Elyxium links on the welcome screen, exit, full screen, sleep timer, Solfeggio traditions */
#site{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:4;display:flex;align-items:center;gap:4px;padding:4px 6px 4px 10px;border-radius:99px;
  background:rgba(10,12,24,.42);border:1px solid rgba(255,226,170,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:auto}
#site a{display:flex;align-items:center;min-height:36px;padding:0 10px;border-radius:99px;color:rgba(255,240,214,.86);text-decoration:none;font-size:12.5px;letter-spacing:.02em;white-space:nowrap;touch-action:manipulation;transition:background .25s,color .25s}
#site a:hover,#site a:focus-visible{background:rgba(255,214,150,.14);color:#fff3da}#site a:focus-visible{outline:2px solid #ffc978;outline-offset:1px}
#site .logo{padding:0 8px 0 2px;border-right:1px solid rgba(255,226,170,.16);border-radius:99px 0 0 99px;margin-right:2px}
#site .logo img{display:block;height:22px;width:auto;opacity:.92}
@media (max-width:420px){#site{padding:3px 4px 3px 8px}#site a{padding:0 7px;font-size:12px}#site .logo img{height:19px}}
#tools a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(10,12,24,.32);color:rgba(255,246,230,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s;touch-action:manipulation;margin-top:4px}
#tools a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#tools a:hover,#tools button:hover{background:rgba(255,206,130,.16)}#tools a:focus-visible{outline:2px solid #ffc978;outline-offset:3px}
#tools #sl-ind{width:auto;min-width:44px;height:26px;border-radius:99px;padding:0 9px;display:flex;align-items:center;justify-content:center;gap:4px;font:600 11px/1 inherit;font-family:inherit;font-variant-numeric:tabular-nums;color:#ffe2b0}
#tools #sl-ind svg{width:12px;height:12px;fill:rgba(255,226,170,.85);stroke:none}#tools #sl-ind[hidden]{display:none}#tools #sl-ind.done{opacity:.6}
#toast{position:absolute;left:50%;bottom:max(84px,calc(env(safe-area-inset-bottom) + 76px));transform:translate(-50%,6px);z-index:30;max-width:min(92vw,420px);padding:10px 16px;border-radius:16px;
  background:rgba(10,12,26,.86);border:1px solid rgba(255,226,170,.22);color:#fff1d4;font-size:14px;line-height:1.35;text-align:center;opacity:0;pointer-events:none;transition:opacity .5s ease,transform .5s ease}
#toast.on{opacity:1;transform:translate(-50%,0)}
.leaving #stage,.leaving .ui,.leaving #toast{opacity:0!important;transition:opacity 1.1s ease!important}
#mixer .sleep{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}
#mixer .sl-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
#mixer .sl-chips .chip.off{grid-column:1/-1;flex-direction:row;gap:6px;min-height:40px}
#mixer .sl-chips .chip.off small{font-size:11px;margin:0;opacity:.6}
#mixer .sl-st{margin:8px 0 0;min-height:1.2em;font-size:12.5px;color:#ffe2b0}
#mixer .trad-h{margin:12px 0 4px;font-size:12.5px;font-style:italic;font-family:Georgia,"Times New Roman",serif;color:rgba(255,226,170,.85)}
#mixer .trad{list-style:none;margin:0;padding:0;display:grid;gap:2px}
#mixer .trad li{display:grid;grid-template-columns:54px 1fr;gap:8px;padding:3px 6px;border-radius:8px;font-size:11.5px;line-height:1.35;color:rgba(246,239,226,.72)}
#mixer .trad li b{font-weight:600;color:#dfe8ff;font-variant-numeric:tabular-nums}
#mixer .trad li.cur{background:rgba(160,190,255,.14);color:#fff}
#mixer .trad-n{margin-top:6px}
.mx-open #tools #sl-ind{visibility:hidden}