/* The programme: warm paper, ink, hard shadows and the prototype's index tabs. */
:root {
  --paper:#EEE6D3; --paper-deep:#E4DAC3; --paper-light:#F6F0E2;
  --program-ink:#211628; --program-muted:#6B5D56; --program-rule:#21162832;
  --vermilion:#B83625; --copper:#A96632; --cobalt:#2C47A8; --mustard:#E9C346; --stage:#1B1120;
  --program-serif:"Songti SC","Noto Serif CJK SC","Yu Mincho","AppleMyungjo","SimSun",Georgia,serif;
  --program-title:"Bodoni 72","Songti SC","Yu Mincho","Noto Serif CJK SC","AppleMyungjo",Georgia,serif;
  --program-num:"DIN Condensed","Bahnschrift Condensed","Arial Narrow",-apple-system,sans-serif;
  --program-mono:"SF Mono",Menlo,Consolas,monospace;
  --program-hand:"Hannotate SC","Kaiti SC","KaiTi",var(--program-serif);
  --program-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.program-page, .program-pause, .program-admission {
  color:var(--program-ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color-scheme:light;
}
.program-page h1,.program-page h2,.program-page h3,.program-pause h1,.program-pause h2 {font-family:var(--program-serif);margin:0}
.program-page p,.program-pause p{margin:0}
.program-page button,.program-pause button,.program-admission button{border-radius:0;letter-spacing:normal;line-height:1.25}
.program-page input,.program-pause input {accent-color:var(--vermilion)}
.program-page button:focus-visible,.program-pause button:focus-visible,.program-page input:focus-visible {outline:2px solid var(--cobalt);outline-offset:3px}
.program-page button:disabled {opacity:1;cursor:default}
#library.program-page,#hub.program-page {position:fixed;inset:0;z-index:3;display:block;background:var(--stage);color:var(--program-ink);overflow:hidden;animation:none}
#hub.program-page[hidden],#library.program-page[hidden]{display:none!important}
.program-page {position:relative;width:100%;height:100%;min-height:0;overflow:hidden;background:var(--stage)}
.program-sheet {
  position:relative;isolation:isolate;height:100%;margin-right:52px;overflow:auto;scrollbar-width:thin;
  padding:clamp(22px,3.1vw,54px) clamp(22px,4vw,72px);background-color:var(--paper);
}
.program-sheet::before,.program-pause::before,.program-admission::before {
  content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--program-grain);opacity:.20;mix-blend-mode:multiply;z-index:-1;
}
.program-head {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(20px,3vh,46px)}
.program-head>time,.program-head>span {font:12px var(--program-mono);color:var(--program-muted);text-align:right}
.program-brand {display:flex;align-items:center;gap:10px;white-space:nowrap}
.program-brand svg {width:34px;height:34px;flex:none}
.program-brand b {font:800 24px -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-.04em}
.program-brand span {font:11px var(--program-mono);color:var(--program-muted)}
.program-icon {width:18px;height:18px;vertical-align:middle;flex:none}
.program-binder {position:absolute;right:0;top:clamp(56px,8vh,92px);width:52px;display:grid;gap:6px;z-index:2}
.program-page .program-binder button {
  width:45px;height:clamp(52px,10.8vh,100px);margin:0;padding:0;border:0;border-radius:0 6px 6px 0;display:grid;place-items:center;
  writing-mode:vertical-rl;font:700 15px var(--program-serif);letter-spacing:.22em;color:var(--program-ink);
  box-shadow:inset 4px 0 0 #21162819;transition:width .16s,background .16s;
}
.program-page .program-binder .binder-home{background:#E7B9A6}
.program-page .program-binder .binder-library,.program-page .program-binder .binder-collection{background:var(--mustard)}
.program-page .program-binder .binder-records{background:#B9C3E2}
.program-page .program-binder .binder-editor{background:#C8D7BF}
.program-page .program-binder .binder-settings{background:#D9CDB6}
.program-page .program-binder button[aria-current=page]{width:52px;background:var(--paper);box-shadow:none}
.program-page .program-binder button:hover {width:50px}
.program-page .program-binder button[aria-current=page]:hover{width:52px}
.program-links,.program-buttons {display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.program-page .program-links button,.program-page .program-underline,.program-pause .program-underline {
  padding:1px 0;background:none;border:0;border-bottom:1px solid currentColor;font:700 13px var(--program-serif);color:inherit;
}
.program-page .program-links button:hover{color:var(--vermilion)}
.program-page .program-links .program-remove-link{color:var(--vermilion)}
.program-page .program-buttons button,.program-pause .program-buttons button,.program-head>button,.program-page .setting-item>button {
  display:inline-flex;align-items:center;gap:8px;justify-content:center;background:var(--paper-light);color:var(--program-ink);
  border:1px solid var(--program-ink);padding:9px 14px;font:700 14px var(--program-serif);
}
.program-page .program-primary,.program-pause .program-primary,.program-page .setting-item>.program-primary {
  background:var(--program-ink);color:var(--paper-light);border:1px solid var(--program-ink);padding:10px 16px;
  font:700 15px var(--program-serif);box-shadow:4px 4px 0 var(--vermilion);transition:translate .12s;
}
.program-page .program-primary:hover,.program-pause .program-primary:hover {background:var(--program-ink);translate:-1px -1px}
.program-page kbd,.program-pause kbd {border:1px solid currentColor;border-radius:3px;font:11px var(--program-mono);padding:3px 6px;white-space:nowrap}
.program-keys {display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:11px;color:var(--program-ink)}
.program-keys kbd {background:var(--paper-light);box-shadow:0 2px 0 var(--program-ink)}
.program-keys span {margin-right:7px}
.program-empty{color:var(--program-muted);font-size:14px;padding:18px 0}
.program-page img,.program-page .track-cover svg,.program-jacket svg,.program-continue-cover svg,.result-song>div svg {width:100%;height:100%;display:block;object-fit:cover}

/* Home and actual saved records. */
.program-home-grid {display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,1fr);gap:clamp(18px,3.2vw,50px)}
.program-home-main h1 {font-size:clamp(45px,6.2vw,104px);font-weight:900;line-height:1.06;margin:6px 0 clamp(22px,5vh,57px);letter-spacing:-.045em}
.program-home-main h1 span {position:relative;white-space:nowrap}
.program-home-main h1 span::after {
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 9Q55 3 110 9T211 5Q258 4 298 10M26 14Q100 8 180 12T280 10' fill='none' stroke='%23B83625' stroke-width='3.8' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.program-continue {display:grid;grid-template-columns:minmax(120px,32%) minmax(0,1fr);border:1px solid var(--program-ink);background:var(--paper-light);min-height:162px}
.program-continue-cover {aspect-ratio:1;align-self:stretch;overflow:hidden;border-right:1px solid var(--program-ink)}
.program-continue>div:last-child{padding:clamp(12px,1.6vw,23px);display:flex;flex-direction:column;justify-content:center;gap:8px}
.program-continue small,.program-continue p {color:var(--program-muted);font-size:12px}
.program-continue h2{font-size:clamp(22px,3vw,40px);overflow-wrap:anywhere}
.program-continue .program-buttons {margin-top:5px}
.program-continue.first-play {display:block}
.program-continue.first-play .program-primary{align-self:flex-start}
.program-home-best {display:flex;gap:14px;align-items:center}
.program-home-best b{font:700 26px var(--program-num)}
.program-home-best i {font:700 23px var(--program-serif);color:var(--vermilion)}
.program-home-side {display:flex;flex-direction:column;gap:22px}
.program-player-card {background:var(--program-ink);color:var(--paper);padding:clamp(17px,2vw,28px);box-shadow:6px 6px 0 var(--copper)}
.program-player-card h2,.program-journal h2{font-size:21px}
.program-player-stats {display:flex;flex-wrap:wrap;gap:clamp(12px,2.2vw,34px);margin:16px 0}
.program-player-stats div {display:grid;gap:3px}
.program-player-stats b{font:700 39px/1 var(--program-num);color:#F3D38E}
.program-player-stats span{font-size:11px}
.program-player-stamps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px}
.program-player-stamps button {position:relative;width:35px;height:35px;padding:0;border:1px dashed #E7D9BC80;border-radius:50%;background:none;color:var(--paper);font:700 14px var(--program-serif)}
.program-player-stamps button.has-score {background:#DDB46D;color:var(--program-ink);border-color:#DDB46D}
.program-player-stamps i {position:absolute;right:-4px;bottom:-4px;background:var(--paper);border-radius:50%;padding:1px 4px;color:var(--vermilion);font:700 10px var(--program-serif)}
.program-journal {position:relative;background:var(--paper-light);padding:14px 18px 10px;border-left:3px double #B8362580}
.program-journal::before,.program-pause::after {content:"";position:absolute;width:85px;height:22px;top:-11px;left:calc(50% - 43px);background:#E9C3469C;transform:rotate(-4deg);pointer-events:none}
.program-journal>div {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:8px 0;border-bottom:1px solid #2C47A82A;font-size:13px}
.program-journal time {font:11px var(--program-mono);color:var(--program-muted)}
.program-journal>div span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.program-journal p {padding:12px 0;color:var(--program-muted);font-size:13px}
.program-home-cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2.2vw,32px);margin-top:24px}
.program-home-cards .home-card {display:grid;position:relative;align-content:start;gap:10px;min-height:134px;background:var(--paper-light);border:1px solid var(--program-ink);padding:17px 20px;text-align:left;color:var(--program-ink)}
.home-card>span{font:900 20px var(--program-serif)}
.home-card> b{font:700 37px/1 var(--program-num)}
.home-card> b small{font:12px var(--program-mono)}
.home-card>.program-icon{position:absolute;bottom:17px;right:18px}
.program-home-cards .official{background:var(--mustard);box-shadow:4px 4px 0 var(--program-ink)}
.program-home-cards .workshop{background:var(--cobalt);color:var(--paper-light);border-color:var(--cobalt)}
.workshop [data-project]{display:grid;text-align:left;gap:3px;background:none;border:0;color:inherit;padding:0}
.workshop [data-project] strong{font:700 18px var(--program-serif)}
.workshop [data-project] small{font-size:11px;color:#F6F0E2DB}
.workshop p,#hub-projects{font-size:13px}
.program-records-body{max-width:860px;margin:0 auto}
.program-records-body h1{font-size:42px;border-bottom:2px solid var(--program-ink);padding-bottom:12px;margin-bottom:12px}
.program-records-body p{margin:22px 0;color:var(--program-muted)}
.program-records-body .record-row{display:grid;grid-template-columns:minmax(0,1fr) auto 45px;align-items:center;gap:14px;width:100%;padding:13px 6px;border:0;border-bottom:1px solid var(--program-rule);background:none;color:var(--program-ink);text-align:left}
.record-row strong{color:var(--vermilion);font:800 24px var(--program-title)}

/* Library programme and ticket. */
.program-library .library-sheet {padding-top:clamp(19px,2.5vw,43px)}
.program-library .program-head {margin-bottom:clamp(16px,3vh,36px)}
.program-collection-tabs {display:flex;gap:clamp(12px,2vw,29px);align-items:center}
.program-library .program-collection-tabs button {position:relative;padding:5px 0;font:900 17px var(--program-serif);color:var(--program-muted);white-space:nowrap}
.program-collection-tabs sup{margin-left:3px;font:700 11px var(--program-num)}
.program-library .program-collection-tabs button[aria-pressed=true]{color:var(--program-ink)}
.program-collection-tabs button[aria-pressed=true]::after{content:"";height:3px;position:absolute;left:0;right:0;bottom:-1px;background:var(--vermilion);clip-path:polygon(0 34%,36% 12%,67% 18%,100% 51%,100% 93%,65% 75%,33% 88%,0 100%)}
.program-search {display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--program-ink);width:min(21vw,235px);color:var(--program-muted)}
.program-search input {border:0;background:transparent;color:var(--program-ink);padding:6px 0;font-size:12px;width:100%;min-width:0}
.program-library-main {display:grid;grid-template-columns:minmax(210px,1.14fr) minmax(0,2fr);gap:clamp(20px,3.2vw,55px);align-items:start}
.program-library .program-setlist {display:flex;flex-direction:column;min-width:0;gap:0;padding:0;overflow:visible;position:static;width:auto;border:0;height:auto}
.program-setlist-head {display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:11px;border-bottom:2px solid var(--program-ink)}
.program-setlist-head h1 {font-size:clamp(24px,2.3vw,38px);white-space:nowrap}
.program-list-count{font:11px var(--program-mono);color:var(--program-muted);white-space:nowrap}
.program-sort {display:flex;flex-wrap:wrap;gap:4px 12px;padding:8px 0;border-bottom:1px solid var(--program-rule)}
.program-library .program-sort button{padding:2px 0;font-size:11px;color:var(--program-muted)}
.program-library .program-sort button[aria-pressed=true]{color:var(--program-ink);font-weight:750}
.program-library .program-track-list {display:flex;flex-direction:column;overflow:auto;gap:0;padding:0;max-height:min(58vh,650px);flex:auto;scrollbar-width:thin;overscroll-behavior:contain}
.program-library .program-track {
  position:relative;isolation:isolate;display:grid;grid-template-columns:26px 40px minmax(0,1fr) 26px 36px;gap:8px;
  align-items:center;min-height:clamp(48px,6.7vh,65px);width:100%;padding:6px 3px;text-align:left;border-bottom:1px solid var(--program-rule);
}
.program-track[aria-selected=true]::before {
  position:absolute;content:"";inset:7px 0;z-index:-1;background:#E6C35C;
  clip-path:polygon(0 12%,2% 5%,44% 9%,98% 0,100% 34%,99% 91%,96% 100%,51% 94%,2% 100%,0 73%);
}
.program-track:hover{background:#F8F2E48F!important}
.program-track[aria-selected=true] .track-no {color:var(--vermilion)}
.track-no {font:700 23px var(--program-num);color:var(--program-muted)}
.track-cover {width:40px;height:40px;display:block;border:1px solid #2116283F;overflow:hidden}
.track-copy {display:grid;min-width:0;gap:3px}
.track-copy strong{font:800 clamp(14px,1.36vw,21px)/1.08 var(--program-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-copy small,.program-track time{font:10px var(--program-mono);color:#62544F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.program-track time{text-align:right}
.track-rank b{display:grid;place-items:center;color:var(--vermilion);width:25px;height:25px;border:1.5px solid currentColor;border-radius:49% 53% 45% 54%;font:700 13px var(--program-title);transform:rotate(-8deg)}
.program-setlist .program-links{margin-top:12px}
.program-setlist .program-keys{margin-top:22px}
.program-library .program-showcase {display:grid;grid-template-columns:minmax(0,1.12fr) minmax(260px,1fr);gap:clamp(18px,3.2vw,52px);overflow:visible;position:static;min-width:0;align-items:start;padding:0;perspective:none}
.program-song-column,.program-setup{min-width:0}
.program-setup{display:flex;flex-direction:column;align-self:stretch}
.program-setup .program-control:last-of-type{margin-bottom:21px}
.program-sleeve {position:relative;width:min(89%,39vh,430px);aspect-ratio:1;isolation:isolate;margin:0 0 13px}
.program-jacket {position:absolute;inset:0;border:1px solid var(--program-ink);background:var(--paper-deep);box-shadow:5px 5px 0 var(--program-ink)}
.program-vinyl {position:absolute;z-index:-1;inset:3%;border-radius:50%;background:repeating-radial-gradient(circle,#211628 0 2px,#392B40 2px 3.6px);box-shadow:3px 4px 0 #21162825;transform:translateX(0);transition:transform .55s cubic-bezier(.2,.9,.3,1)}
.program-vinyl i {position:absolute;inset:34%;border-radius:50%;border:3px solid #E5C782;background:#A63D32}
.program-vinyl i::after{content:"";position:absolute;top:calc(50% - 4px);left:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:var(--paper);box-shadow:10px 17px 0 -3px var(--paper)}
.program-sleeve.is-playing .program-vinyl {transform:translateX(21%)}
.program-sleeve.is-playing .program-vinyl i {animation:program-turn 2s linear infinite}
@keyframes program-turn{to{transform:rotate(360deg)}}
.sleeve-enter .program-jacket{animation:program-in .24s ease both}
@keyframes program-in{from{opacity:.3;transform:translateX(-4px)}to{opacity:1;transform:none}}
.program-listen {display:flex;align-items:center;gap:10px;font:700 13px var(--program-serif);margin:15px 0 10px}
.program-library .program-listen button {display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid var(--program-ink);border-radius:50%}
.program-library .program-listen button[aria-pressed=true]{background:var(--vermilion);color:var(--paper-light);border-color:var(--vermilion)}
.program-listen>svg {width:min(49%,190px);height:26px;color:#75675E}
.program-library .program-song-title {font:900 clamp(23px,3.05vw,52px)/1.08 var(--program-title);overflow-wrap:anywhere}
.program-library .program-song-facts {display:flex;align-items:center;flex-wrap:wrap;gap:5px 12px;margin:8px 0;color:var(--program-muted);font:11px var(--program-mono)}
.program-song-facts b {color:var(--program-ink);font:700 13px -apple-system,sans-serif}
.program-tags {display:flex;gap:6px;flex-wrap:wrap;margin:9px 0}
.program-tags span {padding:4px 7px;border:1px solid var(--program-ink);background:var(--paper-light);font:700 11px var(--program-serif)}
.program-tags span:nth-child(2n){transform:rotate(-1.5deg);background:#F0DDCE}
.program-density {margin-top:clamp(14px,2.3vh,25px)}
.program-density>div:first-child{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--program-muted)}
.program-density strong{font:700 14px var(--program-serif);color:var(--program-ink)}
.program-density-graph svg{width:100%;height:clamp(65px,11vh,119px);display:block;margin-top:3px}
.program-density-axis {display:flex;justify-content:space-between;gap:7px;font:10px var(--program-mono);color:var(--program-muted)}
.program-range-caption {color:var(--cobalt)}
.program-control-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.program-control-head h3{font-size:15px}
.program-control-head span{font:10px var(--program-mono);color:var(--program-muted)}
.program-stamps {display:flex;flex-wrap:wrap;gap:clamp(4px,.7vw,12px);margin:10px 0 9px}
.program-library .program-dstamp {
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:0 1 auto;
  width:clamp(47px,4.9vw,75px);aspect-ratio:1;padding:2px;border-radius:50%;border:1.6px solid var(--program-ink);font-family:var(--program-num);
}
.program-dstamp::after{content:"";position:absolute;inset:3.5px;border:1px solid currentColor;border-radius:50%;opacity:.52;pointer-events:none}
.program-dstamp span{font-size:clamp(8px,.75vw,11px);font-weight:800;max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.program-dstamp b{font:700 clamp(19px,2vw,33px)/1 var(--program-num)}
.program-library .program-dstamp[aria-pressed=true]{color:var(--paper-light);background:var(--vermilion);border-color:var(--vermilion);transform:rotate(-8deg);animation:program-stamp .21s ease-out both}
@keyframes program-stamp{from{transform:rotate(-16deg) scale(1.16);opacity:.55}to{transform:rotate(-8deg) scale(1);opacity:1}}
.program-note-counts{display:flex;gap:6px 11px;align-items:center;flex-wrap:wrap;margin-bottom:12px;font-size:11px}
.program-note-counts span{display:flex;align-items:center;gap:4px}
.program-note-counts b{font:700 18px var(--program-num)}
.program-note-counts i{display:block;width:9px;height:9px;border:1px solid var(--program-ink)}
.program-note-counts .stat-tap{background:var(--vermilion);transform:rotate(45deg)}
.program-note-counts .stat-hold{width:5px;height:12px;border-radius:2px;background:var(--mustard)}
.program-note-counts .stat-drag{background:#B77641;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.program-note-counts .stat-ring{border-radius:50%}
.program-library .program-best {
  width:100%;position:relative;display:grid;text-align:left;gap:3px;padding:11px 12px;min-height:82px;
  border:1px solid var(--program-ink);background:repeating-linear-gradient(0deg,var(--paper-light) 0 22px,#D9D0BD 22px 23px);color:var(--program-ink);
}
.program-best>span {font:700 12px var(--program-serif)}
.program-best strong{font:700 34px/1 var(--program-num);margin-right:56px}
.program-best small{font:10px var(--program-mono)}
.program-best em{font:16px var(--program-hand);color:var(--program-muted)}
.program-best i {position:absolute;right:12px;top:calc(50% - 24px);width:48px;height:48px;display:grid;place-items:center;border:3px double var(--vermilion);border-radius:50%;color:var(--vermilion);font:800 23px var(--program-title);transform:rotate(-9deg)}
.program-control{margin-top:clamp(10px,1.65vh,17px)}
.program-control>label,.program-section-picker>span{display:block;margin-bottom:5px;font:700 13px var(--program-serif);color:var(--program-muted)}
.program-segments {display:flex;min-width:0;border:1px solid var(--program-ink)}
.program-page .program-segments button {flex:1;padding:7px 3px;border:0;background:transparent;color:var(--program-ink);font:700 13px var(--program-serif)}
.program-page .program-segments button+button{border-left:1px solid var(--program-rule)}
.program-page .program-segments button[aria-pressed=true]{background:var(--program-ink);color:var(--paper-light)}
.program-speed{display:flex;align-items:center;gap:9px}
.program-page .program-speed button{width:28px;height:28px;padding:0;border:1px solid var(--program-ink);background:var(--paper-light);color:var(--program-ink);font-size:18px}
.program-speed b,.program-speed strong{min-width:38px;text-align:center;font:700 24px/1 var(--program-num)}
.program-speed input{min-width:20px;width:100%;flex:1}
.program-library .program-ticket {
  position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 62px;align-items:stretch;text-align:left;
  border:0;background:var(--program-ink);color:var(--paper-light);padding:0;box-shadow:4px 4px 0 var(--vermilion);
  margin-top:auto;min-height:68px;transform:none;
}
.program-library .program-ticket:hover{background:#35273B;filter:none}
.program-ticket>div:first-child{padding:13px 13px 11px;display:flex;flex-direction:column;justify-content:center;gap:5px}
.program-ticket strong{font:900 clamp(18px,1.95vw,30px) var(--program-serif)}
.program-ticket-config{font:10px var(--program-mono);color:#E8D9BE}
.program-ticket>div:last-child{position:relative;display:grid;place-content:center;justify-items:center;gap:3px;background:var(--vermilion);border-left:1px dashed #F6F0E299}
.program-ticket>div:last-child::before,.program-ticket>div:last-child::after{content:"";position:absolute;left:-6px;width:12px;height:12px;border-radius:50%;background:var(--paper)}
.program-ticket>div:last-child::before{top:-6px}
.program-ticket>div:last-child::after{bottom:-6px}
.program-ticket kbd{font-size:9px}
.program-ticket .program-icon{width:21px;height:21px}
.program-section-picker{display:block;margin-top:7px}
.program-practice .arc-practice-editor,.program-pause .arc-practice-editor{background:none;border:1px solid var(--program-rule);padding:8px;border-radius:0;color:var(--program-ink)}
.program-practice .arc-practice-field>span,.program-pause .arc-practice-field>span{color:var(--program-muted)}
.program-practice .arc-practice-field>div,.program-pause .arc-practice-field>div{background:var(--paper-light);border:1px solid var(--program-rule);border-radius:0}
.program-practice .arc-practice-field input,.program-pause .arc-practice-field input{color:var(--program-ink);background:none}
.program-practice .arc-practice-field button,.program-pause .arc-practice-field button{color:var(--program-ink);background:transparent}
.program-section-picker .arc-choice{width:100%}

/* Paper settings and results. */
#panel[data-style=paper]{padding:0;display:block;overflow:hidden;background:var(--stage)}
#panel[data-style=paper][hidden]{display:none}
.program-settings-grid{display:grid;grid-template-columns:minmax(130px,.66fr) minmax(300px,1.52fr) minmax(200px,1.13fr);gap:clamp(18px,3.4vw,55px);align-items:start}
.program-settings-index h1{font-size:clamp(30px,4.2vw,62px);margin-bottom:14px}
.program-settings-index nav{display:grid}
.program-settings-index nav button{display:flex;gap:10px;align-items:center;background:none;color:var(--program-ink);border:0;border-bottom:1px solid var(--program-rule);text-align:left;padding:11px 8px;font:800 16px var(--program-serif)}
.program-settings-index nav b{font:700 15px var(--program-num);color:var(--program-muted)}
.program-settings-index nav button[aria-current=page]{background:var(--program-ink);color:var(--paper-light);box-shadow:4px 4px 0 var(--vermilion)}
.program-settings-index nav button[aria-current=page] b{color:var(--mustard)}
.program-setting-body>h2{font-size:31px;padding-bottom:10px;border-bottom:2px solid var(--program-ink)}
.setting-item {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--program-rule)}
.setting-item.stack,.setting-item.setting-choices{display:grid;justify-content:stretch}
.setting-item b{font:800 16px var(--program-serif)}
.setting-item p{font-size:12px;line-height:1.45;color:var(--program-muted);margin-top:4px}
.setting-slider>span{width:55%;display:grid;grid-template-columns:minmax(0,1fr) 55px;gap:6px;align-items:center}
.setting-slider output{font:11px var(--program-mono);text-align:right}
.setting-toggle{position:relative;cursor:pointer}
.setting-toggle input{position:absolute;right:0;opacity:0;width:48px;height:25px}
.setting-toggle i{width:48px;height:24px;border:1px solid var(--program-ink);background:var(--paper-deep);position:relative;flex:none}
.setting-toggle i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;background:var(--program-ink);transition:transform .15s}
.setting-toggle input:checked+i{background:var(--vermilion)}
.setting-toggle input:checked+i::after{background:var(--paper-light);transform:translateX(24px)}
.setting-toggle input:focus-visible+i{outline:2px solid var(--cobalt);outline-offset:3px}
.program-judge-bars{display:grid;gap:4px}
.program-judge-bars>div{display:grid;grid-template-columns:74px minmax(0,1fr) 54px;gap:5px;align-items:center}
.program-judge-bars b{font:700 11px var(--program-serif)}
.program-judge-bars code{font:10px var(--program-mono);text-align:right}
.program-judge-bars span{display:grid;place-items:center;height:10px}
.program-judge-bars i {display:block;height:6px;transition:width .18s}
.grade-P{background:var(--program-ink)}
.grade-G{background:#C4743C}
.grade-D{background:var(--cobalt)}
.grade-M{background:var(--vermilion)}
.program-skins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.program-skins button{padding:6px;background:var(--paper-light);color:var(--program-ink);text-align:left;border:1px solid var(--program-ink)}
.program-skins button[aria-pressed=true]{box-shadow:3px 3px 0 var(--vermilion)}
.program-skins button span{display:flex;align-items:center;justify-content:space-evenly;gap:3px;background:var(--stage);height:30px;margin-bottom:3px}
.program-skins button i{width:13px;height:17px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--chip)}
.program-skins button .skin-chip-2{width:17px;height:12px;clip-path:polygon(20% 0,80% 0,100% 50%,80% 100%,20% 100%,0 50%)}
.program-skins button .skin-chip-3{background:none;border-right:2px dashed var(--chip);border-radius:50%;clip-path:none;width:9px;height:21px}
.program-skins button b{font-size:12px}
.program-live h2{font-size:15px;margin-bottom:8px}
.program-live canvas{width:100%;height:auto;display:block;box-shadow:5px 5px 0 var(--program-ink);background:var(--stage)}
.program-result-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(22px,4vw,62px);align-items:start}
.result-summary{position:relative;min-width:0}
.result-song{display:flex;align-items:center;gap:12px;padding-right:clamp(50px,8vw,130px)}
.result-song>div{width:clamp(50px,6vw,94px);aspect-ratio:1;flex:none;border:1px solid var(--program-ink);box-shadow:3px 3px 0 var(--program-ink)}
.result-song h1{font-size:clamp(20px,2.7vw,43px);line-height:1.05;overflow-wrap:anywhere}
.result-song p{font:11px var(--program-mono);color:var(--program-muted);margin-top:6px}
.result-stamp{position:absolute;right:0;top:3px;width:clamp(57px,9.6vw,142px);aspect-ratio:1;border:5px double var(--vermilion);border-radius:50%;color:var(--vermilion);display:grid;place-items:center;transform:rotate(-9deg);font:900 clamp(28px,6vw,85px) var(--program-title)}
.result-points{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;margin:clamp(18px,4vh,44px) 0 11px}
.result-points strong{font:900 clamp(42px,8vw,138px)/.95 var(--program-num);letter-spacing:-.03em}
.result-points span{font:700 15px var(--program-num);color:var(--program-muted)}
.result-metrics{display:flex;flex-wrap:wrap;gap:10px clamp(15px,2.6vw,38px);padding:10px 0}
.result-metrics div{display:grid;gap:2px}
.result-metrics span{font:700 12px var(--program-serif);color:var(--program-muted)}
.result-metrics b{font:700 clamp(22px,2.4vw,38px) var(--program-num)}
.result-labels{display:flex;gap:7px;flex-wrap:wrap;margin:3px 0 12px}
.result-labels span{border:1px solid var(--program-ink);background:var(--mustard);padding:5px 8px;box-shadow:2px 2px 0 var(--program-ink);font:800 12px var(--program-serif)}
.result-grades h2,.result-charts h2{font-size:15px;margin-bottom:8px}
.result-grades h2 small{font:10px var(--program-mono);color:var(--program-muted);margin-left:6px}
.result-grades>div{display:grid;grid-template-columns:72px 1fr 42px;gap:7px;align-items:center;min-height:25px;font:700 11px var(--program-serif)}
.result-grades>div>i,.result-balance i{height:8px;display:block;background:#21162813}
.result-grades>div>i>b,.result-balance i>b{height:100%;display:block}
.result-grades>div>strong{text-align:right;font:700 16px var(--program-num)}
.result-balance{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:12px;margin:13px 0}
.result-balance i{background:var(--vermilion);height:9px}
.result-balance i>b{background:var(--cobalt)}
.result-charts{display:grid;gap:clamp(12px,2.1vh,23px)}
.result-charts>section{min-width:0;padding:13px 14px;border:1px solid var(--program-ink);background:#F6F0E270}
.result-charts svg{display:block;width:100%;height:auto;max-height:23vh;font:10px var(--program-mono);fill:var(--program-muted)}
.result-charts p{font-size:12px;color:var(--program-muted)}
.program-result .result-annotation{font:17px var(--program-hand);color:var(--vermilion);margin-top:7px}
.program-result .program-buttons{gap:8px}

/* Stage overlays and native controls. */
#panel[data-style=pause]{background:#140D19C7;align-items:safe center;padding:18px}
.program-pause,.program-admission {position:relative;isolation:isolate;background:var(--paper);border:1px solid var(--program-ink);box-shadow:7px 7px 0 #0B070F;max-width:100%}
.program-pause {width:min(680px,100%);padding:20px 24px}
.program-pause header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:2px solid var(--program-ink);padding-bottom:10px}
.program-pause header h1{font-size:clamp(30px,4.8vh,55px)}
.program-pause header small{font:11px var(--program-mono);color:var(--program-muted)}
.program-pause header>span{font:800 14px var(--program-num);border:1px solid var(--vermilion);padding:5px 8px;color:var(--vermilion)}
.program-pause-body{padding:10px 0;max-height:56vh;overflow:auto;scrollbar-width:thin}
.program-pause h2{font-size:16px;margin:7px 0}
.program-section-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;max-height:25vh;overflow:auto;scrollbar-width:thin;padding:2px}
.program-section-list button{display:grid;grid-template-columns:39px minmax(0,1fr) 15px;align-items:center;gap:5px;padding:6px;text-align:left;background:var(--paper-light);color:var(--program-ink);border:1px solid var(--program-rule);font-size:12px}
.program-section-list button.is-current{background:#E8CF83}
.program-section-list time{font:10px var(--program-mono)}
.program-section-list .program-icon{width:14px}
.program-pause .sound-grid{padding:7px 3px;gap:8px 10px}
.program-pause .program-buttons{border-top:1px solid var(--program-rule);padding-top:11px}
.program-pause .arc-practice-apply{background:var(--cobalt);color:white;border:1px solid var(--cobalt)}
#panel[data-style=admission]{background:var(--stage)}
.program-admission{width:min(440px,86vw);padding:24px 30px 28px}
.program-admission h1{font:900 43px var(--program-serif);margin:20px 0 8px}
.program-admission p{color:var(--program-muted);font:12px var(--program-mono)}
body #tools{right:clamp(14px,2vw,32px);top:clamp(15px,3.2vh,34px);bottom:auto;align-items:center}
body #tools button{color:var(--paper-light);background:#211628;border:1px solid #EEE6D38C;border-radius:20px;padding:7px 9px;font-size:11px}
body #tools #pause-button {display:grid;place-items:center;width:34px;height:34px;padding:0}
#toast.visible{background:var(--program-ink);color:var(--paper-light);border:1px solid #E4DAC38F;border-radius:0;box-shadow:4px 4px 0 var(--vermilion)}
body.arc-experience .program-binder,body.arc-experience .program-setlist,body.arc-experience .program-collection-tabs,body.arc-experience .program-search,body.arc-experience .program-pack-links,body.arc-experience #settings-import,body.arc-experience #settings-library{display:none!important}
body.arc-experience .program-sheet{margin-right:0}
body.arc-experience .program-library-main{display:block;max-width:1000px;margin:auto}
body.arc-experience .program-showcase{max-width:940px;margin:auto}
@media(max-width:1100px){
  .program-sheet{padding-inline:24px}
  .program-library-main,.program-library .program-showcase{gap:20px}
  .program-library .program-showcase{grid-template-columns:minmax(0,1fr) minmax(217px,1fr)}
  .program-library .program-track{grid-template-columns:22px 30px minmax(0,1fr) 22px 30px;gap:5px}
  .track-cover{width:30px;height:30px}
  .program-settings-grid{grid-template-columns:minmax(106px,.7fr) minmax(235px,1.45fr) minmax(155px,1fr);gap:17px}
}
@media(max-width:790px){
  .program-sheet{margin-right:37px;padding:17px}
  .program-binder{width:37px}
  .program-page .program-binder button{width:32px;font-size:13px}
  .program-page .program-binder button[aria-current=page],.program-page .program-binder button:hover{width:37px}
  .program-library-main{grid-template-columns:minmax(0,1fr)}
  .program-library .program-track-list{max-height:180px}
  .program-setlist .program-keys{display:none}
  .program-library .program-showcase{grid-template-columns:minmax(0,1fr) minmax(210px,1fr)}
  .program-home-grid{grid-template-columns:minmax(0,1fr)}
  .program-settings-grid{grid-template-columns:115px minmax(0,1fr)}
  .program-live{grid-column:2}
  .program-result-grid{grid-template-columns:minmax(0,1fr)}
  .result-charts svg{max-height:none}
}
@media(max-width:510px){
  .program-library .program-showcase,.program-home-cards,.program-settings-grid {grid-template-columns:minmax(0,1fr)}
  .program-live{grid-column:auto}
  .program-collection-tabs{gap:8px}
  .program-brand span,.program-search,.program-head>time{display:none}
  .program-settings-index nav {grid-template-columns:1fr 1fr;gap:3px}
  .program-section-list{grid-template-columns:1fr}
  .program-pause{padding:14px}
}
@media(prefers-reduced-motion:reduce){
  .program-page *,.program-pause *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.reduce-motion .program-page *,.reduce-motion .program-pause *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
#panel[data-style=paper],#panel[data-style=pause],#panel[data-style=admission]{backdrop-filter:none}
.program-practice .arc-practice-field button,.program-pause .arc-practice-field button{color:var(--program-muted);padding:3px 4px}
.program-practice .arc-practice-field>div,.program-pause .arc-practice-field>div{grid-template-columns:18px minmax(45px,1fr) 18px 15px}
.program-practice .arc-practice-field input,.program-pause .arc-practice-field input{min-width:0;font-size:12px;padding:4px 1px}
@media(max-height:710px) and (min-width:791px){
  .program-library .library-sheet{padding-top:18px;padding-bottom:24px}
  .program-library .program-head{margin-bottom:14px}
  .program-library .program-dstamp{width:48px}
  .program-library .program-best{min-height:58px;padding:7px 10px}
  .program-library .program-best strong{font-size:27px}
  .program-control{margin-top:7px}
  .program-control>label{margin-bottom:3px}
  .program-page .program-segments button{padding-block:5px}
  .program-setup .program-control:last-of-type{margin-bottom:14px}
  .program-library .program-ticket{min-height:55px}
  .program-sleeve{width:min(85%,32vh,400px)}
  .program-density{margin-top:12px}
  .program-density-graph svg{height:70px}
}
#panel .program-pause .arc-practice-apply{background:var(--cobalt)!important;color:white!important;border-color:var(--cobalt)!important;border-radius:0!important}
#panel .program-pause .sound-toggle{color:var(--program-ink)}
#panel .program-pause .sound-toggle input[type=checkbox]{appearance:auto;-webkit-appearance:auto;width:16px;height:16px;min-width:16px;background:none}
.program-pause .sound-grid .arc-choice-trigger{width:100%}

/* Secondary surfaces use the same paper, ink and hard shadow as the pause card. */
.program-overlay {
  position:fixed;
  inset:0;
  display:grid;
  grid-template: minmax(0,1fr) / minmax(0,1fr);
  place-items:center;
  padding:clamp(12px,3vw,26px);
  background:#1B1120B8;
  animation:program-fade .16s ease-out both;
}
.studio-dialog-backdrop.program-overlay, .studio-help-overlay.program-overlay { position:absolute; }
.arc-modal-backdrop { z-index:70; }
.program-dialog {
  max-height:100%;
  min-height:0;
  overflow:auto;
  color:var(--program-ink);
  color-scheme:light;
  background:var(--paper);
  border:1px solid var(--program-ink);
  box-shadow:6px 6px 0 var(--program-ink);
  animation:program-rise .18s ease-out both;
}
.program-dialog button, .program-calibration button {
  color:var(--program-ink);
  background:var(--paper-light);
  border:1px solid var(--program-rule);
  border-radius:0;
  padding:8px 12px;
  font:inherit;
  font-size:13px;
  transition:background .14s, border-color .14s, translate .14s;
}
.program-dialog button:hover:not(:disabled), .program-calibration button:hover:not(:disabled) {
  background:var(--paper-deep);
  border-color:var(--program-ink);
  box-shadow:none;
  transform:none;
}
.program-dialog button:active:not(:disabled), .program-calibration button:active:not(:disabled) {
  box-shadow:none;
  filter:none;
  transform:none;
  translate:0 1px;
}
.program-dialog button:disabled, .program-calibration button:disabled { opacity:.45; cursor:default; }
.program-dialog :is(button,input):focus-visible { outline:2px solid var(--cobalt); outline-offset:2px; }
.program-dialog .program-primary, .program-calibration .program-primary {
  color:var(--paper-light);
  background:var(--program-ink);
  border-color:var(--program-ink);
  font-weight:700;
  box-shadow:3px 3px 0 var(--vermilion);
}
.program-dialog .program-primary:hover:not(:disabled), .program-calibration .program-primary:hover:not(:disabled) {
  color:var(--paper-light);
  background:var(--vermilion);
}
.program-remove-dialog {width:min(100%,460px);padding:clamp(18px,4vw,28px)}
.program-remove-dialog h2{margin:0;font-size:24px}
.program-remove-dialog p{margin:10px 0;line-height:1.5;overflow-wrap:anywhere}
.program-remove-scope{display:flex;gap:8px;margin-top:18px}
.program-remove-scope button{flex:1;font-weight:700}
.program-remove-scope button[aria-pressed=true]{background:var(--paper-deep);border-color:var(--program-ink);box-shadow:inset 0 -2px var(--vermilion)}
.program-remove-dialog .program-remove-backup{color:var(--program-muted);font-size:13px}
.program-remove-status{font-size:13px;color:var(--vermilion)}
.program-remove-dialog footer{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.program-remove-dialog [data-remove-confirm]{background:var(--vermilion);border-color:var(--vermilion);color:white;font-weight:700}
.program-remove-dialog [data-remove-confirm]:hover:not(:disabled){background:var(--program-ink);color:white}
.program-overlay.is-closing { animation:program-fade .16s ease-in reverse both; }
.program-overlay.is-closing .program-dialog { animation:program-rise .16s ease-in reverse both; }
@keyframes program-fade { from{opacity:0} to{opacity:1} }
@keyframes program-rise { from{opacity:0;translate:0 7px} to{opacity:1;translate:0 0} }

.arc-score-dialog { width:min(570px,100%); padding:clamp(16px,3vw,28px); }
.arc-score-dialog header { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; border-bottom:2px solid var(--program-ink); padding-bottom:11px; }
.arc-score-dialog h2 { margin:0; font:900 26px var(--program-serif); }
.arc-score-dialog header p { margin:5px 0 0; font-size:13px; color:var(--program-muted); }
.arc-score-summary { display:flex; gap:18px; align-items:center; padding:17px 0 12px; }
.arc-score-rank {
  display:grid;
  place-items:center;
  width:80px;
  height:80px;
  flex:none;
  border:4px double var(--vermilion);
  border-radius:50%;
  color:var(--vermilion);
  font:900 40px/1 var(--program-title);
  transform:rotate(-8deg);
}
.arc-score-summary strong { display:block; font:900 clamp(30px,7vw,60px)/1 var(--program-num); }
.arc-score-summary span { display:block; margin-top:6px; font-size:13px; color:var(--program-muted); }
.arc-score-context { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:14px; }
.arc-score-context span { background:var(--paper-light); border:1px solid var(--program-rule); padding:4px 7px; font-size:11px; }
.arc-score-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 12px; }
.arc-score-stat { border-top:1px solid var(--program-rule); padding:9px 0; }
.arc-score-stat:nth-child(n+5) { grid-column:span 2; }
.arc-score-stat span { display:block; font-size:11px; color:var(--program-muted); }
.arc-score-stat strong { display:block; margin-top:4px; font:700 22px var(--program-num); overflow-wrap:anywhere; }
.arc-score-date,.arc-score-note { margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--program-muted); }

.program-calibration .program-sheet { margin-right:0; }
.program-calibration .program-head { margin-bottom:20px; }
.cal-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(18px,3.4vw,52px);
  align-items:start;
  max-width:1140px;
  margin:auto;
}
.cal-layout h1 { padding-bottom:9px; margin-bottom:12px; border-bottom:2px solid var(--program-ink); font-size:clamp(27px,4vw,52px); }
.cal-layout p,.cal-result { color:var(--program-muted); font-size:13px; line-height:1.65; }
.cal-count { color:var(--vermilion); font:900 clamp(40px,5vw,70px)/1 var(--program-num); margin:12px 0 4px; }
.cal-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:12px 0; border-block:1px solid var(--program-rule); }
.cal-stat { display:grid; gap:3px; padding:10px 8px; }
.cal-stat+.cal-stat { border-left:1px solid var(--program-rule); }
.cal-stat b { font:700 25px var(--program-num); }
.cal-stat small { color:var(--program-muted); font-size:11px; }
.cal-result { min-height:42px; margin:8px 0; }
.cal-actions { display:flex; flex-wrap:wrap; gap:6px; }
.cal-visual {
  display:block;
  width:100%;
  max-height:54vh;
  aspect-ratio:4/3;
  object-fit:contain;
  background:var(--stage);
  border:1px solid var(--program-ink);
  box-shadow:5px 5px 0 var(--program-ink);
}
.program-calibration .cal-tap { width:100%; margin-top:14px; }
.cal-visual-offset {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 65px;
  gap:6px 10px;
  align-items:center;
  padding:10px 0;
  margin-top:16px;
  border-top:1px solid var(--program-rule);
  font-size:13px;
}
.cal-visual-offset input { width:100%; }
.cal-visual-offset output { text-align:right; font:12px var(--program-mono); }
.cal-visual-offset small { grid-column:1/-1; color:var(--program-muted); font-size:11px; line-height:1.55; }
.boot-screen, .app-error {
  display:grid;
  place-content:center;
  justify-items:center;
  min-height:100%;
  padding:24px;
  background:var(--paper);
  color:var(--program-ink);
  text-align:center;
}
.boot-logo { font:900 62px/1 var(--program-title); }
.boot-logo span { display:block; margin-top:8px; font:800 20px var(--program-serif); }
.boot-screen p,.app-error p { font-size:13px; color:var(--program-muted); }
.app-error button { color:var(--paper-light); background:var(--program-ink); border-radius:0; }

@media(max-width:700px) {
  .cal-layout { grid-template-columns:minmax(0,1fr); }
  .cal-visual { max-height:320px; }
}
@media(prefers-reduced-motion:reduce) {
  .arc-studio *, .arc-choice-popup, .arc-choice-popup *, .program-overlay, .program-overlay * {
    animation:none!important;transition:none!important;
  }
}
.reduce-motion .arc-studio *, .reduce-motion .arc-choice-popup, .reduce-motion .arc-choice-popup *,
.reduce-motion .program-overlay, .reduce-motion .program-overlay * {
  animation:none!important;transition:none!important;
}