/* Realtime liquid sculpture. The original artwork remains the fallback. */
.liquid-object.liquid-lab{position:relative;isolation:isolate;width:100%;height:clamp(500px,71svh,720px);min-width:0;margin:0;transform:none;transition:none;overflow:visible}
.liquid-lab::before{content:"";position:absolute;z-index:-1;inset:10% -8% 14%;background:radial-gradient(ellipse,rgba(112,157,184,.12),transparent 67%);pointer-events:none}
.liquid-lab>picture{display:block;width:100%;height:100%;transition:opacity .65s ease}
.liquid-lab.is-ready>picture{opacity:0;visibility:hidden;animation:none!important}
.liquid-lab .liquid-canvas{position:absolute;inset:0 0 76px;display:block;width:100%;height:calc(100% - 76px);opacity:0;transition:opacity 1.2s ease;touch-action:pan-y;cursor:grab;outline:0}
.liquid-lab .liquid-canvas:active{cursor:grabbing}
.liquid-lab.is-ready .liquid-canvas{opacity:1}
.liquid-lab .move-hint{display:none}
.liquid-lab.is-ready .move-hint{display:none}
.liquid-lab-ui{position:absolute;inset:0;pointer-events:none;display:none}
.liquid-lab.is-ready .liquid-lab-ui{display:block}
.liquid-lab-heading{position:absolute;left:6px;right:6px;top:8px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid rgba(178,203,219,.2);font:500 12px/1.6 ui-monospace,monospace;letter-spacing:.12em;color:#aebfca}
.liquid-lab-heading span:first-child{display:flex;align-items:center;gap:12px}
.liquid-lab-heading i{width:5px;height:5px;border-radius:50%;background:#d0e7f5;box-shadow:0 0 12px #99cced88}
.liquid-lab-heading b{font:inherit;letter-spacing:.05em}
.liquid-lab-controls{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr auto;gap:18px 12px;align-items:center;pointer-events:auto}
.liquid-mode-list{display:flex;gap:5px;padding:5px;width:max-content;max-width:100%;border:1px solid rgba(190,213,228,.24);border-radius:99px;background:rgba(6,14,19,.78);backdrop-filter:blur(14px)}
.liquid-mode-list button{display:flex;align-items:center;justify-content:center;gap:9px;min-width:82px;min-height:44px;padding:8px 15px;border:1px solid transparent;border-radius:99px;color:#aabcc7;background:transparent;cursor:pointer;font:400 14px/1.3 var(--sans);transition:background .35s,color .35s,border-color .35s}
.liquid-mode-list button span{font:12px/1.4 ui-monospace,monospace;opacity:.75}
.liquid-mode-list button[aria-pressed=true]{border-color:#bed5e755;background:#cbe5f015;color:#f0f6fa}
.liquid-mode-list button:hover{color:#fff;background:#e0f2ff10}
.liquid-burst{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 5px 0 12px;cursor:pointer;border:0;background:transparent;color:#d4e3ec;font:400 13px/1.5 var(--sans);white-space:nowrap}
.liquid-burst i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid #c4d9e64d;font:300 24px/1 var(--sans);transition:rotate .65s cubic-bezier(.22,1,.36,1),background .3s}
.liquid-burst:hover i{rotate:90deg;background:#d0ebff12}.liquid-burst:disabled{opacity:.4;cursor:default}
.liquid-help{grid-column:1/-1;display:flex;justify-content:space-between;gap:18px;margin:0;padding:0 6px;color:#9aafbd;font-size:12px;line-height:1.7;letter-spacing:.025em}
.liquid-pause{font:inherit;line-height:1.7;color:#c1d2dd;background:none;border:0;padding:0 0 2px;border-bottom:1px solid #a5bfd04d;min-height:28px;cursor:pointer;white-space:nowrap}
.liquid-pause:hover{color:#fff}.liquid-pause:disabled{opacity:.6;cursor:default}
.liquid-lab.is-bursting .liquid-burst i{rotate:135deg;border-color:#edf8ff;background:#bddfff18}
.liquid-lab.is-resting .liquid-lab-heading i{box-shadow:none;background:#82939d}
.liquid-lab button:focus-visible{outline:2px solid #d8ecf9;outline-offset:4px}
@media(min-width:1101px){.interaction-page .interaction:has(.liquid-lab){grid-template-columns:minmax(0,.76fr) minmax(0,1.4fr);gap:4%;min-height:calc(100svh - 88px);padding-block:60px}.liquid-object.liquid-lab{height:clamp(480px,69svh,710px)}}
@media(min-width:761px) and (max-width:1100px){.liquid-object.liquid-lab{height:560px}.liquid-lab-controls{grid-template-columns:1fr;justify-items:center;gap:12px}.liquid-burst{position:absolute;right:10px;bottom:120px;padding:0}.liquid-burst>span{display:none}.liquid-help{width:100%;gap:10px;font-size:12px}.liquid-mode-list button{min-width:72px;padding-inline:10px}}
@media(max-width:760px){
 .liquid-object.liquid-lab{height:480px;margin:32px 0 0;width:100%}
 .liquid-lab .liquid-canvas{inset:10px -20px 88px;width:calc(100% + 40px);height:calc(100% - 98px)}
 .liquid-lab-heading{top:0;left:0;right:0;font-size:12px;letter-spacing:.03em;padding-bottom:12px}
 .liquid-lab-controls{grid-template-columns:1fr;gap:15px;justify-items:center}
 .liquid-mode-list{gap:3px;padding:4px;max-width:100%}.liquid-mode-list button{min-width:82px;padding:9px 14px;font-size:14px}
 .liquid-burst{position:absolute;right:0;bottom:108px;padding:0}.liquid-burst>span{display:none}.liquid-burst i{width:44px;height:44px}
 .liquid-help{padding:0;width:100%;font-size:12px;gap:12px;align-items:center}.liquid-pause{min-height:44px}
}
@media(max-width:350px){.liquid-object.liquid-lab{height:440px}.liquid-mode-list button{min-width:69px;padding-inline:10px;gap:6px}.liquid-help{gap:8px}.liquid-help>span{max-width:185px}.liquid-lab-heading{gap:8px;letter-spacing:0}}
@media(prefers-reduced-motion:reduce){.liquid-lab *, .liquid-lab *::before{transition:none!important}.liquid-lab .liquid-canvas{cursor:default}}