:root{color-scheme:dark;--bg:#05080f;--text:#edf4ff;--sub:#98a9c1;--teal:#67d3c5;--violet:#ae89f4;--edge:rgba(255,255,255,.105);--panel:rgba(21,30,50,.81);--safe:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{background:var(--bg);-webkit-tap-highlight-color:transparent}body{margin:0;isolation:isolate;min-height:100dvh;color:var(--text);font:15px/1.42 Inter,system-ui,-apple-system,sans-serif;overflow-x:hidden}
button,input,textarea{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--teal);outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.48}
.aurora{position:fixed;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(62px);animation:drift 18s ease-in-out infinite alternate}.a1{width:82vw;height:60vh;top:-20vh;left:-30vw;background:radial-gradient(circle,#146b65a2,transparent 68%)}.a2{width:75vw;height:58vh;top:12vh;right:-32vw;background:radial-gradient(circle,#493982a4,transparent 65%);animation-duration:22s;animation-direction:alternate-reverse}.a3{width:80vw;height:50vh;bottom:-28vh;left:3vw;background:radial-gradient(circle,#12355d94,transparent 70%);animation-duration:26s}@keyframes drift{to{transform:translate(24px,-19px) scale(1.06)}}
.shell{position:relative;max-width:530px;margin:0 auto;padding:21px 16px calc(24px + var(--safe));min-height:100dvh}.top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:19px}.brand{display:flex;align-items:center;gap:10px}.orb{display:grid;place-items:center;width:38px;height:38px;border-radius:14px;color:var(--teal);font-size:30px;background:linear-gradient(135deg,#182d42,#26203d);border:1px solid #588c8d7f}.brand strong{display:block;font-family:Sora,Inter,sans-serif;letter-spacing:.22em;font-size:13px}.eyebrow{display:block;letter-spacing:.17em;font-weight:650;font-size:10px;color:#8fa6c3}.brand .eyebrow{font-size:9px;margin-top:3px}.connection{display:flex;align-items:center;gap:7px;padding:10px 11px;background:#122039b8;border:1px solid var(--edge);border-radius:999px;font-size:11px;color:#b6c8df}.dot{width:7px;height:7px;border-radius:50%;background:#f3b35d;box-shadow:0 0 0 3px #f3b35d21}.connected .dot{background:#6ee0bd;box-shadow:0 0 0 3px #67d3c529}
.pills{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:23px}.pills::-webkit-scrollbar{display:none}.pill{flex:1 0 auto;padding:10px 12px;background:#18243cad;border:1px solid var(--edge);border-radius:12px;font-size:12px;font-weight:600}.pill.selected{color:#cffaf2;background:#1b3c48b3;border-color:#5bc2bb8c}.pill.muted{flex:0 0 auto;color:#b6c3db}.section-header{display:flex;align-items:end;justify-content:space-between;margin-bottom:19px}.section-header h1{font-family:Sora,Inter,sans-serif;font-size:clamp(22px,6.4vw,29px);font-weight:500;letter-spacing:-.035em;margin:5px 0 0}.accent-line{width:58px;height:2px;border-radius:9px;background:linear-gradient(90deg,#66d5c4,#9a7cdb)}
.mode-switch{display:grid;grid-template-columns:repeat(3,1fr);background:#0e182a;border:1px solid var(--edge);border-radius:15px;padding:4px;margin-bottom:14px;gap:4px}.mode{background:transparent;border:0;border-radius:11px;padding:11px 7px;font-size:13px;color:#98aac3}.mode.active{background:linear-gradient(150deg,#34445e,#293650);color:#f3faff;box-shadow:0 3px 13px #0005}
.control-panel{padding:15px;border-radius:24px;background:linear-gradient(160deg,rgba(32,45,69,.89),rgba(10,18,33,.92));border:1px solid var(--edge);box-shadow:inset 0 1px 0 #ffffff19,0 14px 32px #0003}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:13px;color:#8fa9c8;font-size:10px;font-weight:700;letter-spacing:.12em}.panel-title>span:last-child{font-weight:500;letter-spacing:0;color:#8c9bb4}.experimental{border-radius:4px;background:#593f2040;color:#f0c88b;font-size:8px;padding:3px 4px;letter-spacing:.03em;margin-left:4px}
.track-row{display:flex;gap:10px;height:clamp(230px,35vh,370px)}.touchpad{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(130deg,#152540,#18223c80 47%,#113b4140);border:1px solid #638caa52;border-radius:20px;touch-action:none;user-select:none;overflow:hidden}.touchpad:before,.touchpad:after{position:absolute;content:"";width:68%;aspect-ratio:1;border:1px solid #87d4d020;border-radius:50%;pointer-events:none}.touchpad:after{width:40%}.pad-decoration{color:#5cbfb9;font-size:26px;text-shadow:0 0 20px #2bdec17c}.touchpad #padHint{z-index:1;margin-top:10px;color:#90a9c6;font-size:12px;text-align:center}.cursor-marker{position:absolute;width:19px;height:19px;border:2px solid var(--teal);border-radius:50%;box-shadow:0 0 13px #66d5c5;transform:translate(-50%,-50%);left:50%;top:50%;opacity:0;pointer-events:none}.touchpad:active .cursor-marker{opacity:.9}.scrollstrip{display:flex;align-items:center;flex-direction:column;justify-content:space-between;flex:0 0 42px;background:#1c2a42;border:1px solid var(--edge);border-radius:14px;touch-action:none;user-select:none;padding:12px 0;font-size:10px;color:#96accc;font-weight:700;letter-spacing:.18em;text-align:center}.scrollstrip span:first-child,.scrollstrip span:last-child{font-size:15px;color:var(--teal)}.helper{color:#8498b2;font-size:11px;line-height:1.5;margin:12px 2px 1px}
.hidden{display:none!important}.glass{background:linear-gradient(170deg,rgba(255,255,255,.085),rgba(255,255,255,.035));border:1px solid var(--edge);box-shadow:inset 0 1px 0 #ffffff18,0 12px 32px #0005;border-radius:22px;backdrop-filter:blur(18px) saturate(140%)}
.media{padding:15px;margin-top:14px}.transport{display:flex;justify-content:center;align-items:center;gap:27px;margin:12px 0 15px}.transport button{width:53px;height:48px;font-size:23px;background:transparent;border:0;color:#c8d9ef}.transport .play-btn{width:65px;height:60px;border-radius:18px;border:1px solid #79c2c06b;background:linear-gradient(145deg,#24646b,#2c4567);color:#e7fffd;font-size:28px}.volume{display:flex;align-items:center;gap:9px;border-top:1px solid #ffffff15;padding-top:12px}.volume span{font-size:10px;letter-spacing:.14em;color:#9aabc3;margin-right:auto}.volume button{background:#1a2943;border:1px solid var(--edge);border-radius:12px;width:51px;height:39px;font-size:20px}
.bottom-nav{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;padding:8px}.bottom-nav button{background:transparent;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;color:#c5d8ed;font-size:12px}.bottom-nav button span{font-size:22px;color:#b6e0eb}
.dpad{height:274px;width:274px;max-width:100%;margin:6px auto;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:7px;place-items:stretch}.dpad button{background:linear-gradient(160deg,#263951,#152237);border:1px solid #6580a066;border-radius:19px;font-size:29px}.dpad button:active,.bottom-nav button:active,.transport button:active{background:#356276}.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .ok{grid-area:2/2;font-size:15px;font-weight:800;border-radius:50%;border-color:#71c5bd;color:#b7fff0}.dpad .right{grid-area:2/3}.dpad .down{grid-area:3/2}
.fieldlabel{display:block;font-size:11px;letter-spacing:.05em;color:#a3b8d0;margin:12px 0 7px}input,textarea{width:100%;background:#0d172b;border:1px solid #53658190;border-radius:13px;padding:12px;color:#f3f6fd;outline:none;min-height:47px}textarea{resize:vertical;min-height:90px}input::placeholder,textarea::placeholder{color:#667b99}.primary,.secondary{border:1px solid #679b9b;min-height:45px;background:linear-gradient(135deg,#2b776f,#294d71);color:#eafffd;border-radius:13px;font-weight:650;padding:10px 14px}.secondary{background:#182941;border-color:#4a617b;color:#cce0f0}.block{display:block;width:100%;margin-top:12px}.key-row{display:flex;gap:9px;margin-top:12px}.key-row button{flex:1;background:#1b2b44;border:1px solid var(--edge);padding:12px;border-radius:11px}
.play-card{padding:18px;margin-bottom:13px}.play-card p{color:#a4b7cd;font-size:13px;line-height:1.5}.link-result{padding:12px;color:#aac6d7;background:#0b1828;border:1px solid #3c5c7099;border-radius:12px;font-size:12px;margin-top:14px}.route{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid #ffffff17}.route:last-child{border-bottom:0}.route strong{font-size:13px}.route p{font-size:12px;margin:4px 0 0}.route-icon{flex:0 0 39px;height:39px;display:grid;place-items:center;background:#1a2e46;border-radius:12px;font-size:20px}.teal{color:var(--teal)}.violet{color:var(--violet)}.amber{color:#edbd7c}
.setup{padding:14px;margin-top:18px}.setup-title{background:transparent;border:0;width:100%;display:flex;justify-content:space-between;padding:3px 1px;color:#a9c5e0;font-weight:700;font-size:10px;letter-spacing:.16em}.setup p{font-size:11px;color:#8b9bb5;margin:13px 0 4px}.feedback{min-height:28px;color:#9ec2d4;font-size:11px;padding:15px 5px 0;line-height:1.5}.feedback.error{color:#ffd19d}.info-dialog{color:#eff7ff;width:min(90vw,380px);padding:24px;background:#131d33}.info-dialog::backdrop{background:#000a}.info-dialog h2{font-size:19px;font-family:Sora,system-ui;font-weight:600}.info-dialog p{font-size:14px;color:#a2b8ce}
@media(min-width:600px){.shell{padding-top:35px}.track-row{height:380px}}@media(max-height:720px){.track-row{height:215px}.shell{padding-top:13px}.pills{margin-bottom:13px}.section-header{margin-bottom:12px}.media{margin-top:10px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.aurora{filter:blur(60px)}}@media(prefers-reduced-transparency:reduce){.glass,.control-panel{backdrop-filter:none;background:#121826}}