:root{color:#544733;background:#f5eedc;font-family:Yu Gothic,Hiragino Kaku Gothic ProN,system-ui,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}.app.is-loading-hidden{visibility:hidden}.mayonnaise-loading{background:radial-gradient(circle at 50% 42%,#fffaf0 0%,#f5eedc 64%,#e9ddc4 100%)}.mayonnaise-loading .studio-loading__panel{background:#fffaf0b8;border:1px solid #c99b4647;border-radius:28px;padding:30px 28px 26px;box-shadow:0 18px 55px #7050291f}.mayonnaise-loading .studio-loading__mark{box-shadow:inset 0 -4px #8c72451f,0 7px 20px #8c724524}button,input{font:inherit}.app{background:#f5eedc;flex-direction:column;height:100dvh;min-height:380px;display:flex}.top{background:#fffaf0;border-bottom:1px solid #e9ddc4;flex:none;justify-content:space-between;align-items:center;gap:10px;height:72px;padding:0 clamp(18px,4vw,60px);display:flex}.brand{letter-spacing:.08em;align-items:center;gap:10px;font-size:22px;font-weight:800;display:flex}.brand-mark{color:#8c7245;background:#eee1a2;border-radius:50%;place-items:center;width:35px;height:35px;font-size:25px;line-height:1;display:grid}.top-note{color:#9c8e79;letter-spacing:.08em;font-size:13px}.workspace{flex:1;min-height:0;display:flex;position:relative}.stage{background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,57%), color-mix(in srgb, var(--stage-background,#f4ecd8) 55%, white) 0%, var(--stage-background,#f4ecd8) 64%, color-mix(in srgb, var(--stage-background,#f4ecd8) 85%, var(--shadow-color,#997446)) 100%);flex:1;min-width:0;min-height:0;position:relative;overflow:hidden}.settings{overscroll-behavior:contain;scrollbar-width:thin;-webkit-user-select:none;user-select:none;background:#fffaf0;border-left:1px solid #e9ddc4;flex:none;width:278px;padding:25px 22px 20px;overflow-y:auto;box-shadow:-8px 0 26px #76532e0d}.settings-heading{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.eyebrow{color:#ba965b;letter-spacing:.16em;font-size:10px;font-weight:800}.settings h2{margin:3px 0 0;font-size:18px;line-height:1.4}.settings-tabs{background:#efe4ce;border-radius:12px;grid-template-columns:1fr 1fr;gap:3px;margin-top:18px;padding:3px;display:grid}.settings-tab{color:#927d5d;cursor:pointer;background:0 0;border:0;border-radius:9px;padding:9px 7px;font-size:12px;font-weight:700}.settings-tab.active{color:#71562f;background:#fffaf0;box-shadow:0 1px 4px #6348231f}.settings-tab:focus-visible{outline-offset:2px;outline:3px solid #c99b46}.settings-view[hidden]{display:none}.settings-description{color:#96836a;margin:14px 0 19px;font-size:12px;line-height:1.7}.settings-controls{gap:17px;display:grid}.parameter{gap:6px;font-size:13px;font-weight:700;display:grid}.parameter>span{justify-content:space-between;display:flex}.parameter output{color:#b38646;font-variant-numeric:tabular-nums}.parameter small{color:#9d8c74;font-size:10px;font-weight:400}.parameter input{accent-color:#d5aa62;cursor:pointer;width:100%}.parameter input[type=range]{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;touch-action:none}.parameter input:focus-visible,.settings button:focus-visible,.settings-toggle:focus-visible{outline-offset:3px;outline:3px solid #c99b46}.settings-actions{gap:8px;margin-top:24px;display:grid}.settings-actions small{color:#9d8c74;font-size:10px;line-height:1.5}.settings-default{color:#866c48;cursor:pointer;background:#fffdf7;border:1px solid #e3d4b8;border-radius:12px;width:100%;padding:10px}.settings-save{background:#fff1ce;font-weight:700}.settings-default:hover{background:#fff1cf}.settings-default:disabled{opacity:.5;cursor:default;background:#fffdf7}.settings-toggle,#settings-close{display:none}.debug-toggle{color:#795f39;cursor:pointer;white-space:nowrap;background:#fffdf7;border:1px solid #e3d4b8;border-radius:12px;padding:8px 12px;font-size:12px;font-weight:700}.debug-toggle[aria-expanded=true]{background:#fff1ce}.debug-toggle:focus-visible{outline-offset:3px;outline:3px solid #c99b46}.debug-panel{z-index:4;color:#6f5b3c;pointer-events:none;background:#fffaeeeb;border:1px solid #ccaf7ca6;border-radius:13px;min-width:173px;padding:11px 13px;font-size:11px;position:absolute;top:16px;right:16px;box-shadow:0 5px 20px #7050291a}.debug-panel[hidden]{display:none}.debug-panel>div{justify-content:space-between;gap:13px;display:flex}.debug-panel>div+div{margin-top:6px}.debug-panel output{color:#70512b;font-variant-numeric:tabular-nums;font:700 12px ui-monospace,Consolas,monospace}.stage-glow{background:color-mix(in srgb, var(--shadow-color,#997446) 13%, transparent);filter:blur(24px);border-radius:50%;width:min(660px,95vw);height:115px;position:absolute;bottom:1%;left:50%;transform:translate(-50%)}.bath-layer{background:radial-gradient(ellipse at var(--light-x,40%) var(--light-y,32%), color-mix(in srgb, var(--fluid-color,#f7f1d0) 70%, var(--light-color,#fffff9)), var(--fluid-color,#f7f1d0) 62%, color-mix(in srgb, var(--fluid-color,#f7f1d0) 75%, var(--shadow-color,#997446)));pointer-events:none;border-radius:50%;position:absolute;overflow:hidden}.bath-layer canvas{opacity:.85;width:100%;height:100%;display:block}#play-canvas{touch-action:none;cursor:grab;width:100%;height:100%;display:block;position:absolute;inset:0}#play-canvas:active{cursor:grabbing}.hint{color:#8a785d;text-align:center;pointer-events:none;white-space:nowrap;background:#fffaefc7;border-radius:999px;max-width:calc(100% - 30px);margin:0;padding:10px 18px;font-size:13px;transition:opacity .2s;position:absolute;top:5%;left:4%}.hint.quiet{opacity:.2}.toolbar{background:#fffaf0;border-top:1px solid #e3d7bc;flex-direction:column;flex:none;justify-content:center;align-items:center;min-height:128px;padding:18px 16px 12px;display:flex}.actions{justify-content:center;gap:clamp(8px,2vw,18px);display:flex}.actions button{color:#5f503b;cursor:pointer;background:#fffdf7;border:1px solid #ded0b1;border-radius:18px;justify-content:center;align-items:center;gap:9px;min-width:140px;height:54px;font-weight:700;transition:transform .15s,background .15s;display:flex;box-shadow:0 3px #e4d6b8}.actions button:hover{background:#fff2ca;transform:translateY(-2px)}.actions button:active{box-shadow:none;transform:translateY(2px)}.actions button:focus-visible{outline-offset:3px;outline:3px solid #c99b46}.actions button:disabled{opacity:.5;cursor:default}.icon{color:#b18f57;font-size:26px;font-weight:400;line-height:1}.social-icon{font-size:20px;font-weight:800}.toolbar-meta{justify-content:center;align-items:center;width:100%;min-height:22px;margin-top:10px;padding:0 70px;display:flex;position:relative}#status{color:#9a896f;text-align:center;min-height:18px;margin:0;font-size:12px}.credits-open{color:#907b5c;cursor:pointer;text-underline-offset:3px;background:0 0;border:0;padding:3px 8px;font-size:11px;text-decoration:underline;position:absolute;right:0}.credits-open:hover{color:#664b27}.language{color:#664b27;background:#fffaf0;border:1px solid #d8c7a5;border-radius:8px;min-width:86px;margin-left:auto;padding:6px 8px}.credits-open:focus-visible{outline-offset:2px;border-radius:5px;outline:3px solid #c99b46}.mayonnaise-credits{--studio-credits-backdrop:#483925ad;--studio-credits-surface:#fffaf0;--studio-credits-soft:#fff5dc;--studio-credits-border:#e4d6b8;--studio-credits-text:#544733;--studio-credits-muted:#8f7d65;--studio-credits-accent:#9a6f31}@media (max-width:600px){.top{height:54px}.brand{font-size:17px}.top-note{display:none}.toolbar{min-height:112px;padding:13px 8px 10px}.actions{width:100%}.actions button{border-radius:13px;flex-direction:column;flex:1;gap:0;min-width:0;height:54px;font-size:11px}.icon{font-size:23px}.toolbar-meta{padding:0 58px}#status{font-size:11px}.credits-open{font-size:10px;right:2px}.hint{display:none}}@media (max-height:550px){.top{height:48px}.toolbar{min-height:72px;padding:8px}.actions button{height:42px}#status{display:none}.hint{top:2%}}@media (max-width:900px){.top-note{margin-left:auto;margin-right:16px}.settings-toggle{color:#795f39;cursor:pointer;background:#fff1ce;border:1px solid #e3d4b8;border-radius:12px;padding:8px 12px;font-size:12px;font-weight:700;display:block}#settings-close{color:#8f7959;cursor:pointer;background:0 0;border:0;font-size:24px;line-height:1;display:block}.settings{z-index:5;width:min(310px,86vw);display:none;position:absolute;top:0;bottom:0;right:0;box-shadow:-12px 0 36px #5843262e}.settings.open{display:block}}@media (max-width:600px){.debug-toggle{margin-left:auto}.settings-toggle{margin-left:0}.debug-panel{top:10px;right:10px}}