/* Domo's signature: translucent volumes, fine contours and living color. */
body{--aura:#8d9cea;--aura-soft:#c5dafa;--aura-deep:#8870c7}
body[data-atmosphere=rest]{--aura:#a699d3;--aura-soft:#e3d4ef;--aura-deep:#7763b2}
body[data-atmosphere=calm]{--aura:#85b9b1;--aura-soft:#d4eee0;--aura-deep:#528f95}
body[data-atmosphere=study]{--aura:#d0a77d;--aura-soft:#f7e4b9;--aura-deep:#b77f78}
.hero-art{perspective:800px}
.halo{background:radial-gradient(ellipse,var(--aura-soft),transparent 68%);opacity:.58;transition:background 1.5s}
.sphere{width:250px;height:250px;background:radial-gradient(ellipse at 27% 20%,#fff 0%,#fff9 10%,transparent 45%),radial-gradient(ellipse at 72% 77%,var(--aura-deep),transparent 65%),linear-gradient(145deg,var(--aura-soft) 8%,var(--aura) 55%,var(--aura-deep) 100%);box-shadow:inset 2px 3px 7px #fff9,inset -3px -5px 10px #ffffff60,inset -18px -25px 40px #55539930,0 32px 48px -22px #777fa85c;transition:background 1.5s,box-shadow 1s}
.sphere::before{content:'';position:absolute;inset:9px;border-radius:50%;border:1px solid #ffffff40;border-right-color:transparent;border-bottom-color:transparent;transform:rotate(-20deg)}
.sphere::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 72% 38%,#fff9,transparent 23%),radial-gradient(ellipse at 30% 78%,#bddcff88,transparent 35%);mix-blend-mode:soft-light}
.sphere-light{inset:10% 6%;transform:rotate(-35deg);background:linear-gradient(95deg,transparent 24%,#ffffff08 40%,#fff6 49%,#ffffff0a 60%,transparent 76%);filter:blur(7px);box-shadow:none}
.orbit-one{width:365px;height:118px;transform:rotate(-28deg);border-color:#a1b2d447;border-top-color:#ffffffc9;border-bottom-color:#9b9ed96b;box-shadow:0 1px 0 #fff7}
.orbit-two{width:320px;height:320px;border:1px solid #c2ccec39}
.orbit-three{width:345px;height:153px;transform:rotate(44deg);border-color:#ced6ea40;z-index:-1}
.orb-satellite{position:absolute;width:12px;height:12px;border-radius:50%;right:16%;top:33%;background:radial-gradient(circle at 28% 24%,white,var(--aura));box-shadow:0 3px 8px #8997c53d}
.art-star{color:#8997c7}.art-caption{font-size:10px;letter-spacing:2px}.star-one{top:13%;right:20%;font-size:24px}.star-two{left:17%;bottom:23%;font-size:13px}
body.playing .halo{animation:aura-breathe 7s ease-in-out infinite}
.presets{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.preset{--card-ink:#526aa2;--card-glow:#a8bef4;--card-deep:#8795d9;--card-light:#e1edff;height:224px;padding:24px 26px;border-radius:24px;color:var(--card-ink);background:linear-gradient(115deg,#edf2ff,#e6edfc);border:1px solid #fff9;box-shadow:inset 0 1px 0 #fffd,0 5px 15px -13px #52679640;transition:transform .3s,box-shadow .3s,border-color .3s;text-align:left}
.preset.rest{--card-ink:#76648c;--card-glow:#c1afd9;--card-deep:#8d78b9;--card-light:#f0e9fa;background:linear-gradient(115deg,#f0edf8,#e9e3f4);color:var(--card-ink)}
.preset.calm{--card-ink:#437c74;--card-glow:#a1d2be;--card-deep:#64a4a5;--card-light:#e2f1d8;background:linear-gradient(115deg,#e8f2ee,#e0eeea);color:var(--card-ink)}
.preset.study{--card-ink:#957451;--card-glow:#edc99d;--card-deep:#cc9d87;--card-light:#fff2d7;background:linear-gradient(115deg,#faf1e7,#f4e9df);color:var(--card-ink)}
.preset:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #fffd,0 12px 28px -17px #56658044}
.preset.is-selected{border-color:var(--card-ink);box-shadow:0 0 0 3px #8b9fc014,inset 0 1px 0 white}
.preset-top{position:relative;display:flex;align-items:center;justify-content:space-between;z-index:2}
.intent-icon{width:34px;height:34px;border-radius:12px;background:#ffffff66;border:1px solid #ffffff8a;display:grid;place-items:center}.intent-icon svg{width:19px;height:19px;stroke-width:1.5}
.preset-state{font-size:10px;letter-spacing:1.7px;line-height:1.5;opacity:.75}
.preset.is-playing .preset-state{background:#ffffffa1;padding:5px 9px;border-radius:20px;opacity:1}
.preset-copy{position:relative;display:block;margin-top:20px;z-index:2;width:70%}.preset strong{font-size:21px;letter-spacing:-.5px;font-weight:500;max-width:100%}.preset small{font-size:14px;line-height:1.6;opacity:.82;max-width:100%;padding:0;margin-top:4px}
.preset-bottom{position:absolute;bottom:20px;left:26px;right:22px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:2}
.preset-sounds{font-size:12px;opacity:.85;line-height:1.5;letter-spacing:.1px}
.preset-play{position:static;flex-shrink:0;width:36px;height:36px;background:#ffffff8c;border:1px solid #fff9;box-shadow:0 3px 10px #5267960a;transition:background .25s,transform .25s}.preset-play svg{width:16px}.preset:hover .preset-play{transform:scale(1.1);background:#fff}.preset.is-playing .preset-play{background:var(--card-ink);color:white}
.preset-art{position:absolute;right:-8px;top:29px;width:215px;height:215px;z-index:0;pointer-events:none;transition:transform .7s;opacity:.9}.preset:hover .preset-art{transform:translate(-4px,-3px) rotate(4deg)}
.preset-art .preset-orb{display:block;inset:23px 14px 17px 26px;width:auto;height:auto;background:radial-gradient(ellipse at 30% 17%,#ffffffeb,transparent 47%),radial-gradient(ellipse at 70% 80%,var(--card-deep),transparent 67%),linear-gradient(140deg,var(--card-light),var(--card-glow));box-shadow:inset 1px 2px 5px #fff9,inset -6px -10px 15px #67739519,0 18px 24px -19px var(--card-deep);z-index:0}
.contour{position:absolute;border:1px solid #ffffff88;border-bottom-color:#8394bd36;border-radius:50%;z-index:1;inset:58px -8px 65px -12px;transform:rotate(-34deg);box-shadow:0 1px 0 #ffffff22}
.contour-two{inset:42px -5px 48px -8px;transform:rotate(-34deg);opacity:.5}.contour-three{inset:10px 0 0 2px;border-color:#8a9dcb20;transform:rotate(-34deg)}
.glint{position:absolute;right:18px;top:63px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;z-index:2}
.rest .preset-art{transform:rotate(-15deg)}.rest .preset-art .preset-orb{inset:16px 8px 22px 30px;background:radial-gradient(circle at 76% 34%,#8270b690 0%,transparent 59%),radial-gradient(circle at 26% 25%,#fff,var(--card-glow) 56%,var(--card-deep));box-shadow:inset 11px 0 13px #fff9,inset -9px -12px 24px #78649130}
.rest .contour-one{inset:4px -4px 5px 17px;transform:rotate(-18deg);border-right-color:transparent}.rest .contour-two{inset:-9px -16px -6px 4px;border-right-color:transparent;transform:rotate(-18deg)}.rest .contour-three{inset:-24px -29px -20px -10px;border-right-color:transparent;transform:rotate(-18deg)}.rest .glint{right:27px;top:42px;width:3px;height:3px;box-shadow:-28px -19px 0 #fff9,16px 54px 0 #fff9}
.calm .preset-art .preset-orb{inset:31px 15px 20px 32px;border-radius:46% 54% 58% 42% / 48% 40% 60% 52%;transform:rotate(25deg)}.calm .contour{inset:18px 5px 8px 20px;transform:rotate(25deg);border-radius:46% 54% 58% 42% / 48% 40% 60% 52%}.calm .contour-two{inset:4px -9px -6px 6px}.calm .contour-three{inset:-10px -23px -20px -8px}.calm .glint{right:34px;top:44px;background:#eeffd8}
.study .preset-art .preset-orb{inset:26px 12px 18px 27px;background:radial-gradient(ellipse at 33% 21%,#fff7e4,transparent 59%),linear-gradient(155deg,var(--card-light),var(--card-glow) 55%,var(--card-deep))}.study .contour{inset:77px -5px 67px 0;transform:rotate(-17deg)}.study .contour-two{inset:57px -4px 44px 0;transform:rotate(-17deg)}.study .contour-three{inset:34px -4px 24px 0;transform:rotate(-17deg)}.study .glint{right:35px;top:59px;background:#fffbed}
.preset.is-playing .preset-art{animation:domo-drift 9s ease-in-out infinite}
@keyframes aura-breathe{50%{opacity:.85;transform:scale(1.08)}}@keyframes domo-drift{50%{translate:0 -5px}} 
@media(min-width:1500px){.sphere{width:285px;height:285px}.orbit-one{width:395px;height:135px}.orbit-two{width:355px;height:355px}.preset{height:235px}.preset-art{width:240px;height:240px;top:25px;right:0}}
@media(max-width:1100px){.preset{padding:22px;height:220px}.preset-art{right:-33px;opacity:.7}.preset-copy{width:82%}.preset-bottom{left:22px;right:18px}.preset-sounds{font-size:11px}.preset strong{font-size:20px}}
@media(max-width:900px){.hero-art{overflow:visible;width:43%;right:0;top:10px;opacity:.8}.sphere{width:155px;height:155px}.orbit-one{width:210px;height:77px}.orbit-two{width:200px;height:200px}.orbit-three{width:216px;height:96px}.orb-satellite{width:7px;height:7px;right:4%;top:34%}.star-one{right:7%;top:19%;font-size:18px}.star-two{display:none}.presets{gap:12px}.preset{height:220px;padding:17px}.preset-top{align-items:flex-start}.preset-state{font-size:9px;letter-spacing:1px;padding-top:8px}.intent-icon{width:29px;height:29px;border-radius:10px}.preset-copy{width:100%;margin-top:18px}.preset strong{font-size:19px}.preset small{font-size:13px;line-height:1.5;margin-top:7px}.preset-art{width:165px;height:165px;top:63px;right:-43px;opacity:.45}.preset-bottom{left:17px;right:13px;bottom:15px;align-items:flex-end}.preset-sounds{font-size:11px;max-width:75%}.preset-play{width:30px;height:30px}.preset.is-playing .preset-state{font-size:8px;padding:5px;letter-spacing:.5px}.preset.is-selected{border-color:var(--card-ink)}}
@media(max-width:380px){.preset{padding:14px;height:229px}.preset-top{gap:5px}.preset-state{font-size:8px;letter-spacing:.5px}.preset strong{font-size:17px}.preset small{font-size:12px}.preset-bottom{left:14px;right:10px}.preset-sounds{font-size:10px}.hero-art{opacity:.55}.preset-play{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){.sphere,.halo,.preset-art{animation:none!important;transition:none!important}}

@media(max-width:1100px) and (min-width:901px){.save-button span[data-icon]{display:block}}

/* A distinct visual world for each intention. */
.hero-art{isolation:isolate}
.halo{opacity:.7;background:radial-gradient(ellipse at 53% 53%,var(--aura-soft),transparent 67%)}
.sphere{background:radial-gradient(ellipse at 30% 20%,#fffffff0,transparent 47%),radial-gradient(ellipse at 23% 73%,#bbdeff88,transparent 45%),radial-gradient(ellipse at 75% 78%,var(--aura-deep),transparent 70%),linear-gradient(140deg,#e6efff,var(--aura) 52%,var(--aura-deep));box-shadow:inset 1px 2px 4px #fff,inset -3px -5px 9px #ffffff60,inset -20px -20px 35px #60609630,0 32px 48px -25px #7479a677}
.sphere::before{inset:0;border:0;transform:none;box-shadow:inset 0 0 0 1px #ffffff50;background:radial-gradient(ellipse at 37% 12%,#ffffff70,transparent 48%)}
.sphere::after{background:radial-gradient(ellipse at 77% 39%,#fff5,transparent 26%),radial-gradient(ellipse at 28% 82%,#c2e2ff66,transparent 39%)}
.sphere-light{opacity:.45;filter:blur(14px)}
.orbit-one{border-bottom-color:#929dc96b;border-top-color:#fff;box-shadow:0 1px 0 #ffffff60}.orbit-two,.orbit-three{opacity:.6}
.presets{gap:20px}
.preset{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;height:272px;padding:25px 28px;border-radius:26px;border:1px solid #ffffffb3;--card-ink:#40588c;--card-glow:#8faeee;--card-deep:#5c73c0;background:radial-gradient(ellipse at 100% 90%,#acbfee88,transparent 68%),linear-gradient(120deg,#eef4ff,#dee8fd);box-shadow:inset 0 1px 0 white,0 12px 22px -19px #56628b5c}
.preset.rest{--card-ink:#f1eafa;--card-glow:#b1a0e3;--card-deep:#7661b6;--card-light:#f4edff;color:var(--card-ink);background:radial-gradient(ellipse at 100% 80%,#8571b077,transparent 70%),linear-gradient(125deg,#484866,#666084);border-color:#ffffff30;box-shadow:inset 0 1px 0 #ffffff30,0 12px 22px -19px #46405c90}
.preset.calm{--card-ink:#30685f;--card-glow:#8fcbb7;--card-deep:#458d86;background:radial-gradient(ellipse at 100% 90%,#83bbaa55,transparent 70%),linear-gradient(120deg,#e9f5ed,#cfe6df)}
.preset.study{--card-ink:#805b40;--card-glow:#e6b77e;--card-deep:#c68a68;background:radial-gradient(ellipse at 100% 90%,#e2b59555,transparent 70%),linear-gradient(120deg,#fcf3e9,#f0ddc9)}
.preset::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(95deg,#ffffff22,transparent 62%)}
.preset::after{content:'';position:absolute;inset:7px;border:1px solid #ffffff3b;border-radius:20px;pointer-events:none;z-index:1;mask-image:linear-gradient(145deg,#000,transparent 60%)}
.preset-top{justify-content:flex-start;gap:12px;align-items:center}
.intent-icon{width:33px;height:33px;border-radius:50%;background:#ffffff70;border:1px solid #fff9;box-shadow:0 2px 7px #53658c09}
.rest .intent-icon{background:#ffffff13;border-color:#ffffff26}
.preset-state{font-size:10px;letter-spacing:1.8px;opacity:.9;padding:0;line-height:1.6}
.preset-copy{margin-top:22px;width:65%;max-width:240px}
.preset strong{font-size:29px;line-height:1.1;letter-spacing:-1px;font-weight:500;max-width:100%;text-wrap:balance}
.preset small{font-size:14px;line-height:1.55;margin-top:11px;opacity:.88;max-width:100%;padding:0}
.preset-bottom{left:28px;right:24px;bottom:22px;border:0;padding:0;gap:16px}
.preset-sounds{display:flex;flex-wrap:wrap;gap:5px;max-width:calc(100% - 56px);font-size:11px;opacity:1;line-height:1.5}
.preset-sounds>span{padding:5px 9px;border:1px solid #ffffff5c;background:#ffffff42;border-radius:20px;backdrop-filter:blur(8px)}
.rest .preset-sounds>span{background:#ffffff0b;border-color:#ffffff25;color:#e9e1f7}
.preset-play{width:43px;height:43px;border:1px solid #ffffffb3;background:linear-gradient(145deg,#ffffffec,#ffffff70);box-shadow:inset 0 1px 0 white,0 4px 12px #52678a12;position:static;flex-shrink:0}
.preset-play svg{width:17px}.rest .preset-play{color:#575079;background:#eae2f9;border-color:#ffffff88}
.preset-art{width:260px;height:260px;right:-30px;top:30px;opacity:1;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.preset-art .preset-orb{inset:23px 13px 18px 27px;box-shadow:inset 2px 3px 6px #ffffffa3,inset -10px -10px 20px #52638a22,0 24px 24px -23px var(--card-deep)}
.focus .contour-one{inset:70px -11px 68px -11px;transform:rotate(-39deg);border:1px solid #ffffffba;border-bottom-color:#6c84bb7a}
.focus .contour-two{inset:56px -10px 50px -10px;transform:rotate(-39deg);opacity:.6}.focus .contour-three{inset:3px 0 0 0;opacity:.45}
.rest .preset-art{top:18px;right:-24px;transform:rotate(-13deg)}
.rest .preset-art .preset-orb{inset:30px 12px 20px 30px;background:radial-gradient(ellipse at 77% 29%,#605776 0%,#77668f 22%,transparent 62%),radial-gradient(ellipse at 24% 64%,#e4cefa,var(--card-glow) 42%,var(--card-deep) 75%);box-shadow:inset 7px 1px 10px #f8e7ffae,inset -12px -12px 25px #4b436b88,0 15px 30px -23px #281d45}
.rest .contour{border-color:#e6d2ff47;border-right-color:transparent}.rest .contour-one{inset:10px -2px 3px 12px}.rest .contour-two{inset:-5px -17px -12px -3px}.rest .contour-three{inset:-21px -32px -28px -19px}
.rest .glint{width:3px;height:3px;top:48px;right:54px;box-shadow:-31px -23px 0 #ffffff99,35px 56px 0 #ffffffad,-157px 33px 0 #ffffff7d,-112px -17px 0 #ffffff66}
.calm .preset-art{right:-26px;top:27px}
.calm .preset-art .preset-orb{inset:32px 10px 26px 35px;transform:rotate(32deg);border-radius:43% 57% 61% 39% / 43% 42% 58% 57%;background:radial-gradient(ellipse at 25% 24%,#f5ffe5,transparent 53%),radial-gradient(ellipse at 70% 77%,#438f8a,transparent 65%),linear-gradient(135deg,#c7e8c7,#92cbb7 55%,#5ca298)}
.calm .contour{border-radius:43% 57% 61% 39% / 43% 42% 58% 57%;transform:rotate(32deg);border-color:#ffffff80;border-bottom-color:#649b903d}
.calm .contour-one{inset:19px -3px 13px 22px}.calm .contour-two{inset:4px -18px -2px 7px}.calm .contour-three{inset:-12px -34px -18px -9px}
.study .preset-art{top:34px;right:-29px}
.study .preset-art .preset-orb{inset:24px 11px 25px 28px;background:radial-gradient(ellipse at 32% 22%,#fff8de,transparent 50%),radial-gradient(ellipse at 72% 87%,#bd7d64,transparent 64%),linear-gradient(155deg,#f9e6bf,#edbf86 55%,#cb9776)}
.study .contour-one{inset:94px -12px 85px -4px;transform:rotate(-23deg);border-color:#fffc;border-bottom-color:#ac775350}
.study .contour-two{inset:72px -10px 62px -2px;transform:rotate(-23deg);opacity:.65}.study .contour-three{inset:49px -8px 39px 0;transform:rotate(-23deg);opacity:.4}
.preset:hover,.preset:focus-visible{transform:translateY(-4px);box-shadow:inset 0 1px 0 #fff9,0 18px 30px -19px #53658c65}
.preset:hover .preset-art{transform:translate(-6px,-5px) rotate(3deg)}
.preset.is-selected{border-color:var(--card-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--card-ink) 10%,transparent),0 12px 22px -19px #53658c52}
.preset.is-playing .preset-state{background:transparent;padding:0;box-shadow:none;font-size:10px;letter-spacing:1px}
.preset.is-playing .preset-play{background:var(--card-ink);color:white;box-shadow:none}.rest.is-playing .preset-play{background:#efe7fa;color:#5d557d}
@media(min-width:1500px){.preset{height:285px;padding:28px 32px}.preset-art{width:290px;height:290px;right:-20px;top:22px}.preset-copy{max-width:270px}.preset strong{font-size:32px}.preset-bottom{left:32px;bottom:24px}.sphere{width:290px;height:290px}}
@media(min-width:901px) and (max-width:1100px){.preset-copy{width:64%}.preset strong{font-size:27px}.preset-art{right:-50px;width:248px;height:248px}.rest .preset-art,.calm .preset-art,.study .preset-art{right:-50px}.preset-sounds{font-size:10px;gap:4px}.preset-sounds>span{padding:4px 7px}}
@media(max-width:900px){.presets{gap:14px}.preset{height:255px;padding:20px}.preset-copy{margin-top:23px;width:73%;max-width:none}.preset strong{font-size:25px}.preset small{font-size:14px;margin-top:10px}.preset-art{width:215px;height:215px;right:-50px;top:42px;opacity:.8}.rest .preset-art,.calm .preset-art,.study .preset-art{right:-50px;top:42px}.intent-icon{width:29px;height:29px}.preset-top{gap:9px}.preset-state{font-size:10px;letter-spacing:1px}.preset-bottom{left:20px;right:16px;bottom:18px;align-items:center}.preset-play{width:37px;height:37px}.preset-sounds{font-size:11px;gap:4px;max-width:calc(100% - 42px)}.preset-sounds>span{padding:4px 7px}.preset.is-playing .preset-state{font-size:9px;letter-spacing:.4px}}
@media(max-width:560px){.presets{grid-template-columns:1fr;gap:15px}.preset{height:246px;padding:23px}.preset-copy{width:65%;max-width:235px;margin-top:20px}.preset strong{font-size:28px}.preset small{font-size:14px;max-width:195px}.preset-art{width:240px;height:240px;right:-45px;top:25px}.rest .preset-art,.calm .preset-art,.study .preset-art{right:-45px;top:25px}.preset-bottom{left:23px;right:19px;bottom:19px}.preset-sounds{font-size:11px}.preset-play{width:40px;height:40px}.preset-state{font-size:11px;letter-spacing:1.4px}.preset.is-playing .preset-state{font-size:10px}.hero-art{opacity:.8}}
@media(max-width:380px){.preset strong{font-size:25px}.preset-copy{width:75%}.preset-art{opacity:.6}.rest .preset-art{opacity:.85}.preset-sounds{font-size:10px;gap:3px}.preset-sounds>span{padding:4px 6px}}
@media(prefers-reduced-motion:reduce){.preset,.preset-art{transition:none!important;animation:none!important}}

/* Sound library: individual timbres expressed through color and form. */
.sounds{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.sound{--sound-ink:#577cba;--sound-tint:#e5edfb;--sound-light:#f3f7ff;min-height:207px;background:linear-gradient(145deg,#fff 35%,var(--sound-light));border:1px solid #e5eaf2;border-radius:23px;box-shadow:0 3px 6px #53658c03;transition:background .3s,border-color .3s,box-shadow .3s,transform .3s;isolation:isolate}
.sound[data-sound=thunder]{--sound-ink:#7b6ca9;--sound-tint:#e9e2f6;--sound-light:#f7f4fc}
.sound[data-sound=wind]{--sound-ink:#4d8c98;--sound-tint:#dff0f1;--sound-light:#f2fafb}
.sound[data-sound=forest]{--sound-ink:#598771;--sound-tint:#e1eedf;--sound-light:#f5faf3}
.sound[data-sound=fire]{--sound-ink:#ba8056;--sound-tint:#fae6d2;--sound-light:#fffbf6}
.sound[data-sound=ocean]{--sound-ink:#547fba;--sound-tint:#deebfa;--sound-light:#f1f7fd}
.sound[data-sound=river]{--sound-ink:#488f89;--sound-tint:#dcefe9;--sound-light:#f1faf8}
.sound[data-sound=night]{--sound-ink:#8171ae;--sound-tint:#e9e2f5;--sound-light:#f7f5fc}
.sound[data-sound=train]{--sound-ink:#748395;--sound-tint:#e5eaf0;--sound-light:#f7f9fc}
.sound[data-sound=cafe]{--sound-ink:#a17e60;--sound-tint:#f0e5d9;--sound-light:#fcf9f5}
.sound[data-sound=white]{--sound-ink:#7c88a6;--sound-tint:#e9edf6;--sound-light:#f8f9fd}
.sound[data-sound=brown]{--sound-ink:#a48376;--sound-tint:#eee2dd;--sound-light:#fbf7f5}
.sound::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 90% 0,var(--sound-tint),transparent 65%);opacity:.25;z-index:-1;transition:opacity .3s}
.sound:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--sound-ink) 38%,white);box-shadow:0 12px 20px -16px var(--sound-ink)}
.sound.selected{background:linear-gradient(140deg,var(--sound-light),var(--sound-tint));border-color:color-mix(in srgb,var(--sound-ink) 65%,white);box-shadow:inset 0 1px 0 #ffffffd9,0 0 0 3px color-mix(in srgb,var(--sound-ink) 6%,transparent)}
.sound.selected::before{opacity:.6}
.sound-toggle{position:relative;display:flex;align-items:flex-start;gap:0;padding:20px 20px 0;min-height:153px;text-align:left}
.sound-indicator{position:absolute;right:15px;top:15px;width:22px;height:22px;display:grid;place-items:center;border:1px solid #e0e5ed;border-radius:50%;font-size:16px;font-weight:400;color:#9da8b8;background:#ffffff80;transition:background .25s,color .25s}
.sound.selected .sound-indicator{background:var(--sound-ink);border-color:var(--sound-ink);color:white;font-size:12px;box-shadow:0 2px 5px #53658c15}
.sound-emblem{width:53px;height:53px;display:grid;place-items:center;border-radius:17px;background:radial-gradient(ellipse at 25% 12%,#fffffff5,transparent 74%),linear-gradient(150deg,var(--sound-light),var(--sound-tint));box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px color-mix(in srgb,var(--sound-ink) 10%,transparent),0 4px 7px #53658c06;border:1px solid #ffffffa3;transition:transform .35s}
.sound-toggle .sound-emblem svg,.sound.selected .sound-toggle .sound-emblem svg{width:28px;height:28px;color:var(--sound-ink);stroke-width:1.45}
.sound[data-sound=wind] .sound-emblem,.sound[data-sound=ocean] .sound-emblem,.sound[data-sound=night] .sound-emblem{border-radius:50%}
.sound[data-sound=forest] .sound-emblem,.sound[data-sound=river] .sound-emblem{border-radius:21px 15px 23px 15px}
.sound[data-sound=fire] .sound-emblem{border-radius:23px 23px 15px 15px}
.sound:hover .sound-emblem{transform:translateY(-2px) rotate(-3deg)}
.sound-toggle .sound-name{margin-top:14px;color:#536176;font-size:16px;font-weight:500;letter-spacing:-.25px;line-height:1.3}
.sound.selected .sound-toggle .sound-name{color:var(--sound-ink)}
.sound-toggle .sound-note,.sound.selected .sound-toggle .sound-note{margin-top:5px;font-size:12px;font-weight:400;line-height:1.4;color:#8590a0;letter-spacing:0}
.sound.selected .sound-toggle .sound-note{color:color-mix(in srgb,var(--sound-ink) 80%,#808895)}
.sound-adjust{height:46px;margin:0 19px;display:flex;align-items:center;gap:12px;border-top:1px solid color-mix(in srgb,var(--sound-ink) 12%,transparent)}
.sound-adjust.is-inactive{pointer-events:none}
.sound .sound-adjust input{appearance:none;-webkit-appearance:none;flex:1;min-width:0;width:0;height:30px;margin:0;background:transparent;cursor:pointer;accent-color:var(--sound-ink);visibility:visible}
.sound input::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,var(--sound-ink) 0 var(--level),color-mix(in srgb,var(--sound-ink) 19%,white) var(--level) 100%);border-radius:4px}
.sound input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:13px;height:13px;margin-top:-5px;border-radius:50%;background:var(--sound-ink);border:2px solid #ffffffdd;box-shadow:0 1px 4px #53658c26;transition:transform .2s}
.sound input:hover::-webkit-slider-thumb{transform:scale(1.15)}
.sound input::-moz-range-track{height:3px;background:color-mix(in srgb,var(--sound-ink) 19%,white);border-radius:4px}
.sound input::-moz-range-progress{height:3px;background:var(--sound-ink);border-radius:4px}
.sound input::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--sound-ink);border:2px solid white}
.sound-level{min-width:34px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;color:var(--sound-ink)}.sound-level small{font-size:10px;margin-left:2px;opacity:.7}
.sound-wave{display:flex;gap:3px;align-items:center;height:19px;flex:1;opacity:.38;overflow:hidden;color:var(--sound-ink)}.sound-wave i{flex-shrink:0;width:2px;height:var(--bar);background:currentColor;border-radius:3px}
.sound-add{color:#8b97a8;font-size:11px;letter-spacing:.1px}
.sound:hover .sound-add{color:var(--sound-ink)}
.filter-row{gap:6px;margin-bottom:22px}.filter{border:1px solid transparent;transition:background .2s,color .2s}.filter.active{background:#fff;border-color:#dce3f0;color:#526ba4;box-shadow:0 3px 7px #53658c07}
@media(min-width:1500px){.sounds{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.sound{min-height:217px}.sound-toggle{padding:23px 23px 0;min-height:163px}.sound-adjust{margin:0 23px}}
@media(max-width:1100px){.sounds{gap:12px}.sound-toggle{padding:17px 16px 0}.sound-adjust{margin:0 16px;gap:8px}.sound-wave{gap:2px}.sound-note{white-space:normal}.sound-indicator{right:11px;top:11px}.sound-add{font-size:10px}}
@media(max-width:760px){.sounds{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.sounds{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sound{min-height:205px;border-radius:21px}.sound-toggle{padding:17px 15px 0;min-height:151px}.sound-emblem{width:49px;height:49px}.sound-toggle .sound-name{font-size:15px}.sound-toggle .sound-note,.sound.selected .sound-toggle .sound-note{font-size:11px}.sound-adjust{margin:0 15px}.sound-level{font-size:12px}.sound-wave{gap:2px}.sound-add{font-size:10px}.sound-indicator{width:20px;height:20px}.filter{font-size:12px;padding:9px 12px}}
@media(prefers-reduced-motion:reduce){.sound,.sound-emblem,.sound::before,.sound-indicator{transition:none!important}}

/* Custom geometric wordmark, drawn to echo the dome symbol. */
.wordmark{display:flex;align-items:center;flex-shrink:0;line-height:1;letter-spacing:0}.wordmark img{display:block;width:123px;height:auto}.header-note{font-size:12px;letter-spacing:.15px;color:#8b93a4}@media(max-width:900px){.wordmark img{width:108px}}

/* Keep name and signature together as one brand lockup. */
header .brand-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex-shrink:0}
header .brand-lockup .wordmark img{width:112px;height:32px}
header .brand-lockup .header-note{display:block;margin:0;padding-left:1px;font-size:12px;line-height:1.35;letter-spacing:.1px;color:#858ea0}
.rail .brand-mark{width:50px;height:50px;display:grid;place-items:center;margin-top:22px;margin-bottom:61px;border-radius:17px;background:transparent;box-shadow:none}
.rail .brand-mark img{width:44px;height:44px}
@media(max-width:900px){header{height:91px}header .brand-lockup{gap:5px}header .brand-lockup .wordmark img{width:101px;height:29px}header .brand-lockup .header-note{font-size:11px;letter-spacing:0}.quiet-button{gap:7px;font-size:12px}}
@media(max-width:380px){header .brand-lockup .header-note{max-width:150px;font-size:10px}.quiet-button{gap:5px;font-size:11px}}

/* One silhouette per intention, shared by the card and the hero. */
.preset.focus,body[data-atmosphere=focus]{--domo-shape:30% 30% 30% 30% / 30% 30% 30% 30%;--domo-turn:-14deg;--domo-x:.94;--domo-y:.94}
.preset.rest,body[data-atmosphere=rest]{--domo-shape:62% 38% 53% 47% / 40% 45% 55% 60%;--domo-turn:21deg;--domo-x:.83;--domo-y:1.07}
.preset.calm,body[data-atmosphere=calm]{--domo-shape:43% 57% 61% 39% / 43% 42% 58% 57%;--domo-turn:32deg;--domo-x:1;--domo-y:1}
.preset.study,body[data-atmosphere=study]{--domo-shape:50% 50% 28% 28% / 70% 70% 30% 30%;--domo-turn:-19deg;--domo-x:1;--domo-y:.95}
.preset.focus .preset-art .preset-orb,.preset.rest .preset-art .preset-orb,.preset.study .preset-art .preset-orb{
  border-radius:var(--domo-shape);
  transform:rotate(var(--domo-turn)) scale(var(--domo-x),var(--domo-y));
}
.preset.rest .preset-art{transform:none}
.preset.focus .contour-three{border-radius:var(--domo-shape);transform:rotate(-14deg) scale(.94)}
.preset.rest .contour{border-radius:var(--domo-shape);transform:rotate(21deg) scale(.83,1.07)}
.preset.study .contour-three{inset:8px 0 2px 9px;border-radius:var(--domo-shape);transform:rotate(-19deg) scale(1,.95)}
.sphere{
  border-radius:var(--domo-shape,50%);
  transform:rotate(var(--domo-turn,0deg)) scale(var(--domo-x,1),var(--domo-y,1));
  animation:domo-hover 9s ease-in-out infinite;
  transition:border-radius 1.25s cubic-bezier(.22,.7,.25,1),transform 1.25s cubic-bezier(.22,.7,.25,1),background 1.5s,box-shadow 1s;
}
.sphere::before,.sphere::after,.sphere-light{border-radius:inherit}
.hero-art .orbit{transition:border-radius 1.25s,transform 1.25s,opacity 1s}
body[data-atmosphere=focus] .hero-art .orbit-two{border-radius:30%;transform:rotate(-14deg) scale(.94);opacity:.5}
body[data-atmosphere=rest] .hero-art .orbit-two{border-radius:var(--domo-shape);transform:rotate(21deg) scale(.83,1.07)}
body[data-atmosphere=rest] .hero-art .orbit-one{transform:rotate(57deg);opacity:.55}
body[data-atmosphere=rest] .hero-art .orbit-three{transform:rotate(65deg);opacity:.35}
body[data-atmosphere=calm] .hero-art .orbit-two{border-radius:var(--domo-shape);transform:rotate(32deg)}
body[data-atmosphere=calm] .hero-art .orbit-one{transform:rotate(-12deg);opacity:.65}
body[data-atmosphere=study] .hero-art .orbit-two{border-radius:var(--domo-shape);transform:rotate(-19deg) scale(1,.95)}
body[data-atmosphere=study] .hero-art .orbit-one{transform:rotate(-19deg)}
@keyframes domo-hover{50%{translate:0 -9px}}
@media(prefers-reduced-motion:reduce){.sphere,.hero-art .orbit{animation:none!important;transition:none!important}}

/* The hero and card use the same paint, with no additional color overlays. */
.preset.focus,body[data-atmosphere=focus]{
  --domo-paint:radial-gradient(ellipse at 30% 17%,#ffffffeb,transparent 47%),radial-gradient(ellipse at 70% 80%,#5c73c0,transparent 67%),linear-gradient(140deg,#e1edff,#8faeee);
  --domo-shadow:inset 2px 3px 6px #ffffffa3,inset -10px -10px 20px #52638a22,0 24px 24px -23px #5c73c0;
  --aura:#8faeee;--aura-soft:#e1edff;--aura-deep:#5c73c0;
}
.preset.rest,body[data-atmosphere=rest]{
  --domo-paint:radial-gradient(ellipse at 77% 29%,#605776 0%,#77668f 22%,transparent 62%),radial-gradient(ellipse at 24% 64%,#e4cefa,#b1a0e3 42%,#7661b6 75%);
  --domo-shadow:inset 7px 1px 10px #f8e7ffae,inset -12px -12px 25px #4b436b88,0 15px 30px -23px #281d45;
  --aura:#b1a0e3;--aura-soft:#f4edff;--aura-deep:#7661b6;
}
.preset.calm,body[data-atmosphere=calm]{
  --domo-paint:radial-gradient(ellipse at 25% 24%,#f5ffe5,transparent 53%),radial-gradient(ellipse at 70% 77%,#438f8a,transparent 65%),linear-gradient(135deg,#c7e8c7,#92cbb7 55%,#5ca298);
  --domo-shadow:inset 2px 3px 6px #ffffffa3,inset -10px -10px 20px #52638a22,0 24px 24px -23px #458d86;
  --aura:#92cbb7;--aura-soft:#c7e8c7;--aura-deep:#438f8a;
}
.preset.study,body[data-atmosphere=study]{
  --domo-paint:radial-gradient(ellipse at 32% 22%,#fff8de,transparent 50%),radial-gradient(ellipse at 72% 87%,#bd7d64,transparent 64%),linear-gradient(155deg,#f9e6bf,#edbf86 55%,#cb9776);
  --domo-shadow:inset 2px 3px 6px #ffffffa3,inset -10px -10px 20px #52638a22,0 24px 24px -23px #c68a68;
  --aura:#edbf86;--aura-soft:#f9e6bf;--aura-deep:#bd7d64;
}
body .sphere,.preset.focus .preset-art .preset-orb,.preset.rest .preset-art .preset-orb,.preset.calm .preset-art .preset-orb,.preset.study .preset-art .preset-orb{background:var(--domo-paint);box-shadow:var(--domo-shadow)}
.sphere::before,.sphere::after,.sphere-light{display:none}
.preset::before{background:none}
.hero-art,.hero-art .sphere,.preset .preset-art{opacity:1}
.preset:hover{filter:none}

.intro-copy h1{margin-top:0}

/* A calm, continuous edge for the fixed player. */
.player{border-top:0;background:rgba(255,255,255,.94);overflow:visible;box-shadow:0 14px 40px #53658c05}
.player::before{content:'';position:absolute;left:0;right:0;top:-17px;height:18px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 24' preserveAspectRatio='none'%3E%3Cpath d='M0 13C180 13 210 3 380 5S670 23 870 15S1190 1 1440 10V24H0Z' fill='white' fill-opacity='.94'/%3E%3Cpath d='M0 13C180 13 210 3 380 5S670 23 870 15S1190 1 1440 10' fill='none' stroke='%23dce3ef' stroke-opacity='.46' stroke-width='.7'/%3E%3C/svg%3E") center/100% 100% no-repeat}
@media(max-width:900px){.player::before{top:-11px;height:12px}}

/* The player becomes a quiet extension of the selected atmosphere. */
.player{--player-tint:color-mix(in srgb,var(--aura) 13%,white);background:linear-gradient(105deg,color-mix(in srgb,var(--aura-soft) 20%,#fffffff5),#ffffffed 48%,color-mix(in srgb,var(--aura-soft) 13%,#fffffff5));box-shadow:0 -10px 35px -22px color-mix(in srgb,var(--aura) 40%,transparent);min-height:100px;padding-top:20px;padding-bottom:20px;isolation:isolate}
.player::before{top:-27px;height:28px;background:var(--player-tint);opacity:.9;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 25C180 25 210 4 380 7S680 40 900 24S1200 4 1440 18V40H0Z' fill='black'/%3E%3C/svg%3E");mask-size:100% 100%;mask-repeat:no-repeat;z-index:-1}
.player::after{content:'';position:absolute;left:0;width:100%;top:-33px;height:34px;background:linear-gradient(90deg,var(--aura-soft),var(--aura) 58%,var(--aura-soft));opacity:.18;pointer-events:none;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 18C190 38 290 4 470 13S770 35 960 15S1230 28 1440 11V40H0Z' fill='black'/%3E%3C/svg%3E");mask-size:100% 100%;mask-repeat:no-repeat;z-index:-2}
.player .mix-icon{width:49px;height:49px;border-radius:18px;background:radial-gradient(ellipse at 20% 15%,#fff9,transparent 65%),linear-gradient(145deg,var(--aura-soft),color-mix(in srgb,var(--aura) 47%,white));border:1px solid #ffffffa6;box-shadow:inset 0 1px 0 #fff,0 4px 13px -9px var(--aura-deep);color:var(--aura-deep);transition:border-radius 1s,background 1s}
body[data-atmosphere] .player .mix-icon{border-radius:var(--domo-shape,18px)}
.player .mix-info strong{font-size:14px;letter-spacing:-.15px}.player .mix-info>div>span{font-size:12px;margin-top:6px}
.player .play-button{position:relative;width:52px;height:52px;background:linear-gradient(145deg,color-mix(in srgb,var(--aura-deep) 75%,#303c5d),#35415f);box-shadow:inset 0 1px 0 #ffffff36,0 5px 13px -6px var(--aura-deep);border:1px solid #ffffff50;transition:box-shadow .5s,background .5s,transform .2s}
.player .play-button::before{content:'';position:absolute;inset:-6px;border:1px solid color-mix(in srgb,var(--aura) 35%,transparent);border-radius:50%;pointer-events:none}
.player .play-button:hover:not(:disabled){transform:scale(1.04)}
.player .equalizer i{background:var(--aura);transition:background 1s}.player .play-label{color:#788399}
.player .save-button{background:#ffffff83;border:1px solid color-mix(in srgb,var(--aura) 23%,white);color:color-mix(in srgb,var(--aura-deep) 70%,#536176);box-shadow:inset 0 1px 0 white}
body.playing .player::before{animation:player-tide-front 15s ease-in-out infinite}body.playing .player::after{animation:player-tide-back 19s ease-in-out infinite}
body.playing .player .play-button::before{animation:player-breathe 7s ease-in-out infinite}
@keyframes player-tide-front{50%{transform:translateY(4px) scaleY(.8)}}
@keyframes player-tide-back{50%{transform:translateY(5px) scaleY(.83);opacity:.27}}
@keyframes player-breathe{50%{transform:scale(1.08);opacity:.45}}
@media(max-width:1100px){.player{gap:15px}.player .mix-info{min-width:175px}.player .play-button{width:48px;height:48px}}
@media(max-width:900px){.player{min-height:132px;padding-top:15px;padding-bottom:max(12px,env(safe-area-inset-bottom));gap:11px}.player::before{top:-18px;height:19px}.player::after{top:-24px;height:25px;left:0;width:100%}.player .mix-icon{width:41px;height:41px}.player .play-button{width:43px;height:43px}.player .mix-info{min-width:0}.player .mix-info strong{font-size:13px}.player .mix-info>div>span{font-size:11px}.player .save-button{padding:8px 12px}.player-tools{padding-top:3px}.player .play-controls{padding-right:5px}.player .play-button::before{inset:-4px}}
@media(prefers-reduced-motion:reduce){.player::before,.player::after,.player .play-button::before{animation:none!important}.player *{transition:none!important}}

/* Reserve space for the fixed player, its wave crest and footer breathing room. */
main{padding-bottom:180px}
@media(max-width:900px){main{padding-bottom:calc(205px + env(safe-area-inset-bottom,0px))}}

.audio-credits{font-size:11px;color:#8490a4;margin-left:12px;text-decoration:underline;text-underline-offset:3px}footer{flex-wrap:wrap}@media(max-width:560px){.audio-credits{margin-left:28px}}

/* Secondary copy stays readable against the slate page background. */
.intro p,.section-heading p{color:#59657a}
.intro-hint,.art-caption,.section-meta,.sound-count,footer,.text-button,
header .brand-lockup .header-note{color:#606c80}
.filter:not(.active){color:#606c80}
.sound-toggle .sound-note{color:#606c80}
.sound-add{color:#606c80}