:root{--color-page-bg: #050812;--color-panel-bg: rgba(20, 25, 35, .3);--color-panel-border: rgba(255, 255, 255, .1);--color-panel-hover-bg: rgba(50, 55, 65, .9);--color-text-main: rgba(255, 255, 255, .8);--color-text-subtle: rgba(255, 255, 255, .7);--color-text-strong: rgba(255, 255, 255, .9);--color-value: rgba(100, 180, 255, .9);--color-button-primary: rgba(60, 120, 220, .8);--color-button-primary-hover: rgba(80, 140, 240, .9);--color-button-accent: rgba(60, 180, 120, .8);--color-button-accent-hover: rgba(80, 200, 140, .9);--color-button-danger: rgba(220, 60, 60, .8);--color-button-danger-hover: rgba(240, 80, 80, .9);--color-image-nav-bg: rgba(30, 35, 45, .8);--color-image-nav-hover-bg: rgba(50, 55, 65, .9);--color-slider-track: rgba(255, 255, 255, .1);--color-slider-thumb: rgba(100, 180, 255, .9);--radius-scene: 12px;--radius-panel: 12px;--radius-button: 8px;--radius-button-sm: 6px;--shadow-strong: 0 8px 32px rgba(0, 0, 0, .4);--shadow-panel: 0 4px 20px rgba(0, 0, 0, .5);--shadow-button: 0 4px 12px rgba(0, 0, 0, .3);--shadow-image-nav: 0 0 8px 0 gold;--controls-gap: 12px;--panel-padding-y: 16px;--panel-padding-x: 20px;--hit-target-min: 44px;--font-main: system-ui, -apple-system, sans-serif;--font-size-label: 13px;--font-size-value: 12px;--font-size-button: 13px;--font-size-button-mobile: 16px}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--color-page-bg);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;font-family:var(--font-main)}.looking-pool{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--color-page-bg)}.scene{position:relative;width:100vw;height:100vh;max-width:768px;overflow:hidden;aspect-ratio:4 / 3;border-radius:24px;box-shadow:0 18px 50px #000000d9,0 0 0 2px #ffd70080;background:radial-gradient(circle at 50% 10%,#28507880,#050812)}.scene:before{content:"";position:absolute;inset:6px;border-radius:inherit;pointer-events:none;border:2px solid rgba(255,215,0,.75);box-shadow:inset 0 0 40px #000000e6,0 0 15px #ffd70066}@media(max-width:768px){.scene{width:100%;aspect-ratio:3 / 4}}.scene img.bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:inherit;box-shadow:none;border:none;pointer-events:none;z-index:0}.scene canvas#water{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:auto;border-radius:inherit;border:none}.controls{position:absolute;bottom:10px;left:50%;transform:translate(-50%);z-index:1000;display:flex;gap:var(--controls-gap);align-items:center}.drawer{position:absolute;left:50%;transform:translate(-50%);bottom:60px;z-index:1000;display:none;min-width:280px;padding:var(--panel-padding-y) var(--panel-padding-x);background:var(--color-panel-bg);border-radius:var(--radius-panel);box-shadow:var(--shadow-panel);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:transform .3s ease}.drawer.open{display:block}.drawer-toggle{display:flex;align-items:center;justify-content:center;min-width:var(--hit-target-min);min-height:var(--hit-target-min);padding:10px;background:#282d37e6;border:1px solid var(--color-panel-border);border-radius:var(--radius-button);color:var(--color-text-subtle);font-size:18px;cursor:pointer;transition:all .2s;box-shadow:var(--shadow-button)}.drawer-toggle:hover{background:var(--color-panel-hover-bg);color:var(--color-text-strong)}.drawer-content{display:flex;flex-direction:column;gap:12px}.control-group{display:flex;flex-direction:column}.control-group label{display:flex;flex-direction:column;gap:6px;color:var(--color-text-main);font-size:var(--font-size-label)}.control-group label span:first-child{display:flex;justify-content:space-between;align-items:center}.control-group label .value{color:var(--color-value);font-weight:500;font-size:var(--font-size-value)}.control-group input[type=range]{width:100%;height:4px;background:var(--color-slider-track);border-radius:2px;outline:none;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--color-slider-thumb);border-radius:50%;cursor:pointer}.control-group input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--color-slider-thumb);border:none;border-radius:50%;cursor:pointer}.control-group{display:flex;flex-direction:column;gap:8px}.control-slider{width:100%}.divider{height:1px;background:var(--color-panel-border);margin:8px 0}.number-stepper{display:flex;align-items:stretch;width:100%;background:#141923e6;border-radius:var(--radius-button);border:1px solid var(--color-panel-border);overflow:hidden;box-shadow:var(--shadow-panel)}.stepper-btn{flex:0 0 auto;width:50%;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--color-text-main);border:none;cursor:pointer;font-size:18px;line-height:1;transition:background .15s ease,color .15s ease}.stepper-btn--minus{border-right:1px solid var(--color-panel-border)}.stepper-btn--plus{border-left:1px solid var(--color-panel-border)}.stepper-btn:hover{background:var(--color-panel-hover-bg);color:var(--color-text-strong)}.stepper-input{flex:1 1 auto;min-width:0;padding:6px 10px;background:transparent;border:none;color:var(--color-text-main);font-size:var(--font-size-label);text-align:center;-moz-appearance:textfield}.stepper-input::-webkit-outer-spin-button,.stepper-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.stepper-input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--color-slider-thumb)}.btn,.btn-stop,.btn-reset,.btn-reset-mobile,.btn-play-pause-mobile,.prev-image,.btn-next-audio-mobile,.next-image{font-family:var(--font-main);border-radius:var(--radius-button);border:1px solid var(--color-panel-border);cursor:pointer;transition:all .2s;box-shadow:var(--shadow-button);display:inline-flex;align-items:center;justify-content:center}.btn-stop,.btn-reset{padding:8px 16px;font-size:var(--font-size-button)}.btn-reset-mobile,.btn-play-pause-mobile,.btn-next-audio-mobile{padding:10px 14px;font-size:var(--font-size-button-mobile);min-width:var(--hit-target-min);min-height:var(--hit-target-min)}.btn-stop{background:var(--color-button-danger);color:#fff}.btn-stop:hover:not(:disabled){background:var(--color-button-danger-hover)}.btn-stop:disabled{opacity:.4;cursor:not-allowed}.btn-reset,.btn-reset-mobile{background:var(--color-button-primary);color:#fff}.btn-reset:hover,.btn-reset-mobile:hover{background:var(--color-button-primary-hover)}.btn-play-pause-mobile{background:var(--color-button-accent);color:#fff}.btn-play-pause-mobile:hover{background:var(--color-button-accent-hover)}.prev-image,.next-image{position:absolute;bottom:10px;z-index:1000;padding:8px 12px;background:var(--color-image-nav-bg);border-radius:var(--radius-button-sm);border-width:0;color:#fff;font-size:var(--font-size-button);box-shadow:var(--shadow-image-nav)}.prev-image{left:20px}.next-image{right:20px}.prev-image:hover,.next-image:hover{background:var(--color-image-nav-hover-bg)}