:root {
--pms-bg:          #F4F7F6;
--pms-surface:     #FFFFFF;
--pms-ink:         #1C272B;
--pms-ink-soft:    #4A5A61;
--pms-accent:      #0E6E73;
--pms-accent-deep: #0A5256;
--pms-accent-tint: #E1EFEE;
--pms-bronze:      #B36F26;
--pms-bronze-text: #8C5A1E;
--pms-bronze-tint: #F6EBDD;
--pms-ok:          #1D6B38;
--pms-ok-tint:     #E3F2E7;
--pms-alert:       #A4261C;
--pms-alert-tint:  #FBE7E4;
--pms-warn:        #8A5A00;
--pms-warn-tint:   #FFF3D6;
--pms-line:   #E2E7E8;
--pms-line:   color-mix(in srgb, var(--pms-ink) 14%, transparent);
--pms-control-line: #7A878C;
--pms-radius: 14px;
--pms-shadow: 0 1px 2px rgb(20 40 45 / 8%), 0 6px 18px rgb(20 40 45 / 7%);
--accent:      var(--pms-accent);
--accent-dark: var(--pms-accent-deep);
--accent-soft: var(--pms-accent-tint);
--pms-t: 180ms;
--pms-water-top:   #0A4F53;
--pms-water:       #0E6E73;
--pms-on-water:    #FFFFFF;
--pms-on-water-soft: #E3F1EF;
--pms-sand:        #F6E5BF;
--pms-bronze-light: #E7C27F;
}
* { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
background: var(--pms-bg);
color-scheme: light;
}
body {
margin: 0;
color: var(--pms-ink);
background: var(--pms-bg);
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
font-size: 1.125rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
font-weight: 600;
line-height: 1.2;
text-wrap: balance;
color: var(--pms-ink);
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin: 2.2rem 0 0.8rem; }
h3 { font-size: 1.25rem; margin: 1.6rem 0 0.5rem; }
p { margin: 0 0 1.05rem; }
a {
color: var(--pms-accent-deep);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
a:hover { color: var(--pms-accent); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--pms-accent); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
::selection { background: color-mix(in srgb, var(--pms-accent) 22%, transparent); }
code {
font-size: 0.92em;
background: var(--pms-accent-tint);
padding: 0.05em 0.35em;
border-radius: 5px;
overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
.container {
width: 100%;
max-width: 72rem;
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 2rem);
}
.skip-link {
position: absolute;
top: 0;
inset-inline-start: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
background: var(--pms-ink);
color: #fff;
z-index: 100;
}
.skip-link:focus { width: auto; height: auto; padding: 0.7rem 1.1rem; clip-path: none; }
.preview-banner,
.course-banner {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1rem;
justify-content: center;
padding: 0.6rem 1rem;
background: var(--pms-warn-tint);
color: var(--pms-ink);
font-size: 1rem;
border-bottom: 1px solid var(--pms-line);
}
.course-banner { background: var(--pms-accent-tint); }
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 48px;
padding: 0.6rem 1.25rem;
border: 2px solid var(--pms-accent);
border-radius: 999px;
background: var(--pms-surface);
color: var(--pms-accent-deep);
font: inherit;
font-weight: 600;
line-height: 1.25;
text-decoration: none;
cursor: pointer;
transition: background var(--pms-t), color var(--pms-t), border-color var(--pms-t);
}
.button:hover { background: var(--pms-accent-tint); color: var(--pms-accent-deep); text-decoration: none; }
.button--primary { background: var(--pms-accent); color: #fff; }
.button--primary:hover { background: var(--pms-accent-deep); border-color: var(--pms-accent-deep); color: #fff; }
.button--quiet { border-color: var(--pms-control-line); color: var(--pms-ink); }
.button--ok { border-color: var(--pms-ok); color: var(--pms-ok); }
.button--ok:hover { background: var(--pms-ok-tint); color: var(--pms-ok); }
.button--alert { border-color: var(--pms-alert); color: var(--pms-alert); }
.button--alert:hover { background: var(--pms-alert-tint); color: var(--pms-alert); }
.button[disabled] { opacity: 0.5; cursor: default; }
.site-header {
background: var(--pms-water-top);
color: var(--pms-on-water);
}
.site-header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.6rem 1.5rem;
padding-block: 0.8rem;
}
.site-header__brand {
display: inline-flex;
align-items: center;
gap: 0.65rem;
color: var(--pms-on-water);
text-decoration: none;
}
.site-header__brand:hover { color: var(--pms-on-water); }
.site-header__mark { display: block; width: 44px; height: 44px; flex: 0 0 auto; }
.site-header__wordmark {
font-family: 'Source Serif 4', Georgia, serif;
font-weight: 600;
font-size: 1.3rem;
}
.site-header__nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 1.1rem;
}
.site-nav__link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: 0.15rem;
color: var(--pms-on-water-soft);
text-decoration: none;
font-weight: 500;
border-bottom: 3px solid transparent;
}
.site-nav__link:hover { color: var(--pms-on-water); border-bottom-color: rgb(255 255 255 / 35%); }
.site-nav__link.is-active { color: var(--pms-on-water); border-bottom-color: var(--pms-sand); }
.site-nav__link--rescue {
gap: 0.4rem;
padding-inline: 0.7rem 0.95rem;
border: 2px solid var(--pms-bronze-light);
border-radius: 999px;
color: var(--pms-on-water);
}
.site-nav__link--rescue:hover { border-color: var(--pms-sand); background: rgb(255 255 255 / 10%); }
.site-nav__link--rescue.is-active { border-color: var(--pms-bronze-light); background: var(--pms-bronze-light); color: var(--pms-ink); }
.site-nav__icon { flex: 0 0 auto; color: var(--pms-bronze-light); }
.site-nav__link--rescue.is-active .site-nav__icon { color: currentColor; }
.page { min-height: 100vh; display: flex; flex-direction: column; }
.page__main { flex: 1; }
.site-footer {
margin-top: 4rem;
padding-block: 2.5rem 2rem;
background: var(--pms-surface);
border-top: 1px solid var(--pms-line);
font-size: 1rem;
color: var(--pms-ink-soft);
}
.site-footer__inner { text-align: center; }
.site-footer__home {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--pms-ink);
font-family: 'Source Serif 4', Georgia, serif;
font-weight: 600;
font-size: 1.15rem;
text-decoration: none;
}
.site-footer__tagline { margin: 0.4rem 0 1.2rem; }
.site-footer__nav { display: grid; gap: 0.6rem; margin-bottom: 1.2rem; }
.site-footer__row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.3rem 1.2rem;
}
.site-footer__row a { color: var(--pms-ink); }
.site-footer__row--meta { font-size: 0.95rem; }
.site-footer__row--meta a { color: var(--pms-ink-soft); }
.site-footer__promise { font-weight: 500; color: var(--pms-ink); }
.site-footer__machines,
.site-footer__copy { font-size: 0.9rem; margin: 0.4rem 0; }
.site-page { padding-block: 2.2rem 1rem; }
.site-page--narrow .site-page__article { max-width: 44rem; margin-inline: auto; }
.lead { font-size: 1.25rem; color: var(--pms-ink-soft); }
.fictional-note {
margin-top: 2.5rem;
font-size: 0.95rem;
color: var(--pms-ink-soft);
text-align: center;
}
.hero { padding-top: clamp(1.5rem, 4vw, 3rem); }
.hero__inner {
display: grid;
gap: 1rem 3rem;
align-items: center;
padding-bottom: 1rem;
}
@media (min-width: 52rem) { .hero__inner { grid-template-columns: 1.35fr 1fr; } }
.hero__eyebrow {
margin: 0 0 0.3rem;
color: var(--pms-sand);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.hero__title { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem); color: var(--pms-on-water); margin-bottom: 1.1rem; }
.hero__lead { font-size: 1.25rem; color: var(--pms-on-water-soft); max-width: 36rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.hero__art { display: flex; justify-content: center; }
.hero__carp { width: 100%; max-width: 560px; height: auto; }
.home-section { margin-top: 3.2rem; }
.home-section__lead { color: var(--pms-ink-soft); max-width: 44rem; }
.home-section__more { margin-top: 1rem; }
.card-row {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.card {
background: var(--pms-surface);
border: 1px solid var(--pms-line);
border-radius: var(--pms-radius);
padding: 1.2rem 1.3rem;
box-shadow: var(--pms-shadow);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.home-carp {
display: grid;
gap: 1rem 2.5rem;
align-items: center;
background: var(--pms-bronze-tint);
border-radius: var(--pms-radius);
padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
}
@media (min-width: 46rem) { .home-carp { grid-template-columns: auto 1fr; } }
.home-carp h2 { margin-top: 0; }
.home-carp__art { display: flex; justify-content: center; }
.callout {
border-radius: var(--pms-radius);
padding: 1.3rem 1.5rem;
border: 1px solid var(--pms-line);
background: var(--pms-surface);
}
.callout h2, .callout h3 { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
.callout--calm { background: var(--pms-accent-tint); border-color: transparent; }
.callout--warn { background: var(--pms-warn-tint); border-color: transparent; }
.station-grid {
list-style: none;
padding: 0;
margin: 1.2rem 0 0;
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.station-card__link {
position: relative;
display: flex;
flex-direction: column;
gap: 0.35rem;
height: 100%;
padding: 1.2rem 1.25rem 1.1rem 5.2rem;
background: var(--pms-surface);
border: 1px solid var(--pms-line);
border-radius: var(--pms-radius);
box-shadow: var(--pms-shadow);
color: var(--pms-ink);
text-decoration: none;
transition: border-color var(--pms-t), transform var(--pms-t);
}
.station-card__link:hover { border-color: var(--pms-accent); transform: translateY(-1px); }
.station-card__icon {
position: absolute;
inset-inline-start: 1.1rem;
top: 1.1rem;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: 12px;
background: var(--pms-accent-tint);
color: var(--pms-accent-deep);
}
.station-card__number {
position: absolute;
top: -0.45rem;
inset-inline-end: -0.45rem;
display: grid;
place-items: center;
width: 1.45rem;
height: 1.45rem;
border-radius: 50%;
background: var(--pms-surface);
border: 2px solid var(--pms-accent);
color: var(--pms-accent-deep);
font-size: 0.8rem;
font-weight: 700;
line-height: 1;
}
.station-card__title { font-weight: 700; font-size: 1.15rem; }
.station-card__teaser { color: var(--pms-ink-soft); font-size: 1rem; }
.station-card__status {
align-self: flex-start;
margin-top: auto;
padding: 0.15rem 0.7rem;
border-radius: 999px;
background: var(--pms-bg);
color: var(--pms-ink-soft);
font-size: 0.9rem;
font-weight: 600;
}
.station-card[data-state="done"] .station-card__status { background: var(--pms-ok-tint); color: var(--pms-ok); }
.station-card[data-state="done"] .station-card__icon { background: var(--pms-accent); color: #fff; }
.station-card[data-state="refresh"] .station-card__icon { box-shadow: inset 0 0 0 2px var(--pms-warn); }
.station-card[data-state="refresh"] .station-card__status { background: var(--pms-warn-tint); color: var(--pms-warn); }
.water {
position: relative;
color: var(--pms-on-water);
background: linear-gradient(180deg, var(--pms-water-top) 0%, var(--pms-water) 100%);
overflow: hidden;
}
.water h1, .water h2 { color: var(--pms-on-water); }
.water a:not(.button) { color: var(--pms-on-water); }
.water :focus-visible,
.site-header :focus-visible { outline-color: var(--pms-sand); }
.hero.water::before,
.hero.water::after {
content: "";
position: absolute;
top: -20%;
width: 9rem;
height: 140%;
background: linear-gradient(180deg, rgb(255 255 255 / 9%), transparent 70%);
transform: rotate(18deg);
pointer-events: none;
}
.hero.water::before { inset-inline-start: 56%; }
.hero.water::after { inset-inline-start: 74%; opacity: 0.6; }
.hero__inner { position: relative; z-index: 1; }
.wave { display: block; width: 100%; height: clamp(28px, 4vw, 48px); margin-top: -1px; }
.wave__fill { fill: var(--pms-bg); }
.wave__line { fill: none; stroke: var(--pms-bronze-light); stroke-width: 2.5; vector-effect: non-scaling-stroke; opacity: 0.85; }
.page-head { padding-top: clamp(1.2rem, 3vw, 2rem); }
.page-head__inner { padding-bottom: 0.4rem; }
.page-head__inner--narrow { max-width: 44rem; margin-inline: auto; }
.page-head h1 { margin-bottom: 0.2rem; }
.page-head__eyebrow {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.5rem;
color: var(--pms-sand);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.02em;
}
.page-head__icon { flex: 0 0 auto; }
.site-page { padding-top: 1.4rem; }
.button--sand { background: var(--pms-bronze-light); border-color: var(--pms-bronze-light); color: var(--pms-ink); }
.button--sand:hover { background: var(--pms-sand); border-color: var(--pms-sand); color: var(--pms-ink); }
.button--on-water { background: transparent; border-color: rgb(255 255 255 / 80%); color: var(--pms-on-water); }
.button--on-water:hover { background: rgb(255 255 255 / 12%); border-color: var(--pms-on-water); color: var(--pms-on-water); }
.water .carp__line { stroke: #9FC9C6; }
.water .carp__steel { stroke: #DCEBE9; }
.water .carp__steel-fill { fill: #DCEBE9; }
.water .carp__bubbles { stroke: #CFE7E4; }
.teaser {
display: grid;
gap: 1.5rem 3.5rem;
align-items: start;
margin-top: 1rem;
}
@media (min-width: 52rem) {
.teaser {
grid-template-columns: 1fr 1.25fr;
grid-template-areas: "text sheet" "result sheet";
grid-template-rows: auto 1fr;
}
.teaser__text   { grid-area: text; }
.teaser .sheet  { grid-area: sheet; }
.teaser__result { grid-area: result; }
}
.teaser__result:empty { display: none; }
.teaser__result .result { margin-top: 0; }
.teaser h2 { margin-top: 0.4rem; }
.teaser__more { font-weight: 600; }
.sheet {
position: relative;
background: var(--pms-surface);
border: 1px solid var(--pms-line);
border-radius: 6px;
padding: 1.6rem 1.4rem 1.3rem;
box-shadow: 0 18px 40px rgb(28 39 43 / 12%);
}
@media (min-width: 52rem) { .sheet { transform: rotate(-1.2deg); } }
.sheet__tag {
position: absolute;
top: -0.8rem;
inset-inline-start: 1.2rem;
padding: 0.15rem 0.65rem;
border-radius: 4px;
background: var(--pms-accent);
color: #fff;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
}
.sheet__from { font-size: 1rem; color: var(--pms-ink-soft); margin-bottom: 0.2rem; overflow-wrap: anywhere; }
.sheet__from strong { color: var(--pms-ink); }
.sheet__subject {
font-family: 'Source Serif 4', Georgia, serif;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.3;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--pms-line);
}
.sheet__body p { margin-bottom: 0.6rem; }
.sheet .target-bar { margin-top: 0.4rem; }
.sheet .decide { margin-top: 1rem; }
.sheet__note {
margin: 1rem 0 0;
padding-inline-start: 0.9rem;
border-inline-start: 4px solid var(--pms-bronze-light);
font-family: 'Source Serif 4', Georgia, serif;
font-style: italic;
font-size: 1.1rem;
color: var(--pms-bronze-text);
}
.sheet__verdict { margin: 0.9rem 0 0; padding: 0.6rem 0.8rem; border-radius: 8px; background: var(--pms-accent-tint); }
html.js .teaser .sheet:not([data-pms-mounted]) [data-teaser-target],
html.js .teaser .sheet:not([data-pms-mounted]) [data-teaser-note],
html.js .teaser .sheet:not([data-pms-mounted]) [data-teaser-verdict] { visibility: hidden; }
.pin {
display: inline-grid;
place-items: center;
width: 1.55rem;
height: 1.55rem;
margin-inline-start: 0.35rem;
border-radius: 50%;
background: var(--pms-warn);
color: #fff;
font: 700 0.8rem/1 'Inter', system-ui, sans-serif;
vertical-align: middle;
}
.sheet [data-spot] { position: relative; }
.pin--corner { position: absolute; top: -0.8rem; inset-inline-end: -0.8rem; margin: 0; }
.pin-list { list-style: none; padding: 0; margin: 0.3rem 0 0.9rem; display: grid; gap: 0.5rem; font-size: 1rem; }
.pin-list li { display: flex; gap: 0.6rem; align-items: flex-start; }
.pin-list .pin { flex: 0 0 auto; margin: 0.1rem 0 0; }
.route { position: relative; margin-top: 1.2rem; }
.route__path { display: none; }
.route__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; position: relative; }
.route__list::before {
content: "";
position: absolute;
inset-inline-start: 2.2rem;
top: 2.2rem;
bottom: 2.2rem;
border-inline-start: 3px dotted var(--pms-bronze);
}
.route__link {
display: grid;
grid-template-columns: 4.4rem 1fr;
grid-template-rows: auto auto;
column-gap: 1rem;
align-items: center;
color: var(--pms-ink);
text-decoration: none;
}
.route__stone {
grid-row: 1 / span 2;
position: relative;
display: grid;
place-items: center;
width: 4.4rem;
height: 4.4rem;
border-radius: 50%;
background: var(--pms-surface);
border: 3px solid var(--pms-accent);
color: var(--pms-accent-deep);
box-shadow: var(--pms-shadow);
transition: transform var(--pms-t);
}
.route__num {
position: absolute;
top: -0.2rem;
inset-inline-end: -0.2rem;
display: grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: var(--pms-accent);
color: #fff;
font-size: 0.8rem;
font-weight: 700;
line-height: 1;
}
.route__title { font-weight: 700; align-self: end; }
.route__status { align-self: start; font-size: 0.9rem; font-weight: 600; color: var(--pms-ink-soft); }
.route__link:hover .route__stone { transform: translateY(-2px); }
.route__link:hover .route__title { color: var(--pms-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.route__stop[data-state="done"] .route__stone { background: var(--pms-accent); color: #fff; }
.route__stop[data-state="done"] .route__num { background: var(--pms-ok); }
.route__stop[data-state="done"] .route__status { color: var(--pms-ok); }
.route__stop[data-state="refresh"] .route__stone { border-color: var(--pms-warn); }
.route__stop[data-state="refresh"] .route__status { color: var(--pms-warn); }
@media (min-width: 64rem) {
.route { height: 22rem; }
.route__path {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 18.75rem;
fill: none;
stroke: var(--pms-bronze);
stroke-width: 3;
stroke-dasharray: 2 12;
stroke-linecap: round;
}
.route__path path { vector-effect: non-scaling-stroke; }
.route__list { position: absolute; inset: 0; display: block; }
.route__list::before { display: none; }
.route__stop { position: absolute; width: 11rem; transform: translate(-50%, -2.2rem); }
.route__link { grid-template-columns: 1fr; grid-template-rows: auto; justify-items: center; text-align: center; row-gap: 0.2rem; }
.route__stone { grid-row: auto; }
.route__title { margin-top: 0.3rem; line-height: 1.3; }
.route__stop:nth-child(1) { left: 7%;  top: 9.375rem; }
.route__stop:nth-child(2) { left: 24%; top: 4.375rem; }
.route__stop:nth-child(3) { left: 41%; top: 11.875rem; }
.route__stop:nth-child(4) { left: 58%; top: 6.875rem; }
.route__stop:nth-child(5) { left: 75%; top: 3.125rem; }
.route__stop:nth-child(6) { left: 92%; top: 9.375rem; }
}
.station-bar { margin: 0.9rem 0 0.2rem; }
.station-bar__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.station-bar__link {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
min-width: 2.75rem;
color: var(--pms-on-water);
text-decoration: none;
}
.station-bar__stone {
position: relative;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
border: 2px solid rgb(255 255 255 / 55%);
transition: background var(--pms-t), border-color var(--pms-t);
}
.station-bar__link:hover .station-bar__stone { border-color: var(--pms-on-water); background: rgb(255 255 255 / 10%); }
.station-bar__link:hover { color: var(--pms-on-water); }
.station-bar__num {
position: absolute;
top: -0.4rem;
inset-inline-end: -0.4rem;
display: grid;
place-items: center;
width: 1.35rem;
height: 1.35rem;
border-radius: 50%;
background: var(--pms-water-top);
border: 1.5px solid rgb(255 255 255 / 70%);
color: var(--pms-on-water);
font: 700 0.8rem/1 'Inter', system-ui, sans-serif;
}
.station-bar__label { display: none; font-size: 0.85rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
@media (min-width: 40rem) {
.station-bar__list { gap: 0.9rem; }
.station-bar__label { display: block; }
}
.station-bar__stop.is-current .station-bar__stone { border-color: var(--pms-sand); box-shadow: 0 0 0 3px rgb(246 229 191 / 35%); }
.station-bar__stop.is-current .station-bar__label { color: var(--pms-sand); }
.station-bar__stop[data-state="done"] .station-bar__stone { background: var(--pms-on-water); border-color: var(--pms-on-water); color: var(--pms-accent-deep); }
.station-bar__stop[data-state="done"] .station-bar__num { background: var(--pms-ok); border-color: #fff; font-size: 0; }
.station-bar__stop[data-state="done"] .station-bar__num::before { content: "✓"; font-size: 0.8rem; }
.station-bar__stop[data-state="refresh"] .station-bar__stone { border-style: dashed; border-color: var(--pms-sand); }
.station-bar__stop[data-state="refresh"] .station-bar__num { background: var(--pms-sand); border-color: var(--pms-sand); color: var(--pms-ink); font-size: 0; }
.station-bar__stop[data-state="refresh"] .station-bar__num::before { content: "↻"; font-size: 0.85rem; }
@media (max-width: 26rem) {
.station-bar__list { gap: 0.25rem; }
}
.station-pager {
display: grid;
gap: 0.8rem 1rem;
align-items: stretch;
margin-top: 2.5rem;
}
@media (min-width: 46rem) { .station-pager { grid-template-columns: 1fr auto 1fr; } }
.station-pager__link {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.9rem 1.1rem;
background: var(--pms-surface);
border: 1px solid var(--pms-line);
border-radius: var(--pms-radius);
box-shadow: var(--pms-shadow);
color: var(--pms-ink);
text-decoration: none;
transition: border-color var(--pms-t);
}
.station-pager__link:hover { border-color: var(--pms-accent); color: var(--pms-ink); }
.station-pager__link--next { justify-content: flex-end; text-align: end; }
.station-pager__text small { display: block; font-size: 0.9rem; color: var(--pms-ink-soft); }
.station-pager__text strong { display: block; font-size: 1.05rem; line-height: 1.3; }
.station-pager__icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 2.6rem;
height: 2.6rem;
border-radius: 10px;
background: var(--pms-accent-tint);
color: var(--pms-accent-deep);
}
.station-pager__overview { align-self: center; justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.6rem; font-weight: 600; }
.station-pager__spacer { display: none; }
@media (min-width: 46rem) { .station-pager__spacer { display: block; } }
.carp-tip {
display: inline-block;
margin-top: 1.5rem;
padding: 0.7rem 1rem;
background: var(--pms-surface);
border-inline-start: 4px solid var(--pms-bronze-light);
border-radius: 6px;
box-shadow: var(--pms-shadow);
color: var(--pms-ink-soft);
}
.carp-tip strong { color: var(--pms-ink); }
.station-icon { display: block; }
.prose ul, .prose ol { padding-inline-start: 1.4rem; }
.prose li { margin-bottom: 0.4rem; }
.legal__address { font-style: normal; line-height: 1.7; margin-bottom: 1rem; }
.legal__convenience { font-size: 1rem; color: var(--pms-ink-soft); }
.legal h2:first-child { margin-top: 0.5rem; }
.not-found { text-align: center; }
.not-found__carp { width: min(260px, 70vw); height: auto; }
.glossary-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.1rem; margin: 0 0 1rem; }
.glossary-topics__label { font-weight: 600; color: var(--pms-ink-soft); }
.glossary-topics a { display: inline-flex; align-items: center; min-height: 44px; }
.fnd-glossary__group { margin-top: 2.2rem; scroll-margin-top: 1rem; }
.fnd-glossary__heading { margin: 0 0 0.3rem; }
.fnd-glossary__list { margin: 0; border-bottom: 1px solid var(--pms-line); }
.fnd-glossary__term { border-top: 1px solid var(--pms-line); scroll-margin-top: 1rem; }
.fnd-glossary__name {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 48px;
padding: 0.35rem 0.2rem;
font-weight: 700;
font-size: 1.1rem;
cursor: pointer;
list-style: none;
}
.fnd-glossary__name::-webkit-details-marker { display: none; }
.fnd-glossary__name::after {
content: "";
flex: 0 0 auto;
width: 0.55rem;
height: 0.55rem;
margin-inline-end: 0.4rem;
border-right: 2px solid var(--pms-accent);
border-bottom: 2px solid var(--pms-accent);
transform: translateY(-0.15rem) rotate(45deg);
transition: transform var(--pms-t);
}
.fnd-glossary__term[open] > .fnd-glossary__name::after { transform: translateY(0.15rem) rotate(-135deg); }
.fnd-glossary__name:hover { color: var(--pms-accent-deep); }
.fnd-glossary__def { padding: 0 0.2rem 0.9rem; }
.fnd-glossary__def p { max-width: 46rem; margin-bottom: 0.5rem; }
.fnd-glossary__def p:last-child { margin-bottom: 0; }
.fnd-glossary__tip { color: var(--pms-ink-soft); }
.fnd-glossary__tip strong { color: var(--pms-bronze-text); }
.fnd-glossary__term:target {
background: var(--pms-bronze-tint);
box-shadow: 0 0 0 0.75rem var(--pms-bronze-tint);
border-radius: 2px;
}
.coming-soon { padding: clamp(1.5rem, 6vw, 4rem) clamp(1rem, 5vw, 3rem); }
.coming-soon__inner { max-width: 40rem; margin-inline: auto; }
.carp { overflow: visible; }
.carp__tail { transform-origin: 70px 84px; animation: carp-tail 3.2s ease-in-out 1; }
.carp__fin  { transform-origin: 236px 100px; animation: carp-fin 2.6s ease-in-out 1; }
.carp__bubbles circle { animation: carp-bubble 3.4s ease-in-out 1; }
.carp__bubbles circle:nth-child(2) { animation-delay: 0.6s; }
.carp__bubbles circle:nth-child(3) { animation-delay: 1.2s; }
@keyframes carp-tail   { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-7deg); } }
@keyframes carp-fin    { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(8deg); } }
@keyframes carp-bubble { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.carp__hook, .carp__line { transform-origin: 300px 0; }
.carp__hook.is-dipping { animation: carp-hook-sway 4s ease-in-out 1; }
.carp__hook.is-dipping .carp__hook-steel { animation: carp-hook-dip 4s ease-in-out 1; }
.carp__hook.is-dipping .carp__line { animation: carp-hook-line 4s ease-in-out 1; }
@keyframes carp-hook-dip {
0%, 100% { transform: translateY(0); }
30% { transform: translateY(12px); }
48% { transform: translateY(11px); }
76% { transform: translateY(-1.5px); }
90% { transform: translateY(0.5px); }
}
@keyframes carp-hook-line {
0%, 100% { transform: scaleY(1); }
30% { transform: scaleY(1.4); }
48% { transform: scaleY(1.3667); }
76% { transform: scaleY(0.95); }
90% { transform: scaleY(1.0167); }
}
@keyframes carp-hook-sway {
0%, 100% { transform: rotate(0deg); }
22% { transform: rotate(0.8deg); }
45% { transform: rotate(-0.7deg); }
68% { transform: rotate(0.5deg); }
86% { transform: rotate(-0.2deg); }
}
.exercise-intro {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
margin-bottom: 1.4rem;
}
.exercise-intro__cell {
background: var(--pms-surface);
border: 1px solid var(--pms-line);
border-radius: var(--pms-radius);
padding: 1rem 1.2rem;
}
.exercise-intro__label {
margin: 0 0 0.3rem;
font-family: 'Inter', system-ui, sans-serif;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--pms-accent-deep);
}
.exercise-intro__cell p { margin: 0; }
.exercise-situation { background: var(--pms-accent-tint); border-color: transparent; }
.exercise-hint { font-size: 1rem; color: var(--pms-ink-soft); }
.sim {
position: relative;
border: 3px dashed #7FB2B5;
border: 3px dashed color-mix(in srgb, var(--pms-accent) 55%, transparent);
border-radius: calc(var(--pms-radius) + 4px);
padding: 2.2rem clamp(0.4rem, 2vw, 1rem) clamp(0.6rem, 2vw, 1rem);
background: #EBF3F2;
background: color-mix(in srgb, var(--pms-accent-tint) 45%, var(--pms-bg));
}
.sim__badge {
position: absolute;
top: 0.5rem;
inset-inline-start: 50%;
transform: translateX(-50%);
padding: 0.1rem 0.9rem;
border-radius: 999px;
background: var(--pms-accent);
color: #fff;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.progress-line {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
margin: 1.2rem 0 0.6rem;
font-weight: 600;
}
.progress-bar {
flex: 1 1 12rem;
height: 10px;
border-radius: 999px;
background: var(--pms-line);
overflow: hidden;
}
.progress-bar__fill {
height: 100%;
width: 0;
background: var(--pms-accent);
transition: width 400ms ease;
}
.decide {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.7rem 1rem;
margin-top: 1rem;
padding: 1rem 1.1rem;
background: var(--pms-surface);
border: 1px solid var(--pms-line);
border-radius: var(--pms-radius);
}
.decide__q { flex: 1 1 100%; margin: 0; font-weight: 600; }
.result {
margin-top: 1rem;
padding: 1.1rem 1.25rem;
border-radius: var(--pms-radius);
border: 2px solid var(--pms-line);
background: var(--pms-surface);
}
.result__head {
display: flex;
align-items: flex-start;
gap: 0.6rem;
margin: 0 0 0.6rem;
font-family: 'Inter', system-ui, sans-serif;
font-size: 1.2rem;
font-weight: 700;
}
.result__icon {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
color: #fff;
font-size: 1.05rem;
}
.result--right { border-color: var(--pms-ok); }
.result--right .result__icon { background: var(--pms-ok); }
.result--wrong { border-color: var(--pms-alert); }
.result--wrong .result__icon { background: var(--pms-alert); }
.result--second { border-color: var(--pms-accent); }
.result--second .result__icon { background: var(--pms-accent); }
.tap-note {
margin: 0.8rem 0 0;
padding: 0.7rem 0.9rem;
border-inline-start: 4px solid var(--pms-warn);
border-radius: 8px;
background: var(--pms-warn-tint);
color: var(--pms-ink);
font-size: 1rem;
}
.tap-note:empty { margin: 0; padding: 0; border: 0; }
.reminder { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.result__label {
margin: 0.9rem 0 0.3rem;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--pms-ink-soft);
}
.result ul { margin: 0; padding-inline-start: 1.3rem; }
.result li { margin-bottom: 0.35rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0 !important; margin: 0; }
.chip {
padding: 0.15rem 0.75rem;
border-radius: 999px;
background: var(--pms-alert-tint);
color: var(--pms-alert);
font-size: 0.95rem;
font-weight: 600;
}
.result__next { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }
html.js .nojs-only { display: none !important; }
html.js .nojs-only.is-fallback { display: block !important; }
html:not(.js) .js-only { display: none !important; }
.nojs-list { display: grid; gap: 1.2rem; }
.nojs-item {
background: var(--pms-surface);
border: 1px solid var(--pms-line);
border-radius: var(--pms-radius);
padding: 1rem 1.2rem;
}
.nojs-item details summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.mail {
display: grid;
gap: 0;
background: var(--pms-surface);
border: 1px solid var(--pms-line);
border-radius: 10px;
overflow: hidden;
box-shadow: var(--pms-shadow);
}
@media (min-width: 58rem) { .mail { grid-template-columns: 19rem 1fr; } }
@media (min-width: 58rem) { .mail--single { grid-template-columns: 1fr; } }
.mail__toolbar {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.6rem 1rem;
background: #2A3A40;
color: #E9F1F1;
font-size: 0.95rem;
}
.mail__toolbar-title { font-weight: 700; }
.mail__toolbar-account { opacity: 0.85; overflow-wrap: anywhere; }
.mail__list {
list-style: none;
margin: 0;
padding: 0;
border-inline-end: 1px solid var(--pms-line);
background: #FAFBFB;
max-height: 34rem;
overflow: auto;
}
@media (max-width: 57.99rem) { .mail__list { max-height: none; border-inline-end: 0; border-bottom: 1px solid var(--pms-line); } }
.mail__item {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.1rem 0.6rem;
width: 100%;
padding: 0.75rem 1rem 0.75rem 1.4rem;
border: 0;
border-bottom: 1px solid var(--pms-line);
background: transparent;
color: var(--pms-ink);
font: inherit;
font-size: 1rem;
text-align: start;
cursor: pointer;
position: relative;
}
.mail__item:hover { background: var(--pms-accent-tint); }
.mail__item[aria-current="true"] { background: var(--pms-accent-tint); box-shadow: inset 4px 0 0 var(--pms-accent); }
.mail__item-from { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__item-time { font-size: 0.85rem; color: var(--pms-ink-soft); }
.mail__item-subject { grid-column: 1 / -1; color: var(--pms-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__item-state { grid-column: 1 / -1; font-size: 0.85rem; font-weight: 700; }
.mail__item-state--right { color: var(--pms-ok); }
.mail__item-state--wrong { color: var(--pms-alert); }
.mail__item[data-unread="true"]::before {
content: "";
position: absolute;
inset-inline-start: 0.55rem;
top: 1.15rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--pms-accent);
}
.mail__view { padding: 1.1rem clamp(0.9rem, 3vw, 1.6rem) 1.4rem; min-width: 0; }
.mail__subject { font-family: 'Inter', system-ui, sans-serif; font-size: 1.3rem; margin: 0 0 0.8rem; }
.mail__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.8rem;
padding-bottom: 0.8rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--pms-line);
}
.mail__from-name { font-weight: 700; }
.mail__from-address { color: var(--pms-ink-soft); overflow-wrap: anywhere; }
.mail__reveal {
min-height: 44px;
padding: 0.3rem 0.8rem;
border: 1px solid var(--pms-accent);
border-radius: 999px;
background: var(--pms-surface);
color: var(--pms-accent-deep);
font: inherit;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
}
.mail__reveal:hover { background: var(--pms-accent-tint); }
.mail__body p { white-space: pre-line; }
.sim-link {
display: inline;
padding: 0;
border: 0;
background: none;
color: #1A57B8;
font: inherit;
text-decoration: underline;
text-underline-offset: 3px;
cursor: help;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.sim-link:hover, .sim-link:focus-visible { color: #0F3F8C; }
.sim-link--button {
display: inline-block;
margin-top: 0.3rem;
padding: 0.55rem 1.1rem;
border-radius: 6px;
background: #1A57B8;
color: #fff;
text-decoration: none;
}
.sim-link--button:hover, .sim-link--button:focus-visible { background: #0F3F8C; color: #fff; }
.target-bar {
margin-top: 1rem;
padding: 0.7rem 0.9rem;
border-radius: 8px;
background: #2A3A40;
color: #F1F6F6;
font-size: 1rem;
overflow-wrap: anywhere;
}
.target-bar__label { display: block; font-size: 0.85rem; opacity: 0.85; }
.target-bar__url { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.target-bar__core {
background: #FFE08A;
color: #1C272B;
padding: 0 0.2em;
border-radius: 3px;
font-weight: 700;
}
.target-bar__explain { display: block; margin-top: 0.3rem; font-size: 0.95rem; }
.mail__attachments { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.attachment {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
max-width: 100%;
padding: 0.6rem 0.9rem;
border: 1px solid var(--pms-line);
border-radius: 8px;
background: #FAFBFB;
font-size: 0.95rem;
}
.attachment__name { font-weight: 600; overflow-wrap: anywhere; }
.attachment__name::before { content: "📎 "; }
.attachment__detail { color: var(--pms-ink-soft); }
.mail__link-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
[data-spot].is-flagged { outline: 3px solid var(--pms-warn); outline-offset: 3px; border-radius: 4px; }
.duel { display: grid; gap: 1rem; }
.duel__question { font-size: 1.2rem; font-weight: 700; margin: 0; }
.duel__options { display: grid; gap: 0.7rem; list-style: none; padding: 0; margin: 0; }
.duel__option {
display: flex;
flex-direction: column;
gap: 0.3rem;
width: 100%;
padding: 0.8rem 1rem;
border: 2px solid var(--pms-control-line);
border-radius: 10px;
background: var(--pms-surface);
color: var(--pms-ink);
font: inherit;
text-align: start;
cursor: pointer;
}
.duel__option:hover { border-color: var(--pms-accent); }
.duel__option[aria-disabled="true"] { cursor: default; }
.duel__url {
font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
font-size: 1.02rem;
overflow-wrap: anywhere;
}
.duel__why { font-size: 1rem; color: var(--pms-ink-soft); }
.duel__verdict { font-weight: 700; }
.duel__option.is-right { border-color: var(--pms-ok); background: var(--pms-ok-tint); }
.duel__option.is-right .duel__verdict { color: var(--pms-ok); }
.duel__option.is-wrong { border-color: var(--pms-alert); background: var(--pms-alert-tint); }
.duel__option.is-wrong .duel__verdict { color: var(--pms-alert); }
.duel__lesson { background: var(--pms-accent-tint); border-radius: var(--pms-radius); padding: 0.9rem 1.1rem; }
.address-anatomy {
font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
font-size: 1.05rem;
overflow-wrap: anywhere;
padding: 0.8rem 1rem;
border-radius: 10px;
background: var(--pms-surface);
border: 1px solid var(--pms-line);
}
.address-anatomy mark { background: #FFE08A; color: var(--pms-ink); border-radius: 3px; padding: 0 0.15em; }
.phone {
max-width: 25rem;
margin-inline: auto;
border: 10px solid #22292C;
border-radius: 34px;
background: #EEF1F2;
overflow: hidden;
box-shadow: var(--pms-shadow);
}
.phone__top {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.8rem 1rem;
background: #FFFFFF;
border-bottom: 1px solid var(--pms-line);
}
.phone__avatar {
display: grid;
place-items: center;
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
background: #C9D3D6;
color: #33434A;
font-weight: 700;
}
.phone__contact { font-weight: 700; overflow-wrap: anywhere; }
.phone__app { font-size: 0.85rem; color: var(--pms-ink-soft); }
.phone__thread {
display: flex;
flex-direction: column;
gap: 0.55rem;
min-height: 16rem;
padding: 1rem 0.8rem;
}
.phone--messenger .phone__thread { background: #E7EEE6; }
.bubble {
max-width: 85%;
padding: 0.55rem 0.8rem;
border-radius: 16px;
font-size: 1.02rem;
line-height: 1.45;
box-shadow: 0 1px 1px rgb(0 0 0 / 6%);
}
.bubble--them { align-self: flex-start; background: #FFFFFF; border-bottom-left-radius: 4px; }
.bubble--me { align-self: flex-end; background: #D6ECDA; border-bottom-right-radius: 4px; }
.phone--sms .bubble--me { background: #CFE3F7; }
.bubble__time { display: block; margin-top: 0.15rem; font-size: 0.78rem; color: var(--pms-ink-soft); text-align: end; }
.phone .sim-link { color: #1A57B8; }
.screen {
position: relative;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--pms-line);
box-shadow: var(--pms-shadow);
background: #DDE3E5;
}
.screen__practice {
position: absolute;
inset-block-end: 0.5rem;
inset-inline-end: 0.5rem;
z-index: 1;
padding: 0.1rem 0.7rem;
border-radius: 999px;
background: var(--pms-accent);
color: #fff;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.screen__chrome {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.8rem;
background: #C9D1D4;
font-size: 0.9rem;
}
.screen__dots { display: inline-flex; gap: 0.3rem; }
.screen__dots i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #9AA7AC; display: block; }
.screen__address {
flex: 1;
min-width: 0;
padding: 0.15rem 0.6rem;
border-radius: 6px;
background: #F4F7F8;
font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
font-size: 0.9rem;
overflow-wrap: anywhere;
}
.screen__stage { padding: clamp(0.8rem, 3vw, 1.6rem); min-height: 18rem; display: grid; place-items: center; }
.alarm {
width: 100%;
max-width: 40rem;
padding: 1.3rem 1.4rem;
background: #1846A8;
color: #FFFFFF;
border: 4px solid #FFD400;
border-radius: 6px;
text-align: center;
animation: alarm-pulse 1.6s ease-in-out 3;
}
.alarm__title { font-family: 'Inter', system-ui, sans-serif; font-size: 1.35rem; font-weight: 800; margin: 0 0 0.7rem; }
.alarm p { margin-bottom: 0.5rem; }
.alarm__phone { display: inline-block; margin-top: 0.4rem; padding: 0.3rem 0.9rem; background: #FFD400; color: #111; font-weight: 800; font-size: 1.3rem; border-radius: 4px; }
.alarm__fake-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1rem; }
.alarm__fake-buttons span { padding: 0.4rem 1rem; border: 2px solid #fff; border-radius: 4px; font-weight: 700; }
@keyframes alarm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 212 0 / 0%); } 50% { box-shadow: 0 0 0 8px rgb(255 212 0 / 35%); } }
.cleaner {
width: 100%;
max-width: 24rem;
padding: 1.2rem;
background: #FFFFFF;
border-radius: 14px;
border: 2px solid #E24C2E;
text-align: center;
}
.cleaner__title { color: #B42318; font-family: 'Inter', system-ui, sans-serif; font-size: 1.25rem; font-weight: 800; margin: 0 0 0.6rem; }
.cleaner__bar { height: 12px; border-radius: 999px; background: #F3D1CB; overflow: hidden; margin: 0.5rem 0 0.8rem; }
.cleaner__bar span { display: block; height: 100%; width: 94%; background: #E24C2E; }
.cleaner__fake-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; }
.cleaner__fake-buttons span { padding: 0.5rem 1.2rem; border-radius: 999px; background: #1F9D55; color: #fff; font-weight: 800; }
.webpanel {
width: 100%;
max-width: 28rem;
padding: 1.2rem 1.3rem;
background: #FFFFFF;
border-radius: 10px;
border: 1px solid #B9C3C7;
box-shadow: 0 8px 26px rgb(0 0 0 / 14%);
}
.webpanel__title { font-family: 'Inter', system-ui, sans-serif; font-size: 1.15rem; font-weight: 700; margin: 0 0 0.6rem; }
.webpanel__lines { margin: 0; }
ol.webpanel__lines { padding-inline-start: 1.4rem; }
ol.webpanel__lines li { margin-bottom: 0.35rem; }
.webpanel__fake-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.webpanel__fake-buttons span { padding: 0.45rem 1.1rem; border-radius: 6px; background: #1A57B8; color: #fff; font-weight: 700; }
.webpanel--browser-update { border-top: 6px solid #E8A317; }
.sysdialog {
width: 100%;
max-width: 26rem;
padding: 1.2rem 1.3rem;
background: #FFFFFF;
border-radius: 10px;
border: 1px solid #B9C3C7;
box-shadow: 0 8px 26px rgb(0 0 0 / 18%);
}
.sysdialog__title { font-family: 'Inter', system-ui, sans-serif; font-size: 1.15rem; font-weight: 700; margin: 0 0 0.5rem; }
.sysdialog__source { font-size: 0.85rem; color: var(--pms-ink-soft); margin-bottom: 0.6rem; }
.popup-choices { display: grid; gap: 0.6rem; margin-top: 1rem; list-style: none; padding: 0; }
.popup-choice {
width: 100%;
min-height: 48px;
padding: 0.7rem 1rem;
border: 2px solid var(--pms-control-line);
border-radius: 10px;
background: var(--pms-surface);
color: var(--pms-ink);
font: inherit;
text-align: start;
cursor: pointer;
}
.popup-choice:hover { border-color: var(--pms-accent); }
.popup-choice[aria-disabled="true"] { cursor: default; }
.popup-choice.is-right { border-color: var(--pms-ok); background: var(--pms-ok-tint); }
.popup-choice.is-wrong { border-color: var(--pms-alert); background: var(--pms-alert-tint); }
.popup-choice__feedback { display: block; margin-top: 0.35rem; font-size: 1rem; }
.popup-question { margin-top: 1rem; }
.prompt {
position: relative;
padding: 1rem 1.1rem 3.2rem;
background: var(--pms-surface);
border: 1px solid var(--pms-line);
border-radius: var(--pms-radius);
font-size: 1.02rem;
white-space: pre-wrap;
}
.prompt__copy { position: absolute; inset-inline-end: 0.8rem; bottom: 0.7rem; }
.prompt + .prompt { margin-top: 0.9rem; }
.sim + p { margin-top: 1.25rem; }
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 0.8rem; }
.steps > li {
counter-increment: step;
position: relative;
padding: 0.9rem 1rem 0.9rem 3.4rem;
background: var(--pms-surface);
border: 1px solid var(--pms-line);
border-radius: var(--pms-radius);
}
.steps > li::before {
content: counter(step);
position: absolute;
inset-inline-start: 0.9rem;
top: 0.85rem;
display: grid;
place-items: center;
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
background: var(--pms-accent);
color: #fff;
font-weight: 700;
}
.hidden-ink { color: #FFFFFF; font-size: 0.6rem; }
.hidden-ink.is-revealed,
html:not(.js) .hidden-ink { color: var(--pms-alert); font-size: 0.95rem; background: var(--pms-alert-tint); }
.tool-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tool-table th, .tool-table td { text-align: start; vertical-align: top; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--pms-line); }
.tool-table th { font-size: 0.9rem; color: var(--pms-ink-soft); }
.table-wrap { overflow-x: auto; }
.checklist { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.checklist label {
display: flex;
gap: 0.8rem;
align-items: flex-start;
padding: 0.8rem 1rem;
background: var(--pms-surface);
border: 1px solid var(--pms-line);
border-radius: var(--pms-radius);
cursor: pointer;
}
.checklist input { width: 1.4rem; height: 1.4rem; margin-top: 0.2rem; flex: 0 0 auto; accent-color: var(--pms-accent); }
.phone-number { font-weight: 800; font-size: 1.25rem; white-space: nowrap; }
.checklist > li { min-width: 0; }
.checklist label > span { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 380px) {
.checklist label { padding: 0.7rem 0.75rem; gap: 0.6rem; }
.phone-number { font-size: 1.1rem; }
}
.source { font-size: 0.92rem; color: var(--pms-ink-soft); }
.nowrap { white-space: nowrap; }
.record {
max-width: 40rem;
margin: 1.5rem 0 0;
padding: 2rem clamp(1rem, 4vw, 2.5rem);
background: var(--pms-surface);
border: 2px solid var(--pms-accent);
border-radius: var(--pms-radius);
text-align: center;
}
.record__title { margin: 0.6rem 0 0.2rem; font-size: 1.25rem; font-weight: 800; }
.record__brand { margin: 0; color: var(--pms-ink-soft); }
.record__name { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.8rem; font-weight: 600; min-height: 2.2rem; }
.record__list { list-style: none; padding: 0; text-align: start; display: grid; gap: 0.35rem; }
.record__list li::before { content: "○ "; color: var(--pms-ink-soft); }
.record__list li.is-done::before { content: "✓ "; color: var(--pms-ok); font-weight: 700; }
.record__note { font-size: 0.95rem; color: var(--pms-ink-soft); }
.record__empty { font-style: italic; color: var(--pms-ink-soft); }
.refresh-case { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.3rem; max-width: 26rem; }
.field input {
min-height: 48px;
padding: 0.5rem 0.8rem;
border: 2px solid var(--pms-line);
border-radius: 10px;
font: inherit;
}
#blazor-error-ui {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 1000;
display: none;
padding: 0.8rem 1rem;
background: var(--pms-warn-tint);
border-top: 1px solid #DCC9A3;
border-top: 1px solid color-mix(in srgb, var(--pms-warn) 35%, transparent);
color: var(--pms-warn);
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
}
#blazor-error-ui[style*="display: block"] { display: block; }
#blazor-error-ui .reload { color: var(--pms-accent); margin-inline-start: 1rem; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }
html.course { font-size: 135%; }
html.course .container { max-width: 90rem; }
html.course .site-footer { display: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
body { background: #fff; font-size: 12pt; }
.site-header, .site-footer, .course-banner, .preview-banner, .no-print, .skip-link, #blazor-error-ui,
.back-to-top { display: none !important; }
.water { background: none !important; color: #000 !important; }
.water h1, .water p { color: #000 !important; }
.wave, .hero__art, .page-head__icon { display: none !important; }
.record { border: 2px solid #000; box-shadow: none; }
a { color: #000; }
.checklist a[href^="http"]::after { content: " (" attr(href) ")"; overflow-wrap: anywhere; }
}
.lang-switcher__link,
.lang-switcher__current { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.callout + .sim,
.callout + .nojs-only,
.callout + p { margin-top: 1.5rem; }
.callout + .callout,
.card + p { margin-top: 1rem; }