:root{color-scheme:dark;--bg:#101713;--panel:#151e18;--text:#e8ece4;--muted:#92a091;--accent:#c4dfa7;--border:#2c382c;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{color:inherit}button:disabled{cursor:wait;opacity:.65}.shell{max-width:1080px;padding:0 48px;margin:0 auto}header{height:106px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:9px;font-size:30px;letter-spacing:-1.5px;font-weight:600;text-decoration:none;color:var(--text)}.brand svg{width:30px;height:30px;fill:none;stroke:var(--accent);stroke-width:1.5}.brand-dot{color:var(--accent);margin-left:-9px}.header-note{font-size:9px;letter-spacing:1.7px;color:var(--muted);display:flex;gap:9px;align-items:center}.header-note>span{height:5px;width:5px;background:var(--accent);border-radius:50%}.intro{padding:46px 0 30px}.eyebrow{letter-spacing:2.1px;font-size:9px;color:var(--accent);margin:0 0 15px}h1{font-size:clamp(34px,5vw,46px);font-weight:400;letter-spacing:-1.8px;margin:0 0 13px}.intro>p:last-child{color:var(--muted);font-size:14px;margin:0}.workspace{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:start}.player{text-align:center;padding:0 0 22px}.scene{height:290px;position:relative;overflow:hidden;--glow:#afca8d;--deep:#30482d}.scene[data-palette=drift]{--glow:#bcb5e3;--deep:#3b365b}.scene[data-palette=rain]{--glow:#9dc4d2;--deep:#28434f}.orb{position:absolute;width:174px;height:174px;left:50%;top:47%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse at 34% 23%,#eff5d9 0%,var(--glow) 22%,var(--deep) 69%,#101713 91%);box-shadow:inset -10px -15px 25px #080e0b99,inset 1px 2px 3px #e8f7bf80,0 8px 35px #0005;transition:background 3s}.orb-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 65% 90%,var(--glow),transparent 58%);opacity:.2}.orb-grain{position:absolute;inset:0;border-radius:50%;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E")}.orb-halo{position:absolute;width:300px;height:260px;left:50%;top:48%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,var(--glow),transparent 68%);opacity:.08}.orbit{position:absolute;border:1px solid #8a9d7722;border-radius:50%;left:50%;top:47%;transform:translate(-50%,-50%) rotate(-26deg);width:290px;height:160px}.orbit-two{width:342px;height:202px;transform:translate(-50%,-50%) rotate(-26deg);border-color:#8a9d7715}.orbit-three{width:390px;height:243px;border-color:#8a9d770b}.spark{width:3px;height:3px;background:#bacaab88;border-radius:50%;position:absolute;top:30%;left:17%}.spark-two{top:67%;left:77%;width:4px;height:4px}.spark-three{top:12%;left:65%;width:2px;height:2px}.scene-caption{position:absolute;bottom:9px;left:0;right:0;font-size:8px;letter-spacing:2.6px;color:#788774}.playing .orb{animation:float 12s ease-in-out infinite}.playing .orb-halo{animation:breathe 9s ease-in-out infinite}.now-playing{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:17px;font-size:10px;color:var(--muted);min-height:14px}.status-light{width:5px;height:5px;border-radius:50%;background:#64725e}.playing .status-light{background:var(--accent);box-shadow:0 0 6px #c4dfa750}h2{font-weight:400;font-size:25px;letter-spacing:-.5px;margin:12px 0 8px}#track-description{font-size:11px;color:var(--muted);margin:0 0 24px}.play-button{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-width:182px;padding:14px 23px;background:var(--accent);color:#1c2d17;border:0;border-radius:30px;font-weight:600;font-size:12px;transition:background .2s,transform .2s}.play-button:hover{background:#d5ebbc;transform:translateY(-1px)}.play-button svg{width:17px;height:17px;fill:currentColor}.keyboard-note{color:#899782;font-size:9px;margin:14px 0 0}kbd{border:1px solid var(--border);padding:2px 4px;border-radius:3px;font:8px ui-monospace,monospace;margin-right:4px}.settings{padding-top:9px}fieldset{margin:0;padding:0;border:0;min-width:0}legend{font-size:9px;color:#71846a;letter-spacing:1px;width:100%;padding:0;margin-bottom:17px}legend span{font-size:11px;color:#c1cbbc;margin-left:9px;letter-spacing:.2px}.palettes{display:grid;gap:8px}.palette{width:100%;display:flex;align-items:center;text-align:left;padding:10px 12px;background:#151e18;border:1px solid #253126;border-radius:9px;gap:13px;transition:background .2s,border-color .2s}.palette:hover{background:#1c291d}.palette.selected{border-color:#8ba679;background:#1c291d}.palette-art{flex:none;width:39px;height:39px;overflow:hidden;border-radius:6px}.art-flow{background:radial-gradient(ellipse at 30% 20%,#c5db9b,transparent 60%),linear-gradient(145deg,#71865a,#1b3327)}.art-drift{background:radial-gradient(ellipse at 60% 90%,#b9a2ce,transparent 65%),linear-gradient(145deg,#22283c,#72607c)}.art-rain{background:repeating-linear-gradient(115deg,transparent,transparent 7px,#acc1c333 8px,transparent 9px),linear-gradient(145deg,#88a0a3,#233d41)}.palette-copy{display:flex;flex-direction:column;gap:5px}.palette-copy strong{font-size:12px;font-weight:500}.palette-copy>span{color:var(--muted);font-size:10px}.radio-mark{width:13px;height:13px;border-radius:50%;border:1px solid #4b5b47;margin-left:auto;flex:none}.selected .radio-mark{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 3px,transparent 3.6px)}.mix-field{margin-top:28px}.mix-field legend{margin-bottom:20px}.slider-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:20px}.slider-row label{font-size:11px;color:#c5cec0}.slider-row output{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}.slider-row input{width:100%;grid-column:1/-1;margin:0;appearance:none;background:linear-gradient(to right,var(--accent) var(--fill,45%),#344331 var(--fill,45%));height:3px;border-radius:3px;cursor:pointer}.slider-row input::-webkit-slider-thumb{appearance:none;height:11px;width:11px;border-radius:50%;background:#dfebd2;box-shadow:0 0 0 3px var(--bg)}.slider-row input::-moz-range-thumb{height:11px;width:11px;border:0;border-radius:50%;background:#dfebd2;box-shadow:0 0 0 3px var(--bg)}.slider-row small{grid-column:1/-1;font-size:9px;line-height:1.6;color:#8c9a85;margin-top:1px}.session{display:flex;align-items:center;gap:10px;border-top:1px solid var(--border);padding-top:17px}.session>div{display:flex;flex-direction:column;gap:5px;margin-right:auto}.session label{font-size:11px;color:#c5cec0}.session #timer{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}select{background:#18221a;border:1px solid #344331;border-radius:6px;padding:8px 9px;color:#c5cec0;font-size:10px;max-width:125px}.icon-button{border:0;background:transparent;color:var(--muted);padding:6px;display:flex}.icon-button:hover{color:var(--accent)}.icon-button svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}.bottom-line{border-top:1px solid var(--border);margin-top:32px;padding:20px 0;display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#93a08d}.bottom-line>span:first-child{display:flex;gap:7px;align-items:center}.bottom-line svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.1}footer{display:flex;justify-content:space-between;gap:25px;padding:5px 0 26px;font-size:9px;color:#7b8976}details{max-width:370px;text-align:right}summary{cursor:pointer;color:#a3b098}details p{line-height:1.7;text-align:left;margin-bottom:0}.error{font-size:12px;line-height:1.6;color:#ecc7af;max-width:360px;margin:18px auto 0}.error[hidden]{display:none}@keyframes float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-53%)}}@keyframes breathe{0%,100%{opacity:.08}50%{opacity:.14}}@media(min-width:1100px){.workspace{gap:85px}}@media(max-width:760px){.shell{padding:0 24px}.workspace{gap:30px;grid-template-columns:1fr 1fr}.scene{height:260px}.orb{width:150px;height:150px}.intro{padding-top:32px}.header-note{font-size:8px;letter-spacing:1px}.palette{gap:9px;padding:10px}.palette-art{width:31px;height:36px}.palette-copy>span{font-size:9px}.bottom-line>span:last-child{display:none}}@media(max-width:580px){.shell{padding:0 24px;max-width:440px}header{height:79px}.brand{font-size:27px}.header-note{font-size:7px;letter-spacing:.7px}.intro{padding:32px 0 5px}.intro>p:last-child{font-size:12px}h1{font-size:35px}.workspace{grid-template-columns:1fr;gap:25px}.scene{height:260px}.orb{width:163px;height:163px}.player{padding-bottom:7px}.now-playing{margin-top:8px}.settings{padding-top:0}.palette-art{width:39px;height:39px}.palette-copy>span{font-size:10px}.mix-field{margin-top:25px}.bottom-line{margin-top:25px;padding:19px 0}footer{flex-direction:column;gap:12px}details{text-align:left}.keyboard-note{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Expanded sound library and optional mix controls. */
.player{position:sticky;top:24px}
.palettes{grid-template-columns:repeat(2,minmax(0,1fr))}
.palette{position:relative;min-height:78px;padding:12px 10px;gap:9px}
.palette-art{width:32px;height:39px}
.palette-copy{min-width:0;gap:6px}
.palette-copy strong{padding-right:13px;font-size:11px;line-height:1.4}
.palette-copy>span{font-size:9px;line-height:1.5}
.radio-mark{position:absolute;right:9px;top:12px;width:10px;height:10px}
.selected .radio-mark{background:radial-gradient(circle,var(--accent) 0 2px,transparent 2.8px)}
.palettes.multiple .radio-mark{width:12px;height:12px;border-radius:3px}
.palettes.multiple .selected .radio-mark{background:var(--accent)}
.palettes.multiple .selected .radio-mark::after{content:'';display:block;width:3px;height:6px;border:solid #253521;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin:1px 0 0 3px}
.art-night{background:repeating-linear-gradient(0deg,transparent,transparent 8px,#efb99555 9px,transparent 10px),linear-gradient(155deg,#cc8564,#3e2f46)}
.art-keys{background:repeating-linear-gradient(90deg,transparent,transparent 7px,#302b2444 8px,#302b2444 9px),linear-gradient(135deg,#dec6a1,#756146)}
.art-ocean{background:repeating-radial-gradient(ellipse at 50% 130%,transparent,transparent 7px,#9fd4c433 8px,transparent 10px),linear-gradient(150deg,#87b8b1,#1d444b)}
.art-brown{background:radial-gradient(ellipse at 20% 15%,#c2a17e,transparent 70%),linear-gradient(135deg,#755f44,#352a23)}
.scene[data-palette=night]{--glow:#dcac91;--deep:#4e3446}
.scene[data-palette=keys]{--glow:#dec9a8;--deep:#554937}
.scene[data-palette=ocean]{--glow:#9bcfc1;--deep:#254b50}
.scene[data-palette=brown]{--glow:#c6aa88;--deep:#4d392e}
.fine-tune{max-width:none;text-align:left;border-top:1px solid var(--border);margin-bottom:16px}
.fine-tune summary{padding:13px 0;font-size:11px;color:#c5cec0}
.fine-tune summary span{float:right;font-size:9px;color:var(--muted);padding-top:1px}
.fine-tune-content{padding:12px 0 5px}
.pulse-speed{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pulse-speed label{font-size:11px;color:#c5cec0}
.pulse-speed select{max-width:160px}
.slider-row input:disabled{opacity:.35;cursor:not-allowed}
@media(min-width:581px) and (max-width:900px){.palettes{grid-template-columns:1fr}.palette{min-height:61px}.palette-copy strong{font-size:12px}.palette-copy>span{font-size:10px}.radio-mark{top:23px;right:12px}.palette-art{width:35px}}
@media(max-width:580px){.player{position:static}.palettes{grid-template-columns:repeat(2,minmax(0,1fr))}.palette{min-height:85px}.palette-copy>span{font-size:9px}.palette-art{width:28px;height:36px}.palette-copy strong{font-size:10px}.fine-tune summary span{font-size:8px}}
@media(max-width:360px){.palettes{grid-template-columns:1fr}.palette{min-height:61px}.palette-art{width:35px}.palette-copy strong{font-size:12px}.radio-mark{top:23px;right:12px}}
/* Automatic sound rotation. */
.rotation{margin-top:19px;padding:15px;border:1px solid var(--border);border-radius:9px;background:#151e18}
.rotation-toggle{display:flex;align-items:center;position:relative;gap:12px;cursor:pointer}
.rotation-toggle>span:first-child{display:flex;flex-direction:column;gap:5px;margin-right:auto}
.rotation-toggle strong{font-size:11px;font-weight:500}
.rotation-toggle small{font-size:9px;color:var(--muted)}
.rotation-toggle input{position:absolute;right:0;opacity:0;width:38px;height:24px;margin:0;cursor:pointer}
.switch-track{display:block;flex:none;width:33px;height:19px;border-radius:20px;background:#354332;transition:background .2s;pointer-events:none}
.switch-track::after{content:'';display:block;width:13px;height:13px;border-radius:50%;background:#a6b29f;margin:3px;transition:transform .2s}
.rotation-toggle input:checked+.switch-track{background:var(--accent)}
.rotation-toggle input:checked+.switch-track::after{transform:translateX(14px);background:#253521}
.rotation-toggle input:focus-visible+.switch-track{outline:2px solid var(--accent);outline-offset:4px}
#rotation-options{padding-top:18px}
#rotation-options[hidden],.rotation [hidden]{display:none}
.rotation-interval-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rotation-interval-row label{font-size:11px;color:#c5cec0;margin-right:auto}
.rotation-interval-row input{width:68px;background:#18221a;border:1px solid #344331;border-radius:6px;padding:8px 7px;color:var(--text);font-size:11px}
.rotation-interval-row input[aria-invalid=true]{border-color:#d7b490}
.rotation-warning,.rotation-next{font-size:9px;line-height:1.7;margin:14px 0 0}
.rotation-warning{color:#e6c3a4}
.rotation-next{color:var(--accent);font-variant-numeric:tabular-nums;border-top:1px solid var(--border);padding-top:10px;margin-top:10px}
@media(max-width:360px){.rotation{padding:12px}.rotation-interval-row{gap:6px}.rotation-interval-row input{width:55px}.rotation-interval-row select{padding-left:6px;padding-right:6px}}