*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#e8e3da;color:#242321;font-family:Arial,'Apple SD Gothic Neo','Malgun Gothic',sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}.stage{height:100dvh;position:relative;isolation:isolate}#scene{position:absolute;inset:0;touch-action:none}#scene canvas{display:block;width:100%;height:100%}#loading{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:13px;padding:30px}.hud{position:absolute;top:max(20px,env(safe-area-inset-top));left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}.hud>*{pointer-events:auto}.home{font-size:20px;font-weight:800;letter-spacing:-1px;display:flex;gap:12px;align-items:center}.home:first-letter{color:#ff5c24}.session{font-size:12px;display:flex;align-items:center;gap:8px}.session small{font-size:9px;color:#8e887e;letter-spacing:1px;margin-left:8px}.dot{display:inline-block;width:5px;height:5px;background:#ff5c24;border-radius:50%}.tool{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:10px 14px;border:1px solid #d0c9bd;border-radius:7px;background:#faf8f0e8;font-size:11px;color:#655d50}.tool[aria-pressed=true]{border-color:#ff5c24;color:#d34718;background:#fff0e5}.live{position:absolute;left:24px;top:85px;display:flex;align-items:center;gap:16px;font-size:10px;color:#7b7264;flex-wrap:wrap;max-width:80vw}.live strong{font-size:13px;color:#39352e;margin:0 4px;font-variant-numeric:tabular-nums}.live #connection{font-size:9px;color:#9b9284}.view-tools{position:absolute;right:24px;top:85px;display:flex;gap:8px}.gentle{cursor:pointer}.gentle input{accent-color:#ff5c24}.controls{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);text-align:center}#phase{font-size:12px;color:#675e51;margin:0 0 14px}#notice{font-size:12px;color:#b83e16;max-width:600px;line-height:1.5;margin:0 0 10px}#notice:empty{display:none}.dock{display:flex;align-items:center;gap:10px;background:#faf9f3f5;border:1px solid #fff;border-radius:13px;box-shadow:0 12px 50px #50442c20;padding:10px}.dock fieldset{border:0;margin:0;padding:0;display:flex;gap:4px}.dock label{position:relative;cursor:pointer}.dock input{position:absolute;opacity:0;width:1px;height:1px}.dock label span{display:block;padding:17px 16px;border-radius:7px;color:#8a8174;font-size:12px;transition:background .2s,color .2s,transform .15s}.dock input:checked+span{background:#ffe5d5;color:#d24615;font-weight:700}.dock input:focus-visible+span{outline:3px solid #ff5c24;outline-offset:2px}.dock button{border:0;border-radius:7px;min-height:50px;padding:12px 20px;transition:transform .15s,box-shadow .15s,background .2s}#explode{display:flex;align-items:center;justify-content:center;gap:10px;background:#ff5c24;color:white;font-weight:700;font-size:13px;min-width:220px;box-shadow:0 3px 0 #c64115}#explode>span:first-child{font-size:25px}#restore{background:#ebe7de;color:#635c50;font-size:11px}button:hover:enabled{filter:brightness(.96);transform:translateY(-2px)}button:active:enabled{transform:translateY(2px) scale(.97);box-shadow:none}button:disabled{opacity:.4;cursor:default}.dock fieldset:disabled{opacity:.5;cursor:default}.hint{font-size:10px;color:#9a9080;margin:14px 0 0}button:focus-visible,a:focus-visible,#scene:focus-visible{outline:3px solid #ff5c24;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}@media(max-width:700px){.hud{left:16px;right:16px;top:max(14px,env(safe-area-inset-top));gap:10px}.home{font-size:18px;gap:7px}.session{font-size:10px}.session small{display:none}.tool{font-size:10px;padding:8px 11px}.live{left:16px;top:72px;gap:10px}.live #connection{flex-basis:100%;font-size:8px}.view-tools{right:16px;top:72px;flex-direction:column;gap:6px}.view-tools .tool{min-height:34px;font-size:9px;padding:7px 9px}.controls{width:calc(100% - 28px);max-width:430px;bottom:max(16px,env(safe-area-inset-bottom))}.dock{display:grid;grid-template-columns:1fr 1fr;padding:9px;gap:8px}.dock fieldset{grid-column:1;justify-content:center}.dock label{flex:1}.dock label span{padding:13px 9px;font-size:11px}#restore{grid-row:1;grid-column:2;min-height:42px}#explode{grid-column:1 / -1;min-width:0;min-height:56px;font-size:14px}.hint{font-size:9px;margin-top:10px}.hint span{display:none}#phase{font-size:11px;margin-bottom:10px}#notice{font-size:10px}}@media(max-height:500px) and (orientation:landscape){.view-tools{top:70px}.controls{bottom:10px}.hint{display:none}.dock{display:flex}.dock button{min-height:42px}.dock label span{padding:13px 10px}#phase{margin-bottom:6px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Four effects, one context-sensitive action. */
.dock{gap:12px}.dock fieldset{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.dock label span{white-space:nowrap;padding:17px 13px}.dock #explode{min-width:230px}.dock #explode[data-action="restore"]{background:#292824;box-shadow:0 3px 0 #111;color:#fff4e8}
@media(max-width:700px){.dock{display:flex;flex-direction:column;gap:8px}.dock fieldset{width:100%;grid-template-columns:repeat(4,minmax(0,1fr))}.dock label span{font-size:10px;padding:13px 5px}.dock #explode{width:100%;min-width:0}.dock fieldset:disabled label{cursor:default}}

.controls{width:min(900px,calc(100% - 32px))}.dock{min-width:0}.dock #effect-picker{display:flex;flex:1;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#ff8a60 #eee7df;padding-bottom:6px;touch-action:pan-x}.dock #effect-picker label{flex:0 0 auto;scroll-snap-align:start}.dock #effect-picker label span{min-width:82px;text-align:center}.dock #explode{flex:0 0 auto}#effect-picker::-webkit-scrollbar{height:4px}#effect-picker::-webkit-scrollbar-thumb{background:#ff8a60;border-radius:4px}@media(max-width:700px){.controls{width:calc(100% - 28px);max-width:430px}.dock #effect-picker{flex:none;width:100%}.dock #effect-picker label{flex:0 0 auto}.dock #effect-picker label span{min-width:78px;padding:13px 10px}}

/* Keep the overflowing choices anchored at the left edge on every viewport. */
.effect-browser{display:flex;align-items:center;flex:1;min-width:0;position:relative;gap:4px}.dock .effect-browser #effect-picker{justify-content:flex-start;flex:1;width:0}.dock .picker-next{flex:0 0 34px;min-width:34px;min-height:44px;padding:0;background:#fff0e5;border:1px solid #f3c7b4;color:#d74a1a;font-size:27px;line-height:1}.picker-tip{font-size:11px;color:#a54120;margin:0 0 9px}.picker-tip span{display:inline-block;margin-left:6px}.picker-tip[hidden],.dock .picker-next[hidden]{display:none!important}.dock #effect-picker.is-peeking{scroll-snap-type:none;scroll-behavior:auto}@media(max-width:700px){.effect-browser{width:100%;flex:none}.picker-tip{font-size:10px}.dock .effect-browser #effect-picker{width:0;flex:1}}

/* A second, quieter action beside the launch/restore button. */
.dock .community-link{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:50px;padding:12px 17px;border:1px solid #f3c7b4;border-radius:7px;background:#fff0e5;color:#b34416;font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap;transition:transform .15s,background .2s,border-color .2s}.dock .community-link>span:first-child{font-size:16px;line-height:1}.dock .community-link:hover{background:#ffe5d5;border-color:#f0ad86;transform:translateY(-2px)}.dock .community-link:active{transform:translateY(1px)}@media(max-width:700px){.dock .community-link{width:100%;min-height:48px;font-size:12px}}@media(max-height:500px) and (orientation:landscape){.dock .community-link{min-height:42px;padding:10px 14px}}