:root {
  --bg: #0a0f1c; --bar: #0d1424; --panel: rgba(17, 26, 45, .78); --panel-solid: #111a2d;
  --raised: #16213a; --line: #22304c; --line-soft: #1a2640;
  --text: #e8edf7; --muted: #8d9ab3; --faint: #5d6a85;
  --blue: #4f8cff; --violet: #9b6bff; --pink: #ff5fb4; --orange: #ff9a4d; --gold: #ffd27a;
  --cta: linear-gradient(90deg, #c9b8ff, #ffc2e3);
  --spectrum: linear-gradient(90deg, #4f8cff, #9b6bff 40%, #ff5fb4 72%, #ff9a4d);
  --serif: 'New York', ui-serif, Georgia, serif;
  font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
  color: var(--text);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; font-size: 13px; }
/* Scrollbars in the palette: thin, violet, no track, so a scrolling panel looks like the rest of the page. */
* { scrollbar-width: thin; scrollbar-color: rgba(155, 107, 255, .45) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(155, 107, 255, .4); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 95, 180, .6); }
::-webkit-scrollbar-corner { background: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
kbd { font: 600 10.5px -apple-system, sans-serif; border: 1px solid var(--line); border-bottom-width: 2px;
      border-radius: 5px; padding: 1px 6px; color: #c9d2e3; background: var(--raised); }

/* stage */
.stage { position: fixed; inset: 0; }
.stage canvas.gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.labels .tick { position: absolute; transform: translate(-50%, -50%); font: 500 10.5px -apple-system, sans-serif;
                color: rgba(200, 212, 235, .72); white-space: nowrap; text-shadow: 0 0 6px #0a0f1c, 0 0 2px #0a0f1c; }
.labels .tick.hz { font: 600 10.5px -apple-system, sans-serif; color: #f2f5fc; padding: 1px 6px; border-radius: 5px;
                   background: rgba(60, 78, 120, .45); border: 1px solid rgba(190, 215, 255, .28); }
.labels .tick.arr { font: 600 10px -apple-system, sans-serif; color: rgba(255, 255, 255, .8); letter-spacing: .04em; text-shadow: 0 1px 4px rgba(10, 15, 28, .9); }
.labels .tick.side { transform: translate(-100%, -50%); color: var(--muted); }
.labels .tick.hzband { transform: translate(-100%, -50%); font: 600 10.5px -apple-system, sans-serif; color: #eef2fb;
                       padding-right: 7px; border-right: 3px solid var(--c); pointer-events: auto; transition: color .15s; }
.labels .tick.hzband span { color: var(--muted); font-weight: 500; }
.labels .tick.hzband.hot { color: #fff; text-shadow: 0 0 10px var(--c); }
.labels .tick.hzband.hot span { color: var(--c); }
.labels .tick.tsec { font: 650 11.5px -apple-system, sans-serif; color: #f1ecff; text-shadow: 0 1px 4px #0a0f1c; }
.labels .tick.big { font: 600 11px -apple-system, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #dfe6f5; }
.labels .tick.sec { font: 600 11px -apple-system, sans-serif; letter-spacing: .08em; color: #fff; padding: 2px 7px;
                    border-radius: 6px; background: rgba(13, 20, 36, .7); border: 1px solid rgba(155, 107, 255, .45); }
.vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5, 8, 16, .75) 100%); }

/* top bar */
.top { position: fixed; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; gap: 22px;
       padding: 0 18px; background: linear-gradient(180deg, rgba(10,15,28,.95), rgba(10,15,28,.55) 70%, transparent);
       z-index: 10; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--spectrum);
               box-shadow: 0 0 18px rgba(155, 107, 255, .55); position: relative; }
.brand .mark::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid #0a0f1c; }
.brand b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.brand small { display: block; font-size: 9px; letter-spacing: .24em; color: var(--muted); text-transform: uppercase; }
.tabs { display: flex; gap: 4px; }
.tabs a { padding: 7px 14px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 13px;
          display: flex; gap: 8px; align-items: center; }
.tabs a:hover { color: var(--text); background: rgba(22, 33, 58, .7); }
.tabs a.on { color: var(--text); background: var(--raised); box-shadow: inset 0 -2px 0 var(--violet); }
.tabs a kbd { font-size: 9.5px; padding: 0 5px; }
.tabs a .short { display: none; }
.top .run { margin-left: 4px; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.top .run b { color: var(--text); font-weight: 600; }
.top .ghlink { order: 1; margin-left: -12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  color: var(--muted); }                              /* after the ? button, which help() appends later */
.credits { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.top .ghlink:hover { color: var(--text); background: rgba(22, 33, 58, .7); }
.hdtoggle { all: unset; cursor: pointer; white-space: nowrap; margin-left: 10px; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
  color: var(--muted); border: 1px solid rgba(255, 255, 255, .16); }
.hdtoggle:hover { color: var(--text); border-color: rgba(255, 255, 255, .32); }
.hdtoggle.on { color: #fff; border-color: transparent; background: linear-gradient(90deg, #4f8cff, #9b6bff 50%, #ff5fb4); }

/* hero title over the scene */
.hero { position: fixed; left: 26px; top: 70px; max-width: 520px; pointer-events: none; z-index: 5; }
.hero .kicker { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: #c9b8ff; }
/* gradient text is painted only inside the box: at line-height 1 that box ends above the descenders, so pad
   it down by .2em (and take the same off the margin) or the g's and y's are cut off */
.hero h1 { margin: 6px 0 calc(8px - .2em); padding-bottom: .2em; font: 600 44px/1 var(--serif); letter-spacing: -.015em;
           background: linear-gradient(90deg, #fff 0%, #e4dcff 45%, #ffc2e3 80%, #ffd0a8);
           -webkit-background-clip: text; background-clip: text; color: transparent;
           text-shadow: 0 0 40px rgba(155, 107, 255, .25); }
.hero p { margin: 0; color: #c3cbe0; font-size: 13.5px; line-height: 1.45; max-width: 460px; }
.hero p em { color: #ffc2e3; font-style: normal; }

/* glass panel */
.panel { position: fixed; z-index: 6; background: var(--panel); backdrop-filter: blur(14px) saturate(140%);
         -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(58, 78, 120, .45);
         border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04); }
.panel.right { right: 16px; top: 12px; bottom: 16px; width: 360px; padding: 16px; overflow-y: auto; z-index: 11; }
.panel h3 { margin: 16px 0 8px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
            display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.panel h3:first-child { margin-top: 0; }
.panel h3 small { letter-spacing: .04em; text-transform: none; color: var(--faint); font-weight: 500; }
.note { color: var(--faint); font-size: 11px; line-height: 1.45; }
.note b { color: var(--muted); font-weight: 600; }
.honest { margin-top: 10px; padding: 9px 11px; border-radius: 10px; border: 1px dashed rgba(255, 154, 77, .35);
          color: #d8c3b0; background: rgba(255, 154, 77, .05); font-size: 11px; line-height: 1.45; }

/* segmented buttons */
.seg { display: flex; gap: 4px; padding: 3px; border-radius: 11px; background: rgba(10, 15, 28, .6); border: 1px solid var(--line); }
.seg button { flex: 1; border: 0; background: transparent; padding: 7px 6px; border-radius: 8px; color: var(--muted);
              font-size: 12px; font-weight: 550; display: flex; align-items: center; justify-content: center; gap: 6px; }
.seg button:hover { color: var(--text); }
.seg button.on { color: #0a0f1c; background: var(--cta); box-shadow: 0 0 16px rgba(201, 184, 255, .35); }
.seg button kbd { font-size: 9px; padding: 0 4px; }
.seg button.on kbd { background: rgba(255,255,255,.5); border-color: rgba(10,15,28,.2); color: #0a0f1c; }
.row { display: flex; gap: 8px; align-items: center; }
[hidden] { display: none !important; }      /* .btn and friends set display, which would override the attribute */
.btn { border: 1px solid var(--line); background: var(--raised); border-radius: 10px; padding: 7px 12px; color: var(--text);
       font-size: 12px; font-weight: 550; display: inline-flex; align-items: center; gap: 7px; }
.btn:hover { border-color: var(--violet); }
.btn.primary { background: var(--cta); color: #0a0f1c; border: 0; box-shadow: 0 0 22px rgba(255, 95, 180, .3); }
.btn.on { border-color: var(--pink); box-shadow: inset 0 0 0 1px var(--pink), 0 0 14px rgba(255, 95, 180, .3); }
.btn.round { width: 44px; height: 44px; justify-content: center; border-radius: 50%; padding: 0; font-size: 16px; }

/* metric rows */
.metric { display: grid; grid-template-columns: 1fr 70px; gap: 4px 10px; align-items: center; margin: 7px 0; }
.metric .name { font-size: 11.5px; color: #c9d2e3; }
.metric .name small { color: var(--faint); }
.metric .val { text-align: right; font: 600 13px ui-monospace, 'SF Mono', monospace; font-variant-numeric: tabular-nums; }
.metric canvas { grid-column: 1 / 3; width: 100%; height: 30px; display: block; }
.bars .b { display: grid; grid-template-columns: 70px 1fr 44px; gap: 8px; align-items: center; margin: 4px 0; font-size: 11px; color: var(--muted); }
.bars .track { height: 7px; border-radius: 4px; background: rgba(34, 48, 76, .7); position: relative; overflow: hidden; }
.bars .fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--spectrum); transition: width .25s; }
.bars .ghost { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; opacity: .7; transition: left .25s; }
.bars .v { text-align: right; font: 600 11px ui-monospace, monospace; color: var(--text); }

/* bottom dock */
.dock { position: fixed; left: 16px; right: 392px; bottom: 16px; z-index: 6; padding: 10px 14px; display: flex; gap: 14px; align-items: center; }
.dock .time { font: 600 13px ui-monospace, monospace; min-width: 108px; font-variant-numeric: tabular-nums; }
.dock .scrub { flex: 1; height: 38px; position: relative; cursor: pointer; }
.dock .scrub canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pace { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.pace input { width: 100%; accent-color: #8fd8ff; }
.pace small { grid-column: 1 / -1; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* dragging the dial must not select its number */
.ringwrap, .ringwrap * { -webkit-user-select: none; user-select: none; }

/* the listening game: invitations over the landscape, not a key to find */
.game { position: fixed; left: 16px; right: 392px; bottom: 84px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 7px;
        pointer-events: none; }
.gamecue { color: #e8e2ff; font-size: 12.5px; text-align: center; max-width: 620px; text-shadow: 0 1px 12px rgba(10, 15, 28, .9); }
.gamecue b { color: #ffc2e3; }
.gamepills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; pointer-events: auto; }
.gamepill { all: unset; cursor: pointer; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff;
            background: rgba(17, 26, 45, .72); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
            animation: gamebreathe 2.6s ease-in-out infinite; transition: transform .15s, background .2s;
            display: inline-flex; align-items: center; gap: 6px; }
.gamepill:nth-child(2) { animation-delay: .3s; } .gamepill:nth-child(3) { animation-delay: .6s; } .gamepill:nth-child(4) { animation-delay: .9s; }
.gamepill:hover, .gamepill:focus-visible { transform: translateY(-1px); background: rgba(40, 60, 100, .85); }
.gamepill:active { transform: scale(.97); }
.gamepill:disabled { opacity: .45; cursor: progress; }
.gamepill.got { animation: none; color: var(--muted); font-weight: 500; border-color: rgba(255, 255, 255, .12); background: rgba(10, 15, 28, .55); }
.gamepill.got i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.gamepill.got b { color: var(--text); font-weight: 700; }
.gamepill.got small { color: var(--faint); font-size: 11px; }
.gamepill.pop { animation: gamepop .5s ease-out; }
.gamepill.again { animation: none; border-color: rgba(255, 255, 255, .15); color: var(--muted); padding: 5px 10px; }
.gamepill.again:hover { color: #fff; }
@keyframes gamebreathe { 0%, 100% { box-shadow: 0 0 0 0 transparent; }
                         50% { box-shadow: 0 0 14px 1px color-mix(in srgb, var(--c) 45%, transparent); } }
@keyframes gamepop { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .gamepill, .gamepill.pop { animation: none; } }
.keys { position: fixed; left: 26px; bottom: 84px; z-index: 5; color: var(--faint); font-size: 11px; line-height: 2; pointer-events: none; }
.helpcard .keys { position: static; margin-top: 14px; color: var(--muted); }
.keys kbd { margin-right: 4px; }

/* tooltip */
.helpbtn { margin-left: -8px; width: 26px; height: 26px; font-size: 12px; padding: 0; border-radius: 50%; font-weight: 650;
           justify-content: center; line-height: 1; }
/* the moment card keeps one shape while the beam moves: fixed rows, the lyric held to two lines */
#moment .m-chips { height: 22px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; }
#moment .m-lyric { height: 2.7em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#moment .m-lyric.none { height: calc(14px * 2.7); display: flex; align-items: flex-start; }
#moment .m-line { min-height: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.helpcard { position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1000px, calc(100vw - 32px));
            max-height: calc(100vh - 96px); overflow: auto; display: none; gap: 18px; align-items: start;
            font-size: 14px; line-height: 1.55; color: #d6dcef; }
.helpcard.on { display: flex; }
.helppanel { position: relative; flex: 1 1 0; min-width: 0; padding: 24px 26px; border-radius: 18px;
             background: rgba(14, 21, 38, .97); border: 1px solid rgba(155, 107, 255, .45); box-shadow: 0 30px 90px rgba(0,0,0,.6); }
@media (max-width: 820px) { .helpcard.on { flex-direction: column; } .helppanel { flex: none; width: 100%; box-sizing: border-box; } }
.helpcard h2 { font: 600 24px/1.15 var(--serif); margin: 0 0 10px; color: #fff; }
.helpcard h3 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #c9b8ff; margin: 16px 0 6px; }
.helpcard p { margin: 6px 0; }
.helpcard dl { margin: 6px 0; }
.helpcard dt { font-weight: 650; color: #fff; margin-top: 10px; }
.helpcard dd { margin: 2px 0 0; } .helpcard .helpclose { position: absolute; top: 12px; right: 12px; }
/* Listening marks on the step dial: where a listener first heard something. */
.heardmark circle { fill: #ffd98f; animation: heardpulse 1.8s ease-in-out infinite; pointer-events: none; }
.heardmark.reached circle { fill: #fff; animation-duration: 3.2s; }
/* a machine's mark: a hollow ring, blue like the stack's "heard" tag, a little inside the listener's dots */
.machinemark circle { fill: none; stroke: #8fd8ff; stroke-width: 1.4; opacity: .85; pointer-events: none; }
.machinemark.reached circle { stroke: #d8f3ff; opacity: 1; }
.heardrow .who { all: unset; font: 600 10px/16px -apple-system, sans-serif; letter-spacing: .04em; text-transform: uppercase;
                 padding: 0 6px; border-radius: 5px; border: 1px solid; min-width: 62px; text-align: center; box-sizing: border-box;
                 font-variant-numeric: tabular-nums; opacity: .7; }
.heardrow .who.reached { opacity: 1; }
.heardrow .who.none { opacity: .3; border-style: dashed; }
.heardrow .who.you { color: #ffd98f; border-color: rgba(255, 217, 143, .45); }
.heardrow .who.machine { color: #a8e6ff; border-color: rgba(90, 200, 255, .4); }
@keyframes heardpulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .heardmark circle { animation: none; opacity: .9; } }
.heard { margin-top: 16px; display: grid; gap: 3px; }
.heard .dim, .marker .dim { color: var(--muted); font-size: 11.5px; margin: 2px 0 4px; }
.heardrow { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 6px; align-items: center; padding: 3px 4px 3px 8px;
            border-radius: 7px; color: var(--text); font-size: 12.5px; }
.heardrow small { margin-left: 8px; color: var(--muted); font-size: 10.5px; }
.heardrow small:empty { display: none; }
.heardrow:hover { background: rgba(22, 33, 58, .5); }
.linkbtn { all: unset; cursor: pointer; display: block; margin-top: 8px; color: var(--muted); font-size: 11.5px; text-decoration: underline; }
.linkbtn:hover { color: var(--text); }
#markbtn { margin-top: 10px; }
.marker { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.marker .dim { flex-basis: 100%; }
.markchip { all: unset; cursor: pointer; padding: 5px 10px; border-radius: 999px; font-size: 12px; color: var(--muted);
            border: 1px solid rgba(58, 78, 120, .7); }
.markchip:hover { color: var(--text); border-color: rgba(155, 107, 255, .7); }
.markchip.on { color: #0a0f1c; background: #ffd98f; border-color: #ffd98f; font-weight: 600; }
.tip { position: fixed; z-index: 20; pointer-events: none; padding: 9px 11px; border-radius: 11px; font-size: 11.5px; line-height: 1.45;
       background: rgba(13, 20, 36, .92); border: 1px solid rgba(155, 107, 255, .5); box-shadow: 0 10px 30px rgba(0,0,0,.5);
       max-width: 300px; display: none; }
.tip b { color: #fff; } .tip .m { color: var(--muted); } .tip .lyr { font: italic 14px/1.35 var(--serif); color: #ffe0f0; margin: 3px 0; }

/* ring */
.ringwrap { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; }
.ring { width: 150px; height: 150px; touch-action: none; cursor: grab; }
.ring text { font-family: -apple-system, sans-serif; }
.stepinfo .big { font: 600 30px/1 var(--serif); }
.stepinfo .sub { color: var(--muted); font-size: 11.5px; margin-top: 4px; line-height: 1.5; }
input[type=range] { width: 100%; accent-color: var(--pink); }

/* lists */
.list { display: flex; flex-direction: column; gap: 3px; }
.list .item { display: grid; grid-template-columns: 12px 1fr auto; gap: 9px; align-items: center; padding: 6px 8px; border-radius: 9px;
              cursor: pointer; border: 1px solid transparent; }
.list .item:hover { background: rgba(22, 33, 58, .8); }
.list .item.on { background: var(--raised); border-color: rgba(255, 95, 180, .45); }
.list .dot { width: 10px; height: 10px; border-radius: 50%; }
.list .t { font-size: 12px; } .list .t small { display: block; color: var(--faint); font-size: 10.5px; }
.list .n { font: 600 11px ui-monospace, monospace; color: var(--muted); }
.lyric { font: 14px/1.35 var(--serif); color: #f1e9ff; }
.lyric.none { color: var(--faint); font-style: italic; font-size: 12px; font-family: -apple-system, sans-serif; }
/* words a recognizer heard in the finished take: never styled as the lyrics */
.heardwords { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.35; margin-top: 2px; }
.heardwords.alone { color: #d9cdf2; font-size: 12.5px; margin-top: 0; }
.heardtag { display: inline-block; padding: 0 5px; margin-right: 3px; border-radius: 4px; font: 600 9px/14px -apple-system, sans-serif;
            letter-spacing: .06em; text-transform: uppercase; color: #a8e6ff; background: rgba(90, 200, 255, .12);
            border: 1px solid rgba(90, 200, 255, .3); vertical-align: 1px; }
.chip { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: .04em;
        background: rgba(155, 107, 255, .16); color: #d9ccff; border: 1px solid rgba(155, 107, 255, .35); }
.chip.warn { background: rgba(255, 154, 77, .12); color: #ffd0a8; border-color: rgba(255, 154, 77, .4); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* the focus panel, compact: the dial and Resolve first, everything else fits below without scrolling */
.panel.compact h3 { margin: 14px 0 6px; }
.panel.compact #slider { width: 100%; margin: 8px 0 0; }
.panel.compact .pace { margin-top: 4px; }
.viewrow { display: flex; gap: 6px; align-items: stretch; margin-top: 10px; }
.viewrow .seg { flex: 1; }
.viewrow .seg button { padding: 6px 4px; font-size: 12px; }
.icon { width: 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(10, 15, 28, .6); color: var(--faint);
        display: grid; place-items: center; padding: 0; }
.icon svg { width: 18px; height: 18px; }
.icon:hover { color: var(--text); }
.icon.on { color: #ffc2e3; border-color: rgba(255, 95, 180, .55); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tiles .metric { margin: 0; padding: 6px 8px; border-radius: 8px; background: rgba(10, 15, 28, .45); grid-template-columns: 1fr auto; gap: 0 6px; }
.tiles .metric .name { font-size: 10.5px; color: var(--muted); }
.tiles .metric .val { font-size: 12px; }
.tiles .metric canvas { height: 20px; margin-top: 3px; }
.panel.compact .bars .b { margin: 2px 0; }
#settlemap { width: 100%; height: 120px; display: block; cursor: pointer; border-radius: 8px; margin-top: 8px; }
.panel.compact .honest { margin-top: 12px; padding: 7px 10px; font-size: 11px; }

/* with a side panel, the help card centers on the open space beside it */
@media (min-width: 901px) { body:has(.panel.right) .helpcard { left: calc((100vw - 392px) / 2); width: min(1000px, calc(100vw - 424px)); } }

/* focus panel: a column, with the hover help taking the room at its foot */
.panel.compact { display: flex; flex-direction: column; }
.panel.compact > * { flex-shrink: 0; }
.panel.compact #markbtn { align-self: flex-start; }
.hoverhelp { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(10, 15, 28, .35);
             color: var(--faint); font-size: 12px; line-height: 1.5; }
.hoverhelp.on { color: #c9d2e3; }
/* The explanation card, laid over the panel's contents; focus.js places and sizes it. */
.helpfloat { position: fixed; box-sizing: border-box; margin: 0; z-index: 12; color: #c9d2e3;
             background: rgba(12, 18, 33, .97); border: 1px solid rgba(58, 78, 120, .6); box-shadow: 0 12px 36px rgba(0, 0, 0, .5);
             pointer-events: none; visibility: hidden; }
.helpfloat.on { visibility: visible; }
.hoverhelp b { color: var(--text); font-weight: 600; }
.hoverhelp kbd { font-size: 9.5px; padding: 0 5px; }
.panel.compact { padding-bottom: 12px; }

/* pins: a dot on the time line per part; nearby ones share a stacked tag, reached on angled leader lines */
.pins { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.pins svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pins line { stroke-width: 1; }
.pinanchor { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--c);
             box-shadow: 0 0 10px var(--c), 0 0 0 2.5px rgba(10, 15, 28, .65); }
.pinanchor[hidden], .pintags[hidden] { display: none; }
/* a landing ripples out as a ring; the dot itself never scales, since scale would also scale its translate */
.pinanchor::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c); opacity: 0; }
.pinanchor.landing::after { animation: pinland .6s ease-out; }
@keyframes pinland { 0% { inset: 0; opacity: .9; } 100% { inset: -12px; opacity: 0; } }
.pintags { position: absolute; left: 0; top: 0; padding: 4px 8px; border-radius: 8px; white-space: nowrap;
           background: rgba(10, 15, 28, .55); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(6px);
           font-size: 11px; line-height: 17px; color: var(--muted); }
.pintags div { display: flex; align-items: center; gap: 6px; }
.pintags i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.pintags b { color: var(--text); font-weight: 650; margin-left: 2px; }
.fly { position: fixed; left: -7px; top: -7px; z-index: 40; width: 14px; height: 14px; border-radius: 50%; background: var(--c);
       box-shadow: 0 0 18px var(--c), 0 0 0 2.5px rgba(10, 15, 28, .65); pointer-events: none; }
/* Web build: everything downloads before Play and Resolve come on. */
.prep { display: none; }
body.preparing .prep { position: fixed; left: 16px; right: 392px; bottom: 96px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: none; }
body.preparing .game { visibility: hidden; }
body.preparing #play, body.preparing #resolve { opacity: .35; pointer-events: none; }
.preptitle { font: 600 17px/1 var(--serif); color: #f1ecff; text-shadow: 0 1px 14px rgba(10, 15, 28, .9); }
.preptrack { width: min(360px, 70%); height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.prepbar { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f8cff, #9b6bff 45%, #ff5fb4 75%, #ff9a4d);
  box-shadow: 0 0 12px rgba(255, 95, 180, .6); transition: width .25s ease-out; }
.prepsub { color: #b9c2da; font-size: 12px; text-shadow: 0 1px 12px rgba(10, 15, 28, .9); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { body.preparing .prep { right: 16px; } }

.gamepill.enter { animation: gamein .5s ease-out, gamebreathe 2.6s ease-in-out .5s infinite; }
@keyframes gamein { 0% { opacity: 0; transform: translateY(10px) scale(.9); } 100% { opacity: 1; transform: none; } }
.cuemark circle { fill: var(--c); opacity: .45; pointer-events: none; }
.cuemark.reached circle { opacity: 1; filter: drop-shadow(0 0 3px var(--c)); }
@media (prefers-reduced-motion: reduce) { .fly { transition: none; } .gamepill.enter, .pinanchor.landing::after { animation: none; } }

/* glossary: a dotted term with a small card on hover, plain first, the technical line under it */
dfn[data-g] { font-style: inherit; text-decoration: underline dotted rgba(201, 184, 255, .7); text-underline-offset: 3px; cursor: help; }
.labels dfn[data-g], .hero dfn[data-g] { pointer-events: auto; }
.gcard { position: fixed; z-index: 50; padding: 10px 12px; border-radius: 11px; font-size: 12px; line-height: 1.5; color: #d6dcef;
         background: rgba(14, 21, 38, .97); border: 1px solid rgba(155, 107, 255, .45); box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
         pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.gcard.on { opacity: 1; transform: none; }
.gcard b { color: #fff; margin-right: 2px; }
.gcard small, .hoverhelp small.tech { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-soft);
               font: 11px/1.45 ui-monospace, 'SF Mono', monospace; color: var(--faint); }

/* Phones. Upright: the panel becomes a sheet along the bottom, and the title shrinks to one line. Sideways: the panel
   is a narrow column on the right. Either way the dock goes (the time bar on the land does its job), the top bar keeps
   the tabs, HD and ?, and hover help, which needs a pointer that hovers, is not shown. */
@media (max-width: 760px), (max-height: 500px) {
  .top { height: 46px; gap: 10px; padding: 0 10px; }
  .brand b, .brand small { display: none; }
  .tabs a { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
  .tabs a kbd, .tabs a .full { display: none; }
  .tabs a .short { display: inline; }
  .top .run { font-size: 0; margin-left: 0; }
  .top .run .hdtoggle { font-size: 10px; margin-left: 0; }
  .hdtoggle .long { display: none; }
  .tabs { gap: 0; }
  .tabs a { padding: 6px 7px; }
  .hero { top: 52px; left: 14px; right: 14px; max-width: none; }
  .hero .kicker, .hero p { display: none; }
  .hero h1 { font-size: 24px; }
  .dock { display: none; }
  .gamepill { font-size: 11px; padding: 4px 10px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .panel.right { left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 46vh; padding: 12px 14px;
                 border-radius: 16px 16px 0 0; border-bottom: 0; }
  .game, body.preparing .prep { left: 10px; right: 10px; bottom: calc(46vh + 10px); }
  .panel.right .ringwrap { grid-template-columns: 120px 1fr; }
  .panel.right .ring { width: 120px; height: 120px; }
  /* too small to read on an upright phone: the section names (the bar keeps its colors), the Hz numbers (the band
     names stay) and the bar's side label */
  .tick.arr, .tick.side, .tick.hzband dfn { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .panel.right { top: 50px; bottom: 8px; right: 8px; width: 300px; padding: 10px 12px; }   /* under the top bar */
  .game, body.preparing .prep { left: 10px; right: 318px; bottom: 8px; }
  .panel.right .ringwrap { grid-template-columns: 110px 1fr; }
  .panel.right .ring { width: 110px; height: 110px; }
}
@media (hover: none) { .hoverhelp { display: none; } }

/* Resolve is the way in, so it is the primary button; Listen to this step is for exploring one step on your own. */
.stepinfo .row { flex-wrap: wrap; gap: 8px; }
.sub.switching { color: #ffc2e3; min-height: 0; }
.resolvebtn { padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; gap: 8px; }
.resolvebtn kbd { background: rgba(10, 15, 28, .18); border-color: rgba(10, 15, 28, .25); color: #0a0f1c; }
.resolvebtn.on { box-shadow: 0 0 0 2px #fff, 0 0 26px rgba(255, 95, 180, .55); }
.listenbtn { padding: 5px 11px; border-radius: 999px; font-size: 11.5px; color: var(--muted); background: transparent; }
.listenbtn:hover { color: var(--text); }
@media (max-width: 760px), (max-height: 500px) { .resolvebtn kbd { display: none; } }