/* Estelle's Place (estelle-place-20261105-8.mjs): a view of the graph figure beside the curves and BANDS. The open
   button after her count on the CHAPTER 3 row opens it (its icon light while open, as the VU power symbol); BANDS
   stays on the time axis, and while the box is open it sits at its top right as a small round close button (an x;
   it closes to the bands). The box takes the place of the curves
   at their height: ESTELLE'S PLACE, the 20-tick clock with the count in the middle, the time
   with BPM and Known, her line, and at the bottom a row that tells what she is doing, giving way to the words she
   sings along. At the right a round TAP button of the clock's size for the listener's own count against hers, and
   at the right of the bottom row RACE (hidden in the game; out by the close button): the race line takes the place
   of what she is doing; in the game the top row has the time to the song's end from the start of the race (red in
   tenths from 5 s, the box pulsing) and GAME OVER; the finish big in the middle with streamers and her word, the game
   at once back at Ready under it, where the last result takes the clock's room until the next tap. */
/* The CHAPTER 3 row: Listening and the count, the open button after it; the result and her lines show in her place
   only (before Play her words stay in the row's place). The page root carries the same class while the place is
   open, so the button rules name the button. */
.meter-note .beat-bpm,.meter-note .beat-note{display:none}
.meter-note.is-idle-talk .beat-note{display:block}
button.estelle-open{display:inline;width:auto;height:auto;margin:0 0 0 .6em;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
button.estelle-open:hover{background:transparent}
button.estelle-open:focus-visible{outline:1px solid #778395;outline-offset:3px}
/* A middle grey (#8b95a4; owner 6 Nov 2026: between the first dim #525d6c and the VU symbol's #bcc3cc), light as the
   VU symbol while the place is open. */
/* 6 Nov 2026 later (owner): a size up (0.9 em) to look as big as the VU power symbol (its drawing fills less of its square),
   and in her place's peach: muted, light peach while open and on hover. */
.estelle-open-icon{display:inline-block;width:.9em;height:.9em;vertical-align:-.14em;fill:none;stroke:#b08b7b;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke 200ms ease}
button.estelle-open:hover .estelle-open-icon{stroke:#e8b49c}
button.estelle-open[aria-pressed=true] .estelle-open-icon{stroke:#e8b49c}
.meter-note.is-idle-talk button.estelle-open{visibility:hidden}
.layer .sound-curve.is-estelle .band-switch{top:.35rem;right:.55rem;bottom:auto;left:auto;z-index:2;width:.95rem;height:.95rem;border:1px solid #3a4250;border-radius:50%;font-size:0;letter-spacing:0;color:var(--klf-text-faint);transition:color 200ms ease,border-color 200ms ease}
.layer .sound-curve.is-estelle .band-switch::before,.layer .sound-curve.is-estelle .band-switch::after{content:'';position:absolute;left:50%;top:50%;width:.42rem;height:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.layer .sound-curve.is-estelle .band-switch::after{transform:translate(-50%,-50%) rotate(-45deg)}
.layer .sound-curve.is-estelle .band-switch:hover{color:var(--klf-text-bright);border-color:#525d6c}
.sound-curve.is-estelle .curve-row.curve-off{height:1.4rem}
.sound-curve.is-estelle .curve-row>*,.sound-curve.is-estelle .curve-axis{opacity:0;visibility:hidden;transition:opacity 600ms ease,visibility 0s linear 600ms}

/* Estelle's own look (owner 6 Nov 2026): a faint peach over the black, a warm border, her words in Lora italic and
   peach (blue until then, left over from the CHAPTER 3 row). Lora: SIL Open Font License, fonts/OFL-Lora.txt. */
@font-face{font-family:Lora;font-style:italic;font-weight:400 500;font-display:swap;src:url("./fonts/lora-italic.woff2") format("woff2")}
.estelle-view{position:absolute;top:0;left:0;right:0;bottom:0;box-sizing:border-box;display:flex;flex-direction:column;padding:.35rem .55rem;border:1px solid #4a3a36;background:linear-gradient(155deg,rgba(236,172,140,.12),rgba(236,172,140,.05) 50%,rgba(236,172,140,.025)),#08080a;overflow:hidden;text-align:left;cursor:default;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 600ms ease,visibility 0s linear 600ms}
.sound-curve.is-estelle .estelle-view{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 600ms ease}
.estelle-head{flex:none;display:flex;align-items:baseline;margin:0;font-size:.5rem;letter-spacing:.15em;line-height:1.9;text-transform:uppercase;white-space:nowrap;color:#e3d2c9}
.estelle-body{display:flex;flex:1;min-height:0;align-items:center;gap:.6rem}
.estelle-dial{position:relative;flex:none;width:2.47rem;height:2.47rem}
/* .sound-curve svg (the curves, 1.4rem high) would set its height too: the clock fills its dial, in the middle. */
.sound-curve .estelle-clock{display:block;width:100%;height:100%;overflow:visible}
.estelle-clock .estelle-face{fill:none;stroke:#1d232b;stroke-width:.8;transition:stroke 400ms ease}
.estelle-clock.is-running .estelle-face,.estelle-clock.is-done .estelle-face{stroke:#3a4250;transition:none}
.estelle-tick{stroke:#262d36;stroke-width:1.4;stroke-linecap:round;transition:stroke 400ms ease}
/* Counted ticks grey; the newest light a moment, fading to grey as the next one comes; full at 20 a lighter grey. */
.estelle-tick.is-lit{stroke:#6c7787;transition:stroke 600ms ease}
.estelle-tick.is-lit.is-new{stroke:#dfe3e8;transition:none}
.estelle-lane.is-done .estelle-tick.is-lit{stroke:#8b95a4}
.estelle-lane.is-done .estelle-tick.is-lit.is-new{stroke:#dfe3e8}
.estelle-clock.is-done:not(.is-flash) .estelle-face{transition:stroke 600ms ease}
/* A full ring flashes white a moment (owner 6 Nov 2026), then its ticks are gathered back; the 20 then fades. */
.estelle-clock.is-flash .estelle-face,.estelle-lane.is-done.is-flash .estelle-tick.is-lit{stroke:#fff;transition:none}
/* BASIC: after the flash the full ring drops to the darkest grey (Faint) before its ticks are gathered back. */
.estelle-view:not(.is-advanced) .estelle-lane.is-done.is-dim .estelle-tick.is-lit{stroke:var(--klf-text-faint);transition:stroke 500ms ease}
/* ADVANCED: a ring for each band (bass outside, snare, hi-hats as dots inside); the bands without the count dim with
   their own count; the rings come on from the outside in while she counts down. BASIC: the bass ring only. */
.estelle-view:not(.is-advanced) .estelle-lane.is-wide{display:none}
.estelle-lane{transition:opacity 500ms ease}
.estelle-lane.is-off{opacity:0}
.estelle-lane.is-wide .estelle-tick{stroke-width:1.1}
.estelle-lane[data-band=hats] .estelle-tick{stroke-width:1.2}
.estelle-lane.is-back .estelle-tick.is-lit{stroke:#3a4250}
.estelle-lane.is-back .estelle-tick.is-lit.is-new{stroke:#6c7787}
.estelle-view.is-advanced .estelle-num{font-size:.6rem}
.estelle-view.is-countdown .estelle-num{color:var(--klf-text-bright);transition:none}
.estelle-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:300;font-variant-numeric:tabular-nums;color:var(--klf-text-body);transition:color 450ms ease}
.estelle-num.is-beat{color:var(--klf-text-bright);transition:none}
.estelle-num.is-out{opacity:0;transition:opacity 700ms ease}
.estelle-text{flex:1;min-width:0}
.estelle-reading{display:flex;align-items:baseline;gap:.6rem;margin:0;min-height:.95rem;white-space:nowrap;overflow:hidden}
.estelle-time{font-size:.7rem;font-weight:300;line-height:1.3;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--klf-text-primary)}
.estelle-sum{font-size:.55rem;letter-spacing:.03em;font-variant-numeric:tabular-nums;color:var(--klf-text-body);opacity:0;transition:opacity 1.6s ease}
.estelle-sum.is-on{opacity:1;transition:opacity 300ms ease}
.estelle-sum.is-new .beat-val{animation:beat-match 1.4s ease}
.estelle-note{margin:0;font-family:Lora,Georgia,serif;font-size:.6rem;font-style:italic;line-height:1.45;letter-spacing:.01em;color:#e8b49c;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;opacity:0;transition:opacity 1.6s ease}
.estelle-note.is-on{opacity:1;transition:opacity 2s ease}
.estelle-note.is-on.is-sung{transition:opacity 400ms ease}
.estelle-note.is-on.is-result{transition:opacity 500ms ease}
.estelle-reading{transition:opacity 1.6s ease}
.estelle-reading.is-out{opacity:0}
.estelle-row{position:relative;flex:none;height:.85rem}
.estelle-tour,.estelle-words{position:absolute;inset:0;margin:0;font-size:.55rem;line-height:1.55;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0}
.estelle-tour{color:var(--klf-text-secondary);transition:opacity 600ms ease}
.estelle-tour.is-on{opacity:1}
.estelle-view.is-singing .estelle-tour{opacity:0;transition:opacity 300ms ease}
/* The words lie over the line, unseen but there: RACE in the line takes the clicks (6 Nov 2026). */
.estelle-words{font-family:Lora,Georgia,serif;font-style:italic;color:#d6ad9b;pointer-events:none;transition:opacity 1.6s ease}
.estelle-words.is-on{opacity:1;transition:opacity 400ms ease}
.estelle-off{position:absolute;inset:0 5.2rem 0 0;display:none;margin:0;font-size:.55rem;font-style:italic;line-height:1.55;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--klf-text-secondary)}
html.meter-off .estelle-off{display:block}
html.meter-off .estelle-tour,.estelle-view.is-race .estelle-off{visibility:hidden}
.estelle-view:not(.is-race) button.estelle-tap{display:none}
html.meter-off .estelle-reading,html.meter-off .estelle-num,html.meter-off .estelle-note,html.meter-off .estelle-words{visibility:hidden}
html.estelle-open .meter-note .beat-note{visibility:hidden}
.meter-note .beat-count{cursor:pointer}
.meter-note.is-idle-talk .beat-count{cursor:default}
.estelle-body .estelle-text{flex:1}
button.estelle-tap{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12rem;width:2.6rem;height:2.6rem;margin:0;padding:0;border:1px solid #3a4250;border-radius:50%;background:transparent;color:var(--klf-text-body);font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;transition:border-color 400ms ease,color 450ms ease,background 400ms ease}
button.estelle-tap:hover{border-color:#525d6c;background:transparent;color:var(--klf-text-bright)}
button.estelle-tap:focus-visible{outline:1px solid #778395;outline-offset:3px}
button.estelle-tap.is-tap{border-color:#bcc3cc;background:#11151b;color:var(--klf-text-bright);transition:none}
.estelle-tap-num{font-size:.7rem;font-weight:300;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:0;transition:color 600ms ease}
.estelle-tap-num:empty{display:none}
.estelle-tap-label{font-size:.42rem;line-height:1;letter-spacing:.15em;text-transform:uppercase;color:var(--klf-text-faint)}
button.estelle-tap.is-old .estelle-tap-num{color:var(--klf-text-faint)}
button.estelle-tap.is-warm .estelle-tap-num,.estelle-time.is-warm{color:var(--klf-text-faint)}
.estelle-row .estelle-tour,.estelle-row .estelle-words{right:3.9rem}
.estelle-race-line{position:absolute;inset:0;margin:0;font-size:.55rem;line-height:1.55;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--klf-text-secondary);opacity:0;visibility:hidden;transition:opacity 400ms ease,visibility 0s linear 400ms}
.estelle-view.is-race .estelle-race-line{opacity:1;visibility:visible;transition:opacity 400ms ease}
.estelle-view.is-race .estelle-tour,.estelle-view.is-race .estelle-words{opacity:0;visibility:hidden}
/* RACE a button in the line (owner 6 Nov 2026), ADVANCED (BASIC in it) at the right in red as the race's own. */
button.estelle-race,button.estelle-mode{position:static;display:inline;width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent;font:inherit;font-size:.5rem;font-weight:300;letter-spacing:.15em;line-height:inherit;text-transform:uppercase;white-space:nowrap;color:var(--klf-text-bright);cursor:pointer;transition:color 200ms ease}
button.estelle-mode{display:block;line-height:1.7;color:#cf7f89}
button.estelle-race:hover{background:transparent;color:var(--klf-text-bright)}
button.estelle-mode:hover{background:transparent;color:#e7a3ab}
button.estelle-race:focus-visible,button.estelle-mode:focus-visible,button.estelle-vs:focus-visible{outline:1px solid #778395;outline-offset:3px}
.estelle-race-buttons{position:absolute;top:0;right:0;bottom:0;display:flex;gap:.9em}
.estelle-win{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;overflow:hidden;background:rgba(12,9,9,.82);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 700ms ease,visibility 0s linear 700ms}
.estelle-win.is-on{opacity:1;visibility:visible;transition:opacity 250ms ease}
.estelle-win-title{position:relative;z-index:1;margin:0;font-size:1.1rem;font-weight:300;line-height:1.2;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;color:var(--klf-text-bright)}
.estelle-win.is-hers .estelle-win-title{color:#f0c2aa}
.estelle-win-sub{position:relative;z-index:1;margin:0;font-size:.55rem;letter-spacing:.06em;color:var(--klf-text-primary)}
.estelle-win-word{position:relative;z-index:1;margin:0;font-family:Lora,Georgia,serif;font-size:.6rem;font-style:italic;letter-spacing:.01em;color:#e8b49c}
.estelle-win-word:empty{display:none}
.estelle-streamer{position:absolute;top:-15%;left:var(--x);width:3px;height:.85rem;border-radius:1px;background:var(--c);opacity:0;animation:estelle-streamer var(--t) cubic-bezier(.35,.55,.55,1) var(--d) forwards}
@keyframes estelle-streamer{0%{top:-15%;opacity:1;transform:translateX(0) rotate(0)}50%{transform:translateX(7px) rotate(calc(var(--r) / 2))}85%{opacity:1}100%{top:110%;opacity:0;transform:translateX(-4px) rotate(var(--r))}}
.estelle-intro{min-width:0;margin-left:auto;margin-right:1.45rem;overflow:hidden;text-overflow:ellipsis;color:var(--klf-text-secondary);letter-spacing:.12em}
.estelle-view.is-race .estelle-intro,.estelle-view:not(.is-race) .estelle-game{display:none}
.estelle-game{margin-left:auto;margin-right:1.45rem;color:var(--klf-text-body);letter-spacing:.12em;font-variant-numeric:tabular-nums}
.estelle-game.is-red{color:#cf7f89}
.estelle-view.is-final{animation:estelle-final 1s ease-in-out infinite}
@keyframes estelle-final{0%,100%{border-color:#4a3a36;box-shadow:none}50%{border-color:#cf7f89;box-shadow:inset 0 0 14px rgba(207,127,137,.16)}}
@media(prefers-reduced-motion:reduce){.estelle-view.is-final{animation:none;border-color:#cf7f89}.estelle-win{transition:none}.estelle-streamer{display:none}.layer .sound-curve.is-estelle .band-switch,.estelle-race-line,button.estelle-race,button.estelle-tap,.estelle-tap-num,.estelle-open-icon,.estelle-view,.estelle-tick,.estelle-lane,.estelle-num,.estelle-sum,.estelle-note,.estelle-tour,.estelle-words,.estelle-clock .estelle-face{transition:none!important}.estelle-sum.is-new .beat-val{animation:none}}
.estelle-view.is-race button.estelle-mode{display:none}
/* VU off: TURN VU ON in the place of RACE, ON its switch (estelle-place-*.mjs); RACE again once it is on. The open icon
   after Listening on the CHAPTER 3 row goes with it. */
.estelle-vu{display:none;align-items:baseline;gap:.5em;font-size:.5rem;font-weight:300;letter-spacing:.15em;line-height:1.7;text-transform:uppercase;white-space:nowrap;color:var(--klf-text-secondary)}
html.meter-off .estelle-vu{display:flex}
html.meter-off button.estelle-mode{display:none}
button.estelle-vu-on{position:static;display:inline;width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent;font:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;color:var(--klf-text-bright);cursor:pointer;transition:color 200ms ease}
button.estelle-vu-on:hover{background:transparent;color:var(--klf-text-bright)}
button.estelle-vu-on:focus-visible{outline:1px solid #778395;outline-offset:3px}
html.meter-off .meter-note button.estelle-open{visibility:hidden;pointer-events:none}
html.meter-off .estelle-view.is-race .estelle-race-line{right:5.2rem}
.estelle-result{display:none;min-width:0}
.estelle-view.has-result .estelle-dial,.estelle-view.has-result .estelle-reading,.estelle-view.has-result .estelle-note{display:none}
.estelle-view.has-result .estelle-result{display:block}
.estelle-result-song,.estelle-result-line{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.estelle-result-song{font-size:.6rem;line-height:1.5;letter-spacing:.03em;color:var(--klf-text-bright)}
.estelle-result-line{font-size:.55rem;line-height:1.55;letter-spacing:.03em;font-variant-numeric:tabular-nums;color:var(--klf-text-body)}
/* INFO: a small round i after the title (as the close button), her words on the place over the clock and the bottom
   row, ADVANCED's own in ADVANCED, her name in Lora; not in the race. */
button.estelle-info{flex:none;align-self:center;display:inline-flex;align-items:center;justify-content:center;width:.75rem;height:.75rem;margin:0 0 0 .55em;padding:0;border:1px solid #5a4843;border-radius:50%;background:transparent;font-family:Lora,Georgia,serif;font-size:.5rem;font-style:italic;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;color:#c9a698;cursor:pointer;transition:color 200ms ease,border-color 200ms ease}
button.estelle-info:hover,button.estelle-info[aria-expanded=true]{background:transparent;border-color:#8a6c62;color:#f0c2aa}
button.estelle-info:focus-visible{outline:1px solid #778395;outline-offset:2px}
.estelle-view.is-race button.estelle-info{display:none}
.estelle-info-text{position:absolute;top:1.35rem;left:.55rem;right:.55rem;bottom:.35rem;display:none;overflow:hidden;cursor:pointer}
.estelle-view.is-info .estelle-info-text{display:block}
.estelle-view.is-info .estelle-body,.estelle-view.is-info .estelle-row{visibility:hidden}
.estelle-info-text p{margin:0;font-size:.55rem;line-height:1.55;letter-spacing:.03em;color:#c8c4c2}
.estelle-view.is-advanced .estelle-info-basic,.estelle-view:not(.is-advanced) .estelle-info-advanced{display:none}
.estelle-info-text .estelle-sign{margin-top:.2rem;font-family:Lora,Georgia,serif;font-size:.6rem;font-style:italic;letter-spacing:.01em;color:#e8b49c}
.estelle-view:not(.is-advanced) button.estelle-vs,.estelle-view.is-race button.estelle-vs,html.meter-off button.estelle-vs{display:none}
button.estelle-vs{position:static;display:inline;width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent;font:inherit;font-size:.5rem;font-weight:300;letter-spacing:.15em;line-height:inherit;text-transform:uppercase;white-space:nowrap;color:var(--klf-text-bright);cursor:pointer;transition:color 200ms ease}
button.estelle-vs{align-self:center}
.estelle-vs-text{position:absolute;top:1.35rem;left:.55rem;right:.55rem;bottom:.35rem;display:none;overflow:hidden;cursor:pointer}
.estelle-view.is-vs .estelle-vs-text{display:block}
.estelle-view.is-vs .estelle-body,.estelle-view.is-vs .estelle-row{visibility:hidden}
.estelle-vs-text p{display:flex;gap:.7em;margin:0;font-size:.55rem;line-height:1.55;letter-spacing:.03em;white-space:nowrap;color:var(--klf-text-body)}
.estelle-vs-text p.estelle-vs-sum{display:block;overflow:hidden;text-overflow:ellipsis;font-family:Lora,Georgia,serif;font-style:italic;letter-spacing:.01em;color:#e8b49c}
.estelle-vs-time{flex:none;color:var(--klf-text-secondary)}
.estelle-vs-song{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.estelle-vs-won{flex:none;color:var(--klf-text-primary)}