@font-face { font-family: Anton; src: url(../assets/fonts/Anton-Regular.ttf); }
@font-face { font-family: Bangers; src: url(../assets/fonts/Bangers-Regular.ttf); }
@font-face { font-family: "Share Tech Mono"; src: url(../assets/fonts/ShareTechMono-Regular.ttf); }

/* Tokens: change an ink, size or gap here. 13px is the smallest text anywhere. */
:root {
  --tar: #0B0B0A; --paper: #E8E4DA; --block: #1A1A18; --ink: #F2EFE6; --grey: #B9B4A6; --acid: #D6FF00; --pink: #FF48B0;
  --sheet: #EDE9DF;                   /* card paper, a touch lighter than the sheet */
  --fade: rgba(11,11,10,.75);         /* secondary text on paper; grey is only for the dark tar */
  --rest: #26241f; --hot: #B23A86;    /* button on a dark overlay; focused button */
  --tape: rgba(180,175,160,.85); --soft: rgba(11,11,10,.55); --dull: #8E8A7E;
  --dots: radial-gradient(rgba(11,11,10,.2) 1px, transparent 1.5px) 0 0 / 6px 6px;
  --dots-light: radial-gradient(rgba(242,239,230,.13) 1px, transparent 1.5px) 0 0 / 6px 6px;
  --head: Anton; --mark: Bangers; --mono: "Share Tech Mono", monospace;
  --body: var(--mono);                /* running text in the menu pages; the owner may switch this font */
  --fs-s: 13px; --fs-m: 15px; --fs-l: 17px;
  --m: 90px; --gap: 22px; --off: 6px;
}
* { box-sizing: border-box; }
html { background: var(--tar); }
body { margin: 0; font-family: var(--mono); color: var(--tar); }
body.game { position: fixed; inset: 0; overflow: hidden; user-select: none; }
button { font: inherit; color: inherit; border: 0; padding: 0; cursor: pointer; }
a { color: var(--tar); text-underline-offset: 3px; }
a:hover, a:focus { background: var(--acid); outline: none; }

#stage { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; overflow: hidden; }
#cv { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; }
.screen { position: absolute; inset: 0; display: none; }
.screen.on { display: block; animation: enter .2s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
.screen > *, .overlay > * { position: absolute; }

/* ---------- shared parts ---------- */

/* small label: secondary text, ink at reduced opacity. .note may wrap, .meta keeps its line breaks */
.small-print, .label, .meta, .note { font-size: var(--fs-m); letter-spacing: 1px; color: var(--fade); }
.small-print { white-space: nowrap; }
.label { letter-spacing: 3px; }
.meta { line-height: 1.7; white-space: pre; }
a.small-print { text-decoration: underline; outline: none; }
a.small-print:hover, a.small-print:focus { color: var(--tar); }

/* plate: a paper sheet with a pink offset; --off sets the offset */
.plate { background: var(--paper) var(--dots); border: 4px solid var(--tar); box-shadow: var(--off) var(--off) 0 var(--pink); }

/* card: a paper slip; pink and lifted when it holds focus */
.card { background: var(--sheet) var(--dots); border: 3px solid var(--tar); box-shadow: 4px 4px 0 var(--soft); outline: none; }
.card:focus-within { border-color: var(--pink); box-shadow: 6px 6px 0 var(--pink); background-color: var(--ink); }

/* button: black block; .opt is the secondary, paper with an outline, .sel marks the chosen one */
.btn { position: relative; padding: 8px 34px 6px; font: 30px/1.2 var(--head); letter-spacing: 2px; text-transform: uppercase; color: var(--ink); background: var(--block) var(--dots-light); outline: none; }
.btn:focus { background-color: var(--hot); }
.btn:focus::after, #a-drop:focus b::after { content: ""; position: absolute; left: -22px; right: -22px; top: -14px; bottom: -14px; border: 4px solid var(--acid); border-radius: 50%; transform: rotate(-2deg); pointer-events: none; }
.btn:disabled { opacity: .3; cursor: default; }
.btn.sm { font-size: 22px; padding: 6px 22px 4px; }
.btn.big { position: absolute; font-size: 46px; padding: 12px 70px 8px; }
.btn.big.sm { font-size: 32px; padding: 10px 34px 6px; }
.btn.opt { padding-left: 30px; padding-right: 30px; background: var(--paper) var(--dots); color: var(--tar); border: 3px solid var(--tar); }
.btn.opt:focus { background-color: var(--paper); }
.btn.opt.sel { background: var(--tar) var(--dots-light); color: var(--ink); box-shadow: 5px 4px 0 var(--pink); }
.btn.opt.sel:focus { background-color: var(--tar); }
.row { display: flex; gap: var(--gap); }

/* tag: a small printed label. Default is ink on tar; .pink and .acid recolour it; .sm sets the small size on any of them */
.tag { padding: 1px 8px 0; font-size: var(--fs-s); line-height: 16px; letter-spacing: 2px; color: var(--ink); background: var(--tar); transform: rotate(-4deg); }
.tag.pink { color: var(--tar); background: var(--pink); }
.tag.acid { padding: 3px 16px 1px; font: italic 28px var(--mark); letter-spacing: 2px; color: var(--tar); background: var(--acid) var(--dots); transform: rotate(-1deg); }
.tag.sm { padding: 2px 8px 0; font: var(--fs-s)/16px var(--mono); letter-spacing: 2px; }

/* stamp: Bangers, tilted; .pink is outlined, .block is solid acid with a pink offset */
.stamp { padding: 4px 14px; font: 26px var(--mark); letter-spacing: 2px; transform: rotate(-3deg); white-space: pre; }
.stamp.pink { color: var(--pink); border: 3px solid var(--pink); }
.stamp.block { color: var(--tar); background: var(--acid); box-shadow: var(--off) var(--off) 0 var(--pink); }

/* screen furniture */
.cover.big::before, #song::before, #yt-photo::before { content: ""; position: absolute; background: var(--tape); box-shadow: 0 2px 4px rgba(0,0,0,.25); }   /* a strip of tape */
.tape-label { padding: 6px 26px; font: 26px var(--head); letter-spacing: 2px; color: var(--ink); background: var(--tar) var(--dots-light); transform: rotate(-1.5deg); box-shadow: 0 3px 0 var(--acid); }
.screen > .tape-label { left: 56px; top: 64px; }
.cover { background: var(--block) var(--dots-light); }
.cover img, .cover canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover img { filter: contrast(1.1) grayscale(.15); }
.cover.big { left: var(--m); top: 120px; width: 240px; height: 240px; transform: rotate(-2.5deg); border: 4px solid var(--tar); box-shadow: var(--off) var(--off) 0 var(--pink); }
.cover.big::before { left: 70px; top: -18px; width: 100px; height: 26px; transform: rotate(3deg); z-index: 2; }
.title { left: 370px; top: 104px; right: var(--m); margin: 0; font: 72px/1.05 var(--head); text-transform: uppercase; text-shadow: 4px 3px 0 var(--pink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.byline { left: 372px; top: 190px; font: 28px var(--mono); }
.meta { left: 372px; top: 232px; }

#k-num.tap { animation: tap .12s ease-out; }
@keyframes tap { from { color: var(--pink); transform: translateY(-6px); } }

/* ---------- shared by the stage screens ---------- */
.actions { left: 72px; top: 628px; display: flex; align-items: center; gap: 24px; }
#yt-in::placeholder { color: var(--fade); opacity: 1; }
#a-msg { width: 1100px; font: italic 28px var(--mark); letter-spacing: 2px; color: var(--pink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- add your audio ---------- */
#a-drop { left: var(--m); top: 400px; width: 1100px; height: 160px; padding: 0; font: inherit; color: var(--tar); cursor: pointer; outline: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: var(--paper) var(--dots); border: 4px dashed var(--tar); transform: rotate(.3deg); }
#a-drop b { position: relative; font: 54px/1 var(--head); letter-spacing: 3px; }
#a-drop:focus { border-style: solid; background-color: var(--ink); box-shadow: var(--off) var(--off) 0 var(--pink); }
#a-drop:disabled { cursor: default; border-color: var(--soft); }
#a-drop span { letter-spacing: 2px; }
#a-msg { left: 94px; top: 574px; }
#audio-step.yt #a-drop { width: 500px; height: 188px; top: 374px; }
#audio-step.yt #a-drop b { font-size: 40px; }
#audio-step.yt #a-drop span { font-size: var(--fs-s); letter-spacing: 1px; padding: 0 14px; text-align: center; }
#a-yt { display: none; left: 620px; top: 372px; width: 570px; height: 190px; padding: 8px 20px 10px; flex-direction: column; gap: 8px; transform: rotate(-.3deg); }
#audio-step.yt #a-yt { display: flex; }
#a-yt b { font: italic 30px var(--mark); letter-spacing: 3px; color: var(--pink); }
#a-yt > span { font-size: var(--fs-s); }
#yt-in { height: 46px; padding: 2px 14px 0; font: 22px var(--mono); color: var(--tar); background: var(--ink); border: 3px solid var(--tar); border-radius: 0; outline: none; user-select: text; }
#yt-in::placeholder { letter-spacing: 2px; }
#yt-in:focus { box-shadow: 4px 4px 0 var(--acid); }
.yt-row { display: flex; align-items: center; gap: 28px; }

/* ---------- making your chart ---------- */
#m-sheet, #k-sheet { --off: 8px; left: var(--m); top: 290px; width: 1100px; height: 250px; transform: rotate(-.4deg); }
#m-status, #k-status { left: 126px; top: 312px; font: italic 44px var(--mark); letter-spacing: 4px; color: var(--pink); }
#m-pct, #k-num { left: 126px; top: 366px; font: 150px/1 var(--head); }
#m-bar { left: 126px; top: 508px; width: 1028px; height: 16px; overflow: hidden; background: var(--pink); }
#m-bar i { display: block; height: 100%; width: 100%; background: var(--tar); transform-origin: 0 0; transform: scaleX(0); }
#m-bar.wait i { width: 200%; background: repeating-linear-gradient(90deg, var(--tar) 0 24px, var(--pink) 24px 48px); animation: wait .6s linear infinite; }
@keyframes wait { to { transform: translateX(-48px); } }
#m-note, #k-note { left: 94px; top: 568px; }

#pause .btn:not(:focus) { background-color: var(--rest); }

/* ---------- play HUD ---------- */
#play { color: var(--ink); }
#plate-top { left: 306px; top: 16px; width: 690px; height: 78px; }
#sec { position: absolute; left: 0; top: 4px; font: 38px/1.1 var(--head); letter-spacing: 1px; color: var(--tar); white-space: nowrap; max-width: 330px; overflow: hidden; text-overflow: ellipsis; }
#clock { position: absolute; left: 0; right: 0; top: 78px; text-align: right; font-size: 28px; letter-spacing: 2px; color: var(--tar); }
#sec-line { position: absolute; left: 0; top: 52px; width: 330px; height: 7px; background: var(--acid); transform: rotate(-.6deg); }
#prog { position: absolute; left: -10px; right: -10px; top: 70px; height: 5px; background: var(--pink); }
#prog i { display: block; height: 100%; width: 100%; background: var(--tar); transform-origin: 0 0; transform: scaleX(0); }
#diff-box { left: 826px; top: 28px; padding: 4px 22px 2px; font-size: 26px; }
#mode-tag { right: 468px; top: 28px; padding: 4px 18px 2px; font: italic 26px var(--mark); transform: rotate(-2deg); }
/* Left column: nothing shares a left edge, and the combo ellipse runs over the torn paper edge on purpose. */
#score-lbl { left: 40px; top: 70px; font: italic 28px var(--mark); letter-spacing: 3px; color: var(--ink); transform: rotate(-3deg); }
#score { left: 30px; top: 94px; font: 84px/1 var(--head); color: var(--ink); text-shadow: 5px 5px 0 var(--pink); white-space: nowrap; transform: rotate(-2deg); transform-origin: 0 50%; }
#score[data-d="5"], #score[data-d="6"] { font-size: 74px; } #score[data-d="7"] { font-size: 62px; } #score[data-d="8"] { font-size: 54px; }
#mult { --r: 1.8deg; left: 50px; top: 404px; width: 222px; height: 84px; padding: 0 14px; display: flex; align-items: center; gap: 14px; border: 3px solid var(--ink); background: var(--tar); color: var(--ink); transform: rotate(var(--r)); }
#mult b { padding-top: 6px; font: 56px/1 var(--head); }
#pips { display: grid; grid-template-columns: repeat(5, 10px); gap: 5px 4px; }
#pips i { width: 10px; height: 10px; border: 2px solid currentColor; }
#pips i.on { background: currentColor; }
#play.max #mult { background: var(--ink); color: var(--tar); box-shadow: 6px 6px 0 var(--pink); }
#play.star #mult { background: var(--acid); color: var(--tar); border-color: var(--acid); }
#combo-wrap { left: 4px; top: 190px; width: 330px; height: 190px; }
#combo-lbl { position: absolute; left: 62px; top: 0; font: italic 36px var(--mark); letter-spacing: 3px; color: var(--ink); transform: rotate(-3deg); }
#ellipse { position: absolute; left: 0; top: 34px; width: 330px; height: 150px; border: 7px solid var(--acid); border-radius: 50%; transform: rotate(-4deg); }
/* The numeral is centred in the ellipse and shrinks by digit count so it stays inside. */
#combo { position: absolute; left: 0; top: 34px; width: 330px; height: 150px; display: flex; align-items: center; justify-content: center; font: 80px/1 var(--head); color: var(--paper); text-shadow: 4px 4px 0 var(--tar); }
#combo[data-d="4"] { font-size: 66px; } #combo[data-d="5"] { font-size: 54px; }
#star { left: 40px; top: 524px; width: 232px; transform: rotate(-1.2deg); }
#star-lbl { position: absolute; top: -4px; left: 0; font-size: var(--fs-s); letter-spacing: 3px; color: var(--grey); }
#star-bar { position: absolute; left: 0; top: 18px; width: 232px; height: 28px; border: 3px solid var(--ink); }
#star-fill { position: absolute; inset: 0; background: var(--acid); transform-origin: 0 0; transform: scaleX(0); transition: transform .25s ease-out; }
#star-bar u { position: absolute; left: 50%; top: -9px; height: 40px; width: 3px; background: var(--pink); }
#star-hint { position: absolute; left: 116px; top: 50px; font: italic 30px var(--mark); letter-spacing: 3px; color: var(--grey); opacity: .45; transform: translateX(-50%) rotate(-3deg); }
#play.ready #star-hint, #play.star #star-hint { color: var(--acid); opacity: 1; }
#play.ready #star-hint { animation: blink .6s steps(2) infinite; }
#play.ready #star-bar { animation: ready .6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
@keyframes ready { 50% { border-color: var(--acid); transform: scale(1.06); } }
#play.star #star-lbl { color: var(--acid); }
/* Where the eyes are: below the hit line, centre lane, while star power can be fired. */
#cue { display: none; left: 570px; top: 644px; width: 140px; padding: 2px 0 0; font-size: 46px; text-align: center; transform: rotate(-3deg); animation: blink .6s steps(2) infinite; }
#play.ready #cue { display: block; }
#acc-card { left: 960px; top: 168px; width: 262px; padding: 12px 14px 10px; color: var(--tar); transform: rotate(1.2deg); box-shadow: 0 0 0 4px var(--paper), 7px 6px 0 4px var(--pink); }
#acc-card b { font: italic 28px var(--mark); letter-spacing: 3px; }
#acc { font: 66px/1.05 var(--head); letter-spacing: -1px; margin: 2px 0 6px; }
#hist { width: 100%; height: 34px; display: block; border-top: 2px solid var(--tar); padding-top: 4px; }
.early-late { display: flex; justify-content: space-between; font-size: var(--fs-s); letter-spacing: 2px; color: var(--fade); margin-top: 2px; }
#counts { margin-top: 6px; font-size: var(--fs-s); letter-spacing: 1px; text-align: center; }
/* Song label: a taped slip under the accuracy card. With a video it is a name above the video instead. */
#song { left: 964px; top: 412px; width: 256px; height: 88px; padding: 6px; display: flex; gap: 10px; color: var(--tar); transform: rotate(-1.5deg); }
#song::before { left: 92px; top: -14px; width: 66px; height: 20px; transform: rotate(-4deg); }
#song-cover { position: static; flex: none; width: 74px; height: 74px; border: 2px solid var(--tar); }
#song > div:last-child { min-width: 0; align-self: center; }
#song b { display: block; font: 26px/1.1 var(--head); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#song span { display: block; margin-top: 3px; font-size: var(--fs-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#play.yt #song { top: auto; bottom: calc(max(210px, 200px / var(--s, 1) + 1px) + 62px); height: 38px; padding: 4px 12px; }
#play.yt #song::before, #play.yt #song-cover { display: none; }
#play.yt #song > div:last-child { display: flex; align-items: baseline; gap: 10px; width: 100%; }
#play.yt #song b { font-size: 22px; }
#play.yt #song span { margin: 0; }
#count { left: 360px; width: 560px; top: 230px; text-align: center; font: 230px/1 var(--head); color: var(--ink); text-shadow: 8px 8px 0 var(--pink); pointer-events: none; }

/* YouTube video: a taped photo in the right margin. Always on top, never dimmed or covered. The frame is at
   least 200x200 real pixels (--s is the stage scale); idle, it waits off stage so a cued player stays alive. */
#yt-photo { position: absolute; right: 6px; bottom: 20px; z-index: 5; padding: 6px; background: var(--paper); border: 3px solid var(--tar); box-shadow: 6px 6px 0 var(--pink); transform: rotate(1.2deg); }
#yt-photo:not(.on) { right: auto; left: -3000px; }
#yt-photo::before { left: 38%; top: -22px; width: 84px; height: 22px; transform: rotate(-3deg); }
#yt-frame { width: max(250px, calc(200px / var(--s, 1) + 1px)); height: max(210px, calc(200px / var(--s, 1) + 1px)); background: var(--tar); }
#yt-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- overlays ---------- */
.overlay { position: absolute; inset: 0; display: none; }
.overlay.on { display: flex; }
#pause { background: rgba(11,11,10,.82); flex-direction: column; align-items: center; justify-content: center; gap: var(--gap); }
#pause h2 { position: static; margin: 0 0 10px; font: 120px/1 var(--head); color: var(--paper); text-shadow: 6px 5px 0 var(--pink); }
#pause .btn { width: 400px; text-align: center; }
#pause { gap: 16px; }
#pause h2 { font-size: 100px; }
.vol { position: static; display: flex; align-items: center; gap: 16px; width: 400px; padding: 8px 18px 4px; color: var(--ink); font: 26px var(--head); letter-spacing: 2px; background: var(--rest) var(--dots-light); }
.vol span, .vol b { position: static; font-weight: normal; }
.vol b { min-width: 44px; text-align: right; }
#vol-in { flex: 1; min-width: 0; height: 30px; margin: 0; background: none; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; }
#vol-in::-webkit-slider-runnable-track { height: 12px; background: var(--paper); border: 3px solid var(--ink); }
#vol-in::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 30px; margin-top: -11px; background: var(--acid); border: 3px solid var(--tar); box-shadow: 3px 3px 0 var(--pink); }
#vol-in::-moz-range-track { height: 8px; background: var(--paper); border: 3px solid var(--ink); }
#vol-in::-moz-range-thumb { width: 16px; height: 24px; background: var(--acid); border: 3px solid var(--tar); border-radius: 0; box-shadow: 3px 3px 0 var(--pink); }
.vol:focus-within { background-color: var(--hot); }
#pause-note { position: static; max-width: 440px; text-align: center; white-space: normal; color: var(--grey); line-height: 1.4; }
#plate { align-items: center; justify-content: center; background: rgba(11,11,10,.55); }
#plate .stamp { padding: 6px 50px; font: italic 80px var(--mark); letter-spacing: 6px; background-image: var(--dots); transform: rotate(-2deg); box-shadow: 8px 8px 0 var(--pink); }
#drop { align-items: center; justify-content: center; background: rgba(11,11,10,.8); font: 100px var(--head); color: var(--acid); border: 8px dashed var(--acid); inset: 24px; }
#toast { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); padding: 6px 20px; font: 24px var(--head); letter-spacing: 2px; background: var(--acid); color: var(--tar); opacity: 0; transition: opacity .15s; pointer-events: none; white-space: nowrap; }
#toast.on { opacity: 1; }

/* ---------- feedback: classes are added by main.js and removed on animationend ---------- */
#mult.punch { animation: punch .45s ease-out; }
@keyframes punch { 0% { transform: rotate(var(--r)) scale(1); } 20% { transform: rotate(var(--r)) scale(1.3); background: var(--acid); color: var(--tar); border-color: var(--acid); } 100% { transform: rotate(var(--r)) scale(1); } }
#mult.drop { animation: drop .6s ease-out; }
@keyframes drop { 0% { background: var(--dull); color: var(--tar); transform: rotate(var(--r)) translateY(10px); } 100% { transform: rotate(var(--r)); } }
#combo.jolt { animation: jolt .6s ease-out; }
@keyframes jolt { 0% { transform: translateX(-12px); color: var(--pink); } 20% { transform: translateX(10px); } 40% { transform: translateX(-7px); color: var(--pink); } 60% { transform: translateX(4px); color: var(--pink); } 100% { transform: none; } }
#ellipse.snap { animation: snap .55s steps(5); }
@keyframes snap { 0% { opacity: 0; transform: rotate(-4deg) scale(.5); } 45% { opacity: 0; transform: rotate(-4deg) scale(.5); } 100% { opacity: 1; transform: rotate(-4deg) scale(1); } }
#play #star-bar.flash { animation: starflash .5s ease-out; }
@keyframes starflash { 0% { background: var(--acid); transform: scale(1.14); } 100% { background: transparent; transform: none; } }
/* Stamps land in fixed slots: multiplier left of the highway, combo under the left column, star beside the meter. */
.fx { --rot: -7deg; left: 0; top: 0; padding: 4px 16px 0; font: 84px/1 var(--mark); text-align: center; opacity: 0; pointer-events: none; transform: rotate(var(--rot)); }
.fx.go { animation: stamp 1.4s ease-out forwards; }
@keyframes stamp { 0% { opacity: 0; transform: rotate(var(--rot)) scale(1.8); } 10% { opacity: 1; transform: rotate(var(--rot)) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; } }
#st-mult { --rot: -5deg; left: 380px; top: 140px; font-size: 72px; }
#st-combo { --rot: -2deg; left: 34px; top: 636px; font-size: 40px; }
#st-star { --rot: -3deg; left: 300px; top: 522px; padding: 4px 12px 0; font-size: 32px; }

@media (prefers-reduced-motion: reduce) {
  .fx.go { animation-name: stamp-calm; }
  @keyframes stamp-calm { 0% { opacity: 0; } 10% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
  #mult.punch { animation-name: punch-calm; } #mult.drop { animation-name: drop-calm; } #combo.jolt { animation-name: jolt-calm; } #ellipse.snap { animation-name: snap-calm; } #play #star-bar.flash { animation-name: flash-calm; }
  @keyframes punch-calm { 0% { background: var(--acid); color: var(--tar); } 100% { } }
  @keyframes drop-calm { 0% { background: var(--dull); color: var(--tar); } 100% { } }
  @keyframes jolt-calm { 0% { color: var(--pink); } 60% { color: var(--pink); } 100% { } }
  @keyframes snap-calm { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes flash-calm { 0% { background: var(--acid); } 100% { background: transparent; } }
  #play.ready #star-bar { animation: none; border-color: var(--acid); }
  #star-fill { transition: none; }
  .screen.on { animation: none; }
  #play.ready #star-hint, #cue { animation: none; }
  #toast { transition: none; }
  #m-bar.wait i { animation: none; }
}

/* Body text weight (owner, 2026-10-10): Share Tech Mono has one thin weight, so running text gets a hair of stroke in
   its own colour, at the same size. Display type, numerals and buttons get none. The menu pages do the same (pages.css). */
.note, .small-print, .label, .meta, #controls td:last-child, #s-yt-note { -webkit-text-stroke: .35px currentColor; }