[data-lab=progression]{--chord-size:24px;--fret-note-size:10px;--card-gap:12px}
h1,h2,h3,p{overflow-wrap:anywhere}h1{margin:0}h2.section{white-space:normal}a{color:var(--accent)}button,select,input{max-width:100%}button{min-height:var(--touch-size)}button:active{transform:scale(.97)}input[type=number]{background:var(--raised);border:0;color:var(--text);padding:8px;font-size:16px;min-height:48px;width:100%}.brand{border:0;background:none;padding:0;display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.12em;text-align:left;color:var(--accent)}.bloom{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:15px solid var(--accent);filter:drop-shadow(0 0 7px #b9cda875);transform:rotate(90deg)}.brand-line{margin-bottom:15px}.version{text-align:right;font-size:10px;max-width:95px}.home-intro{margin:20px 0 24px}.home-intro h1{font-size:30px;font-weight:550;letter-spacing:-.04em}.lab-list{display:flex;flex-direction:column;gap:12px}.lab-card{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;text-align:left;padding:17px;background:var(--panel);border-radius:var(--radius-panel);width:100%;min-height:95px;gap:6px;color:var(--text)}.lab-card strong{font-size:19px;font-weight:550;letter-spacing:-.025em}.lab-card .row{width:100%;justify-content:space-between}.lab-card .tiny{font-size:12px;line-height:1.6}.lab-card[data-future]{opacity:.65}.home-note{margin-top:25px}.header-row{margin-top:12px;align-items:flex-start}.header-row .head{font-size:24px;font-weight:550;letter-spacing:-.04em;line-height:1.5}.tabs{display:flex;gap:6px;margin:20px -2px 12px;position:sticky;top:0;background:var(--base);z-index:10;padding:9px 2px}.tabs button{flex:1;padding:7px 3px;font-size:12px;white-space:nowrap;min-width:0}.stack{display:flex;flex-direction:column;gap:var(--card-gap)}.field+.field{margin-top:14px}.panel .two{gap:12px}.filter-panel{margin-bottom:15px}.filter-panel label{font-size:12px}.filter-panel select{font-size:14px}.filter-summary{min-height:44px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.filter-summary span{color:var(--muted);font-size:12px}.filter-body{padding-top:13px}.transport{margin-top:14px}.transport .row>*{flex:1}.transport #rec{color:var(--danger)}.transport #rec .rec-dot{display:inline-block;background:var(--danger);height:7px;width:7px;border-radius:50%;margin-right:5px}.transport-hint{margin:8px 0}.tempo-tools{gap:8px}.tempo-tools output{font-size:22px;font-weight:500;min-width:38px;text-align:center}.tempo-tools input{flex:1;min-width:30px}.tempo-tools button{width:40px;flex:none}.settings-grid{margin:14px 0}.settings-grid select{font-size:14px}.sequence{display:flex;flex-direction:column;gap:8px}.chord-row{background:var(--panel);padding:11px 12px;border-radius:12px;border-left:3px solid transparent}.chord-row.now{border-left-color:var(--gold);background:var(--raised)}.chord-name{font-size:var(--chord-size);font-weight:550;letter-spacing:-.03em;line-height:1.15}.chord-row-top{display:flex;align-items:center;gap:8px}.chord-row-top .index{font-size:11px;color:var(--muted);width:17px}.chord-row-top .grow{min-width:0}.chord-actions{display:flex;gap:6px;margin-top:9px}.chord-actions button{flex:1;padding:6px;font-size:12px}.chord-actions .icon{flex:none;width:34px;min-width:34px}.duration{width:105px;font-size:12px;min-height:40px;padding:5px}.suggestion{padding:14px}.suggestion .tiny{font-size:11px}.suggestion-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.colour{font-size:12px;color:var(--accent);margin-top:8px}.suggestion p{font-size:12px;line-height:1.75;color:var(--muted);margin:8px 0 12px}.suggestion-actions{display:flex;gap:6px}.suggestion-actions button{flex:1;font-size:12px;padding:6px}.explanation{font-size:12px;color:var(--muted);line-height:1.75}.section-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:24px 0 12px}.section-row .section{margin:0}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{font-size:12px;padding:5px 8px;background:var(--raised);border-radius:7px}.notice-panel{padding:12px;background:var(--panel);border-radius:12px;margin:12px 0;font-size:12px;line-height:1.7}.empty{padding:22px 15px;text-align:center;color:var(--muted);font-size:13px}.guitar-input{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.guitar-input label{text-align:center}.guitar-input select{font-size:16px;padding:8px 3px;text-align:center;min-height:48px}.string-note{display:block;text-align:center;font-size:11px;min-height:22px;margin-top:6px;color:var(--accent)}.guitar-examples{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.guitar-examples button{font-size:12px;flex:1;min-width:70px}.interpretation{padding:14px;display:flex;flex-direction:column;gap:8px}.interpretation .row button{font-size:12px}.interpretation .primary{width:100%}.fretboard{width:100%;height:auto;display:block;margin-top:12px;background:#111512;border-radius:12px}.fretboard text{font:var(--fret-note-size) var(--font-body);fill:var(--muted)}.fretboard .dot{fill:var(--accent)}.fretboard .root-dot{fill:var(--gold)}.fretboard .note-text{fill:#172015;font-size:9px;font-weight:650}.board-summary{font-family:ui-monospace,monospace;font-size:20px;letter-spacing:.2em;text-align:center;margin:10px 0}.dialog-nav{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:12px 0}.dialog-nav button{min-width:65px}.position-actions{display:flex;gap:8px;margin-top:18px}.position-actions button{flex:1}.control-help{max-height:calc(100dvh - 24px)}.control-help .guide-top{padding:16px}.modal-content{padding:0 16px 20px}.modal-content p{font-size:13px;line-height:1.75}.modal-content label{font-size:13px}.modal-content input[type=text]{width:100%}.modal-content .two{margin-top:15px;gap:8px}dialog::backdrop{background:#000b}.scale-item{padding:13px;border-radius:12px;background:var(--panel);margin-top:8px}.scale-item .row{align-items:flex-start}.scale-item .notes{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.7}.saved-card{background:var(--panel);border-radius:12px;padding:13px;margin-top:10px}.saved-card strong{display:block;font-weight:550}.saved-card .tiny{margin:5px 0 10px}.saved-actions{display:flex;flex-wrap:wrap;gap:6px}.saved-actions button{font-size:12px;flex:1;min-width:60px}.status{position:sticky;bottom:0;background:var(--base);border-top:1px solid var(--raised);padding:10px 0 4px;font-size:12px;color:var(--accent);margin-top:20px;z-index:5;min-height:40px}.section-lead{margin-top:0}.toolbar{display:flex;gap:8px;flex-wrap:wrap}.toolbar button{flex:1;font-size:12px}.export-input{width:100%;min-height:110px;background:var(--raised);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px;font:12px ui-monospace,monospace}.guide-copy details{margin:12px 0}.guide-copy summary{min-height:44px;cursor:pointer;padding:8px 0}.foot button{background:none;font-size:12px;color:var(--muted);padding:4px}.current-label{font-size:12px;color:var(--muted);margin:4px 0 12px}.scale-board-tools{margin-top:12px}.scale-board-tools label{font-size:12px}.position-note{font-size:12px;color:var(--muted)}.unsaved{color:var(--gold)}
@media(max-width:360px){.tabs button{font-size:11px}.duration{width:88px}.chord-name{font-size:22px}.chord-actions .icon{width:30px;min-width:30px}.panel .two{gap:9px}.head{font-size:22px}.guitar-input{gap:4px}.suggestion-actions button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.bloom{filter:none}*{scroll-behavior:auto!important}}

.interval-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin:12px 0;font-size:12px;color:var(--text)}.interval-legend span{display:inline-flex;align-items:center;gap:6px}.interval-legend i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}

.voicing-bass{font-size:12px;color:var(--muted);line-height:1.6;margin:4px 0 12px}

.fretboard .tone-label{font-size:9px;font-weight:750;letter-spacing:-.03em}.interval-legend i{border:1px solid #ffffff55}

/* Symmetric select insets; native arrows do not expose consistent padding on Safari. */
select{--select-inset:12px;--select-arrow:12px;appearance:none;-webkit-appearance:none;padding-left:var(--select-inset)!important;padding-right:calc(var(--select-inset) + var(--select-arrow) + 10px)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23f0eee7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--select-inset) center;background-size:var(--select-arrow) auto}
.guitar-input select{--select-inset:6px;--select-arrow:9px;text-align:left}.duration{--select-inset:8px;--select-arrow:10px}

/* Direct touch tempo: full-width slider with value above. */
#tempo-down,#tempo-up{display:none!important}.tempo-tools{flex-wrap:wrap;gap:0!important}.tempo-tools output{width:100%;flex:0 0 100%;text-align:left;padding-bottom:4px}.tempo-tools output::after{content:" BPM";font-size:12px;color:var(--muted);font-weight:450}.tempo-tools input{width:100%;flex:0 0 100%;margin:0;min-height:44px}

.header-row{align-items:center}.header-row .header-tools{flex:none;justify-content:center}

.transport #rec{background:#d94343;color:#ffffff;font-weight:600}.transport #rec .rec-dot{background:currentColor}
/* v0.2: compact controls and viewport-bounded positions. */
[hidden]{display:none!important}.transport-options{margin:4px 0 12px}.transport-options summary,.suggestion-filters summary{min-height:44px;cursor:pointer;padding:12px 0}.transport-options summary{display:flex;justify-content:space-between;color:var(--muted)}.transport-options summary::-webkit-details-marker{display:none}.field{margin-top:12px}.filter-panel{margin-top:22px}.duration{max-width:105px}.chord-actions{flex-wrap:wrap}.chord-actions button{min-height:40px}.suggestion-filters{margin-bottom:12px}.empty{line-height:1.6}.style-reference{line-height:1.6}#floating-transport{position:fixed;top:env(safe-area-inset-top,0px);left:50%;transform:translateX(-50%);width:min(100%,410px);padding:8px 12px;background:var(--base);box-shadow:0 5px 18px #0009;z-index:40;display:flex;gap:8px}#floating-transport button{flex:1;min-height:44px}#rhythm-frame{display:block;width:100%;height:calc(100dvh - 145px);min-height:420px;border:0;border-radius:10px;background:var(--base)}#positions-dialog{width:min(calc(100vw - 20px),410px);max-height:calc(100dvh - 20px);padding:0;overflow:hidden}#positions-dialog[open]{display:flex;flex-direction:column}#positions-dialog .guide-top{flex:none;padding:12px 14px}#positions-dialog .guide-top h2{font-size:19px;margin:0}.position-layout{display:flex;flex-direction:column;min-height:0;padding:0 14px 12px;overflow:hidden}.position-filters{gap:8px!important;margin-top:0!important;flex:none}.position-filters label{font-size:11px!important}.position-filters select{font-size:12px;min-height:40px;width:100%}#position-description{font-size:12px;margin:8px 0;flex:none}#position-board{flex:none}#position-board .fretboard{display:block;width:100%;max-height:205px}#position-board .interval-legend{margin:4px 0;gap:4px 10px;font-size:11px}#position-board .voicing-bass{font-size:11px;line-height:1.5}#positions-dialog .dialog-nav{flex:none;margin:8px 0;gap:6px}#positions-dialog .dialog-nav button{font-size:12px}#position-index{white-space:nowrap}.position-text{overflow:auto;min-height:55px;max-height:180px;overscroll-behavior:contain;padding-right:4px;flex:1}.position-text p{font-size:12px;line-height:1.6;margin:6px 0}.position-actions{flex:none;margin-top:8px}.position-actions button{min-height:44px;font-size:12px}dialog::backdrop{background:#000d}.context-card{padding:12px;margin-top:8px;background:var(--panel);border-radius:12px}.context-card button{font-size:12px}.shape-chords{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.shape-chords button{display:flex;flex-direction:column;gap:4px;min-width:64px;font-size:14px}.shape-chords small{font-size:10px;color:var(--muted)}.position-hint{color:var(--gold)}@media(max-height:700px){#position-board .fretboard{max-height:150px}.position-text{max-height:95px}#positions-dialog .guide-top{padding:8px 14px}.position-filters select{min-height:34px}.position-filters label{margin-bottom:3px}#position-description{margin:5px 0}}

#floating-transport{flex-direction:row}#floating-transport button{font-size:14px}
/* Tabs remain above the horizontal transport while scrolling. */
.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--base);height:60px;box-sizing:border-box;padding:8px 0;align-items:stretch}.tabs button{min-width:0;min-height:44px;flex:1}.tabs::before{content:"";position:absolute;inset:0 -13px;background:var(--base);z-index:-1}#floating-transport{top:calc(env(safe-area-inset-top,0px) + 60px);flex-direction:row;align-items:center}#floating-transport button{flex:1;min-width:0}

.lab-card[data-future]{opacity:.42;cursor:default}.lab-card[data-future] .tiny{color:var(--muted)}.app:has(#rhythm-view:not([hidden])){padding:0;max-width:410px}#rhythm-view #rhythm-frame{height:calc(100dvh - 64px);min-height:0;border-radius:0}.rhythm-return{height:64px;display:flex;align-items:center;padding:8px 13px;background:var(--base)}.rhythm-return button{width:100%;min-height:44px;font-size:13px}

/* The Home contains only Lab destinations. */
.lab-list{gap:12px}.lab-card.lab-active{flex-direction:row;align-items:center;gap:15px;min-height:82px;padding:18px}.lab-active .lab-icon{width:32px;height:32px;flex:none;color:var(--accent);filter:drop-shadow(0 0 6px #b9cda87a)}.lab-card.lab-active strong{font-size:18px;line-height:1.3}.lab-card[data-future]{min-height:76px;justify-content:center}.lab-card[data-future] strong{font-size:18px}.lab-card[data-future] .tiny{font-size:11px}
/* Match the document inset at the top of the iframe to the parent Lab. */
body{padding-top:0}body>.app{padding-top:max(15px,env(safe-area-inset-top))}