:root{--paper:#f6f5f1;--white:#fff;--ink:#25242c;--muted:#696670;--line:#dfddd7;--purple:#6543c6;--pale:#f0ebfa;--green:#d9f58c;--serif:Georgia,'Times New Roman',serif;--sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--small:12px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:16px}html[lang=th]{--serif:var(--sans);--small:13px}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 var(--sans)}h1,h2,h3,h4,p{margin:0}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}a:hover{color:var(--purple)}button,input,select,textarea{font:inherit;color:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}button{border:1px solid var(--line);border-radius:6px;background:var(--white);padding:8px 12px}button,input,select,summary{min-height:44px;min-width:44px}a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--purple);outline-offset:3px}[hidden]{display:none!important}input,select,textarea{display:block;width:100%;max-width:100%;border:1px solid var(--line);border-radius:6px;background:var(--white);padding:10px;font-size:16px}textarea{resize:vertical}select{font-size:var(--small);padding-right:24px}small{font-size:var(--small)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip{position:fixed;left:12px;top:-100px;padding:12px;background:var(--purple);color:white;z-index:100}.skip:focus{top:10px}.loading{text-align:center;margin:80px auto}
.header{border-bottom:1px solid var(--line)}.header-inner{max-width:1360px;min-height:68px;margin:auto;padding:0 32px;display:flex;align-items:center;gap:28px}.brand{font:25px/1.2 var(--serif);letter-spacing:-1px;white-space:nowrap}.brand span{color:var(--purple);font:32px var(--sans)}.header nav{display:flex;gap:20px;color:var(--muted);font-size:14px}.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}.demo-badge{font-size:var(--small);border:1px solid #d4caeb;border-radius:99px;padding:3px 10px;color:var(--purple);background:var(--pale)}.language{justify-content:center;font-size:14px;font-weight:650}.menu-toggle{display:none;padding:8px;background:transparent;border:0;font-size:20px}
main{max-width:1360px;padding:0 32px;margin:auto}.intro{padding:16px 0 18px}.intro h1{font:27px/1.2 var(--serif);letter-spacing:-.6px}.intro h1 span{font:18px/1.2 var(--serif);color:var(--muted);letter-spacing:0;margin-left:10px}.subtitle{display:flex;gap:8px;color:var(--muted);font-size:var(--small);margin-top:5px}.eyebrow{font-size:var(--small);color:var(--purple);font-weight:650}.reaction-browser{margin-bottom:16px}.browse-toolbar{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:8px}.browse-paths{display:flex;gap:4px;align-items:stretch;background:#ece9e3;border-radius:8px;padding:3px}.browse-paths button{font-size:var(--small);background:transparent;border-color:transparent;font-weight:650;white-space:nowrap}.browse-paths button[aria-pressed=true]{background:var(--white);box-shadow:0 1px 3px #0001}.browse-paths button span{color:var(--purple);font-size:var(--small);margin-left:4px}#filters-toggle[aria-expanded=true]{color:var(--purple);background:var(--pale)}.autoplay-setting{display:flex;align-items:center;gap:8px;font-size:var(--small);color:var(--muted)}.auto-load{display:flex;align-items:center;gap:2px;white-space:nowrap;font-weight:650;color:var(--ink)}.auto-load input{appearance:none;flex:none;width:44px;height:44px;margin:0;padding:0;border:0;background:transparent;position:relative;cursor:pointer}.auto-load input:before{content:'';position:absolute;left:13px;top:13px;width:18px;height:18px;border:1px solid var(--muted);border-radius:4px;background:var(--white)}.auto-load input:checked:before{background:var(--purple);border-color:var(--purple)}.auto-load input:checked:after{content:'✓';position:absolute;left:16px;top:10px;color:white;font-size:16px}.autoplay-setting p{max-width:235px}
.timeline{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 2px 6px;scrollbar-width:thin}.moment{flex:1 0 155px;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--white);overflow:hidden}.moment.selected{border-color:var(--purple);box-shadow:inset 0 0 0 1px var(--purple);background:var(--pale)}.moment.empty{background:#edece8;color:var(--muted)}.moment-passage{border:0;background:transparent;border-radius:0;text-align:left;width:100%;padding:8px 10px;display:flex;flex-direction:column;gap:2px;font-size:var(--small)}.moment strong{font-size:var(--small);line-height:1.4}.moment-top,.moment-count{font-size:var(--small);color:var(--muted);font-variant-numeric:tabular-nums}.moment-cues{display:grid;gap:2px;padding:0 4px 4px}.cue-marker{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:var(--small);padding:4px 6px;color:var(--purple);background:#ffffffa6;border-color:transparent}.cue-marker.active{background:var(--purple);color:white}.cue-owner{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cue-clock{white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums}
.filter-panel{padding:12px;margin:8px 0;background:var(--white);border:1px solid var(--line);border-radius:8px}.reaction-tools{display:flex;gap:18px;align-items:start}.topic-tools{flex:1;min-width:0}.filter-title{font-size:14px;font-weight:650}.filter-title small{font-size:var(--small);color:var(--muted);font-weight:400;margin-left:8px}#filters{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}.filter{font-size:var(--small);display:flex;align-items:center;gap:6px}.filter.selected{background:var(--pale);border-color:var(--purple);color:var(--purple)}.filter-count{font-size:var(--small);color:var(--muted)}.category-dot{width:6px;height:6px;border-radius:50%;background:#9a8daa;flex-shrink:0}.category-dot.guitar{background:#3c8073}.category-dot.performance{background:#b87e35}.category-dot.chills{background:#5b79b4}.category-dot.crying{background:#b16b8a}.browse-tools{min-width:200px}.sort-label{font-size:var(--small);display:block}.browse-tools select{margin-top:4px}.filter-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;font-size:var(--small);color:var(--muted)}.filter-footer button{font-size:var(--small);color:var(--purple)}
.reaction-library{margin-top:6px;min-width:0}.rail-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}.rail-heading>p{font-size:var(--small);color:var(--muted);flex-shrink:0}.reaction-controls{display:flex;gap:8px;align-items:center;max-width:650px;flex:1;justify-content:flex-end}.reaction-controls .search-label{flex:1;max-width:330px;font-size:0}.reaction-controls .sort-label{font-size:0;min-width:150px}.reaction-controls input{font-size:14px;height:44px}.reaction-controls select{font-size:var(--small);height:44px}.reaction-rail{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:2px 2px 6px}.reaction-option{flex:0 0 208px;display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;text-align:left;align-items:center;padding:5px;background:var(--white);border:1px solid var(--line);border-radius:8px;min-width:0}.reaction-option.active{border-color:var(--purple);background:var(--pale);box-shadow:inset 0 0 0 1px var(--purple)}.reaction-option img{width:64px;height:48px;object-fit:cover;border-radius:4px}.reaction-option .option-thumb{position:relative}.option-thumb img{width:64px;height:48px}.reaction-option strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--small);font-weight:650}.reaction-option small{display:block;font-size:var(--small);color:var(--muted)}.reaction-option .option-meta,.reaction-option .option-copy{min-width:0}.reaction-option .option-time{font-size:var(--small)}.browser-note{font-size:var(--small);color:var(--muted);margin-top:4px}.empty{padding:12px;font-size:14px;color:var(--muted)}.empty h4{font-size:16px}.empty button{margin-top:8px}
.watch-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:0 16px;align-items:stretch}.performance,.spotlight{min-width:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--white);display:grid;grid-template-rows:subgrid;grid-row:span 4}.spotlight{background:var(--pale);border-color:#ddd3f0}.viewer-heading{display:flex;align-items:center;gap:10px;padding:10px 14px;min-width:0}.viewer-identity{min-width:0;flex:1}.viewer-identity .eyebrow{display:flex;align-items:center;gap:6px;min-height:44px}.viewer-identity h2{font:16px/1.35 var(--sans);font-weight:650}.heading-reactor{display:flex;align-items:center;gap:8px;min-width:0}.reactor-avatar,.avatar-fallback{width:30px;height:30px;flex-shrink:0;border-radius:50%;object-fit:cover}.avatar-fallback{display:grid;place-items:center;background:var(--purple);color:white;font-size:16px}.heading-reactor h2{flex:1;min-width:0}.heading-reactor h2 a{display:flex;max-width:100%;min-width:0;min-height:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.heading-reactor h2 a span{overflow:hidden;text-overflow:ellipsis}.heading-reactor .subscribe,.heading-reactor a#reactor-subscribe{font-size:var(--small);color:var(--purple);padding:8px;flex-shrink:0}.viewer-navigation{align-self:start}#cue-count{font-size:var(--small);color:var(--purple);background:transparent;border:0;white-space:nowrap;padding:8px}#reaction-position{font-size:var(--small);white-space:nowrap;color:var(--muted);justify-content:center;padding:6px;font-variant-numeric:tabular-nums}.player{position:relative;aspect-ratio:16/9;overflow:hidden;background:#19161f;align-self:start}.player iframe,.player>div{position:absolute;inset:0;width:100%;height:100%;border:0}.poster{display:block;position:relative;width:100%;height:100%;padding:0;border:0;border-radius:0;background:#19161f;color:white}.poster img{width:100%;height:100%;object-fit:cover}.poster:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 50%,#000a)}.play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50px;height:50px;display:grid;place-items:center;border-radius:50%;background:var(--purple);font-size:20px;z-index:1}.poster-label{position:absolute;bottom:12px;left:14px;right:14px;z-index:1;font-size:14px;font-weight:650}.player-playback{padding:6px 10px}.playback-actions{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px}.playback-actions>button,.playback-actions>a,.reaction-navigation button{font-size:var(--small);border:0;background:transparent;color:var(--purple);padding:8px 6px}.reaction-navigation{display:flex;gap:4px;margin-left:auto}.reaction-navigation button{display:flex;align-items:center;gap:5px}.player-status{font-size:var(--small);color:#80502e;margin:4px}.player-status:empty{display:none}.original-controls,.reaction-insights{border-top:1px solid var(--line);padding:12px 14px;font-size:var(--small)}#original-context{font-weight:650;color:var(--purple)}.section-context{margin-top:7px;color:var(--muted)}.insights-heading{font-size:var(--small);font-weight:650;color:var(--purple);margin-bottom:5px}#spotlight-copy h2{font-size:16px;line-height:1.35;font-weight:650}.spotlight-summary{font-size:14px;color:#57515f;margin:6px 0;line-height:1.55}.editorial-attribution{font-size:var(--small);color:var(--muted);margin-top:6px}.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}.tags span{font-size:var(--small);border-radius:4px;background:#ffffff9e;color:#57515f;padding:2px 7px}.insight-finished{background:var(--green)!important;border-radius:6px}
.annotation-section{grid-column:1/-1;margin-top:20px}.annotations-panel{padding:0}.annotations-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.annotations-title h3{font-size:16px;font-weight:650}.annotations-title #annotation-count{font-size:var(--small);color:var(--muted)}.annotations-title button{font-size:var(--small);border:0;background:transparent;color:var(--purple)}#add-note-top{margin-left:auto}.annotation-toolbar{display:flex;gap:8px 18px;align-items:center;flex-wrap:wrap;margin:6px 0 12px;font-size:var(--small);color:var(--muted)}.notes-scope-control{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:var(--small)}.notes-scope-control select{width:auto;max-width:100%;font-size:var(--small)}.notes-order{font-size:var(--small)}#notes-help{position:relative;margin-left:auto}#notes-help summary{display:flex;align-items:center;color:var(--purple);font-size:var(--small)}#notes-help[open]{flex-basis:100%;margin-left:0}#notes-help p{max-width:700px;margin-bottom:6px;font-size:var(--small)}#notes-help button{font-size:var(--small)}#shared-annotations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.shared-annotation{padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--white);font-size:14px;overflow-wrap:anywhere}.annotation-heading{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--small);font-weight:650}.annotation-heading button{color:var(--purple);font-size:var(--small);padding:8px}.annotation-avatar{width:28px;height:28px;flex-shrink:0;border-radius:50%;object-fit:cover}.profile-symbol{display:grid;place-items:center;background:var(--pale);color:var(--purple);font-size:18px}.annotation-heading small,.request-count{font-size:var(--small);color:var(--muted);font-weight:400}.annotation-text{margin:8px 0;white-space:pre-wrap;font-size:14px}.annotation-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.annotation-actions button,.annotation-actions summary{font-size:var(--small);padding:8px;color:var(--purple);background:transparent;border:0}.annotation-actions summary{display:flex;align-items:center}.contributor-menu[open]{flex-basis:100%}.annotation-reply{margin:8px 0 0 16px}.shared-annotation.softened .annotation-text{color:var(--muted)}.shared-annotation.faded .annotation-text{opacity:.55}.collapsed-message{font-size:var(--small);color:var(--muted);margin:8px 0}.curator-hidden{border-style:dashed}.blank-note{display:flex;align-items:center;gap:12px;width:calc((100% - 12px)/2);min-height:88px;margin-top:12px;padding:16px;text-align:left;background:var(--white);border:1px dashed #b9aacd;border-radius:8px}.blank-note-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--pale);color:var(--purple);font-size:20px;flex-shrink:0}.blank-note-body{display:flex;flex-direction:column;gap:4px;font-size:14px}.blank-note-body>span{font-size:var(--small);color:var(--muted)}.blank-note:hover{border-color:var(--purple);background:#faf8ff}.notes-empty .annotations-title{display:flex}.notes-empty .annotation-toolbar{margin-bottom:0}.notes-empty #shared-annotations:empty{display:none}.annotations-panel form{border:1px solid var(--line);border-radius:8px;background:var(--white);padding:16px;margin-top:12px;width:calc((100% - 12px)/2);display:grid;gap:10px;font-size:14px}.note-form-top{display:flex;align-items:end;gap:14px}.note-form-top label{width:135px;flex-shrink:0}.note-form-top>span{font-size:var(--small);color:var(--muted)}.note-scope-label{font-size:var(--small);font-weight:650;color:var(--purple)}.note-form-actions{display:flex;gap:8px}.note-form-actions button[type=submit]{color:white;background:var(--purple);border-color:var(--purple)}#notes-status{font-size:var(--small);color:var(--purple);margin-top:8px}#notes-status:empty{display:none}.curator-access{margin-top:20px;font-size:var(--small)}.curator-access summary{display:flex;align-items:center}.moderation-report{padding:12px;border:1px solid var(--line);border-radius:8px;margin:8px 0}
.version-note{display:flex;align-items:center;justify-content:center;gap:12px;border-top:1px solid var(--line);padding:18px 0;margin-top:26px;color:var(--muted);font-size:var(--small)}.version-note>span{color:var(--purple);font-size:24px}.version-note a{color:var(--purple);padding:6px}footer{max-width:1296px;margin:auto;border-top:1px solid var(--line);padding:16px 0 30px;display:flex;align-items:center;gap:20px}footer .brand{font-size:24px}footer p{font-size:var(--small);color:var(--muted)}footer>a:last-child{margin-left:auto;font-size:var(--small);color:var(--purple)}
@media(max-width:899px){.watch-layout{display:flex;flex-direction:column;gap:14px}.spotlight{order:1}.performance{order:2}.annotation-section{order:3;margin-top:4px}.performance,.spotlight{display:block}.viewer-heading{padding:8px 12px}.viewer-identity .eyebrow{min-height:44px}.reaction-navigation{margin-left:0}.reaction-insights,.original-controls{padding:12px}.header-inner,main{padding-left:20px;padding-right:20px}.autoplay-setting{flex-wrap:wrap;gap:0}.autoplay-setting p{max-width:180px}.timeline .moment{flex-basis:162px}.reaction-tools{flex-direction:column}.browse-tools{width:100%}.filter-footer{align-items:start}.reaction-controls{max-width:none}.rail-heading>p{max-width:170px}.blank-note,.annotations-panel form{width:100%}#shared-annotations{grid-template-columns:1fr}footer{margin:0 20px;flex-wrap:wrap;gap:10px}footer p{order:3;width:100%}.version-note{align-items:start}}
@media(max-width:600px){.header-inner{padding:0 12px;min-height:60px;gap:8px}.brand{font-size:22px}main{padding:0 16px}.intro{padding:12px 0}.intro h1{font-size:24px}.intro h1 span{font-size:16px;margin-left:6px}.browse-toolbar{flex-wrap:wrap;gap:4px}.browse-paths{width:100%;gap:1px}.browse-paths button{flex:1;padding:6px;white-space:normal;line-height:1.3}.browse-paths button span{margin-left:2px}.autoplay-setting{display:none}.reaction-library{margin-top:4px}.rail-heading{display:block}.rail-heading>p{max-width:none;margin-bottom:4px}.reaction-controls{width:100%;gap:6px}.reaction-controls .sort-label{min-width:0;width:42%;flex-shrink:0}.reaction-controls .search-label{min-width:0;width:58%}.reaction-controls input{font-size:14px;padding:8px}.reaction-controls select{padding:8px 18px 8px 8px}.reaction-option{flex-basis:196px}.browser-note{display:none}.reaction-browser{margin-bottom:8px}.autoplay-mobile{display:flex;margin:0 0 8px}.autoplay-mobile p{max-width:none;flex:1}.viewer-heading{padding:4px 10px;gap:3px}.heading-reactor{gap:6px}.viewer-identity .eyebrow{gap:2px}.heading-reactor h2{font-size:16px}.heading-reactor .subscribe,.heading-reactor a#reactor-subscribe{padding:6px}.viewer-navigation{margin-left:-2px}.player-playback{padding:4px 6px}.playback-actions{gap:0 3px}.playback-actions>button,.playback-actions>a,.reaction-navigation button{padding:8px 6px}.poster-label{font-size:var(--small)}.spotlight-summary{font-size:14px}.notes-scope-control{width:100%;display:block}.notes-scope-control select{width:100%;margin-top:4px}.notes-order{flex:1}#notes-help{margin-left:0}.filter-title small{display:block;margin-left:0}.filter-footer{display:block}.filter-footer button{margin-top:4px}.version-note{display:block}.version-note>span{display:none}.version-note a{margin-left:4px}}
.reaction-controls .search-label,.reaction-controls .sort-label{font-size:var(--small)}.rail-thumbnail{grid-column:1;grid-row:1/3;position:relative;align-self:center}.rail-thumbnail img{width:64px;height:48px;object-fit:cover}.rail-reactor{grid-column:2;grid-row:1;align-self:end;font-size:var(--small);font-weight:650;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.rail-metadata{grid-column:2;grid-row:2;align-self:start;font-size:var(--small);color:var(--muted)}.rail-format{position:absolute;bottom:0;left:0;padding:0 3px;color:white;background:#25242c;font-size:var(--small)}.reaction-option{column-gap:8px;row-gap:0}.reactor-identity{display:flex;align-items:center;min-width:0;flex:1;gap:6px}.cue-title{font-size:16px;line-height:1.35;font-weight:650}.cue-attribution{font-size:var(--small);color:var(--muted);margin-top:6px}.rail-empty{font-size:14px;padding:12px}.rail-empty button{margin-top:8px}
.browser-note{display:none}.reaction-browser{display:grid;grid-template-columns:1fr auto;column-gap:18px}.browse-toolbar{grid-column:1;grid-row:1}#section-navigation,#filter-panel,#reaction-library{grid-column:1/-1}.reaction-browser>.autoplay-setting{grid-column:2;grid-row:1;margin:0 0 8px}.reaction-browser>.autoplay-setting p{max-width:220px}
@media(min-width:900px){.viewer-identity{display:flex;align-items:center;gap:12px}.spotlight .viewer-identity{flex-direction:row-reverse;justify-content:space-between;gap:8px}.heading-reactor{flex:1}.viewer-identity .eyebrow{flex-shrink:0}.spotlight #reaction-label{max-width:110px}.viewer-heading{padding:6px 12px}.heading-reactor .reactor-identity{gap:4px}.heading-reactor a#reactor-subscribe{padding:6px}}
@media(max-width:899px){.reaction-browser{display:block}.reaction-browser>.autoplay-setting{display:flex;margin:4px 0 8px}.reaction-browser>.autoplay-setting p{max-width:none;flex:1}.rail-heading>p{flex-shrink:1}}
.auto-load{flex-shrink:0}.autoplay-setting{gap:8px}.autoplay-setting p{min-width:0}.intro{padding:10px 0 12px}.reaction-browser{margin-bottom:12px}.moment-passage{display:grid;grid-template-columns:auto auto;gap:2px 5px}.moment-passage strong{grid-column:1/-1}.moment-count{text-align:right;white-space:nowrap}.moment-top{white-space:nowrap}
@media(max-width:600px){.intro{padding:12px 0}.reaction-browser{margin-bottom:8px}.moment-passage{padding:8px}.moment-count{font-size:var(--small)}}
.timeline .moment{flex-basis:174px}

/* Fold budget: the primary reactor choice stays above playback at every width. */
.intro{padding-top:6px;padding-bottom:2px}.reaction-browser{margin-bottom:4px}.browse-toolbar{margin-bottom:4px}
@media(max-width:899px){
 .reaction-controls{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-bottom:8px}
 .reaction-controls .search-label,.reaction-controls .sort-label{width:100%;max-width:none;min-width:0}
 .reaction-controls input,.reaction-controls select{width:100%}
 .rail-heading{display:block;margin:0}.rail-heading>p{max-width:none;margin-bottom:4px}
 .reaction-option{flex-basis:180px;grid-template-columns:50px minmax(0,1fr);padding:4px;min-height:46px}
 .rail-thumbnail img{width:50px;height:36px}.reaction-rail{padding-bottom:4px}
 .spotlight .viewer-heading{position:relative;display:block;padding:4px 10px}
 .spotlight .viewer-identity .eyebrow{padding-right:145px}
 .spotlight .autoplay-setting{position:absolute;right:6px;top:4px;margin:0;display:flex}
 .spotlight .autoplay-setting p{display:none}
 #autoplay-help{font-size:var(--small);color:var(--muted);margin:4px 6px}
 .spotlight .viewer-navigation:empty{display:none}
 #cue-count{margin-left:auto}
}
@media(max-width:600px){
 .rail-heading>p{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;margin:0}
 .spotlight #reaction-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .spotlight .viewer-identity .eyebrow{padding-right:145px}
 .reaction-library{margin-top:0}.reaction-option{flex-basis:176px}
}

.coverage-note{font-size:13px;line-height:1.5;margin:14px 0;color:var(--muted)}

.matched-moment{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}.matched-moment p{font-size:var(--small);color:var(--muted);margin-top:5px}.matched-moment button{max-width:100%;white-space:normal}

footer{flex-wrap:wrap}.footer-feedback{margin-left:auto}.footer-feedback>button{color:var(--purple)}
#demo-feedback-form{padding:16px 0;max-width:560px;width:min(560px,calc(100vw - 40px));font-size:var(--small)}
#demo-feedback-form label{display:block;font-weight:650;margin-bottom:8px}
#demo-feedback-form textarea{width:100%;min-height:100px;font:inherit;font-size:16px;padding:10px;border:1px solid var(--line);border-radius:8px;resize:vertical}
#demo-feedback-form>div{display:flex;gap:8px;margin:10px 0}#feedback-status:empty{display:none}
@media(max-width:899px){.footer-feedback{margin-left:0;width:100%}#demo-feedback-form{width:100%}}
.cue-owner{text-align:left}.cue-topic{display:block;overflow:hidden;text-overflow:ellipsis;font-weight:650}

/* Choose a mode, a reactor, then a complete reviewed excerpt. Each rail scrolls
   horizontally so a reactor with many cues does not push playback down. */
.intro{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0}
.song-heading{min-width:0}.intro .browse-paths{flex-shrink:0}.intro .browse-paths button{padding:6px 10px}
.reaction-browser{display:block;margin-bottom:4px}
.reaction-library{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;margin-top:0}
.rail-heading{grid-column:2;grid-row:1;margin:0;display:flex}
.rail-heading>p{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;margin:0}
.reaction-rail{grid-column:1;grid-row:1;position:relative;padding-bottom:4px}
#filters-toggle{font-size:var(--small);padding:8px;color:var(--purple)}
.reaction-controls{max-width:none;justify-content:initial;flex-wrap:wrap;margin-bottom:8px}
.reaction-controls .search-label{max-width:none;min-width:180px}.reaction-controls .sort-label{min-width:160px}
#section-navigation{margin-top:2px}.timeline{position:relative;gap:6px;padding:2px 2px 4px}
.timeline .moment{flex:0 0 248px}.moment-passage{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 8px;padding:4px 8px;min-height:44px}
.moment-passage strong{grid-column:1;line-height:1.3}.moment-top{grid-column:2;white-space:nowrap}
.moment-count{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.cue-rail{position:relative;display:flex;align-items:stretch;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:2px 2px 4px}
.cue-rail .cue-marker{flex:0 0 430px;width:auto;min-width:0;min-height:44px;padding:8px 10px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:3px;text-align:left;background:var(--white);border:1px solid var(--line);color:var(--ink);font-size:var(--small);line-height:1.3}
.cue-rail .cue-topic{display:block;white-space:normal;overflow:visible;text-overflow:clip;font-size:var(--small);line-height:1.3;overflow-wrap:anywhere}
.cue-rail .cue-clock{white-space:normal;font-size:var(--small);line-height:1.3;color:var(--purple);overflow-wrap:anywhere}
.cue-summary{display:block;font-size:var(--small);line-height:1.3;white-space:normal;overflow-wrap:anywhere}
.cue-rail .cue-marker.active,.reaction-option.active{background:var(--purple);border-color:var(--purple);color:var(--white);box-shadow:inset 0 0 0 1px var(--purple)}
.cue-marker.active .cue-clock,.reaction-option.active .rail-metadata{color:var(--white)}
.spotlight .player-playback>.autoplay-setting{position:static;display:flex;flex-wrap:wrap;gap:0 8px;margin:0;font-size:var(--small)}
.spotlight .player-playback>.autoplay-setting p{display:block;max-width:none;flex:1;min-width:160px;font-size:var(--small)}
.viewer-navigation:empty{display:none}
@media(max-width:899px){
 .spotlight .viewer-heading{display:flex;position:static;padding:2px 10px;min-height:44px}
 .spotlight .viewer-identity{display:flex;align-items:center;min-width:0}
 .spotlight .viewer-identity .eyebrow{position:absolute;clip-path:inset(50%);width:1px;height:1px;min-height:0;overflow:hidden;margin:0;padding:0}
 .spotlight .heading-reactor{flex:1;min-width:0}.heading-reactor .reactor-identity{min-width:0}
 .spotlight .viewer-navigation{display:none}.spotlight .heading-reactor h2{font-size:16px}
 .reaction-controls{flex-direction:column;align-items:stretch}.reaction-controls .search-label,.reaction-controls .sort-label{width:100%;min-width:0}
 .reaction-option{flex-basis:176px;min-height:46px}.reaction-rail{gap:6px}
 .cue-rail .cue-marker{flex-basis:min(430px,calc(100vw - 44px))}
}
@media(max-width:600px){
 .header-inner{min-height:52px}.intro{gap:4px;min-height:48px;padding:2px 0}
 .song-heading{flex:0 1 auto}.intro h1{font-size:22px;line-height:1.1;letter-spacing:-.4px}
 .intro h1 span{display:block;font:var(--small)/1.2 var(--sans);margin:0;letter-spacing:0}
 .intro .subtitle{display:none}.intro .browse-paths{flex:0 0 auto;width:auto;padding:2px;gap:0}
 .intro .browse-paths button{flex:none;font-size:var(--small);padding:4px 6px;white-space:nowrap}
 .intro .browse-paths button span{display:none}
 .timeline .moment{flex-basis:244px}.moment-passage{padding:4px 6px}
 .cue-rail .cue-marker{flex-basis:calc(100vw - 36px);padding:6px 8px}
 .reaction-library{gap:4px}.reaction-option{flex-basis:164px}.rail-thumbnail img{height:34px}
 .heading-reactor a#reactor-subscribe{padding:4px;font-size:var(--small)}
}

/* Quiet overview: only an explicitly chosen cue discloses its details. */
.cue-rail{align-items:flex-start}
.cue-rail .cue-marker{flex-basis:260px;max-width:calc(100vw - 36px);justify-content:center}
.cue-rail .cue-marker[aria-expanded=true]{flex-basis:430px}
.cue-rail .cue-topic,.rail-reactor{font-size:14px;line-height:1.35}
.cue-details{display:flex;flex-direction:column;gap:4px;margin-top:5px}
.cue-rail .cue-clock,.cue-marker.active .cue-clock,.rail-metadata,.reaction-option.active .rail-metadata{font-size:var(--small);font-weight:400;color:var(--muted)}
.cue-rail .cue-marker.active,.reaction-option.active{background:var(--pale);color:var(--ink)}
.spotlight .viewer-heading>.autoplay-setting{position:static;display:flex;flex-shrink:0;margin:0;gap:0}
.spotlight .viewer-heading .auto-load{font-weight:400;font-size:var(--small);gap:0}
.spotlight .viewer-heading .autoplay-setting p{display:none}
.spotlight .viewer-identity .eyebrow{position:absolute;clip-path:inset(50%);width:1px;height:1px;min-height:0;overflow:hidden;padding:0;margin:0}
.spotlight .viewer-identity{flex:1;min-width:0}
.heading-reactor h2 a{white-space:normal;overflow-wrap:anywhere;line-height:1.25}
@media(max-width:899px){.spotlight .viewer-heading{gap:4px}.spotlight .heading-reactor{gap:4px}}

/* One row of reaction cues. Song sections remain in the source/notes context. */
.song-heading{flex:1}.intro{justify-content:flex-start}
#section-navigation{margin-top:2px}

/* Only the currently selected cue and reactor use bold type. */
.cue-rail .cue-topic,.reaction-option .rail-reactor,.reaction-option strong{font-weight:400}
.cue-rail .cue-marker.active .cue-topic,.reaction-option.active .rail-reactor,.reaction-option.active strong{font-weight:650}