/* Midi2Score front end.
   One responsive artifact: an editorial spread on a desktop, a viewport-sized
   shell with a bottom dock on a phone, switching at 900px.
   Design source: the accepted mocks in the design track's shared directory.
   Donors, per the taste corpus: worksinprogress (layout, hairlines), cursor
   (colour, type), gumroad's offset-stack-button (the control construction). */

:root{
  --paper:#F6F3EC; --paper-2:#EFEBE2; --paper-3:#E6E1D4;
  --ink:#23211C; --ink-muted:rgba(35,33,28,.60); --ink-soft:rgba(35,33,28,.74);
  --ink-faint:rgba(35,33,28,.42);
  --rule:rgba(35,33,28,.16); --rule-strong:rgba(35,33,28,.36);
  --accent:#A8412F; --accent-deep:#8E3527; --accent-fg:#F6F3EC;
  --accent-wash:rgba(168,65,47,.07);
  --font-serif:"Spectral","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --text-xs:.6875rem; --text-sm:.8125rem; --text-base:1rem; --text-md:1.125rem;
  --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:1.875rem;
  --text-display:clamp(2.6rem,7vw,3.75rem);
  --leading-tight:1.12; --leading-snug:1.3; --leading-normal:1.55; --leading-relaxed:1.7;
  --tracking-display:-.022em; --tracking-heading:-.014em; --tracking-ui:-.006em;
  --tracking-caps:.11em; --tracking-body:0;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:5.5rem;
  --radius-sm:3px; --plate:3px;
  --weight-regular:400; --weight-medium:500;
  --duration-fast:150ms; --duration-base:420ms;
  --ease-standard:cubic-bezier(.4,0,.2,1); --ease-entrance:cubic-bezier(.16,1,.3,1);
  --container:1160px; --rail:19.5rem;
  --safe-bot:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#15130F; --paper-2:#1C1A15; --paper-3:#26221B;
    --ink:#EDE8DC; --ink-muted:rgba(237,232,220,.62); --ink-soft:rgba(237,232,220,.78);
    --ink-faint:rgba(237,232,220,.42);
    --rule:rgba(237,232,220,.17); --rule-strong:rgba(237,232,220,.34);
    --accent:#E08D72; --accent-deep:#EFA88F; --accent-fg:#15130F;
    --accent-wash:rgba(224,141,114,.09);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-serif); font-size:var(--text-base); font-weight:var(--weight-regular);
  line-height:var(--leading-normal); letter-spacing:var(--tracking-ui);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
.wrap{max-width:var(--container); margin-inline:auto; padding-inline:var(--space-5)}
@media(min-width:900px){ .wrap{padding-inline:var(--space-6)} }
.kicker{font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--ink-muted)}

/* double rule: the title-page device, under the masthead and over the dock */
.rule2{border-top:2px solid var(--rule-strong); position:relative; height:5px}
.rule2::after{content:""; position:absolute; inset:3px 0 auto 0; border-top:1px solid var(--rule)}

.masthead .wrap{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-4); padding-block:var(--space-4)}
.wordmark{font-size:var(--text-lg); letter-spacing:var(--tracking-heading); font-weight:var(--weight-medium)}
.mast-nav{display:flex; align-items:baseline; gap:var(--space-4)}
.mast-nav a{font-family:var(--font-mono); font-size:var(--text-sm); color:var(--ink-muted);
  border-bottom:1px solid transparent;
  transition:color var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard)}
.mast-nav a:hover{color:var(--ink); border-bottom-color:var(--rule-strong)}
.mast-nav a.here{color:var(--ink)}
.mast-nav .flag{color:var(--accent)}
.mast-nav form{display:contents}

/* The account's project is a label, so it gets the corpus's bordered chip. Sign
   out is an action, so it gets the button family at its smallest size — the
   plate is what tells the eye which of the two is pressable. */
.chip{
  font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--ink);
  border:1px solid var(--rule-strong); border-radius:var(--radius-sm);
  padding:var(--space-1) var(--space-2); white-space:nowrap;
  transition:border-color var(--duration-fast) var(--ease-standard);
}
.chip:hover{border-color:var(--ink)}
.btn.mini{
  min-height:0; padding:var(--space-1) var(--space-3);
  font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-caps);
  box-shadow:2px 2px 0 0 var(--ink);
}
.btn.mini:active{transform:translate(2px,2px); box-shadow:0 0 0 0 var(--ink)}
@media (prefers-reduced-motion:reduce){
  .btn.mini:active{transform:none; box-shadow:2px 2px 0 0 var(--ink)}
}
/* the sign-in screen has one column and nothing to navigate to */
.cols.one{grid-template-columns:1fr}
.cols.one > .main{padding-right:0; max-width:26rem}

/* A form is not a ledger: the label sits above its field and the field is full
   width, per the corpus's input rules. The ledger layout the cue screen uses
   would squeeze both of these into the value column. */
.signin{border:1px solid var(--rule-strong); background:var(--paper-2); padding:var(--space-5)}
.signin .row + .row{margin-top:var(--space-4)}
.signin label{
  display:block; margin-bottom:var(--space-2);
  font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--ink-soft);
}
.signin .tin{width:100%; font-size:var(--text-lg); min-height:var(--space-7)}
.signin .action{margin-top:var(--space-5)}

.titleband .wrap{padding-block:var(--space-7) var(--space-6); border-bottom:1px solid var(--rule)}
h1{font-size:var(--text-display); font-weight:300; line-height:var(--leading-tight);
  letter-spacing:var(--tracking-display); margin:var(--space-2) 0 var(--space-3)}
.dek{font-size:var(--text-md); color:var(--ink-muted); max-width:36em; margin:0; font-weight:300}
.later{
  border:1px solid var(--rule-strong); background:var(--paper-2);
  padding:var(--space-3) var(--space-4); margin-top:var(--space-4);
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--ink-muted);
  line-height:var(--leading-relaxed);
}

.cols{display:grid; grid-template-columns:1fr var(--rail); gap:0}
.cols > *{min-width:0}
.cols > .main{padding-block:var(--space-6) var(--space-9); padding-right:var(--space-7)}
.cols > .rail{border-left:1px solid var(--rule); padding:var(--space-6) 0 var(--space-9) var(--space-6)}

/* ── the bounce, and the empty state that precedes it ── */
.bounce{
  border:1px solid var(--rule-strong); background:var(--paper-2);
  padding:var(--space-4) var(--space-5); margin-bottom:var(--space-6);
  transition:border-color var(--duration-fast) var(--ease-standard);
}
.bounce:hover{border-color:var(--ink-faint)}
.bounce-file{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--space-3)}
.bounce-file .name{font-family:var(--font-mono); font-size:var(--text-sm); word-break:break-all}
.bounce-file .swap{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--ink-soft);
  border-bottom:1px solid var(--rule); white-space:nowrap; cursor:pointer; background:none; border-top:0;
  border-left:0; border-right:0; padding:0}
.bounce-file .swap:hover{color:var(--ink); border-bottom-color:var(--rule-strong)}
.readout{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4);
  border-top:1px solid var(--rule); margin-top:var(--space-4); padding-top:var(--space-4)}
.readout div{min-width:0}
.readout .v{font-family:var(--font-mono); font-size:var(--text-md); display:block; letter-spacing:-.01em}
.readout .l{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--ink-soft); display:block; margin-top:2px}

.drop{
  border:1px dashed var(--rule-strong); background:var(--paper-2);
  padding:var(--space-8) var(--space-5); text-align:center; cursor:pointer; display:block; width:100%;
  transition:border-color var(--duration-fast) var(--ease-standard),
             background-color var(--duration-fast) var(--ease-standard);
}
.drop:hover, .drop.over{border-color:var(--accent); background:var(--accent-wash)}
.drop .big{font-size:var(--text-lg); font-weight:300; display:block; letter-spacing:var(--tracking-heading)}
.drop .small{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--ink-soft);
  display:block; margin-top:var(--space-2)}
.drop:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ── fields ── */
.field{border-top:1px solid var(--rule); padding-block:var(--space-5)}
.field:last-of-type{border-bottom:1px solid var(--rule)}
.field-top{display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-3)}
.field-label{font-size:var(--text-md); font-weight:var(--weight-regular); margin:0; letter-spacing:var(--tracking-heading)}
.prov{font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--ink-soft); white-space:nowrap}
.prov.yours{color:var(--accent)}
.value{font-size:var(--text-xl); font-weight:300; letter-spacing:var(--tracking-heading);
  display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap}
.value .qualify{font-family:var(--font-mono); font-size:var(--text-sm); color:var(--ink-muted)}
.note{font-size:var(--text-sm); color:var(--ink-muted); margin:var(--space-3) 0 0; max-width:44em; font-weight:300}
.note.flagged{color:var(--ink); border-left:2px solid var(--accent); padding-left:var(--space-3)}

.tin{
  font-family:var(--font-serif); font-size:var(--text-xl); font-weight:300;
  background:var(--paper); color:var(--ink); border:1px solid var(--rule-strong);
  border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3); min-width:0; width:100%;
  letter-spacing:var(--tracking-heading);
}
.tin:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent)}
@media(max-width:900px){
  .field .tin{width:auto; max-width:11rem; text-align:right; font-size:var(--text-lg)}
  .field select.tin{max-width:12.5rem; font-size:var(--text-sm); text-align:left}
  .signin{padding:var(--space-4)}
  .signin .action{display:none}
}
select.tin{font-family:var(--font-mono); font-size:var(--text-md)}

/* desks: two real tap targets flanking the count */
.desks{display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-1)}
.desk{border:1px solid var(--rule-strong); background:var(--paper);
  display:flex; align-items:stretch; min-width:13.5rem; flex:1 1 13.5rem}
.desk .who{padding:var(--space-3) var(--space-4); font-size:var(--text-md); font-weight:300; flex:1;
  display:flex; align-items:center}
.spin{display:flex; align-items:stretch; border-left:1px solid var(--rule-strong)}
.spin-b{min-width:2.75rem; background:none; border:0; cursor:pointer;
  font-family:var(--font-mono); font-size:var(--text-md); color:var(--ink-soft);
  transition:background-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard)}
.spin-b:hover{color:var(--ink); background:var(--paper-3)}
.spin-b:active{background:var(--paper-3)}
.spin-b:focus-visible{outline:2px solid var(--accent); outline-offset:-3px}
.spin-n{display:flex; align-items:center; justify-content:center; min-width:2.75rem;
  font-family:var(--font-mono); font-size:var(--text-lg); font-variant-numeric:tabular-nums;
  background:var(--accent-wash); color:var(--accent); border-inline:1px solid var(--rule)}

.action{margin-top:var(--space-7); display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4)}
.action .after{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--ink-muted); line-height:1.6}

/* ── buttons: one construction, two fills.
   A zero-blur offset plate models displacement rather than a light source, so the
   control reads identically on paper, in dark mode and at any size; pressing lands
   the face on its plate. From the corpus `offset-stack-button`, moved from hover to
   :active because this is a touch surface. ── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:3.25rem; padding:var(--space-3) var(--space-5); gap:var(--space-2);
  font-family:var(--font-mono); font-size:var(--text-sm); letter-spacing:var(--tracking-ui);
  line-height:var(--leading-snug); text-align:center;
  background:var(--accent); color:var(--accent-fg);
  border:1px solid var(--ink); border-radius:var(--radius-sm);
  box-shadow:var(--plate) var(--plate) 0 0 var(--ink);
  cursor:pointer;
  transition:transform var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
             background-color var(--duration-fast) var(--ease-standard);
}
.btn:hover{background:var(--accent-deep)}
.btn:active{transform:translate(var(--plate),var(--plate)); box-shadow:0 0 0 0 var(--ink)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.btn.ghost{background:var(--paper); color:var(--ink)}
.btn.ghost:hover{background:var(--paper-3)}
.btn[disabled]{opacity:.5; cursor:not-allowed}
@media (prefers-reduced-motion:reduce){
  .btn{transition:background-color var(--duration-fast) var(--ease-standard)}
  .btn:active{transform:none; box-shadow:var(--plate) var(--plate) 0 0 var(--ink); background:var(--accent-deep)}
  .btn.ghost:active{background:var(--paper-3)}
}

/* ── delivered ── */
.collect{border:1px solid var(--rule-strong); background:var(--paper-2);
  padding:var(--space-5); display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-6)}
.collect .what{min-width:0}
.collect .file{font-family:var(--font-mono); font-size:var(--text-md); display:block; word-break:break-all}
.collect .meta{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--ink-soft); display:block; margin-top:var(--space-1)}
.summary{font-size:var(--text-md); font-weight:300; max-width:40em; margin:0 0 var(--space-7)}
.summary b{font-weight:var(--weight-regular)}

.family{font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--ink-muted);
  padding-block:var(--space-4) var(--space-2); border-bottom:1px solid var(--rule-strong)}
.stave{display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:var(--space-4);
  border-bottom:1px solid var(--rule); padding-block:var(--space-3)}
.stave .name{font-size:var(--text-md); font-weight:300; letter-spacing:var(--tracking-ui)}
.stave .from{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--ink-soft); display:block; margin-top:1px}
.stave .n{font-family:var(--font-mono); font-size:var(--text-md); font-variant-numeric:tabular-nums}
.stave.marked{border-left:2px solid var(--accent); padding-left:var(--space-3);
  margin-left:calc(-1 * var(--space-3) - 2px)}
.stave.marked .n{color:var(--accent)}

.meters{display:flex; overflow-x:auto; border:1px solid var(--rule-strong); margin-top:var(--space-6)}
.meters div{font-family:var(--font-mono); font-size:var(--text-sm); padding:var(--space-3) var(--space-4);
  border-right:1px solid var(--rule); white-space:nowrap; flex:0 0 auto}
.meters div:last-child{border-right:0}
.meters div span{display:block; font-size:var(--text-xs); color:var(--ink-soft)}
.meters div.marked{color:var(--accent); background:var(--accent-wash)}
.meters div.marked span{color:var(--accent)}

/* ── decisions, on the delivered cue and in the queue ── */
.look{margin-top:var(--space-8)}
.look > h2{font-size:var(--text-lg); font-weight:var(--weight-regular);
  letter-spacing:var(--tracking-heading); margin:0 0 var(--space-2)}
.look > .sub{font-size:var(--text-sm); color:var(--ink-muted); margin:0 0 var(--space-5);
  font-weight:300; max-width:40em}
.item{border-top:1px solid var(--rule-strong); padding-block:var(--space-5)}
.item:last-child{border-bottom:1px solid var(--rule-strong)}
.item .claim{font-size:var(--text-md); font-weight:300; margin:0 0 var(--space-2); letter-spacing:var(--tracking-ui)}
.item .claim strong{font-weight:var(--weight-medium); color:var(--accent)}
.item .why{font-size:var(--text-sm); color:var(--ink-muted); margin:0; max-width:44em; font-weight:300}
.item .ev{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--ink-soft);
  display:block; margin-top:var(--space-2)}
.choices{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-4)}
.choices form{display:contents}

.cue-band{font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--ink-muted);
  padding-block:var(--space-5) var(--space-2); border-bottom:1px solid var(--rule-strong);
  display:flex; justify-content:space-between; gap:var(--space-4)}
.cue-band:first-child{padding-top:0}
.pager{display:none; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--rule-strong); padding-block:var(--space-3) var(--space-2)}
.pager .where{font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--ink-muted)}
.pager .step{display:flex; gap:var(--space-4)}
.pager .step button{background:none; border:0; cursor:pointer; padding:0 var(--space-1);
  font-family:var(--font-mono); font-size:var(--text-md); color:var(--ink-soft);
  transition:color var(--duration-fast) var(--ease-standard)}
.pager .step button:hover{color:var(--ink)}
.consequence{display:none; margin:auto 0 0; padding-top:var(--space-4);
  border-top:1px solid var(--rule); font-family:var(--font-mono); font-size:var(--text-xs);
  color:var(--ink-soft); line-height:var(--leading-relaxed)}
.closing{margin-top:var(--space-7)}
.closing p{font-size:var(--text-md); font-weight:300; max-width:40em; margin:0}
.closing p em{font-style:italic}

/* ── rail ── */
.rail h2{font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--ink-muted); font-weight:var(--weight-regular);
  margin:0 0 var(--space-4)}
.rail h2 + .rail-sub{font-size:var(--text-sm); color:var(--ink-muted);
  margin:calc(-1 * var(--space-3)) 0 var(--space-4); font-weight:300}
.style-row{border-top:1px solid var(--rule); padding-block:var(--space-3)}
.style-row:last-of-type{border-bottom:1px solid var(--rule)}
.style-row .what{font-size:var(--text-base); font-weight:300; display:block; letter-spacing:var(--tracking-ui)}
.style-row .src{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--ink-soft);
  display:block; margin-top:2px}
.rail-foot{font-size:var(--text-sm); color:var(--ink-muted); margin-top:var(--space-4); font-weight:300}
.rail-block{margin-top:var(--space-7)}
.rail a.lnk{border-bottom:1px solid var(--rule)}
.rail a.lnk:hover{border-bottom-color:var(--rule-strong)}

.foot{border-top:1px solid var(--rule); padding-block:var(--space-5) var(--space-7)}
.foot p{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--ink-soft); margin:0}

.err{border-left:2px solid var(--accent); background:var(--accent-wash);
  padding:var(--space-3) var(--space-4); margin-bottom:var(--space-5)}
.err b{font-weight:var(--weight-medium); color:var(--accent)}
.err p{margin:var(--space-1) 0 0; font-size:var(--text-sm); color:var(--ink-muted); font-weight:300}

/* ── the dock: mobile only ── */
.dock{display:none}
.dock-action{display:flex; flex-direction:column; align-items:stretch; gap:var(--space-2);
  padding:var(--space-4) var(--space-4) var(--space-3)}
.dock-action.pair{flex-direction:row; gap:var(--space-3); padding:var(--space-4)}
.dock-action.pair .btn{flex:1 1 50%; white-space:normal}
.dock-note{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--ink-soft); text-align:center}
.tabs{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule);
  background:var(--paper-2)}
.tabs.four{grid-template-columns:repeat(4,1fr)}
.tab{font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--ink-soft);
  background:none; border:0; border-top:2px solid transparent; margin-top:-1px;
  min-height:3.5rem; padding:var(--space-3) var(--space-1) calc(var(--space-3) + var(--safe-bot));
  text-align:center; cursor:pointer;
  transition:color var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard)}
.tabs.four .tab{letter-spacing:.07em}
.tab.on{color:var(--ink); border-top-color:var(--accent); background:var(--paper)}
.tab:focus-visible{outline:2px solid var(--accent); outline-offset:-3px}
.tab .flag{color:var(--accent)}

/* ── mobile app shell: the page fits the viewport, only the stage moves ── */
@media(max-width:900px){
  html{height:100%}
  body{height:100dvh; overflow:hidden; display:flex; flex-direction:column}
  .wrap{padding-inline:var(--space-4)}
  .masthead .wrap{padding-block:var(--space-3)}
  .titleband .wrap{padding-block:var(--space-2) var(--space-3); border-bottom:1px solid var(--rule)}
  h1{font-size:var(--text-2xl); margin:2px 0 var(--space-1)}
  .dek{display:none}
  .dek.facts{display:block; font-size:var(--text-sm)}
  .wide{display:none}
  .later{margin-top:var(--space-3); padding:var(--space-2) var(--space-3)}
  .stage{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    display:flex; flex-direction:column}
  .stage > .wrap{flex:1; display:flex; flex-direction:column; min-height:0}
  .cols{flex:1; display:flex; flex-direction:column}
  .mast-nav{gap:var(--space-3)}
  .cols > .main{padding:var(--space-4) 0}
  .cols > .rail{border-left:0; padding:var(--space-4) 0}
  .panel{display:none}
  .panel.on{display:block}
  .panel[data-panel="open"].on{display:flex; flex-direction:column; flex:1}
  .consequence{display:block}
  .action{display:none}
  .foot{display:none}
  .dock{display:block; background:var(--paper); flex:0 0 auto;
    box-shadow:0 -10px 28px rgba(35,33,28,.055)}
  .bounce{padding:var(--space-3); margin-bottom:var(--space-3)}
  .readout{gap:var(--space-2); margin-top:var(--space-2); padding-top:var(--space-2)}
  .readout .v{font-size:var(--text-base)}
  .drop{padding:var(--space-7) var(--space-4)}
  .field{display:grid; grid-template-columns:1fr auto; align-items:baseline;
    gap:var(--space-3); padding-block:var(--space-2)}
  .field-top{display:block; margin:0}
  .field-label{font-size:var(--text-base)}
  .prov{display:block; margin-top:1px}
  .value{font-size:var(--text-lg); justify-content:flex-end}
  .field > .note{display:none}
  .field.block{display:block}
  .field.block > .note{display:block; margin-top:var(--space-3)}
  .desks{gap:var(--space-2)}
  .desk{min-width:0; flex:1 1 100%; min-height:var(--space-7)}
  .desk .who{padding:var(--space-2) var(--space-3); font-size:var(--text-base)}
  .collect{display:block; padding:var(--space-3) var(--space-4); margin-bottom:var(--space-4)}
  .collect .btn{display:none}
  .summary{font-size:var(--text-base); margin-bottom:var(--space-3); line-height:var(--leading-snug)}
  .meters{margin-top:var(--space-3)}
  .meters div{padding:var(--space-2) var(--space-3)}
  .family{padding-block:var(--space-3) var(--space-1)}
  .stave{padding-block:var(--space-2)}
  .stave .name, .stave .n{font-size:var(--text-base)}
  .look{margin-top:0}
  .look > h2{font-size:var(--text-md)}
  .look > .sub{margin-bottom:var(--space-3); font-size:var(--text-xs)}
  .item{padding-block:var(--space-3); border-bottom:0}
  .item .why{line-height:var(--leading-snug)}
  .item .ev{margin-top:var(--space-1)}
  .choices{gap:var(--space-2); margin-top:var(--space-3)}
  .choices .btn{flex:1 1 100%}
  .style-row, .settled{padding-block:var(--space-2)}
  .rail h2{margin-bottom:var(--space-2)}
  .rail-foot{font-size:var(--text-xs); margin-top:var(--space-3)}
  .rail-block{margin-top:var(--space-5)}
  .cue-band{display:none}
  .pager{display:flex}
  .queue-item{display:none}
  .queue-item .choices{display:none}
  .queue-item.now{display:block}
  .closing{display:none}
}
@media(min-width:901px){ .rule2.dockrule{display:none} }

@media (prefers-reduced-motion:no-preference){
  @keyframes panel-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
  @media(max-width:900px){ .flash{animation:panel-in var(--duration-base) var(--ease-entrance) both} }
}