:root{color-scheme:dark;--bg:#052b24;--pine:#03382d;--mint:#82f6c6;--text:#f6fff9;--muted:#a5c9be;--gold:#efcc76;--line:rgba(225,255,240,.12);font-family:ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;background:var(--bg)}body{touch-action:manipulation;overscroll-behavior:none}button,input,textarea,select{font:inherit}button{border:0;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b5ffe5;outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}#app{position:relative;background:radial-gradient(ellipse at 65% 12%,#135946 0%,#062e27 47%,#05241e 100%)}
button:active{transform:scale(.97)}.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.uicon{display:inline-block;width:1em;height:1em;vertical-align:-.13em;flex:0 0 auto}.brand{font-weight:950;letter-spacing:-.075em;font-size:24px;line-height:1}.brand span{color:#93f9cf}.brand b{font-size:11px;color:#e9c676;vertical-align:top;margin-left:4px;display:inline-grid;place-items:center}.brand b svg{width:13px;height:13px}.loading{height:100%;display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center}.loading p{color:var(--muted)}
.welcome{height:100%;position:relative;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 30px) 24px calc(env(safe-area-inset-bottom) + 28px);overflow:auto;background:linear-gradient(180deg,rgba(0,31,24,.1) 15%,#06261f 78%),url('/veda-home.jpg') center 29%/auto 73% no-repeat,#063429}.welcome .brand{font-size:28px;position:relative;z-index:1}.welcome-content{margin-top:auto;position:relative;z-index:1;max-width:550px;margin-inline:auto;width:100%}.eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:#b6fdd3}.welcome h1{font-size:clamp(45px,13vw,75px);font-weight:850;letter-spacing:-.08em;line-height:.99;margin:13px 0 16px;text-wrap:balance}.welcome h1 em{font-style:normal;color:#99ffd1}.welcome p{line-height:1.6;color:#c0dbd1;font-size:14px;max-width:340px;margin:0 0 26px}.primary{border-radius:18px;background:#bcffd8;color:#074431;box-shadow:0 10px 28px rgba(38,208,141,.16);font-weight:850;padding:16px 22px;font-size:15px;display:inline-flex;align-items:center;gap:18px;justify-content:center}.welcome .primary{width:100%;min-height:57px}.fineprint{color:#7ea99a!important;font-size:11px!important;text-align:center;margin:14px 0 0!important;max-width:none!important}.subtle{color:var(--muted)}
.game{height:100dvh;display:flex;flex-direction:column;overflow:hidden;position:relative;isolation:isolate}.game::before{content:'';position:absolute;inset:0 0 32%;background:radial-gradient(ellipse at 50% 52%,rgba(16,132,92,.2),transparent 70%);pointer-events:none;z-index:-1}
.topbar{flex:0 0 auto;min-height:70px;padding:calc(env(safe-area-inset-top) + 11px) 17px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px}.top-left{display:flex;align-items:center;gap:14px}.topbar .brand{font-size:20px}.pack-button{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#ffffff0a;padding:8px 10px;border-radius:12px;color:#dfefe8;font-weight:650;font-size:12px}.circle-button{width:36px;height:36px;border-radius:12px;background:#ffffff0b;border:1px solid var(--line);font-size:17px;display:grid;place-items:center}.top-actions{display:flex;gap:7px}
.stage-zone{min-height:0;flex:1 1 auto;position:relative;margin:0 7px 0;isolation:isolate;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,rgba(2,67,49,.03),rgba(4,66,51,.2)),url('/veda-stage.jpg') center center/cover}.stage-zone::before{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,36,30,.15),transparent 45%,rgba(0,28,21,.36));z-index:0}.stage-eyebrow{position:absolute;z-index:2;top:13px;left:16px;right:16px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.15em;font-weight:800;color:#d3ffe5b8}.stage-eyebrow span:last-child{color:#a5efc3}.stage-canvas{position:absolute;inset:12px 0 10px;width:100%;height:calc(100% - 22px);z-index:1;display:block;pointer-events:none}.performer-targets{position:absolute;inset:12px 0 10px;z-index:4;pointer-events:none}.performer-target{position:absolute;pointer-events:auto;display:block;background:transparent;border:1px solid transparent;border-radius:45% 45% 16% 16%;touch-action:none}.performer-target:hover,.performer-target:focus-visible{border-color:rgba(155,255,198,.7);background:rgba(149,255,198,.04)}.performer-target .number{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);font-size:9px;background:#063b30d9;border:1px solid #79f1b833;color:#e1fff1;padding:3px 6px;border-radius:8px}.empty-hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#c8efdb97;pointer-events:none;font-weight:650;font-size:11px;white-space:nowrap;letter-spacing:.03em;z-index:3}.empty-hint.hidden{display:none}
.transport{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 14px 8px;min-height:50px}.transport-left,.transport-right{display:flex;align-items:center;gap:7px}.pill{border-radius:12px;background:#ffffff0b;border:1px solid var(--line);height:33px;padding:0 10px;font-size:11px;font-weight:740;display:flex;align-items:center;gap:6px;white-space:nowrap}.pill.active{background:#b3ffdc1c;color:#b6ffdc;border-color:#9df3c74d}.iconic{font-size:15px}.beat-indicator{display:flex;gap:4px;align-items:center;padding:0 3px}.beat-indicator i{width:5px;height:5px;border-radius:50%;background:#598c76}.beat-indicator i.on{background:#baffd9;box-shadow:0 0 7px #9bfcc2}.recording{color:#ff989c!important}.recording-dot{display:inline-block;width:7px;height:7px;background:#ff6d78;border-radius:50%;box-shadow:0 0 10px #ff6d78;animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.4}}
.dock{flex:0 0 auto;position:relative;padding:13px max(13px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 14px) max(13px,env(safe-area-inset-left));border-top:1px solid #ffffff1b;border-radius:22px 22px 0 0;background:linear-gradient(175deg,rgba(10,72,55,.98),#052b24);box-shadow:0 -18px 45px #00170d5c;z-index:5}.dock::before{content:'';position:absolute;top:5px;width:34px;height:3px;left:50%;transform:translateX(-50%);background:#ffffff31;border-radius:10px}.dock-head{display:flex;justify-content:space-between;align-items:center;margin:0 4px 9px}.dock-head b{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#e1fff0}.dock-count{font-size:10px;color:#9ad3b8}.tile-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:520px;margin-inline:auto}.tile{height:clamp(45px,7.1vh,64px);min-height:44px;background:#ffffff08;border:1px solid #ffffff12;border-radius:12px;display:grid;place-items:center;position:relative;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .16s,background .16s,box-shadow .18s;overflow:hidden}.tile::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--group)}.tile-icon{width:min(92%,51px);aspect-ratio:1;display:block;background-size:2000% 200%;background-repeat:no-repeat;pointer-events:none;filter:drop-shadow(0 3px 3px #021d18a0)}.tile.used{opacity:.4}.tile.selected{border-color:#bcffdbb8;box-shadow:0 0 0 2px #95f5b23d,inset 0 0 15px #64c98c1f;background:#c1ffe317}.tile:active{scale:1.04}.tile-label{display:none}.tile-group-cut{box-shadow:inset 0 1px 0 #ffffff0a}.drag-ghost{position:fixed;z-index:100;pointer-events:none;width:64px;height:64px;border-radius:17px;background:#0d513dcf;border:2px solid #caffdf;display:grid;place-items:center;box-shadow:0 20px 34px #001f1488;backdrop-filter:blur(12px);transform:translate(-50%,-72%) scale(1.08);transition:scale .08s}.drag-ghost .tile-icon{width:54px}.drag-ghost.settling{transition:left .19s cubic-bezier(.16,1,.3,1),top .19s cubic-bezier(.16,1,.3,1),opacity .19s,scale .19s}.drag-ghost.bad{opacity:.65;border-color:#e7ad94}
.overlay{position:fixed;inset:0;background:#001c16b8;z-index:30;display:flex;justify-content:center;align-items:flex-end;backdrop-filter:blur(9px)}.sheet{width:min(100%,620px);max-height:min(88dvh,900px);overflow:auto;overscroll-behavior:contain;background:linear-gradient(155deg,#134f3d,#052d26 68%);border:1px solid #ffffff24;border-radius:25px 25px 0 0;box-shadow:0 -15px 70px #001b1499;padding:23px 19px calc(24px + env(safe-area-inset-bottom));animation:rise .22s ease-out}@keyframes rise{from{transform:translateY(25px);opacity:.6}}.sheet-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}.sheet h2{font-size:25px;letter-spacing:-.05em;line-height:1.1;margin:5px 0}.sheet h3{font-size:14px}.sheet p{font-size:13px;line-height:1.5;color:#bfd7cb}.sheet .close{background:#ffffff19;width:31px;height:31px;display:grid;place-items:center;border-radius:11px;font-size:18px}.menu-actions{display:flex;flex-direction:column;gap:9px}.menu-item{min-height:54px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;text-align:left;background:#ffffff0e;border:1px solid #ffffff12;border-radius:14px}.menu-item strong{font-size:14px}.menu-item small{font-size:11px;color:#91bdaa}.menu-item.danger{color:#ffbbb5}.slider-row{display:flex;gap:14px;align-items:center}.slider-row input{flex:1;accent-color:#99ffd0}.small-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.small-grid .menu-item{height:72px}.muted{opacity:.55}.pack-card{display:flex;align-items:center;gap:14px;padding:12px;background:#ffffff10;border-radius:16px;margin:10px 0;border:1px solid #ffffff14}.pack-cover{width:92px;height:76px;object-fit:cover;border-radius:11px}.pack-card>div{flex:1;min-width:0}.pack-card strong{display:block;font-size:17px}.pack-card small{font-size:11px;color:#aad1bd}.pack-card button{border-radius:11px;background:#b0f8d4;color:#064331;padding:10px 12px;font-size:12px;font-weight:850}.pack-card button.secondary{background:#ffffff1b;color:#fff}.input-field{width:100%;background:#ffffff10;border:1px solid #ffffff2b;color:#fff;outline:none;border-radius:12px;min-height:46px;padding:11px 14px;margin:6px 0 12px}.input-field::placeholder{color:#92b4a8}.input-field option{background:#073329}.option-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #ffffff12;font-size:13px}.option-row label{flex:1;color:#d6f0e3}.option-row input[type=checkbox]{accent-color:#abffce;width:18px;height:18px}.option-row select{background:#1b5a45;color:#fff;padding:8px;border:1px solid #ffffff23;border-radius:9px}.toast{position:fixed;z-index:60;left:50%;bottom:calc(100dvh - 0.25 * 1dvh - 15px);transform:translateX(-50%);padding:11px 16px;border:1px solid #ffffff30;background:#102e29ec;color:white;white-space:normal;min-width:150px;max-width:90vw;text-align:center;border-radius:13px;font-size:12px;box-shadow:0 11px 30px #001b1688;animation:rise .2s ease}.import-log{font-size:11px;max-height:130px;overflow:auto;color:#c2e7d1;background:#06261fa8;padding:11px;border-radius:11px;line-height:1.5}.progress-line{background:#ffffff10;padding:18px;border-radius:14px;margin:14px 0}.progress-line span{display:block;font-size:14px;font-weight:750;margin-top:8px}.badge-light{background:#bbfbd729;color:#a3fbd1;border-radius:7px;padding:4px 7px;font-size:10px;font-weight:800}
@media (max-height:740px){.topbar{min-height:58px;padding-top:calc(env(safe-area-inset-top) + 7px);padding-bottom:5px}.dock{padding-top:11px;padding-bottom:calc(env(safe-area-inset-bottom) + 8px)}.tile{height:43px;min-height:43px}.transport{min-height:42px;padding-block:4px}.stage-eyebrow{top:8px}}@media(max-width:350px){.brand{font-size:17px!important}.pack-button{font-size:10px;padding:7px}.top-left{gap:7px}.topbar{padding-inline:9px}.top-actions{gap:4px}.circle-button{width:32px;height:33px}.pill{font-size:10px;padding:0 8px}.transport{padding-inline:8px}.tile-grid{gap:4px}.dock{padding-inline:9px}}
@media (min-width:650px) and (orientation:portrait){.game{max-width:650px;margin:auto;border-left:1px solid #ffffff10;border-right:1px solid #ffffff10}.welcome{background-size:cover}}@media (min-width:650px) and (orientation:landscape){.topbar{min-height:30px;padding:calc(env(safe-area-inset-top) + 4px) 12px 2px}.topbar .brand{font-size:14px}.pack-button{padding:4px 8px;font-size:10px}.circle-button{width:26px;height:26px;font-size:12px}.transport{min-height:40px;padding-block:4px;gap:10px}.pill{height:30px;font-size:10.5px;padding:0 10px;gap:7px}.beat-indicator i{width:4px;height:4px}.dock{padding-top:9px;padding-bottom:calc(env(safe-area-inset-bottom) + 9px);border-radius:16px 16px 0 0;box-shadow:none}.dock::before{display:none}.dock-head{display:none}.tile-grid{max-width:940px;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;justify-content:center}.tile{height:34px;min-height:34px}.tile-icon{width:min(72%,24px)}.welcome{padding-top:calc(env(safe-area-inset-top) + 10px);padding-bottom:calc(env(safe-area-inset-bottom) + 10px);gap:5px}.welcome .brand{font-size:18px}.welcome h1{font-size:clamp(24px,5vw,40px);margin:7px 0 9px}.welcome p{font-size:12px;margin-bottom:10px;max-width:260px}.welcome .primary{font-size:13px;min-height:42px;padding:11px 16px}.fineprint{font-size:10px;margin-top:7px}.welcome-content{margin-top:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.saved-mix{padding:15px;background:#ffffff0d;border:1px solid #ffffff15;border-radius:15px}.saved-mix strong{display:block;font-size:15px}.saved-mix small{display:block;color:#a1c6b5;margin:5px 0 12px}.mix-toolbar{display:flex;flex-wrap:wrap;gap:6px}.mix-toolbar .pill{font-size:10px;min-height:32px}