*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;height:100vh;overflow:hidden}.app{display:flex;flex-direction:column;height:100vh}.header{background:#0000004d;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem 1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 10px #0003;z-index:100}.header h1{font-size:1.8rem;font-weight:600;margin:0;white-space:nowrap}.controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}.preview-dial{width:56px;height:56px;flex-shrink:0;cursor:grab;touch-action:none;border-radius:50%}.preview-dial:active{cursor:grabbing}.preview-dial:focus-visible{outline:2px solid white;outline-offset:2px}.dial-face{fill:#fff3}.dial-wedge{fill:#fff9}.dial-tick{stroke:#fff9;stroke-width:2}.dial-tick.major{stroke:#fff;stroke-width:3.5}.dial-hand{stroke:#fff;stroke-width:5;stroke-linecap:round}.dial-hub{fill:#281e50d9}.dial-label{fill:#fff;font-size:24px;font-weight:700;-webkit-user-select:none;user-select:none;pointer-events:none}.album-select{background:#fff3;color:#fff;border:none;padding:.6rem 1rem;border-radius:6px;cursor:pointer;font-size:1rem;font-weight:500;max-width:16rem}.album-select option{color:#222}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.5rem;padding:1rem}.album-card{display:flex;flex-direction:column;align-items:stretch;gap:.4rem;padding:.6rem;text-align:left;border:2px solid transparent}.album-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:#0003}.album-title{font-weight:600}.album-count{font-size:.85rem;opacity:.75}button{background:#fff3;border:none;color:#fff;padding:.6rem 1.2rem;border-radius:6px;cursor:pointer;font-size:1rem;font-weight:500;transition:all .2s ease}button:hover:not(:disabled){background:#ffffff4d;transform:translateY(-1px)}button:disabled{opacity:.5;cursor:not-allowed}.sequence-count{background:#0000004d;padding:.6rem 1rem;border-radius:6px;font-weight:500}.main{flex:1;overflow-y:auto;padding:2rem}.welcome{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.5rem;opacity:.7}.loading{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.5rem}.track-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;padding:1rem}.track-grid.sequence-order{--arrow-gap: 2.5rem;column-gap:var(--arrow-gap);padding-left:calc(var(--arrow-gap) + .25rem)}.tile-slot{position:relative}.transition-arrow{position:absolute;top:50%;left:calc(-1 * var(--arrow-gap));width:var(--arrow-gap);height:2.25rem;margin-top:-1.125rem;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:999px}.transition-arrow svg{width:26px;height:26px;fill:none;stroke:#ffffffd9;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.transition-arrow:hover:not(:disabled){background:#ffffff40}.transition-arrow:hover svg{stroke:#fff}.transition-arrow.lit,.transition-arrow.lit:hover:not(:disabled){background:#fff;box-shadow:0 0 14px #fffc}.transition-arrow.lit svg,.transition-arrow.lit:hover svg{stroke:#5a4aa8}.sequence-divider{grid-column:1 / -1;display:flex;align-items:center;gap:.75rem;margin-left:calc(-1 * var(--arrow-gap));font-size:.85rem;opacity:.75}.sequence-divider:before,.sequence-divider:after{content:"";flex:1;border-top:2px dashed rgba(255,255,255,.5)}.track-tile{aspect-ratio:1;border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.progress-track{position:absolute;bottom:0;left:0;right:0;height:6px;background:#00000059;display:flex}.progress-track.from-right{justify-content:flex-end}.progress-fill{height:100%;background:#ffffffe6;box-shadow:0 0 6px #fff9;transition:width .25s linear}.sequence-number{position:absolute;top:8px;right:8px;background:#0009;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;box-shadow:0 2px 8px #0000004d}.try-button{position:absolute;top:6px;left:6px;width:30px;height:30px;padding:0;border-radius:50%;background:#00000073;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease,background .15s ease}.try-button svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.try-button svg .fill{fill:#fff;stroke:none}.track-tile:hover .try-button,.try-button:focus-visible,.try-button.shown{opacity:1}.try-button:hover:not(:disabled){background:#000000b3}@media (hover: none){.try-button{opacity:.85}}.try-menu{position:absolute;top:42px;left:6px;z-index:50;min-width:13rem;max-width:18rem;display:flex;flex-direction:column;gap:.25rem;padding:.5rem;background:linear-gradient(135deg,#5a6fd6,#6a4292);border-radius:10px;box-shadow:0 8px 28px #00000073}.try-menu.align-right{left:auto;right:6px}.try-menu-title{padding:.2rem .5rem .4rem;font-size:.8rem;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.try-menu button{text-align:left;padding:.5rem .7rem;font-size:.95rem}.track-list-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:200}.track-list-popup{background:linear-gradient(135deg,#5a6fd6,#6a4292);border-radius:12px;box-shadow:0 8px 40px #00000080;width:min(480px,90vw);max-height:80vh;display:flex;flex-direction:column;overflow:hidden}.track-list-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#0000004d}.track-list-header h2{font-size:1.2rem;font-weight:600}.track-list-close{padding:.2rem .7rem;font-size:1.3rem;line-height:1}.track-list{list-style:none;overflow-y:auto;padding:.5rem}.track-list-item{display:flex;align-items:center;gap:.8rem;padding:.5rem .8rem;border-radius:8px;cursor:pointer;transition:background .15s ease}.track-list-item:hover{background:#ffffff26}.track-swatch{width:20px;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,.2);flex-shrink:0}.track-list-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-list-number{background:#00000080;min-width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}.sequences-form{display:flex;gap:.6rem;padding:1rem 1.5rem .4rem}.sequences-name{flex:1;min-width:0;background:#ffffffe6;color:#222;border:none;border-radius:6px;padding:.5rem .8rem;font-size:1rem}.sequences-note{padding:0 1.5rem .6rem;font-size:.85rem;opacity:.8}.sequences-item{cursor:default}.sequences-item button{padding:.35rem .8rem;font-size:.9rem}.sequences-meta{font-size:.8rem;opacity:.75;white-space:nowrap}.sequences-delete{font-size:1.1rem!important;line-height:1}.sequences-empty{padding:.8rem;opacity:.7}.footer{background:#0006;padding:1.5rem 2rem;text-align:center;font-size:1.2rem;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -2px 10px #0003;position:sticky;bottom:0;z-index:100}.run-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1.25rem;padding-top:1rem;padding-bottom:1rem}.run-count{background:#0000004d;padding:.2rem .7rem;border-radius:999px;font-size:1rem}.run-hint{font-size:.85rem;opacity:.7}@media (max-width: 768px){.header{flex-direction:column;gap:1rem;align-items:stretch}.controls{flex-wrap:wrap;justify-content:center}.track-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.5rem;padding:.5rem}.track-grid.sequence-order{--arrow-gap: 1.75rem}.transition-arrow{height:1.75rem;margin-top:-.875rem}.transition-arrow svg{width:20px;height:20px}.sequence-number{width:24px;height:24px;font-size:.9rem;top:4px;right:4px}}@media (min-width: 1400px){.track-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}