body.m-room-active{background-image:var(--music-tint, var(--bg-page-gradient));transition:background-image .6s ease}body.m-room-active .music-page{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding-top:.75rem;padding-bottom:.75rem}body.m-room-active>footer{display:none}body.m-room-active .music-grid{flex:1 1 auto;min-height:0;align-items:stretch}body.m-room-active .music-shell{min-height:0;display:flex;flex-direction:column}body.m-room-active #music-stage{flex:1 1 auto;width:100%}@media (min-width: 1280px){body.m-room-active #music-stage{max-height:600px}}body.m-room-active .m-stage-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}body.m-room-active .music-rail{min-height:0}body.m-room-active .music-rail>.rail-sticky{position:static;height:100%}body.m-room-active .music-rail .ad-slot{min-height:0;height:100%;max-height:600px}@media (max-width: 1279px){body.m-room-active .music-grid{grid-template-rows:minmax(0,1fr) auto}}@media (min-width: 1280px){body.m-room-active .music-grid{grid-template-rows:1fr}}.music-hero{position:relative;overflow:hidden}body.m-room-active .music-hero{display:none}.music-alpha-word{color:var(--accent)}.music-picker-grid{display:grid;gap:.875rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));max-width:56rem;margin:0 auto}@media (min-width: 640px){.music-picker-grid{gap:1rem}}.m-room-card[data-world-only],.m-gate.m-world-lock,.m-count-world{display:none}html[data-theme=world] .m-room-card[data-world-only]{display:block}html[data-theme=world] .m-count-world{display:inline}html[data-theme=world] .m-count-flat{display:none}html:not([data-theme=world]) .m-gate[data-world-gate]{display:none}html:not([data-theme=world]) .m-gate.m-world-lock{display:flex}.m-room-card{position:relative;isolation:isolate;display:block;width:100%;padding:1.25rem 1.25rem 1.1rem;text-align:left;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:16px;color:var(--text);cursor:pointer;overflow:hidden;transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .2s ease,box-shadow .2s ease}.m-room-card:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:var(--shadow-soft)}.m-room-card:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.m-room-card-glow{position:absolute;inset:-20%;z-index:-1;opacity:.55;transition:opacity .22s ease;pointer-events:none}.m-room-card:hover .m-room-card-glow{opacity:.85}.m-room-card-name{font-family:var(--font-display, "Inter Variable", system-ui, sans-serif);font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--text);margin:0 0 .35rem}.m-room-card-blurb{color:var(--text-dim);font-size:.875rem;line-height:1.45;margin:0 0 1rem}.m-room-card-body{display:flex;flex-direction:column;height:100%}.m-room-card-icon{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin-bottom:.9rem;border:1px solid var(--line-strong);border-radius:12px;background:var(--bg-soft)}.m-room-card-icon svg{width:1.4rem;height:1.4rem}.m-room-card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem}.m-room-card-tags{display:flex;flex-wrap:wrap;gap:.4rem}.m-chip{border:1px solid var(--line-strong);border-radius:999px;padding:.12rem .5rem;font-family:ui-monospace,JetBrains Mono,SFMono-Regular,monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}.m-room-card-hint{flex-shrink:0;font-family:ui-monospace,JetBrains Mono,SFMono-Regular,monospace;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute)}.music-picker-footer{margin-top:2rem;text-align:center;color:var(--text-mute);font-size:.78rem}.m-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.35rem;padding:3rem 1.5rem;min-height:20rem}.m-gate-back{text-decoration:none;margin-bottom:1.4rem}.m-gate-icon{display:inline-flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;margin-bottom:.6rem;border:1px solid var(--line-strong);border-radius:14px;background:var(--bg-soft)}.m-gate-icon svg{width:1.8rem;height:1.8rem}.m-gate-name{margin:0;font-family:var(--font-display, "Inter Variable", system-ui, sans-serif);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;color:var(--text)}.m-gate-blurb{margin:0 0 1.1rem;color:var(--text-dim);font-size:.875rem}.m-gate-start{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.4rem;background:var(--accent);border:0;border-radius:999px;color:var(--bg, #0b0807);font-weight:600;font-size:.95rem;cursor:pointer;transition:transform .16s ease,filter .16s ease}.m-gate-start svg{width:1rem;height:1rem}.m-gate-start:hover{filter:brightness(1.08);transform:translateY(-1px)}.m-gate-start:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.m-gate-hint{margin:.9rem 0 0;color:var(--text-mute);font-size:.72rem;font-family:ui-monospace,JetBrains Mono,SFMono-Regular,monospace;letter-spacing:.14em;text-transform:uppercase}@media (prefers-reduced-motion: reduce){.m-gate-start:hover{transform:none}}.music-stage[hidden]{display:none!important}.music-stage-header{padding:.1rem 0 .65rem}.m-stage-header{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}.m-back{display:inline-flex;align-items:center;gap:.375rem;padding:0;background:transparent;border:0;color:var(--text-dim);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;cursor:pointer;transition:color .16s ease}.m-back svg{width:.75rem;height:.75rem}.m-back:hover{color:var(--text)}.m-back:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}.m-stage-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .75rem;min-width:0}.m-stage-name{margin:0;font-family:var(--font-display, "Inter Variable", system-ui, sans-serif);font-size:1.5rem;font-weight:600;letter-spacing:-.03em;color:var(--text)}@media (min-width: 640px){.m-stage-name{font-size:1.875rem}}.m-stage-blurb{margin:0;color:var(--text-dim);font-size:.875rem}@media (max-width: 639px){.m-stage-blurb{display:none}}.m-saved{position:absolute;right:.85rem;bottom:.85rem;z-index:5;pointer-events:none;display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line);backdrop-filter:blur(6px);font-family:ui-monospace,JetBrains Mono,SFMono-Regular,monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);opacity:0;transform:translateY(4px);transition:opacity .24s ease,transform .24s ease}.m-saved svg{width:.78rem;height:.78rem;color:var(--accent)}.m-saved.is-on{animation:m-saved-toast 1.8s ease forwards}@keyframes m-saved-toast{0%{opacity:0;transform:translateY(4px)}12%{opacity:1;transform:translateY(0)}78%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2px)}}.m-info-btn{flex-shrink:0;width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:transparent;border:1px solid var(--line-strong);border-radius:14px;color:var(--text-dim);cursor:pointer;transition:color .16s ease,border-color .16s ease}.m-info-btn svg{width:20px;height:20px}.m-info-btn:hover{color:var(--text);border-color:var(--accent)}.m-info-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.m-info-btn.is-open{color:var(--accent);border-color:var(--accent)}.m-info-panel{position:absolute;inset:0;z-index:20;overflow-y:auto;padding:1.1rem 1.2rem 1.3rem;background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(8px);border-radius:inherit}.m-info-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.m-info-title{margin:0;font-family:var(--font-display, "Inter Variable", system-ui, sans-serif);font-size:1.05rem;font-weight:600;letter-spacing:-.01em;color:var(--text)}.m-info-close{flex-shrink:0;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:transparent;border:1px solid var(--line-strong);border-radius:10px;color:var(--text-dim);cursor:pointer}.m-info-close svg{width:16px;height:16px}.m-info-close:hover{color:var(--text);border-color:var(--accent)}.m-info-close:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.m-info-lede{margin:.4rem 0 .9rem;color:var(--text-dim);font-size:.8rem;line-height:1.45}.m-info-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}.m-info-row{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem;align-items:center;padding:.5rem .6rem;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;transition:border-color .2s ease}.m-info-row:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}.m-info-row.is-previewing{border-color:var(--accent)}.m-info-row.is-previewing:after{animation:m-preview-sweep var(--m-preview-ms, 2.8s) linear forwards}@keyframes m-preview-sweep{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media (prefers-reduced-motion: reduce){.m-info-row.is-previewing:after{animation:none;transform:scaleX(1)}}.m-info-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line-strong);border-radius:50%;color:var(--text-dim)}.m-info-icon svg{width:18px;height:18px}.m-info-name{font-size:.85rem;font-weight:600;color:var(--text)}.m-info-desc{font-size:.78rem;color:var(--text-dim);line-height:1.4}.m-info-chips{display:flex;gap:.3rem;flex-shrink:0}.m-info-chip{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line-strong);border-radius:50%;color:var(--text-dim);font-family:ui-monospace,JetBrains Mono,SFMono-Regular,monospace;font-size:.72rem;font-weight:600;cursor:pointer;transition:color .16s ease,border-color .16s ease,background-color .16s ease}.m-info-chip:hover{color:var(--text);border-color:var(--accent)}.m-info-chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.m-info-chip.is-active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.m-hud{position:relative;display:flex;align-items:center;gap:.6rem;width:100%}.m-stage-body{transition:opacity .6s ease,filter .6s ease}#music-stage.is-idle .m-stage-body{opacity:.72;filter:saturate(.85)}html[data-theme=world] #music-stage,html[data-theme=world] #music-stage-header{transition:opacity .3s ease}html[data-theme=world] body.m-idle #music-stage,html[data-theme=world] body.m-idle #music-stage-header{opacity:.22;transition:opacity 2.8s ease}.m-play{width:100%;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:.75rem}@media (min-width: 720px){.m-play{gap:1rem}}.m-canvas{position:relative;width:100%;--m-pad: 34px;flex:1 1 auto;min-height:16rem;background:radial-gradient(circle at 50% 50%,var(--surface-2) 0%,var(--surface) 65%,var(--bg-soft) 100%);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-soft);touch-action:none;overflow:hidden;isolation:isolate}.m-canvas:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.m-center{position:absolute;left:50%;top:50%;width:56px;height:56px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 35%,transparent) 0%,transparent 70%);pointer-events:none}@media (prefers-reduced-motion: no-preference){.m-center{animation:m-center-breathe 6s ease-in-out infinite}}@keyframes m-center-breathe{0%,to{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}.m-glyph{position:absolute;left:calc(var(--m-pad, 34px) + var(--gx, .5) * (100% - var(--m-pad, 34px) * 2));top:calc(var(--m-pad, 34px) + var(--gy, .5) * (100% - var(--m-pad, 34px) * 2));transform:translate(-50%,-50%);width:56px;height:56px;padding:0;background:var(--surface);border:1px solid var(--line-strong);border-radius:50%;color:var(--text);cursor:grab;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease,border-color .2s ease;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none}@media (max-width: 520px){.m-canvas{--m-pad: 28px}.m-glyph{width:46px;height:46px}.m-glyph-icon svg{width:22px;height:22px}.m-center{width:44px;height:44px}}.m-glyph:active,.m-glyph.is-pressed{cursor:grabbing;transform:translate(-50%,-50%) scale(1.08)}.m-glyph.is-dragging{box-shadow:0 8px 32px -8px #00000080}.m-glyph:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.m-glyph:hover{border-color:var(--accent)}.m-glyph-halo{position:absolute;inset:-24%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 28%,transparent) 0%,transparent 70%);opacity:calc(.25 + var(--halo, .5) * .6);transform:scale(calc(.65 + var(--halo, .5) * .95));transition:opacity .2s ease,transform .24s ease;pointer-events:none;z-index:-1}.m-glyph-icon{display:inline-flex}.m-glyph-icon svg{width:26px;height:26px}.m-glyph-pips{position:absolute;bottom:-14px;left:50%;transform:translate(-50%);display:inline-flex;gap:5px;pointer-events:none}.m-pip{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--text-mute);background:transparent;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}.m-pip.is-on{background:var(--accent);border-color:var(--accent);transform:scale(1.15);box-shadow:0 0 0 2px var(--accent-soft)}.m-glyph[data-variant="0"]{border-color:var(--line-strong)}.m-glyph[data-variant="1"]{border-color:color-mix(in srgb,var(--accent) 38%,var(--line-strong))}.m-glyph[data-variant="2"]{border-color:color-mix(in srgb,var(--accent) 72%,var(--line-strong))}@media (prefers-reduced-motion: no-preference){.m-glyph.is-wobbling{animation:m-glyph-wobble .8s cubic-bezier(.4,0,.2,1)}}@keyframes m-glyph-wobble{0%,to{transform:translate(-50%,-50%)}30%{transform:translate(-60%,-50%)}60%{transform:translate(-40%,-50%)}}.m-glyph.is-wobbling .m-glyph-halo{animation:m-halo-wobble .8s cubic-bezier(.4,0,.2,1)}@keyframes m-halo-wobble{0%,to{opacity:calc(.25 + var(--halo, .5) * .6);transform:scale(calc(.65 + var(--halo, .5) * .95))}50%{opacity:1;transform:scale(1.5)}}.m-tray{flex:1 1 auto;min-width:0;min-height:56px;display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:center;padding:.55rem .85rem;background:var(--surface);border:1px dashed var(--line);border-radius:14px;transition:opacity .2s ease,border-color .2s ease}.m-tray.is-empty{opacity:.55;border-color:var(--line)}.m-tray-label{font-family:ui-monospace,JetBrains Mono,SFMono-Regular,monospace;font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;color:var(--text-mute);white-space:nowrap}.m-tray-label:before{content:"";display:inline-block;width:8px;height:8px;margin-right:.5rem;border-radius:50%;background:var(--text-mute);vertical-align:middle;opacity:.5}.m-tray-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:.45rem;align-items:center;justify-content:flex-start;min-height:40px}.m-tray.is-empty .m-tray-list:after{content:"double tap/click a sound, to set it aside";font-family:Inter Variable,system-ui,sans-serif;font-size:.74rem;color:var(--text-mute);font-style:italic}.m-tray-item{position:relative;width:40px;height:40px;padding:0;background:var(--bg-soft);border:1px solid var(--line);border-radius:50%;color:var(--text-mute);filter:saturate(.5);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .18s ease}.m-tray-item svg{width:18px;height:18px}.m-tray-item:hover{color:var(--text);filter:saturate(1);border-color:var(--accent);transform:translateY(-1px)}.m-tray-item:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.m-tray-item.is-hinting{color:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.m-tray-item.is-hinting:after{content:"tap again";position:absolute;transform:translate(40px);font-family:Inter Variable,system-ui,sans-serif;font-size:.7rem;color:var(--accent);white-space:nowrap;pointer-events:none;animation:m-hint-fade .36s ease-out}@keyframes m-hint-fade{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.m-tray-item:hover{transform:none}.m-tray-item.is-hinting:after{animation:none}}@media (prefers-reduced-motion: reduce){.m-glyph{transition:none}.m-glyph.is-wobbling,.m-glyph.is-wobbling .m-glyph-halo{animation:none}.m-saved.is-on{animation:none;opacity:1;transform:none}.m-room-card{transition:border-color .2s ease}.m-room-card:hover{transform:none}body.m-room-active,#music-stage.is-idle .m-stage-body,html[data-theme=world] #music-stage,html[data-theme=world] #music-stage-header,html[data-theme=world] body.m-idle #music-stage,html[data-theme=world] body.m-idle #music-stage-header{transition:none}}
