@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500&family=Noto+Serif+Thai:wght@400;500&display=swap";:root{--color-bg:#f7f1e5;--color-cream:#efe2c8;--color-gold-soft:#d7b16a;--color-gold:#b98a45;--color-brown:#76583c;--color-text:#3f3025;--color-text-muted:#786b5f;--color-lotus-leaf:#71806a;--color-water:#a9b8ae;--color-lotus-blush:#d9b8ae;--color-white-soft:#fffdf8;--line:#76583c29}*{box-sizing:border-box}html,body{min-width:320px;min-height:100%;margin:0}body{background:var(--color-bg);color:var(--color-text);font-family:Noto Sans Thai,sans-serif}button{color:inherit;font:inherit}button:focus-visible{outline:2px solid var(--color-gold);outline-offset:4px}.icon-sprite{display:none}.experience{--scene-opacity:.88;--scene-blur:0px;--scene-scale:1;--scene-brightness:1;isolation:isolate;min-height:100dvh;position:relative;overflow:hidden}.experience[data-theme=transparent]{background:0 0}.experience[data-theme=transparent]:before{display:none}.experience[data-theme=transparent] .scene-haze{opacity:.28}.experience[data-theme=cream]{background:var(--color-bg)}.experience:before{content:"";opacity:.3;pointer-events:none;z-index:1;background-image:radial-gradient(#76583c12 .65px,#0000 .65px);background-size:8px 8px;position:absolute;inset:0}.scene,.scene>div{pointer-events:none;position:absolute;inset:0}.scene{z-index:-1}.scene-image{filter:blur(var(--scene-blur)) brightness(var(--scene-brightness));opacity:var(--scene-opacity);transform:scale(var(--scene-scale)) translateY(var(--scene-y,0));transform-origin:50% 44%;background:linear-gradient(#1816142e,#18161414 45%,#1816145c),url(/images/bg-desktop.jpg) 50% 48%/cover;transition:filter 6.2s cubic-bezier(.34,.03,.18,1),opacity 1.4s,transform 6.2s cubic-bezier(.34,.03,.18,1)}.scene-light{mix-blend-mode:screen;opacity:.58;background:radial-gradient(at 50% 42%,#fff9da7a,#d7b16a1a 28%,#0000 62%);transition:opacity 6.2s cubic-bezier(.34,.03,.18,1),transform 6.2s cubic-bezier(.34,.03,.18,1);transform:scale(.96)}.breath-light{opacity:.25;background:radial-gradient(circle at 66% 42%,#ffe19d52 0%,#ffdc911f 18%,#0000 45%);transition:opacity 6.2s cubic-bezier(.34,.03,.18,1),transform 6.2s cubic-bezier(.34,.03,.18,1);transform:scale(.84)}.breath-ripple{filter:blur(10px);mix-blend-mode:screen;opacity:0;background:radial-gradient(at 50% 60%,#0000 0% 24%,#fffdf82e 33%,#0000 48%,#b48b4914 60%,#0000 72%);transition:opacity 6.2s cubic-bezier(.34,.03,.18,1),transform 6.2s cubic-bezier(.34,.03,.18,1);transform:scale(.72)translateY(7vh)}.scene-haze{opacity:.48;background:linear-gradient(#fffdf861,#f7f1e50a 42%,#1816142e);transition:opacity .9s}.stage{z-index:2;place-items:center;min-height:100dvh;padding:48px 24px;display:grid;position:relative}.screen{text-align:center;width:100%;max-width:760px;animation:.8s both reveal}.screen[hidden]{display:none}.screen-breath,.screen-visual,.screen-receive,.screen-shared{flex-direction:column;min-height:calc(100dvh - 96px);padding-top:3vh;padding-bottom:2vh;display:flex}.experience[data-state=breath],.experience[data-state=visual]{--scene-opacity:.98;--scene-scale:1.026;--scene-brightness:1.08;--scene-y:-1.2vh}.experience[data-state=breath] .scene-light,.experience[data-state=visual] .scene-light{opacity:.82;transform:scale(1.08)}.experience[data-state=breath] .breath-light,.experience[data-state=visual] .breath-light{opacity:.78;transform:scale(1.18)}.experience[data-state=breath] .breath-ripple,.experience[data-state=visual] .breath-ripple{opacity:.58;transform:scale(1.08)translateY(1.5vh)}.experience[data-state=welcome]{--scene-opacity:.7}.experience[data-state=welcome] .scene-haze{opacity:.68}.experience[data-state=breath] .scene-haze,.experience[data-state=visual] .scene-haze{opacity:.56}.experience[data-state=choose]{--scene-opacity:.5;--scene-blur:4px}.experience[data-state=receive],.experience[data-state=shared]{--scene-opacity:.68;--scene-blur:3px}.experience[data-state=receive] .scene-haze,.experience[data-state=shared] .scene-haze{opacity:.12}.experience[data-phase=out]{--scene-scale:1.006;--scene-brightness:.98;--scene-y:.4vh}.experience[data-phase=out] .scene-image,.experience[data-phase=out] .scene-light,.experience[data-phase=out] .breath-ripple{transition-duration:7.4s;transition-timing-function:cubic-bezier(.45,0,.55,1)}.experience[data-phase=out] .scene-light{opacity:.44;transform:scale(.94)}.experience[data-phase=out] .breath-light{opacity:.18;transition-duration:7.4s;transition-timing-function:cubic-bezier(.45,0,.55,1);transform:scale(.82)}.experience[data-phase=out] .breath-ripple{opacity:0;transform:scale(.64)translateY(9vh)}.welcome-brand{color:var(--color-brown);flex-direction:column;align-items:center;margin:0 auto 36px;display:flex}.brand-logo{width:100%;max-width:min(420px,82vw);height:auto;display:block}.brand-logo-button{cursor:pointer;background:0 0;border:0;width:100%;padding:0;transition:opacity .25s,transform .25s;display:block}.brand-logo-button:hover{opacity:.88;transform:translateY(-1px)}.brand-logo-button:focus-visible{outline:2px solid var(--color-gold);outline-offset:6px;border-radius:4px}.brand-tagline{color:var(--color-text-muted);margin-top:12px;font-family:Noto Sans Thai,sans-serif;font-size:18px}.inner-brand{color:var(--color-brown);flex-direction:column;align-items:center;margin:0 auto 4vh;display:flex}.inner-brand .brand-logo{max-width:min(250px,58vw)}.inner-brand .brand-tagline{margin-top:4px;font-size:13px}.eyebrow{color:var(--color-text-muted);margin:0 0 22px;font-size:14px}.breath-copy{flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.screen-breath .breath-copy{padding-bottom:clamp(170px,30vh,320px)}.breath-copy .eyebrow{opacity:.62;font-size:14px}h1{letter-spacing:0;text-shadow:0 2px 22px #fffdf8b3;margin:0;font-family:Noto Serif Thai,serif;font-size:clamp(1.2rem,2.5vw,2rem);font-weight:400;line-height:1.45}.welcome-copy{padding:42px 28px 46px}.welcome-copy h1{margin-bottom:38px}.screen-welcome .button-primary{min-width:168px;min-height:66px;padding-inline:44px;font-size:18px}.button{backdrop-filter:blur(14px);cursor:pointer;border:1px solid #76583c57;border-radius:999px;justify-content:center;align-items:center;gap:9px;min-height:48px;padding:12px 28px;transition:background .25s,border-color .25s,box-shadow .25s,color .25s,transform .25s;display:inline-flex;box-shadow:0 8px 30px #3f30250a}.button:hover{transform:translateY(-1px)}.button-primary{color:var(--color-brown);background:#fffdf838}.button-primary:hover{color:var(--color-text);background:#fffdf894;border-color:#b98a45b8;box-shadow:0 10px 30px #3f302512}.button-icon{stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.75px;fill:none;flex:none;width:18px;height:18px}.copy-button{width:54px;min-width:54px;padding:0}.copy-button .button-icon{width:20px;height:20px}.sound-toggle{backdrop-filter:blur(14px);color:var(--color-brown);cursor:pointer;z-index:5;background:#fffdf8a3;border:1px solid #ffffff9e;border-radius:999px;justify-content:center;align-items:center;width:46px;height:46px;padding:0;transition:background .25s,border-color .25s,color .25s,transform .25s;display:inline-flex;position:fixed;top:clamp(18px,4vw,38px);right:clamp(18px,4vw,42px);box-shadow:0 10px 30px #3f30250f}.sound-toggle:hover{background:#fffdf8db;border-color:#ffffffe0;transform:translateY(-1px)}.sound-toggle[aria-pressed=true]{color:var(--color-white-soft);background:#b98a45d6}.sound-toggle .button-icon{width:20px;height:20px}.breath-copy h1{text-align:center;transform-origin:50%;place-items:center;min-width:8em;font-size:clamp(2.35rem,5.2vw,3.25rem);display:grid}.phase-word{opacity:0;transform-origin:50%;will-change:opacity, transform;grid-area:1/1;display:block;transform:translateY(4px)scale(.96)}.breath-copy h1.is-inhaling .phase-word-in{animation:6.2s cubic-bezier(.33,0,.2,1) both calmBreathIn}.breath-copy h1.is-exhaling .phase-word-out{animation:7.4s cubic-bezier(.45,0,.55,1) both calmBreathOut}.visual-breath{flex-direction:column;flex:1;justify-content:flex-start;align-items:center;padding:clamp(18px,4vh,42px) 10px clamp(54px,8vh,96px);display:flex}.visual-phase{color:var(--color-brown);text-align:center;text-shadow:0 2px 24px #fffdf8c7;transform-origin:50%;place-items:center;min-width:8em;margin:0 0 clamp(58px,11vh,128px);font-family:Noto Serif Thai,serif;font-size:clamp(2.7rem,6vw,4.6rem);line-height:1.15;display:grid}.visual-phase.is-inhaling .phase-word-in{animation:6.2s cubic-bezier(.33,0,.2,1) both calmVisualBreathIn}.visual-phase.is-exhaling .phase-word-out{animation:7.4s cubic-bezier(.45,0,.55,1) both calmVisualBreathOut}.visual-quote-block{opacity:0;max-width:820px;margin:0;transition:opacity 1.4s,transform 1.4s;transform:translateY(10px)scale(.98)}.visual-quote-block.is-present{opacity:1;transform:translateY(0)scale(1)}.visual-quote-block.is-fading{opacity:.18;transition-duration:7.4s;transition-timing-function:cubic-bezier(.45,0,.55,1);transform:translateY(-4px)scale(.985)}.visual-quote{color:#3f3025db;overflow-wrap:anywhere;text-shadow:0 2px 22px #fffdf8e0;margin:0;font-family:Noto Serif Thai,serif;font-size:clamp(1.7rem,3.2vw,2.65rem);font-weight:400;line-height:1.68}.visual-teacher{color:#fffdf8db;opacity:1;text-shadow:0 1px 10px #3f302561,0 0 22px #3f302538;flex-direction:column;margin-top:22px;font-size:15px;display:inline-flex}.visual-teacher:before{content:"";background:#fffdf87a;border-radius:999px;align-self:center;width:38px;height:1px;margin-bottom:12px;box-shadow:0 1px 8px #3f30252e}.visual-actions{flex:none;justify-content:center;align-items:center;gap:14px;padding-top:18px;display:flex}.visual-actions .text-button{backdrop-filter:blur(12px);color:var(--color-text);background:#fffdf838;border:1px solid #ffffffb3;border-radius:999px;width:142px;min-height:46px;padding:10px 24px;box-shadow:0 8px 26px #3f30250a}.visual-actions .text-button:hover{background:#fffdf894;border-color:#b98a4594}.is-visual-paused .breath-ripple,.is-visual-paused .breath-light,.is-visual-paused .scene-light,.is-visual-paused .scene-image,.is-visual-paused .visual-quote-block{transition-duration:.8s}.text-button{border:0;border-bottom:1px solid var(--line);cursor:pointer;background:0 0;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:8px 2px;display:inline-flex}.text-button:hover{border-color:var(--color-gold);color:var(--color-gold)}.choose-copy h1{margin-bottom:36px}.needs{flex-wrap:wrap;justify-content:center;gap:12px;max-width:620px;margin:0 auto;display:flex}.need-button{backdrop-filter:blur(14px);cursor:pointer;background:#fffdf8b8;border:1px solid #ffffffa6;border-radius:999px;min-height:46px;padding:9px 20px;transition:background .25s,border-color .25s,transform .25s;box-shadow:0 2px 10px #3f30250d}.need-button:hover{background:var(--color-white-soft);border-color:var(--color-gold);transform:translateY(-1px)}.random-wrap{margin-top:30px}.random-button{color:var(--color-gold)}.quote-block{max-width:820px;margin:0 auto;padding-inline:18px}.screen-receive .quote-block,.screen-shared .quote-block{flex-direction:column;flex:1;justify-content:center;align-self:center;align-items:center;width:100%;margin:0;display:flex}.quote{overflow-wrap:anywhere;text-shadow:0 2px 18px #fffdf8e6;margin:0;font-family:Noto Serif Thai,serif;font-size:clamp(2.5rem,3.5vw,3.4rem);font-weight:400;line-height:1.6}.screen-receive.is-active .quote:before,.screen-receive.is-active .quote:after,.screen-shared.is-active .quote:before,.screen-shared.is-active .quote:after{color:#b98a4559;font-family:Georgia,serif;font-size:4.5rem;line-height:0;position:absolute}.screen-receive.is-active .quote:before,.screen-shared.is-active .quote:before{content:"“";margin-top:22px;margin-left:-42px}.screen-receive.is-active .quote:after,.screen-shared.is-active .quote:after{content:"”";margin-top:60px;margin-left:8px}.teacher{color:var(--color-text-muted);margin-top:30px;font-size:17px}.shared-note{color:var(--color-text-muted);margin:0 0 34px;font-size:15px}.actions{flex-direction:column;flex:none;align-items:center;gap:20px;margin-top:0;padding-top:78px;display:flex;position:static}.actions .button,.actions .text-button{width:min(100%,250px);max-width:100%}.actions .button-primary{min-height:54px;padding-inline:32px;font-size:16px}.actions .copy-button.button-primary{width:54px;min-width:54px;min-height:54px;padding-inline:0}.actions .text-button{backdrop-filter:blur(14px);color:var(--color-text);background:#fffdf82e;border:1px solid #ffffffad;border-radius:999px;min-height:54px;padding:12px 32px;transition:background .25s,border-color .25s,box-shadow .25s,color .25s,transform .25s;box-shadow:0 8px 30px #3f30250a}.actions .text-button:hover{color:var(--color-text);background:#fffdf88f;border-color:#b98a4594;box-shadow:0 10px 30px #3f30250f}.actions .another-button{color:var(--color-white-soft);background:#76583cd6;border-color:#76583c85}.actions .another-button:hover{color:var(--color-white-soft);background:#3f3025e0;border-color:#3f3025b3}.actions .text-button{font-size:16px}.toast{background:var(--color-text);color:var(--color-bg);border-radius:4px;margin:0;padding:10px 16px;font-size:14px;position:fixed;bottom:26px;left:50%;transform:translate(-50%)}.is-embed .stage{min-height:100dvh;padding-block:32px}.is-embed .brand-logo{max-width:min(220px,62vw)}.is-embed[data-state=choose] .stage,.is-embed[data-state=receive] .stage{min-height:100dvh}@keyframes reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes calmBreathIn{0%{opacity:0;transform:translateY(8px)scale(.965)}18%{opacity:.54;transform:translateY(5px)scale(.985)}68%{opacity:1;transform:translateY(-1px)scale(1.035)}84%{opacity:1;transform:translateY(-1px)scale(1.042)}to{opacity:0;transform:translateY(-1px)scale(1.042)}}@keyframes calmBreathOut{0%{opacity:.12;transform:translateY(-1px)scale(1.03)}18%{opacity:.9;transform:translateY(-1px)scale(1.012)}70%{opacity:.9;transform:translateY(2px)scale(.962)}84%{opacity:.9;transform:translateY(2px)scale(.955)}to{opacity:0;transform:translateY(2px)scale(.955)}}@keyframes calmVisualBreathIn{0%{opacity:0;transform:translateY(8px)scale(.965)}18%{opacity:.48;transform:translateY(5px)scale(.985)}68%{opacity:.92;transform:translateY(-2px)scale(1.035)}84%{opacity:.92;transform:translateY(-2px)scale(1.042)}to{opacity:0;transform:translateY(-2px)scale(1.042)}}@keyframes calmVisualBreathOut{0%{opacity:.12;transform:translateY(-2px)scale(1.03)}18%{opacity:.84;transform:translateY(-1px)scale(1.012)}70%{opacity:.8;transform:translateY(2px)scale(.962)}84%{opacity:.8;transform:translateY(2px)scale(.955)}to{opacity:0;transform:translateY(2px)scale(.955)}}@media (width<=520px){.stage{padding-inline:24px}.sound-toggle{width:42px;height:42px;top:16px;right:16px}.sound-toggle .button-icon{width:18px;height:18px}.scene-image{background-image:linear-gradient(#1816142e,#18161414 45%,#1816145c),url(/images/bg-mobile.jpg);background-position:50% 42%}.scene-haze{background:linear-gradient(#fffdf894,#f7f1e51a 43%,#1816143d)}.welcome-brand{margin-bottom:32px}.brand-logo{max-width:min(320px,86vw)}.brand-tagline{margin-top:10px;font-size:16px}.welcome-copy{padding:34px 16px 40px}.screen-welcome .button-primary{min-width:176px;min-height:62px;font-size:17px}.screen-breath,.screen-visual,.screen-receive,.screen-shared{min-height:calc(100dvh - 48px);padding-top:2vh}.screen-breath .breath-copy{padding-bottom:clamp(116px,24vh,190px)}.inner-brand{margin-bottom:3vh}.inner-brand .brand-logo{max-width:min(210px,58vw)}h1{font-size:clamp(1.125rem,5vw,1.5rem)}.visual-breath{padding:14px 0 42px}.screen-visual .visual-breath{padding:clamp(64px,10vh,92px) 0 34px}.visual-phase{margin-bottom:clamp(38px,8vh,72px);font-size:clamp(2.25rem,11vw,3.4rem)}.screen-visual .visual-phase{margin-bottom:clamp(44px,7vh,66px)}.visual-quote{font-size:clamp(1.35rem,6.2vw,1.95rem);line-height:1.72}.visual-teacher{margin-top:19px;font-size:13px}.visual-teacher:before{width:32px;margin-bottom:10px}.visual-actions{gap:10px}.visual-actions .text-button{width:136px;min-height:44px;padding-inline:18px}.quote-block{padding-inline:4px}.quote{font-size:clamp(1.95rem,8vw,2.4rem);line-height:1.7}.quote:before,.quote:after{display:none}.teacher{margin-top:22px;font-size:16px}.actions{gap:16px;margin-top:auto;padding-top:56px}.actions .button,.actions .text-button{width:min(100%,248px);padding-inline:22px}.actions .copy-button.button-primary{width:52px;min-width:52px;min-height:52px;padding-inline:0}.actions .button-primary,.actions .text-button{min-height:52px}.needs{flex-direction:column;align-items:stretch;max-width:260px}.need-button{width:100%}}@media (width>=900px){.welcome-copy{padding-block:48px}.screen-choose{padding-top:8vh}}@media (width>=700px){.screen-receive .actions,.screen-shared .actions{flex-flow:wrap;justify-content:center}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}