/* Atmosphere layer: reading sizes, one light per room, and the light table.
   Loaded last so it can correct the earlier layers without editing them. */

/* ---------------------------------------------------------------------------
   01 - One light per room
   Every room carries its own accent and its own wash of light. The accent
   reaches the fixed chrome through body[data-room] and the room itself through
   .area-*, so a room keeps its colour while it slides past during a travel.
   All accents stay pale enough to carry small type on the dark ground.
--------------------------------------------------------------------------- */
body[data-room="mixes"],.area-mixes{
  --gold:#dfc77d;--accent-strong:#f3e0a8;--accent-dim:#8d7a48;
  --line:#463b22;--wash-a:#5a441f7a;--wash-b:#2a2a1740}
body[data-room="photos"],.area-photos{
  --gold:#93cbc1;--accent-strong:#c6e9e1;--accent-dim:#4d7d74;
  --line:#28483f;--wash-a:#10574478;--wash-b:#14303840}
body[data-room="portfolio"],.area-portfolio{
  --gold:#a8cbee;--accent-strong:#dcecfb;--accent-dim:#5b7b9c;
  --line:#2c3e55;--wash-a:#1a466f78;--wash-b:#16233640}
body[data-room="notes"],.area-notes{
  --gold:#b7a9e0;--accent-strong:#dcd3f7;--accent-dim:#6d629e;
  --line:#332d4d;--wash-a:#33246b6e;--wash-b:#1d1a3340}
body[data-room="about"],.area-about{
  --gold:#e3a184;--accent-strong:#f6cbb6;--accent-dim:#8d5d47;
  --line:#4d3327;--wash-a:#67301c7a;--wash-b:#341d1640}

/* The room tints every rule, every scrollbar and the seam along the sidebar,
   so the change of light is felt before any single element is read. */
.area{scrollbar-color:var(--accent-dim) transparent}
.sidebar{border-right-color:var(--accent-dim)}

/* The wash sits on the scroll container, so it behaves like a lamp in the room
   instead of a pattern that scrolls away with the content. */
.area{
  background:
    radial-gradient(115% 75% at 72% -8%,var(--wash-a),transparent 60%),
    radial-gradient(90% 65% at 5% 108%,var(--wash-b),transparent 68%);
}
body.regal{
  background:
    radial-gradient(75% 55% at 50% 0%,var(--wash-a,#40331a5c),transparent 70%),
    var(--bg);
  /* body's overflow:hidden is propagated to the viewport, so body never became
     a block formatting context and #main's 103px top margin on phones
     collapsed straight through it - the room heading ended up underneath the
     fixed bar. flow-root gives body the context the margin needs. */
  display:flow-root;
}

/* The chrome follows the room without drawing attention to the change. */
.sidebar,.sidebar nav a,.area-controls button{transition:color .45s ease,border-color .45s ease}
.sidebar nav a.active:before{transition:background-color .45s ease}

/* ---------------------------------------------------------------------------
   02 - Reading sizes
   The old scale jumped straight from a 46px headline to 13px body copy. These
   values close that gap; monospace needs roughly a point more than a sans to
   read with the same ease.
--------------------------------------------------------------------------- */
body.regal{font-size:15px;line-height:1.65}

.room-header h1{letter-spacing:-1.4px}
.room-header p:last-child{font-size:16px;line-height:1.55;color:#aaa897;max-width:46ch}
.eyebrow{font-size:11px;letter-spacing:2.2px}
/* Tinted by the room, still above 4.5:1 against the ground at this opacity. */
.room-number{font-size:11px;color:var(--gold);opacity:.62}

.sidebar .intro{font-size:13px;color:#a8a695;line-height:1.65}
.sidebar nav a{font-size:14px;color:#b0ad9e}
.sidebar nav a span{font-size:11px;color:#8b8a7d}
.coordinate{font-size:11px}
.coordinate span{font-size:11px;color:#98967f}
.key-hint span{font-size:11px;color:#9b9584}
.edition,.editor-link{font-size:11px;color:#949081}

.collection-head,.collection-head .eyebrow{font-size:11px}
.collection-head>span{color:#a5a08b}
.record-date{font-size:11px}
.cover-edition{font-size:9px}
.listening-note p{font-size:14px}
.listening-note p span{font-size:12px;color:#a09d8b}
.discovery{font-size:12px;color:#a9a694;padding-left:32px}
.room-footer{font-size:11px;color:#97937f}

.camera-tip{font-size:13px;color:#a7a493}
.photo-caption{font-size:15px;color:#c2bcaa}
.camera-top,.screen-overlay,.screen-bottom{font-size:10px}
.camera-brand{font-size:10px}

.notes-layout aside{font-size:14px;color:#a9a493}
.notes-feed time{font-size:12px}
.permalink{font-size:11px;color:#97927f}

.about-links{font-size:12px;color:#9e9988}
.text-link{font-size:13px}

.detail-meta{font-size:13px}
.external-player p{font-size:12px}
.external-player a{font-size:12px}
.primary-button{font-size:13px}
.record-info ol{font-size:13px}
.empty-message{font-size:13px}
.image-dialog figcaption{font-size:13px}
.records-shelf:before{font-size:9px}
.record.is-out:after{font-size:11px}
.transit-label small{font-size:10px}
.preview-notice{font-size:11px}

/* A measure for the long-form rooms; 19px across a whole desk is a long line. */
.notes-feed p,.about-text p{max-width:62ch}

/* ---------------------------------------------------------------------------
   03 - The work table
   The portfolio is a work table in the studio, drawn in the same pixel hand
   as the shelf: grey linoleum in an oak rim, seen a little from the front so
   its edge and legs show. Borderless prints lie on it, with what ends up on
   such a table around them - a music player and in-ears, a camera, SD cards,
   a coffee, a pencil,
   and a loupe that the mouse picks up to look at the prints (worktable.js).
   The grey stays neutral on purpose: it is the surround prints are judged
   against, so it leaves the colours in the photographs alone.
--------------------------------------------------------------------------- */
.work-table{
  --u:1.5px;
  position:relative;
  margin:36px 0 calc(26 * var(--u) + 26px);
}
.table-top{
  position:relative;
  border:calc(8 * var(--u)) solid #9c7a52;
  border-image:url('pixel-art/table-edge.svg') 8 / calc(8 * var(--u)) round;
  background:url('pixel-art/table-linoleum.svg') 0 0 / calc(24 * var(--u)) repeat,#4a4b48;
  image-rendering:pixelated;
}
.table-apron{
  position:relative;
  height:calc(11 * var(--u));
  background:url('pixel-art/table-apron.svg') 0 0 / calc(64 * var(--u)) 100% repeat-x;
  image-rendering:pixelated;
}
.table-apron i{
  position:absolute;top:100%;width:calc(12 * var(--u));height:calc(26 * var(--u));
  background:url('pixel-art/table-leg.svg') 0 0 / 100% 100%;image-rendering:pixelated;
}
.table-apron i:first-child{left:calc(14 * var(--u))}
.table-apron i:last-child{right:calc(14 * var(--u))}
/* Its shadow on the floor, in the hard pixel shadows the shelf uses. */
.table-apron:after{
  content:'';position:absolute;left:calc(8 * var(--u));right:calc(6 * var(--u));
  top:calc(100% + 26 * var(--u) - 2px);height:calc(4 * var(--u));background:#0000004d;
}

/* Things lying on the table. Each sprite is drawn on a 1-unit grid. */
.prop{
  display:block;flex:none;
  width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));
  background:var(--img) 0 0 / 100% 100% no-repeat;
  image-rendering:pixelated;
  filter:drop-shadow(calc(2 * var(--u)) calc(2 * var(--u)) 0 #00000059);
}
/* Things with height are seen from above at about 55 degrees, the way the
   prints are looked at: tops first, a little of their fronts. All of them
   share one scale, about 0.65 px per mm (tests/table-sprites.py). */
.prop-camera{--w:94;--h:72;--img:url('pixel-art/table-camera.svg')}
.prop-cup{--w:104;--h:107;--img:url('pixel-art/table-cup.svg');position:relative}
.prop-player{--w:124;--h:86;--img:url('pixel-art/table-player.svg')}
.prop-sd-a{--w:19;--h:21;--img:url('pixel-art/table-sd-a.svg')}
.prop-sd-b{--w:19;--h:21;--img:url('pixel-art/table-sd-b.svg')}
.prop-pencil{--w:124;--h:15;--img:url('pixel-art/table-pencil.svg')}
.prop-loupe{--w:88;--h:46;--img:url('pixel-art/table-loupe-rest.svg')}
.prop-ring{--w:62;--h:30;--img:url('pixel-art/table-ring.svg');filter:none}

.table-props{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding:0 calc(8 * var(--u));
}
.table-props-top{padding-top:calc(7 * var(--u))}
.table-props-bottom{align-items:center;padding-top:6px;padding-bottom:calc(8 * var(--u))}
.table-corner{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
/* Two cards, one half on top of the other. */
.table-cards{display:flex;align-items:flex-end;margin-bottom:calc(3 * var(--u))}
.table-cards .prop-sd-b{margin:0 0 calc(-5 * var(--u)) calc(-7 * var(--u))}
.table-coffee{display:flex;align-items:flex-end}
.table-coffee .prop-ring{margin:0 calc(-4 * var(--u)) calc(-1 * var(--u)) 0}

/* Masking tape with the table's label on it. */
.table-tape{
  display:inline-block;padding:calc(3 * var(--u)) calc(5 * var(--u));
  background:#d8cfae;color:#3f3b31;
  font-size:10px;letter-spacing:1.6px;line-height:1.2;text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,calc(100% - 3px) 25%,100% 50%,calc(100% - 3px) 75%,100% 100%,0 100%,3px 75%,0 50%,3px 25%);
}
/* Pencilled onto the table next to the pencil. */
.lt-count{font-size:11px;color:#b9b6ab;letter-spacing:.2px}

/* Steam off the coffee, only while the site is allowed to move. */
.prop-steam{
  position:absolute;left:calc(33 * var(--u));bottom:calc(100% - 41 * var(--u));
  width:calc(30 * var(--u));height:calc(40 * var(--u));
  background:url('pixel-art/table-steam.svg') 0 0 / 100% 100%;image-rendering:pixelated;
  opacity:0;
}
.motion-enabled .area-portfolio .prop-steam{animation:table-steam 3.2s steps(8,end) infinite}
@keyframes table-steam{
  0%{opacity:0;transform:translateY(calc(3 * var(--u)))}
  30%{opacity:.9}
  100%{opacity:0;transform:translateY(calc(-8 * var(--u)))}
}

/* The prints: borderless, flat on the linoleum. */
.area-portfolio .portfolio-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  align-items:start;
  margin:0;
  padding:calc(11 * var(--u)) calc(8 * var(--u)) calc(5 * var(--u));
  background:none;box-shadow:none;
}
.area-portfolio .portfolio-item,
.area-portfolio .portfolio-item:nth-child(3n+2),
.area-portfolio .portfolio-item:nth-child(even){
  padding:0;background:none;border:0;
  cursor:zoom-in;
  transition:transform .15s steps(3,end);
}
/* Prints are 3:2 like the photographs; a portrait print lies upright at the
   same height as its neighbours instead of being cropped to landscape. */
.area-portfolio .portfolio-item img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border:0;
  box-shadow:calc(2 * var(--u)) calc(2 * var(--u)) 0 #0000005c;
  transition:box-shadow .15s steps(3,end);
  image-rendering:auto;
  /* Photographs show exactly as they were made, hovered or not. */
  filter:none;
  /* Laid down by hand: each lies a little off square, differently on every
     visit (--tilt, up to 2.5 degrees either way, index.php). */
  transform:rotate(var(--tilt,0deg));
}
/* Picking one up lifts it off the table. */
.area-portfolio .portfolio-item:is(:hover,:focus-visible,.is-lifted){transform:translate(calc(-2 * var(--u)),calc(-2 * var(--u)))}
.area-portfolio .portfolio-item:is(:hover,:focus-visible,.is-lifted) img{box-shadow:calc(4 * var(--u)) calc(4 * var(--u)) 0 #0000004d}
.area-portfolio .portfolio-item.is-portrait img{width:calc(100% * 4 / 9);aspect-ratio:2/3;margin:0 auto}
.area-portfolio .portfolio-item:focus-visible{outline:2px solid #e8e4d6;outline-offset:6px}

/* The loupe in the hand. The lens shows what lies under it, enlarged. */
.table-loupe{
  position:absolute;left:0;top:0;z-index:4;
  width:calc(136 * var(--u));height:calc(136 * var(--u));
  pointer-events:none;visibility:hidden;
}
.table-loupe:after{
  content:'';position:absolute;inset:0;
  background:url('pixel-art/table-loupe.svg') 0 0 / 100% 100%;image-rendering:pixelated;
  filter:drop-shadow(calc(3 * var(--u)) calc(3 * var(--u)) 0 #00000059);
}
.loupe-lens{
  position:absolute;left:calc(5 * var(--u));top:calc(5 * var(--u));
  width:calc(80 * var(--u));height:calc(80 * var(--u));
  background:#4a4b48;overflow:hidden;
  clip-path:polygon(57.5% 0%,57.5% 1.25%,63.75% 1.25%,63.75% 2.5%,67.5% 2.5%,67.5% 3.75%,70% 3.75%,70% 5%,72.5% 5%,72.5% 6.25%,75% 6.25%,75% 7.5%,77.5% 7.5%,77.5% 8.75%,78.75% 8.75%,78.75% 10%,81.25% 10%,81.25% 11.25%,82.5% 11.25%,82.5% 12.5%,83.75% 12.5%,83.75% 13.75%,85% 13.75%,85% 15%,86.25% 15%,86.25% 16.25%,87.5% 16.25%,87.5% 17.5%,88.75% 17.5%,88.75% 18.75%,90% 18.75%,90% 21.25%,91.25% 21.25%,91.25% 22.5%,92.5% 22.5%,92.5% 25%,93.75% 25%,93.75% 27.5%,95% 27.5%,95% 30%,96.25% 30%,96.25% 32.5%,97.5% 32.5%,97.5% 36.25%,98.75% 36.25%,98.75% 42.5%,100% 42.5%,100% 57.5%,98.75% 57.5%,98.75% 63.75%,97.5% 63.75%,97.5% 67.5%,96.25% 67.5%,96.25% 70%,95% 70%,95% 72.5%,93.75% 72.5%,93.75% 75%,92.5% 75%,92.5% 77.5%,91.25% 77.5%,91.25% 78.75%,90% 78.75%,90% 81.25%,88.75% 81.25%,88.75% 82.5%,87.5% 82.5%,87.5% 83.75%,86.25% 83.75%,86.25% 85%,85% 85%,85% 86.25%,83.75% 86.25%,83.75% 87.5%,82.5% 87.5%,82.5% 88.75%,81.25% 88.75%,81.25% 90%,78.75% 90%,78.75% 91.25%,77.5% 91.25%,77.5% 92.5%,75% 92.5%,75% 93.75%,72.5% 93.75%,72.5% 95%,70% 95%,70% 96.25%,67.5% 96.25%,67.5% 97.5%,63.75% 97.5%,63.75% 98.75%,57.5% 98.75%,57.5% 100%,42.5% 100%,42.5% 98.75%,36.25% 98.75%,36.25% 97.5%,32.5% 97.5%,32.5% 96.25%,30% 96.25%,30% 95%,27.5% 95%,27.5% 93.75%,25% 93.75%,25% 92.5%,22.5% 92.5%,22.5% 91.25%,21.25% 91.25%,21.25% 90%,18.75% 90%,18.75% 88.75%,17.5% 88.75%,17.5% 87.5%,16.25% 87.5%,16.25% 86.25%,15% 86.25%,15% 85%,13.75% 85%,13.75% 83.75%,12.5% 83.75%,12.5% 82.5%,11.25% 82.5%,11.25% 81.25%,10% 81.25%,10% 78.75%,8.75% 78.75%,8.75% 77.5%,7.5% 77.5%,7.5% 75%,6.25% 75%,6.25% 72.5%,5% 72.5%,5% 70%,3.75% 70%,3.75% 67.5%,2.5% 67.5%,2.5% 63.75%,1.25% 63.75%,1.25% 57.5%,0% 57.5%,0% 42.5%,1.25% 42.5%,1.25% 36.25%,2.5% 36.25%,2.5% 32.5%,3.75% 32.5%,3.75% 30%,5% 30%,5% 27.5%,6.25% 27.5%,6.25% 25%,7.5% 25%,7.5% 22.5%,8.75% 22.5%,8.75% 21.25%,10% 21.25%,10% 18.75%,11.25% 18.75%,11.25% 17.5%,12.5% 17.5%,12.5% 16.25%,13.75% 16.25%,13.75% 15%,15% 15%,15% 13.75%,16.25% 13.75%,16.25% 12.5%,17.5% 12.5%,17.5% 11.25%,18.75% 11.25%,18.75% 10%,21.25% 10%,21.25% 8.75%,22.5% 8.75%,22.5% 7.5%,25% 7.5%,25% 6.25%,27.5% 6.25%,27.5% 5%,30% 5%,30% 3.75%,32.5% 3.75%,32.5% 2.5%,36.25% 2.5%,36.25% 1.25%,42.5% 1.25%,42.5% 0%);
}
.work-table.is-looking .table-loupe{visibility:visible}
.work-table.is-looking .prop-loupe{visibility:hidden}
.work-table.is-looking .table-top,.work-table.is-looking .portfolio-item{cursor:none}
/* The copy of the table top inside the lens (worktable.js), enlarged from its corner. */
.lens-copy{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.work-table.is-landing .table-top,.work-table.is-landing .portfolio-item{cursor:auto}
/* Scaled round the lens centre while it glides back to its place. */
.table-loupe{transform-origin:calc(45 * var(--u)) calc(45 * var(--u))}

/* ---------------------------------------------------------------------------
   04 - The notebook
   notes.txt used to be a green terminal, which had nothing to do with the
   FIELD NOTES book standing on the shelf. It is that book now: aged ruled
   paper, a stack of pages showing at the edges, a ribbon, and register tabs
   cut into the top edge - one per year, running from red through orange to
   yellow.
--------------------------------------------------------------------------- */
.notebook-room{margin:30px 0 14px;position:relative}

.notebook-tabs{display:flex;gap:7px;padding-left:44px;flex-wrap:wrap}
.notebook-tab{
  font-size:12px;letter-spacing:1.4px;
  padding:9px 17px 13px;color:#2f2a1e;
  border-radius:3px 3px 0 0;
  box-shadow:inset 0 2px 0 #ffffff5e,0 -3px 7px #00000059;
  transform:translateY(4px);
  transition:transform .18s ease,filter .18s ease;
}
/* From red for the newest year through orange to yellow for the oldest
   (--along, 0 to 1, index.php). Doubled class: the page-wide button reset in
   room.css would otherwise win. */
.notebook-tabs .notebook-tab{background:hsl(calc(4deg + 44deg * var(--along,0)) 66% 54%)}
.notebook-tab:is(:hover,:focus-visible),.notebook-tab.is-open{
  transform:translateY(-2px);color:#2f2a1e;filter:brightness(1.09);
  /* Grows downwards as far as it rises, so it still tucks under the page. */
  padding-bottom:19px;margin-bottom:-6px}

.notebook-page{
  position:relative;
  padding:36px 42px 42px;
  border:1px solid #b6aa88;
  /* Every vertical measure in the feed below is a multiple of --rule, so the
     text does sit on the lines. room.js measures the first baseline and puts
     --rule-offset under it; without JS the rules simply land wherever they
     land, which is what ruled paper did before anyone wrote on it. */
  --rule:32px;
  background:
    repeating-linear-gradient(0deg,transparent 0 31px,#cec2a4 31px 32px),
    linear-gradient(105deg,#e7dfc8,#f4eddf 18%,#f1e9d6 60%,#e5dcc3);
  background-position:0 var(--rule-offset,0),0 0;
  /* The pages underneath, then the book's own shadow on the desk. */
  box-shadow:
    0 2px 0 #d9ceb1,0 4px 0 #b6aa88,0 6px 0 #d5caad,0 8px 0 #a89c7c,
    0 28px 48px -18px #000a;
}
/* The ribbon, hanging out of the top edge. */
.notebook-page:after{
  content:'';position:absolute;top:0;right:58px;width:13px;height:94px;
  background:linear-gradient(#b34c38,#8d392a);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 83%,0 100%);
  box-shadow:1px 0 4px #00000073;
}
/* A pale accent would disappear on paper. */
.notebook-page :focus-visible{outline-color:#3b3121}

.area-notes .notes-layout{grid-template-columns:190px minmax(0,1fr);gap:46px;padding-top:0}
.area-notes .notes-layout aside{color:#5f563f;font-size:14px}
.area-notes .notes-layout aside .gold{
  display:inline-block;color:#463f2c;background:#d8ceaf;
  border:1px solid #b0a281;padding:5px 10px;font-size:12px;letter-spacing:.6px;
  box-shadow:1px 1px 0 #0000001f;
}
.area-notes .notes-layout aside p{color:#655b44;margin-top:16px;line-height:32px}
.area-notes .blinking{display:none}

/* The margin rule of a ruled notebook: the fold, then the faint red line. */
.area-notes .notes-feed{position:relative;padding-left:38px}
.area-notes .notes-feed:before{
  content:'';position:absolute;left:0;top:-36px;bottom:-42px;width:1px;
  background:#c2b698;box-shadow:4px 0 0 #cc9084a6;
}
/* On ruled paper a blank line separates entries, not a drawn rule. Every
   measure here is a multiple of 32 so nothing walks off the grid. */
.area-notes .notes-feed article{border-top:0;padding:0 0 32px}
.area-notes .notes-feed article+article{border-top:0;padding-top:32px}
.area-notes .notes-feed time{display:block;line-height:32px;margin:0;color:#706545;font-size:12px;letter-spacing:1px}
.area-notes .notes-feed h2{color:#241f16;font-size:23px;line-height:32px;margin:0}
.area-notes .notes-feed p{color:#3a3427;font-size:18px;line-height:32px;margin:0;max-width:56ch}
/* Photographs read as prints taped onto the page. Their height is whatever the
   photograph is; room.js gives back the remainder underneath. */
.area-notes .notes-feed a[data-note-image]{display:block;line-height:0;margin:0 0 32px}
.area-notes .notes-feed img{
  border:6px solid #fbf8ef;max-height:384px;margin:0;
  box-shadow:0 5px 14px -5px #4a412c9c;
}
.area-notes .permalink{display:block;line-height:32px;color:#8b8063;font-size:11px}
.area-notes .permalink:hover{color:#56482a}

/* ---------------------------------------------------------------------------
   05 - The camera
   A bigger body means bigger photographs. The width is capped against the
   viewport height as well, so the device still fits on a laptop screen.
--------------------------------------------------------------------------- */
.photo-stage{max-width:min(1240px,112vh);padding:22px 0 10px}
.area-photos .camera-back{padding:16px 18px 12px}
.area-photos .camera-rear{gap:20px}
.area-photos .camera-screen{width:86%}
.area-photos .camera-controls{width:13%}
/* The back in the silver of the camera on the shelf and the table, not green.
   Dark controls as on the real thing, and a screen that is a screen: very dark
   anthracite, lit only where the picture fills it. */
.area-photos .camera-back{
  border-color:#cfcdc5;
  background:repeating-linear-gradient(0deg,#a4a29b 0 2px,#9e9c95 2px 4px);
  box-shadow:5px 0 #3b3a37,-5px 0 #3b3a37,0 5px #3b3a37,0 -5px #3b3a37,9px 5px #1c1c1b,-9px 5px #1c1c1b,5px 9px #1c1c1b,-5px -9px #1c1c1b,
    inset 0 4px #e2e1db,inset 4px 0 #b9b7af,inset 0 -5px #787772,inset -4px 0 #787772;
}
.area-photos .camera-top,.area-photos .camera-brand,.area-photos .camera-controls small{color:#4a4945}
.area-photos .camera-top span:last-child{color:#34332f}
.area-photos .camera-screen{background:#18191b;border-color:#18191b;outline:2px solid #61605c}
.area-photos .camera-controls button,.area-photos .dpad{background:#2a2b2e;border-color:#5d5e62;box-shadow:2px 2px 0 #3b3a37;color:#d8d8d4}
.area-photos .dpad{border:0}
.area-photos .dpad button{background:none;border:0;box-shadow:none}
.area-photos .dpad span{background:#1e1f22;border-color:#5d5e62;color:#d8d8d4}
.area-photos .viewfinder{background:#141517;border-color:#61605c;box-shadow:2px 2px 0 #3b3a37}
@media(max-width:760px){
  .area-photos .camera-back{box-shadow:3px 0 #3b3a37,-3px 0 #3b3a37,0 3px #3b3a37,0 -3px #3b3a37,5px 3px #1c1c1b,-5px 3px #1c1c1b,3px 5px #1c1c1b,-3px -5px #1c1c1b,
    inset 0 3px #e2e1db,inset 3px 0 #b9b7af,inset 0 -3px #787772}
}
/* Every pixel given back here is a pixel the caption gains below the fold. */
.area-photos .camera-brand{margin-top:11px}
.camera-tip{margin-top:14px}
.photo-caption{margin:12px auto}
.area-photos .photo-modes{margin-top:12px;border-color:#63645c;border-radius:0;box-shadow:3px 3px 0 #1c1c1b}
.area-photos .photo-modes button[aria-pressed=true]{background:linear-gradient(#e6d294,#c0aa66)}

/* The flip now hesitates, turns, and settles; then the screen wakes up the way
   an LCD does, and the lamp finds its rhythm. */
.area-photos.is-arriving .camera-rig{animation:camera-unpack-2 1650ms cubic-bezier(.16,.72,.2,1) both}
/* While the deck is still travelling, the camera already waits front side
   first in the flip's start pose, so the screen never flashes before it turns. */
.area-photos.is-incoming .camera-rig{animation:none;transform:translateY(22px) scale(.88) rotateY(-180deg)}
@keyframes camera-unpack-2{
  0%{transform:translateY(22px) scale(.88) rotateY(-180deg)}
  18%{transform:translateY(-14px) scale(.94) rotateY(-162deg)}
  70%{transform:translateY(-8px) scale(1.02) rotateY(11deg)}
  86%{transform:translateY(0) scale(1) rotateY(-4deg)}
  100%{transform:none}
}
.area-photos.is-arriving .camera-screen:before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  animation:screen-wake 820ms ease-out 640ms both;
}
@keyframes screen-wake{
  0%{background:#cbd9c2;opacity:1;transform:scaleY(.01)}
  20%{background:#e3eede;opacity:1;transform:scaleY(1)}
  52%{background:#9db594;opacity:.34;transform:scaleY(1)}
  100%{background:transparent;opacity:0;transform:scaleY(1)}
}
/* The screen stays dark until the wake flash fills it (20% of screen-wake),
   so the photo never shows before the camera has switched on. */
.area-photos.is-incoming #camera-photo,.area-photos.is-incoming .camera-screen>span{opacity:0}
.area-photos.is-arriving #camera-photo,.area-photos.is-arriving .camera-screen>span{animation:screen-content-on 820ms steps(1,end) 640ms both}
@keyframes screen-content-on{0%{opacity:0}20%,100%{opacity:1}}
.area-photos.is-arriving .camera-led{animation:led-boot 1250ms steps(1,end) 660ms both}
@keyframes led-boot{
  0%,13%{background:#3d4a39;box-shadow:none}
  14%,31%{background:#edf6c5;box-shadow:0 0 9px #bbcc88}
  32%,50%{background:#3d4a39;box-shadow:none}
  51%,73%{background:#edf6c5;box-shadow:0 0 9px #bbcc88}
  74%,100%{background:#bbcc88;box-shadow:0 0 7px #bbcc8866}
}

/* ---------------------------------------------------------------------------
   06 - Taking the record closer
   The covers in the crate grow with the window, the dialog was capped at
   1120px. On a wide screen the sleeve therefore came out at the same size it
   had on the shelf - and the 9 degree tilt made it read as smaller still. The
   flight animation derives its scale from these boxes, so it follows along.
--------------------------------------------------------------------------- */
@media(min-width:761px){
  .record-dialog .record-detail{
    width:min(1580px,94vw,205vh);
    grid-template-columns:1.3fr minmax(0,1fr);
    gap:80px;padding:56px 48px;
  }
  /* Leaves room for the vinyl, which reaches 21% past the sleeve. */
  .record-dialog .gatefold-art{width:80%}
}

/* ---------------------------------------------------------------------------
   07 - Smaller corrections
--------------------------------------------------------------------------- */
/* FX now reads as a state rather than a command: a lamp on the device, like the
   step lights on the sequencer. */
.area-controls [data-motion-toggle]{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:11px;min-width:58px}
.fx-led{width:7px;height:7px;flex:none;background:#4b4736;box-shadow:inset 0 0 0 1px #00000066}
.area-controls [data-motion-toggle][aria-pressed="true"] .fx-led{
  background:var(--accent-strong,#f3e0a8);box-shadow:0 0 7px var(--gold)}

/* ---------------------------------------------------------------------------
   08 - The picture frame on the shelf
   Going out, someone at the door sticks a small label over the phone camera.
   They come off again afterwards, and a few of them ended up around a picture.
   One of those stickers remembers its night; the others are only stickers.
--------------------------------------------------------------------------- */
.memory-object .frame-sprite{
  display:block;width:190px;height:128px;padding:11px;transform:rotate(-2deg);
  background:linear-gradient(135deg,#7d6748,#3b2c1d 9%,#6d573c 14%,#271d14 18%,#725c40 24%,#3a2a1a 80%,#8a6b48 91%,#382719);
  border:2px solid #57452e;box-shadow:3px 6px 9px #0009,inset 0 0 0 2px #a38a6133}
.memory-object .frame-mat{
  display:block;height:100%;position:relative;padding:14% 18%;
  background:linear-gradient(#c7bda2,#ab9f83);box-shadow:inset 0 0 0 1px #857a62}
/* The photograph inside the mat. */
.memory-object .frame-mat img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.5) sepia(.12);
  box-shadow:0 0 0 1px #6f6650,inset 0 0 10px #00000066}
/* The stickers, too small at this size to be anything but colour. */
.memory-object .frame-mat i{
  position:absolute;width:12px;height:12px;border-radius:50%;
  box-shadow:0 1px 1px #00000055}
.memory-object .frame-mat i:nth-child(1){left:7%;top:5%;background:#d9622f}
.memory-object .frame-mat i:nth-child(2){left:28%;top:4%;background:#e7e1d0;border-radius:2px}
.memory-object .frame-mat i:nth-child(3){left:49%;top:6%;background:#1f3f6b}
.memory-object .frame-mat i:nth-child(4){left:70%;top:4%;background:#16181a;border-radius:2px}
.memory-object .frame-mat i:nth-child(5){left:86%;top:7%;background:#2f6b4f}
.memory-object .frame-mat i:nth-child(6){left:87%;top:32%;background:#e7e1d0}
.memory-object .frame-mat i:nth-child(7){left:86%;top:57%;background:#d9622f;border-radius:2px}
.memory-object .frame-mat i:nth-child(8){left:87%;top:80%;background:#1f3f6b}
.memory-object .frame-mat i:nth-child(9){left:64%;top:85%;background:#16181a}
.memory-object .frame-mat i:nth-child(10){left:40%;top:86%;background:#2f6b4f;border-radius:2px}
.memory-object .frame-mat i:nth-child(11){left:16%;top:85%;background:#e7e1d0}
.memory-object .frame-mat i:nth-child(12){left:6%;top:47%;background:#d9622f}

.frame-dialog{width:min(1080px,94vw);padding:46px 44px 40px;box-shadow:0 44px 90px #000}
.frame-detail{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:54px;align-items:center}

/* The frame itself: moulding, then a wide mat, then the photograph. */
.sticker-frame{
  position:relative;aspect-ratio:1.18;padding:4.5%;transform:rotate(-1.2deg);
  background:linear-gradient(135deg,#836c4b,#3d2e1e 9%,#705a3e 14%,#291e15 18%,#745e41 24%,#3c2c1b 80%,#8d6e4a 91%,#3a2819);
  border:3px solid #55432c;
  box-shadow:0 26px 46px -16px #000c,inset 0 0 0 3px #a38a6126}
.passepartout{
  display:block;height:100%;padding:17%;
  background:linear-gradient(#d8cfb6,#c0b59a);
  box-shadow:inset 0 0 0 1px #9b8f74,0 1px 3px #00000055}
.passepartout img{
  display:block;width:100%;height:100%;object-fit:cover;
  box-shadow:0 0 0 1px #9c9076,0 2px 7px #00000066}

.sticker{
  position:absolute;left:var(--x);top:var(--y);width:9%;aspect-ratio:1;
  padding:0;border:0;transform:translate(-50%,-50%) rotate(var(--r));
  box-shadow:0 1px 2px #00000055,0 5px 8px -5px #00000088,inset -2px -3px 7px #00000022;
  transition:transform .2s ease,filter .2s ease}
/* Every sticker reacts, so hovering does not give the one away. */
.sticker:hover{transform:translate(-50%,-50%) rotate(var(--r)) scale(1.07);filter:brightness(1.07)}
/* And the cursor stays an arrow, or it would point the one out before
   the mouse even stops. */
button.sticker{cursor:default}
/* The sticker is 38px across on a phone; the thing you can hit is not. */
button.sticker:before{content:'';position:absolute;inset:-7px}
button.sticker:focus-visible{outline:2px solid var(--accent-strong,#f3e0a8);outline-offset:3px}
.sticker-a{border-radius:50%;background:radial-gradient(circle,#1d211f 0 24%,#dfe4d8 25% 39%,#1d211f 40% 45%,#c9cfc0 46%)}
.sticker-b{width:8.4%;border-radius:4px;background:linear-gradient(#1b1c1e,#0d0e0f)}
.sticker-b:after{content:'';position:absolute;inset:42% 10%;background:#ddd8c8;transform:rotate(-24deg)}
.sticker-c{width:8.2%;border-radius:50%;background:#c25a33;box-shadow:inset 0 0 0 3px #e7cdb6,0 1px 2px #00000055}
.sticker-d{width:9.8%;border-radius:3px;background:#e7e1d0}
.sticker-d:after{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 34% 42%,#25282a 0 11%,transparent 12%),radial-gradient(circle at 64% 60%,#25282a 0 11%,transparent 12%)}
.sticker-e{width:8.7%;border-radius:50%;background:#254566}
.sticker-e:after{content:'';position:absolute;inset:24%;border:2px solid #cfe0f0;border-radius:50%}
.sticker-f{width:9.5%;border-radius:50%/40% 40% 60% 60%;background:#3a6650}
.sticker-f:after{content:'';position:absolute;inset:44% 18%;background:#dfe7d6}

.frame-side{min-width:0}
.frame-side .eyebrow{margin-bottom:10px}
.frame-side h2{font-family:Source,sans-serif;font-weight:400;font-size:30px;line-height:1.15;margin:10px 0 16px}
.frame-side .prose{font-family:Source,sans-serif;font-size:18px;line-height:1.62;color:#b6b0a0;max-width:44ch}
.frame-story img{width:100%;max-height:200px;object-fit:cover;margin-top:24px;border:9px solid #cdc2a6}
.frame-story .text-link{margin-top:18px}
/* The sticker comes off the mat rather than the panel swapping out. */
.frame-story:not([hidden]){animation:sticker-peel 420ms cubic-bezier(.2,.7,.2,1) both}
@keyframes sticker-peel{from{opacity:0;transform:translateY(12px) rotate(.7deg)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------------------
   09 - About
   The room used to carry the stories, which belong to the frame. What is left
   is the thing the room is named after: who this is. A portrait and a short
   entry on the left, the text on the right, the colophon along the bottom.
--------------------------------------------------------------------------- */
.about-room{
  display:grid;grid-template-columns:minmax(0,318px) minmax(0,1fr);
  gap:64px;padding:40px 0 34px;align-items:start}
.about-portrait{margin:0}
.about-portrait .wood-frame{display:block;transform:rotate(-2.2deg)}
.about-portrait .wood-frame img{
  width:100%;height:336px;object-fit:cover;border:9px solid #d1c7b0;
  filter:saturate(.55) sepia(.12)}
.about-facts{margin:38px 0 0;font-size:12px;border-top:1px dashed var(--line)}
.about-facts>div{
  display:grid;grid-template-columns:minmax(78px,auto) minmax(0,1fr);gap:16px;
  padding:11px 2px;border-bottom:1px dashed var(--line)}
.about-facts dt{color:var(--gold);letter-spacing:.5px}
.about-facts dd{margin:0;color:#a9a594}
.about-text{max-width:60ch}
.about-text .prose{font-family:Source,sans-serif;font-size:18px;line-height:1.72;color:#b2ada0;margin:0 0 20px}
.about-text .about-lead{font-size:28px;line-height:1.36;color:var(--text);margin:0 0 22px}
.about-contact{margin:20px 0 0}
.about-colophon{
  display:flex;justify-content:space-between;align-items:baseline;gap:26px;
  margin-top:auto;padding:16px 46px 0 0;border-top:1px dashed var(--line);
  font-size:11px;color:#8b8474}
.about-colophon p{margin:0}
.about-colophon .about-links{margin:0;gap:18px}

@media(max-width:1180px){
  .area-portfolio .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:calc(11 * var(--u)) calc(8 * var(--u)) calc(5 * var(--u))}
  .memory-object .frame-sprite{width:154px;height:104px;padding:9px}
  .memory-object .frame-mat i{width:10px;height:10px}
  .frame-detail{gap:34px}
  .about-room{grid-template-columns:minmax(0,248px) minmax(0,1fr);gap:40px}
  .about-portrait .wood-frame img{height:286px}
}
@media(max-width:760px){
  body.regal{font-size:14px}
  .room-header p:last-child{font-size:15px;max-width:none}
  .eyebrow{font-size:10px}
  .sidebar nav a{font-size:12px}
  .listening-note p{font-size:13px}
  .listening-note p span{font-size:11px}
  .room-footer{font-size:10px}
  .notes-layout aside{font-size:13px}
  .camera-tip,.photo-caption{font-size:13px}
  .work-table{--u:1px;margin-top:26px}
  .table-tape{font-size:9px;letter-spacing:1px}
  .table-props-top{min-height:0;gap:10px 16px;flex-wrap:wrap;justify-content:center}
  .table-cards,.prop-ring,.prop-pencil{display:none}
  .area-portfolio .portfolio-grid{grid-template-columns:1fr;gap:26px;padding:16px 10px 4px}
  .table-props{padding-left:10px;padding-right:10px}
  .notebook-room{margin-top:22px}
  .notebook-tabs{padding-left:16px;gap:5px}
  .notebook-tab{font-size:11px;padding:8px 12px 12px;letter-spacing:1px}
  .notebook-tab:is(:hover,:focus-visible),.notebook-tab.is-open{padding-bottom:18px}
  .notebook-page{padding:24px 20px 28px}
  .notebook-page:after{right:22px;height:70px;width:11px}
  .area-notes .notes-layout{gap:0}
  .area-notes .notes-layout aside{margin-bottom:26px;font-size:13px}
  .area-notes .notes-feed{padding-left:24px}
  .area-notes .notes-feed:before{top:-24px;bottom:-28px}
  .area-notes .notes-feed p{font-size:17px;line-height:32px}
  .area-notes .notes-feed h2{font-size:21px}
  .photo-stage{max-width:100%;padding:24px 0 10px}
  /* The sleeve is left at the size crate.css gives it here. A phone is barely
     twice as wide as a cover in the crate, and the vinyl slides 21% past the
     sleeve — growing it any further pushes the record off the screen. */
  /* The frame is the only way to the stickers, so nothing gets dropped from
     the phone shelf. It scrolls instead, the way the record crate does; the
     top padding leaves room for an object to be lifted off it. */
  .shelf-items{
    justify-content:flex-start;gap:16px;padding:24px 12px 0;height:165px;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .shelf-items::-webkit-scrollbar{display:none}
  .memory-object .frame-sprite{width:123px;height:83px;padding:6px}
  .memory-object .frame-mat i{width:7px;height:7px}
  .frame-dialog{width:94vw;padding:44px 18px 24px}
  .frame-detail{grid-template-columns:1fr;gap:26px}
  .sticker-frame{max-width:330px;width:100%;margin:0 auto}
  .frame-side h2{font-size:25px}
  .frame-side .prose{font-size:17px}
  .about-room{grid-template-columns:1fr;gap:30px;padding:28px 0 26px}
  .about-portrait{max-width:280px}
  .about-portrait .wood-frame img{height:230px}
  .about-facts{margin-top:28px}
  .about-text .about-lead{font-size:23px}
  .about-text .prose{font-size:17px}
  .about-colophon{flex-direction:column;align-items:flex-start;gap:12px}
  /* The fixed controls used to sit on the covers, right in the thumb zone. */
  .area-controls{right:8px;bottom:8px;background:#0f0f0cd9;padding:4px;gap:6px}
  .area-inner{padding-bottom:64px}
}


/* Pocket workstation: the M-16 becomes a full-width, touch-first instrument. */
@media(max-width:760px){
  .sequencer-dialog{overflow:hidden}
  .sequencer-workstation{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:none!important;align-content:start!important;align-items:start!important;
    width:100%!important;height:100%!important;min-width:0!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    gap:16px!important;padding:58px 14px 28px!important;
    scroll-padding-top:58px;overscroll-behavior:contain
  }
  .sequencer-workstation::before{inset:10px}
  .compact-sequencer,.bass-machine,.chord-synth,.mix-desk{
    width:100%!important;min-width:0!important;box-sizing:border-box!important;
    align-self:auto!important;transform:none!important
  }
  .compact-sequencer{padding:12px!important}
  .compact-sequencer-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;margin-bottom:12px!important}
  .compact-sequencer-head p{grid-column:1/2;align-self:center}
  .compact-sequencer-head .machine-status{grid-column:2;grid-row:1}
  .compact-sequencer-head label{min-width:0;white-space:normal!important}
  .compact-sequencer-head label:has([data-seq-bpm]){grid-column:1}
  .compact-sequencer-head label:has([data-seq-swing]){grid-column:2}
  .compact-sequencer-head [data-seq-swing]{width:62px!important}
  .compact-sequencer .sequencer{gap:10px}
  .compact-sequencer .seq-row,.chord-seq-row,.bass-seq-row{display:grid;grid-template-columns:1fr!important;gap:5px!important}
  .compact-sequencer .seq-row>span,.chord-seq-row>span,.bass-seq-row>span{font-size:8px!important}
  .compact-sequencer .seq-row>div,.chord-seq-row>div,.bass-seq-row>div{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:4px!important}
  .compact-sequencer .seq-row button,.chord-seq-row button,.bass-seq-row button{min-height:31px!important;aspect-ratio:auto!important}
  .compact-sequencer .seq-row button:nth-child(4n+1),.chord-seq-row button:nth-child(4n+1),.bass-seq-row button:nth-child(4n+1){border-left-width:2px}
  .pattern-memory{grid-template-columns:1fr auto!important;gap:8px!important}
  .song-chain{grid-column:1/-1}
  .compact-sequencer-controls{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px!important}
  .compact-sequencer-controls button{min-height:34px;padding:5px 3px!important}
  .bass-machine{padding:14px!important}
  .bass-controls{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .bass-pad-grid{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:4px!important}
  .bass-pad-grid button{min-height:31px!important}
  .chord-synth{padding:14px!important}
  .synth-tuning,.chord-synth .synth-controls{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .mini-mixer{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .chord-keyboard{height:126px!important;grid-template-columns:repeat(7,minmax(0,1fr))!important}
  .chord-keyboard button{padding:.45rem .15rem 1.25rem!important}
  .chord-keyboard button strong{font-size:.52rem!important}
  .cassette-deck{position:relative!important;left:auto!important;bottom:auto!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;margin:0!important}
  .sequencer-dialog-close{position:fixed;right:10px;top:10px;width:40px;height:40px}
}

/* Mobile shelf rail: each object gets a deliberate stop instead of shrinking. */
@media(max-width:760px){
  .shelf-items{
    scroll-snap-type:x mandatory;scroll-padding-inline:12px;
    -webkit-overflow-scrolling:touch;gap:24px!important;padding-inline:18px!important
  }
  .shelf-items>.shelf-object{flex:0 0 auto;scroll-snap-align:start;scroll-snap-stop:always}
  .shelf-items>.portfolio-object{display:flex!important}
  .shelf-items>.note-object{display:flex!important}
  .objects-shelf:after{
    content:'›';position:absolute;right:4px;bottom:14px;z-index:3;
    width:18px;height:24px;display:grid;place-items:center;pointer-events:none;
    color:#e1c77d;background:linear-gradient(90deg,transparent,#10100e 38%);font:24px/1 Source,serif
  }

  /* Chords read as one sustained phrase, not sixteen unrelated squares. */
  .chord-seq-row>div{padding:5px 4px;background:#121814;border:1px solid #69746c;box-shadow:inset 0 2px 8px #0008}
  .chord-seq-row button{position:relative;overflow:visible!important;border-color:#5e6861!important}
  .chord-seq-row button.has-chord{color:#fff1d7!important;background:linear-gradient(#bc8350,#6c462e)!important;border-color:#f0bd77!important;box-shadow:inset 0 1px #ffe4ad,0 2px 2px #0008!important;text-shadow:0 1px #2c170e}
  .chord-seq-row button.has-chord:not(.is-sustain){z-index:1;padding-left:5px!important;text-align:left;font-size:7px!important;font-weight:800}
  .chord-seq-row button.has-chord:not(.is-sustain)::after{content:attr(data-chord-span) ' steps';position:absolute;right:3px;top:3px;color:#422316;font:700 5px/1 var(--mono);letter-spacing:0;text-shadow:none}
  .chord-seq-row button.is-sustain{margin-left:-4px;border-left:0!important;border-radius:0!important}
  .chord-seq-row button.has-chord:not(.is-sustain):has(+ .is-sustain){border-radius:3px 0 0 3px}
  .chord-seq-row button.is-sustain:not(:has(+ .is-sustain)){border-radius:0 3px 3px 0!important}
  .chord-seq-row button.is-selected{outline-color:#fff0b1!important;outline-width:2px!important}
}


/* ---------------------------------------------------------------------------
   10 - Sequencer workstation — desktop
   The legacy panels were sized for three narrow side-by-side columns with
   5–9 px type, which clipped the 16-step grid (only ~13 steps visible) and
   made the chord palette unreadable. On desktop the M-16 now spans the full
   width, bass + chord synth sit below it, and the dialog scrolls.
--------------------------------------------------------------------------- */
/* The generic dialog cap (90dvh, room.css) left a dead strip under the
   full-screen workstation on every viewport. */
.sequencer-dialog{max-height:none!important}
@media(min-width:761px){
  /* Layout */
  .sequencer-dialog{overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain}
  .sequencer-workstation{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)!important;
    grid-template-rows:none!important;grid-auto-rows:auto!important;
    align-items:start!important;align-content:start!important;justify-content:stretch!important;
    width:min(1360px,100%)!important;height:auto!important;min-height:100%!important;
    gap:30px!important;padding:76px clamp(28px,4vw,64px) 56px!important;overflow:visible!important
  }
  .patch-cables{display:none}
  .compact-sequencer,.bass-machine,.chord-synth,.mix-desk{
    width:auto!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important;
    align-self:stretch!important;justify-self:stretch!important;transform:none!important
  }
  .compact-sequencer{grid-column:1/-1!important;grid-row:auto!important}
  .bass-machine,.chord-synth{grid-column:auto!important;grid-row:auto!important}
  .cassette-deck{
    position:relative!important;left:auto!important;bottom:auto!important;transform:none!important;
    grid-column:1/-1!important;grid-row:auto!important;justify-self:center;
    width:min(680px,100%)!important;box-sizing:border-box!important;margin:0!important
  }

  /* M-16: all five drum rows and the chord row share one label column and a
     16-column grid, so every step lines up and nothing gets clipped. */
  .compact-sequencer{padding:26px 30px 28px!important;font-size:13px!important;overflow:visible!important}
  .compact-sequencer-head{margin-bottom:22px!important;padding-right:0!important;gap:18px!important}
  .compact-sequencer-head p{font-size:15px!important}
  .compact-sequencer-head input{width:48px;font-size:15px!important}
  .compact-sequencer-head [data-seq-swing]{width:120px!important}
  .compact-sequencer-head output{font-size:13px!important}
  .machine-status{padding:6px 10px!important;font-size:12px!important}
  .compact-sequencer .sequencer{gap:10px!important}
  .compact-sequencer .seq-row,.chord-seq-row{display:grid!important;grid-template-columns:110px minmax(0,1fr)!important;gap:14px!important;align-items:center}
  .compact-sequencer .seq-row>span,.chord-seq-row>span{font-size:13px!important}
  .compact-sequencer .seq-row>div,.chord-seq-row>div{display:grid!important;grid-template-columns:repeat(16,minmax(0,1fr))!important;gap:5px!important}
  .compact-sequencer .seq-row button{min-width:0!important;min-height:40px!important;aspect-ratio:auto!important}

  /* Chord row: connected phrases on the same grid as the drums. */
  .chord-seq-row{margin-top:16px!important;padding-top:14px!important}
  .chord-seq-row>div{margin-inline:-6px;padding:5px;background:#121814;border:1px solid #69746c;box-shadow:inset 0 2px 8px #0008}
  .chord-seq-row button{position:relative;min-width:0;min-height:46px!important;padding:0;overflow:visible!important;border-color:#5e6861!important;font-size:12px!important}
  .chord-seq-row button.has-chord{color:#fff1d7!important;background:linear-gradient(#bc8350,#6c462e)!important;border-color:#f0bd77!important;box-shadow:inset 0 1px #ffe4ad,0 2px 2px #0008!important;text-shadow:0 1px #2c170e}
  .chord-seq-row button.has-chord:not(.is-sustain){z-index:1;padding:14px 0 0 7px!important;text-align:left;white-space:nowrap;font-size:14px!important;font-weight:800}
  .chord-seq-row button.has-chord:not(.is-sustain)::after{content:attr(data-chord-span) ' steps';position:absolute;left:7px;top:5px;color:#48271a;font:700 9px/1 var(--mono);letter-spacing:.02em;text-shadow:none;white-space:nowrap}
  .chord-seq-row button.is-sustain{margin-left:-5px;border-left:0!important;border-radius:0!important}
  .chord-seq-row button.has-chord:not(.is-sustain):has(+ .is-sustain){border-radius:3px 0 0 3px}
  .chord-seq-row button.is-sustain:not(:has(+ .is-sustain)){border-radius:0 3px 3px 0!important}
  .chord-seq-row button.is-selected{outline-color:#fff0b1!important;outline-width:2px!important}

  /* Chord step editor: display | palette | length | erase, hint below. */
  .chord-step-editor{grid-template-columns:96px minmax(0,1fr) 190px auto!important;gap:14px!important;margin-top:14px!important;padding:14px 16px!important}
  .chord-editor-display{padding:8px 6px!important}
  .chord-editor-display span{font-size:10px!important}
  .chord-editor-display strong{font-size:26px!important}
  .chord-palette{gap:6px!important}
  .chord-palette button{gap:6px!important;min-height:58px;padding:9px 4px!important}
  .chord-palette button small{font-size:11px!important}
  .chord-palette button strong{font-size:17px!important}
  .chord-length{gap:10px!important;font-size:11px!important}
  .chord-length output{font-size:15px!important}
  .chord-delete{padding:12px 14px!important}
  .chord-step-editor>p{font-size:11px!important;line-height:1.35!important}

  /* Pattern memory, legend, transport */
  .pattern-memory{gap:12px!important;margin-top:14px!important;padding:12px 14px!important}
  .pattern-banks>span{margin-right:6px!important;font-size:11px!important}
  .pattern-banks button,.song-mode{min-width:40px!important;padding:9px 10px!important}
  .song-chain{gap:5px!important}
  .song-chain select{padding:8px 2px!important;font-size:13px!important}
  .machine-legend{margin-top:10px!important;font-size:11px!important}
  .compact-sequencer-controls{gap:8px!important;margin-top:14px!important}
  .compact-sequencer-controls button{padding:10px 14px!important}

  /* Bass machine */
  .bass-machine{padding:24px!important}
  .bass-machine-head p{font-size:12px!important}
  .bass-display span{font-size:10px!important}
  .bass-display output{font-size:1.7rem!important}
  .bass-controls{gap:14px 18px!important;padding:14px!important}
  .bass-controls label{gap:8px!important;font-size:11px!important}
  .bass-controls output{font-size:12px!important}
  .bass-controls select{padding:8px!important;font-size:13px!important}
  .bass-pad-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;padding:10px!important}
  .bass-pad-grid button{min-height:58px!important;aspect-ratio:auto!important;font-size:1.05rem!important}
  .bass-pad-grid button::before{left:6px;top:6px;font-size:10px!important}
  .bass-legend{margin-top:12px!important;font-size:11px!important}

  /* Chord synth */
  .chord-synth{padding:28px!important;justify-content:flex-start!important}
  .chord-synth .section-index{font-size:12px!important}
  .synth-tuning{gap:12px!important;padding:12px!important}
  .synth-tuning label{gap:7px!important;font-size:11px!important}
  .synth-tuning select{padding:8px 6px!important;font-size:13px!important}
  .chord-synth .synth-controls{gap:14px 22px!important;padding:14px!important}
  .chord-synth .synth-slider{grid-template-columns:58px minmax(0,1fr) auto!important;font-size:11px!important}
  .chord-synth .synth-slider output{min-width:26px;font-size:12px!important}
  .mini-mixer{gap:10px!important;padding:12px!important}
  .mixer-channel label,.master-color{gap:7px!important;font-size:11px!important}
  .mixer-channel button{padding:7px!important;font-size:11px!important}
  .master-color select{padding:7px!important;font-size:12px!important}
  .chord-keyboard{height:176px!important}
  .chord-keyboard button{padding:.8rem .35rem 1.9rem!important}
  .chord-keyboard button small{font-size:11px!important}
  .chord-keyboard button strong{font-size:17px!important}
  .chord-keyboard button kbd{font-size:10px!important}
  .chord-synth .synth-note{font-size:.95rem!important}

  /* Manuals, tape deck, global button type */
  .machine-manual summary{padding:8px 10px!important;font-size:11px!important}
  .machine-manual summary::before{width:16px!important;height:16px!important;font-size:10px!important}
  .machine-manual dl{font-size:.88rem!important}
  .machine-manual dt{font-size:11px!important}
  .cassette-deck{padding:10px 14px!important;font-size:12px}
  .cassette-deck button,.cassette-deck a{padding:9px 12px!important;font-size:11px!important}
  .sequencer-workstation button{font-size:13px!important}
}
/* Narrow desktops / tablets: bass and chord synth stack under the M-16. */
@media(min-width:761px) and (max-width:1099px){
  .sequencer-workstation{grid-template-columns:minmax(0,1fr)!important}
  .compact-sequencer .seq-row,.chord-seq-row{grid-template-columns:84px minmax(0,1fr)!important;gap:10px!important}
  .chord-step-editor{grid-template-columns:84px minmax(0,1fr) auto auto!important}
  .chord-editor-display{grid-column:1!important;grid-row:1!important}
  .chord-palette{grid-column:2/-1!important;grid-row:1!important}
  .bass-pad-grid{grid-template-columns:repeat(8,minmax(0,1fr))!important}
  .chord-length{grid-column:1/3!important;grid-row:2!important;max-width:360px}
  .note-octave{grid-column:3!important;grid-row:2!important}
  .chord-delete{grid-column:4!important;grid-row:2!important}
  .chord-step-editor>p{grid-column:1/-1!important;grid-row:3!important}
}


/* ---------------------------------------------------------------------------
   11 - Two-track poly synth
   Two synth lanes in the M-16 (chord = amber, note = teal, arp = violet),
   the step editor's octave control, and the synth panel's track tabs,
   mode switch and five-channel mixer.
--------------------------------------------------------------------------- */
.synth-lanes{display:grid;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid #77807755}
.synth-lanes .chord-seq-row{margin:0!important;padding:0!important;border:0!important}
.lane-select{display:grid;gap:4px;min-width:0;padding:6px 8px;color:#b8c0b9;background:#1a201d;border:1px solid #3e4842;border-left:3px solid #3e4842;text-align:left;text-transform:uppercase;cursor:pointer}
.lane-select b{font:700 13px/1 var(--sans);letter-spacing:.06em}
.lane-select small{overflow:hidden;color:#8b968e;font:600 10px/1.1 var(--mono);letter-spacing:.02em;text-transform:none;white-space:nowrap;text-overflow:ellipsis}
.synth-lane.is-active .lane-select{color:#f2cf8e;background:#2a2a20;border-color:#6b5f3f;border-left-color:#f0bd77}
.synth-lane.is-active>div{border-color:#b89b62!important}
.synth-lane[data-mode=note] button.has-chord{background:linear-gradient(#6fa39a,#2f5751)!important;border-color:#a8dcd2!important;box-shadow:inset 0 1px #d6fff5,0 2px 2px #0008!important;text-shadow:0 1px #10251f}
.synth-lane[data-mode=arp] button.has-chord{background:linear-gradient(#a58bc4,#4f3d68)!important;border-color:#d6c2f0!important;box-shadow:inset 0 1px #f1e6ff,0 2px 2px #0008!important;text-shadow:0 1px #1d1428}
.synth-lane[data-mode=note] button.has-chord:not(.is-sustain)::after{color:#133a33!important}
.synth-lane[data-mode=arp] button.has-chord:not(.is-sustain)::after{color:#2b1f3b!important}
.chord-seq-row button.has-chord[data-chord-span="1"]::after{content:none!important}
.chord-seq-row button.has-chord[data-chord-span="1"]{padding-top:0!important}
.note-octave{display:flex;align-items:center;gap:6px;color:#aeb7b0;font:700 11px/1 var(--mono);text-transform:uppercase}
.note-octave[hidden]{display:none!important}
.note-octave button,.synth-octave button{width:30px;height:30px;padding:0;color:#e8e4da;background:#303934;border:1px solid #101512;box-shadow:inset 0 1px #8b958c55,0 2px #080b09;font:700 16px/1 var(--mono);cursor:pointer}
.note-octave output{min-width:22px;color:#8fd6c7;font:800 15px/1 var(--mono);text-align:center}

.synth-tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:14px 0 0}
.synth-tracks button{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;min-width:0;padding:8px 10px;color:#e4e1d6;background:linear-gradient(#5f675e,#3d443d);border:1px solid #2b312c;box-shadow:inset 0 1px #c7c9bd77,0 2px #4d514a;text-align:left;cursor:pointer}
.synth-tracks button b{display:grid;place-items:center;width:22px;height:22px;color:#2a2f2a;background:#cfc9b6;font:800 12px/1 var(--mono)}
.synth-tracks button span{overflow:hidden;font:700 12px/1.1 var(--sans);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}
.synth-tracks button.is-active{color:#2c1b14;background:linear-gradient(#e7a46d,#b8663f);border-color:#6d3a24;box-shadow:inset 0 1px #ffe0bf,0 2px #6d3a24}
.synth-tracks button.is-active b{color:#fff1e2;background:#6d3a24}
.synth-mode-strip{display:flex;flex-wrap:wrap;align-items:end;gap:10px 14px;margin:0 0 12px;padding:12px;background:#abae9f;border:1px solid #777d72;box-shadow:inset 0 1px #eff0e5}
.synth-mode{display:flex}
.synth-mode button{min-width:64px;padding:9px 10px;color:#2a312b;background:#e2decf;border:1px solid #666d65;box-shadow:inset 0 -2px #b0ad9f;font:700 12px/1 var(--mono)!important;text-transform:uppercase;cursor:pointer}
.synth-mode button+button{border-left:0}
.synth-mode button.is-active{color:#fff4e9;background:#8f4d3b;border-color:#5d2922;box-shadow:inset 0 2px 4px #0006}
.synth-arp,.synth-chord-type{display:grid;gap:6px;color:#4f574f;font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.synth-chord-type select{min-width:82px;padding:7px 6px;color:#202824;background:#e2decf;border:1px solid #666d65;border-radius:0;font:600 13px/1 var(--mono)}
.synth-arp select{min-width:112px;padding:7px 6px;color:#202824;background:#e2decf;border:1px solid #666d65;border-radius:0;font:600 13px/1 var(--mono)}
.chord-synth:not([data-mode=arp]) .synth-arp,.chord-synth[data-mode=note] .synth-chord-type{display:none}
.chord-synth[data-mode=note] .synth-tuning label:has([data-track-voicing]){opacity:.4;pointer-events:none}
.synth-octave{display:flex;align-items:center;gap:6px;margin-left:auto;color:#4f574f;font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.synth-octave output{min-width:24px;color:#7e3c30;font:800 15px/1 var(--mono);text-align:center}
.mini-mixer{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.mixer-channel:nth-child(3n){border-right:0}

/* Pocket view: the phone gets the drum computer + bass (T-6 style) and the
   mix desk (section 12). */
@media(max-width:760px){
  .synth-lanes,.chord-step-editor,.chord-synth,
  .compact-sequencer-controls :is([data-seq-record],[data-seq-auto],[data-seq-clear-chords],[data-seq-clear-auto]){display:none!important}
  .compact-sequencer-controls{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:761px){
  .synth-lanes .chord-seq-row{grid-template-columns:110px minmax(0,1fr)!important}
}
@media(min-width:1100px){
  .chord-step-editor{grid-template-columns:96px minmax(0,1fr) auto 170px auto!important}
  .chord-editor-display{grid-column:1;grid-row:1}
  .chord-palette{grid-column:2;grid-row:1}
  .note-octave{grid-column:3;grid-row:1}
  .chord-length{grid-column:4;grid-row:1}
  .chord-delete{grid-column:5;grid-row:1}
  .chord-step-editor>p{grid-column:2/-1!important;grid-row:2}
}
@media(min-width:761px) and (max-width:1099px){
  .synth-lanes .chord-seq-row{grid-template-columns:84px minmax(0,1fr)!important}
}

/* ---------------------------------------------------------------------------
   12 - Bass pitch + mix desk
   The bass machine switches between rhythm (tap cycles off/short/hold/+8)
   and pitch (tap selects a step, the note bar sets its note). Every active
   pad shows the note it plays; "auto" notes are dimmed. The mix desk holds
   key, scale and one strip per channel (hi/mid/lo EQ, vertical fader,
   mute); it spans the width under bass and synth on desktop, and phones
   show only the drum and bass strips.
--------------------------------------------------------------------------- */
.bass-edit-mode{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 .6rem}
.bass-edit-mode button,.bass-note-octave button,.bass-note-keys button{padding:7px 4px;color:#e1b182;background:#2a211b;border:1px solid #8a5238;font:700 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.bass-edit-mode button.is-active,.bass-note-keys button.is-active{color:#2c1b14;background:linear-gradient(145deg,#ffd28c,#cc7749);border-color:#ffd8a0}
.bass-pad-grid button::after{content:attr(data-bass-note);position:absolute;right:4px;bottom:3px;color:inherit;font:700 8px/1 var(--mono);opacity:.8;pointer-events:none}
.bass-pad-grid button.is-auto::after{opacity:.45}
[data-bass-edit-mode=pitch] .bass-pad-grid button::after{display:none}
[data-bass-edit-mode=pitch] .bass-pad-grid button{font-size:13px}
[data-bass-edit-mode=pitch] .bass-pad-grid button.is-auto{font-style:italic}
[data-bass-edit-mode=pitch] .bass-pad-grid button.is-auto:not(.active){opacity:.55}
.bass-pad-grid button.is-selected{outline:2px dashed #ffe0a4;outline-offset:2px}
.bass-note-bar{display:grid;gap:8px;margin-top:.6rem;padding:.6rem;background:#522c22;border:1px solid #bc754d;box-shadow:inset 0 1px #d9996c66}
.bass-note-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#e1b182;font:700 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.bass-note-head b{color:#ffd18a;font-size:15px}
.bass-note-octave{display:flex;align-items:center;gap:6px}
.bass-note-octave button{min-width:30px}
.bass-note-octave output{min-width:22px;color:#ffd18a;font:800 14px/1 var(--mono);text-align:center}
.bass-note-keys{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.bass-note-keys button{min-height:36px;padding:6px 0;font-size:13px;text-transform:none}
.bass-note-keys .bass-note-auto{font-size:10px;text-transform:uppercase}
.bass-legend-pitch,.bass-auto-pocket{display:none}
[data-bass-edit-mode=pitch] .bass-legend-pitch{display:block}
[data-bass-edit-mode=pitch] .bass-legend-rhythm{display:none}
@media(min-width:761px){
  .bass-legend-pitch{font-size:11px!important;margin-top:12px!important}
}
/* Synth panel keeps only its own tuning: sound + voicing. */
.chord-synth .synth-tuning{grid-template-columns:1fr 1fr!important}
.mix-desk{position:relative;min-width:0;padding:18px 22px;color:#22302d;background:linear-gradient(138deg,#e2dece,#bdbdad 58%,#a5a797);border:1px solid #aaa89f;border-radius:3px;box-shadow:inset 0 1px #fff9,inset 0 -10px 20px #62685d66,10px 15px 0 #101411a8,15px 22px 27px #0007}
.mix-desk .section-index{margin:0 0 12px;color:#4f574f;font:800 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.mix-desk-body{display:grid;grid-template-columns:minmax(200px,.34fr) minmax(0,1fr);gap:14px;align-items:stretch}
.desk-tuning{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center;padding:12px;background:#abae9f;border:1px solid #777d72;box-shadow:inset 0 1px #eff0e5,inset 0 -2px 4px #51574d66}
.desk-tuning label{display:grid;gap:7px;min-width:0;color:#4f574f;font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.desk-tuning select{min-width:0;width:100%;padding:8px 6px;color:#202824;background:#e2decf;border:1px solid #666d65;border-radius:0;box-shadow:inset 0 -2px #b0ad9f;font:600 13px/1 var(--mono);cursor:pointer}
@media(min-width:761px){
  .mix-desk{grid-column:1/-1!important;grid-row:auto!important}
}
@media(min-width:761px) and (max-width:1099px){
  .mix-desk-body{grid-template-columns:1fr}
}
@media(max-width:760px){
  .bass-auto-pocket{display:inline}
  .bass-auto-desk{display:none}
  .mix-desk{padding:14px}
  .mix-desk .section-index{margin-bottom:10px}
  .mix-desk-body{grid-template-columns:1fr;gap:10px}
  .desk-tuning select{padding:9px 6px;font-size:14px}
  .desk-tuning label{font-size:10px}
}
/* Channel strips: EQ knobs on top, a long vertical fader, mute at the foot. */
.mix-desk .mini-mixer{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.15fr)!important;gap:0!important;margin:0!important;padding:10px 4px!important;align-items:stretch}
.mix-desk .mixer-channel{display:grid!important;grid-template-rows:auto auto 1fr auto auto;justify-items:center;gap:8px!important;padding:2px 8px!important;border-right:1px solid #303730!important}
.mix-desk .mixer-channel.is-muted .channel-fader,.mix-desk .mixer-channel.is-muted .eq-stack{opacity:.45}
.mix-desk .channel-name{color:#e4e1d6;font:800 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.eq-stack{display:grid;gap:6px;justify-items:center}
.eq-control{display:grid;justify-items:center;gap:3px}
.eq-control span{min-width:3.2em;color:#b9bcb0;font:700 10px/1 var(--mono);letter-spacing:.06em;text-align:center;text-transform:uppercase}
.eq-control span.is-boosted{color:#ffd18a}
.eq-control span.is-killed{color:#ff8a70}
.eq-knob.is-killed{border-color:#e0533c;box-shadow:0 2px 3px #0009,0 0 8px #e0533c99}
.eq-knob{--ratio:.5;--band:#d9d5c6;position:relative;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#5c645c,#262c28 62%,#171b19);border:2px solid var(--band);box-shadow:0 2px 3px #0009,inset 0 1px #ffffff26;cursor:ns-resize;touch-action:none}
.eq-knob i{position:absolute;left:50%;top:3px;bottom:50%;width:3px;margin-left:-1.5px;background:#f1ecdc;border-radius:2px;transform-origin:50% 100%;transform:rotate(calc(-135deg + var(--ratio) * 270deg))}
.eq-knob::after{content:"";position:absolute;left:50%;top:-6px;width:2px;height:4px;margin-left:-1px;background:#9da194}
.eq-gain .eq-knob{--band:#e0c48f}.eq-gain{margin-bottom:4px}.eq-high .eq-knob{--band:#7fa6c9}.eq-mid .eq-knob{--band:#8fb07a}.eq-low .eq-knob{--band:#d0875f}
.channel-fader{--ratio:.75;position:relative;width:38px;min-height:150px;height:100%;touch-action:none;cursor:ns-resize;background:repeating-linear-gradient(0deg,transparent 0 13px,#c9c9bb33 13px 14px) center/100% calc(100% - 18px) no-repeat}
.channel-fader::before{content:"";position:absolute;left:50%;top:9px;bottom:9px;width:6px;margin-left:-3px;background:#121614;border:1px solid #0a0c0b;border-radius:3px;box-shadow:inset 0 1px 3px #000}
.fader-cap{position:absolute;left:3px;right:3px;bottom:calc(var(--ratio) * (100% - 18px));height:18px;background:linear-gradient(#d8ccb1,#8f866f 45%,#6a6252 55%,#b3a88f);border:1px solid #2a2620;border-radius:2px;box-shadow:0 3px 4px #000a}
.fader-cap::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:2px;margin-top:-1px;background:#f5f0e2}
.channel-fader:focus-visible,.eq-knob:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.channel-fader.is-dragging .fader-cap{background:linear-gradient(#f2e3c0,#b3a17c 45%,#8a7a5d 55%,#d7c49d)}
.mix-desk .mixer-channel output{color:#ffd18a;font:800 12px/1 var(--mono)}
.mix-desk .mixer-channel button{width:100%;padding:7px 4px!important;font-size:11px!important}
.mixer-master{display:grid;align-content:start;gap:10px;padding:2px 10px}
.mixer-master .master-color{display:grid;gap:7px;color:#e4e1d6;font:700 10px/1 var(--mono)!important;letter-spacing:.08em;text-transform:uppercase}
.mixer-master select{width:100%;padding:7px!important;font-size:12px!important}
.mixer-hint{margin:0;color:#c7c9bd;font:600 10px/1.4 var(--mono);letter-spacing:.03em}
@media(min-width:1100px){
  .mix-desk-body{grid-template-columns:minmax(190px,.3fr) minmax(0,1fr)}
  .desk-tuning{grid-template-columns:1fr;align-content:start}
}
@media(max-width:760px){
  /* Synth lanes are silent on phones, so their strips are hidden. */
  .mix-desk .mixer-channel:is([data-channel=track1],[data-channel=track2]){display:none!important}
  .mix-desk .mini-mixer{grid-template-columns:1fr 1fr 1fr!important}
  .channel-fader{min-height:140px}
}

/* Each drum row picks its sound under its name (sequencer.js). */
.compact-sequencer .seq-row>span{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.compact-sequencer .drum-sound{
  font:inherit;font-size:10px;letter-spacing:.4px;
  max-width:100%;padding:2px 4px;
  color:#e7dcc0;background:#141a16;border:1px solid #5e6861;border-radius:2px;cursor:pointer;
}
.compact-sequencer .drum-sound:focus-visible{outline:2px solid #f0bd77;outline-offset:1px}
@media(max-width:760px){
  .compact-sequencer .seq-row>span{flex-direction:row;align-items:center;gap:8px}
  .compact-sequencer .drum-sound{font-size:9px}
}