:root{color-scheme:light dark;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:#0d1117;color:#f0f6fc;line-height:1.5;margin:0;padding:0}body{margin:0}main.app{max-width:720px;margin:0 auto;padding:3rem 1.5rem;display:flex;flex-direction:column;gap:2.5rem}header h1{margin:0;font-size:2.5rem}header .tagline{margin:.5rem 0 0;color:#8b949e}.hero-description{margin:.75rem 0 0;color:#9da7b6;max-width:52ch}.ios-audio-note{margin:.6rem 0 0;font-size:.85rem;color:#f0f6fc;background:#58a6ff1f;border:1px solid rgba(88,166,255,.25);border-radius:999px;display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .85rem}section{padding:1.75rem;border-radius:16px;background:#161b22cc;border:1px solid rgba(240,246,252,.08);box-shadow:0 18px 36px -18px #0006}section h2{margin-top:0;font-size:1.5rem}section p{margin-bottom:0;color:#c9d1d9}.progression-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}.progression-header h2{margin:0}.control-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-radius:12px;background:#0d111799;border:1px solid rgba(240,246,252,.08);box-shadow:inset 0 0 0 1px #f0f6fc05;margin-bottom:1.25rem}.control-bar-primary{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.control-bar-status{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:.35rem}.status-row{display:flex;align-items:center;gap:.35rem;font-size:.85rem;color:#8b949e}.status-row.primary{color:#f0f6fc;font-weight:600}.status-row.subtle{color:#6b7684}.status-row.error-text{color:#ff7b72}.status-row.warning{color:#f59e0b}.status-icon{width:.95rem;height:.95rem;fill:currentColor;opacity:.85;flex-shrink:0}button{cursor:pointer;font-size:1rem;border-radius:999px;padding:.6rem 1.4rem;border:none;color:#0d1117;background:#58a6ff;font-weight:600;transition:transform .2s ease,box-shadow .2s ease;display:inline-flex;align-items:center;gap:.5rem}button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 24px -16px #58a6ffcc}button:disabled{cursor:not-allowed;opacity:.6}button.secondary{background:#f0f6fc26;color:#f0f6fc}.button-icon{width:1.05rem;height:1.05rem;fill:currentColor}.inline-icon{width:1rem;height:1rem;fill:currentColor;margin-right:.35rem;vertical-align:middle}.bar-list{list-style:none;display:grid;gap:1rem;padding:0;margin:0}.bar-card{position:relative;padding:1.1rem 1.25rem 1.25rem;border-radius:12px;background:#0d1117d9;border:1px solid rgba(240,246,252,.06);display:flex;flex-direction:column;gap:.85rem;transition:border-color .2s ease,box-shadow .2s ease;overflow:hidden}.bar-card.owned{border-color:#3fb950cc;box-shadow:0 0 0 2px #3fb95033}.bar-card.playing{border-color:#58a6ffcc;box-shadow:0 0 0 2px #58a6ff2e}.bar-card.owned.playing{box-shadow:0 0 0 2px #3fb95033,0 0 0 4px #58a6ff2e}.claim-progress{position:absolute;top:0;right:0;bottom:0;left:0;height:4px;background:#3fb9501a;transform-origin:left}.claim-progress.warn{background:#f59e0b26}.claim-progress.danger{background:#ff7b7226}.claim-progress-bar{height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,#3fb950,#58a6ff);transition:transform .2s linear}.claim-progress.warn .claim-progress-bar{background:linear-gradient(90deg,#f59e0b,#ffdd57)}.claim-progress.danger .claim-progress-bar{background:linear-gradient(90deg,#ff7b72,#ffb1aa)}.bar-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.chord-badge{display:flex;align-items:baseline;gap:.45rem}.chord-root{font-size:1.9rem;font-weight:700;letter-spacing:-.02em}.chord-quality{font-size:1rem;padding:.2rem .55rem;border-radius:999px;background:#58a6ff1f;border:1px solid rgba(88,166,255,.25);color:#58a6ff;font-weight:600;letter-spacing:.02em}.bar-tags{display:flex;flex-wrap:wrap;gap:.4rem}.bar-tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;background:#f0f6fc14;border:1px solid rgba(240,246,252,.12);border-radius:999px;padding:.3rem .6rem;color:#c9d1d9}.bar-tag.you{background:#3fb9502e;border-color:#3fb95066;color:#3fb950}.bar-meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:.85rem;color:#8b949e}.bar-owner{font-weight:600;color:#f0f6fc}.bar-updated{font-variant-numeric:tabular-nums}.bar-timer{display:inline-flex;align-items:center;gap:.35rem;color:#3fb950;font-weight:600}.bar-timer.urgent{color:#ff7b72}.bar-form{display:flex;flex-direction:column;gap:1rem}.option-group{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem}.option-group legend{font-size:.85rem;color:#8b949e;text-transform:uppercase;letter-spacing:.08em}.option-grid{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}.option-grid[data-columns="6"]{grid-template-columns:repeat(auto-fit,minmax(55px,1fr))}.option-grid[data-columns="3"]{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}.option-pill{background:#0d1117bf;border:1px solid rgba(240,246,252,.12);border-radius:12px;padding:.55rem .75rem;color:#c9d1d9;font-size:.95rem;display:flex;flex-direction:column;gap:.2rem;align-items:flex-start;transition:transform .15s ease,border-color .15s ease,background .15s ease}.option-pill:hover{transform:translateY(-1px);border-color:#58a6ff66}.option-pill.selected{background:#58a6ff26;border-color:#58a6ff8c;color:#f0f6fc}.option-label{font-weight:600}.option-helper{font-size:.75rem;color:#9da7b6}.option-symbol{font-size:1.05rem}.bar-form-controls{grid-column:1 / -1;display:flex;gap:.75rem;flex-wrap:wrap}.bar-form button{justify-self:start}.chat-panel{position:fixed;bottom:1.5rem;right:1.5rem;width:min(320px,80vw);background:#0d1117e6;border:1px solid rgba(240,246,252,.1);border-radius:16px;padding:1rem;display:flex;flex-direction:column;gap:.75rem;box-shadow:0 18px 36px -18px #0000008c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20}.chat-header{display:flex;justify-content:space-between;align-items:baseline}.chat-header h3{margin:0;font-size:1.1rem}.chat-identity{font-size:.85rem;color:#8b949e}.chat-close{border:none;background:transparent;color:#8b949e;font-size:1.3rem;line-height:1;border-radius:999px;padding:.1rem .35rem;display:none}.chat-close:hover{color:#f0f6fc}.chat-messages{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding-right:.25rem}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-thumb{background:#636e7b80;border-radius:999px}.chat-placeholder{margin:0;color:#8b949e;font-size:.9rem}.chat-message{display:flex;gap:.45rem;font-size:.9rem}.chat-message strong{color:#58a6ff}.chat-message span{flex:1;word-break:break-word}.chat-form{display:flex;gap:.5rem}.chat-form input{flex:1;border-radius:999px;border:1px solid rgba(240,246,252,.12);padding:.5rem .9rem;background:#0d1117bf;color:inherit;font-size:.95rem}.chat-form button{padding:.5rem 1.2rem}.chat-error{margin:0;color:#ff7b72;font-size:.8rem}.chat-drawer-toggle{display:none}.name-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0d1117bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:30}.name-dialog{background:#161b22f2;border-radius:18px;padding:2rem;width:min(360px,90vw);display:flex;flex-direction:column;gap:1rem;border:1px solid rgba(240,246,252,.12);box-shadow:0 24px 48px -24px #0009}.name-dialog h2{margin:0;font-size:1.4rem}.name-dialog p{margin:0;color:#8b949e}.name-form{display:flex;gap:.75rem}.name-form input{flex:1;border-radius:999px;border:1px solid rgba(240,246,252,.15);padding:.6rem 1rem;background:#0d1117d9;color:inherit;font-size:1rem}.name-form button{padding:.6rem 1.4rem}.history{position:relative;margin-top:2.5rem}.site-footer{margin-top:3rem;padding:1.5rem 0 calc(2rem + env(safe-area-inset-bottom));border-top:1px solid rgba(240,246,252,.06);color:#8b949e;font-size:.9rem;display:flex;justify-content:center;gap:.5rem}.site-footer a{color:#58a6ff;font-weight:600;text-decoration:none}.site-footer a:hover{text-decoration:underline}@media (max-width: 600px){main.app{padding:1.75rem 1rem 5rem;gap:2rem}.site-footer{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}header{order:1}header h1{font-size:1.85rem}.hero-description,header .tagline{font-size:.95rem}.placeholder{order:2}.history{order:3}section{padding:1.25rem;border-radius:14px}.progression-header{flex-direction:column;align-items:flex-start;gap:.5rem}.control-bar{flex-direction:column;align-items:stretch;gap:.75rem}.control-bar-status{align-items:flex-start;text-align:left}button{font-size:.95rem;padding:.55rem 1.05rem}.chat-panel.mobile{left:0;right:0;bottom:0;transform:none;width:100%;box-sizing:border-box;max-height:min(70vh,480px);padding:1.25rem clamp(1rem,4vw,1.75rem) calc(1.25rem + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -16px 32px -20px #000000a6;z-index:26}.chat-panel.mobile.collapsed{display:none}.chat-panel.mobile .chat-messages{max-height:calc(45vh - 4rem)}.chat-panel.mobile .chat-form button{padding:.45rem 1rem}.chat-close{display:inline-flex}.chat-drawer-toggle{display:flex;position:fixed;left:0;right:0;bottom:0;width:100%;box-sizing:border-box;border-radius:18px 18px 0 0;background:#0d1117eb;color:#f0f6fc;border:none;padding:.85rem clamp(1rem,4vw,1.75rem) calc(.85rem + env(safe-area-inset-bottom));box-shadow:0 -12px 28px -16px #000000a6;align-items:center;justify-content:center;gap:.5rem;flex-direction:column;font-size:.95rem;line-height:1.35;z-index:24;transition:background .2s ease,box-shadow .2s ease}.chat-drawer-toggle:hover{transform:none;box-shadow:0 -12px 32px -16px #000000bf;background:#161b22f5}.chat-drawer-grabber{display:inline-block;width:42px;height:5px;border-radius:999px;background:#f0f6fc33}.chat-drawer-header{display:flex;align-items:center;gap:.45rem;font-weight:600}.chat-drawer-header strong{font-size:1rem}.chat-dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:#58a6ff;box-shadow:0 0 8px #58a6ff99}.name-dialog{width:calc(100vw - 2rem)}}.history-header{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}.history-subtitle{font-size:.85rem;color:#9da7b6}.history-feed{position:relative;list-style:none;margin:0;padding:0 0 0 1.5rem;display:flex;flex-direction:column;gap:1rem}.history-feed:before{content:"";position:absolute;left:.55rem;top:.2rem;bottom:.2rem;width:2px;background:linear-gradient(180deg,#58a6ff4d,#58a6ff00)}.history-item{position:relative;background:#0d111799;border:1px solid rgba(240,246,252,.06);border-radius:12px;padding:.65rem .9rem .65rem 1.1rem;color:#c9d1d9;display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem;box-shadow:0 8px 18px -16px #0009}.history-item:before{content:"";position:absolute;left:-1.1rem;top:.9rem;width:10px;height:10px;border-radius:50%;background:#58a6ff;box-shadow:0 0 0 4px #58a6ff26}.history-item time{font-variant-numeric:tabular-nums;font-size:.8rem;color:#9da7b6}.history-body{display:flex;flex-direction:column;gap:.15rem}.history-actor{color:#58a6ff;font-weight:600;font-size:.95rem}.history-message{font-size:.88rem;color:#c9d1d9;word-break:break-word}.history-empty{color:#8b949e;font-size:.9rem}@media (max-width: 600px){.history-feed{padding-left:1.1rem}.history-item{padding-left:1rem}.history-item:before{left:-.9rem}}