/* Story: full-screen scenes (farm yard stage, phone call in the truck) and the People overlay. Linked after the other sheets.
   Same scale rule as the rest of the menu-side UI: em everywhere, font-size from the viewport. Prefixes: st- (scenes), pp- (People). */

/* ---------- faces ---------- */
.st-mono { width: 100%; height: 100%; display: grid; place-items: center; font-weight: 900; font-stretch: 70%; font-size: var(--fs, 3.4em); letter-spacing: .02em; color: rgba(24, 12, 18, .86);
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .55), transparent 55%), linear-gradient(150deg, var(--c, #8fa7a3), color-mix(in srgb, var(--c, #8fa7a3) 55%, #2a1820)); text-shadow: 0 .04em 0 rgba(255, 255, 255, .35) }
.st-sil { width: 100%; height: 100%; position: relative; background: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .42), transparent 55%), linear-gradient(160deg, var(--c, #8fa7a3), color-mix(in srgb, var(--c, #8fa7a3) 45%, #2a1820)) }
.st-sil svg { position: absolute; inset: 0; width: 100%; height: 100% }
.st-mono.q { --c: #4a403c; color: rgba(255, 255, 255, .35); }
.st-mono.minor { --c: #8fa7a3 }

/* ---------- the scene stage ---------- */
#story { position: fixed; inset: 0; z-index: 76; font-size: clamp(10.5px, min(1.1vw, 1.95vh), 22px); color: var(--cream); overflow: hidden; opacity: 0; transition: opacity .3s; background: #0c0809 }
#story.on { opacity: 1 }
#story.out { opacity: 0; transition: opacity .25s }
.st-bg { position: absolute; inset: -3%; background-size: cover; background-position: center; filter: saturate(1.05) brightness(.82); animation: stKen 40s ease-out both }
.st-call .st-bg { filter: saturate(1) brightness(.62) blur(1.5px) }
@keyframes stKen { from { transform: scale(1.04) } to { transform: scale(1.14) translate(-1%, -.5%) } }
.st-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, transparent 35%, rgba(8, 4, 6, .55) 100%), linear-gradient(to top, rgba(10, 6, 8, .94) 0, rgba(10, 6, 8, .62) 26%, transparent 56%), linear-gradient(to bottom, rgba(10, 6, 8, .45), transparent 22%) }
.st-bar { position: absolute; left: 0; right: 0; height: 0; background: #070405; transition: height .6s .1s cubic-bezier(.2, .9, .3, 1); z-index: 3 }
.st-bar.t { top: 0 } .st-bar.b { bottom: 0 }
#story.on .st-bar { height: 2.2em }

/* chapter card */
.st-chapter { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .4em; z-index: 4; opacity: 0; pointer-events: none }
.st-chapter.on { animation: stChap 2.1s ease both }
@keyframes stChap { 0% { opacity: 0; transform: translateY(1.2em) scale(.97) } 22% { opacity: 1; transform: none } 78% { opacity: 1 } 100% { opacity: 0; transform: translateY(-.6em) } }
.st-chapter small { font-family: var(--mono); letter-spacing: .22em; text-transform: uppercase; font-size: .95em; color: var(--amber); text-shadow: 0 .1em .6em #000 }
.st-chapter b { font-size: 4.6em; font-weight: 900; font-stretch: 66%; line-height: .98; text-shadow: 0 .06em 0 rgba(0, 0, 0, .5), 0 .3em 1.2em rgba(0, 0, 0, .75); max-width: 14em; margin: 0 auto }
.st-chapter b::after { content: ""; display: block; width: 3.2em; height: .2em; background: var(--pink); border-radius: .2em; margin: .35em auto 0; box-shadow: 0 0 1em rgba(233, 91, 147, .7) }
.st-chapter span { font-size: 1.05em; color: #d9cbb9; letter-spacing: .04em }

/* portraits */
.st-stage { position: absolute; inset: 0; transition: opacity .4s; z-index: 2; pointer-events: none }
.st-stage.hold { opacity: 0 }
.st-port { position: absolute; bottom: 14.6em; margin: 0; --c: #e9a14a; filter: brightness(.5) saturate(.55); transform: translateY(.4em) scale(.95); transition: filter .35s, transform .35s }
.st-port.lit { filter: none; transform: none }
.st-port.l { left: 5%; width: 21em }
.st-port.r { right: 5%; width: 15em }
.st-frame { aspect-ratio: 1; border-radius: 1.6em; overflow: hidden; border: .22em solid rgba(255, 248, 241, .9); background: #2a201c; box-shadow: 0 .4em 0 rgba(0, 0, 0, .45), 0 0 0 .5em color-mix(in srgb, var(--c) 40%, transparent), 0 1.6em 3em rgba(0, 0, 0, .6) }
.st-frame img { width: 100%; height: 100%; object-fit: cover; display: block }
.st-port.r .st-frame { --c: #e95b93 }
.st-port.swap .st-frame { animation: stSwap .4s var(--ease-pop) }
@keyframes stSwap { from { transform: translateX(-1.2em) scale(.96); opacity: .3 } }
.st-port figcaption { margin-top: .55em; display: grid; gap: .05em; text-align: center; text-shadow: 0 .1em .5em #000 }
.st-port figcaption b { font-size: 1.15em; font-weight: 850; font-stretch: 72% }
.st-port figcaption small { color: #cbbfae; font-size: .82em }
.st-port.r figcaption b { color: #ff8fb8 }
.st-call .st-port { display: none }
#story.choosing .st-port.r { visibility: hidden }

/* dialogue box */
.st-box { position: absolute; left: 50%; bottom: 3.3em; transform: translateX(-50%); width: min(64em, 92vw); min-height: 8.4em; padding: 1.4em 2em 1.3em; border-radius: 1.5em; z-index: 3; cursor: pointer;
  background: linear-gradient(rgba(34, 25, 29, .93), rgba(17, 12, 15, .96)); border: .1em solid rgba(255, 255, 255, .14); box-shadow: 0 .4em 0 rgba(0, 0, 0, .55), 0 1.6em 3.4em rgba(0, 0, 0, .65), inset 0 .1em 0 rgba(255, 255, 255, .08); transition: opacity .3s }
.st-box.wait { opacity: .55 }
.st-tag { position: absolute; top: -1.2em; left: 1.8em; background: var(--c, var(--amber)); color: #1a0d13; font-weight: 880; font-stretch: 78%; font-size: 1.12em; padding: .28em 1.15em; border-radius: 2em; box-shadow: 0 .2em 0 rgba(0, 0, 0, .35), 0 .5em 1em rgba(0, 0, 0, .35); letter-spacing: .02em }
.st-text { margin: 0; font-size: 1.36em; line-height: 1.5; min-height: 2.9em; color: #f6ecdc; text-wrap: pretty }
.st-box.narr .st-text { font-style: italic; color: #dccdb9 }
.st-box.narr { border-color: rgba(242, 193, 78, .22) }
.st-box.you .st-tag { background: var(--pink) }
.st-next { position: absolute; right: 1.5em; bottom: 1em; width: 0; height: 0; border: .6em solid transparent; border-top: .8em solid var(--amber); opacity: 0; transition: opacity .2s }
.st-box.done .st-next { opacity: 1; animation: stBob 1s ease-in-out infinite }
@keyframes stBob { 50% { transform: translateY(.35em) } }
.st-text.typing::after { content: "|"; opacity: .5; animation: stCaret .6s steps(2) infinite }
@keyframes stCaret { 50% { opacity: 0 } }

/* choices and the result panel */
.st-choices { position: absolute; right: 4.5%; bottom: 14.8em; width: min(37em, 46vw); display: grid; gap: .75em; z-index: 5 }
.st-ch { display: grid; grid-template-columns: 2em 1fr; grid-template-areas: "k l" ". h"; column-gap: .7em; align-items: center; text-align: left; border: 0; border-radius: 1.15em; padding: .8em 1.15em .85em .8em; cursor: pointer; color: #2b1e24; font: inherit;
  background: linear-gradient(#fff9f1, #f1e1d3); box-shadow: inset 0 .1em 0 #fff, 0 .32em 0 #bda18f, 0 1em 1.8em rgba(0, 0, 0, .5); animation: stIn .45s calc(var(--i) * .09s) var(--ease-pop) both; transition: transform .1s, box-shadow .1s, filter .12s }
@keyframes stIn { from { opacity: 0; transform: translateX(2em) scale(.96) } }
.st-ch:hover { transform: translateY(-.12em); filter: brightness(1.04); background: linear-gradient(#fff9f1, #f1e1d3) }
.st-ch:active { transform: translateY(.22em); box-shadow: inset 0 .1em 0 #fff, 0 .08em 0 #bda18f, 0 .3em .8em rgba(0, 0, 0, .5) }
.st-ch kbd { grid-area: k; width: 1.7em; height: 1.7em; border-radius: .55em; display: grid; place-items: center; background: #e95b93; color: #2a0c1a; font-family: var(--mono); font-weight: 700; font-size: .9em; box-shadow: 0 .12em 0 #a2305f }
.st-lab { grid-area: l; font-weight: 750; font-size: 1.06em; line-height: 1.25; text-wrap: pretty }
.st-ch small { grid-area: h; font-size: .82em; color: #8a7580; line-height: 1.3; margin-top: .2em }
.st-ch.locked { filter: grayscale(.8); opacity: .6; cursor: not-allowed }
.st-ch.locked kbd { background: #aa9a92; box-shadow: 0 .12em 0 #7d6e67 }
.st-result { position: absolute; right: 4.5%; bottom: 14.8em; width: min(37em, 46vw); display: grid; gap: .9em; justify-items: end; z-index: 5; animation: stIn .45s var(--ease-pop) both }
.st-chips { display: flex; flex-wrap: wrap; gap: .5em; justify-content: flex-end }
.st-chip { font-weight: 750; font-size: .98em; padding: .38em .95em; border-radius: 2em; background: rgba(32, 24, 28, .92); border: .1em solid rgba(255, 255, 255, .18); animation: stIn .4s calc(var(--i) * .1s + .1s) var(--ease-pop) both; box-shadow: 0 .25em 0 rgba(0, 0, 0, .4) }
.st-chip.good { color: #9ee0b1; border-color: rgba(127, 211, 154, .5) } .st-chip.bad { color: #ffab94; border-color: rgba(255, 122, 90, .5) }
.st-skip { position: absolute; right: 2.4em; top: 3.2em; z-index: 6; background: rgba(20, 14, 17, .65); border: .1em solid rgba(255, 255, 255, .16); color: #cbbfae; font-size: .85em; padding: .35em 1em; border-radius: 2em; backdrop-filter: blur(4px) }
.st-skip:hover { color: #fff; background: rgba(40, 28, 34, .8) }

/* the phone call */
.st-phone { position: absolute; right: 7%; top: 50%; transform: translateY(-50%); width: 25em; height: min(40em, 84vh); display: grid; grid-template-rows: auto 1fr; border-radius: 2.8em; background: #fff8f1; color: #2b1e24; z-index: 3;
  border: .5em solid #17121a; box-shadow: 0 0 0 .1em #5a4f5e, 0 2em 5em rgba(0, 0, 0, .7), 0 0 4em rgba(233, 91, 147, .12); overflow: hidden; animation: stPhone .6s var(--ease-pop) both }
@keyframes stPhone { from { opacity: 0; transform: translateY(-46%) scale(.94) } }
.st-phone header { display: grid; grid-template-columns: 3.4em 1fr auto; gap: .8em; align-items: center; padding: 1.3em 1.2em .9em; background: linear-gradient(#ffeede, #fff8f1); border-bottom: .1em solid #f0e1d6 }
.st-av { width: 3.4em; height: 3.4em; border-radius: 50%; overflow: hidden; border: .14em solid var(--c, #e95b93); box-shadow: 0 .15em .5em rgba(0, 0, 0, .25); position: relative; --fs: 1.5em }
.st-av img { width: 100%; height: 100%; object-fit: cover }
#story.ringing .st-av::before, #story.ringing .st-av::after { content: ""; position: absolute; inset: -.15em; border-radius: 50%; border: .08em solid var(--c, #e95b93); animation: stRing 1.4s ease-out infinite }
#story.ringing .st-av::after { animation-delay: .7s }
@keyframes stRing { from { transform: scale(1); opacity: .9 } to { transform: scale(1.9); opacity: 0 } }
.st-who b { display: block; font-size: 1.25em; font-weight: 850; font-stretch: 72%; line-height: 1.05 }
.st-who small { color: #8a7580; font-size: .84em }
.st-sig { display: flex; align-items: flex-end; gap: .15em; height: 1em }
.st-sig u { width: .26em; background: #2b1e24; border-radius: .1em; opacity: .55 } .st-sig u:nth-child(1) { height: .4em } .st-sig u:nth-child(2) { height: .7em } .st-sig u:nth-child(3) { height: 1em }
.st-thread { padding: 1em 1em 1.4em; overflow-y: auto; display: flex; flex-direction: column; gap: .6em; scroll-behavior: smooth }
.st-bub { max-width: 86%; padding: .6em .95em .65em; border-radius: 1.2em; font-size: 1.08em; line-height: 1.4; animation: stBub .35s var(--ease-pop) both; text-wrap: pretty }
.st-bub p { margin: 0 }
.st-bub small { display: block; font-size: .72em; font-weight: 800; color: #8a7580; margin-bottom: .1em }
.st-bub.them { align-self: flex-start; background: #fff; border: .1em solid #f0e1d6; box-shadow: 0 .15em 0 #f0e1d6; border-bottom-left-radius: .35em }
.st-bub.me { align-self: flex-end; background: var(--pink); color: #2a0c1a; font-weight: 600; border-bottom-right-radius: .35em; box-shadow: 0 .15em 0 var(--pink-d) }
.st-bub.narr { align-self: center; max-width: 92%; background: transparent; color: #8a7580; font-style: italic; font-size: .92em; text-align: center; padding: .2em .4em }
@keyframes stBub { from { opacity: 0; transform: translateY(.8em) scale(.95) } }
.st-call .st-choices { left: 4.5%; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); width: min(34em, 40vw) }
.st-call .st-result { left: 4.5%; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); justify-items: start; width: min(34em, 40vw) }
.st-call .st-chips { justify-content: flex-start }
.st-call .st-skip { top: 3.2em }

/* ringing: a big face in the middle of the phone until the call connects */
.st-ringbox { margin: auto; display: grid; justify-items: center; gap: .5em; text-align: center; color: #8a7580; animation: stBub .4s var(--ease-pop) both }
.st-ringbox .rb-av { width: 7.4em; height: 7.4em; border-radius: 50%; overflow: hidden; border: .2em solid var(--c, #e95b93); position: relative; --fs: 2.8em; box-shadow: 0 .3em 1em rgba(0, 0, 0, .25) }
.st-ringbox .rb-av img { width: 100%; height: 100%; object-fit: cover }
.st-ringbox .rb-wrap { position: relative; padding: 1em }
.st-ringbox .rb-wrap::before, .st-ringbox .rb-wrap::after { content: ""; position: absolute; inset: 1em; border-radius: 50%; border: .1em solid var(--c, #e95b93); animation: stRing 1.4s ease-out infinite }
.st-ringbox .rb-wrap::after { animation-delay: .7s }
.st-ringbox b { color: #2b1e24; font-size: 1.5em; font-weight: 850; font-stretch: 72% } .st-ringbox small { font-size: .95em }

/* ---------- People ---------- */
.st-pbtn { font: inherit; color: inherit; cursor: pointer; text-align: left; position: relative; min-width: 8.5em }
.st-pbtn i { font-style: normal; font-size: .74em; color: #b9aca0 }
.st-pbtn:hover { background: var(--glass); filter: brightness(1.2) }
.st-faces { display: flex; align-items: center; margin-top: .15em }
.st-faces span { width: 1.9em; height: 1.9em; border-radius: 50%; overflow: hidden; border: .13em solid var(--c); margin-left: -.5em; background: #2a201c; box-shadow: 0 .1em .3em rgba(0, 0, 0, .5); --fs: .9em } .st-faces span:first-child { margin-left: 0 }
.st-faces span img { width: 100%; height: 100%; object-fit: cover; display: block }
.st-faces small { margin-left: .5em; font-family: var(--mono); font-size: .8em; color: var(--cream) }
.st-pip { position: absolute; top: .4em; right: .5em; width: .75em; height: .75em; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 .15em rgba(233, 91, 147, .3); animation: stPulse 1.6s ease-in-out infinite }
@keyframes stPulse { 50% { box-shadow: 0 0 0 .4em rgba(233, 91, 147, .08) } }
.pp { z-index: 74 }
.pp-sheet { width: min(82em, 96vw); height: min(47em, 92vh); display: grid; grid-template-rows: auto 1fr; gap: 1em; background: linear-gradient(#2b211d, #1a1310); border-radius: 1.7em; border: .1em solid rgba(246, 236, 220, .2); padding: 1.3em 1.6em 1.3em; box-shadow: 0 .5em 0 #0b0706, 0 2em 4em rgba(0, 0, 0, .6); animation: pop .35s var(--ease-pop) }
.pp-sheet header { display: flex; align-items: baseline; gap: 1em }
.pp-sheet h3 { margin: 0; font-size: 2.3em; font-weight: 900; font-stretch: 62%; line-height: 1 }
.pp-sub { color: #bfb2a4; font-size: .92em; flex: 1 }
.pp-body { display: grid; grid-template-columns: 20em 1fr; gap: 1.4em; min-height: 0 }
.pp-list { display: grid; align-content: start; gap: .5em; overflow-y: auto; padding: .2em .4em .4em 0 }
.pp-row { display: grid; grid-template-columns: 3.5em 1fr; grid-template-areas: "f n" ". r"; gap: .1em .8em; align-items: center; text-align: left; border: 0; border-radius: 1em; padding: .55em .7em .6em; cursor: pointer; background: rgba(255, 255, 255, .05); color: var(--cream); position: relative; transition: background .12s, transform .1s; font: inherit }
.pp-row:hover { background: rgba(255, 255, 255, .1); transform: translateX(.15em) }
.pp-row.on { background: rgba(233, 91, 147, .16); box-shadow: inset .2em 0 0 var(--c) }
.pp-row.dim { opacity: .62 }
.pp-face { grid-area: f; width: 3.5em; height: 3.5em; border-radius: 50%; overflow: hidden; border: .14em solid var(--c); background: #2a201c; --fs: 1.5em }
.pp-face img { width: 100%; height: 100%; object-fit: cover; display: block }
.pp-nm { grid-area: n; display: grid; gap: .05em; min-width: 0 } .pp-nm b { font-size: 1.05em; font-weight: 800; font-stretch: 80% } .pp-nm small { color: #b7a99b; font-size: .78em; line-height: 1.25 }
.pp-rel { grid-area: r; height: .32em; border-radius: .2em; background: rgba(255, 255, 255, .12); overflow: hidden } .pp-rel u { display: block; height: 100%; border-radius: .2em; transition: width .5s }
.pp-new { position: absolute; top: .6em; right: .7em; width: .6em; height: .6em; border-radius: 50%; background: var(--pink) }
.pp-detail { overflow-y: auto; padding: 0 .6em 1em 0; display: grid; align-content: start; gap: 1em }
.pp-top { display: grid; grid-template-columns: 11.5em 1fr; gap: 1.5em; align-items: center }
.pp-big { width: 11.5em; height: 11.5em; border-radius: 1.5em; overflow: hidden; border: .2em solid rgba(255, 248, 241, .9); box-shadow: 0 .35em 0 rgba(0, 0, 0, .45), 0 0 0 .45em color-mix(in srgb, var(--c) 38%, transparent); background: #2a201c; --fs: 4.4em }
.pp-big img { width: 100%; height: 100%; object-fit: cover }
.pp-id h4 { margin: 0; font-size: 2.2em; font-weight: 900; font-stretch: 66%; line-height: 1 } .pp-id > span { color: var(--c); font-weight: 700; font-size: .95em }
.pp-id blockquote { margin: .6em 0 .7em; padding: .1em 0 .1em .9em; border-left: .22em solid var(--c); font-style: italic; font-size: 1.12em; color: #eadfce }
.pp-relbar { display: grid; grid-template-columns: auto auto 1fr auto; gap: .7em; align-items: center } .pp-relbar i { font-style: normal; color: #b7a99b; font-size: .8em; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em } .pp-relbar b { font-size: 1.05em } .pp-relbar em { font-style: normal; font-family: var(--mono); color: #b7a99b; font-size: .9em }
.pp-relbar .meter { height: .55em; border-radius: .4em; background: rgba(255, 255, 255, .12); overflow: hidden } .pp-relbar .meter u { display: block; height: 100%; border-radius: .4em }
.pp-bio { margin: 0; color: #d9ccba; line-height: 1.5 }
.pp-beats { display: flex; flex-wrap: wrap; gap: .5em; align-items: center } .pp-beats > i, .pp-next > i, .pp-journal > i { font-style: normal; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: .72em; color: #b7a99b; margin-right: .4em }
.pp-beat { display: inline-flex; align-items: center; gap: .5em; padding: .28em .9em .28em .3em; border-radius: 2em; background: rgba(255, 255, 255, .06); color: #8d8178; font-size: .88em; font-weight: 650 }
.pp-beat u { text-decoration: none; width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); font-size: .85em; font-weight: 800 }
.pp-beat.done { color: var(--cream); background: rgba(127, 211, 154, .14) } .pp-beat.done u { background: #5fb07a; color: #0e2a18 }
.pp-next { margin: 0; padding: .7em 1em; border-radius: 1em; background: rgba(242, 193, 78, .1); border: .1em solid rgba(242, 193, 78, .28); color: #f2dca0; font-size: .95em }
.pp-keeps { display: flex; flex-wrap: wrap; gap: .5em }
.pp-keep { padding: .3em .9em; border-radius: 2em; background: rgba(233, 91, 147, .16); border: .1em solid rgba(233, 91, 147, .4); font-size: .85em; font-weight: 650 } .pp-keep.job { background: rgba(127, 211, 154, .14); border-color: rgba(127, 211, 154, .4) }
.pp-journal { display: grid; gap: .7em } .pp-journal article { padding: .75em 1em; border-radius: 1em; background: rgba(255, 255, 255, .05); display: grid; gap: .35em }
.pp-journal article header { display: flex; justify-content: space-between; align-items: baseline } .pp-journal article header b { font-weight: 800; font-size: 1.02em } .pp-journal article header small { font-family: var(--mono); color: #b7a99b; font-size: .78em }
.pp-journal p { margin: 0; font-size: .92em; line-height: 1.45; color: #dccfbd } .pp-journal p span { display: inline-block; min-width: 4.2em; font-family: var(--mono); font-size: .75em; text-transform: uppercase; letter-spacing: .06em; color: var(--c); margin-right: .5em } .pp-journal p.you span { color: #ff8fb8 } .pp-journal .empty { color: #8d8178; font-style: italic }
.pp-unmet { display: grid; justify-items: center; align-content: start; padding-top: 3.5em; gap: .8em; text-align: center; color: #b7a99b } .pp-unmet h4 { margin: 0; font-size: 1.8em; font-weight: 850; font-stretch: 70%; color: var(--cream) } .pp-unmet p { max-width: 24em; margin: 0 }

/* a toast from Mum */
.gt.mum { background: #ffe3ea; border: .12em solid #f09ab0 }

@media (max-width: 1000px) {
  .st-port.r { display: none } .st-port.l { width: 13em; bottom: 15em } .st-choices, .st-result { right: 3%; width: 54vw }
  .pp-body { grid-template-columns: 1fr } .pp-list { grid-auto-flow: column; grid-auto-columns: 15em; overflow-x: auto; overflow-y: hidden } .pp-top { grid-template-columns: 8em 1fr } .pp-big { width: 8em; height: 8em }
  .st-phone { right: 50%; transform: translate(50%, -50%) } @keyframes stPhone { from { opacity: 0 } }
}
/* the compass: the animal or the audience (bottom of the People list) */
.pp-compass { margin-top: .3em; padding: .7em .8em .75em; border-radius: 1em; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); display: grid; gap: .35em; color: var(--cream) }
.pp-compass i { font-style: normal; font-size: .72em; letter-spacing: .08em; text-transform: uppercase; opacity: .62 }
.pp-compass b { font-size: 1.05em }
.pp-compass.cow b { color: #7fd39a } .pp-compass.aud b { color: #e95b93 } .pp-compass.mixed b { color: #e9a14a }
.cp-bar { display: flex; height: .5em; border-radius: 1em; overflow: hidden; background: rgba(255, 255, 255, .08) }
.cp-bar u { display: block; height: 100%; transition: width .4s } .cp-bar .cow { background: #7fd39a } .cp-bar .aud { background: #e95b93 }
.cp-key { display: flex; justify-content: space-between; font-size: .72em; opacity: .7 }
.pp-compass p { margin: 0; font-size: .82em; line-height: 1.35; opacity: .8 }
@media (max-width: 800px) { .pp-compass { min-width: 15em } }
@media (prefers-reduced-motion: reduce) { .st-bg, .st-chip, .st-ch, .st-bub, .st-box.done .st-next, .st-pip { animation: none !important } .cp-bar u { transition: none } }