/* Mastery and regional events: the Craft overlay (skills, apprentice, legacy, region), the level-up card, the result strip, the hub chips,
   the regional event announcement. Prefixes: ms- (mastery), mx- (events). Linked after the other sheets.
   Same scale rule as the rest of the menu-side UI: em everywhere, font-size from the viewport. */

/* ---------- hub chips ---------- */
.ms-chip { font: inherit; color: inherit; cursor: pointer; text-align: left; position: relative; min-width: 7.8em; max-width: 11.5em; transition: filter .12s, transform .1s }
.ms-chip:hover { filter: brightness(1.2); background: var(--glass) }
.ms-chip:active { transform: translateY(.1em) }
.ms-chip small { font-size: .72em; color: #d9c9a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1 }
.ms-chip { border-color: rgba(242, 193, 78, .35) }
.ms-chip.ms-region { border-color: color-mix(in srgb, var(--c, #6b7a76) 60%, transparent) }
.ms-chip.ms-region small { color: color-mix(in srgb, var(--c, #bbb) 55%, #fff) }
.ms-pip { position: absolute; top: .45em; right: .55em; width: .62em; height: .62em; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 .15em rgba(233, 91, 147, .3); animation: msPulse 1.4s infinite }
@keyframes msPulse { 50% { box-shadow: 0 0 0 .4em rgba(233, 91, 147, 0) } }

/* ---------- the overlay ---------- */
.ms { z-index: 74; font-size: clamp(10.5px, min(1.1vw, 1.95vh), 22px); color: var(--cream) }
.ms-sheet { width: min(86em, 96vw); height: min(48em, 93vh); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .9em; background: linear-gradient(#2b211d, #1a1310); border-radius: 1.7em; border: .1em solid rgba(246, 236, 220, .2); padding: 1.2em 1.6em 1.3em; box-shadow: 0 .5em 0 #0b0706, 0 2em 4em rgba(0, 0, 0, .6); animation: pop .35s var(--ease-pop) }
.ms-sheet header { display: flex; align-items: center; gap: 1.2em }
.ms-sheet h3 { margin: 0; font-size: 2.3em; font-weight: 900; font-stretch: 62%; line-height: 1 }
.ms-sub { color: #bfb2a4; font-size: .92em; flex: 1; text-align: right }
.ms-tabs { display: flex; gap: .4em; background: rgba(0, 0, 0, .28); padding: .3em; border-radius: 1em }
.ms-tabs button { position: relative; font: inherit; font-weight: 750; font-stretch: 85%; color: #cdbfae; background: transparent; border: 0; border-radius: .75em; padding: .45em 1.1em; cursor: pointer }
.ms-tabs button:hover { background: rgba(255, 255, 255, .08) }
.ms-tabs button.on { background: var(--amber); color: #2a1c05; box-shadow: 0 .15em 0 var(--amber-d) }
.ms-tabs .ms-pip { top: .3em; right: .35em }
.ms-body { overflow-y: auto; padding: 0 .4em .4em 0; min-height: 0 }
.ms-body h5 { margin: 1em 0 .5em; font-family: var(--mono); font-size: .74em; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); font-weight: 600; display: flex; justify-content: space-between }
.ms-body h5 small { color: var(--cream) }
.ms-body h6 { margin: 0 0 .5em; font-family: var(--mono); font-size: .72em; letter-spacing: .1em; text-transform: uppercase; color: #cdbfae; font-weight: 600 }
.ms-dim { color: #b7a99b; font-size: .88em; margin: .5em 0 0 }
.ms-ico { width: 2.3em; height: 2.3em; flex: none; color: var(--c, var(--amber)) }
.ms-ico .f { fill: color-mix(in srgb, var(--c, var(--amber)) 22%, transparent); stroke: none }
.ms-bar { height: .5em; border-radius: .3em; background: rgba(255, 255, 255, .12); overflow: hidden } .ms-bar u { display: block; height: 100%; border-radius: .3em; background: var(--amber); transition: width .5s }

/* skills */
.ms-top { display: grid; grid-template-columns: 1.1fr 1.5fr .7fr; gap: 1em; margin-bottom: 1em }
.ms-top > div { background: rgba(255, 255, 255, .05); border-radius: 1.1em; padding: .8em 1.1em; display: grid; gap: .25em; align-content: center }
.ms-top small { font-family: var(--mono); font-size: .68em; letter-spacing: .12em; text-transform: uppercase; color: #b9aca0 }
.ms-top h4 { margin: 0; font-size: 1.9em; font-weight: 900; font-stretch: 66%; line-height: 1.02 }
.ms-sig h4 { color: var(--amber) } .ms-top span { color: #cdbfae; font-size: .86em }
.ms-last b { font-size: 2.4em; font-weight: 900; font-stretch: 66%; line-height: 1; color: var(--cream) }
.ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em }
.ms-card { background: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); border-radius: 1.2em; padding: .9em 1.1em 1em; display: grid; gap: .4em; align-content: start; border-top: .22em solid var(--c); box-shadow: 0 .25em 0 rgba(0, 0, 0, .3) }
.ms-card header { display: grid; grid-template-columns: auto 1fr 3.4em; gap: .7em; align-items: center }
.ms-card h5 { margin: 0; display: block; font-family: var(--display); text-transform: none; letter-spacing: 0; font-size: 1.35em; font-weight: 850; font-stretch: 74%; color: var(--cream) }
.ms-ti { color: var(--c); font-weight: 700; font-size: .92em }
.ms-ringsvg { width: 3.4em; height: 3.4em } .ms-ringsvg text { fill: var(--cream); font-weight: 900; font-size: 15px; font-family: var(--display) }
.ms-xp { height: .42em; border-radius: .3em; background: rgba(255, 255, 255, .12); overflow: hidden } .ms-xp u { display: block; height: 100%; background: var(--c); border-radius: .3em; transition: width .6s }
.ms-xpl { color: #b9aca0; font-size: .74em; margin-top: -.15em }
.ms-now { margin: .15em 0 0; padding: 0; list-style: none; display: grid; gap: .2em } .ms-now li { font-size: .88em; padding-left: 1.1em; position: relative; color: #efe3cf } .ms-now li::before { content: ""; position: absolute; left: .1em; top: .5em; width: .45em; height: .45em; border-radius: 50%; background: var(--c) }
.ms-card p { margin: 0; font-size: .8em; line-height: 1.35; color: #cdbfae } .ms-card p i { display: block; font-style: normal; font-family: var(--mono); font-size: .82em; letter-spacing: .1em; text-transform: uppercase; color: #9d9082; margin-bottom: .05em }
.ms-next { padding: .35em .6em; border-radius: .6em; background: color-mix(in srgb, var(--c) 12%, transparent) }
.ms-did b { color: var(--c) }
.ms-life { font-family: var(--mono); font-size: .7em !important; color: #a89a8c !important; border-top: 1px dashed rgba(255, 255, 255, .12); padding-top: .4em }

/* the result strip */
.ms-res { margin: .3em 0 .1em; padding: .5em .7em .55em; background: rgba(255, 255, 255, .05); border-radius: .8em }
.ms-res h6 { margin: 0 0 .35em; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); font-weight: 600 }
.ms-chips { display: flex; flex-wrap: wrap; gap: .35em }
.ms-gc { display: grid; grid-template-columns: 1.3em auto auto 1fr; grid-template-areas: "i n e l" "u u u u"; align-items: center; gap: 0 .35em; padding: .2em .5em .25em; border-radius: .6em; background: rgba(0, 0, 0, .28); font-size: .72rem; min-width: 8.6em; animation: msGc .5s var(--ease-pop) both }
.ms-gc .ms-ico { grid-area: i; width: 1.3em; height: 1.3em; --c: var(--c) } .ms-gc b { grid-area: n; font-weight: 700; font-stretch: 85% } .ms-gc em { grid-area: e; font-style: normal; color: var(--c); font-weight: 800 } .ms-gc small { grid-area: l; justify-self: end; color: #b9aca0; font-family: var(--mono) }
.ms-gc u { grid-area: u; height: .22em; background: rgba(255, 255, 255, .14); border-radius: .2em; overflow: hidden; margin-top: .2em } .ms-gc u i { display: block; height: 100%; background: var(--c) }
@keyframes msGc { from { opacity: 0; transform: translateY(.4em) scale(.9) } }

/* the level-up card */
.ms-lvl { position: fixed; left: 50%; bottom: 3.2rem; transform: translate(-50%, 2em) scale(.9); z-index: 90; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; padding: .9rem 1.7rem .9rem 1.1rem; border-radius: 1.5rem; background: linear-gradient(#34261f, #1d1411); border: .12rem solid var(--c); box-shadow: 0 .35rem 0 #0b0706, 0 1.4rem 3rem rgba(0, 0, 0, .55), 0 0 3rem color-mix(in srgb, var(--c) 40%, transparent); color: var(--cream); font-size: clamp(11px, min(1.05vw, 1.9vh), 21px); max-width: min(40em, 92vw); opacity: 0; cursor: pointer }
.ms-lvl.on { opacity: 1; transform: translate(-50%, 0) scale(1); transition: transform .45s var(--ease-pop), opacity .25s }
.ms-lvl.out { opacity: 0; transform: translate(-50%, 1em) scale(.96); transition: all .3s }
.ms-lv-ring { position: relative; width: 5.2em; height: 5.2em; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 45%, #fff), var(--c) 70%); color: #20130b; box-shadow: inset 0 -.25em .5em rgba(0, 0, 0, .25), 0 0 0 .3em color-mix(in srgb, var(--c) 30%, transparent) }
.ms-lv-ring .ms-ico { position: absolute; width: 2.1em; height: 2.1em; top: .6em; left: 50%; transform: translateX(-50%); color: rgba(32, 19, 11, .75) } .ms-lv-ring .ms-ico .f { fill: rgba(32, 19, 11, .12) }
.ms-lv-ring b { position: absolute; bottom: .35em; font-size: 1.7em; font-weight: 950; font-stretch: 66%; line-height: 1 }
.ms-lv-t small { font-family: var(--mono); font-size: .7em; letter-spacing: .18em; text-transform: uppercase; color: var(--c) }
.ms-lv-t h4 { margin: .05em 0 0; font-size: 2em; font-weight: 900; font-stretch: 62%; line-height: 1 } .ms-lv-t span { display: block; color: var(--amber); font-weight: 800; font-stretch: 80%; font-size: 1.1em; margin: .1em 0 .25em } .ms-lv-t p { margin: 0; font-size: .9em; color: #d9cbb8; max-width: 24em }

/* the title badge in the editor */
.ms-badge { display: flex; align-items: center; gap: .55em; padding: .25em .9em .25em .4em; border-radius: 2em; background: rgba(242, 193, 78, .14); border: 1px solid rgba(242, 193, 78, .5); margin-left: 1em; color: #fbe9bd }
.ms-badge i { width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: #2a1c05 } .ms-badge i .ms-ico { width: 1.25em; height: 1.25em; color: #2a1c05 } .ms-badge i .ms-ico .f { fill: rgba(42, 28, 5, .15) }
.ms-badge span { display: grid; line-height: 1.05 } .ms-badge small { font-size: .62em; letter-spacing: .1em; text-transform: uppercase; color: #cdb98a; font-family: var(--mono) } .ms-badge b { font-size: .95em; font-weight: 800; font-stretch: 80% }

/* apprentice */
.ms-app { display: grid; grid-template-columns: 14em 1fr; gap: 1.8em; align-items: start; padding: .6em .8em .6em .6em }
.ms-app.none { align-items: center }
.ms-appface { display: grid; gap: .8em } .ms-appface > .st-mono { aspect-ratio: 1; border-radius: 1.5em; 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, #7fd3c4 35%, transparent) }
.ms-mood i { font-style: normal; font-size: .74em; color: #b9aca0 }
.ms-appmain header { display: grid; gap: .1em; margin-bottom: .6em } .ms-appmain h4, .ms-app.none h4 { margin: 0; font-size: 2em; font-weight: 900; font-stretch: 64%; line-height: 1 } .ms-appmain h4 small { font-family: var(--mono); font-size: .38em; letter-spacing: .12em; text-transform: uppercase; color: #7fd3c4; font-stretch: 100%; font-weight: 600; margin-left: .6em }
.ms-beats { display: flex; flex-wrap: wrap; gap: .4em; margin-bottom: 1em } .ms-beats span { display: flex; align-items: center; gap: .4em; padding: .2em .75em .2em .25em; border-radius: 2em; background: rgba(255, 255, 255, .06); font-size: .82em; color: #b9aca0 } .ms-beats u { text-decoration: none; width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); font-size: .85em; font-weight: 800 } .ms-beats span.done { color: var(--cream); background: rgba(127, 211, 196, .15) } .ms-beats span.done u { background: #7fd3c4; color: #0f2723 }
.ms-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.6em }
.ms-ab { display: grid; grid-template-columns: 9em 1fr 2.6em; gap: .6em; align-items: center; margin-bottom: .4em; font-size: .9em } .ms-ab b { text-align: right; font-family: var(--mono); font-size: .9em }
.ms-abar { position: relative; height: .6em; border-radius: .4em; background: rgba(255, 255, 255, .1) } .ms-abar u { display: block; height: 100%; border-radius: .4em } .ms-abar i { position: absolute; top: -.35em; width: .16em; height: 1.3em; background: var(--cream); border-radius: .1em; transform: translateX(-50%) }
.ms-modes { display: grid; gap: .5em } .ms-mode { text-align: left; display: grid; gap: .1em; padding: .6em .9em; border-radius: .9em; border: .12em solid transparent; background: rgba(255, 255, 255, .06); color: var(--cream); cursor: pointer; font: inherit } .ms-mode b { font-size: 1.05em; font-weight: 800; font-stretch: 80% } .ms-mode span { font-size: .78em; color: #b9aca0 } .ms-mode:hover:not(:disabled) { background: rgba(255, 255, 255, .11) } .ms-mode.on { border-color: #7fd3c4; background: rgba(127, 211, 196, .13) } .ms-mode:disabled { opacity: .5; cursor: default }
.ms-reqs { display: flex; flex-wrap: wrap; gap: .4em; margin: .6em 0 } .ms-reqs span { padding: .2em .7em; border-radius: 2em; background: rgba(224, 96, 58, .16); color: #ffb09a; font-size: .8em } .ms-reqs span.ok { background: rgba(127, 211, 154, .16); color: #a9e6bd }
.ms-chan { display: grid; padding: .6em .9em; border-radius: .9em; background: rgba(233, 91, 147, .12); border: 1px solid rgba(233, 91, 147, .4) } .ms-chan b { font-size: 1.1em } .ms-chan span { font-size: .85em; color: #e5c3d1 }

/* legacy */
.ms-leg { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6em }
.ms-hts { display: grid; gap: .4em } .ms-ht { display: grid; grid-template-columns: 3.4em 1fr; gap: .8em; align-items: center; padding: .4em .8em .4em .5em; border-radius: .9em; background: rgba(255, 255, 255, .06) } .ms-ht b { font-size: 1.9em; font-weight: 900; font-stretch: 62%; color: var(--amber); text-align: center } .ms-ht strong { font-size: 1em } .ms-ht strong small { color: var(--amber); letter-spacing: .05em } .ms-ht span { display: block; font-size: .78em; color: #b9aca0 } .ms-ht em { display: block; font-style: normal; font-size: .76em; color: #a9e6bd } .ms-ht.empty { opacity: .45 }
.ms-hvs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6em } .ms-hv { display: grid; gap: .15em; align-content: start; font-size: .82em } .ms-hv b { font-size: .95em; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .ms-hv span { color: #b9aca0; font-size: .82em }
.ms-th { aspect-ratio: 16/9; border-radius: .6em; background: rgba(255, 255, 255, .07); overflow: hidden; position: relative; border: 1px solid rgba(255, 255, 255, .1) } .ms-th img { width: 100%; height: 100%; object-fit: cover; display: block } .ms-th em { position: absolute; top: .3em; left: .3em; font-style: normal; font-size: .62em; font-weight: 900; background: var(--pink); color: #20081a; padding: .1em .5em; border-radius: .3em } .ms-hv.empty { opacity: .45 }
.ms-goals { display: grid; gap: .35em } .ms-goal { display: grid; grid-template-columns: 1.6em 1fr 6em 3em; gap: .6em; align-items: center; padding: .35em .6em; border-radius: .8em; background: rgba(255, 255, 255, .05) } .ms-goal b { display: block; font-size: .92em } .ms-goal small { color: #b9aca0; font-size: .76em } .ms-gck { width: 1.5em; height: 1.5em; border-radius: 50%; border: .12em solid rgba(255, 255, 255, .3); display: grid; place-items: center; font-size: .8em; font-weight: 900 } .ms-goal.done .ms-gck { background: var(--ok); color: #0f2318; border-color: transparent } .ms-goal.done b { color: #bfe9cc }
.ms-gbar { height: .4em; background: rgba(255, 255, 255, .12); border-radius: .3em; overflow: hidden } .ms-gbar u { display: block; height: 100%; background: var(--amber) } .ms-goal em { font-style: normal; font-family: var(--mono); font-size: .72em; color: #b9aca0; text-align: right }
.ms-school, .ms-prod { padding: .7em .9em; border-radius: .9em; background: rgba(255, 255, 255, .06); display: grid; gap: .3em; justify-items: start } .ms-school p, .ms-prod p { margin: 0; font-size: .84em; color: #cdbfae } .ms-school.on, .ms-prod.own { background: rgba(127, 211, 154, .1) } .ms-ok { color: #a9e6bd; font-size: .84em; font-weight: 700 }
.ms-prods { display: grid; gap: .5em }

/* region */
.ms-reg { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.6em }
.ms-evs { display: grid; gap: .8em; align-content: start }
.ms-ev { padding: .9em 1.1em 1em; border-radius: 1.2em; background: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); border-left: .3em solid var(--c); display: grid; gap: .45em; box-shadow: 0 .25em 0 rgba(0, 0, 0, .3) }
.ms-ev header { display: grid; grid-template-columns: auto 1fr; gap: .8em; align-items: center } .ms-ev h5 { margin: 0; display: block; text-transform: none; letter-spacing: 0; font-family: var(--display); font-size: 1.35em; font-weight: 850; font-stretch: 74%; color: var(--cream) } .ms-ev header span { color: color-mix(in srgb, var(--c) 55%, #fff); font-size: .84em }
.ms-ev p { margin: 0; font-size: .86em; color: #d4c7b6; line-height: 1.4 } .ms-ev .ms-fx { color: #efe3cf; padding: .4em .7em; border-radius: .6em; background: color-mix(in srgb, var(--c) 14%, transparent) }
.ms-evch { display: flex; flex-wrap: wrap; gap: .4em }
.ms-empty { padding: 1.4em; border-radius: 1.2em; background: rgba(255, 255, 255, .05); text-align: center } .ms-empty h5 { display: block; font-size: 1.4em; margin: 0 0 .3em; text-transform: none; letter-spacing: 0; font-family: var(--display); color: var(--cream) } .ms-empty p { margin: 0; color: #b9aca0; font-size: .9em }
.ms-hist { display: grid; align-content: start; gap: .3em } .ms-hist div { display: grid; grid-template-columns: .7em 1fr; gap: 0 .6em; align-items: baseline; font-size: .86em; padding: .3em .2em } .ms-hist i { width: .6em; height: .6em; border-radius: 50%; align-self: center; grid-row: 1 / 3 } .ms-hist span { color: #b9aca0; font-size: .86em }

/* the regional event announcement */
.mx { position: fixed; inset: 0; z-index: 78; display: grid; place-items: center; padding: 1em; background: radial-gradient(ellipse at 50% 40%, rgba(40, 20, 30, .55), rgba(6, 4, 5, .84)); backdrop-filter: blur(4px); font-size: clamp(10.5px, min(1.1vw, 1.95vh), 22px); color: var(--cream); opacity: 0; transition: opacity .25s }
.mx.on { opacity: 1 } .mx[hidden] { display: none }
.mx-card { width: min(62em, 95vw); display: grid; grid-template-columns: 15em 1fr; border-radius: 1.7em; overflow: hidden; background: linear-gradient(#2d221d, #1a1310); border: .1em solid rgba(246, 236, 220, .2); box-shadow: 0 .5em 0 #0b0706, 0 2em 4em rgba(0, 0, 0, .6); transform: scale(.94) translateY(1.4em); transition: transform .4s var(--ease-pop) }
.mx.on .mx-card { transform: none }
.mx-art { display: grid; place-content: center; justify-items: center; gap: .8em; padding: 1.5em; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--c) 55%, #fff) -10%, var(--c) 60%, color-mix(in srgb, var(--c) 40%, #000)); color: #20130b; text-align: center }
.mx-art .ms-ico { width: 6.5em; height: 6.5em; color: rgba(32, 19, 11, .85) } .mx-art .ms-ico .f { fill: rgba(32, 19, 11, .14) }
.mx-art span { font-family: var(--mono); font-size: .8em; letter-spacing: .14em; text-transform: uppercase; font-weight: 700 }
.mx-body { padding: 1.4em 1.8em 1.5em; display: grid; gap: .7em; align-content: start }
.mx-body small { font-family: var(--mono); font-size: .72em; letter-spacing: .14em; text-transform: uppercase; color: var(--c) }
.mx-body h3 { margin: 0; font-size: 2.6em; font-weight: 900; font-stretch: 62%; line-height: 1 }
.mx-body > p { margin: 0; font-size: 1.05em; line-height: 1.5; color: #e2d6c3 }
.mx-ch { display: grid; gap: .55em; margin-top: .3em }
.mx-choice { display: grid; grid-template-columns: 2em 1fr; grid-template-areas: "k b" ". s"; text-align: left; gap: .05em .6em; padding: .65em 1em .7em .8em; border-radius: 1em; border: 0; cursor: pointer; font: inherit; color: var(--cream); background: linear-gradient(#41332e, #2d231f); box-shadow: inset 0 .08em 0 rgba(255, 255, 255, .12), 0 .25em 0 #0f0a09; transition: transform .1s }
.mx-choice:hover { transform: translateY(-.1em); background: linear-gradient(#4b3b35, #352a25) } .mx-choice:active { transform: translateY(.1em); box-shadow: 0 .05em 0 #0f0a09 }
.mx-choice kbd { grid-area: k; align-self: center; width: 1.7em; height: 1.7em; border-radius: .4em; background: var(--c); color: #20130b; display: grid; place-items: center; font-family: var(--mono); font-weight: 800; font-size: .85em }
.mx-choice b { grid-area: b; font-size: 1.1em; font-weight: 800; font-stretch: 82% } .mx-choice span { grid-area: s; font-size: .84em; color: #b9aca0 }
.mx-res { display: grid; gap: .7em; justify-items: start }
.mx-chips { display: flex; flex-wrap: wrap; gap: .4em } .mx-chip { padding: .25em .8em; border-radius: 2em; font-weight: 750; font-size: .9em; background: rgba(255, 255, 255, .1); animation: msGc .4s calc(var(--i) * .12s) var(--ease-pop) both } .mx-chip.good { background: rgba(127, 211, 154, .2); color: #b6efc9 } .mx-chip.bad { background: rgba(224, 96, 58, .22); color: #ffb9a3 }
.mx-txt { margin: 0; font-style: italic; color: #e2d6c3; font-size: 1.02em; line-height: 1.5 }

@media (max-width: 1000px) {
  .ms-grid { grid-template-columns: 1fr 1fr } .ms-top, .ms-leg, .ms-reg, .ms-two, .ms-app { grid-template-columns: 1fr } .mx-card { grid-template-columns: 1fr } .mx-art { grid-auto-flow: column; padding: .8em } .mx-art .ms-ico { width: 3em; height: 3em }
}
@media (prefers-reduced-motion: reduce) { .ms-lvl, .mx, .mx-card, .ms-gc, .mx-chip, .ms-pip { animation: none !important; transition: none !important } }