/* Folio — folio.css : the whole look of the page.
   Lesson 0's palette is fixed; see SPEC-LESSON-0.md. The house rules:
   no grids and no stripes, no extreme contrast, nothing blinks, and what
   moves moves calmly. Texture and gradient are allowed and used. */
  /* ---- Folio, Lesson 0. Palette is fixed; see SPEC-LESSON-0.md ---- */
  :root{
    --ground:#EAE0CC;
    --ink:#3B2F1E;
    --faded:#A99C82;
    --rule:#C9BCA0;
    --gilt:#9C7A28;
    --wash:#E0D2B4;
    /* one shade under the wash: the desk the folio lies on while a screen
       is up. Never used on the sheet itself. */
    --desk:#D6C8A6;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  }
  html{
    font-size:clamp(13px,1.7vh,19px);
    height:100%;
  }
  body{
    height:100%;
    margin:0;
    overflow:hidden;                 /* single screen, never scrolls */
    background-color:var(--ground);
    /* the one permitted vignette: 3% ink at the far corners, nothing else */
    background-image:radial-gradient(ellipse 120% 110% at 50% 45%,
      rgba(59,47,30,0) 45%, rgba(59,47,30,0.03) 100%);
    background-repeat:no-repeat;
    color:var(--ink);
    font-family:var(--serif);
    font-size:1rem;
    font-variant-numeric:tabular-nums lining-nums;
    display:flex;
    align-items:center;
    justify-content:center;
    -webkit-font-smoothing:antialiased;
  }
  /* A still landscape may sit behind the folio.  Paper remains the default;
     both scenic choices are deliberately veiled here as a second, code-level
     guard against glare and busy detail. */
  body[data-scenery="forest"]{
    background-image:
      linear-gradient(rgba(18,31,27,0.30),rgba(18,31,27,0.42)),
      url("folio-forest.png");
    background-size:cover;
    background-position:center;
  }
  body[data-scenery="sea"]{
    background-image:
      linear-gradient(rgba(30,42,55,0.24),rgba(30,42,55,0.35)),
      url("folio-sea.png");
    background-size:cover;
    background-position:center;
  }
  /* The third scene is not one picture but whichever picture belongs to the
     workspace you are in: quest-backgrounds/<id>.png, named after the quest.
     The url arrives on the body as a custom property, so the rule itself
     never has to know any of the names; a workspace with no picture of its
     own never reaches this selector at all — the body stays on paper, which
     is the graceful fall. The veil is a shade deeper than the two standing
     scenes: these are illustrations rather than photographs and carry more
     incident, and the sheet has to stay the brightest thing on the screen. */
  body[data-scenery="quest"]{
    background-image:
      linear-gradient(rgba(20,26,24,0.34),rgba(20,26,24,0.48)),
      var(--questbg);
    background-size:cover;
    background-position:center;
  }
  /* ---- one scene giving way to another ----
     A picture is never put on the body until it has been fetched *and*
     decoded, so the ground can no longer change to an image that is not there
     yet — which is what showed the bare parchment for a handful of frames and
     read as a flash. Once it is decoded the swap itself is free, and this
     layer is what makes it calm: it holds the scene being left, over the one
     arriving, and dissolves. It is only ever used between two pictures. Paper
     has no picture to dissolve, so the two edges of the ring are a single
     clean step rather than a wash of parchment over a photograph.
     It is a fade of one still image into another and nothing moves. */
  .scenefade{
    position:fixed;
    inset:0;
    z-index:-1;
    background-size:cover;
    background-position:center;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.55s ease-out;
  }
  /* No animation anywhere. This block is belt-and-braces. */
  *,*::before,*::after{animation:none !important;}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{transition:none !important;animation:none !important;}
  }

  /* ---- how wide the folio is ----
     The measure of the page — 46rem, or all the room there is on a narrow
     screen — is what everything made of words is set to and what the cells
     of both views are sized from. The drawing may need more than that and
     never less: on a wide screen it holds more of the page across, and the
     sheet grows with it rather than letting it spill over the edge. views.js
     measures the room and puts the answer in --pagew; where it says nothing,
     which is the column, the quest log and every narrow screen, the measure
     is exactly what it always was. */
  /* The folio is exactly as tall as the screen and never one pixel taller.
     It used to be as tall as whatever stood in it, centred in a body that
     hides its overflow — so the moment the chrome above and below grew (the
     scenery gives the title and the footer 3.2rem of breath apiece) the whole
     stack outgrew the window and was clipped at BOTH ends, and the thing at
     the bottom, the footer that speaks, went under the fold. It was there at
     90% zoom and gone at 100%, which is the same page and a shorter window.
     Pinning the page to the window makes that impossible to say again: the
     header, the rules and the foot are each their own size, the working field
     takes what is left, and the footer is the last row of the screen whatever
     any of them measure. */
  main{
    width:var(--pagew,min(46rem,92vw));
    max-width:100vw;
    height:100%;
    box-sizing:border-box;
    padding-bottom:0.5rem;           /* the foot is not flush with the glass */
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
    isolation:isolate;
  }
  /* everything that is not the working field keeps its own height and is
     never squeezed to make room */
  main > header, main > .divider, main > .foot{flex:0 0 auto;}
  /* the working field: everything that is written in or read off the page.
     On paper it is nothing at all — a transparent wrapper that changes no
     spacing. On scenery it is what the torn sheet covers, the title and the
     footer having stepped off it into the scene. */
  .field{
    width:100%;
    /* the give in the page: it takes the room the title and the foot leave,
       and it is the only thing that yields when there is not enough of it —
       `min-height:0` is what lets a flex child be smaller than what stands
       in it, without which the field would push the footer off the screen
       exactly as it used to */
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    /* the field is given the height the screen has for it (views.js), and
       what stands in it stands in the middle of it: the column fills the
       box by construction, and the drawing, which keeps the height it has
       always had, sits where it has always sat rather than riding up */
    justify-content:center;
    position:relative;
    isolation:isolate;
    /* above the title's and the footer's breath, which are free to run under
       the sheet's edge: the paper covers what it overlaps */
    z-index:1;
  }
  /* ---- the sheet ----
     On scenery the folio lies on the scene as a physical page: folio-paper.png
     is the ground colour with a deckled boundary torn by noise (a mottled
     cloud for the wander of the tear, a fibrous sheet for the fray itself,
     baked by scripts/bake-paper.mjs). The image is only referenced inside the
     scenery selector, so plain paper never fetches it. */
  .field::before{
    content:"";
    position:absolute;
    inset:-2.6rem -3.6rem;
    z-index:-1;
    background:none;
    opacity:0;
    pointer-events:none;
  }
  /* the baked sheet's ground is one dab below the plain page's #EAE0CC, so
     the flat wash that marks the playhead row (and the chosen quest, and the
     head of a crossbar) steps down with it — the same distance under the
     paper it lies on, or it stops being visible at all */
  body:not([data-scenery="paper"]) .field{--wash:#D9C9A8;}
  body:not([data-scenery="paper"]) .field::before{
    opacity:1;
    background-image:url("folio-paper.png");
    background-size:100% 100%;
    /* the shadow follows the torn contour, not a rectangle */
    filter:drop-shadow(0 0.4rem 1.4rem rgba(12,17,15,0.38));
  }

  /* ---- header ---- */
  header{width:100%;text-align:center;}
  h1{
    margin:0;
    font-weight:400;
    font-variant:small-caps;
    letter-spacing:0.42em;
    text-indent:0.42em;             /* balance the trailing letter-space */
    font-size:2.1rem;
    color:var(--ink);
  }
  /* the single permitted decorative flourish */
  .flourish{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.7em;
    margin:0.5rem 0 0.6rem;
    color:var(--gilt);
    font-size:1rem;
    line-height:1;
  }
  .flourish i{display:block;width:5.5rem;height:1px;background:var(--gilt);opacity:0.55;}
  .flourish span{opacity:0.8;}

  .meta{
    margin:0;
    color:var(--faded);
    font-size:0.92rem;
    letter-spacing:0.06em;
  }
  .divider{
    width:100%;
    height:1px;
    background:var(--rule);
    margin:0.9rem 0 0.9rem;
  }

  /* ---- the column ---- */
  .column{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:22.6rem;
  }
  .row{
    display:grid;
    /* fleuron, caret, step number, a column for each voice, and the chord
       lane's own, which is wider because it carries a mark and a pitch */
    grid-template-columns:1.5em 1.1em 2.3em 3.7em 3.7em 4.6em;
    column-gap:0.7em;
    align-items:center;
    height:2.35em;                   /* > 2.2 em, generously spaced */
    border-top:1px solid rgba(201,188,160,0.45);
    padding:0 0.5em;
  }
  .row.beat{border-top-color:var(--rule);}
  .row:first-child{border-top-color:var(--rule);}
  .row.play{background-color:var(--wash);}   /* flat wash, no glow, no trail */

  .fleuron{color:var(--gilt);text-align:center;font-size:1em;line-height:1;}
  .caret{color:var(--ink);text-align:center;font-size:1.05em;line-height:1;}
  .num{color:var(--faded);text-align:right;font-size:0.9em;}
  .note{position:relative;color:var(--ink);text-align:left;letter-spacing:0.04em;}
  .note.empty{color:var(--faded);}
  /* ---- the held note, written ----
     A note that rings on does not become more notes: the steps it covers are
     not marked one by one but joined, by a single ink hairline running down
     the column under the name, from the note to where it stops. It is drawn
     as a pseudo-element so that the run of rows carries no text of its own —
     one continuous stroke, not a stack of glyphs — and it overshoots each row
     a little at both ends so that the row's own hairline does not cut it.
     Sixteen of these could never add up to a grid: there is at most one per
     voice per note, it is vertical only, and it is quieter than the writing.
     Where it ends it turns a short foot, because the end of a held note is a
     decision and the page should say where it was made. */
  .note.hold::after{
    content:"";
    position:absolute;
    left:0.22em;
    top:-0.62em;bottom:-0.62em;
    width:1px;
    background:rgba(59,47,30,0.34);
  }
  .note.hold.dim::after{background:rgba(59,47,30,0.20);}
  .note.hold.last::before{
    content:"";
    position:absolute;
    left:0.22em;
    bottom:-0.62em;
    width:0.46em;height:1px;
    background:rgba(59,47,30,0.34);
  }
  .note.hold.last.dim::before{background:rgba(59,47,30,0.20);}
  /* past the loop the writing is quieter; its stroke goes with it */
  .row.outside .note.hold::after,.row.outside .note.hold.last::before{
    background:rgba(59,47,30,0.16);
  }
  /* the voice not being written into: present, readable, a shade back */
  .note.dim{color:var(--faded);}
  .row.cursor .note{font-weight:700;}         /* the only bold in the app */
  .row.cursor .note.dim{font-weight:400;}     /* and only on the voice in hand */
  /* ---- music that is in more than one place ----
     A mirrored cell is one piece of music pointed at from several sites, and
     no site is the original — so it cannot be drawn with an arrow, a bracket
     or a mark on one end of it. It is drawn by weight instead: everywhere the
     cell stands, the writing is a shade lighter than music written by hand.
     Eight sites of an ostinato are therefore eight lighter passages and not
     eight of anything repeated across the page — no rule, no band, no tint,
     nothing that could stack up into a stripe. Less contrast than the page
     already has, never more, and nothing here moves. */
  .note.mirror{opacity:0.62;}
  .note.mirror.dim{opacity:0.5;}

  /* ---- the chord lane, written ----
     One cell, one mark: the shape's glyph and the pitch its root stands on,
     a little smaller than the writing beside it because a chord is the
     ground and not the tune. It borrows the held note's stroke exactly —
     the same hairline down the column, the same foot where it stops — so
     a held chord and a held note are read the same way and learnt once. */
  .note.chord{font-size:0.92em;letter-spacing:0.02em;}
  .note.chord.empty{letter-spacing:0.04em;}

  /* ---- what the echo made of a note ----
     After a judgement, and only until the next edit, each note of the
     player's own answer carries a hairline under it: gilt and solid where it
     rang true, ink and dotted where it went astray. Nothing is written on
     the call — the call is never drawn at all — and nothing is written on a
     note the judgement had no opinion about, so the marks are a handful of
     short lines on a page and can never stack into a stripe. The two are
     told apart by their line as well as by their colour, both are quieter
     than the writing above them, and neither moves. */
  .note.rang{
    text-decoration:underline;
    text-decoration-color:rgba(156,122,40,0.75);
    text-underline-offset:0.24em;
  }
  .note.astray{
    text-decoration:underline dotted;
    text-decoration-color:rgba(59,47,30,0.4);
    text-underline-offset:0.24em;
  }
  .bar.rang{outline:1px solid rgba(156,122,40,0.6);outline-offset:1px;}
  .bar.astray{outline:1px dotted rgba(59,47,30,0.35);outline-offset:1px;}

  /* ---- the seal ----
     A note a quest has sealed carries a small gilt ring at its shoulder, in
     the column and on the head of its bar in the drawing alike: one mark,
     learnt once. The ring alone says the note is not yours to unwrite. What
     it is sealed against is said by up to three short spokes standing off
     the ring — left the pitch, upright the step, right the length — which
     are a hair's width and a third of the ring long, and are meant to be
     leaned in for rather than read across the room. There is no legend and
     nothing to press.

     It is the page's own gilt at a little under full strength, the weight
     the fleuron and the flourish are drawn at: no new colour, nothing near
     extreme contrast, no repetition that could read as a grid — the ring is
     round, the spokes fan, and at most a few of them are ever on a page.
     Nothing here moves or blinks. */
  .seal{
    display:none;
    position:absolute;
    right:0.1em;top:50%;
    width:0.58em;height:0.58em;
    margin-top:-0.29em;
    box-sizing:border-box;
    border:1px solid var(--gilt);
    border-radius:999px;
    opacity:0.62;
    pointer-events:none;
  }
  .seal.on{display:block;}
  .seal b{
    display:none;
    position:absolute;
    left:50%;bottom:50%;
    width:1px;height:0.6em;
    margin-left:-0.5px;
    transform-origin:50% 100%;
    /* transparent where it would cross the ring, so only the spoke shows */
    background:linear-gradient(to top,rgba(0,0,0,0) 0,rgba(0,0,0,0) 62%,
      var(--gilt) 62%,var(--gilt) 100%);
  }
  .seal.sp .tp{display:block;transform:rotate(-42deg);}
  .seal.sr .tr{display:block;}
  .seal.sl .tl{display:block;transform:rotate(42deg);}
  /* the voice not in hand keeps its seals, a shade back with the rest of it */
  .note.dim .seal{opacity:0.4;}
  /* on the drawing the seal sits on the head of the bar — the end the note is
     struck at — half on the colour and half off it */
  .bar>.seal{
    right:auto;left:0;top:50%;
    margin-top:0;
    transform:translate(-50%,-50%);
    opacity:0.85;
    /* a small disc of the page's own ground, so the ring reads off the bar's
       colour as well as off the paper it half hangs over */
    background-color:var(--ground);
  }

  /* ---- the two voices, named above the page ----
     Which line the hands are in, and what each is doing. Quiet: the one in
     hand is in ink over a gilt hairline, the other is faded. Nothing moves. */
  .voices{
    display:flex;
    justify-content:center;
    align-items:baseline;
    gap:2.4rem;
    margin:0 0 0.55rem;
    font-variant:small-caps;
    letter-spacing:0.14em;
    font-size:0.86rem;
    color:var(--faded);
  }
  .voices.off{display:none;}
  .vname{
    display:block;
    padding:0 0.2em 0.22rem;
    border-bottom:1px solid transparent;
    cursor:pointer;
  }
  .vname.on{color:var(--ink);border-bottom-color:var(--gilt);}
  /* ---- what each voice is doing, on the strip that names them ----
     Solo and mute used to be said twice: here, and again in the header's meta
     line. The strip is the one indicator of where the hands are, so it is
     where the state of the hands belongs, and the meta line has stopped
     repeating it. A voice with nothing to say leaves an empty line of its own
     height, so the strip never changes size and nothing on the page moves
     when a voice is taken away or given back. */
  .vmark{
    display:block;
    text-align:center;
    font-variant:normal;
    letter-spacing:0.04em;
    font-size:0.8rem;
    color:var(--faded);
    min-height:1.2em;
    cursor:pointer;
  }
  .vmark.solo{color:var(--gilt);}
  /* steps beyond the loop length: present, editable, quieter on the page */
  .row.outside .num,.row.outside .note{color:var(--faded);}

  /* ---- the roll: the same page drawn — time runs right, height is pitch ---- */
  .roll{
    display:none;
    width:100%;
    box-sizing:border-box;
    /* the margin the drawing keeps for its names: the home rules are named
       at the side of the line, off the drawing rather than on top of it */
    padding-left:2.7rem;
    flex-direction:column;
  }
  .roll.on{display:flex;}
  .rollfield{
    position:relative;
    height:36.9rem;                  /* with the base strip, the column's height: nothing shifts */
  }
  /* one hairline per home note — the tonic of the key, at every octave in
     view: a sparse ruling, a quiet staff, never a grid. The tint is in the
     colour rather than in `opacity`, so that the name the line carries is not
     faded along with it. */
  .octline{position:absolute;left:0;right:0;height:1px;background:rgba(201,188,160,0.55);}
  /* and one per beat — the 4ths, upright, as quiet as the home rules */
  .beatline{position:absolute;top:0;bottom:0;width:1px;background:var(--rule);opacity:0.55;}
  .rollwash{position:absolute;top:0;bottom:0;background-color:var(--wash);display:none;}
  /* ---- the stretch that is playing ----
     The echo's window, drawn as ground rather than as a mark: the page's own
     wash, full height, under the rules and the music alike. It stands under
     the playhead's wash and is kept lighter than it, so the playhead is still
     the darker of the two where the two meet. */
  .rollwin{position:absolute;top:0;bottom:0;background-color:var(--wash);opacity:0.55;display:none;}
  /* ---- where the call's notes are ----
     One bracket a note, hung off the foot of the field above the numbers: the
     step it begins on, as long as it rings, and nothing about its pitch.
     Three sides only — it is a span, not a box. It takes no room in the
     layout, so raising it moves nothing. */
  .rollhints{position:absolute;left:0;right:0;top:100%;height:0.5rem;pointer-events:none;}
  .hintbar{
    position:absolute;top:0;bottom:0;
    border-left:1px solid var(--gilt);
    border-bottom:1px solid var(--gilt);
    border-right:1px solid var(--gilt);
    opacity:0.75;
  }
  .hintbar.out{opacity:0.3;}
  /* the cursor column, bracketed: two upright ink hairlines, full height —
     steady, unfilled, unmistakable; the caret below names the same column */
  .rollcur{
    position:absolute;top:0;bottom:0;
    border-left:1px solid rgba(59,47,30,0.5);
    border-right:1px solid rgba(59,47,30,0.5);
  }
  .bar{
    position:absolute;
    border-radius:999px;
  }
  .bar.outside{opacity:0.4;}
  /* the voice not in hand: a shade back, and a shade further past the loop */
  .bar.back{opacity:0.45;}
  .bar.back.outside{opacity:0.2;}
  /* a bar of a mirrored cell, at the same lighter weight the column writes
     one in — after the two above, so the shades compound rather than argue */
  .bar.mirror{opacity:0.62;}
  .bar.mirror.outside{opacity:0.26;}
  .bar.mirror.back{opacity:0.3;}
  .bar.mirror.back.outside{opacity:0.14;}
  .bar.cur{box-shadow:0 0 0 1px var(--ink);}   /* the roll's answer to bold */
  /* ---- the chord, drawn as one thing ----
     A soft slab from the lowest tone to the highest, at a fraction of the
     weight of a bar, with a quiet line inside it where each tone actually
     sits. The slab is what the eye takes first and the lines are what it
     reads second — and a tone that did not move draws at exactly the same
     height in the next chord, which is the lesson, seen. The root is the
     darker line with one quiet bead at its edge. Nothing here is
     ever more than four lines inside one shape, so it cannot read as a
     stripe; nothing here moves; and it lies under the two voices' bars, in
     the drawing as in the ear. */
  .chordbar{position:absolute;}
  .chordbar>b{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    border-radius:0.5em;
    opacity:0.30;
  }
  .chordbar.back>b{opacity:0.19;}
  .chordbar.outside>b{opacity:0.11;}
  /* a slab of a mirrored cell, at the same lighter weight the bars wear */
  .chordbar.mirror>b{opacity:0.19;}
  .chordbar.mirror.back>b{opacity:0.12;}
  .chordbar.mirror.outside>b{opacity:0.07;}
  .chordbar.cur>b{box-shadow:0 0 0 1px rgba(59,47,30,0.45);}
  .chordbar>i{
    position:absolute;
    left:0.15em;right:0.15em;
    height:2px;margin-top:-1px;
    background:rgba(59,47,30,0.30);
  }
  .chordbar>i.root{
    height:3px;margin-top:-1.5px;
    background:rgba(59,47,30,0.66);
  }
  .chordbar>i.root::before{
    content:"";position:absolute;left:-0.12em;top:50%;
    width:0.34em;height:0.34em;transform:translateY(-50%);
    border-radius:50%;background:rgba(59,47,30,0.72);
  }
  .chordbar.back>i{background:rgba(59,47,30,0.16);}
  .chordbar.back>i.root{background:rgba(59,47,30,0.38);}
  .chordbar.outside>i{background:rgba(59,47,30,0.10);}
  /* ---- the names on the drawing ----
     The roll says pitch with height and colour, which is quick to read and
     impossible to name. It is not made readable by writing a note on every
     bar — that is sixteen labels for a shape one is trying to see. So the
     drawing is named the way a chart is: the home rules carry their pitch
     once each, in the margin at the side of the line; a note being placed or
     moved raises one more line of its own, at its own pitch, named in the
     same margin and then let go of; and where both voices sound at once the
     interval between them is written on a tie drawn between the two bars, so
     that the name belongs to that pair and to nothing else. All of it is
     description and nothing else: no interval is coloured, ranked or warned
     about — the ear decides, the page only says what it is. */
  .octname,.gname{
    position:absolute;
    right:100%;
    top:50%;
    transform:translateY(-50%);
    padding-right:0.55rem;
    text-align:right;
    font-size:0.62rem;
    line-height:1;
    letter-spacing:0.03em;
    color:var(--faded);
    white-space:nowrap;
    pointer-events:none;
  }
  /* the home rule says two things, stacked in the same margin: which pitch it
     is — the tool does the naming — and that this is the note the piece comes
     home to. The word is the page's own gilt, small-capped and small: quiet
     enough that four of them down a margin are still marginalia. K takes the
     pair away together, as it always took the name. */
  .octname .opn{display:block;}
  .octname .ohome{
    display:block;
    margin-top:0.14em;
    font-variant:small-caps;
    letter-spacing:0.1em;
    font-size:0.9em;
    line-height:1;
    color:var(--gilt);
    opacity:0.72;
  }
  /* ---- the pitch in hand ----
     While a note is placed or moved, one more hairline is drawn across the
     roll at that note's pitch, parallel to the home rules and named beside
     them. It is not a state and it is not a cursor: it arrives gently, waits,
     and fades out over a second of its own accord. Nothing blinks. */
  .rollguide{
    position:absolute;left:0;right:0;height:1px;
    background:rgba(59,47,30,0.32);
    opacity:0;
    transition:opacity 1.1s ease-out;
    pointer-events:none;
  }
  .rollguide.on{opacity:1;transition:opacity 0.22s ease-out;}
  .rollguide .gname{color:var(--ink);}
  /* the interval: the slot is drawn from the centre of the upper bar to the
     centre of the lower one, so it is the pair, not a place on the page */
  .ivl{
    position:absolute;
    display:none;                    /* shown by a class, so K can overrule it */
    color:var(--ink);
    pointer-events:none;
  }
  /* the tie: a stroke of ink down the middle of the pair, faded away to
     nothing at both ends so that it meets neither bar and is never a ruled
     line — sixteen of these must not add up to anything like a grid */
  .ivl i{
    position:absolute;
    left:50%;top:0;bottom:0;width:1px;margin-left:-0.5px;
    background:linear-gradient(to bottom,
      rgba(59,47,30,0) 0%, rgba(59,47,30,0.26) 32%,
      rgba(59,47,30,0.26) 68%, rgba(59,47,30,0) 100%);
  }
  /* and the name rides the middle of it, as a small rounded dab of the page's
     own wash with the ruling colour for a rim: the shape of the notes it sits
     between, in the page's colours instead of theirs */
  .ivl span{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    z-index:1;                       /* over the tie it hangs on */
    background-color:var(--wash);
    box-shadow:0 0 0 1px rgba(201,188,160,0.8);
    padding:0.08rem 0.36rem 0.12rem;
    border-radius:999px;
    font-size:0.62rem;
    line-height:1.1;
    letter-spacing:0.03em;
    white-space:nowrap;
  }
  .ivl.on{display:block;}
  .ivl.outside{opacity:0.4;}
  /* K puts the names away — the rules', the guide's and the intervals' — and
     the drawing underneath is the same drawing */
  .roll.nonames .octname,.roll.nonames .gname,.roll.nonames .ivl{display:none;}
  .rollbase{
    display:grid;
    /* one column per step on screen; views.js says how many */
    grid-template-columns:repeat(16,1fr);
    height:1.7rem;
    align-items:center;
  }
  .rollbase span{text-align:center;color:var(--faded);font-size:0.85em;}
  .rollbase span.cur{color:var(--ink);font-size:1.05em;}

  /* ---- the screens (what start opens) ----
     Start is a list of places, not an action bar: the folio, the voices, the
     quests, the settings, the mirrors. The strip naming them stands where the
     title stands, on the page's own ground gathered under the words and gone
     at its own edges — a breath, not a panel, and nothing rectangular about
     it. The folio underneath is never taken away: it dims to a watermark, so
     that what the ear is being asked to judge is still under the eye while a
     dial is turned. The folio screen is the one that lifts the watermark
     again, and then the only thing standing over the page is the strip. */
  .schrome{
    display:none;
    position:fixed;
    top:0.9rem;
    left:50%;
    transform:translateX(-50%);
    z-index:6;
    width:min(44rem,96vw);
    text-align:center;
    color:var(--ink);
    pointer-events:none;
  }
  .schrome.on{display:block;}
  .schrome::before{
    content:"";
    position:absolute;
    inset:-1.3rem -2.8rem;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(ellipse closest-side at center,
      rgba(234,224,204,0.97) 0%,
      rgba(234,224,204,0.94) 46%,
      rgba(234,224,204,0.78) 68%,
      rgba(234,224,204,0.42) 84%,
      rgba(234,224,204,0.14) 94%,
      rgba(234,224,204,0) 100%);
  }
  body:not([data-scenery="paper"]) .schrome{
    --ink:#EDE5D2;
    --faded:rgba(236,229,212,0.68);
    --rule:rgba(236,229,212,0.30);
    --gilt:#D9BA6E;
    --wash:rgba(236,229,212,0.16);
  }
  body:not([data-scenery="paper"]) .schrome::before{
    background:radial-gradient(ellipse closest-side at center,
      rgba(13,18,16,0.60) 0%,
      rgba(13,18,16,0.56) 44%,
      rgba(13,18,16,0.44) 64%,
      rgba(13,18,16,0.26) 80%,
      rgba(13,18,16,0.10) 92%,
      rgba(13,18,16,0) 100%);
  }
  /* the five names. L1 and R1 turn them; the mouse may tap one. The one that
     is not built yet is named all the same and stands paler, so that the
     shape of the menu will not change on the day it arrives. */
  .sstrip{
    display:flex;justify-content:center;align-items:baseline;
    gap:2.2rem;
    font-variant:small-caps;letter-spacing:0.22em;font-size:1rem;
    color:var(--faded);
  }
  .schip{
    padding:0 0.2em 0.28rem;
    border-bottom:1px solid transparent;
    cursor:pointer;pointer-events:auto;
  }
  .schip.on{color:var(--ink);border-bottom-color:var(--gilt);}
  .schip.soon{opacity:0.45;}
  .swhere{
    margin:0.5rem 0 0;
    font-size:0.86rem;letter-spacing:0.05em;line-height:1.5;
    color:var(--faded);
  }
  /* the title gives way while a screen stands over it, and comes back when it
     goes: one slow settling of the ink, nothing that blinks. It goes all the
     way out rather than merely dim — a half-faded meta line showing through
     is two lines of small type in one place, which reads as a fault rather
     than as depth. Nothing moves: the header keeps its box. */
  header{transition:opacity 0.3s ease-out;}
  body[data-screen] header{opacity:0;}
  /* the watermark: the page is still there, still playing, still the thing
     being judged — it simply stops competing with the screen in front of it.
     A fade of the ink, never a dark sheet laid over the paper: a flood fill
     is the contrast jump this palette does not do. */
  #voices,#column,#roll,.rail{transition:opacity 0.3s ease-out;}
  /* A tenth of the ink was not a watermark, it was an absence: the drawing
     was gone and the only thing saying you had left the page was that there
     was nothing to see. It washes out now instead — the bars and the shape
     of the phrase stay readable, they simply stop competing with the column
     that the caret is walking. */
  body.veiled #voices,body.veiled #column,body.veiled #roll{opacity:0.32;}
  body.veiled .rail{opacity:0.30;}
  /* the one thing kept legible through the wash: the row the playhead is on.
     It is what says the page is still running while you are away from it, so
     its flat wash is deepened by exactly as much as the wash takes away. */
  body.veiled .row.play{background-color:rgba(156,122,40,0.55);}
  /* the marks you write WITH leave, because you are not writing: the bold on
     the cursor row is the only bold in the app and it has no business being
     the loudest thing on a page you cannot type into. */
  body.veiled .row.cursor .note{font-weight:400;}
  /* the scenery corner is page furniture too, and the settings screen says
     the same thing in words while it is up */
  .scenery{transition:opacity 0.3s ease-out;}
  /* all the way out, not merely dimmed: the corner sits where the right
     margin now reads the quest in hand, and two things in one corner reads
     as a fault. The settings screen says the same thing in words while any
     screen is up, so nothing is lost by putting it away. */
  body.veiled .scenery{opacity:0;pointer-events:none;}
  /* ---- the desk under the sheet ----
     The second half of saying you are not on the page, and the half that
     costs the page nothing: the ground steps down one shade to a desk and
     the folio becomes a lit sheet lying on it, edge and all. Nothing loses
     ink for this and there is no flood fill over the paper — it is the same
     parchment one dab darker, which is a step this palette already takes
     between --ground and --wash. Paper only: on a scene the ground is a
     photograph already veiled, and a second veil over it would be a fog. */
  body,main{transition:background-color 0.3s ease-out,box-shadow 0.3s ease-out;}
  body[data-scenery="paper"][data-screen]{background-color:var(--desk);}
  body[data-scenery="paper"][data-screen] main{
    background-color:var(--ground);
    border-radius:3px;
    box-shadow:0 3px 30px rgba(59,47,30,0.16);
  }
  /* the screens that draw something of their own are laid over the folio,
     never in place of it — the board is the one exception, and it is the
     page's own section rather than one of these. Fixed, so the page beneath
     keeps its own layout and nothing moves when a screen goes up or down. */
  .sviews{
    display:none;
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:5;
    box-sizing:border-box;
    width:min(44rem,92vw);
    /* lit and rimmed, exactly as the board in the margin is: the page under
       it is washed but still drawn, and a row of words laid straight on top
       of a note was two things in one place. The panel is the same parchment
       one step up from the desk, not a flood fill over the paper. */
    padding:1.1rem 1.5rem 1.3rem;
    border:1px solid var(--gilt);
    border-radius:0.8rem;
    background-color:var(--ground);
    box-shadow:0 3px 26px rgba(59,47,30,0.16);
    color:var(--ink);
    font-size:0.92rem;
    line-height:1.5;
  }
  .sviews.on{display:block;}
  .sview{display:none;}
  .sview.on{display:block;}
  /* ---- the voices screen: one row a voice ----
     Its name, the rail of instruments it can wear, and whether it is heard.
     The row the caret is on is the voice the hands are in — walking is
     arriving here as it is everywhere else in the folio. */
  .vrow{
    display:grid;
    grid-template-columns:6.5rem minmax(0,1fr) 5rem;
    align-items:baseline;
    gap:1.2rem;
    padding:0.7rem 1rem;
    border-radius:0.6rem;
    cursor:pointer;
  }
  .vrow.on{background-color:var(--wash);}
  .vrn{font-variant:small-caps;letter-spacing:0.2em;font-size:1.05rem;color:var(--faded);}
  .vrow.on .vrn{color:var(--ink);}
  .vseats{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:baseline;}
  .vseat{
    padding:0.1rem 0.6rem;
    border:1px solid transparent;
    border-radius:0.5rem;
    color:var(--faded);
    white-space:nowrap;
  }
  .vseat{cursor:pointer;pointer-events:auto;}
  .vseat.on{color:var(--ink);border-color:var(--rule);}
  .vrow.on .vseat.on{border-color:var(--gilt);}
  .vseat.away{font-style:italic;}
  .vseat.none{border:0;font-style:italic;}
  .vrst{text-align:right;color:var(--faded);letter-spacing:0.04em;}
  .vrst.heard{color:var(--gilt);}
  /* while an echo is asking, □ and △ are the asking: no row claims them */
  .vrow.lent .vrst{opacity:0.55;}
  /* ---- the settings screen ---- */
  .srow{
    display:grid;
    grid-template-columns:12rem minmax(0,1fr);
    align-items:baseline;
    gap:1.4rem;
    padding:0.6rem 1rem;
    border-radius:0.6rem;
    cursor:pointer;
  }
  .srow.on{background-color:var(--wash);}
  .srk{font-variant:small-caps;letter-spacing:0.16em;color:var(--faded);}
  .srow.on .srk{color:var(--ink);}
  .sropts{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:baseline;}
  .sropt{
    padding:0.1rem 0.6rem;
    border:1px solid transparent;
    border-radius:0.5rem;
    color:var(--faded);
    white-space:nowrap;
  }
  .sropt{cursor:pointer;pointer-events:auto;}
  .sropt.on{color:var(--ink);border-color:var(--rule);}
  .srow.on .sropt.on{border-color:var(--gilt);}
  .sract{color:var(--faded);}
  .srow.on .sract{color:var(--ink);}
  /* ---- the mirrors screen: named before it exists ---- */
  .smirr p{
    margin:2rem auto 0;
    text-align:center;
    max-width:30rem;
    color:var(--faded);
    font-style:italic;
    line-height:1.7;
  }
  @media (max-width:44rem){
    .sstrip{gap:1.1rem;font-size:0.9rem;letter-spacing:0.14em;}
    .vrow{grid-template-columns:5rem minmax(0,1fr);}
    .vrst{grid-column:2;text-align:left;}
    .srow{grid-template-columns:1fr;gap:0.3rem;}
  }

  /* ---- the quests screen: the board, in the margin ----
     A quest IS a workspace, so the left margin's list and the quest log were
     always one list drawn twice. The board no longer stands where the drawing
     stands: it is that margin promoted — the lesson tags, free play, the
     quests, the caret walking them — and the right margin reads the one under
     the caret in full, which is the job that margin already had. The drawing
     between them is never covered and never taken away.
     It is the one lit and rimmed thing on the sheet while it is up, and that
     is what says which column is live. The margin's own quiet copy stands
     down while it is here; two lists of the same thing is a pinboard. */
  .quests{
    display:none;
    position:fixed;
    left:0.8rem;
    top:1rem;
    max-height:calc(100vh - 2rem);
    z-index:5;
    box-sizing:border-box;
    width:20rem;
    padding:0.85rem 1rem 1rem;
    border:1px solid var(--gilt);
    border-radius:0.8rem;
    background-color:var(--ground);
    box-shadow:0 3px 26px rgba(59,47,30,0.16);
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(201,188,160,0.9) transparent;
    color:var(--ink);
    font-size:0.92rem;
    line-height:1.4;
  }
  .quests.on{display:block;}
  /* the quiet margins stand down while the board is up: the left one is the
     same list and the right one is the same constraint */
  body[data-screen="quests"] .rail{display:none;}
  /* ---- the tabs ----
     The board outgrew a single list at Lesson 2 and will outgrow it again, so
     the log is read one lesson at a time. A row of underlined words was the
     first try and it was not enough: it read as a heading that happened to be
     several words long, and nothing about it said that the words could be
     pressed. So each lesson is a card — a sealed tag with a hairline rim, the
     shape a paper tab actually is — and the one in hand is the one filled
     with the page's own wash and rimmed in gilt, in ink instead of faded.
     Two things say which is which, fill and rim, and neither of them is a
     contrast the eye has to work at. They sit in a single row on a rule; a
     row of a handful of rounded tags is not a grid and not a stripe. A lesson
     that does not exist yet has no tab; the moment a quest belonging to it is
     in the log, its tab is simply there. */
  .qtabs{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0.45em;
    margin:0.7rem 0 0.2rem;
    padding:0 0.4em 0.5rem;
    border-bottom:1px solid var(--rule);
    font-variant:small-caps;
    letter-spacing:0.14em;
    font-size:0.84rem;
    color:var(--faded);
  }
  .qtab{
    display:block;
    padding:0.24em 0.85em 0.3em;
    border:1px solid var(--rule);
    border-radius:0.55rem;
    background-color:transparent;
    color:var(--faded);
    cursor:pointer;
  }
  .qtab.on{
    color:var(--ink);
    border-color:var(--gilt);
    background-color:var(--wash);
  }
  .qtab .qtn{color:var(--faded);font-variant:normal;letter-spacing:0.02em;font-size:0.86em;}
  /* the count on the tab in hand is not louder than the tab */
  .qtab.on .qtn{color:var(--faded);}
  /* The list is bounded. A lesson may arrive with twenty quests in it and the
     page must not grow off the bottom of the screen to hold them: the tab
     shows what fits and the caret brings the rest into view as it walks.
     The bar is the ruling colour on nothing, so it is furniture rather than
     a feature, and it is only there when there is more list than room. */
  #qlist{
    max-height:17rem;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(201,188,160,0.9) transparent;
  }
  /* nothing in this tab yet: a line of plain marginalia, never an empty box */
  .qempty{
    padding:0.9em 0.5em;
    color:var(--faded);
    font-style:italic;
  }
  .quest{
    display:grid;
    /* caret, sword, name, the state of the work, and whether it is to hand */
    grid-template-columns:1.2em 1.2em 1fr 1.4em 1.2em;
    column-gap:0.4em;
    align-items:baseline;
    padding:0.42em 0.5em;
    border-top:1px solid rgba(201,188,160,0.45);
    cursor:pointer;
  }
  .quest:first-child{border-top-color:var(--rule);}
  .quest.sel{background-color:var(--wash);}   /* flat wash, as the playhead row */
  .qcaret{color:var(--ink);text-align:center;line-height:1;}
  .qsigil{color:var(--gilt);text-align:center;line-height:1;}
  .qname{letter-spacing:0.04em;}
  .qstat{text-align:center;line-height:1;}
  .qstat.done{color:var(--gilt);}
  .qstat.bound{color:var(--faded);}
  /* the favourite: the page's own gilt, and a mark rather than a button.
     It is the last thing on the row, so the three sigils that describe the
     work — complete, written-in, where you are — keep the places they had. */
  .qfav{text-align:center;line-height:1;color:var(--faded);opacity:0.55;cursor:pointer;}
  .qfav.on{color:var(--gilt);opacity:0.85;}
  /* the free-play workspace: named above the list, never navigated to
     directly — the active quest, chosen again, comes back here */
  .qfree{
    display:grid;
    grid-template-columns:1.2em 1.2em 1fr 1.4em 1.2em;
    column-gap:0.4em;
    align-items:baseline;
    padding:0.42em 0.5em;
    color:var(--faded);
    cursor:pointer;
  }
  .qfree.act{color:var(--ink);}
  /* the quiet hairline that separates the eight standing quests from the
     drills — short études delivered into the log */
  .qhair{
    display:flex;
    align-items:center;
    gap:0.7em;
    margin:0.9rem 0 0.1rem;
    padding:0 0.5em;
    color:var(--faded);
    font-variant:small-caps;
    letter-spacing:0.16em;
    font-size:0.82rem;
  }
  .qhair i{display:block;height:1px;background:var(--rule);opacity:0.7;flex:1;}
  /* the selected quest, read in full: constraint, what it teaches, and the
     shape of whatever is saved in its workspace */
  /* the right margin, reading the quest under the caret in full: the same
     words the margin already carries while you write, at the same size and
     in the same place, so that entering the quest changes what is written
     there and not where it is */
  .qdetail{
    display:none;
    position:fixed;
    right:0.8rem;
    top:1rem;
    max-height:calc(100vh - 2rem);
    z-index:5;
    box-sizing:border-box;
    width:17rem;
    padding:0.2rem 0.4rem;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(201,188,160,0.9) transparent;
    color:var(--faded);
    font-size:0.88rem;
    line-height:1.6;
  }
  .qdetail.on{display:block;}
  .qdname{letter-spacing:0.04em;margin-bottom:0.4rem;color:var(--ink);
    font-variant:small-caps;font-size:1.02em;
    border-bottom:1px solid var(--rule);padding-bottom:0.3rem;}
  .qdtext{color:var(--ink);line-height:1.62;white-space:pre-line;}
  .qdteach{color:var(--faded);font-style:italic;margin-top:0.5rem;line-height:1.6;}
  .qdstate{color:var(--faded);font-size:0.92em;margin-top:0.7rem;}
  /* the contour: the roll's language, shrunk — coloured dabs, no rules at all */
  .qpreview{position:relative;height:3.4rem;margin-top:0.7rem;width:100%;}
  .qdab{position:absolute;border-radius:999px;}

  /* ---- the side rails: the margins put to work ----
     Left: where every workspace is, and which one you are in. Right: the
     constraint you are working under, in view while you noodle. Both are
     quiet — faded ink, hairlines, nothing that moves. */
  .rail{
    position:fixed;
    top:0;bottom:0;
    width:15rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0 2rem;
    color:var(--faded);
    font-size:0.84rem;
    line-height:1.6;
    pointer-events:none;             /* keyboard-first; only the workspace lines answer the mouse */
  }
  .rail.left{left:0;}
  .rail.right{right:0;text-align:right;}
  .rail h3{
    margin:0 0 0.5rem;
    font-weight:400;
    font-variant:small-caps;
    letter-spacing:0.16em;
    font-size:0.86rem;
    color:var(--faded);
  }
  .rail .hair{height:1px;background:var(--rule);opacity:0.7;margin:0 0 0.7rem;}
  /* ---- the margin's own tabs ----
     The left margin used to list every workspace there is — the favourites,
     every lesson, the drills — each run under a labelled hairline. That was the whole
     board printed down the side of the page while you were trying to write,
     and it only got longer. It shows one lesson now, the same lesson the log
     is on, and the strip above it says which — the log's tags, smaller,
     because they are the same thing and the hand should not have to learn
     them twice. The crossbar's ← and → turn them. */
  .rtabs{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0.35em;
    margin:0 0 0.55rem;
    font-variant:small-caps;
    letter-spacing:0.12em;
    font-size:0.76rem;
  }
  .rtab{
    display:block;
    padding:0.16em 0.6em 0.2em;
    border:1px solid var(--rule);
    border-radius:0.5rem;
    color:var(--faded);
    cursor:pointer;
    pointer-events:auto;             /* back on, under the rail's blanket none */
  }
  .rtab.on{color:var(--ink);border-color:var(--gilt);background-color:var(--wash);}
  .rline{
    display:flex;
    align-items:baseline;
    gap:0.5em;
    padding:0.16rem 0;
    cursor:pointer;
    pointer-events:auto;             /* back on, under the rail's blanket none */
  }
  .rail.right .rline{justify-content:flex-end;}
  .rline .rn{color:var(--faded);}
  .rline.act .rn{color:var(--ink);}
  /* the pad, walking the rail while start is held up: the line you are on
     takes the same flat wash the playhead row takes. It moves with the thumb
     and it never blinks — a wash, not a cursor. */
  .rline.nav{background-color:var(--wash);border-radius:0.3rem;}
  .rline .rg{color:var(--gilt);width:1em;text-align:center;flex:none;}
  .rline .rf{color:var(--gilt);opacity:0.8;flex:none;font-size:0.9em;}
  .rail .rtext{color:var(--ink);margin-top:0.2rem;line-height:1.62;white-space:pre-line;}
  /* headers mirror on the right rail; running text stays readable left-to-left */
  .rail.right .rtext{text-align:left;}
  .rail .rteach{margin-top:0.6rem;font-style:italic;}
  /* ---- the echo's own block in the margin ----
     An echo page has four actions no other page has and every one of them is
     under a trigger. What each does is said here, on the page it is done on
     — this folio has no controls reference and is not getting one — and
     beside each seat, where it matters, what it currently stands at. Key on
     the left in ink, meaning on the right in faded ink; the value under it,
     right aligned, with the one in force in ink under a gilt rule. */
  .rail .recho{margin-top:0.9rem;}
  .rail .recho:empty{margin-top:0;}
  .rail .recho h4{
    margin:0 0 0.45rem;
    font-weight:400;
    font-variant:small-caps;
    letter-spacing:0.16em;
    font-size:0.84rem;
    color:var(--gilt);
  }
  .recho .erow{display:flex;justify-content:space-between;align-items:baseline;gap:0.8em;}
  .recho .ekey{color:var(--ink);white-space:nowrap;}
  .recho .emean{color:var(--faded);text-align:right;}
  .recho .epick{margin:0.05rem 0 0.5rem;text-align:right;color:var(--faded);}
  .recho .epick span{margin-left:0.75em;}
  .recho .epick span.on{color:var(--ink);border-bottom:1px solid var(--gilt);}
  .recho .estate{margin:0.05rem 0 0.5rem;text-align:right;color:var(--ink);}
  .rail .rstate{margin-top:0.8rem;}
  /* a narrow window keeps the column and drops the rails whole, rather
     than squeezing the page. The board goes with them: there is no margin to
     stand in, so it comes back to the middle as an overlay — over a washed
     page, never in place of it, which is what every other screen does. */
  @media (max-width:80rem){
    .rail{display:none;}
    .quests{
      left:50%;
      transform:translateX(-50%);
      width:min(28rem,94vw);
      /* clear of the strip, which is centred and therefore in the way the
         moment the board comes to the middle */
      top:5.4rem;
      max-height:calc(100vh - 7rem);
    }
    .qdetail{display:none !important;}
  }

  /* On scenery the margins do not get paper of their own: one sheet on the
     scene is a folio, three sheets are a pinboard. The marginalia instead
     live in the scene itself — the ink turns pale, and a soft darkening
     breath behind the words (a scrim, not a panel: borderless, elliptical,
     gone at its own edges) buys the contrast back from the photograph. */
  body:not([data-scenery="paper"]) .rail{
    --ink:#EDE5D2;
    --faded:rgba(236,229,212,0.66);
    --rule:rgba(236,229,212,0.30);
    --gilt:#D9BA6E;
    --wash:rgba(236,229,212,0.16);
    top:50%;
    bottom:auto;
    width:16.5rem;
    max-height:calc(100vh - 2rem);
    box-sizing:border-box;
    transform:translateY(-50%);
    padding:1.35rem 1.3rem;
    overflow:visible;
    isolation:isolate;
    background:transparent;
  }
  body:not([data-scenery="paper"]) .rail::before{
    content:"";
    position:absolute;
    inset:-3rem -3.2rem;
    z-index:-1;
    background:radial-gradient(ellipse closest-side at center,
      rgba(13,18,16,0.42) 0%,
      rgba(13,18,16,0.36) 40%,
      rgba(13,18,16,0.24) 64%,
      rgba(13,18,16,0.12) 82%,
      rgba(13,18,16,0.04) 93%,
      rgba(13,18,16,0) 100%);
    pointer-events:none;
  }
  body:not([data-scenery="paper"]) .rail.left{left:0.6rem;}
  body:not([data-scenery="paper"]) .rail.right{right:0.6rem;}
  /* The right margin's reading of the quest in hand is marginalia like the
     rest of it: on a scene it takes the same pale ink over the same soft
     breath, or it is dark ink on a dark photograph and cannot be read at
     all. The board on the left keeps its lit card — it is the one thing the
     caret is walking, and the whole screen turns on saying so. */
  body:not([data-scenery="paper"]) .qdetail{
    --ink:#EDE5D2;
    --faded:rgba(236,229,212,0.66);
    --rule:rgba(236,229,212,0.30);
    --gilt:#D9BA6E;
    color:var(--faded);
    right:0.6rem;
    top:50%;
    bottom:auto;
    max-height:calc(100vh - 2rem);
    transform:translateY(-50%);
    padding:1.35rem 1.3rem;
    overflow:visible;
    isolation:isolate;
  }
  body:not([data-scenery="paper"]) .qdetail::before{
    content:"";
    position:absolute;
    inset:-3rem -3.2rem;
    z-index:-1;
    background:radial-gradient(ellipse closest-side at center,
      rgba(13,18,16,0.42) 0%,
      rgba(13,18,16,0.36) 40%,
      rgba(13,18,16,0.24) 64%,
      rgba(13,18,16,0.12) 82%,
      rgba(13,18,16,0.04) 93%,
      rgba(13,18,16,0) 100%);
    pointer-events:none;
  }

  /* The title and the footer take the marginalia's treatment rather than the
     page's: on scenery they step off the sheet and stand in the scene, pale
     ink over the same soft borderless breath, so that the torn sheet covers
     exactly what is worked in and nothing else.

     The scrim is the rails' gradient on a much wider, flatter ellipse — this
     copy is a broad short band rather than a tall narrow one, so the dense
     middle is wide and the fade has a long run before it meets the scenery.
     It is denser than the rails': the rails sit halfway down, where both
     scenes are dark anyway, while the title stands against the sea's bright
     sky — the one place a pale ink can be lost. The ellipse is centred on the
     copy rather than fitted to it, so that the last line of the meta is still
     well inside the dense middle and not out on the fade. Where the breath
     runs under the sheet, the sheet simply covers it. */
  body:not([data-scenery="paper"]) header,
  body:not([data-scenery="paper"]) .foot{
    --ink:#F4EEE1;
    --faded:rgba(242,236,223,0.86);
    --rule:rgba(242,236,223,0.30);
    --gilt:#DCC077;
    color:var(--faded);
    position:relative;
    isolation:isolate;
  }
  body:not([data-scenery="paper"]) header::before,
  body:not([data-scenery="paper"]) .foot::before{
    content:"";
    position:absolute;
    inset:-3.6rem -6rem;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(ellipse closest-side at center,
      rgba(13,18,16,0.58) 0%,
      rgba(13,18,16,0.56) 34%,
      rgba(13,18,16,0.50) 55%,
      rgba(13,18,16,0.37) 70%,
      rgba(13,18,16,0.21) 82%,
      rgba(13,18,16,0.08) 92%,
      rgba(13,18,16,0) 100%);
  }
  body:not([data-scenery="paper"]) header{margin-bottom:3.2rem;}
  body:not([data-scenery="paper"]) .foot{margin-top:3.2rem;}
  /* the two rules that fenced the title and the footer off from the work:
     the sheet's own torn edges are that fence now */
  body:not([data-scenery="paper"]) .divider{display:none;}

  /* Scenery is outside the pad crossbar: all eight of its slots keep their
     musical meanings.  This small, still control answers pointer users;
     Shift+B gives the keyboard the same three-way cycle. */
  .scenery{
    position:fixed;
    top:0.9rem;
    right:1rem;
    z-index:4;
    display:flex;
    align-items:center;
    gap:0.15rem;
    margin:0;
    padding:0.28rem 0.34rem;
    border:0;
    background:transparent;
    color:var(--faded);
    font:inherit;
    font-size:0.72rem;
  }
  /* on scenery the control takes the margins' treatment: pale ink over a
     small darkening breath of its own, never a panel */
  body:not([data-scenery="paper"]) .scenery{
    --ink:#EDE5D2;
    --faded:rgba(236,229,212,0.62);
    --gilt:#D9BA6E;
  }
  body:not([data-scenery="paper"]) .scenery::before{
    content:"";
    position:absolute;
    inset:-1.3rem -1.7rem;
    z-index:-1;
    background:radial-gradient(ellipse closest-side at center,
      rgba(13,18,16,0.40) 0%,
      rgba(13,18,16,0.33) 44%,
      rgba(13,18,16,0.20) 68%,
      rgba(13,18,16,0.09) 85%,
      rgba(13,18,16,0) 100%);
    pointer-events:none;
  }
  .scenery span{
    padding:0 0.36rem 0 0.28rem;
    font-variant:small-caps;
    letter-spacing:0.12em;
  }
  .scenery button{
    appearance:none;
    border:0;
    border-radius:999px;
    background:transparent;
    color:var(--faded);
    padding:0.24rem 0.48rem 0.3rem;
    font:inherit;
    cursor:pointer;
  }
  .scenery button[aria-pressed="true"]{
    background:transparent;
    color:var(--ink);
  }
  .scenery button:focus-visible{outline:1px solid var(--gilt);outline-offset:2px;}
  @media (max-width:44rem){
    /* the deckle bites about 2rem in at its deepest: the sheet may narrow on
       a small screen, but never so far that the tear reaches the words */
    .field::before{inset:-2.2rem -1.2rem;}
    /* the breath must end inside the window, or its floor reads as a band
       along the edge of the screen */
    body:not([data-scenery="paper"]) header::before,
    body:not([data-scenery="paper"]) .foot::before{inset:-2.8rem -2.6rem;}
    body:not([data-scenery="paper"]) header{margin-bottom:2.6rem;}
    body:not([data-scenery="paper"]) .foot{margin-top:2.6rem;}
    .scenery{top:0.45rem;right:0.45rem;}
    .scenery span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  }

  /* ---- footer ---- */
  footer{
    width:100%;
    text-align:center;
    color:var(--faded);
    font-size:0.9rem;
    letter-spacing:0.05em;
    min-height:1.4em;
  }
  /* the footer takes the scene's darkening breath through the box it sits in */
  .foot{width:100%;position:relative;isolation:isolate;}
  .hidden-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:-9999px;}