@font-face{font-family:DM;src:url('assets/fonts/dm-sans-latin.woff2') format('woff2');font-style:normal;font-weight:100 1000;font-display:swap}
:root{color-scheme:dark;--ink:#eeeaf7;--muted:#a49bad;--line:#d7cfff16;--mint:#c2f6e5;--lavender:#d6c8f8}
*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%;background:#080910;color:var(--ink);font-family:DM,system-ui,sans-serif}body{overflow-x:hidden}button,input{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit;border:0}button,input,a{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation;transition:background .2s,border-color .2s,color .2s}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:4px}button:disabled{cursor:wait;opacity:.5}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.depth-shell{min-height:650px;height:100svh;display:grid;grid-template-rows:78px minmax(315px,1fr) auto;background:radial-gradient(ellipse at 50% 38%,#151025 0,#0b0c15 40%,#080910 75%)}
.depth-header{padding:0 42px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;z-index:2}.lab-link{justify-self:start;display:flex;align-items:center;gap:10px;color:#a49caf;font-size:12px;padding:10px 0}.lab-link:hover{color:#eee5ff}.lab-link>span{color:#d1bedc;font-size:16px}.depth-header h1{margin:0;font-size:14px;font-weight:450;letter-spacing:-.02em}.buddy-mark{justify-self:end;display:flex;align-items:center;justify-content:center;gap:5px;width:30px;height:30px;border-radius:50%;border:1px solid #7e709333;background:radial-gradient(circle at 38% 25%,#c7a6ff20,transparent 72%)}.buddy-mark i{width:3px;height:5px;background:#d7d1ea;border-radius:50%;box-shadow:0 0 5px #d7d1ea60}
.depth-stage{position:relative;isolation:isolate;min-height:0;overflow:hidden}.stage-glow{position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 60% 55%,#edb2ac06,transparent 35%),radial-gradient(ellipse at 32% 48%,#79c3db09,transparent 36%)}#depth-canvas{display:block;width:100%;height:100%;touch-action:pan-y}.pointer-hint{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);pointer-events:none;white-space:nowrap;font-size:10px;letter-spacing:.055em;color:#96889d}.pointer-hint>span{color:#cbbde4;font-size:18px;vertical-align:-2px;margin-left:7px}.scene-error{position:absolute;left:20%;right:20%;top:40%;font-size:16px;text-align:center;color:#ecc0cc}
.depth-controls{width:min(780px,calc(100% - 80px));justify-self:center;padding:10px 0 max(30px,env(safe-area-inset-bottom));z-index:3}.effect-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.effect-card{position:relative;min-height:78px;display:flex;align-items:center;justify-content:center;gap:14px;border:1px solid #d0beed0d;border-radius:13px;background:linear-gradient(120deg,#bea8e908,#b7c0e603);color:#a59ab8}.effect-card:hover{border-color:#ccbbf038;background:#c1a8f610}.effect-card svg{width:38px;height:31px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}.effect-card .dot{fill:currentColor;stroke:none}.effect-card>span{font-size:12px;letter-spacing:.015em}.effect-card[aria-pressed=true]{color:#e7d9ff;background:linear-gradient(120deg,#a080e629,#cca9cd08);border-color:#d0b6fe5c;box-shadow:0 0 25px #bd8be307,inset 0 1px 0 #efdfff06}.effect-card[data-effect=ripple][aria-pressed=true]{color:#c4eee8;background:linear-gradient(120deg,#8bcbc519,#b2a5e807);border-color:#addddc55}.effect-card[data-effect=bloom][aria-pressed=true]{color:#f0cfdd;background:linear-gradient(120deg,#d896b31d,#bba5e809);border-color:#e4b3d14d}.effect-card[data-effect=flat-bloom][aria-pressed=true]{color:#e2c7ff;background:linear-gradient(120deg,#9e82dd1d,#9cc8ed09);border-color:#c8b5f24d}.flat-bloom-icon{position:relative;width:38px;height:31px;display:block}.flat-bloom-icon i{position:absolute;left:50%;top:50%;width:17px;height:8px;border:1px solid currentColor;border-radius:100% 12% 100% 12%;transform-origin:0 50%;transform:rotate(calc(var(--petal) * 51.43deg)) translateX(2px);opacity:.9}.flat-bloom-icon i:nth-child(1){--petal:0}.flat-bloom-icon i:nth-child(2){--petal:1}.flat-bloom-icon i:nth-child(3){--petal:2}.flat-bloom-icon i:nth-child(4){--petal:3}.flat-bloom-icon i:nth-child(5){--petal:4}.flat-bloom-icon i:nth-child(6){--petal:5}.flat-bloom-icon i:nth-child(7){--petal:6}.flat-bloom-icon::after{content:'';position:absolute;left:17px;top:13px;width:4px;height:4px;border-radius:50%;background:currentColor}.active-light{position:absolute;right:9px;top:9px;width:3px;height:3px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor;opacity:0}.effect-card[aria-pressed=true] .active-light{opacity:1}.cycle-button{border:1px solid var(--line);border-radius:13px;background:#0d0e1600;color:#978caa;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;font-size:10px}.cycle-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.cycle-button[aria-pressed=true]{border-color:#c6b2f72e;color:#d4c5e8;background:#c9baff08}.cycle-track{display:block;width:22px;height:11px;border-radius:10px;background:#6c62734d;padding:2px;position:relative}.cycle-track::after{content:'';display:block;width:7px;height:7px;border-radius:50%;background:#9e92ac;transition:transform .2s}.cycle-button[aria-pressed=true] .cycle-track{background:#8d70b960}.cycle-button[aria-pressed=true] .cycle-track::after{transform:translateX(11px);background:#dec7ff;box-shadow:0 0 7px #d4b7ff55}
.depth-row{display:flex;justify-content:space-between;align-items:center;gap:15px;border-bottom:1px solid var(--line);padding:19px 0 16px;margin-bottom:16px}.depth-options,.material-options{display:flex;align-items:center;gap:3px}.group-label{font-size:10px;color:#92889f;margin-right:15px}.depth-options button,.material-options button{background:transparent;color:#a298ae;border-radius:20px;padding:8px 13px;font-size:11px;white-space:nowrap}.depth-options button:hover,.material-options button:hover{color:#e5d9f8}.depth-options button[aria-pressed=true]{background:#c8b8ed16;color:#e2d6f4;box-shadow:inset 0 0 0 1px #c9b7f219}.material-options{padding:3px;background:#0a0b12;border:1px solid var(--line);border-radius:22px}.material-options button{font-size:10px;padding:6px 13px}.material-options button[aria-pressed=true]{background:#272232;color:#e1d6f4}
.action-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}.name-field{position:relative;display:flex;align-items:center;gap:9px;justify-self:start;min-width:0}.name-field>svg{width:14px;height:14px;fill:none;stroke:#ac9abd;stroke-width:1.2;flex-shrink:0}.name-field input{width:115px;max-width:100%;min-width:0;border:0;border-bottom:1px solid #c9b4dc25;background:transparent;border-radius:0;color:#ddd1e7;font-size:12px;padding:8px 0}.name-field input::placeholder{color:#97879f}#saved-state{position:absolute;top:calc(100% + 3px);left:23px;font-size:8px;color:#b1c4b4;white-space:nowrap}#saved-state[data-error=true]{color:#e7b6c1}.replay-button{background:#100e1800;border:1px solid #c8b6e51a;border-radius:22px;padding:12px 16px;display:flex;align-items:center;gap:8px;font-size:11px;color:#bcb0cd}.replay-button:hover{background:#c6a7fc09;border-color:#c8b6e540}.replay-button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.journey-button{justify-self:end;display:flex;align-items:center;gap:17px;border-radius:24px;background:#d9ccef;color:#292131;padding:13px 20px;font-size:11px;white-space:nowrap;box-shadow:0 0 22px #d5aff008}.journey-button:hover{background:#ece0ff;box-shadow:0 0 22px #d5aff016}.journey-button>span{font-size:15px;line-height:1}
.gather-options{display:flex;align-items:center;gap:3px}.gather-options .group-label{margin-right:6px}.gather-options button{background:transparent;color:#a298ae;border-radius:18px;padding:8px 10px;font-size:10px}.gather-options button[aria-pressed=true]{background:#c8b8ed16;color:#e2d6f4;box-shadow:inset 0 0 0 1px #c9b7f219}.gather-options button:hover{color:#e5d9f8}
@media(min-width:1600px){.depth-shell{grid-template-rows:92px minmax(315px,1fr) auto}.depth-controls{padding-bottom:38px}}
@media(max-width:700px){.depth-shell{grid-template-rows:66px minmax(320px,1fr) auto;min-height:705px}.depth-header{padding:0 22px}.depth-header h1{font-size:12px}.lab-link{font-size:10px;gap:7px}.buddy-mark{width:25px;height:25px}.depth-controls{width:calc(100% - 36px);padding-top:6px;padding-bottom:max(25px,env(safe-area-inset-bottom))}.effect-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.effect-card{min-height:86px;flex-direction:column;gap:8px;border-radius:10px}.effect-card svg{width:32px;height:27px}.flat-bloom-icon{width:32px;height:27px}.flat-bloom-icon i{width:14px;height:7px}.flat-bloom-icon::after{left:14px;top:11px}.effect-card>span{font-size:10px}.cycle-button{border-radius:10px;font-size:9px;gap:7px}.cycle-button svg{width:17px;height:17px}.depth-row{flex-wrap:wrap;justify-content:center;gap:14px;padding:15px 0 13px;margin-bottom:14px}.depth-options{justify-content:center;gap:3px}.group-label{font-size:9px;margin-right:6px}.depth-options button{font-size:10px;padding:8px 10px}.material-options{padding:2px}.material-options button{font-size:9px;padding:6px 17px}.action-row{gap:8px}.name-field{gap:6px}.name-field>svg{width:12px;height:12px}.name-field input{width:66px;font-size:11px}.replay-button{padding:11px 12px;gap:6px;font-size:10px}.journey-button{padding:12px 13px;font-size:10px;gap:9px}.pointer-hint{font-size:9px;bottom:8px}#saved-state{left:18px}}
@media(max-width:700px){.depth-options{flex-basis:100%}.gather-options button{font-size:9px;padding:7px 9px}.gather-options .group-label{font-size:9px;margin-right:3px}}
@media(max-width:360px){.depth-header{padding:0 16px}.depth-header h1{font-size:11px}.depth-controls{width:calc(100% - 28px)}.effect-options{gap:5px;grid-template-columns:repeat(4,minmax(0,1fr))}.journey-button{font-size:9px;padding:12px 11px;gap:6px}.name-field input{width:56px}.replay-button{padding:11px 10px;font-size:9px}}
@media(pointer:coarse){.pointer-hint{font-size:0}.pointer-hint::before{content:'Touch the light';font-size:9px}.pointer-hint>span{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

.effect-options{grid-template-rows:repeat(2,auto)}
.effect-options .cycle-button{grid-column:auto;grid-row:auto}
.effect-card{min-height:60px;gap:10px}
.effect-card>span:not([aria-hidden]){white-space:nowrap}
.rounded-petal-icon i,.wave-petal-icon i{border-radius:50%;height:11px}
.wave-petal-icon{transform:rotate(-18deg)}
.wave-petal-icon i:nth-child(2n){transform:rotate(calc(var(--petal) * 51.43deg)) translateX(5px);opacity:.55}
.effect-card[data-effect=round-bloom][aria-pressed=true]{color:#f0d4c2;border-color:#e1bd9c66;background:#dca57812}
.effect-card[data-effect=petal-wave][aria-pressed=true]{color:#c1f4e6;border-color:#a1dece66;background:#87dabd12}
.hula-icon{position:relative;width:38px;height:31px;display:block;border-bottom:1px solid currentColor;border-radius:50%;opacity:.95}
.hula-icon i{position:absolute;left:50%;top:8px;width:6px;height:17px;border:1px solid currentColor;border-radius:65% 35% 65% 35%;transform-origin:50% 0;transform:rotate(calc((var(--leaf) - 3) * 11deg)) translateX(calc((var(--leaf) - 3) * 3px));opacity:.9}
.hula-icon i:nth-child(1){--leaf:0}.hula-icon i:nth-child(2){--leaf:1}.hula-icon i:nth-child(3){--leaf:2}.hula-icon i:nth-child(4){--leaf:3}.hula-icon i:nth-child(5){--leaf:4}.hula-icon i:nth-child(6){--leaf:5}.hula-icon i:nth-child(7){--leaf:6}
.effect-card[data-effect=hula-green][aria-pressed=true]{color:#b7f1b0;border-color:#9bd89966;background:#75cb7b16}
@media(max-width:700px){.effect-card{min-height:68px;gap:4px}.rounded-petal-icon i,.wave-petal-icon i{height:10px}.effect-card>span:not([aria-hidden]){font-size:9px}}