.playground{margin:0 auto 64px;border:1px solid #373442;border-radius:24px;background:linear-gradient(145deg,#171421,#0c0f16);padding:32px;box-shadow:0 28px 90px #a590ff12}.play-intro{margin-bottom:28px}.play-intro h2{font-size:clamp(28px,4vw,48px);margin:12px 0}.play-intro p{color:#b8bac7;line-height:1.6}.play-intro small{color:#8d92a5;font-size:12px;display:block;line-height:1.6}.play-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);gap:28px}.practice-preview{min-width:0;background:#080a10;border:1px solid #303341;border-radius:14px;overflow:hidden}.practice-toolbar{display:flex;justify-content:space-between;gap:8px;padding:12px 16px;font-size:10px;letter-spacing:.08em;color:#c1c4d3}.practice-preview>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.practice-cameras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:12px}.practice-cameras button{padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;cursor:pointer;background:#171b27;color:#cdd2df}.practice-cameras button[aria-pressed=true]{border-color:#b3a1ed}.practice-cameras img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.practice-cameras span{display:block;padding:5px;font-size:10px}.practice-timeline{padding:0 12px}.practice-timeline .practice-toolbar{padding:10px 0;font-size:9px}#practice-clips{display:flex;gap:2px;min-height:38px;background:#191c28;border-radius:5px;overflow:hidden}.practice-cut{min-width:0;border:0;font-size:10px;cursor:pointer;color:#10151d;font-weight:700;padding:10px 2px;background:#aa9cdd}.practice-cut.cam-2{background:#80ccb9}.practice-cut.cam-3{background:#93b8e1}.practice-cut.cam-4{background:#d1b293}.practice-cut.is-playing{box-shadow:inset 0 0 0 3px white}.practice-wave{color:#78c6b4;white-space:nowrap;overflow:hidden;background:#122720;padding:8px;border-radius:5px;margin:5px 0;letter-spacing:3px}.practice-playback{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:14px}.practice-playback>span{font-size:11px;color:#a6acbd;margin-left:auto}.practice-panel{align-self:center}.practice-steps{display:flex;list-style:none;gap:5px;padding:0;margin:20px 0;counter-reset:steps}.practice-steps li{flex:1;font-size:10px;padding:10px 3px;text-align:center;background:#212330;border-radius:5px;color:#b1b4c4}.practice-steps li[aria-current=step]{color:#e9e3ff;box-shadow:inset 0 0 0 1px #ac96df;background:#342c4b}.practice-steps li.complete{color:#90e0c7}.practice-panel h3{font-size:25px;line-height:1.2;margin:20px 0 12px}.practice-panel p{font-size:14px;line-height:1.7;color:#bfc2d0}.practice-pacing{display:block;color:#ddd;font-size:13px;margin:22px 0 18px}.practice-pacing select{display:block;width:100%;margin-top:8px;padding:12px;background:#141722;color:#eee;border:1px solid #444257;border-radius:8px;font:inherit}#practice-status{font-size:12px;min-height:42px;color:#9bdbca}.playground button:disabled,.playground select:disabled{opacity:.45;cursor:not-allowed}.playground button:focus-visible,.playground select:focus-visible{outline:3px solid #cebeff;outline-offset:3px}@media(max-width:820px){.play-layout{grid-template-columns:1fr}.playground{padding:20px;border-radius:16px}.practice-panel h3{font-size:23px}.practice-steps{margin:14px 0}}@media(prefers-reduced-motion:no-preference){.practice-cameras button{transition:border-color .2s,transform .2s}.practice-cameras button:hover{transform:translateY(-2px)}}
.practice-pace-buttons{display:flex;gap:6px;margin-top:8px}.practice-pace-buttons button{flex:1;padding:9px 4px;border:1px solid #444257;border-radius:6px;background:#181b27;color:#c5c7d5;font:inherit;font-size:12px;cursor:pointer}.practice-pace-buttons button[aria-pressed=true]{border-color:#b8a0f5;background:#342c4b;color:#fff}
#practice-preview-stage{position:relative;overflow:hidden;aspect-ratio:16/9;background:#090b13}#practice-preview-stage>img,#practice-preview-stage>video{display:block;width:100%;height:100%;object-fit:cover}#practice-preview-stage [hidden]{display:none!important}#practice-scan{position:absolute;top:0;bottom:0;width:3px;background:#9eefd0;box-shadow:0 0 24px 8px #78d9b580;z-index:2;transition:left .35s linear}.practice-source-tracks{display:grid;gap:5px;margin:8px 0;max-height:180px;overflow:hidden;transition:max-height .7s,opacity .7s}.practice-source-row{display:grid;grid-template-columns:22px repeat(4,minmax(0,1fr));gap:2px}.practice-source-row>span{font-size:10px;color:#9da5b6;align-self:center}.practice-source-cell{height:27px;display:grid;place-items:center;background-size:cover;background-position:center;font-size:8px;color:#cbd0dc;border:1px solid transparent;transition:opacity .5s,transform .5s,border-color .3s}.practice-source-cell.chosen{border-color:#bda9ef;color:white;box-shadow:inset 0 0 0 1px #bda9ef}.practice-source-cell.discarded{opacity:0;transform:scale(.7)}.practice-source-tracks.collapsed{max-height:0;opacity:0}.practice-preview:has(.analyzing) .practice-wave{color:#a0f2da;animation:music-glow .65s alternate infinite}.practice-cut{animation:clip-enter .3s ease-out}#practice-progress{display:block;width:100%;height:6px;accent-color:#a791eb;margin:18px 0}#practice-metrics{font-size:12px;color:#9dd7c8}#practice-result-note{font-size:11px;line-height:1.5;color:#a7a9bb}#practice-result-note a{color:#cbb9ff}.installation-support{margin:28px 0;padding:24px;border:1px solid #444056;border-radius:14px;background:#191622;display:flex;gap:22px;align-items:center;justify-content:space-between}.installation-support h3{margin:0 0 8px;font-size:22px}.installation-support p{font-size:13px;color:#babccd;max-width:480px;margin:0;line-height:1.6}.support-links{display:flex;flex-wrap:wrap;gap:10px}.support-links .button{font-size:12px;padding:12px 16px}@keyframes music-glow{to{opacity:.45}}@keyframes clip-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:820px){.installation-support{flex-direction:column;align-items:flex-start}}@media(prefers-reduced-motion:reduce){#practice-scan,.practice-source-cell,.practice-source-tracks{transition:none}.practice-cut,.practice-preview:has(.analyzing) .practice-wave{animation:none}}