/* _content/InstituteOfHumanAnatomy.Shared/Components/Admin/AdminShell.razor.rz.scp.css */
/* IOHA admin theme. Declared once here; every admin component draws with these
   classes through ::deep, so the dashboard reads as one surface.

   Colours come from the shared design tokens (app.css :root) with the game's
   literal values as fallbacks, so the admin renders correctly whether or not
   the token sheet is loaded on the page. Supwell's olive and sage map to IOHA's
   red-bright and bone-dim; its light hairlines to the ink panel lines. */

.ioha-admin[b-ihczsmknv1] {
    --adm-bg: var(--ioha-ink, #0b0b0d);
    --adm-card: var(--ioha-surface-1, #141418);
    --adm-card-2: var(--ioha-surface-2, #1c1c22);
    --adm-line: var(--ioha-line, #22222a);
    --adm-line-strong: #34343a;
    --adm-text: var(--ioha-bone, #f2efec);
    --adm-text-dim: var(--ioha-bone-dim, #cfcac4);
    --adm-muted: var(--ioha-muted, #9b9590);
    --adm-accent: var(--ioha-red-bright, #ff6a5a);
    --adm-red: var(--ioha-red, #e0392b);
    /* Behind white text: the app's button red (5.1:1; white on --adm-red is 4.38:1). */
    --adm-red-fill: var(--ioha-red-strong, #cf3123);
    --adm-good: var(--ioha-success, #4ade80);
    --adm-warn: var(--ioha-warning, #f5b544);
    --adm-gold: var(--ioha-gold, #e8c46a);
    --adm-focus: var(--ioha-focus, #ff6a5a);
    --adm-display: var(--font-display, 'Archivo', system-ui, sans-serif);
    --adm-body: var(--font-body, 'Manrope', system-ui, sans-serif);
    --adm-radius: var(--r-lg, 16px);
    --adm-ease: var(--ease-out, cubic-bezier(.05, .7, .1, 1));

    display: flow-root; /* children's margins stay inside the ink */
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px calc(40px + env(safe-area-inset-bottom, 0px));
    color: var(--adm-text);
    font-family: var(--adm-body);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* ---- Header ------------------------------------------------------------------ */

.ioha-admin[b-ihczsmknv1]  .adm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding-top: env(safe-area-inset-top, 0px);
}

.ioha-admin[b-ihczsmknv1]  .adm-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-height: 44px;
    align-items: center;
    color: var(--adm-text);
    text-decoration: none;
}

.ioha-admin[b-ihczsmknv1]  .adm-brand-mark {
    font-family: var(--adm-display);
    font-weight: 900;
    font-size: 22px;
    letter-spacing: -0.01em;
}

.ioha-admin[b-ihczsmknv1]  .adm-brand-sub {
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--adm-accent);
}

.ioha-admin[b-ihczsmknv1]  .adm-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    color: var(--adm-muted);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

.ioha-admin[b-ihczsmknv1]  .adm-back:hover { color: var(--adm-text); }

.ioha-admin[b-ihczsmknv1]  .adm-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 14px;
}

.ioha-admin[b-ihczsmknv1]  .adm-title {
    margin: 0;
    font-family: var(--adm-display);
    font-weight: 900;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.ioha-admin[b-ihczsmknv1]  .adm-sub {
    margin: 6px 0 0;
    color: var(--adm-muted);
    font-size: 12px;
    font-weight: 600;
}

/* ---- Tabs: a segmented control, full width on a phone ------------------------- */

.ioha-admin[b-ihczsmknv1]  .adm-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--adm-line);
    border-radius: var(--r-pill, 999px);
    background: var(--adm-card);
}

.ioha-admin[b-ihczsmknv1]  .adm-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: var(--r-pill, 999px);
    color: var(--adm-text-dim);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background-color var(--dur-2, 200ms) var(--adm-ease), color var(--dur-2, 200ms) var(--adm-ease);
}

.ioha-admin[b-ihczsmknv1]  .adm-tab:hover { color: var(--adm-text); }

.ioha-admin[b-ihczsmknv1]  .adm-tab.is-current {
    background: var(--adm-red-fill);
    color: #fff;
}

@media (min-width: 720px) {
    .ioha-admin[b-ihczsmknv1]  .adm-tabs { display: inline-grid; min-width: 360px; }
}

.ioha-admin[b-ihczsmknv1]  .adm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 12px;
}

.ioha-admin[b-ihczsmknv1]  .adm-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

/* ---- Chips: range, environment, filters --------------------------------------- */

.ioha-admin[b-ihczsmknv1]  .adm-chips {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border-radius: var(--r-pill, 999px);
    background: var(--adm-card);
    border: 1px solid var(--adm-line);
}

.ioha-admin[b-ihczsmknv1]  .adm-chip {
    min-height: 36px;
    min-width: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--r-pill, 999px);
    background: transparent;
    color: var(--adm-text-dim);
    font: 700 13px/1 var(--adm-body);
    cursor: pointer;
}

.ioha-admin[b-ihczsmknv1]  .adm-chip[aria-pressed="true"] {
    background: var(--adm-card-2);
    color: var(--adm-text);
    box-shadow: inset 0 0 0 1px var(--adm-line-strong);
}

.ioha-admin[b-ihczsmknv1]  .adm-link {
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--adm-accent);
    font: 700 13px/1 var(--adm-body);
    cursor: pointer;
}

.ioha-admin[b-ihczsmknv1]  .adm-link:disabled { opacity: .5; cursor: default; }

.ioha-admin[b-ihczsmknv1]  .adm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--r-md, 12px);
    background: var(--adm-red-fill);
    color: #fff;
    font: 800 14px/1 var(--adm-body);
    text-decoration: none;
    cursor: pointer;
}

.ioha-admin[b-ihczsmknv1]  .adm-btn.is-quiet {
    background: var(--adm-card-2);
    color: var(--adm-text);
    box-shadow: inset 0 0 0 1px var(--adm-line-strong);
}

.ioha-admin[b-ihczsmknv1]  :is(a, button, input, select):focus-visible {
    outline: 2px solid var(--adm-focus);
    outline-offset: 2px;
}

/* ---- Cards and type ----------------------------------------------------------- */

.ioha-admin[b-ihczsmknv1]  .adm-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--adm-line);
    border-radius: var(--adm-radius);
    background: var(--adm-card);
}

.ioha-admin[b-ihczsmknv1]  .adm-card.is-flush { padding: 0; overflow: hidden; }

.ioha-admin[b-ihczsmknv1]  .adm-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
}

.ioha-admin[b-ihczsmknv1]  .adm-label {
    margin: 0;
    color: var(--adm-muted);
    font-weight: 700;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ioha-admin[b-ihczsmknv1]  .adm-label.is-small { font-size: 10px; letter-spacing: .12em; }

.ioha-admin[b-ihczsmknv1]  .adm-value {
    margin: 0;
    font-family: var(--adm-display);
    font-weight: 800;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.ioha-admin[b-ihczsmknv1]  .adm-value.is-small { font-size: 17px; line-height: 20px; }

.ioha-admin[b-ihczsmknv1]  .adm-unit {
    color: var(--adm-muted);
    font-weight: 700;
    font-size: 11px;
}

.ioha-admin[b-ihczsmknv1]  .adm-note {
    margin: 6px 0 0;
    color: var(--adm-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.ioha-admin[b-ihczsmknv1]  .adm-foot {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--adm-line);
    color: var(--adm-text-dim);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

.ioha-admin[b-ihczsmknv1]  .adm-foot.is-muted { color: var(--adm-muted); font-size: 12px; }

.ioha-admin[b-ihczsmknv1]  .adm-empty {
    margin: 12px 0 2px;
    color: var(--adm-muted);
    font-size: 13px;
    font-weight: 600;
}

/* ---- Layout grids ------------------------------------------------------------- */

.ioha-admin[b-ihczsmknv1]  .adm-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ioha-admin[b-ihczsmknv1]  .adm-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

@media (min-width: 720px) {
    .ioha-admin[b-ihczsmknv1] { padding-left: 24px; padding-right: 24px; }
    .ioha-admin[b-ihczsmknv1]  .adm-title { font-size: 34px; }
    .ioha-admin[b-ihczsmknv1]  .adm-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .ioha-admin[b-ihczsmknv1]  .adm-kpis.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}

@media (min-width: 1080px) {
    .ioha-admin[b-ihczsmknv1]  .adm-kpis:not(.is-three) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .ioha-admin[b-ihczsmknv1]  .adm-pair.is-wide-left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* ---- KPI tile ----------------------------------------------------------------- */

.ioha-admin[b-ihczsmknv1]  .adm-kpi { display: flex; flex-direction: column; }

.ioha-admin[b-ihczsmknv1]  .adm-kpi-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 5px;
    margin: 10px 0 0;
}

.ioha-admin[b-ihczsmknv1]  .adm-kpi-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: auto;
    padding-top: 10px;
}

.ioha-admin[b-ihczsmknv1]  .adm-kpi-split > div {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--adm-line);
}

.ioha-admin[b-ihczsmknv1]  .adm-kpi-split > div + div { padding-left: 10px; border-left: 1px solid var(--adm-line); }

.ioha-admin[b-ihczsmknv1]  .adm-kpi-split .adm-value { margin-top: 4px; }

/* ---- Attention strip ----------------------------------------------------------- */

.ioha-admin[b-ihczsmknv1]  .adm-attn {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ioha-admin[b-ihczsmknv1]  .adm-attn-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--adm-line);
    border-radius: var(--r-pill, 999px);
    background: var(--adm-card);
    color: var(--adm-text-dim);
    font-size: 12px;
    font-weight: 700;
}

.ioha-admin[b-ihczsmknv1]  .adm-dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--adm-muted);
}

.ioha-admin[b-ihczsmknv1]  .adm-dot.is-good { background: var(--adm-good); }
.ioha-admin[b-ihczsmknv1]  .adm-dot.is-warn { background: var(--adm-warn); }
.ioha-admin[b-ihczsmknv1]  .adm-dot.is-bad { background: var(--adm-red); box-shadow: 0 0 0 3px rgba(224, 57, 43, .25); }

/* ---- Charts -------------------------------------------------------------------- */

.ioha-admin[b-ihczsmknv1]  .adm-legend {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ioha-admin[b-ihczsmknv1]  .adm-legend li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--adm-muted);
    font-size: 12px;
    font-weight: 600;
}

.ioha-admin[b-ihczsmknv1]  .adm-swatch { width: 16px; height: 3px; border-radius: 2px; background: var(--adm-accent); }
.ioha-admin[b-ihczsmknv1]  .adm-swatch.is-b { background: var(--adm-text-dim); opacity: .7; }

.ioha-admin[b-ihczsmknv1]  .adm-svg { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }

/* Strokes stay the same width at any chart size, like the HTML labels. */
.ioha-admin[b-ihczsmknv1]  .adm-svg :is(line, polyline, circle) { vector-effect: non-scaling-stroke; }
.ioha-admin[b-ihczsmknv1]  .adm-svg .grid { stroke: var(--adm-line); stroke-width: 1; }
.ioha-admin[b-ihczsmknv1]  .adm-svg .base { stroke: var(--adm-line-strong); stroke-width: 1; }

/* Chart labels are HTML laid over the SVG, positioned in percent of the drawing,
   so they keep one readable size from phone to desktop. */
.ioha-admin[b-ihczsmknv1]  .adm-plot { position: relative; margin-top: 18px; }
.ioha-admin[b-ihczsmknv1]  .adm-plot .adm-svg { margin-top: 0; }

/* Bar charts keep one height at any width (the drawing stretches sideways), so
   a seven-bar histogram is not half a screen tall on a desktop. */
.ioha-admin[b-ihczsmknv1]  .adm-plot .adm-svg.is-fixed { height: 176px; }

.ioha-admin[b-ihczsmknv1]  .adm-tag {
    position: absolute;
    transform: translate(-50%, -50%);
    color: var(--adm-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.ioha-admin[b-ihczsmknv1]  .adm-tag.is-axis { transform: translate(0, calc(-100% - 4px)); }
.ioha-admin[b-ihczsmknv1]  .adm-tag.is-tick { transform: translate(-50%, 0); }
.ioha-admin[b-ihczsmknv1]  .adm-tag.is-tick.is-first { transform: translate(0, 0); }
.ioha-admin[b-ihczsmknv1]  .adm-tag.is-tick.is-last { transform: translate(-100%, 0); }
.ioha-admin[b-ihczsmknv1]  .adm-tag.is-start { transform: translate(0, -50%); }
.ioha-admin[b-ihczsmknv1]  .adm-tag.is-above { transform: translate(-50%, calc(-100% - 6px)); }
.ioha-admin[b-ihczsmknv1]  .adm-tag.is-val { color: var(--adm-text); font-size: 12px; letter-spacing: 0; }
.ioha-admin[b-ihczsmknv1]  .adm-svg .line-a { fill: none; stroke: var(--adm-accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.ioha-admin[b-ihczsmknv1]  .adm-svg .line-b { fill: none; stroke: var(--adm-text-dim); stroke-opacity: .7; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 4; }
.ioha-admin[b-ihczsmknv1]  .adm-svg .fade-top { stop-color: var(--adm-accent); stop-opacity: .28; }
.ioha-admin[b-ihczsmknv1]  .adm-svg .fade-bottom { stop-color: var(--adm-accent); stop-opacity: 0; }
.ioha-admin[b-ihczsmknv1]  .adm-svg .dot-a { fill: var(--adm-accent); stroke: var(--adm-card); stroke-width: 2; }
.ioha-admin[b-ihczsmknv1]  .adm-svg .dot-b { fill: var(--adm-text-dim); stroke: var(--adm-card); stroke-width: 2; }
.ioha-admin[b-ihczsmknv1]  .adm-svg .bar { fill: var(--adm-accent); opacity: .55; }
.ioha-admin[b-ihczsmknv1]  .adm-svg .bar.is-last { opacity: 1; }

.ioha-admin[b-ihczsmknv1]  .adm-chart-foot { display: flex; justify-content: flex-end; margin-top: 4px; }

/* ---- Share bars ---------------------------------------------------------------- */

.ioha-admin[b-ihczsmknv1]  .adm-shares { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }

.ioha-admin[b-ihczsmknv1]  .adm-share-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.ioha-admin[b-ihczsmknv1]  .adm-share-label { color: var(--adm-text); font-size: 14px; font-weight: 600; }
.ioha-admin[b-ihczsmknv1]  .adm-share-detail { margin-left: 4px; color: var(--adm-muted); font-size: 12px; font-weight: 600; }

.ioha-admin[b-ihczsmknv1]  .adm-track {
    height: 8px;
    margin-top: 6px;
    border-radius: 4px;
    background: var(--adm-card-2);
    overflow: hidden;
}

.ioha-admin[b-ihczsmknv1]  .adm-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--adm-accent);
    transform-origin: left center;
    animation: adm-grow-b-ihczsmknv1 var(--dur-4, 500ms) var(--adm-ease) both;
}

.ioha-admin[b-ihczsmknv1]  .adm-fill.is-good { background: var(--adm-good); }
.ioha-admin[b-ihczsmknv1]  .adm-fill.is-gold { background: var(--adm-gold); }
.ioha-admin[b-ihczsmknv1]  .adm-fill.is-dim { background: var(--adm-text-dim); opacity: .6; }

/* ---- Rows (the Players list) ------------------------------------------------------ */

.ioha-admin[b-ihczsmknv1]  .adm-rows > * + * { border-top: 1px solid var(--adm-line); }

.ioha-admin[b-ihczsmknv1]  .adm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 10px 14px;
}

.ioha-admin[b-ihczsmknv1]  .adm-row-title { margin: 0; font-size: 14px; font-weight: 700; }
.ioha-admin[b-ihczsmknv1]  .adm-row-sub { margin: 2px 0 0; color: var(--adm-muted); font-size: 12px; font-weight: 600; }
.ioha-admin[b-ihczsmknv1]  .adm-row-end { flex: none; text-align: right; }

/* ---- Tables --------------------------------------------------------------------- */

.ioha-admin[b-ihczsmknv1]  .adm-table-wrap {
    margin-top: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ioha-admin[b-ihczsmknv1]  .adm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.ioha-admin[b-ihczsmknv1]  .adm-table th {
    padding: 6px 10px 6px 0;
    border-bottom: 1px solid var(--adm-line-strong);
    color: var(--adm-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.ioha-admin[b-ihczsmknv1]  .adm-table td {
    padding: 9px 10px 9px 0;
    border-bottom: 1px solid var(--adm-line);
    color: var(--adm-text);
    vertical-align: top;
}

.ioha-admin[b-ihczsmknv1]  .adm-table tr:last-child td { border-bottom: 0; }
.ioha-admin[b-ihczsmknv1]  .adm-table .num { text-align: right; white-space: nowrap; }
.ioha-admin[b-ihczsmknv1]  .adm-table .dim { color: var(--adm-muted); }
.ioha-admin[b-ihczsmknv1]  .adm-table .strong { font-weight: 800; }

.ioha-admin[b-ihczsmknv1]  .adm-heat { display: inline-block; min-width: 46px; padding: 3px 6px; border-radius: 6px; text-align: right; font-weight: 800; }

/* ---- Badges ---------------------------------------------------------------------- */

.ioha-admin[b-ihczsmknv1]  .adm-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }

.ioha-admin[b-ihczsmknv1]  .adm-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: var(--r-pill, 999px);
    background: var(--adm-card-2);
    color: var(--adm-text-dim);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ioha-admin[b-ihczsmknv1]  .adm-badge.is-premium { background: rgba(232, 196, 106, .14); color: var(--adm-gold); }
.ioha-admin[b-ihczsmknv1]  .adm-badge.is-sandbox { background: rgba(245, 181, 68, .12); color: var(--adm-warn); }
.ioha-admin[b-ihczsmknv1]  .adm-badge.is-admin { background: rgba(255, 106, 90, .14); color: var(--adm-accent); }
.ioha-admin[b-ihczsmknv1]  .adm-badge.is-off { background: transparent; box-shadow: inset 0 0 0 1px var(--adm-line-strong); color: var(--adm-muted); }

/* ---- Inputs ----------------------------------------------------------------------- */

.ioha-admin[b-ihczsmknv1]  .adm-search {
    flex: 1 1 220px;
    min-width: 0;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--adm-line-strong);
    border-radius: var(--r-md, 12px);
    background: var(--adm-card);
    color: var(--adm-text);
    font: 600 16px/1 var(--adm-body); /* 16px: iOS zooms into smaller inputs */
}

.ioha-admin[b-ihczsmknv1]  .adm-search::placeholder { color: var(--adm-muted); }

/* ---- Connect / error / state cards -------------------------------------------------- */

.ioha-admin[b-ihczsmknv1]  .adm-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 18px;
}

.ioha-admin[b-ihczsmknv1]  .adm-state h2 {
    margin: 0;
    font-family: var(--adm-display);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -0.01em;
}

.ioha-admin[b-ihczsmknv1]  .adm-state p { margin: 0; color: var(--adm-text-dim); font-size: 14px; line-height: 20px; }

.ioha-admin[b-ihczsmknv1]  .adm-steps { margin: 4px 0 0; padding-left: 20px; list-style: decimal; color: var(--adm-text-dim); font-size: 13px; line-height: 20px; }
.ioha-admin[b-ihczsmknv1]  .adm-steps code { color: var(--adm-text); font-size: 12px; background: var(--adm-card-2); padding: 1px 5px; border-radius: 5px; }

.ioha-admin[b-ihczsmknv1]  .adm-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid var(--adm-card-2);
    border-top-color: var(--adm-accent);
    border-radius: 50%;
    animation: adm-spin-b-ihczsmknv1 .8s linear infinite;
}

/* ---- Loading and entrance motion ------------------------------------------------------ */

.ioha-admin[b-ihczsmknv1]  .adm-skel {
    border-radius: var(--adm-radius);
    background: linear-gradient(90deg, var(--adm-card) 25%, var(--adm-card-2) 37%, var(--adm-card) 63%);
    background-size: 400% 100%;
    animation: adm-shimmer-b-ihczsmknv1 1.4s ease infinite;
}

.ioha-admin[b-ihczsmknv1]  .adm-rise {
    animation: adm-rise-b-ihczsmknv1 var(--dur-3, 320ms) var(--adm-ease) both;
    animation-delay: calc(var(--i, 0) * 35ms);
}

@keyframes adm-shimmer-b-ihczsmknv1 { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
@keyframes adm-rise-b-ihczsmknv1 { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes adm-grow-b-ihczsmknv1 { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes adm-spin-b-ihczsmknv1 { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ioha-admin[b-ihczsmknv1]  .adm-skel,
    .ioha-admin[b-ihczsmknv1]  .adm-rise,
    .ioha-admin[b-ihczsmknv1]  .adm-fill { animation: none; }
    .ioha-admin[b-ihczsmknv1]  .adm-spinner { animation-duration: 2.4s; }
    .ioha-admin[b-ihczsmknv1]  .adm-tab { transition: none; }
}
/* _content/InstituteOfHumanAnatomy.Shared/Components/AnatomyViewer.razor.rz.scp.css */
/*
   The 3D stage and the states around it. Brand tokens come from the page
   (or app.css) with fallbacks, so the stage looks right wherever it is mounted.
*/

.av-root[b-pa3oepzcqx] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--av-bg, #151318);
    border-radius: inherit;
    /* The loading veil and failure card stack above the canvas, not above the
       page around the stage: without this their z-index competed in the host
       page's stacking context and covered Daily's verdict badge. */
    isolation: isolate;
    /* Drags belong to the model, not to the page. */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.av-canvas[b-pa3oepzcqx] {
    position: absolute;
    inset: 0;
}

/* The canvas and the overlays below are created by ioha-viewer.js, so they
   carry no scope attribute and need ::deep. */
.av-canvas[b-pa3oepzcqx]  canvas.av-gl {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* ---- Loading ------------------------------------------------------------ */

.av-loading[b-pa3oepzcqx] {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background:
        radial-gradient(60% 46% at 50% 44%, rgba(224, 57, 43, .10), transparent 72%),
        var(--av-bg, #151318);
    transition: opacity var(--dur-3, 320ms) var(--ease-out, cubic-bezier(.05, .7, .1, 1)),
                visibility 0s linear var(--dur-3, 320ms);
}

/* The script marks the stage ready the moment the structure starts to fade
   in, a beat before .NET removes this overlay, so the hand-off is a fade. */
.av-root[data-av-state="ready"] .av-loading[b-pa3oepzcqx] {
    opacity: 0;
    visibility: hidden;
}

/* A specimen ring: a quiet track with a red arc travelling round it. */
.av-mark[b-pa3oepzcqx] {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .07);
}

.av-mark span[b-pa3oepzcqx] {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--ioha-red, #e0392b);
    border-right-color: rgba(224, 57, 43, .35);
    animation: av-turn-b-pa3oepzcqx 1.1s linear infinite;
}

.av-bar[b-pa3oepzcqx] {
    width: min(176px, 56%);
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.av-bar i[b-pa3oepzcqx] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ioha-red, #e0392b), var(--ioha-red-bright, #ff6a5a));
    transform-origin: left center;
    transform: scaleX(.02);
    transition: transform 240ms var(--ease-out, cubic-bezier(.05, .7, .1, 1));
}

/* While decoding (or with no size to measure against) the bar cannot say how
   far along it is, so it says "working" instead: a sheen sweeping across. */
.av-root[data-av-progress="indeterminate"] .av-bar i[b-pa3oepzcqx] {
    background:
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%) 0 0 / 40% 100% no-repeat,
        linear-gradient(90deg, var(--ioha-red, #e0392b), var(--ioha-red-bright, #ff6a5a));
    animation: av-sheen-b-pa3oepzcqx 1.2s var(--ease-out, cubic-bezier(.05, .7, .1, 1)) infinite;
}

.av-caption[b-pa3oepzcqx] {
    margin: 0;
    min-height: 1.4em;
    color: var(--ioha-bone-dim, #cfcac4);
    font: 800 10px/1.4 var(--font-body, Manrope, system-ui, sans-serif);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

/* Shown until the script takes over the caption (or if it never loads). */
.av-caption:empty[b-pa3oepzcqx]::before {
    content: "Loading 3D anatomy";
}

.av-sr[b-pa3oepzcqx] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@keyframes av-turn-b-pa3oepzcqx {
    to { transform: rotate(360deg); }
}

@keyframes av-sheen-b-pa3oepzcqx {
    from { background-position: -60% 0, 0 0; }
    to { background-position: 160% 0, 0 0; }
}

/* ---- Failure ------------------------------------------------------------ */

.av-failed[b-pa3oepzcqx] {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    background: var(--av-bg, #151318);
}

.av-failed-icon[b-pa3oepzcqx] {
    width: 28px;
    height: 28px;
    color: var(--ioha-red-bright, #ff6a5a);
    margin-bottom: 4px;
}

.av-failed-title[b-pa3oepzcqx] {
    margin: 0;
    color: var(--ioha-bone, #f2efec);
    font: 800 16px/1.25 var(--font-display, Archivo, system-ui, sans-serif);
}

.av-failed-body[b-pa3oepzcqx] {
    margin: 0;
    max-width: 30ch;
    color: var(--ioha-bone-dim, #cfcac4);
    font: 500 13px/1.45 var(--font-body, Manrope, system-ui, sans-serif);
}

.av-retry[b-pa3oepzcqx] {
    margin-top: 10px;
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--ioha-red, #e0392b);
    color: #fff;
    font: 800 14px var(--font-body, Manrope, system-ui, sans-serif);
    cursor: pointer;
    transition: transform var(--dur-1, 120ms) var(--ease-out, cubic-bezier(.05, .7, .1, 1)),
                background var(--dur-2, 200ms);
}

.av-retry:hover[b-pa3oepzcqx] { background: var(--ioha-red-bright, #ff6a5a); }
.av-retry:active[b-pa3oepzcqx] { transform: scale(.97); }
.av-retry:focus-visible[b-pa3oepzcqx] {
    outline: 2px solid var(--ioha-focus, #ff6a5a);
    outline-offset: 3px;
}

/* ---- Script-made overlays ----------------------------------------------- */

/* First-open gesture hint. Sits above the view bar in inspect mode. */
.av-canvas[b-pa3oepzcqx]  .av-hint {
    position: absolute;
    left: 50%;
    bottom: 64px;
    z-index: 15;
    transform: translate(-50%, 6px);
    padding: 8px 14px;
    border-radius: 999px;
    white-space: nowrap;
    background: rgb(21 19 24 / .78);
    border: 1px solid rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--ioha-bone, #f2efec);
    font: 800 10px var(--font-body, Manrope, system-ui, sans-serif);
    letter-spacing: .12em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transition: opacity 400ms ease, transform 400ms var(--ease-out, cubic-bezier(.05, .7, .1, 1));
}

.av-canvas[b-pa3oepzcqx]  .av-hint.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Out of the way while the ghosted body is showing; it covered the legs. */
.av-canvas[b-pa3oepzcqx]  .av-hint.is-hidden {
    opacity: 0;
}

/* GL context lost (iOS under memory pressure): a calm note while it returns. */
.av-canvas[b-pa3oepzcqx]  .av-note {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    background: var(--av-bg, #151318);
    color: var(--ioha-bone-dim, #cfcac4);
    font: 800 10px var(--font-body, Manrope, system-ui, sans-serif);
    letter-spacing: .14em;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    .av-mark span[b-pa3oepzcqx] {
        animation: none;
        border-color: rgba(224, 57, 43, .55);
    }

    .av-root[data-av-progress="indeterminate"] .av-bar i[b-pa3oepzcqx] {
        animation: none;
    }

    .av-loading[b-pa3oepzcqx],
    .av-bar i[b-pa3oepzcqx],
    .av-canvas[b-pa3oepzcqx]  .av-hint {
        transition: none;
    }
}
/* _content/InstituteOfHumanAnatomy.Shared/Components/DocPage.razor.rz.scp.css */
/* Long-form pages (About, Privacy) in the game's type and palette: Archivo headings,
   Manrope body at a reading size, bone on ink. Store reviewers read the privacy policy on
   a desktop browser, so the measure is capped for that too. The page's own content
   arrives as ChildContent, which carries the page's scope rather than this file's, hence
   ::deep for everything inside .doc-body. */

.doc-page[b-hf3s9d7c6g] {
    padding: var(--s-4) var(--s-4) var(--s-8);
    color: var(--ioha-bone);
}

.doc[b-hf3s9d7c6g] {
    max-width: 42rem;
    margin: 0 auto;
}

.doc-back[b-hf3s9d7c6g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--ioha-tap);
    margin: 0 0 var(--s-4) -6px;
    padding: 0 var(--s-3) 0 6px;
    border-radius: var(--r-pill);
    color: var(--ioha-bone-dim);
    font: 700 var(--fs-sm)/1 var(--font-body);
    text-decoration: none;
}

.doc-back svg[b-hf3s9d7c6g] { width: 20px; height: 20px; }

.doc-title[b-hf3s9d7c6g] {
    margin: var(--s-2) 0 0;
    font-size: clamp(30px, 8.5vw, 42px);
    text-wrap: balance;
}

.doc-meta[b-hf3s9d7c6g] {
    margin: var(--s-2) 0 0;
    color: var(--ioha-muted);
    font-size: var(--fs-sm);
}

.doc-body[b-hf3s9d7c6g] {
    margin-top: var(--s-5);
    font-size: var(--fs-md);
    line-height: 1.65;
    color: var(--ioha-bone-dim);
}

.doc-body[b-hf3s9d7c6g]  h2 {
    margin: var(--s-7) 0 var(--s-3);
    color: var(--ioha-bone);
    font: 800 var(--fs-xl)/1.2 var(--font-display);
    letter-spacing: -.01em;
}

.doc-body[b-hf3s9d7c6g]  p { margin: 0 0 var(--s-4); }

.doc-body[b-hf3s9d7c6g]  .doc-lead {
    color: var(--ioha-bone);
    font-size: var(--fs-lg);
    line-height: 1.55;
}

.doc-body[b-hf3s9d7c6g]  ul {
    display: grid;
    gap: var(--s-3);
    margin: 0 0 var(--s-4);
    padding: 0;
    list-style: none;
}

.doc-body[b-hf3s9d7c6g]  li {
    position: relative;
    padding-left: 20px;
}

.doc-body[b-hf3s9d7c6g]  li::before {
    content: "";
    position: absolute;
    top: .7em;
    left: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ioha-red);
}

.doc-body[b-hf3s9d7c6g]  strong { color: var(--ioha-bone); }

.doc-body[b-hf3s9d7c6g]  a {
    color: var(--ioha-bone);
    text-decoration: underline;
    text-decoration-color: rgb(224 57 43 / .7);
    text-underline-offset: 3px;
}

.doc-body[b-hf3s9d7c6g]  .doc-licence {
    display: block;
    margin-top: 2px;
    color: var(--ioha-muted);
    font-size: var(--fs-sm);
}

.doc-body[b-hf3s9d7c6g]  .doc-links {
    overflow: hidden;
    margin: var(--s-7) 0 var(--s-4);
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-lg);
    background: var(--ioha-surface-1);
}

.doc-body[b-hf3s9d7c6g]  .doc-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 var(--s-4);
    color: var(--ioha-bone);
    font-weight: 700;
    text-decoration: none;
}

.doc-body[b-hf3s9d7c6g]  .doc-link + .doc-link { border-top: 1px solid var(--ioha-line); }
.doc-body[b-hf3s9d7c6g]  .doc-link span:last-child { color: var(--ioha-muted); }

.doc-body[b-hf3s9d7c6g]  .doc-foot {
    color: var(--ioha-subtle);
    font-size: var(--fs-sm);
    text-align: center;
}

@media (hover: hover) and (pointer: fine) {
    .doc-back:hover[b-hf3s9d7c6g] { color: var(--ioha-bone); background: var(--ioha-surface-1); }
    .doc-body[b-hf3s9d7c6g]  .doc-link:hover { background: var(--ioha-surface-2); }
}
/* _content/InstituteOfHumanAnatomy.Shared/Components/Game/CoachMark.razor.rz.scp.css */
/* A bone-white bubble: the one light surface on a dark screen, so it reads as
   "from the game to you" rather than more of the game. */
.cm[b-t0dxscgcdv] {
    position: absolute;
    z-index: 40;
    width: min(270px, calc(100% - 24px));
    padding: 14px 14px 10px 16px;
    border-radius: var(--r-lg);
    background: var(--ioha-bone);
    color: #1b1718;
    box-shadow: var(--shadow-3), 0 0 0 1px rgb(255 255 255 / .6);
    animation: ioha-rise 420ms var(--ease-out) backwards;
}

.cm-pointer[b-t0dxscgcdv] {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--ioha-bone);
    border-radius: 3px;
    transform: rotate(45deg);
}

.cm-arrow-up .cm-pointer[b-t0dxscgcdv] { top: -6px; left: calc(50% - 8px); }
.cm-arrow-up-right .cm-pointer[b-t0dxscgcdv] { top: -6px; right: 58px; }
.cm-arrow-down .cm-pointer[b-t0dxscgcdv] { bottom: -6px; left: calc(50% - 8px); }

.cm-step[b-t0dxscgcdv] {
    margin: 0;
    color: #8f2a20;
    font: 800 var(--fs-xs)/1 var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.cm-title[b-t0dxscgcdv] {
    margin: 6px 0 0;
    font: 900 var(--fs-lg)/1.2 var(--font-display);
    letter-spacing: -.01em;
}

.cm-body[b-t0dxscgcdv] {
    margin: 4px 0 0;
    color: #4a4243;
    font: 600 var(--fs-sm)/1.4 var(--font-body);
}

.cm-actions[b-t0dxscgcdv] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.cm-skip[b-t0dxscgcdv],
.cm-next[b-t0dxscgcdv] {
    min-height: var(--ioha-tap);
    padding: 0 14px;
    border: 0;
    border-radius: var(--r-pill);
    font: 800 var(--fs-sm)/1 var(--font-body);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform var(--dur-1) var(--ease-out);
}

.cm-skip[b-t0dxscgcdv] {
    margin-right: auto;
    margin-left: -10px;
    background: transparent;
    color: #6a6162;
}

.cm-next[b-t0dxscgcdv] {
    background: var(--ioha-red-strong);
    color: #fff;
    box-shadow: 0 3px 0 var(--ioha-red-press);
}

.cm-skip:active[b-t0dxscgcdv],
.cm-next:active[b-t0dxscgcdv] { transform: scale(.95); }

/* Short screens (iPhone SE and the like): the page keeps every bubble off the
   answers, and with a stage this short that leaves little room above them, so the
   bubble gives up some air rather than reach down over an option. */
@media (max-height: 700px) {
    .cm[b-t0dxscgcdv] { padding: 10px 12px 4px 14px; }
    .cm-step[b-t0dxscgcdv] { font-size: 10px; }
    .cm-title[b-t0dxscgcdv] { margin-top: 4px; font-size: var(--fs-md); }
    .cm-body[b-t0dxscgcdv] { font-size: 13px; line-height: 1.35; }
    .cm-actions[b-t0dxscgcdv] { margin-top: 2px; }
}
/* _content/InstituteOfHumanAnatomy.Shared/Components/Game/Countdown.razor.rz.scp.css */
.cd[b-wwsyre7xnc] {
    display: inline-flex;
}

.cd-time[b-wwsyre7xnc] {
    font-family: var(--font-display);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}
/* _content/InstituteOfHumanAnatomy.Shared/Components/Game/DayStrip.razor.rz.scp.css */
.ds[b-uzlgzg1fb7] {
    flex-shrink: 0;
}

.ds-head[b-uzlgzg1fb7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    min-height: 32px;
    margin-bottom: var(--s-2);
}

.ds-title[b-uzlgzg1fb7] {
    min-width: 0;
}

/* "Repair streak": the one call to action the strip makes. Warm, compact, and a
   44px target through the ::after, like the design system's chips. */
.ds-repair[b-uzlgzg1fb7] {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px 0 9px;
    border: 1px solid rgb(255 106 90 / .45);
    border-radius: var(--r-pill);
    background: var(--ioha-red-soft);
    color: var(--ioha-bone);
    font: 800 var(--fs-xs)/1 var(--font-body);
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) ease;
}

.ds-repair[b-uzlgzg1fb7]::after {
    content: "";
    position: absolute;
    inset: -6px -2px;
}

.ds-repair svg[b-uzlgzg1fb7] {
    width: 15px;
    height: 15px;
    fill: var(--ioha-red-bright);
}

.ds-repair:active:not(:disabled)[b-uzlgzg1fb7] { transform: scale(.95); }
.ds-repair:disabled[b-uzlgzg1fb7] { opacity: .45; cursor: default; }

/* --- The row ------------------------------------------------------------------
   Eight fixed slots (today plus the seven-day window), so a day is the same size on
   launch day, when it is the only one, as it is a week later. */
.ds-row[b-uzlgzg1fb7] {
    --ds-slots: 8;
    --ds-gap: 6px;
    display: flex;
    gap: var(--ds-gap);
}

.ds-day[b-uzlgzg1fb7] {
    position: relative;
    flex: 0 0 calc((100% - (var(--ds-slots) - 1) * var(--ds-gap)) / var(--ds-slots));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 52px;
    padding: 0;
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-md);
    background: var(--ioha-surface-1);
    color: var(--ioha-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2) ease, background-color var(--dur-2) ease;
}

.ds-day:active:not(:disabled)[b-uzlgzg1fb7] { transform: scale(.94); }
.ds-day:disabled[b-uzlgzg1fb7] { cursor: default; }

.ds-letter[b-uzlgzg1fb7] {
    font: 800 var(--fs-xs)/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ds-mark[b-uzlgzg1fb7] {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.ds-mark svg[b-uzlgzg1fb7] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Played: a warm cell, because any answer keeps the flame going. The mark says how
   it went. */
.ds-day.is-correct[b-uzlgzg1fb7],
.ds-day.is-wrong[b-uzlgzg1fb7] {
    border-color: rgb(255 106 90 / .3);
    background: linear-gradient(180deg, rgb(255 106 90 / .16), rgb(224 57 43 / .06));
    color: var(--ioha-bone-dim);
}

.ds-day.is-correct .ds-mark[b-uzlgzg1fb7] {
    background: var(--ioha-success);
    color: #062a14;
}

.ds-day.is-wrong .ds-mark[b-uzlgzg1fb7] {
    background: var(--ioha-surface-3);
    color: var(--ioha-bone-dim);
    box-shadow: inset 0 0 0 1px var(--ioha-line-strong);
}

/* The streak's continuity: a thin flame-coloured band joins consecutive played
   days, running through the gap between cells. */
.ds-day.run-left[b-uzlgzg1fb7]::before,
.ds-day.run-right[b-uzlgzg1fb7]::after {
    content: "";
    position: absolute;
    /* Level with the centre of the mark, which sits 7-8px below the cell's middle. */
    top: calc(50% + 6px);
    height: 3px;
    width: calc(var(--ds-gap) + 2px);
    background: linear-gradient(90deg, #ff6a5a, #ffb84d);
    border-radius: 2px;
    pointer-events: none;
}

.ds-day.run-left[b-uzlgzg1fb7]::before { right: 100%; }
.ds-day.run-right[b-uzlgzg1fb7]::after { left: 100%; }

/* Unplayed and still reachable: hollow, dashed, with a plus. In the middle of a run
   it is visibly the gap. */
.ds-day.is-open[b-uzlgzg1fb7] {
    border-style: dashed;
    border-color: var(--ioha-line-strong);
    background: transparent;
}

.ds-day.is-open .ds-mark[b-uzlgzg1fb7] {
    color: var(--ioha-muted);
    box-shadow: inset 0 0 0 1.5px var(--ioha-line-strong);
}

.ds-day.is-open .ds-mark svg[b-uzlgzg1fb7] { width: 12px; height: 12px; stroke-width: 2.6; }

/* Still to come (the first week only): a faint slot with a pip, plainly not a day
   you can open yet. */
.ds-day.is-upcoming[b-uzlgzg1fb7] {
    border-color: transparent;
    background: rgb(255 255 255 / .03);
    color: var(--ioha-muted);
    opacity: .5;
    cursor: default;
    pointer-events: none;
}

.ds-pip[b-uzlgzg1fb7] {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

/* Today, not yet played: the red ring and a breathing dot. */
.ds-day.is-today[b-uzlgzg1fb7] {
    border: 2px solid var(--ioha-red-bright);
    color: var(--ioha-bone);
}

.ds-day.is-today:not(.is-correct):not(.is-wrong)[b-uzlgzg1fb7] {
    background: rgb(255 106 90 / .07);
}

.ds-dot[b-uzlgzg1fb7] {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ioha-red-bright);
    box-shadow: 0 0 0 4px rgb(255 106 90 / .22);
    animation: ds-breathe-b-uzlgzg1fb7 1.8s ease-in-out infinite;
}

/* The day on screen. A bone outline and a lift; today keeps its red ring and gets a
   bone halo outside it instead. */
.ds-day.is-selected[b-uzlgzg1fb7] {
    border-color: var(--ioha-bone);
    box-shadow: 0 6px 18px rgb(0 0 0 / .45);
    color: var(--ioha-bone);
}

.ds-day.is-today.is-selected[b-uzlgzg1fb7] {
    border-color: var(--ioha-red-bright);
    box-shadow: 0 0 0 2px var(--ioha-ink), 0 0 0 3.5px var(--ioha-bone-dim), 0 6px 18px rgb(0 0 0 / .45);
}

/* Played after its own day: a small gold badge, so a mended run reads as mended. */
.ds-repaired[b-uzlgzg1fb7] {
    position: absolute;
    top: -5px;
    right: -4px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ioha-gold);
    color: #1a1408;
    box-shadow: 0 0 0 2px var(--ioha-ink);
}

.ds-repaired svg[b-uzlgzg1fb7] {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
    .ds-day:hover:not(:disabled):not(.is-selected)[b-uzlgzg1fb7] { border-color: var(--ioha-bone-dim); }
    .ds-repair:hover:not(:disabled)[b-uzlgzg1fb7] { background: rgb(224 57 43 / .26); }
}

@keyframes ds-breathe-b-uzlgzg1fb7 {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgb(255 106 90 / .25); }
    50% { transform: scale(.85); box-shadow: 0 0 0 6px rgb(255 106 90 / .08); }
}

@media (max-width: 370px) {
    .ds-row[b-uzlgzg1fb7] { --ds-gap: 5px; }
    .ds-day[b-uzlgzg1fb7] { min-height: 48px; }
}

@media (max-height: 700px) {
    .ds-head[b-uzlgzg1fb7] { margin-bottom: 6px; }
    .ds-day[b-uzlgzg1fb7] { min-height: 46px; gap: 4px; }
}
/* _content/InstituteOfHumanAnatomy.Shared/Components/Game/FlameIcon.razor.rz.scp.css */
/* Sized by font-size, so a parent sets one number and the flame follows. */
.flame[b-w798xmfy4n] {
    display: block;
    width: 1em;
    height: 1em;
    overflow: visible;
}

.flame-body[b-w798xmfy4n] {
    transform-box: fill-box;
    transform-origin: 50% 92%;
}

.flame.is-lit .flame-body[b-w798xmfy4n] {
    animation: flame-flicker-b-w798xmfy4n 1.7s ease-in-out infinite alternate;
}

.flame.is-lit .flame-outer[b-w798xmfy4n] {
    filter: drop-shadow(0 0 3px rgb(255 106 90 / .45));
}

.flame.is-lit .flame-inner[b-w798xmfy4n] {
    fill: #ffe7b0;
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: flame-core-b-w798xmfy4n 1.1s ease-in-out infinite alternate;
}

/* Cold reads as "waiting", not "broken": the same shape, unlit. */
.flame.is-cold .flame-outer[b-w798xmfy4n] {
    stroke: var(--ioha-subtle);
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.flame.is-cold .flame-inner[b-w798xmfy4n] {
    fill: var(--ioha-surface-3);
}

@keyframes flame-flicker-b-w798xmfy4n {
    0% { transform: scale(1, 1) skewX(0deg); }
    35% { transform: scale(.98, 1.03) skewX(-1.5deg); }
    70% { transform: scale(1.02, .97) skewX(1deg); }
    100% { transform: scale(.99, 1.02) skewX(-.5deg); }
}

@keyframes flame-core-b-w798xmfy4n {
    from { transform: scale(1, .92); opacity: .85; }
    to { transform: scale(.94, 1.06); opacity: 1; }
}
/* _content/InstituteOfHumanAnatomy.Shared/Components/Game/MilestoneSheet.razor.rz.scp.css */
.ms[b-ezd9i50tdr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--s-1) var(--s-2);
    text-align: center;
    --stagger-step: 70ms;
}

.ms-hero[b-ezd9i50tdr] {
    position: relative;
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    margin-top: -4px;
}

/* A slow sunburst behind the flame; stopped (as one still frame) under reduced motion.
   The burst reaches 32px above the sheet's content (28px out, the hero's -4px), and the
   sheet body scrolls from 8px above it, so its top 24px were cut off along a straight
   line. This box stays still and fades its top out by then; the burst turns inside it
   (::before), so the fade does not turn with it. */
.ms-rays[b-ezd9i50tdr] {
    position: absolute;
    inset: -28px;
    -webkit-mask: linear-gradient(to bottom, transparent 24px, #000 48px);
    mask: linear-gradient(to bottom, transparent 24px, #000 48px);
    pointer-events: none;
}

.ms-rays[b-ezd9i50tdr]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgb(255 106 90 / .38) 0 30%, transparent 62%),
        repeating-conic-gradient(from 0deg, rgb(255 184 77 / .22) 0 8deg, transparent 8deg 24deg);
    -webkit-mask: radial-gradient(circle, #000 32%, transparent 70%);
    mask: radial-gradient(circle, #000 32%, transparent 70%);
    animation: ms-spin-b-ezd9i50tdr 16s linear infinite;
}

.ms-flame[b-ezd9i50tdr] {
    position: relative;
    font-size: 84px;
    animation: ms-flame-in-b-ezd9i50tdr var(--dur-4) var(--ease-spring) backwards;
}

.ms-num[b-ezd9i50tdr] {
    margin: var(--s-2) 0 0;
    color: var(--ioha-bone);
    font: 900 112px/.9 var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
    background: linear-gradient(180deg, #fff 30%, #ffd2c4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ms-unit[b-ezd9i50tdr] {
    margin: 2px 0 0;
    color: var(--ioha-red-bright);
    font: 800 var(--fs-sm)/1.2 var(--font-body);
    letter-spacing: .18em;
    text-transform: uppercase;
}

.ms-title[b-ezd9i50tdr] {
    margin: var(--s-5) 0 0;
    color: var(--ioha-bone);
    font: 900 var(--fs-2xl)/1.1 var(--font-display);
    letter-spacing: -.02em;
}

.ms-body[b-ezd9i50tdr] {
    max-width: 30ch;
    margin: var(--s-2) 0 0;
    color: var(--ioha-bone-dim);
    font: 500 var(--fs-md)/1.5 var(--font-body);
}

.ms-actions[b-ezd9i50tdr] {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    width: 100%;
    margin-top: var(--s-6);
}

@keyframes ms-spin-b-ezd9i50tdr {
    to { transform: rotate(360deg); }
}

@keyframes ms-flame-in-b-ezd9i50tdr {
    from { transform: scale(.3) translateY(20px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (max-height: 700px) {
    .ms-hero[b-ezd9i50tdr] { width: 84px; height: 84px; }
    .ms-flame[b-ezd9i50tdr] { font-size: 64px; }
    .ms-num[b-ezd9i50tdr] { font-size: 88px; }
    .ms-title[b-ezd9i50tdr] { margin-top: var(--s-3); font-size: var(--fs-xl); }
    .ms-actions[b-ezd9i50tdr] { margin-top: var(--s-4); }
}
/* _content/InstituteOfHumanAnatomy.Shared/Components/Game/OnboardingSheet.razor.rz.scp.css */
.ob[b-t1b30b8ijd] {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding-bottom: var(--s-1);
}

.ob-progress[b-t1b30b8ijd] {
    display: flex;
    gap: 6px;
}

.ob-progress span[b-t1b30b8ijd] {
    flex: 1;
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--ioha-surface-3);
    transition: background-color var(--dur-3) ease;
}

.ob-progress span.is-on[b-t1b30b8ijd] {
    background: linear-gradient(90deg, var(--ioha-red), var(--ioha-red-bright));
}

.ob-step[b-t1b30b8ijd] {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    --stagger-step: 50ms;
}

.ob-title[b-t1b30b8ijd] {
    margin: 0 0 var(--s-2);
    color: var(--ioha-bone);
    font: 900 var(--fs-2xl)/1.08 var(--font-display);
    letter-spacing: -.02em;
}

.ob-options[b-t1b30b8ijd] {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.ob-option[b-t1b30b8ijd] {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: 60px;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--ioha-line-strong);
    border-radius: var(--r-lg);
    background: var(--ioha-surface-2);
    color: var(--ioha-bone);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2) ease, background-color var(--dur-2) ease;
}

.ob-option:active[b-t1b30b8ijd] {
    transform: scale(.97);
    border-color: var(--ioha-red);
    background: var(--ioha-red-soft);
}

.ob-emoji[b-t1b30b8ijd] {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    /* A light tile: Apple's mortarboard and stethoscope are dark line art that
       vanished on the dark surface, while the others read either way. */
    background: rgb(242 239 236 / .92);
    font-size: 22px;
    line-height: 1;
}

.ob-text[b-t1b30b8ijd] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ob-label[b-t1b30b8ijd] {
    font: 800 var(--fs-md)/1.25 var(--font-body);
}

.ob-sub[b-t1b30b8ijd] {
    color: var(--ioha-muted);
    font: 600 var(--fs-sm)/1.3 var(--font-body);
}

.ob-chev[b-t1b30b8ijd] {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--ioha-muted);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ob-skip[b-t1b30b8ijd] {
    margin-top: calc(-1 * var(--s-1));
}

@media (hover: hover) and (pointer: fine) {
    .ob-option:hover[b-t1b30b8ijd] { border-color: var(--ioha-bone-dim); background: var(--ioha-surface-3); }
}
/* _content/InstituteOfHumanAnatomy.Shared/Components/Game/StreakFlame.razor.rz.scp.css */
/* A 32px pill: within the shell's slot budget at 320px wide. */
.streak[b-jue7c6zfjq] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 11px 0 8px;
    border-radius: var(--r-pill);
    background: var(--ioha-surface-1);
    box-shadow: inset 0 0 0 1px var(--ioha-line);
    color: var(--ioha-muted);
    font: 900 var(--fs-lg)/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    white-space: nowrap;
    transition: background-color var(--dur-3) ease, box-shadow var(--dur-3) ease, color var(--dur-3) ease;
}

.streak.is-lit[b-jue7c6zfjq] {
    background: linear-gradient(180deg, rgb(255 106 90 / .2), rgb(224 57 43 / .12));
    box-shadow: inset 0 0 0 1px rgb(255 106 90 / .38);
    color: var(--ioha-bone);
}

.streak-icon[b-jue7c6zfjq] {
    position: relative;
    display: grid;
    place-items: center;
    font-size: 20px;
}

/* The ring that expands out of the flame on a burst. */
.streak-ring[b-jue7c6zfjq] {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--ioha-red-bright);
    opacity: 0;
    pointer-events: none;
}

.streak[b-jue7c6zfjq]  .streak-num {
    display: inline-block;
    min-width: 1ch;
}

/* The answer just added a day: the flame jumps, the ring flashes out, the number
   pops as it counts up. All transform/opacity; the global switch flattens it
   under reduced motion. */
.streak.is-burst .streak-icon[b-jue7c6zfjq] {
    animation: streak-jump-b-jue7c6zfjq 700ms var(--ease-spring);
}

.streak.is-burst .streak-ring[b-jue7c6zfjq] {
    animation: streak-ring-b-jue7c6zfjq 700ms var(--ease-out);
}

.streak.is-burst[b-jue7c6zfjq]  .streak-num {
    animation: streak-num-b-jue7c6zfjq 700ms var(--ease-spring);
}

.streak.is-burst[b-jue7c6zfjq] {
    animation: streak-glow-b-jue7c6zfjq 900ms ease-out;
}

@keyframes streak-jump-b-jue7c6zfjq {
    0% { transform: scale(1); }
    30% { transform: scale(1.45) translateY(-2px); }
    100% { transform: scale(1); }
}

@keyframes streak-ring-b-jue7c6zfjq {
    0% { opacity: .9; transform: scale(.5); }
    100% { opacity: 0; transform: scale(2.1); }
}

@keyframes streak-num-b-jue7c6zfjq {
    0% { transform: scale(1); }
    35% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

@keyframes streak-glow-b-jue7c6zfjq {
    0% { box-shadow: inset 0 0 0 1px rgb(255 106 90 / .38), 0 0 0 0 rgb(255 106 90 / .55); }
    100% { box-shadow: inset 0 0 0 1px rgb(255 106 90 / .38), 0 0 0 12px rgb(255 106 90 / 0); }
}
/* _content/InstituteOfHumanAnatomy.Shared/Components/MobileAppBanner.razor.rz.scp.css */
.mab[b-ybpjen04m1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 4px;
    background: var(--ioha-surface-1, #16161b);
    border-bottom: 1px solid var(--ioha-line, #26262e);
    color: var(--ioha-bone, #f2efec);
    font-family: var(--font-body, Manrope), system-ui, sans-serif;
    flex: none;
}
/* 44px hit area around a small glyph. */
.mab-x[b-ybpjen04m1] {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    color: var(--ioha-muted, #8d8892);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.mab-x:focus-visible[b-ybpjen04m1] { outline: 2px solid var(--ioha-focus, #ff6a5a); outline-offset: -4px; border-radius: 10px; }
.mab-icon[b-ybpjen04m1] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ioha-ink, #0b0b0d);
    box-shadow: 0 0 0 1px var(--ioha-line, #2a2a33) inset;
    display: grid;
    place-items: center;
    flex: none;
}
.mab-icon img[b-ybpjen04m1] { width: 24px; height: 24px; }
.mab-copy[b-ybpjen04m1] { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.mab-copy strong[b-ybpjen04m1] { font-size: 14px; font-weight: 800; }
.mab-copy small[b-ybpjen04m1] { font-size: 12px; color: var(--ioha-muted, #a8a3ad); }
.mab-get[b-ybpjen04m1] {
    flex: none;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border-radius: var(--r-pill, 999px);
    background: var(--ioha-red, #e0392b);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
}
.mab-get:focus-visible[b-ybpjen04m1] { outline: 2px solid var(--ioha-focus, #ff6a5a); outline-offset: 2px; }
/* _content/InstituteOfHumanAnatomy.Shared/Components/NotFound.razor.rz.scp.css */
/* Every value reads the global design tokens (app.css :root) and carries the
   current hex as a fallback, so the page is on-brand whether or not the token
   layer has loaded -- and stays on-brand when the tokens change. */

.nf[b-31b85nxpy4] {
    /* EmptyLayout already pads for the notch and home indicator. */
    min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--s-6, 24px) var(--s-4, 16px) var(--s-8, 48px);
    background:
        radial-gradient(60% 45% at 50% 0%, rgba(224, 57, 43, .16), rgba(224, 57, 43, 0) 70%),
        var(--ioha-ink, #0b0b0d);
    color: var(--ioha-bone, #f2efec);
    font-family: var(--font-body, Manrope), "Segoe UI", system-ui, sans-serif;
}

.nf-brand[b-31b85nxpy4] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    align-self: flex-start;
    /* 44px to the finger (the words alone are 22px); the negative margin gives the
       padding back, so nothing on the page moves. */
    padding: 11px 8px;
    margin: -11px -8px;
    text-decoration: none;
}
.nf-brand-mark[b-31b85nxpy4] { font: 900 20px var(--font-display, Archivo), Manrope, sans-serif; letter-spacing: -.01em; color: var(--ioha-bone, #f2efec); }
/* Red text on ink is the bright red: the brand red measures 4.49:1 there, just under
   WCAG AA's 4.5:1 for small text. */
.nf-brand-sub[b-31b85nxpy4] { font: 800 10px var(--font-body, Manrope), sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--ioha-red-bright, #ff6a5a); }

.nf-card[b-31b85nxpy4] {
    width: 100%;
    max-width: 420px;
    margin: auto 0;
    padding-top: var(--s-8, 48px);
    text-align: center;
}

/* The game's question mark, in a slowly breathing ring. */
.nf-mark[b-31b85nxpy4] {
    width: 112px;
    height: 112px;
    margin: 0 auto var(--s-6, 24px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(closest-side, rgba(224, 57, 43, .28), rgba(224, 57, 43, .04));
    box-shadow: 0 0 0 1px rgba(224, 57, 43, .35) inset, 0 0 48px -8px rgba(224, 57, 43, .55);
    animation: nf-breathe-b-31b85nxpy4 3.2s var(--ease-out, cubic-bezier(.05, .7, .1, 1)) infinite alternate;
}
.nf-mark span[b-31b85nxpy4] { font: 900 56px/1 var(--font-display, Archivo), Manrope, sans-serif; color: var(--ioha-red-bright, #ff6a5a); }

@keyframes nf-breathe-b-31b85nxpy4 {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}

.nf-kicker[b-31b85nxpy4] {
    margin: 0 0 var(--s-3, 12px);
    font: 800 12px var(--font-body, Manrope), sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ioha-red-bright, #ff6a5a);
}
.nf-title[b-31b85nxpy4] {
    margin: 0;
    font: 900 clamp(30px, 8vw, 40px)/1.02 var(--font-display, Archivo), Manrope, sans-serif;
    letter-spacing: -.03em;
}
.nf-lede[b-31b85nxpy4] {
    margin: var(--s-4, 16px) auto 0;
    max-width: 30em;
    font-size: var(--fs-md, 17px);
    line-height: 1.55;
    color: var(--ioha-bone-dim, #c9c4be);
}

.nf-actions[b-31b85nxpy4] {
    display: flex;
    flex-direction: column;
    gap: var(--s-3, 12px);
    margin-top: var(--s-7, 32px);
}
.nf-btn[b-31b85nxpy4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 24px;
    border-radius: var(--r-md, 14px);
    font: 800 17px var(--font-body, Manrope), sans-serif;
    text-decoration: none;
    transition: transform var(--dur-1, 120ms) var(--ease-out, ease-out), box-shadow var(--dur-2, 200ms);
}
.nf-btn:active[b-31b85nxpy4] { transform: scale(.97); }
.nf-btn:focus-visible[b-31b85nxpy4] { outline: 2px solid var(--ioha-focus, #ff6a5a); outline-offset: 3px; }
/* The app's button red behind white text (5.1:1; the brand red is 4.38:1), and a glow
   rather than a lighter red on hover, which would drop under 4.5:1 again. */
.nf-btn-primary[b-31b85nxpy4] { background: var(--ioha-red-strong, #cf3123); color: #fff; box-shadow: 0 10px 30px -10px rgba(224, 57, 43, .7); }
.nf-btn-primary:hover[b-31b85nxpy4] { box-shadow: 0 10px 34px -6px rgba(224, 57, 43, .85); }
.nf-btn-ghost[b-31b85nxpy4] { border: 1px solid var(--ioha-line, #34343e); color: var(--ioha-bone, #f2efec); }

@media (prefers-reduced-motion: reduce) {
    .nf-mark[b-31b85nxpy4] { animation: none; }
    .nf-btn[b-31b85nxpy4] { transition: none; }
    .nf-btn:active[b-31b85nxpy4] { transform: none; }
}
/* _content/InstituteOfHumanAnatomy.Shared/Components/PremiumUpsellSheet.razor.rz.scp.css */
/* Gold, warm and short: an invitation, not a refusal. The sheet itself (Sheet.razor)
   owns the slide, the backdrop and the close button; this is only its content. */

.pu[b-rkvzc0m429] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: var(--s-1);
}

.pu-emblem[b-rkvzc0m429] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgb(255 255 255 / .18), transparent 55%),
        linear-gradient(145deg, var(--ioha-gold), var(--ioha-gold-deep));
    color: #1a1408;
    box-shadow: var(--glow-gold), inset 0 -3px 0 rgb(0 0 0 / .18);
}

.pu-emblem svg[b-rkvzc0m429] { width: 32px; height: 32px; }

.pu-kicker[b-rkvzc0m429] {
    margin: var(--s-4) 0 0;
    color: var(--ioha-gold);
    font: 800 var(--fs-xs)/1.2 var(--font-body);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.pu-title[b-rkvzc0m429] {
    margin: var(--s-2) 0 0;
    max-width: 22ch;
    color: var(--ioha-bone);
    font: 900 var(--fs-xl)/1.15 var(--font-display);
    letter-spacing: -.01em;
}

.pu-body[b-rkvzc0m429] {
    margin: var(--s-2) 0 0;
    max-width: 34ch;
    color: var(--ioha-bone-dim);
    font: 500 var(--fs-sm)/1.5 var(--font-body);
}

.pu-perks[b-rkvzc0m429] {
    display: grid;
    gap: var(--s-2);
    width: 100%;
    margin: var(--s-5) 0 0;
    padding: var(--s-4);
    border: 1px solid rgb(242 193 78 / .22);
    border-radius: var(--r-lg);
    background: var(--ioha-gold-soft);
    list-style: none;
    text-align: left;
}

.pu-perks li[b-rkvzc0m429] {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--ioha-bone);
    font: 700 var(--fs-sm)/1.35 var(--font-body);
}

.pu-check[b-rkvzc0m429] {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ioha-gold);
}

.pu-check[b-rkvzc0m429]::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    width: 5px;
    height: 9px;
    border: solid #1a1408;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pu-actions[b-rkvzc0m429] {
    display: grid;
    gap: var(--s-2);
    width: 100%;
    margin-top: var(--s-5);
}
/* _content/InstituteOfHumanAnatomy.Shared/Components/Sheet.razor.rz.scp.css */
.sheet-root[b-tl6x7q48pl] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.sheet-backdrop[b-tl6x7q48pl] {
    position: absolute;
    inset: 0;
    background: var(--ioha-scrim);
    -webkit-tap-highlight-color: transparent;
    animation: sheet-fade-in-b-tl6x7q48pl var(--dur-3) ease-out both;
}

/* backwards, not both: once the entrance has played, the panel's transform has to
   belong to the swipe-to-close drag (an animation with a held end state would
   override the inline transform and the panel would not follow the finger). */
.sheet-panel[b-tl6x7q48pl] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 24px);
    /* The home indicator / gesture bar strip is the panel's, outside the scrolling body,
       so on a sheet taller than the screen no line or link scrolls in under it (where a
       tap can turn into the system's home gesture). */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border: 1px solid var(--ioha-glass-line);
    border-bottom: 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background:
        linear-gradient(180deg, rgb(255 255 255 / .035), transparent 120px),
        var(--ioha-surface-1);
    color: var(--ioha-bone);
    box-shadow: 0 -12px 48px rgb(0 0 0 / .55);
    outline: none;
    animation: sheet-up-b-tl6x7q48pl var(--dur-4) var(--ease-spring) backwards;
}

.sheet-root.is-closing .sheet-backdrop[b-tl6x7q48pl] {
    animation: sheet-fade-out-b-tl6x7q48pl var(--dur-3) ease-in forwards;
}

.sheet-root.is-closing .sheet-panel[b-tl6x7q48pl] {
    animation: sheet-down-b-tl6x7q48pl var(--dur-3) var(--ease-in) forwards;
    pointer-events: none;
}

.sheet-grip[b-tl6x7q48pl] {
    flex: none;
    padding-top: 8px;
    touch-action: none;
    cursor: grab;
}

.sheet-handle[b-tl6x7q48pl] {
    display: block;
    width: 40px;
    height: 5px;
    margin: 0 auto 4px;
    border-radius: var(--r-pill);
    background: var(--ioha-line-strong);
}

.sheet-head[b-tl6x7q48pl] {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 48px;
    padding: 0 var(--s-2) 0 var(--s-5);
}

.sheet-title[b-tl6x7q48pl] {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--ioha-bone);
    font: 900 var(--fs-xl)/1.15 var(--font-display);
    letter-spacing: -.01em;
}

.sheet-close[b-tl6x7q48pl] {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ioha-muted);
    cursor: pointer;
    transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-1) var(--ease-out);
}

.sheet-close svg[b-tl6x7q48pl] {
    width: 20px;
    height: 20px;
}

.sheet-close:active[b-tl6x7q48pl] { transform: scale(.92); }

@media (hover: hover) and (pointer: fine) {
    .sheet-close:hover[b-tl6x7q48pl] { background: var(--ioha-surface-2); color: var(--ioha-bone); }
}

.sheet-body[b-tl6x7q48pl] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--s-2) var(--s-5) var(--s-6);
}

/* A desk-sized window gets a centred dialog: a sheet pinned to the bottom of a
   1400px-wide screen reads as a cookie banner. */
@media (min-width: 768px) and (min-height: 560px) {
    .sheet-root[b-tl6x7q48pl] { justify-content: center; padding: 24px; }
    .sheet-panel[b-tl6x7q48pl] {
        max-width: 480px;
        max-height: min(720px, calc(100dvh - 48px));
        border-bottom: 1px solid var(--ioha-glass-line);
        padding-bottom: 0;
        border-radius: var(--r-xl);
        animation-name: sheet-pop-b-tl6x7q48pl;
    }
    .sheet-root.is-closing .sheet-panel[b-tl6x7q48pl] { animation-name: sheet-pop-out-b-tl6x7q48pl; }
    .sheet-handle[b-tl6x7q48pl] { display: none; }
    .sheet-grip[b-tl6x7q48pl] { cursor: default; }
}

@keyframes sheet-up-b-tl6x7q48pl {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Only an end state: it starts from wherever the panel is, including partway down
   after a swipe. */
@keyframes sheet-down-b-tl6x7q48pl {
    to { transform: translateY(100%); }
}

@keyframes sheet-pop-b-tl6x7q48pl {
    from { transform: translateY(16px) scale(.96); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes sheet-pop-out-b-tl6x7q48pl {
    to { transform: translateY(8px) scale(.98); opacity: 0; }
}

@keyframes sheet-fade-in-b-tl6x7q48pl {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes sheet-fade-out-b-tl6x7q48pl {
    to { opacity: 0; }
}
/* _content/InstituteOfHumanAnatomy.Shared/Components/StoreBadges.razor.rz.scp.css */
.sb-row[b-uweuvrhuwc] { display: flex; flex-wrap: wrap; gap: 12px; }

.sb-badge[b-uweuvrhuwc] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 18px 0 14px;
    border-radius: var(--r-sm, 12px);
    background: #000;
    border: 1px solid var(--ioha-line, #3a3a44);
    color: #fff;
    text-decoration: none;
    transition: border-color var(--dur-2, 200ms), transform var(--dur-1, 120ms) var(--ease-out, ease-out);
}
.sb-badge:hover[b-uweuvrhuwc] { border-color: #8a8a96; transform: translateY(-1px); }
.sb-badge:active[b-uweuvrhuwc] { transform: scale(.97); }
.sb-badge:focus-visible[b-uweuvrhuwc] { outline: 2px solid var(--ioha-focus, #ff6a5a); outline-offset: 3px; }

.sb-glyph[b-uweuvrhuwc] { width: 26px; height: 26px; flex: none; }

.sb-text[b-uweuvrhuwc] {
    display: flex;
    flex-direction: column;
    font: 600 19px/1.05 var(--font-body, Manrope), system-ui, sans-serif;
    letter-spacing: -.01em;
}
.sb-text small[b-uweuvrhuwc] { font-size: 11px; font-weight: 500; letter-spacing: .02em; }

/* Before launch. Deliberately not a button shape: it is a fact, not an action,
   and only the optional link at the end can be tapped. */
.sb-soon[b-uweuvrhuwc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    font: 600 14px/1.4 var(--font-body, Manrope), system-ui, sans-serif;
    color: var(--ioha-muted, #a8a3ad);
}
.sb-phone[b-uweuvrhuwc] { width: 18px; height: 18px; flex: none; color: var(--ioha-red, #e0392b); }
.sb-chunk[b-uweuvrhuwc] { white-space: nowrap; }
.sb-web[b-uweuvrhuwc] {
    /* A comfortable tap target without changing how the line reads. */
    display: inline-block;
    white-space: nowrap;
    padding: 10px 0;
    margin: -10px 0;
    color: var(--ioha-bone, #f2efec);
    text-decoration: underline;
    text-decoration-color: rgba(224, 57, 43, .7);
    text-underline-offset: 3px;
}
.sb-web:hover[b-uweuvrhuwc] { color: #fff; }
.sb-web:focus-visible[b-uweuvrhuwc] { outline: 2px solid var(--ioha-focus, #ff6a5a); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
    .sb-badge[b-uweuvrhuwc] { transition: none; }
    .sb-badge:hover[b-uweuvrhuwc], .sb-badge:active[b-uweuvrhuwc] { transform: none; }
}
/* _content/InstituteOfHumanAnatomy.Shared/Components/SupportSheet.razor.rz.scp.css */
/* Help & feedback sheet. Built from the same tokens as the You page's name sheet
   (inputs on ink, red focus ring, 13px help lines) so the two forms read as one family. */

.sup-form[b-ccqshrl7xw] {
    display: grid;
    gap: var(--s-4);
}

.sup-text[b-ccqshrl7xw] {
    margin: 0;
    color: var(--ioha-bone-dim);
    font-size: 15px;
    line-height: 1.5;
}

.sup-field[b-ccqshrl7xw] {
    display: grid;
    gap: var(--s-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.sup-label[b-ccqshrl7xw] {
    padding: 0;
    color: var(--ioha-muted);
    font: 800 var(--fs-xs)/1.2 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sup-chips[b-ccqshrl7xw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.sup-input[b-ccqshrl7xw] {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 var(--s-4);
    border: 1px solid var(--ioha-line-strong);
    border-radius: var(--r-md);
    background: var(--ioha-ink);
    color: var(--ioha-bone);
    font: 600 16px var(--font-body);
}

/* 16px keeps iOS from zooming the page when the field is focused. */
.sup-textarea[b-ccqshrl7xw] {
    height: auto;
    min-height: 128px;
    padding: 12px var(--s-4);
    line-height: 1.45;
    resize: vertical;
}

.sup-input[b-ccqshrl7xw]::placeholder { color: var(--ioha-subtle); font-weight: 500; }
.sup-input:focus[b-ccqshrl7xw] { outline: none; border-color: var(--ioha-red); box-shadow: 0 0 0 3px var(--ioha-red-soft); }
.sup-input[aria-invalid="true"][b-ccqshrl7xw] { border-color: var(--ioha-red-bright); }
.sup-input[readonly][b-ccqshrl7xw] { border-style: dashed; background: var(--ioha-surface-1); color: var(--ioha-bone-dim); }
.sup-input:disabled[b-ccqshrl7xw] { opacity: .6; }

.sup-help[b-ccqshrl7xw] {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    margin: 0 2px;
    color: var(--ioha-muted);
    font-size: 13px;
    line-height: 1.4;
}

.sup-help.is-error[b-ccqshrl7xw] { color: var(--ioha-red-bright); font-weight: 700; }
.sup-count[b-ccqshrl7xw] { flex: none; color: var(--ioha-subtle); font-variant-numeric: tabular-nums; font-weight: 500; }

/* Honeypot: present for bots, absent for people and screen readers. Not display:none,
   which some bots skip. */
.sup-trap[b-ccqshrl7xw] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sup-device[b-ccqshrl7xw] {
    padding: 12px 14px;
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-md);
    background: var(--ioha-surface-1);
}

.sup-device-row[b-ccqshrl7xw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

.sup-device-text[b-ccqshrl7xw] { display: grid; gap: 2px; min-width: 0; }
.sup-device-label[b-ccqshrl7xw] { font-size: 15px; font-weight: 700; }
.sup-device-sub[b-ccqshrl7xw] { color: var(--ioha-muted); font-size: 13px; }

.sup-device-list[b-ccqshrl7xw] {
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--ioha-line);
}

.sup-device-list div[b-ccqshrl7xw] { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-2); }
.sup-device-list dt[b-ccqshrl7xw] { color: var(--ioha-muted); font-size: 13px; }
.sup-device-list dd[b-ccqshrl7xw] { margin: 0; color: var(--ioha-bone-dim); font-size: 13px; overflow-wrap: anywhere; }

/* The You page's switch, at the same size: 52x32 drawn, 44px to the finger. */
.sup-switch[b-ccqshrl7xw] {
    position: relative;
    flex: none;
    width: 52px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--ioha-surface-3);
    box-shadow: inset 0 0 0 1px var(--ioha-line-strong);
    cursor: pointer;
    transition: background-color var(--dur-2) ease;
}

.sup-switch[b-ccqshrl7xw]::before { content: ""; position: absolute; inset: -6px -4px; }

.sup-switch-knob[b-ccqshrl7xw] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgb(0 0 0 / .4);
    transition: transform var(--dur-2) var(--ease-spring);
}

.sup-switch[aria-checked="true"][b-ccqshrl7xw] { background: var(--ioha-red-strong); box-shadow: none; }
.sup-switch[aria-checked="true"] .sup-switch-knob[b-ccqshrl7xw] { transform: translateX(20px); }
.sup-switch:disabled[b-ccqshrl7xw] { opacity: .5; cursor: default; }

.sup-error[b-ccqshrl7xw] {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgb(224 57 43 / .45);
    border-radius: var(--r-md);
    background: var(--ioha-red-soft);
    color: #ffd2cc;
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.sup-fine[b-ccqshrl7xw] {
    margin: calc(-1 * var(--s-2)) 0 0;
    color: var(--ioha-muted);
    font-size: 13px;
    text-align: center;
}

/* The address is SupportEmailLink's own <a>, so it needs ::deep to be reached. */
.sup-fine[b-ccqshrl7xw]  a {
    color: var(--ioha-bone);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* _content/InstituteOfHumanAnatomy.Shared/Components/ToastHost.razor.rz.scp.css */
/* Toasts drop in just under the top bar: the bottom of the screen belongs to the
   tab bar and to the answer options, which a toast must never cover. */

.toast-host[b-2npytyubfx] {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--ioha-topbar-h, 52px) + 8px);
    left: 0;
    right: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    pointer-events: none;
}

.toast[b-2npytyubfx] {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(440px, 100%);
    min-height: 44px;
    padding: 10px 16px 10px 10px;
    border: 1px solid var(--ioha-glass-line);
    border-radius: var(--r-pill);
    background: rgb(31 29 32 / .94);
    color: var(--ioha-bone);
    box-shadow: var(--shadow-3);
    font: 700 var(--fs-sm)/1.35 var(--font-body);
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    animation: toast-in-b-2npytyubfx var(--dur-4) var(--ease-spring) backwards;
}

.toast.is-leaving[b-2npytyubfx] {
    animation: toast-out-b-2npytyubfx var(--dur-2) var(--ease-in) both;
}

.toast-icon[b-2npytyubfx] {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ioha-surface-3);
    color: var(--ioha-bone);
}

.toast-icon svg[b-2npytyubfx] {
    width: 16px;
    height: 16px;
}

.toast.is-success .toast-icon[b-2npytyubfx] { background: var(--ioha-success-soft); color: var(--ioha-success); }
.toast.is-error .toast-icon[b-2npytyubfx] { background: var(--ioha-red-soft); color: var(--ioha-red-bright); }
.toast.is-warning .toast-icon[b-2npytyubfx] { background: var(--ioha-warning-soft); color: var(--ioha-warning); }
.toast.is-error[b-2npytyubfx] { border-color: rgb(224 57 43 / .45); }

@keyframes toast-in-b-2npytyubfx {
    from { transform: translateY(-14px) scale(.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes toast-out-b-2npytyubfx {
    to { transform: translateY(-8px) scale(.98); opacity: 0; }
}
/* _content/InstituteOfHumanAnatomy.Shared/Components/UpdateRequired.razor.rz.scp.css */
.upd[b-9iwsv4lrhd] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
    background:
        radial-gradient(120% 60% at 50% 0%, rgb(224 57 43 / .16), transparent 60%),
        var(--ioha-ink);
    color: var(--ioha-bone);
    font-family: var(--font-body);
}

.upd-card[b-9iwsv4lrhd] {
    width: 100%;
    max-width: 380px;
    text-align: center;
    animation: upd-in-b-9iwsv4lrhd var(--dur-4) var(--ease-out) backwards;
}

.upd-mark[b-9iwsv4lrhd] {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    border-radius: 24px;
    background: var(--ioha-red-soft);
    color: var(--ioha-red-bright);
    box-shadow: inset 0 0 0 1px rgb(224 57 43 / .35);
}

.upd-mark svg[b-9iwsv4lrhd] {
    width: 34px;
    height: 34px;
}

.upd-kicker[b-9iwsv4lrhd] {
    margin: 0 0 8px;
    color: var(--ioha-red-bright);
    font: 800 var(--fs-xs)/1.2 var(--font-body);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.upd-title[b-9iwsv4lrhd] {
    margin: 0 0 12px;
    font: 900 var(--fs-2xl)/1.05 var(--font-display);
    letter-spacing: -.02em;
}

.upd-body[b-9iwsv4lrhd] {
    margin: 0 0 18px;
    color: var(--ioha-bone-dim);
    font: 500 var(--fs-md)/1.5 var(--font-body);
}

.upd-versions[b-9iwsv4lrhd] {
    margin: 0 0 24px;
    color: var(--ioha-subtle);
    font: 600 var(--fs-sm)/1.4 var(--font-body);
}

@keyframes upd-in-b-9iwsv4lrhd {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: none; opacity: 1; }
}
/* _content/InstituteOfHumanAnatomy.Shared/Layout/GameLayout.razor.rz.scp.css */
/* App shell. Tokens come from app.css (:root). */

/* The shell owns exactly one viewport and never grows past it. A daily puzzle that
   scrolls means the model can be half off screen while you are trying to drag it,
   and on a phone the drag then fights the page. Anything that needs more room than
   this scrolls inside its own panel instead.

   A grid rather than a flex column so the tab bar can move up into the top row on a
   wide window without being rendered twice. */
.game-layout[b-dhe840wkbe] {
    position: relative;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
        "banner"
        "top"
        "main"
        "tabs";
    height: 100dvh;
    background: var(--ioha-ink);
    color: var(--ioha-bone);
    font-family: var(--font-body);
    overflow: hidden;
    /* Stops the rubber-band bounce in the iOS WebView, which otherwise reads as a
       broken scroll on a page that is not supposed to scroll at all. */
    overscroll-behavior: none;
}

/* dvh is not understood everywhere; without this the shell would have no height
   at all on those browsers rather than merely the wrong one. */
@supports not (height: 100dvh) {
    .game-layout[b-dhe840wkbe] { height: 100vh; }
}

/* --- Top bar --------------------------------------------------------------- */

.shell-top[b-dhe840wkbe] {
    grid-area: top;
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    height: calc(var(--ioha-topbar-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) var(--s-2) 0 var(--s-4);
    background: var(--ioha-ink);
    box-shadow: inset 0 -1px 0 rgb(255 255 255 / .05);
}

/* The brand and the actions never shrink: a squashed logo looks broken and a
   squashed action is a missed tap. The slot between them is what gives. */
.shell-brand[b-dhe840wkbe] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--ioha-tap);
    padding-right: 4px;
    color: var(--ioha-bone);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-1) var(--ease-out);
}

.shell-brand:active[b-dhe840wkbe] { transform: scale(.97); }

.shell-mark[b-dhe840wkbe] {
    display: block;
    width: 30px;
    height: auto;
}

.shell-wordmark[b-dhe840wkbe] {
    font: 900 18px/1 var(--font-display);
    letter-spacing: -.01em;
}

.shell-wordmark-sub[b-dhe840wkbe] {
    align-self: center;
    margin-top: 1px;
    padding: 3px 6px;
    border-radius: 6px;
    background: var(--ioha-red-soft);
    color: var(--ioha-red-bright);
    font: 800 var(--fs-xs)/1 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Filled by pages through <SectionContent>; collapses to nothing when empty. If a
   page ever sends more than fits, this is the box that gives (min-width: 0), so
   the overflow lands over the wordmark rather than pushing "Sign in" or the bell
   off the right edge. */
.shell-slot[b-dhe840wkbe] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    margin-left: auto;
}

.shell-slot:empty[b-dhe840wkbe] { display: none; }

.shell-actions[b-dhe840wkbe] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.shell-slot:not(:empty) + .shell-actions[b-dhe840wkbe] { margin-left: 0; }

/* When a page fills the slot the chrome makes room for it: the "Daily" tag and the
   Premium label go, and the pill keeps its crown and its 44px hit area. At 360px
   wide that leaves the slot about 110px signed out (more signed in, where a bell
   replaces "Sign in"). Browsers without :has() (iOS before 15.4) keep the full
   chrome and the slot simply gets less. */
/* "> *" rather than ":not(:empty)": WebKit (the iOS app's web view) did not re-match
   the :empty form when a page filled the slot after first render, so the Daily tag
   stayed and crowded the streak pill. */
.shell-top:has(.shell-slot > *) .shell-wordmark-sub[b-dhe840wkbe] { display: none; }

/* The Premium label only goes on phones narrower than 390px: an unlabeled crown is
   ambiguous, and at 390 and up there is room for it beside the slot. */
@media (max-width: 389px) {
    .shell-top:has(.shell-slot > *) .shell-premium span[b-dhe840wkbe] { display: none; }
    /* A 36px crown drawn, still 44px wide to the finger (the 4px margins move inside). */
    .shell-top:has(.shell-slot > *) .shell-premium[b-dhe840wkbe] {
        justify-content: center;
        width: var(--ioha-tap);
        margin: 0;
        padding: 0;
    }
    .shell-top:has(.shell-slot > *) .shell-premium[b-dhe840wkbe]::before { inset: 6px 4px; }
}

.shell-text-link[b-dhe840wkbe] {
    display: grid;
    place-items: center;
    min-width: var(--ioha-tap);
    height: var(--ioha-tap);
    padding: 0 10px;
    border-radius: var(--r-pill);
    color: var(--ioha-bone-dim);
    font: 700 var(--fs-sm)/1 var(--font-body);
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-2), background-color var(--dur-2), transform var(--dur-1) var(--ease-out);
}

.shell-text-link:active[b-dhe840wkbe] { transform: scale(.96); }
.shell-text-link.is-admin[b-dhe840wkbe] { color: var(--ioha-muted); font-size: var(--fs-xs); }

/* Premium: a small gold pill, the only gold in the chrome. The link itself is the 44px
   tap target; the 32px pill is drawn behind its label by ::before (isolation keeps
   that layer inside the link). */
.shell-premium[b-dhe840wkbe] {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: var(--ioha-tap);
    margin: 0 4px;
    padding: 0 12px 0 9px;
    color: var(--ioha-gold);
    font: 800 var(--fs-xs)/1 var(--font-body);
    letter-spacing: .04em;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-1) var(--ease-out);
}

.shell-premium[b-dhe840wkbe]::before {
    content: "";
    position: absolute;
    inset: 6px 0;
    z-index: -1;
    border-radius: var(--r-pill);
    background: var(--ioha-gold-soft);
    box-shadow: inset 0 0 0 1px rgb(242 193 78 / .38);
    transition: background-color var(--dur-2);
}

.shell-premium svg[b-dhe840wkbe] {
    width: 15px;
    height: 15px;
}

.shell-premium:active[b-dhe840wkbe] { transform: scale(.95); }

/* The keyboard ring goes round the gold pill, as it did before the link grew to 44px:
   on the link itself it was a square box reaching the edges of the bar. */
.shell-premium:focus-visible[b-dhe840wkbe] { outline: none; }
.shell-premium:focus-visible[b-dhe840wkbe]::before {
    outline: 2px solid var(--ioha-focus);
    outline-offset: 2px;
}

/* Notifications bell, signed-in only. Red count badge when anything is unread. */
.shell-bell[b-dhe840wkbe] {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--ioha-tap);
    height: var(--ioha-tap);
    border-radius: 50%;
    color: var(--ioha-bone-dim);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-2), background-color var(--dur-2), transform var(--dur-1) var(--ease-out);
}

.shell-bell svg[b-dhe840wkbe] { width: 22px; height: 22px; }
.shell-bell.has-unread[b-dhe840wkbe] { color: var(--ioha-bone); }
.shell-bell:active[b-dhe840wkbe] { transform: scale(.92); }

.shell-bell-dot[b-dhe840wkbe] {
    position: absolute;
    top: 6px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--ioha-red-strong);
    color: #fff;
    font: 800 var(--fs-xs)/18px var(--font-body);
    text-align: center;
    box-shadow: 0 0 0 2px var(--ioha-ink);
}

@media (hover: hover) and (pointer: fine) {
    .shell-text-link:hover[b-dhe840wkbe],
    .shell-bell:hover[b-dhe840wkbe] { color: var(--ioha-bone); background: var(--ioha-surface-1); }
    .shell-premium:hover[b-dhe840wkbe]::before { background: rgb(242 193 78 / .2); }
}

/* --- Page ------------------------------------------------------------------ */

/* Pages fill this with height: 100% and lay themselves out to fit. It scrolls
   rather than clips so that a page which cannot fit (a 320x568 phone, an Android
   with its nav bar showing) can say min-height: 100% instead and grow: a puzzle
   whose last answer is a scroll away is playable, one whose last answer is cut off
   by the tab bar is not. A page that fits never scrolls. */
.game-main[b-dhe840wkbe] {
    grid-area: main;
    position: relative;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* --- Tab bar ----------------------------------------------------------------
   A floating glass capsule over the bottom edge, in the thumb zone. It sits in its
   own row (not over the page), so no page has to know how tall it is; the strip of
   ink around it is the row's padding. */

.shell-tabbar-wrap[b-dhe840wkbe] {
    grid-area: tabs;
    position: relative;
    z-index: 30;
    padding: 6px 12px max(10px, calc(env(safe-area-inset-bottom, 0px) - 8px));
    background: var(--ioha-ink);
}

/* A soft fade where scrolling content meets the bar, so the page does not end in a
   hard cut. */
.shell-tabbar-wrap[b-dhe840wkbe]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 14px;
    background: linear-gradient(to bottom, transparent, var(--ioha-ink));
    pointer-events: none;
}

.shell-tabbar[b-dhe840wkbe] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 460px;
    height: var(--ioha-tabbar-h);
    margin: 0 auto;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--ioha-glass);
    box-shadow:
        inset 0 0 0 1px var(--ioha-glass-line),
        inset 0 1px 0 rgb(255 255 255 / .06),
        0 10px 30px rgb(0 0 0 / .45);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
}

.shell-tab[b-dhe840wkbe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: var(--ioha-tap);
    min-height: var(--ioha-tap);
    color: var(--ioha-muted);
    font: 700 var(--fs-xs)/1 var(--font-body);
    letter-spacing: .01em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: color var(--dur-2) ease;
}

.shell-tab-icon[b-dhe840wkbe] {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 30px;
    border-radius: var(--r-pill);
    transition: transform var(--dur-1) var(--ease-out);
}

/* The active pill grows out from under the icon with a little overshoot. */
.shell-tab-icon[b-dhe840wkbe]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--ioha-red-soft);
    opacity: 0;
    transform: scale(.4);
    transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) ease;
}

.shell-tab-icon svg[b-dhe840wkbe] {
    position: relative;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shell-tab-icon svg .fillable[b-dhe840wkbe] {
    fill: transparent;
    transition: fill var(--dur-2) ease;
}

.shell-tab:active .shell-tab-icon[b-dhe840wkbe] { transform: scale(.9); }

.shell-tab.is-active[b-dhe840wkbe] { color: var(--ioha-bone); }
.shell-tab.is-active .shell-tab-icon[b-dhe840wkbe] { color: var(--ioha-red-bright); }
.shell-tab.is-active .shell-tab-icon[b-dhe840wkbe]::before { opacity: 1; transform: scale(1); }
.shell-tab.is-active .shell-tab-icon svg .fillable[b-dhe840wkbe] { fill: rgb(255 106 90 / .28); }

@media (hover: hover) and (pointer: fine) {
    .shell-tab:hover[b-dhe840wkbe] { color: var(--ioha-bone); }
}

.shell-avatar[b-dhe840wkbe] {
    position: relative;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ioha-surface-3);
    color: var(--ioha-bone);
    font: 800 var(--fs-xs)/1 var(--font-body);
    box-shadow: 0 0 0 1.5px currentColor;
}

.shell-tab.is-active .shell-avatar[b-dhe840wkbe] {
    background: var(--ioha-red-strong);
    color: #fff;
    box-shadow: 0 0 0 1.5px var(--ioha-red-bright);
}

/* --- Small phones ---------------------------------------------------------- */

@media (max-width: 359px) {
    .shell-wordmark-sub[b-dhe840wkbe] { display: none; }
    .shell-premium span[b-dhe840wkbe] { display: none; }
    .shell-premium[b-dhe840wkbe] {
        justify-content: center;
        width: var(--ioha-tap);
        margin: 0;
        padding: 0;
    }
    .shell-premium[b-dhe840wkbe]::before { inset: 6px 4px; }
}

/* --- Short screens ----------------------------------------------------------
   iPhone SE, small Androids, and any phone browser once its toolbars take their
   share. The daily puzzle needs about 545px under the top bar for the model at its
   smallest plus all four answers. The floating bar with its strip of ink costs
   76px and left 512px at 360x640, which hid answer D under the bar.

   Here the chrome drops to the sizes iOS uses itself: a 44px top bar (the height
   comes from --ioha-topbar-h, which app.css lowers in the same query) and a flush
   48px bar with 10px labels under the icons. 92px of chrome in place of 128. The
   fade goes too: it lay over the last 14px of the page, which on these screens is
   the bottom of an answer. */
@media (max-width: 899px) and (max-height: 740px) {
    .shell-tabbar-wrap[b-dhe840wkbe] {
        padding: 0 0 env(safe-area-inset-bottom, 0px);
        box-shadow: inset 0 1px 0 rgb(255 255 255 / .05);
    }

    .shell-tabbar-wrap[b-dhe840wkbe]::before { display: none; }

    .shell-tabbar[b-dhe840wkbe] {
        height: var(--ioha-tabbar-h);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .shell-tab[b-dhe840wkbe] {
        gap: 2px;
        font-size: 10px;
    }

    .shell-tab-icon[b-dhe840wkbe] {
        width: 50px;
        height: 26px;
    }

    .shell-tab-icon svg[b-dhe840wkbe] { width: 22px; height: 22px; }
    .shell-avatar[b-dhe840wkbe] { width: 22px; height: 22px; font-size: 11px; }
}

/* --- Wide windows (web on a desk) -------------------------------------------
   The tabs move into the middle of the top bar as a row of pills; a bottom bar on
   a 1400px screen is a phone pattern stretched past its point. */

@media (min-width: 900px) {
    .shell-top[b-dhe840wkbe] { padding-left: var(--s-6); padding-right: var(--s-4); }

    .shell-tabbar-wrap[b-dhe840wkbe] {
        grid-area: top;
        align-self: end;
        justify-self: center;
        height: var(--ioha-topbar-h);
        padding: 0;
        background: transparent;
        z-index: 31;
        display: flex;
        align-items: center;
    }

    .shell-tabbar-wrap[b-dhe840wkbe]::before { display: none; }

    .shell-tabbar[b-dhe840wkbe] {
        display: flex;
        gap: 4px;
        height: auto;
        padding: 0;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .shell-tab[b-dhe840wkbe] {
        flex-direction: row;
        gap: 8px;
        height: 40px;
        min-height: 40px;
        padding: 0 16px 0 12px;
        border-radius: var(--r-pill);
        font-size: var(--fs-sm);
        transition: color var(--dur-2) ease, background-color var(--dur-2) ease;
    }

    .shell-tab-icon[b-dhe840wkbe] { width: auto; height: auto; }
    .shell-tab-icon[b-dhe840wkbe]::before { display: none; }
    .shell-tab-icon svg[b-dhe840wkbe] { width: 20px; height: 20px; }
    .shell-avatar[b-dhe840wkbe] { width: 22px; height: 22px; }

    .shell-tab.is-active[b-dhe840wkbe] { background: var(--ioha-surface-2); }
}
/* _content/InstituteOfHumanAnatomy.Shared/Layout/MainLayout.razor.rz.scp.css */
/* Ink to the edges, including behind the iOS status bar and home indicator.
   The safe-area insets themselves are applied by AdminShell, which knows where
   its sticky header sits. */
.admin-layout[b-x0m8vh9g0a] {
    display: flow-root;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--ioha-ink, #0b0b0d);
    color: var(--ioha-bone, #f2efec);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}
/* _content/InstituteOfHumanAnatomy.Shared/Pages/Daily.razor.rz.scp.css */
/* The daily game. Tokens and base components come from app.css (:root); nothing
   here redefines a colour the design system already names. */

/* The page grows instead of clipping: the shell's main area scrolls, so on a phone
   too short for the puzzle (320x568, an Android with its nav bar showing) answer D is
   a scroll away rather than cut off, and after the answer the reveal simply continues
   down the page under a stage that stays big. The bottom safe area belongs to the tab
   bar, not to this padding. */
.daily-page[b-x1fvhj7jkz] {
    min-height: 100%;
    display: flex;
    justify-content: center;
    padding: var(--s-3) var(--s-4) var(--s-5);
    background: var(--ioha-ink);
    color: var(--ioha-bone);
    font-family: var(--font-body);
}

/* A column, so while guessing the stage can take whatever height the fixed pieces
   leave and the puzzle fits one screen on most phones. */
.daily-shell[b-x1fvhj7jkz] {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

/* --- Loading skeleton -------------------------------------------------------- */

.daily-skel[b-x1fvhj7jkz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.sk-strip[b-x1fvhj7jkz],
.sk-options[b-x1fvhj7jkz] {
    display: flex;
    gap: 6px;
}

.sk-strip span[b-x1fvhj7jkz] {
    flex: 1;
    height: 52px;
}

.sk-stage[b-x1fvhj7jkz] {
    flex: 1 1 0;
    min-height: 200px;
    border-radius: var(--r-xl);
}

.sk-kicker[b-x1fvhj7jkz] { width: 42%; height: 12px; margin-top: var(--s-1); border-radius: var(--r-pill); }
.sk-title[b-x1fvhj7jkz] { width: 64%; height: 30px; border-radius: var(--r-sm); }

.sk-options[b-x1fvhj7jkz] {
    flex-direction: column;
    gap: var(--s-2);
}

.sk-options span[b-x1fvhj7jkz] {
    height: 54px;
    border-radius: var(--r-lg);
}

/* --- Error and archive states ------------------------------------------------ */

.daily-error[b-x1fvhj7jkz],
.daily-archive[b-x1fvhj7jkz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-6) 0;
    padding: var(--s-7) var(--s-5) var(--s-6);
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-xl);
    background:
        radial-gradient(120% 70% at 50% 0%, rgb(224 57 43 / .12), transparent 70%),
        var(--ioha-surface-1);
    text-align: center;
}

.daily-error-icon[b-x1fvhj7jkz] {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ioha-red-soft);
    color: var(--ioha-red-bright);
}

.daily-error-icon svg[b-x1fvhj7jkz] {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.daily-error-title[b-x1fvhj7jkz],
.daily-archive-title[b-x1fvhj7jkz] {
    margin: 0;
    color: var(--ioha-bone);
    font: 900 var(--fs-2xl)/1.1 var(--font-display);
    letter-spacing: -.02em;
}

.daily-error-body[b-x1fvhj7jkz],
.daily-archive-body[b-x1fvhj7jkz] {
    max-width: 34ch;
    margin: 0 0 var(--s-2);
    color: var(--ioha-bone-dim);
    font: 500 var(--fs-md)/1.5 var(--font-body);
}

/* A little stack of past puzzle cards, the newest on top carrying the number. */
.daily-archive-art[b-x1fvhj7jkz] {
    position: relative;
    width: 108px;
    height: 120px;
    margin-bottom: var(--s-2);
}

.daily-archive-art span[b-x1fvhj7jkz] {
    position: absolute;
    inset: 0;
    border-radius: var(--r-lg);
    border: 1px solid var(--ioha-line-strong);
    background: var(--ioha-surface-2);
}

.daily-archive-art span:nth-child(1)[b-x1fvhj7jkz] { transform: rotate(-9deg) translate(-10px, 4px); opacity: .55; }
.daily-archive-art span:nth-child(2)[b-x1fvhj7jkz] { transform: rotate(6deg) translate(8px, 2px); opacity: .8; }
.daily-archive-art span:nth-child(3)[b-x1fvhj7jkz] {
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, var(--ioha-red), var(--ioha-red-press));
    border-color: transparent;
    color: #fff;
    font: 900 32px/1 var(--font-display);
    box-shadow: var(--shadow-2);
}

/* A quiet link under the main button, padded out to a 44px target. */
.daily-archive-teaser[b-x1fvhj7jkz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 44px;
    margin: var(--s-1) 0 0;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    color: var(--ioha-bone-dim);
    font: 600 var(--fs-sm)/1.4 var(--font-body);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-2) ease;
}

.daily-archive-teaser:active[b-x1fvhj7jkz] { background: var(--ioha-surface-2); }

@media (hover: hover) and (pointer: fine) {
    .daily-archive-teaser:hover[b-x1fvhj7jkz] { background: var(--ioha-surface-2); color: var(--ioha-bone); }
}

/* --- 3D stage ---------------------------------------------------------------- */

/* While guessing the stage absorbs the leftover height (flex-basis 0 keeps the
   canvas out of the sizing sum: sized on content it would grow to the model's
   bounds and push the answers off screen). */
.daily-stage-wrap[b-x1fvhj7jkz] {
    position: relative;
    flex: 1 1 0;
    min-height: 210px;
    display: flex;
}

/* After the answer it gets a fixed, generous share of the screen instead: the
   structure is the payoff, so it must not shrink to make room for the reveal (it
   used to collapse to ~160px with the verdict and controls covering it). The
   reveal continues below it and the page scrolls. A little under half the screen:
   at 52% the structure sat small in a mostly empty stage and pushed the verdict
   and the answer's name down to the tab bar. */
.daily-page.is-revealed .daily-stage-wrap[b-x1fvhj7jkz] {
    flex: 0 0 auto;
    height: clamp(250px, 44vh, 440px);
    height: clamp(250px, 44dvh, 440px);
}

.daily-stage[b-x1fvhj7jkz] {
    position: relative;
    flex: 1;
    min-width: 0;
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: #151318;
    /* Drags belong to the model. Without this the WebView can claim the gesture as a
       page pan and the body just judders instead of turning. */
    touch-action: none;
    container-type: size;
    transition: border-color var(--dur-3) ease, box-shadow var(--dur-3) ease;
}

/* Once the answer is in, the page scrolls (the reveal continues below a stage that
   is half the screen), so a vertical swipe that starts on the model has to scroll
   the page rather than tilt the model -- otherwise half the screen is a scroll trap.
   Sideways drags still turn it and pinches still zoom it. All three layers need it:
   the browser only allows a pan that every element under the finger allows, and
   three.js's OrbitControls writes touch-action: none onto its canvas inline. */
.daily-page.is-revealed .daily-stage[b-x1fvhj7jkz],
.daily-page.is-revealed .daily-stage[b-x1fvhj7jkz]  .av-root {
    touch-action: pan-y;
}

.daily-page.is-revealed .daily-stage[b-x1fvhj7jkz]  canvas {
    touch-action: pan-y !important;
}

/* Filled to the stage with absolute insets rather than height: 100%, which needs a
   definite height all the way up -- and the page is min-height, not height, now. */
.daily-stage[b-x1fvhj7jkz]  .av-root {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
}

/* A soft red floor-glow under the specimen, and a lit rim on the answer beat. */
.daily-stage[b-x1fvhj7jkz]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(90% 40% at 50% 112%, rgb(224 57 43 / .16), transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.daily-stage.is-flash-correct[b-x1fvhj7jkz] {
    border-color: rgb(63 208 127 / .7);
    box-shadow: 0 0 0 3px rgb(63 208 127 / .18), 0 10px 40px rgb(63 208 127 / .12);
}

.daily-stage.is-flash-wrong[b-x1fvhj7jkz] {
    border-color: rgb(255 106 90 / .6);
    box-shadow: 0 0 0 3px rgb(224 57 43 / .16);
}

.daily-page.is-revealed .daily-stage[b-x1fvhj7jkz] {
    border-color: var(--ioha-line-strong);
}

/* Glass controls over the stage, each one a full 44px target. The hint pill and the
   recentre button are 44px buttons that draw their 40px glass face 2px inside
   (::before), and the view buttons reach out over their bar's padding with a clear
   border: the controls look exactly as they did, and the button itself is the
   target, not a pseudo-element hung off it. */
.daily-hint[b-x1fvhj7jkz],
.daily-recenter[b-x1fvhj7jkz],
.daily-views[b-x1fvhj7jkz] {
    position: absolute;
    z-index: 20;
    color: var(--ioha-bone-dim);
}

.daily-views[b-x1fvhj7jkz],
.daily-hint[b-x1fvhj7jkz]::before,
.daily-recenter[b-x1fvhj7jkz]::before {
    border: 1px solid rgb(255 255 255 / .12);
    background: rgb(21 19 24 / .72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* The face, under the icon and label (the button's z-index makes it their layer). */
.daily-hint[b-x1fvhj7jkz]::before,
.daily-recenter[b-x1fvhj7jkz]::before {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: inherit;
    transition: border-color var(--dur-2), background-color var(--dur-2);
}

.daily-hint[b-x1fvhj7jkz] {
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    /* The face's 11px and 14px, plus its border and the 2px around it. */
    padding: 0 17px 0 14px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    font: 800 var(--fs-xs)/1 var(--font-body);
    letter-spacing: .04em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-2), transform var(--dur-1) var(--ease-out);
}

.daily-hint svg[b-x1fvhj7jkz] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--ioha-gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.daily-hint.is-on[b-x1fvhj7jkz] {
    color: #fff;
}

.daily-hint.is-on[b-x1fvhj7jkz]::before {
    border-color: rgb(242 193 78 / .6);
    background: rgb(242 193 78 / .2);
}

/* Coach-marked: a ring that pulses until the tip moves on. */
.daily-hint.is-coached[b-x1fvhj7jkz]::before {
    box-shadow: 0 0 0 0 rgb(242 239 236 / .6);
    animation: daily-ring-b-x1fvhj7jkz 1.4s ease-out infinite;
}

.daily-recenter[b-x1fvhj7jkz] {
    top: 56px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-2), transform var(--dur-1) var(--ease-out);
}

.daily-recenter svg[b-x1fvhj7jkz] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.daily-hint:active:not(:disabled)[b-x1fvhj7jkz],
.daily-recenter:active:not(:disabled)[b-x1fvhj7jkz] { transform: scale(.93); }

.daily-hint:disabled[b-x1fvhj7jkz],
.daily-recenter:disabled[b-x1fvhj7jkz] { opacity: .45; cursor: default; }

.daily-views[b-x1fvhj7jkz] {
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    padding: 2px;
    border-radius: var(--r-pill);
}

/* 44px tall over the bar's 2px padding; the clear top and bottom border keeps the
   pressed and hover fill at the 40px it always was. */
.daily-views button[b-x1fvhj7jkz] {
    min-width: 62px;
    height: 44px;
    margin: -2px 0;
    padding: 0 12px;
    border: solid transparent;
    border-width: 2px 0;
    border-radius: var(--r-pill);
    background: transparent;
    background-clip: padding-box;
    color: inherit;
    font: 800 var(--fs-xs)/1 var(--font-body);
    letter-spacing: .04em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-2), color var(--dur-2);
}

.daily-views button:active:not(:disabled)[b-x1fvhj7jkz] { background-color: rgb(224 57 43 / .3); color: #fff; }
.daily-views button:disabled[b-x1fvhj7jkz] { opacity: .45; cursor: default; }

/* The keyboard ring follows what is drawn, not the 44px box around it: 2px out from
   the hint and recentre faces as before, and on the view buttons tight to the fill,
   inside the bar. */
.daily-hint:focus-visible[b-x1fvhj7jkz],
.daily-recenter:focus-visible[b-x1fvhj7jkz] { outline-offset: 0; }
.daily-views button:focus-visible[b-x1fvhj7jkz] { outline-offset: -2px; }

@media (hover: hover) and (pointer: fine) {
    .daily-hint:hover:not(:disabled)[b-x1fvhj7jkz],
    .daily-recenter:hover:not(:disabled)[b-x1fvhj7jkz] { color: #fff; }
    .daily-hint:hover:not(:disabled)[b-x1fvhj7jkz]::before,
    .daily-recenter:hover:not(:disabled)[b-x1fvhj7jkz]::before { border-color: rgb(255 255 255 / .28); }
    .daily-views button:hover:not(:disabled)[b-x1fvhj7jkz] { color: #fff; background-color: rgb(255 255 255 / .08); }
}

/* A small stage (a short phone while guessing) keeps only the hint: three rows of
   controls on 160px would cover the structure they are there to help with. "Small"
   starts at the guessing stage's 210px floor (208px inside its border), where a phone
   too short for the puzzle leaves it. It used to start at 220px, which also caught a
   stage just above the floor: on a Pixel, the 40px "Repair streak" row over the strip
   takes the stage from 255px to 215px, and Today lost Front/Side/Back and Recentre
   until the answer whenever the streak had a gap.
   The answer's stage keeps the 220px line. Under about 550px of window (an iPhone SE's
   Safari with its bars, split screen) it sits at its own 220px floor (218px inside),
   and there the bare stage gives the answer the room: with the bar and its inset the
   structure had about 144px. The viewer keeps its bottom inset by the same lines
   (applyStageInset in ioha-viewer.js reads --av-small-stage). */
.daily-page[b-x1fvhj7jkz] { --av-small-stage: 212px; }
.daily-page.is-revealed[b-x1fvhj7jkz] { --av-small-stage: 219px; }

@container (max-height: 212px) {
    .daily-views[b-x1fvhj7jkz],
    .daily-recenter[b-x1fvhj7jkz] { display: none; }

    /* The viewer's "Drag to turn" tip sits 64px up, clear of the view bar. With no
       view bar that is the middle of a short stage, right over the structure, so it
       drops to the bottom edge the bar has left free. */
    .daily-stage[b-x1fvhj7jkz]  .av-canvas .av-hint {
        bottom: 8px;
        padding: 6px 12px;
        font-size: 9px;
    }
}

@container (max-height: 219px) {
    .daily-page.is-revealed .daily-views[b-x1fvhj7jkz],
    .daily-page.is-revealed .daily-recenter[b-x1fvhj7jkz] { display: none; }

    .daily-page.is-revealed .daily-stage[b-x1fvhj7jkz]  .av-canvas .av-hint {
        bottom: 8px;
        padding: 6px 12px;
        font-size: 9px;
    }
}

/* --- Coach marks (positioned here, drawn by CoachMark) ------------------------
   Centred with auto margins, not a transform: the bubble's entrance animation owns
   transform, and a translate here would jump sideways when it ended.

   All three sit on the stage, and each one stays clear of three things:
   - an answer: the game takes one guess a day, and a tap on a bubble's Next that
     lands on the option underneath is a day answered by accident;
   - the question ("What is this?" and its kicker), which they used to half cover,
     with the clipped words showing at the bubble's edges;
   - the control a tip is about: the first one, anchored at the foot of a short
     stage, grew up over the "Show in body" pill.
   The stage holds them; while one is up it is never shorter than they need (see
   .is-coaching), so a bubble never has to spill out of it. */
.daily-stage-wrap[b-x1fvhj7jkz] {
    container: daily-stage-wrap / size;
}

/* A short screen lets the stage go down to 128px (see the end of this file), less
   than a tip under the hint pill needs; while one is up it keeps 200px. */
@media (max-height: 700px) {
    .daily-stage-wrap.is-coaching[b-x1fvhj7jkz] {
        min-height: 200px;
    }
}

/* The stage's own "Drag to turn" pill says what the first tip says, and under the
   bubbles only its edges peeked out. Back once the tips are done (until the first drag). */
.daily-stage-wrap.is-coaching[b-x1fvhj7jkz]  .av-hint {
    visibility: hidden;
}

/* Step 1: at the foot of the stage, pointing up at the structure. */
.daily-stage-wrap[b-x1fvhj7jkz]  .daily-coach-stage {
    bottom: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

/* Step 2: under the hint pill, pointing up at it. */
.daily-stage-wrap[b-x1fvhj7jkz]  .daily-coach-hint {
    top: 56px;
    right: 6px;
}

/* Step 3: at the foot of the stage, pointing down at the answers below it. */
.daily-stage-wrap[b-x1fvhj7jkz]  .daily-coach-options {
    bottom: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

/* A stage too short for a bubble at its natural width, which is most phones: the
   bubble takes the stage's full width, where its copy runs a line or two shorter,
   and tightens up, so each one fits between the hint pill's row and the foot of the
   stage. The type matches CoachMark's own short-screen sizes; the bottom padding
   does not (that one keeps a bubble off the answers, and these sit on the stage), so
   Next keeps the same air under it as above the step line. */
@container daily-stage-wrap (max-height: 279px) {
    .daily-stage-wrap[b-x1fvhj7jkz]  .daily-coach-stage,
    .daily-stage-wrap[b-x1fvhj7jkz]  .daily-coach-hint,
    .daily-stage-wrap[b-x1fvhj7jkz]  .daily-coach-options {
        left: 8px;
        right: 8px;
        width: auto;
        margin: 0;
        padding: 10px 12px 10px 14px;
    }

    .daily-stage-wrap[b-x1fvhj7jkz]  .daily-coach-stage,
    .daily-stage-wrap[b-x1fvhj7jkz]  .daily-coach-options {
        bottom: 8px;
    }

    .daily-stage-wrap[b-x1fvhj7jkz]  .cm-step { font-size: 10px; }
    .daily-stage-wrap[b-x1fvhj7jkz]  .cm-title { margin-top: 4px; font-size: var(--fs-md); }
    .daily-stage-wrap[b-x1fvhj7jkz]  .cm-body { font-size: 13px; line-height: 1.35; }
    .daily-stage-wrap[b-x1fvhj7jkz]  .cm-actions { margin-top: 2px; }
}

/* The same for a WebView without container queries (iOS 15, which the app still
   supports): the screen's height stands in for the stage's. A phone under 920px tall
   has a stage under 280px while guessing; on a taller screen the full-width bubble is
   only wider than it needs to be. */
@supports not (container-type: size) {
    @media (max-height: 919px) {
        .daily-stage-wrap[b-x1fvhj7jkz]  .daily-coach-stage,
        .daily-stage-wrap[b-x1fvhj7jkz]  .daily-coach-hint,
        .daily-stage-wrap[b-x1fvhj7jkz]  .daily-coach-options {
            left: 8px;
            right: 8px;
            width: auto;
            margin: 0;
            padding: 10px 12px 10px 14px;
        }

        .daily-stage-wrap[b-x1fvhj7jkz]  .daily-coach-stage,
        .daily-stage-wrap[b-x1fvhj7jkz]  .daily-coach-options {
            bottom: 8px;
        }

        .daily-stage-wrap[b-x1fvhj7jkz]  .cm-step { font-size: 10px; }
        .daily-stage-wrap[b-x1fvhj7jkz]  .cm-title { margin-top: 4px; font-size: var(--fs-md); }
        .daily-stage-wrap[b-x1fvhj7jkz]  .cm-body { font-size: 13px; line-height: 1.35; }
        .daily-stage-wrap[b-x1fvhj7jkz]  .cm-actions { margin-top: 2px; }
    }
}

/* --- The question ------------------------------------------------------------ */

.daily-prompt[b-x1fvhj7jkz] {
    flex-shrink: 0;
    margin-top: var(--s-1);
}

.daily-kicker[b-x1fvhj7jkz] {
    margin-bottom: 6px;
}

.daily-question[b-x1fvhj7jkz] {
    margin: 0;
    color: var(--ioha-bone);
    font: 900 var(--fs-2xl)/1.05 var(--font-display);
    letter-spacing: -.02em;
}

/* One line, always there, so the layout never jumps when loading finishes. */
.daily-sub[b-x1fvhj7jkz] {
    display: flex;
    align-items: center;
    min-height: 22px;
    margin: 6px 0 0;
    color: var(--ioha-muted);
    font: 600 var(--fs-sm)/1.4 var(--font-body);
}

.daily-sub-loading[b-x1fvhj7jkz] {
    color: var(--ioha-bone-dim);
}

.daily-sub-repair[b-x1fvhj7jkz] {
    color: var(--ioha-red-bright);
    font-weight: 800;
}

/* --- Answers ------------------------------------------------------------------ */

.daily-options[b-x1fvhj7jkz] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    flex-shrink: 0;
}

.daily-option[b-x1fvhj7jkz] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: 54px;
    padding: 8px 14px 8px 10px;
    border: 1px solid var(--ioha-line-strong);
    border-radius: var(--r-lg);
    background: var(--ioha-surface-1);
    box-shadow: 0 3px 0 rgb(0 0 0 / .45);
    color: var(--ioha-bone);
    font: 700 var(--fs-md)/1.25 var(--font-body);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        transform var(--dur-1) var(--ease-out),
        box-shadow var(--dur-1) var(--ease-out),
        border-color var(--dur-2) ease,
        background-color var(--dur-2) ease,
        opacity var(--dur-3) ease;
}

/* The press: pushed down onto its lip, like the buttons. */
.daily-option:active:not(:disabled)[b-x1fvhj7jkz] {
    transform: translateY(2px) scale(.98);
    box-shadow: 0 1px 0 rgb(0 0 0 / .45);
}

/* Waiting for the model: visible, readable, not yet tappable. */
.daily-option:disabled[b-x1fvhj7jkz] {
    cursor: default;
    opacity: .55;
    box-shadow: none;
}

.daily-option-key[b-x1fvhj7jkz] {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--ioha-red-soft);
    box-shadow: inset 0 0 0 1px rgb(224 57 43 / .4);
    color: var(--ioha-red-bright);
    font: 900 var(--fs-sm)/1 var(--font-display);
    transition: background-color var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}

.daily-option-key svg[b-x1fvhj7jkz] {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The tick and the cross draw themselves in. */
.daily-option-key svg path[b-x1fvhj7jkz] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: daily-draw-b-x1fvhj7jkz 300ms var(--ease-out) 90ms forwards;
}

.daily-option-text[b-x1fvhj7jkz] {
    flex: 1;
    min-width: 0;
}

.daily-options.is-locked .daily-option[b-x1fvhj7jkz] { cursor: default; }

/* Right: green fill and a spring pop. */
.daily-option.is-correct[b-x1fvhj7jkz] {
    border-color: var(--ioha-success);
    background: linear-gradient(180deg, rgb(63 208 127 / .24), rgb(63 208 127 / .12));
    box-shadow: 0 3px 0 rgb(18 110 60 / .9), 0 8px 26px rgb(63 208 127 / .18);
}

.daily-option.is-correct .daily-option-key[b-x1fvhj7jkz] {
    background: var(--ioha-success);
    box-shadow: none;
    color: #062a14;
}

.daily-option.is-picked.is-correct[b-x1fvhj7jkz] {
    animation: daily-pop-b-x1fvhj7jkz 420ms var(--ease-spring);
}

/* The right answer, when it was not the pick, lights a beat after the shake. */
.daily-option.is-shown[b-x1fvhj7jkz] {
    animation: daily-pop-b-x1fvhj7jkz 420ms var(--ease-spring) 260ms backwards;
}

/* Wrong: red, and a shake. */
.daily-option.is-wrong[b-x1fvhj7jkz] {
    border-color: var(--ioha-red-bright);
    background: linear-gradient(180deg, rgb(224 57 43 / .26), rgb(224 57 43 / .12));
    box-shadow: 0 3px 0 rgb(120 24 14 / .9);
    animation: daily-shake-b-x1fvhj7jkz 420ms cubic-bezier(.36, .07, .19, .97);
}

.daily-option.is-wrong .daily-option-key[b-x1fvhj7jkz] {
    background: var(--ioha-red-strong);
    box-shadow: none;
    color: #fff;
}

/* The two that are neither: step back. */
.daily-option.is-dim[b-x1fvhj7jkz] {
    opacity: .38;
    transform: scale(.985);
    box-shadow: none;
}

.daily-footnote[b-x1fvhj7jkz] {
    margin: 0;
    flex-shrink: 0;
    color: var(--ioha-subtle);
    font: 700 var(--fs-xs)/1.3 var(--font-body);
    letter-spacing: .04em;
    text-align: center;
}

@media (hover: hover) and (pointer: fine) {
    .daily-option:hover:not(:disabled):not(.is-correct):not(.is-wrong):not(.is-dim)[b-x1fvhj7jkz] {
        border-color: var(--ioha-red);
        background: var(--ioha-surface-2);
    }
}

/* --- The reveal ------------------------------------------------------------- */

.daily-reveal[b-x1fvhj7jkz] {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    --stagger-step: 55ms;
}

/* The verdict, out of the stage and into the flow, so it never covers the model. */
.daily-verdict[b-x1fvhj7jkz] {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
    border-radius: var(--r-lg);
    border: 1px solid;
}

.daily-verdict.is-correct[b-x1fvhj7jkz] {
    border-color: rgb(63 208 127 / .45);
    background: linear-gradient(100deg, rgb(63 208 127 / .2), rgb(63 208 127 / .06));
}

.daily-verdict.is-wrong[b-x1fvhj7jkz] {
    border-color: rgb(255 106 90 / .4);
    background: linear-gradient(100deg, rgb(224 57 43 / .2), rgb(224 57 43 / .05));
}

.daily-verdict-icon[b-x1fvhj7jkz] {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    animation: ioha-pop var(--dur-4) var(--ease-spring) 120ms backwards;
}

.daily-verdict.is-correct .daily-verdict-icon[b-x1fvhj7jkz] { background: var(--ioha-success); color: #062a14; }
.daily-verdict.is-wrong .daily-verdict-icon[b-x1fvhj7jkz] { background: var(--ioha-red-strong); color: #fff; }

.daily-verdict-icon svg[b-x1fvhj7jkz] {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.daily-verdict-icon svg path[b-x1fvhj7jkz] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: daily-draw-b-x1fvhj7jkz 320ms var(--ease-out) 360ms forwards;
}

.daily-verdict-text[b-x1fvhj7jkz] {
    min-width: 0;
}

.daily-verdict-title[b-x1fvhj7jkz] {
    margin: 0;
    color: var(--ioha-bone);
    font: 900 var(--fs-xl)/1.1 var(--font-display);
    letter-spacing: -.01em;
}

.daily-verdict-sub[b-x1fvhj7jkz] {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin: 3px 0 0;
    color: var(--ioha-bone-dim);
    font: 700 var(--fs-sm)/1.3 var(--font-body);
}

.daily-verdict-sub[b-x1fvhj7jkz]  .daily-verdict-flame {
    flex: none;
    margin-top: 1px;
    font-size: 16px;
}

.daily-answer-name[b-x1fvhj7jkz] {
    margin: 6px 0 0;
    color: var(--ioha-bone);
    font: 900 clamp(30px, 9vw, 40px)/1.02 var(--font-display);
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

/* Focused by the page after an answer so screen readers land on it; a ring only
   for keyboard users, who need to see where they are. */
.daily-answer-name:focus[b-x1fvhj7jkz] { outline: none; }

.daily-answer-name:focus-visible[b-x1fvhj7jkz] {
    outline: 2px solid var(--ioha-focus, var(--ioha-red-bright));
    outline-offset: 4px;
    border-radius: var(--r-sm);
}

.daily-answer-meta[b-x1fvhj7jkz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: var(--s-3);
}

.daily-picked[b-x1fvhj7jkz] {
    color: var(--ioha-muted);
    font: 600 var(--fs-sm)/1.3 var(--font-body);
}

.daily-picked b[b-x1fvhj7jkz] {
    color: var(--ioha-bone-dim);
    font-weight: 800;
    text-decoration: line-through;
    text-decoration-color: rgb(255 106 90 / .7);
    text-decoration-thickness: 2px;
}

/* --- Next steps: share, then study ----------------------------------------- */

.daily-actions[b-x1fvhj7jkz] {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.daily-actions[b-x1fvhj7jkz]  .daily-share {
    width: 100%;
    min-height: 52px;
    font-size: var(--fs-md);
}

.daily-study[b-x1fvhj7jkz] {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 64px;
    padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
    border: 1px solid var(--ioha-line-strong);
    border-radius: var(--r-lg);
    background: var(--ioha-surface-1);
    color: var(--ioha-bone);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2) ease, background-color var(--dur-2) ease;
}

.daily-study:active[b-x1fvhj7jkz] { transform: scale(.98); }

.daily-study-icon[b-x1fvhj7jkz] {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    background: var(--ioha-red-soft);
    color: var(--ioha-red-bright);
}

.daily-study-icon svg[b-x1fvhj7jkz] {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.daily-study-text[b-x1fvhj7jkz] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.daily-study-title[b-x1fvhj7jkz] {
    font: 800 var(--fs-md)/1.25 var(--font-body);
}

.daily-study-sub[b-x1fvhj7jkz] {
    color: var(--ioha-muted);
    font: 600 var(--fs-sm)/1.3 var(--font-body);
}

.daily-chev[b-x1fvhj7jkz] {
    flex: none;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--ioha-muted);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Reminder ask ------------------------------------------------------------- */

.daily-remind[b-x1fvhj7jkz] {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-4);
    border: 1px solid rgb(242 193 78 / .35);
    border-radius: var(--r-lg);
    background: linear-gradient(140deg, rgb(242 193 78 / .12), rgb(242 193 78 / .03));
}

.daily-remind-icon[b-x1fvhj7jkz] {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ioha-gold-soft);
    color: var(--ioha-gold);
}

.daily-remind-icon svg[b-x1fvhj7jkz] {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.daily-remind-text[b-x1fvhj7jkz] { min-width: 0; }

.daily-remind-title[b-x1fvhj7jkz] {
    margin: 0;
    color: var(--ioha-bone);
    font: 800 var(--fs-md)/1.3 var(--font-body);
}

.daily-remind-body[b-x1fvhj7jkz] {
    margin: 4px 0 var(--s-3);
    color: var(--ioha-bone-dim);
    font: 500 var(--fs-sm)/1.45 var(--font-body);
}

.daily-remind-actions[b-x1fvhj7jkz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

/* --- Stats bento --------------------------------------------------------------- */

.daily-bento[b-x1fvhj7jkz] {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--s-2);
}

.bento[b-x1fvhj7jkz] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    min-height: 92px;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-lg);
    background:
        linear-gradient(180deg, rgb(255 255 255 / .03), transparent 60%),
        var(--ioha-surface-1);
    overflow: hidden;
}

.bento[b-x1fvhj7jkz]  .bento-num {
    color: var(--ioha-bone);
    font: 900 34px/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
}

.bento-label[b-x1fvhj7jkz] {
    color: var(--ioha-bone-dim);
    font: 800 var(--fs-sm)/1.2 var(--font-body);
}

.bento-note[b-x1fvhj7jkz] {
    color: var(--ioha-muted);
    font: 600 var(--fs-xs)/1.3 var(--font-body);
}

/* The streak: the tall tile, warm when today is played. */
.bento.is-streak[b-x1fvhj7jkz] {
    grid-row: span 2;
    justify-content: space-between;
}

.bento.is-streak.is-lit[b-x1fvhj7jkz] {
    border-color: rgb(255 106 90 / .35);
    background:
        radial-gradient(110% 80% at 20% 0%, rgb(255 184 77 / .2), transparent 60%),
        linear-gradient(180deg, rgb(224 57 43 / .22), rgb(224 57 43 / .06)),
        var(--ioha-surface-1);
}

.bento.is-streak[b-x1fvhj7jkz]  .bento-flame {
    font-size: 40px;
    margin-bottom: auto;
}

.bento.is-streak[b-x1fvhj7jkz]  .bento-num {
    margin-top: var(--s-3);
    font-size: 64px;
}

.bento.is-wide[b-x1fvhj7jkz] {
    grid-column: 1 / -1;
    min-height: 0;
}

/* Day one: one tall tile beside the streak instead of two empty stats. */
.bento.is-first[b-x1fvhj7jkz] {
    grid-row: span 2;
    gap: var(--s-2);
}

.bento-first-title[b-x1fvhj7jkz] {
    color: var(--ioha-bone);
    font: 900 22px/1.1 var(--font-display);
    letter-spacing: -.01em;
}

.bento.is-crowd[b-x1fvhj7jkz] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: var(--s-3);
    row-gap: var(--s-2);
}

.bento-crowd-num[b-x1fvhj7jkz] {
    color: var(--ioha-success);
    font: 900 34px/1 var(--font-display);
    letter-spacing: -.03em;
}

.bento-crowd-text[b-x1fvhj7jkz] {
    color: var(--ioha-bone-dim);
    font: 700 var(--fs-sm)/1.3 var(--font-body);
}

.bento-meter[b-x1fvhj7jkz] {
    grid-column: 1 / -1;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--ioha-surface-3);
    overflow: hidden;
}

.bento-meter i[b-x1fvhj7jkz] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2fae68, var(--ioha-success));
    animation: daily-grow-b-x1fvhj7jkz 900ms var(--ease-out) 200ms backwards;
    transform-origin: left center;
}

.bento.is-next[b-x1fvhj7jkz] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

.bento-next-label[b-x1fvhj7jkz] {
    color: var(--ioha-bone-dim);
    font: 800 var(--fs-sm)/1.2 var(--font-body);
}

.bento.is-next[b-x1fvhj7jkz]  .bento-next-time {
    color: var(--ioha-bone);
    font-size: var(--fs-xl);
}

/* --- Did you know ------------------------------------------------------------------ */

.daily-fact[b-x1fvhj7jkz] {
    padding: var(--s-4);
    border: 1px solid var(--ioha-line);
    border-left: 3px solid var(--ioha-red);
    border-radius: var(--r-md);
    background: var(--ioha-surface-1);
}

.daily-fact-text[b-x1fvhj7jkz] {
    margin: var(--s-2) 0 0;
    color: var(--ioha-bone-dim);
    font: 500 var(--fs-md)/1.55 var(--font-body);
}

/* --- IOHA videos ------------------------------------------------------------------- */

.daily-videos[b-x1fvhj7jkz] {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.daily-videos .ioha-kicker.is-quiet[b-x1fvhj7jkz] {
    margin-top: var(--s-2);
    color: var(--ioha-muted);
}

.daily-videos-note[b-x1fvhj7jkz] {
    margin: -4px 0 2px;
    color: var(--ioha-muted);
    font: 600 var(--fs-xs)/1.4 var(--font-body);
}

.daily-video[b-x1fvhj7jkz] {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: 8px var(--s-3) 8px 8px;
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-lg);
    background: var(--ioha-surface-1);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2) ease;
}

.daily-video:active[b-x1fvhj7jkz] { transform: scale(.98); }

/* 16:9 for a long video; a Short gets a portrait frame, which crops YouTube's 4:3
   thumbnail down to the vertical video in its middle. */
.daily-video-thumb[b-x1fvhj7jkz] {
    position: relative;
    flex: none;
    width: 112px;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-md);
    overflow: hidden;
    background: linear-gradient(140deg, var(--ioha-red-press), var(--ioha-surface-3));
}

.daily-video.is-short .daily-video-thumb[b-x1fvhj7jkz] {
    width: 54px;
    aspect-ratio: 9 / 16;
}

.daily-video-thumb img[b-x1fvhj7jkz] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lab footage, so the frame is a frosted wash of its colours rather than the
   specimen itself; the video is one tap away. Scaled up so the blur has no
   soft edge, and warmed towards the brand red so the cards read as a set. */
.daily-video-thumb.is-frosted img[b-x1fvhj7jkz] {
    filter: blur(9px) saturate(1.3) brightness(.78);
    transform: scale(1.35);
}

.daily-video-thumb.is-frosted[b-x1fvhj7jkz]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgb(224 57 43 / .28), rgb(21 19 24 / .35));
}

.daily-video-play[b-x1fvhj7jkz] {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border-radius: 50%;
    background: rgb(224 57 43 / .92);
    color: #fff;
    box-shadow: 0 4px 14px rgb(0 0 0 / .45);
}

.daily-video-play svg[b-x1fvhj7jkz] {
    width: 16px;
    height: 16px;
    margin-left: 2px; /* optical centring of the triangle */
    fill: currentColor;
}

.daily-video-text[b-x1fvhj7jkz] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.daily-video-title[b-x1fvhj7jkz] {
    color: var(--ioha-bone);
    font: 700 var(--fs-sm)/1.35 var(--font-body);
    /* Long titles must not push the card wider than the shell. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.daily-video-meta[b-x1fvhj7jkz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.daily-video-by[b-x1fvhj7jkz] {
    color: var(--ioha-muted);
    font: 600 var(--fs-xs)/1.2 var(--font-body);
}

/* "N more videos": a quiet full-width row, not another card. */
.daily-more[b-x1fvhj7jkz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--ioha-tap);
    border: 1px dashed var(--ioha-line-strong);
    border-radius: var(--r-lg);
    background: transparent;
    color: var(--ioha-bone-dim);
    font: 700 var(--fs-sm)/1 var(--font-body);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.daily-more svg[b-x1fvhj7jkz] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Inline player. Aspect ratio rather than a fixed height so it is right at every
   width; a Short is portrait, so its height is the constrained side. */
.daily-player[b-x1fvhj7jkz] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--ioha-line-strong);
}

.daily-player.is-short[b-x1fvhj7jkz] {
    height: min(58vh, 440px);
    width: auto;
    aspect-ratio: 9 / 16;
    align-self: center;
}

.daily-player iframe[b-x1fvhj7jkz] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.daily-video-out[b-x1fvhj7jkz] {
    align-self: flex-start;
    min-height: var(--ioha-tap);
    display: inline-flex;
    align-items: center;
    color: var(--ioha-muted);
    font: 700 var(--fs-xs)/1 var(--font-body);
    letter-spacing: .06em;
    text-decoration: none;
}

/* --- Soft asks: save your streak / Premium ------------------------------------------ */

.daily-card[b-x1fvhj7jkz] {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-5);
    border-radius: var(--r-xl);
    border: 1px solid var(--ioha-line-strong);
    background: var(--ioha-surface-1);
}

.daily-card.is-signin[b-x1fvhj7jkz] {
    border-color: rgb(255 106 90 / .35);
    background:
        radial-gradient(100% 70% at 100% 0%, rgb(224 57 43 / .2), transparent 65%),
        var(--ioha-surface-1);
}

.daily-card.is-premium[b-x1fvhj7jkz] {
    border-color: rgb(242 193 78 / .35);
    background:
        radial-gradient(100% 70% at 100% 0%, rgb(242 193 78 / .16), transparent 65%),
        var(--ioha-surface-1);
}

.daily-card-icon[b-x1fvhj7jkz] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    font-size: 26px;
}

.daily-card.is-signin .daily-card-icon[b-x1fvhj7jkz] { background: var(--ioha-red-soft); }

.daily-card.is-premium .daily-card-icon[b-x1fvhj7jkz] {
    background: var(--ioha-gold-soft);
    color: var(--ioha-gold);
}

.daily-card-icon svg[b-x1fvhj7jkz] {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.daily-card-title[b-x1fvhj7jkz] {
    margin: var(--s-1) 0 0;
    color: var(--ioha-bone);
    font: 900 var(--fs-xl)/1.15 var(--font-display);
    letter-spacing: -.01em;
}

.daily-card-body[b-x1fvhj7jkz] {
    margin: 0 0 var(--s-2);
    color: var(--ioha-bone-dim);
    font: 500 var(--fs-sm)/1.5 var(--font-body);
}

@media (hover: hover) and (pointer: fine) {
    .daily-study:hover[b-x1fvhj7jkz],
    .daily-video:hover[b-x1fvhj7jkz] { border-color: var(--ioha-bone-dim); }
}

/* --- Motion -------------------------------------------------------------------------
   All transform/opacity; the global reduced-motion switch in app.css finishes each in
   its end state. */

@keyframes daily-pop-b-x1fvhj7jkz {
    0% { transform: scale(1); }
    40% { transform: scale(1.045); }
    100% { transform: scale(1); }
}

@keyframes daily-shake-b-x1fvhj7jkz {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-8px); }
    30% { transform: translateX(7px); }
    45% { transform: translateX(-5px); }
    60% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}

@keyframes daily-draw-b-x1fvhj7jkz {
    to { stroke-dashoffset: 0; }
}

@keyframes daily-grow-b-x1fvhj7jkz {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes daily-ring-b-x1fvhj7jkz {
    0% { box-shadow: 0 0 0 0 rgb(242 239 236 / .55); }
    100% { box-shadow: 0 0 0 12px rgb(242 239 236 / 0); }
}

/* --- Small and short screens ----------------------------------------------------- */

@media (max-width: 380px) {
    .daily-page[b-x1fvhj7jkz] { padding-left: var(--s-3); padding-right: var(--s-3); }
    .daily-question[b-x1fvhj7jkz] { font-size: 26px; }
    .bento.is-streak[b-x1fvhj7jkz]  .bento-num { font-size: 54px; }
}

/* Short viewports (iPhone SE, small Androids, a phone browser with its toolbars
   showing): the answers come before the model's size, and anything decorative goes. */
@media (max-height: 700px) {
    .daily-page[b-x1fvhj7jkz] { padding-top: var(--s-2); }
    .daily-shell[b-x1fvhj7jkz] { gap: var(--s-2); }
    .daily-stage-wrap[b-x1fvhj7jkz] { min-height: 128px; }
    .daily-question[b-x1fvhj7jkz] { font-size: 22px; }
    .daily-kicker[b-x1fvhj7jkz] { margin-bottom: 3px; }
    .daily-sub[b-x1fvhj7jkz] { min-height: 18px; margin-top: 3px; font-size: var(--fs-xs); }
    .daily-option[b-x1fvhj7jkz] { min-height: 46px; padding-top: 5px; padding-bottom: 5px; }
    .daily-option-key[b-x1fvhj7jkz] { width: 28px; height: 28px; }
    .daily-options[b-x1fvhj7jkz] { gap: 6px; }
    .daily-footnote[b-x1fvhj7jkz] { display: none; }
    .daily-page.is-revealed .daily-stage-wrap[b-x1fvhj7jkz] { height: clamp(220px, 40vh, 380px); height: clamp(220px, 40dvh, 380px); }
}

/* Coach copy: "pinch" on touch screens, "scroll" with a mouse or trackpad. Any touch
   screen at all counts as touch (a phone, an iPad with a keyboard, a touch laptop),
   whatever the main pointer says: the same rule as the stage's own hint. */
.daily-zoom-fine[b-x1fvhj7jkz] { display: none; }

@media (hover: hover) and (pointer: fine) {
    .daily-zoom-touch[b-x1fvhj7jkz] { display: none; }
    .daily-zoom-fine[b-x1fvhj7jkz] { display: inline; }
}

@media (any-pointer: coarse) {
    .daily-zoom-touch[b-x1fvhj7jkz] { display: inline; }
    .daily-zoom-fine[b-x1fvhj7jkz] { display: none; }
}
/* _content/InstituteOfHumanAnatomy.Shared/Pages/Flashcards.razor.rz.scp.css */
/* Study Mode, in the daily game's visual language and on the shared tokens in app.css.
   Three screens: the picker (Setup), the session (a progress bar, the 3D stage and a
   card that flips up under it), and a summary that pays the session off. */

.st-page[b-zqenot76qx] {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    justify-content: center;
    background: var(--ioha-ink);
    color: var(--ioha-bone);
    font-family: var(--font-body);
    /* No env(safe-area-inset-bottom) here: the tab bar under the page owns that inset,
       and adding it again took about 34px off the stage on an iPhone. */
    padding: var(--s-5) var(--s-4) var(--s-4);
}

.st-shell[b-zqenot76qx] {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.st-shell.is-setup[b-zqenot76qx] { max-width: 480px; }

/* --- type --------------------------------------------------------------- */

.st-kicker[b-zqenot76qx] {
    margin: 0;
    color: var(--ioha-red-bright);
    font: 800 var(--fs-xs)/1.2 var(--font-body);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.st-title[b-zqenot76qx] {
    margin: var(--s-2) 0 0;
    font: 900 var(--fs-2xl)/1.05 var(--font-display);
    letter-spacing: -.02em;
}

.st-sub[b-zqenot76qx] {
    margin: var(--s-2) 0 0;
    color: var(--ioha-muted);
    font: 500 var(--fs-sm)/1.5 var(--font-body);
}

.is-center[b-zqenot76qx] { text-align: center; }

.st-label[b-zqenot76qx] {
    margin: 0 0 var(--s-3);
    color: var(--ioha-muted);
    font: 800 var(--fs-xs)/1.2 var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* --- setup ---------------------------------------------------------------- */

.st-status[b-zqenot76qx] { margin-top: var(--s-3); min-height: 22px; }
.st-status svg[b-zqenot76qx] { width: 13px; height: 13px; }

.st-section[b-zqenot76qx] { margin-top: var(--s-6); }

.st-tiles[b-zqenot76qx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
}

.st-tile[b-zqenot76qx] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-height: 64px;
    padding: var(--s-3) 34px var(--s-3) var(--s-3);
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-md);
    background:
        linear-gradient(180deg, rgb(255 255 255 / .025), transparent 70%),
        var(--ioha-surface-1);
    color: var(--ioha-bone);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--dur-1) var(--ease-out),
        border-color var(--dur-2) ease,
        background-color var(--dur-2) ease;
}

.st-tile:active[b-zqenot76qx] { transform: scale(.97); }
.st-tile.is-wide[b-zqenot76qx] { grid-column: 1 / -1; min-height: 56px; }

.st-tile-name[b-zqenot76qx] {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font: 800 var(--fs-sm)/1.25 var(--font-body);
}

.st-tile-dot[b-zqenot76qx] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot, var(--ioha-muted));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, #9b9590) 22%, transparent);
}

/* The dot sits in front of the name; the button lays them out as one line. */
.st-tile[b-zqenot76qx] { flex-direction: column; }
.st-tile .st-tile-dot[b-zqenot76qx] { position: absolute; left: var(--s-3); top: 19px; }
.st-tile:not(.is-wide) .st-tile-name[b-zqenot76qx],
.st-tile:not(.is-wide) .st-tile-count[b-zqenot76qx] { padding-left: 18px; }

.st-tile-count[b-zqenot76qx] {
    color: var(--ioha-muted);
    font: 600 var(--fs-xs)/1.2 var(--font-body);
}

.st-tile-tick[b-zqenot76qx] {
    position: absolute;
    right: var(--s-3);
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border: 1.5px solid var(--ioha-line-strong);
    border-radius: 50%;
    transition: background-color var(--dur-2), border-color var(--dur-2), transform var(--dur-3) var(--ease-spring);
}

.st-tile.is-selected[b-zqenot76qx] {
    border-color: var(--ioha-red);
    background-color: rgb(224 57 43 / .1);
}

.st-tile.is-selected .st-tile-tick[b-zqenot76qx] {
    border-color: var(--ioha-red);
    background: var(--ioha-red-strong);
    transform: scale(1.06);
}

.st-tile.is-selected .st-tile-tick[b-zqenot76qx]::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
    .st-tile:hover:not(.is-selected)[b-zqenot76qx] { border-color: var(--ioha-line-strong); }
}

.st-tile-skel[b-zqenot76qx] { height: 64px; }
.st-tile-skel.is-wide[b-zqenot76qx] { grid-column: 1 / -1; height: 56px; }

.st-sizes[b-zqenot76qx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-2);
}

.st-size[b-zqenot76qx] {
    position: relative;
    display: grid;
    place-items: center;
    height: 56px;
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-md);
    background: var(--ioha-surface-1);
    color: var(--ioha-bone);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2), background-color var(--dur-2);
}

.st-size:active[b-zqenot76qx] { transform: scale(.95); }

.st-size-num[b-zqenot76qx] { font: 900 var(--fs-xl)/1 var(--font-display); }

.st-size.is-selected[b-zqenot76qx] {
    border-color: var(--ioha-red);
    background: rgb(224 57 43 / .14);
    box-shadow: inset 0 0 0 1px var(--ioha-red);
}

.st-size.is-locked[b-zqenot76qx] { color: var(--ioha-muted); }

.st-size-lock[b-zqenot76qx] {
    position: absolute;
    top: -7px;
    right: -5px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ioha-gold);
    color: #1a1408;
    box-shadow: 0 0 0 3px var(--ioha-ink);
}

.st-size-lock svg[b-zqenot76qx] { width: 12px; height: 12px; }

.st-note[b-zqenot76qx] {
    margin: var(--s-3) 0 0;
    color: var(--ioha-muted);
    font: 500 13px/1.5 var(--font-body);
}

.st-note-link[b-zqenot76qx] {
    display: inline-block;
    padding: 10px 0;
    margin: -10px 0;
    color: var(--ioha-gold);
    font-weight: 800;
    text-decoration: none;
}

.st-problem[b-zqenot76qx] {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-5);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-md);
    background: var(--ioha-surface-1);
}

.st-problem p[b-zqenot76qx] { flex: 1; margin: 0; color: var(--ioha-bone-dim); font: 600 var(--fs-sm)/1.4 var(--font-body); }

/* The start button stays in reach while the picker scrolls under it. */
.st-dock[b-zqenot76qx] {
    position: sticky;
    bottom: calc(-1 * var(--s-4));
    z-index: 5;
    margin: auto calc(-1 * var(--s-4)) calc(-1 * var(--s-4));
    padding: var(--s-6) var(--s-4) var(--s-4);
    background: linear-gradient(to top, var(--ioha-ink) 62%, rgb(11 11 13 / 0));
}

.st-section + .st-dock[b-zqenot76qx],
.st-problem + .st-dock[b-zqenot76qx] { margin-top: auto; }

.st-dock-note[b-zqenot76qx] {
    margin: var(--s-2) 0 0;
    color: var(--ioha-muted);
    font: 600 13px/1.4 var(--font-body);
    text-align: center;
}

/* --- session ------------------------------------------------------------ */

.st-page.is-playing[b-zqenot76qx] { padding-top: var(--s-3); }

.st-shell.is-session[b-zqenot76qx] { min-height: 100%; height: 100%; }

.st-topbar[b-zqenot76qx] {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex: none;
    height: var(--ioha-tap);
}

.st-quit[b-zqenot76qx] {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--ioha-tap);
    height: var(--ioha-tap);
    margin-left: -10px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ioha-muted);
    cursor: pointer;
    transition: transform var(--dur-1) var(--ease-out), color var(--dur-2), background-color var(--dur-2);
}

.st-quit svg[b-zqenot76qx] { width: 22px; height: 22px; }
.st-quit:active[b-zqenot76qx] { transform: scale(.9); }

@media (hover: hover) and (pointer: fine) {
    .st-quit:hover[b-zqenot76qx] { color: var(--ioha-bone); background: var(--ioha-surface-1); }
}

.st-progress[b-zqenot76qx] {
    position: relative;
    flex: 1;
    height: 14px;
    border-radius: var(--r-pill);
    background: var(--ioha-surface-2);
    overflow: hidden;
}

.st-progress-fill[b-zqenot76qx] {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--ioha-red-strong), var(--ioha-red-bright));
    transition: width var(--dur-4) var(--ease-spring);
}

/* The light stripe along the top of the fill, so the bar reads as a thing filling up. */
.st-progress-fill[b-zqenot76qx]::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 3px;
    height: 3px;
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / .3);
}

.st-progress-count[b-zqenot76qx] {
    flex: none;
    min-width: 34px;
    font: 900 var(--fs-md)/1 var(--font-display);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.st-progress-count small[b-zqenot76qx] { color: var(--ioha-muted); font-size: var(--fs-sm); font-weight: 800; }

.st-stage[b-zqenot76qx] {
    position: relative;
    flex: 1 1 auto;
    min-height: 180px;
    margin-top: var(--s-3);
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--ioha-surface-1);
    touch-action: none;
    transition: border-color var(--dur-3) ease, box-shadow var(--dur-3) ease;
}

.st-stage.is-flipped[b-zqenot76qx] { border-color: var(--ioha-line-strong); }
.st-stage.is-got[b-zqenot76qx] { border-color: rgb(63 208 127 / .7); box-shadow: 0 0 0 3px rgb(63 208 127 / .14), 0 0 36px rgb(63 208 127 / .16); }
.st-stage.is-miss[b-zqenot76qx] { border-color: rgb(224 57 43 / .6); box-shadow: 0 0 0 3px rgb(224 57 43 / .12); }

/* Glass chips over the model. Few of them: each is a backdrop-filter on top of WebGL.
   The two you tap are full 44px targets that look as they did: the hint chip is a
   44px button drawing its 36px glass face 4px inside (::before), and the view buttons
   reach out over their bar's padding with a clear border. */
.st-tag[b-zqenot76qx],
.st-chip[b-zqenot76qx],
.st-views[b-zqenot76qx] {
    position: absolute;
    z-index: 20;
}

.st-tag[b-zqenot76qx],
.st-chip[b-zqenot76qx]::before,
.st-views[b-zqenot76qx] {
    border: 1px solid var(--ioha-glass-line);
    background: var(--ioha-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* A long name wraps onto a second line instead of being cut: "Nervous System & Sense
   Organs" lost "Sense Organs" to an ellipsis even on the widest phone. One line is the
   same 28px pill as before (a 15px line plus 5.5px padding, where it was a 12px line
   plus 7px). */
.st-tag[b-zqenot76qx] {
    top: var(--s-3);
    left: var(--s-3);
    max-width: calc(50% - 16px);
    padding: 5.5px 11px;
    border-radius: 14px;
    color: var(--ioha-bone-dim);
    font: 800 var(--fs-xs)/1.25 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-wrap: balance;
    overflow-wrap: break-word;
    pointer-events: none;
}

.st-tag-short[b-zqenot76qx] { display: none; }

@media (max-width: 380px) {
    .st-tag-long[b-zqenot76qx] { display: none; }
    .st-tag-short[b-zqenot76qx] { display: inline; }
}

.st-chip[b-zqenot76qx] {
    top: calc(var(--s-3) - 4px);
    right: calc(var(--s-3) - 4px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    /* The face's 12px, plus its border and the 4px around it. */
    padding: 0 17px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ioha-bone);
    font: 800 var(--fs-xs)/1 var(--font-body);
    letter-spacing: .04em;
    cursor: pointer;
    transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-2);
}

/* 36px drawn, 44px to the finger: the face, under the icon and label. */
.st-chip[b-zqenot76qx]::before {
    content: "";
    position: absolute;
    inset: 4px;
    z-index: -1;
    border-radius: inherit;
    transition: background-color var(--dur-2), border-color var(--dur-2);
}

.st-chip svg[b-zqenot76qx] { width: 15px; height: 15px; }
.st-chip:active[b-zqenot76qx] { transform: scale(.95); }
.st-chip:disabled[b-zqenot76qx] { opacity: .45; cursor: default; }

.st-chip.is-on[b-zqenot76qx]::before {
    border-color: rgb(224 57 43 / .6);
    background: rgb(224 57 43 / .3);
}

.st-views[b-zqenot76qx] {
    left: 50%;
    bottom: var(--s-3);
    transform: translateX(-50%);
    display: flex;
    padding: 3px;
    border-radius: var(--r-pill);
}

/* 44px tall over the bar's 3px padding and 1px border; the clear top and bottom
   border keeps the pressed and hover fill at the 36px it always was. */
.st-views button[b-zqenot76qx] {
    min-width: 60px;
    min-height: 44px;
    margin: -4px 0;
    padding: 0 12px;
    border: solid transparent;
    border-width: 4px 0;
    border-radius: var(--r-pill);
    background: transparent;
    background-clip: padding-box;
    color: var(--ioha-bone-dim);
    /* Title case, as on the daily viewer: the two viewers share one style. */
    font: 800 var(--fs-xs)/1 var(--font-body);
    letter-spacing: .04em;
    cursor: pointer;
}

.st-views button:active:not(:disabled)[b-zqenot76qx] { background-color: rgb(224 57 43 / .3); color: #fff; }
.st-views button:disabled[b-zqenot76qx] { opacity: .45; cursor: default; }

/* The keyboard ring follows what is drawn, not the 44px box around it: 2px out from
   the hint chip's face as before, and on the view buttons tight to the fill. */
.st-chip:focus-visible[b-zqenot76qx] { outline-offset: -2px; }
.st-views button:focus-visible[b-zqenot76qx] { outline-offset: -4px; }

@media (hover: hover) and (pointer: fine) {
    .st-views button:hover:not(:disabled)[b-zqenot76qx] { color: #fff; background-color: rgb(255 255 255 / .08); }
}

.st-panel[b-zqenot76qx] {
    flex: none;
    margin-top: var(--s-3);
}

.st-ask[b-zqenot76qx]  .ioha-btn { margin-top: var(--s-4); }

.st-prompt[b-zqenot76qx] {
    margin: 0;
    font: 900 var(--fs-2xl)/1.05 var(--font-display);
    letter-spacing: -.02em;
}

.st-prompt-sub[b-zqenot76qx] {
    margin: var(--s-1) 0 0;
    color: var(--ioha-muted);
    font: 500 var(--fs-sm)/1.4 var(--font-body);
}

/* The card flips up from its top edge, like turning over a flashcard. */
.st-card[b-zqenot76qx] {
    padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-lg);
    background:
        linear-gradient(180deg, rgb(255 255 255 / .03), transparent 70%),
        var(--ioha-surface-1);
    transform-origin: 50% 0;
    animation: st-flip-b-zqenot76qx 460ms var(--ease-out) backwards;
}

@keyframes st-flip-b-zqenot76qx {
    from { transform: perspective(900px) rotateX(-75deg); opacity: 0; }
    to { transform: perspective(900px) rotateX(0); opacity: 1; }
}

.st-card-kicker[b-zqenot76qx] {
    margin: 0;
    color: var(--ioha-muted);
    font: 800 var(--fs-xs)/1.2 var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.st-card-name[b-zqenot76qx] {
    margin: 6px 0 0;
    font: 900 26px/1.1 var(--font-display);
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
}

.st-video[b-zqenot76qx] {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--ioha-tap);
    margin-top: 2px;
    color: var(--ioha-red-bright);
    font: 800 var(--fs-sm)/1 var(--font-body);
    text-decoration: none;
}

.st-video-play[b-zqenot76qx] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ioha-red-soft);
}

.st-video-play svg[b-zqenot76qx] { width: 14px; height: 14px; margin-left: 2px; }

.st-card-ask[b-zqenot76qx] {
    margin: var(--s-3) 0 0;
    color: var(--ioha-bone-dim);
    font: 700 var(--fs-sm)/1.2 var(--font-body);
}

.st-grade[b-zqenot76qx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
    margin-top: var(--s-3);
}

/* Two big thumb-zone answers with the same pushed-in lip as the app's buttons. */
.st-grade-btn[b-zqenot76qx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 52px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font: 800 var(--fs-md)/1 var(--font-body);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}

.st-grade-btn svg[b-zqenot76qx] { width: 20px; height: 20px; }
.st-grade-btn:active[b-zqenot76qx] { transform: translateY(2px) scale(.97); }

.st-grade-btn.is-miss[b-zqenot76qx] {
    border-color: var(--ioha-line-strong);
    background: var(--ioha-surface-2);
    color: var(--ioha-bone);
    box-shadow: 0 3px 0 rgb(0 0 0 / .5);
}

.st-grade-btn.is-miss svg[b-zqenot76qx] { color: var(--ioha-red-bright); }

.st-grade-btn.is-got[b-zqenot76qx] {
    background: var(--ioha-success);
    color: #062312;
    box-shadow: 0 3px 0 #23955a;
}

.st-grade-btn:active[b-zqenot76qx] { box-shadow: 0 1px 0 rgb(0 0 0 / .4); }

.st-feedback[b-zqenot76qx] {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-2);
    padding: var(--s-3);
    border: 1px solid;
    border-radius: var(--r-lg);
    animation: ioha-rise 380ms var(--ease-out) backwards;
}

.st-feedback.is-got[b-zqenot76qx] { border-color: rgb(63 208 127 / .45); background: var(--ioha-success-soft); }
.st-feedback.is-miss[b-zqenot76qx] {
    border-color: rgb(224 57 43 / .45);
    background: var(--ioha-red-soft);
    animation: ioha-rise 380ms var(--ease-out) backwards, ioha-shake 420ms 120ms cubic-bezier(.36, .07, .19, .97);
}

.st-feedback-icon[b-zqenot76qx] {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

.st-feedback-icon svg[b-zqenot76qx] { width: 22px; height: 22px; }
.st-feedback.is-got .st-feedback-icon[b-zqenot76qx] { background: var(--ioha-success); color: #062312; }
.st-feedback.is-miss .st-feedback-icon[b-zqenot76qx] { background: var(--ioha-red-strong); color: #fff; }

.st-feedback-text[b-zqenot76qx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.st-feedback-text strong[b-zqenot76qx] { font: 900 var(--fs-md)/1.15 var(--font-display); }
.st-feedback.is-got .st-feedback-text strong[b-zqenot76qx] { color: var(--ioha-success); }
.st-feedback.is-miss .st-feedback-text strong[b-zqenot76qx] { color: var(--ioha-red-bright); }
.st-feedback-text span[b-zqenot76qx] { color: var(--ioha-bone-dim); font: 600 13px/1.3 var(--font-body); }

.st-continue[b-zqenot76qx] {
    flex: none;
    min-height: 48px;
    padding: 0 var(--s-4);
    border: 0;
    border-radius: var(--r-pill);
    font: 800 var(--fs-sm)/1 var(--font-body);
    cursor: pointer;
    transition: transform var(--dur-1) var(--ease-out);
}

.st-continue:active[b-zqenot76qx] { transform: scale(.96); }
.st-feedback.is-got .st-continue[b-zqenot76qx] { background: var(--ioha-success); color: #062312; box-shadow: 0 3px 0 #23955a; }
.st-feedback.is-miss .st-continue[b-zqenot76qx] { background: var(--ioha-red-strong); color: #fff; box-shadow: 0 3px 0 var(--ioha-red-press); }

/* --- summary ------------------------------------------------------------ */

.st-summary[b-zqenot76qx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto 0;
    padding: var(--s-4) 0 var(--s-2);
    text-align: center;
}

.st-ring[b-zqenot76qx] {
    position: relative;
    width: 148px;
    height: 148px;
    margin-bottom: var(--s-4);
}

.st-ring svg[b-zqenot76qx] { width: 100%; height: 100%; transform: rotate(-90deg); }

.st-ring circle[b-zqenot76qx] {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
}

.st-ring-track[b-zqenot76qx] { stroke: var(--ioha-surface-2); }

.st-ring-fill[b-zqenot76qx] {
    stroke: var(--ioha-success);
    stroke-dasharray: 100 100;
    stroke-dashoffset: calc(100 - var(--pct, 0));
    animation: st-ring-b-zqenot76qx 1100ms var(--ease-out) 150ms backwards;
}

.st-ring-fill.is-perfect[b-zqenot76qx] { stroke: var(--ioha-gold); }

/* The glow sits behind the ring as a soft disc. A drop-shadow filter on the SVG stroke
   painted a visible square on some GPUs. */
.st-ring[b-zqenot76qx]::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(63 208 127 / .14), transparent 70%);
}

@keyframes st-ring-b-zqenot76qx {
    from { stroke-dashoffset: 100; }
}

.st-ring-text[b-zqenot76qx] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding-top: 48px;
}

.st-ring-num[b-zqenot76qx] {
    font: 900 44px/1 var(--font-display);
    font-variant-numeric: tabular-nums;
}

.st-ring-of[b-zqenot76qx] { color: var(--ioha-muted); font: 900 var(--fs-xl)/1 var(--font-display); }

.st-summary .st-sub[b-zqenot76qx] { max-width: 34ch; }

.st-stats[b-zqenot76qx] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-2);
    width: 100%;
    margin-top: var(--s-5);
}

.st-stat[b-zqenot76qx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--s-3) var(--s-2);
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-md);
    background: var(--ioha-surface-1);
}

.st-stat strong[b-zqenot76qx] { font: 900 var(--fs-xl)/1 var(--font-display); }
.st-stat span[b-zqenot76qx] { color: var(--ioha-muted); font: 700 var(--fs-xs)/1 var(--font-body); }
.st-stat.is-got strong[b-zqenot76qx] { color: var(--ioha-success); }
.st-stat.is-miss strong[b-zqenot76qx] { color: var(--ioha-red-bright); }

.st-misses[b-zqenot76qx] {
    width: 100%;
    margin-top: var(--s-3);
    padding: var(--s-4);
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-md);
    background: var(--ioha-surface-1);
    text-align: left;
}

.st-misses ul[b-zqenot76qx] { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }

.st-misses li[b-zqenot76qx] {
    position: relative;
    padding-left: var(--s-4);
    color: var(--ioha-bone);
    font: 700 var(--fs-sm)/1.35 var(--font-body);
}

.st-misses li[b-zqenot76qx]::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ioha-red);
}

.st-misses-more[b-zqenot76qx] { margin: var(--s-2) 0 0; color: var(--ioha-muted); font: 600 13px/1.3 var(--font-body); }

.st-summary-actions[b-zqenot76qx] {
    display: grid;
    gap: var(--s-2);
    width: 100%;
    margin-top: var(--s-5);
}

.st-upsell[b-zqenot76qx] {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-4);
    border: 1px solid rgb(242 193 78 / .3);
    border-radius: var(--r-lg);
    background:
        radial-gradient(120% 120% at 100% 0, rgb(242 193 78 / .12), transparent 60%),
        var(--ioha-surface-1);
    text-align: left;
}

.st-upsell-text[b-zqenot76qx] { display: flex; flex-direction: column; gap: 4px; }
.st-upsell-text strong[b-zqenot76qx] { color: var(--ioha-gold); font: 900 var(--fs-lg)/1.15 var(--font-display); }
.st-upsell-text span[b-zqenot76qx] { color: var(--ioha-bone-dim); font: 600 var(--fs-sm)/1.45 var(--font-body); }

.st-tomorrow[b-zqenot76qx] {
    margin: var(--s-1) 0 0;
    color: var(--ioha-muted);
    font: 600 13px/1.4 var(--font-body);
}

/* --- exit sheet ----------------------------------------------------------- */

.st-exit-body[b-zqenot76qx] {
    margin: 0;
    color: var(--ioha-bone-dim);
    font: 500 var(--fs-md)/1.5 var(--font-body);
}

.st-exit-actions[b-zqenot76qx] {
    display: grid;
    gap: var(--s-2);
    margin-top: var(--s-5);
}

/* --- short screens ---------------------------------------------------------- */

@media (max-height: 700px) {
    .st-page[b-zqenot76qx] { padding-top: var(--s-4); }
    .st-title[b-zqenot76qx] { font-size: 26px; }
    .st-section[b-zqenot76qx] { margin-top: var(--s-5); }
    .st-tile[b-zqenot76qx] { min-height: 56px; }
    .st-stage[b-zqenot76qx] { min-height: 150px; }
    .st-prompt[b-zqenot76qx] { font-size: var(--fs-xl); }
    .st-prompt-sub[b-zqenot76qx] { display: none; }
    .st-ask[b-zqenot76qx]  .ioha-btn { margin-top: var(--s-3); }
    .st-card[b-zqenot76qx] { padding-top: var(--s-3); padding-bottom: var(--s-3); }
    .st-card-name[b-zqenot76qx] { font-size: 22px; }
    .st-ring[b-zqenot76qx] { width: 120px; height: 120px; }
    .st-ring-text[b-zqenot76qx] { padding-top: 38px; }
    .st-ring-num[b-zqenot76qx] { font-size: 36px; }
}
/* _content/InstituteOfHumanAnatomy.Shared/Pages/Login.razor.rz.scp.css */
/* Sign-in: what it is for above, the form in a panel that rises from the bottom like the
   app's sheets. Tokens come from app.css. On a wide window the two stack into one card
   in the middle of the page. */

.lg-page[b-x7x5j0h6lx] {
    position: relative;
    display: flex;
    flex-direction: column;
    /* EmptyLayout pads for the notch and the home indicator; fill exactly what is left. */
    min-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    background:
        radial-gradient(90% 55% at 50% 0%, rgb(224 57 43 / .28), transparent 70%),
        var(--ioha-ink);
    color: var(--ioha-bone);
    font-family: var(--font-body);
}

.lg-top[b-x7x5j0h6lx] {
    display: flex;
    padding: var(--s-2) var(--s-3) 0;
}

.lg-close[b-x7x5j0h6lx] {
    display: grid;
    place-items: center;
    width: var(--ioha-tap);
    height: var(--ioha-tap);
    border-radius: 50%;
    background: rgb(255 255 255 / .06);
    color: var(--ioha-bone-dim);
}

.lg-close svg[b-x7x5j0h6lx] { width: 20px; height: 20px; }

.lg-hero[b-x7x5j0h6lx] {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--s-4) var(--s-5) var(--s-6);
    text-align: center;
}

.lg-badge[b-x7x5j0h6lx] {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--s-4);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, var(--ioha-red-bright), var(--ioha-red-strong) 70%);
    color: #fff;
    box-shadow: var(--glow-red), inset 0 -3px 0 rgb(0 0 0 / .18);
}

.lg-badge svg[b-x7x5j0h6lx] { width: 38px; height: 38px; }

/* Signing in to subscribe: Premium's gold coin, as on the paywall and the top-bar pill. */
.lg-badge.is-premium[b-x7x5j0h6lx] {
    background:
        radial-gradient(circle at 35% 28%, rgb(255 255 255 / .35), transparent 52%),
        linear-gradient(150deg, #ffe08a, var(--ioha-gold) 45%, var(--ioha-gold-deep));
    color: #1a1408;
    box-shadow: var(--glow-gold), inset 0 -3px 0 rgb(0 0 0 / .18);
}

.lg-kicker[b-x7x5j0h6lx] { margin-bottom: var(--s-2); }
.lg-kicker.is-premium[b-x7x5j0h6lx] { color: var(--ioha-gold); }

.lg-title[b-x7x5j0h6lx] {
    margin: 0;
    font-size: clamp(30px, 9vw, 40px);
    text-wrap: balance;
}

.lg-sub[b-x7x5j0h6lx] {
    max-width: 24em;
    margin: var(--s-3) 0 0;
    color: var(--ioha-bone-dim);
    font-size: 15px;
    line-height: 1.5;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.lg-sub strong[b-x7x5j0h6lx] { color: var(--ioha-bone); }

/* The email address: moves to the next line whole rather than breaking at a hyphen
   ("phil+ioha-" / "web@..."). Only an address wider than the line breaks inside it,
   before the @ first (EmailText), and it is never cut off. */
.lg-email[b-x7x5j0h6lx] {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.lg-panel[b-x7x5j0h6lx] {
    position: relative;
    padding: var(--s-6) var(--s-5) var(--s-5);
    border-top: 1px solid var(--ioha-glass-line);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--ioha-surface-1);
    box-shadow: 0 -18px 48px rgb(0 0 0 / .45);
    /* Runs on under the home indicator instead of stopping short of it. */
    margin-bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
}

.lg-form[b-x7x5j0h6lx] {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    max-width: 420px;
    margin: 0 auto;
}

.lg-label[b-x7x5j0h6lx] {
    color: var(--ioha-muted);
    font: 800 var(--fs-xs)/1.2 var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lg-input[b-x7x5j0h6lx] {
    display: block;
    width: 100%;
    height: 56px;
    padding: 0 var(--s-4);
    border: 1px solid var(--ioha-line-strong);
    border-radius: var(--r-md);
    background: var(--ioha-ink);
    color: var(--ioha-bone);
    font: 700 17px var(--font-body);
}

.lg-input[b-x7x5j0h6lx]::placeholder { color: var(--ioha-subtle); font-weight: 600; }
/* Neutral focus: red is the error colour, and the field is focused before anything is typed. */
.lg-input:focus[b-x7x5j0h6lx] { outline: none; border-color: var(--ioha-bone-dim); box-shadow: 0 0 0 3px rgb(255 255 255 / .08); }
.lg-input[aria-invalid="true"][b-x7x5j0h6lx] { border-color: var(--ioha-red-bright); }

.lg-note[b-x7x5j0h6lx] {
    margin: 0;
    color: var(--ioha-muted);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.lg-error[b-x7x5j0h6lx] {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgb(224 57 43 / .45);
    border-radius: var(--r-md);
    background: var(--ioha-red-soft);
    color: #ffd2cc;
    font-size: var(--fs-sm);
    line-height: 1.45;
}

/* The code step's status line: as tall as a two-line .lg-error (two 14px lines at 1.45,
   12px padding top and bottom, a 1px border) whether or not one is showing, so the error,
   "Signing you in" and "New code sent" come and go without moving anything. */
.lg-feedback[b-x7x5j0h6lx] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(2 * 14px * 1.45 + 26px);
}

.lg-status[b-x7x5j0h6lx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    margin: 0;
    color: var(--ioha-bone-dim);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-align: center;
}

.lg-spinner[b-x7x5j0h6lx] { width: 18px; height: 18px; border-width: 2.5px; }

/* After the web's sign-out: a quiet confirmation above the form. */
.lg-signed-out[b-x7x5j0h6lx] {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    padding: 10px 14px;
    border: 1px solid rgb(63 208 127 / .35);
    border-radius: var(--r-md);
    background: var(--ioha-success-soft);
    color: var(--ioha-bone);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.4;
}

.lg-signed-out svg[b-x7x5j0h6lx] { flex: none; width: 18px; height: 18px; color: var(--ioha-success); }

/* The 4-digit code: one real input laid over four drawn boxes. One input rather than
   four keeps paste, the keyboard's code suggestion and deleting all working the way the
   OS expects, with no focus juggling between fields. */
.lg-code[b-x7x5j0h6lx] {
    position: relative;
    height: 68px;
}

.lg-code-input[b-x7x5j0h6lx] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    font-size: 16px; /* 16px or iOS zooms the page on focus */
    letter-spacing: 3em;
    outline: none;
    -webkit-text-fill-color: transparent;
}

.lg-code-input[b-x7x5j0h6lx]::selection { background: transparent; }

.lg-code-boxes[b-x7x5j0h6lx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    height: 100%;
}

.lg-code-box[b-x7x5j0h6lx] {
    display: grid;
    place-items: center;
    border: 1.5px solid var(--ioha-line-strong);
    border-radius: var(--r-md);
    background: var(--ioha-ink);
    font: 900 32px/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    transition: border-color var(--dur-2) ease, transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) ease;
}

.lg-code-box.is-filled[b-x7x5j0h6lx] {
    border-color: var(--ioha-bone-dim);
    animation: ioha-pop var(--dur-3) var(--ease-spring);
}

.lg-code-input:focus + .lg-code-boxes .lg-code-box.is-next[b-x7x5j0h6lx] {
    border-color: var(--ioha-red);
    box-shadow: 0 0 0 3px var(--ioha-red-soft);
}

.lg-code-input:focus + .lg-code-boxes .lg-code-box.is-next:not(.is-filled)[b-x7x5j0h6lx]::after {
    content: "";
    width: 2px;
    height: 28px;
    border-radius: 2px;
    background: var(--ioha-red-bright);
    animation: lg-blink-b-x7x5j0h6lx 1s steps(1) infinite;
}

.lg-code-input[aria-invalid="true"] + .lg-code-boxes .lg-code-box[b-x7x5j0h6lx] { border-color: var(--ioha-red-bright); }

@keyframes lg-blink-b-x7x5j0h6lx { 50% { opacity: 0; } }

/* Codes locked after too many wrong guesses: the link takes the code boxes' place.
   Amber rather than red, because nothing is wrong with what they are doing now. */
.lg-locked[b-x7x5j0h6lx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-5) var(--s-4);
    border: 1px solid rgb(245 165 36 / .4);
    border-radius: var(--r-lg);
    background: var(--ioha-warning-soft);
    text-align: center;
}

.lg-locked-icon[b-x7x5j0h6lx] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgb(245 165 36 / .16);
    color: var(--ioha-warning);
}

.lg-locked-icon svg[b-x7x5j0h6lx] { width: 28px; height: 28px; }

.lg-locked-title[b-x7x5j0h6lx] {
    margin: 0;
    color: var(--ioha-bone);
    font: 800 var(--fs-lg)/1.25 var(--font-body);
}

.lg-locked-text[b-x7x5j0h6lx] {
    margin: 0;
    color: var(--ioha-bone-dim);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.lg-locked-text strong[b-x7x5j0h6lx] { color: var(--ioha-bone); }

.lg-actions[b-x7x5j0h6lx] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-1) var(--s-4);
}

.lg-text-btn[b-x7x5j0h6lx] {
    min-height: var(--ioha-tap);
    padding: 0 var(--s-2);
    border: 0;
    background: none;
    color: var(--ioha-bone);
    font: 700 var(--fs-sm) var(--font-body);
    text-decoration: underline;
    text-decoration-color: rgb(242 239 236 / .3);
    text-underline-offset: 3px;
    cursor: pointer;
}

.lg-text-btn:disabled[b-x7x5j0h6lx] {
    color: var(--ioha-muted);
    text-decoration: none;
    cursor: default;
}

.lg-foot[b-x7x5j0h6lx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    margin-top: var(--s-6);
    color: var(--ioha-subtle);
    font-size: var(--fs-xs);
}

.lg-foot a[b-x7x5j0h6lx] {
    display: inline-flex;
    align-items: center;
    /* 44x44 to the finger ("Privacy" is 42px wide), but the negative margins keep the row
       as tall (32px) and the words exactly where they were. Only 1px at the sides, so the
       focus ring stays clear of the dot. */
    min-height: var(--ioha-tap);
    margin: -6px -1px;
    padding: 0 1px;
    color: var(--ioha-muted);
    font-weight: 700;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .lg-close:hover[b-x7x5j0h6lx] { color: var(--ioha-bone); background: rgb(255 255 255 / .1); }
    .lg-foot a:hover[b-x7x5j0h6lx] { color: var(--ioha-bone); }
    .lg-text-btn:not(:disabled):hover[b-x7x5j0h6lx] { text-decoration-color: currentColor; }
}

/* Short phones: tighten the hero so the form and its button stay above the keyboard. */
@media (max-height: 700px) {
    .lg-hero[b-x7x5j0h6lx] { padding-bottom: var(--s-4); }
    .lg-badge[b-x7x5j0h6lx] { width: 56px; height: 56px; margin-bottom: var(--s-3); }
    .lg-badge svg[b-x7x5j0h6lx] { width: 30px; height: 30px; }
    .lg-title[b-x7x5j0h6lx] { font-size: clamp(26px, 8vw, 32px); }
    .lg-panel[b-x7x5j0h6lx] { padding-top: var(--s-5); }
}

/* Wide windows: one card in the middle instead of a sheet glued to the bottom. */
@media (min-width: 700px) {
    .lg-page[b-x7x5j0h6lx] { justify-content: center; align-items: center; padding: var(--s-7) var(--s-4); }
    .lg-top[b-x7x5j0h6lx] { position: absolute; top: var(--s-4); left: var(--s-4); }
    .lg-hero[b-x7x5j0h6lx] { flex: none; padding-bottom: var(--s-5); }
    .lg-panel[b-x7x5j0h6lx] {
        width: 100%;
        max-width: 460px;
        border: 1px solid var(--ioha-line);
        border-radius: var(--r-xl);
        margin-bottom: 0;
        padding-bottom: var(--s-6);
    }
}
/* _content/InstituteOfHumanAnatomy.Shared/Pages/MagicLinkCallback.razor.rz.scp.css */
/* Matches the sign-in page (Login.razor.css): the same red glow over ink, the same
   round badge, the shared primary button. Tokens come from app.css. */
.ml-page[b-sdhizddxqz] {
    display: grid;
    place-items: center;
    min-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: var(--s-6) var(--s-5);
    background:
        radial-gradient(90% 55% at 50% 0%, rgb(224 57 43 / .26), transparent 70%),
        var(--ioha-ink);
    color: var(--ioha-bone);
    font-family: var(--font-body);
}

.ml-card[b-sdhizddxqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.ml-badge[b-sdhizddxqz] {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--s-2);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, var(--ioha-red-bright), var(--ioha-red-strong) 70%);
    color: #fff;
    box-shadow: var(--glow-red), inset 0 -3px 0 rgb(0 0 0 / .18);
}

.ml-badge svg[b-sdhizddxqz] { width: 38px; height: 38px; }

.ml-badge.is-success[b-sdhizddxqz] {
    background: radial-gradient(circle at 50% 35%, #6be3a0, var(--ioha-success) 70%);
    color: #06210f;
    box-shadow: 0 8px 28px rgb(63 208 127 / .3);
}

.ml-badge.is-error[b-sdhizddxqz] {
    background: var(--ioha-surface-2);
    color: var(--ioha-red-bright);
    box-shadow: inset 0 0 0 1px rgb(224 57 43 / .45);
}

/* While validating the badge is just a ring, so the spinner is the only thing moving. */
.ml-badge:has(.ml-spinner)[b-sdhizddxqz] {
    background: transparent;
    box-shadow: none;
}

.ml-spinner[b-sdhizddxqz] { width: 44px; height: 44px; border-width: 4px; }

.ml-title[b-sdhizddxqz] {
    margin: 0;
    font-size: clamp(28px, 8vw, 36px);
    text-wrap: balance;
}

.ml-sub[b-sdhizddxqz] {
    margin: 0 0 var(--s-3);
    color: var(--ioha-bone-dim);
    font-size: 15px;
    line-height: 1.5;
}

.ml-error[b-sdhizddxqz] {
    margin: 0 0 var(--s-2);
    padding: 12px 14px;
    border: 1px solid rgb(224 57 43 / .45);
    border-radius: var(--r-md);
    background: var(--ioha-red-soft);
    color: #ffd2cc;
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.ml-link[b-sdhizddxqz] {
    display: inline-flex;
    align-items: center;
    min-height: var(--ioha-tap);
    color: var(--ioha-bone-dim);
    font-weight: 700;
    font-size: var(--fs-sm);
    text-decoration: underline;
    text-decoration-color: rgb(242 239 236 / .3);
    text-underline-offset: 3px;
}

/* "Stay signed in" on the switch-accounts card: the same quiet link, as a button. */
button.ml-link[b-sdhizddxqz] {
    padding: 0 var(--s-2);
    border: 0;
    background: none;
    font-family: var(--font-body);
    cursor: pointer;
}

button.ml-link:disabled[b-sdhizddxqz] {
    text-decoration: none;
    cursor: default;
}

.ml-note[b-sdhizddxqz] {
    margin: var(--s-2) 0 0;
    color: var(--ioha-muted);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.ml-sub strong[b-sdhizddxqz] { color: var(--ioha-bone); }

/* An email address moves to the next line whole rather than breaking at a hyphen; one
   wider than the card breaks inside, before the @ first (EmailText), never cut off. */
.ml-email[b-sdhizddxqz] {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}
/* _content/InstituteOfHumanAnatomy.Shared/Pages/Notifications.razor.rz.scp.css */
/* The inbox, in the shell's palette. Tokens and the shared button and skeleton classes
   come from app.css. The shell's main area scrolls, so this page only lays out. */

.nt-page[b-85x3bni2z0] {
    min-height: 100%;
    padding: var(--s-5) var(--s-4) var(--s-7);
    color: var(--ioha-bone);
}

.nt-shell[b-85x3bni2z0] {
    max-width: 560px;
    margin: 0 auto;
}

.nt-head[b-85x3bni2z0] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}

.nt-title[b-85x3bni2z0] {
    margin: var(--s-2) 0 0;
    font-size: clamp(30px, 8.5vw, 38px);
}

.nt-markall[b-85x3bni2z0] {
    flex: none;
    min-height: var(--ioha-tap);
    padding: 0 var(--s-3);
    border: 1px solid var(--ioha-line-strong);
    border-radius: var(--r-pill);
    background: var(--ioha-surface-1);
    color: var(--ioha-bone);
    font: 700 var(--fs-sm) var(--font-body);
    cursor: pointer;
}

.nt-list[b-85x3bni2z0] {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nt-sk[b-85x3bni2z0] { height: 84px; border-radius: var(--r-lg); }

.nt-item[b-85x3bni2z0] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 14px var(--s-4);
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-lg);
    background: var(--ioha-surface-1);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.nt-item.is-unread[b-85x3bni2z0] {
    border-color: rgb(224 57 43 / .4);
    background:
        linear-gradient(90deg, rgb(224 57 43 / .1), transparent 70%),
        var(--ioha-surface-1);
}

.nt-icon[b-85x3bni2z0] {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ioha-surface-3);
    color: var(--ioha-bone-dim);
}

.nt-icon[b-85x3bni2z0]  svg,
.nt-icon svg[b-85x3bni2z0] { width: 22px; height: 22px; }

.nt-icon.is-red[b-85x3bni2z0] { background: var(--ioha-red-soft); color: var(--ioha-red-bright); }
.nt-icon.is-gold[b-85x3bni2z0] { background: var(--ioha-gold-soft); color: var(--ioha-gold); }
.nt-icon.is-success[b-85x3bni2z0] { background: var(--ioha-success-soft); color: var(--ioha-success); }

.nt-body[b-85x3bni2z0] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.nt-item-title[b-85x3bni2z0] { font-size: 15px; font-weight: 800; }
.nt-item-msg[b-85x3bni2z0] { color: var(--ioha-bone-dim); font-size: var(--fs-sm); line-height: 1.45; }
.nt-time[b-85x3bni2z0] { margin-top: 2px; color: var(--ioha-subtle); font-size: var(--fs-xs); }

.nt-dot[b-85x3bni2z0] {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--ioha-red);
    box-shadow: 0 0 0 4px var(--ioha-red-soft);
}

/* Empty, signed-out and error states share one shape; only the words and icon differ. */
.nt-empty[b-85x3bni2z0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--s-7) var(--s-5);
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-xl);
    background:
        radial-gradient(90% 70% at 50% 0%, rgb(224 57 43 / .12), transparent 70%),
        var(--ioha-surface-1);
    text-align: center;
}

.nt-empty.is-error[b-85x3bni2z0] {
    background:
        radial-gradient(90% 70% at 50% 0%, rgb(245 165 36 / .1), transparent 70%),
        var(--ioha-surface-1);
}

.nt-empty-icon[b-85x3bni2z0] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--s-4);
    border-radius: 50%;
    background: var(--ioha-surface-3);
    color: var(--ioha-bone);
}

.nt-empty.is-error .nt-empty-icon[b-85x3bni2z0] { background: var(--ioha-warning-soft); color: var(--ioha-warning); }

.nt-empty-icon[b-85x3bni2z0]  svg,
.nt-empty-icon svg[b-85x3bni2z0] { width: 30px; height: 30px; }

.nt-empty-title[b-85x3bni2z0] {
    margin: 0 0 var(--s-2);
    font: 800 var(--fs-xl)/1.2 var(--font-display);
}

.nt-empty p[b-85x3bni2z0] {
    max-width: 26em;
    margin: 0 0 var(--s-5);
    color: var(--ioha-bone-dim);
    font-size: 15px;
    line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
    .nt-item:hover[b-85x3bni2z0] { border-color: var(--ioha-line-strong); }
    .nt-markall:hover[b-85x3bni2z0] { background: var(--ioha-surface-2); }
}
/* _content/InstituteOfHumanAnatomy.Shared/Pages/Premium.razor.rz.scp.css */
/* The paywall, on the shared tokens: ink ground with a warm gold glow, gold for
   everything Premium (and only Premium), red stays the game's action colour.
   The buy button docks to the bottom of the page's scroll with the renewal terms
   directly above it; who bills and the legal links are in the page. */

.pw-page[b-bj3wp465rl] {
    position: relative;
    height: 100%;
    overflow-y: auto;
    /* The short-page rules below query this box: the room between the top bar and the
       tab bar, which the safe areas shrink in the app, rather than the whole screen. */
    container: pw-page / size;
    /* What the dock covers (128px on the web, about 160px with the App Store's four-line
       renewal line), so a link or plan reached with the keyboard or Switch Control
       scrolls up clear of it instead of taking focus underneath it (WCAG 2.4.11). */
    scroll-padding-bottom: 172px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background:
        radial-gradient(110% 52% at 50% -6%, rgb(242 193 78 / .16), transparent 62%),
        radial-gradient(70% 36% at 100% 34%, rgb(224 57 43 / .07), transparent 70%),
        var(--ioha-ink);
    color: var(--ioha-bone);
    font-family: var(--font-body);
}

.pw-shell[b-bj3wp465rl] {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 480px;
    min-height: 100%;
    margin: 0 auto;
    padding: var(--s-2) var(--s-4) 0;
}

.pw-close[b-bj3wp465rl] {
    position: absolute;
    top: var(--s-1);
    left: 2px;
    z-index: 6;
    display: grid;
    place-items: center;
    width: var(--ioha-tap);
    height: var(--ioha-tap);
    border-radius: 50%;
    color: var(--ioha-muted);
    transition: transform var(--dur-1) var(--ease-out), color var(--dur-2), background-color var(--dur-2);
}

.pw-close svg[b-bj3wp465rl] { width: 22px; height: 22px; }
.pw-close:active[b-bj3wp465rl] { transform: scale(.9); }

@media (hover: hover) and (pointer: fine) {
    .pw-close:hover[b-bj3wp465rl] { color: var(--ioha-bone); background: var(--ioha-surface-1); }
}

/* --- hero ----------------------------------------------------------------- */

.pw-hero[b-bj3wp465rl] { text-align: center; }

/* A fan of study cards behind a gold crown: what Premium is, drawn without a word. */
.pw-art[b-bj3wp465rl] {
    position: relative;
    width: 240px;
    height: 108px;
    margin: var(--s-1) auto 0;
}

.pw-card[b-bj3wp465rl] {
    position: absolute;
    left: 50%;
    top: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 22px;
    width: 72px;
    height: 94px;
    margin-left: -36px;
    padding: 11px 6px 0;
    border: 1px solid var(--ioha-line-strong);
    border-radius: var(--r-md);
    background:
        linear-gradient(180deg, rgb(255 255 255 / .06), transparent 60%),
        var(--ioha-surface-2);
    box-shadow: var(--shadow-2);
    animation: pw-deal-b-bj3wp465rl 640ms var(--ease-out) backwards;
}

.pw-card b[b-bj3wp465rl] {
    color: var(--ioha-bone-dim);
    font: 800 9.5px/1 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* A small bone, built from a bar and two pairs of knuckles. */
.pw-card i[b-bj3wp465rl] {
    position: relative;
    width: 30px;
    height: 7px;
    border-radius: 4px;
    background: var(--ioha-bone);
    transform: rotate(-32deg);
}

.pw-card i[b-bj3wp465rl]::before,
.pw-card i[b-bj3wp465rl]::after {
    content: "";
    position: absolute;
    top: -5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ioha-bone);
    box-shadow: 0 8px 0 var(--ioha-bone);
}

.pw-card i[b-bj3wp465rl]::before { left: -5px; }
.pw-card i[b-bj3wp465rl]::after { right: -5px; }

.pw-card.is-a[b-bj3wp465rl] { transform: translateX(-62px) translateY(10px) rotate(-15deg); animation-delay: 40ms; }
.pw-card.is-b[b-bj3wp465rl] { transform: translateX(62px) translateY(10px) rotate(15deg); animation-delay: 120ms; }
.pw-card.is-c[b-bj3wp465rl] { transform: translateY(-4px); animation-delay: 80ms; }

/* The coin covers the centre card's bone; its top knuckle poked out above the coin's
   rim and read as a glitch. */
.pw-card.is-c i[b-bj3wp465rl] { visibility: hidden; }

/* One plan: nothing to choose between, so no radio (the gold border stays). */
.pw-plan-list.is-single .pw-plan-radio[b-bj3wp465rl] { display: none; }

@keyframes pw-deal-b-bj3wp465rl {
    from { transform: translateY(40px) rotate(0) scale(.8); opacity: 0; }
}

.pw-emblem[b-bj3wp465rl] {
    position: absolute;
    left: 50%;
    top: 44px;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-left: -36px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgb(255 255 255 / .35), transparent 52%),
        linear-gradient(150deg, #ffe08a, var(--ioha-gold) 45%, var(--ioha-gold-deep));
    color: #1a1408;
    box-shadow: 0 0 0 6px rgb(11 11 13 / .85), var(--glow-gold), inset 0 -4px 0 rgb(0 0 0 / .18);
    animation: ioha-pop var(--dur-4) var(--ease-spring) 200ms backwards, pw-float-b-bj3wp465rl 4.5s ease-in-out 900ms infinite;
}

.pw-emblem svg[b-bj3wp465rl] { width: 36px; height: 36px; }

@keyframes pw-float-b-bj3wp465rl {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.pw-hero-copy[b-bj3wp465rl] { margin-top: var(--s-4); }

.pw-kicker[b-bj3wp465rl] {
    margin: 0;
    color: var(--ioha-gold);
    font: 800 var(--fs-xs)/1.2 var(--font-body);
    letter-spacing: .18em;
    text-transform: uppercase;
}

.pw-title[b-bj3wp465rl] {
    margin: var(--s-2) auto 0;
    max-width: 16ch;
    font: 900 var(--fs-2xl)/1.05 var(--font-display);
    letter-spacing: -.02em;
}

.pw-lede[b-bj3wp465rl] {
    margin: var(--s-2) auto 0;
    max-width: 34ch;
    color: var(--ioha-bone-dim);
    font: 500 var(--fs-sm)/1.5 var(--font-body);
}

/* --- free vs premium ---------------------------------------------------------- */

.pw-compare[b-bj3wp465rl] {
    margin-top: var(--s-4);
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-lg);
    background: var(--ioha-surface-1);
    overflow: hidden;
    animation-delay: 160ms;
}

.pw-compare-row[b-bj3wp465rl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px 92px;
    align-items: stretch;
    border-top: 1px solid var(--ioha-line);
    color: var(--ioha-bone);
    font: 700 var(--fs-sm)/1.25 var(--font-body);
}

.pw-compare-row > span[b-bj3wp465rl] {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 var(--s-2);
}

.pw-compare-row > span:first-child[b-bj3wp465rl] { padding-left: var(--s-4); }

.pw-compare-row > span:nth-child(n+2)[b-bj3wp465rl] {
    justify-content: center;
    color: var(--ioha-muted);
    font-weight: 700;
    text-align: center;
}

/* The Premium column is one continuous gold band down the table. */
.pw-compare-row > .is-premium[b-bj3wp465rl] {
    background: rgb(242 193 78 / .08);
    color: var(--ioha-gold);
}

.pw-compare-row > .is-premium b[b-bj3wp465rl] { font: 900 var(--fs-sm)/1.1 var(--font-display); }

.pw-compare-row.is-head[b-bj3wp465rl] { border-top: 0; }

.pw-compare-row.is-head > span[b-bj3wp465rl] {
    min-height: 30px;
    padding-top: 4px;
    font: 800 var(--fs-xs)/1 var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pw-yes[b-bj3wp465rl] {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ioha-surface-3);
}

.pw-yes[b-bj3wp465rl]::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    width: 5px;
    height: 9px;
    border: solid var(--ioha-bone-dim);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pw-yes.is-gold[b-bj3wp465rl] { background: var(--ioha-gold); }
.pw-yes.is-gold[b-bj3wp465rl]::after { border-color: #1a1408; }

/* --- plans ---------------------------------------------------------------- */

.pw-plans[b-bj3wp465rl] { margin-top: var(--s-5); }

/* The full renewal terms, in the page under the plans (the dock carries the summary). */
.pw-legal[b-bj3wp465rl] {
    margin: var(--s-4) auto 0;
    max-width: 46ch;
    color: var(--ioha-muted);
    font: 500 12px/1.5 var(--font-body);
    text-align: center;
}

.pw-plan-list[b-bj3wp465rl] { display: grid; gap: var(--s-3); }

.pw-plan[b-bj3wp465rl] {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: 76px;
    padding: var(--s-3) var(--s-4);
    border: 2px solid var(--ioha-line-strong);
    border-radius: var(--r-lg);
    background: var(--ioha-surface-1);
    color: var(--ioha-bone);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--dur-1) var(--ease-out),
        border-color var(--dur-2) ease,
        box-shadow var(--dur-2) ease,
        background-color var(--dur-2) ease;
    animation: ioha-rise 420ms var(--ease-out) 220ms backwards;
}

.pw-plan:active[b-bj3wp465rl] { transform: scale(.98); }

.pw-plan.is-selected[b-bj3wp465rl] {
    border-color: var(--ioha-gold);
    background:
        linear-gradient(120deg, rgb(242 193 78 / .12), rgb(242 193 78 / .03) 60%),
        var(--ioha-surface-1);
    box-shadow: 0 0 0 4px rgb(242 193 78 / .1);
}

.pw-plan-radio[b-bj3wp465rl] {
    position: relative;
    width: 22px;
    height: 22px;
    border: 2px solid var(--ioha-line-strong);
    border-radius: 50%;
    transition: border-color var(--dur-2);
}

.pw-plan-radio[b-bj3wp465rl]::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--ioha-gold);
    transform: scale(0);
    transition: transform var(--dur-3) var(--ease-spring);
}

.pw-plan.is-selected .pw-plan-radio[b-bj3wp465rl] { border-color: var(--ioha-gold); }
.pw-plan.is-selected .pw-plan-radio[b-bj3wp465rl]::after { transform: scale(1); }

.pw-plan-main[b-bj3wp465rl] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.pw-plan-name[b-bj3wp465rl] { font: 900 var(--fs-lg)/1.1 var(--font-display); }

.pw-plan-note[b-bj3wp465rl] {
    color: var(--ioha-muted);
    font: 600 13px/1.3 var(--font-body);
}

.pw-plan-price[b-bj3wp465rl] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

/* The billed amount is the biggest price on the page (3.1.2(c)). */
.pw-plan-price strong[b-bj3wp465rl] {
    font: 900 26px/1 var(--font-display);
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.pw-plan-price small[b-bj3wp465rl] {
    color: var(--ioha-muted);
    font: 700 var(--fs-xs)/1 var(--font-body);
}

.pw-plan-flag[b-bj3wp465rl] {
    position: absolute;
    top: -11px;
    right: var(--s-4);
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--ioha-gold);
    color: #1a1408;
    font: 900 11px/1.2 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 0 0 3px var(--ioha-ink);
}

.pw-plan-skel[b-bj3wp465rl] { height: 76px; border-radius: var(--r-lg); }

/* --- web, checkout not open ---------------------------------------------------- */

.pw-soon[b-bj3wp465rl] {
    margin-top: var(--s-5);
    padding: var(--s-5) var(--s-4);
    border: 1px solid rgb(242 193 78 / .28);
    border-radius: var(--r-lg);
    background:
        radial-gradient(120% 110% at 100% 0, rgb(242 193 78 / .1), transparent 60%),
        var(--ioha-surface-1);
    animation-delay: 220ms;
}

.pw-soon h2[b-bj3wp465rl] {
    margin: 0;
    color: var(--ioha-bone);
    font: 900 var(--fs-xl)/1.15 var(--font-display);
}

.pw-soon p[b-bj3wp465rl] {
    margin: var(--s-2) 0 var(--s-4);
    color: var(--ioha-bone-dim);
    font: 500 var(--fs-sm)/1.5 var(--font-body);
}

/* --- proof, messages ----------------------------------------------------------- */

.pw-proof[b-bj3wp465rl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    margin: var(--s-3) 0 0;
    color: var(--ioha-muted);
    font: 600 13px/1.35 var(--font-body);
    text-align: left;
}

.pw-proof img[b-bj3wp465rl] { flex: none; opacity: .9; }
.pw-proof b[b-bj3wp465rl] { color: var(--ioha-bone-dim); font-weight: 800; }

.pw-message[b-bj3wp465rl] {
    margin: var(--s-4) 0 0;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-md);
    background: var(--ioha-surface-1);
    color: var(--ioha-bone-dim);
    font: 600 var(--fs-sm)/1.45 var(--font-body);
    animation: ioha-rise 320ms var(--ease-out) backwards;
}

.pw-message.is-error[b-bj3wp465rl] {
    border-color: rgb(224 57 43 / .45);
    background: var(--ioha-red-soft);
    color: #ffd8d2;
}

/* --- the buy dock ----------------------------------------------------------------- */

/* Sticky at the bottom of the page's scroll, so the renewal line and the button above
   the tab bar stay put while the page scrolls under them. Opaque, with a short fade
   over its top edge (below), so a line scrolling under it fades out rather than being
   cut through. It is the last thing in the flow and takes its own height there (no
   padding stands in for it), so scrolled to the end it sits below the links rather than
   over them. Its height never changes with the page's state: messages go in the page.
   A fixed top margin, not auto: where the page fits the screen (an iPad, a desk) it
   follows the links instead of floating at the bottom of the screen. */
.pw-buy[b-bj3wp465rl] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: var(--s-4) calc(-1 * var(--s-4)) 0;
    /* 16px under the button: the tab bar's 14px fade lies over the bottom of the page. */
    padding: var(--s-3) var(--s-4) var(--s-4);
    border-top: 1px solid var(--ioha-line);
    background: var(--ioha-ink);
}

/* The page fades into the dock over 24px, so a line of text meeting the dock's edge
   fades out instead of showing cut through. Eased, nearly clear at the top, so a plan
   card ending just above it (19px at 360x780) is not dimmed. In the flow (the page
   scrolled to the end, or short enough to fit) it lies over the margin above the dock
   and the empty lower edge of the links' tap targets. */
.pw-buy[b-bj3wp465rl]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 24px;
    margin-bottom: 1px;
    background: linear-gradient(to bottom, rgb(11 11 13 / 0), rgb(11 11 13 / .12) 25%, rgb(11 11 13 / .75) 60%, var(--ioha-ink) 92%);
    pointer-events: none;
}

/* From 900px the tab bar moves into the top row, so nothing under the page pays for the
   home indicator in the edge-to-edge app (an iPad that wide): the dock does. On phones
   the tab bar's row already does, so it stays out of this. */
@media (min-width: 900px) {
    .pw-buy[b-bj3wp465rl] { padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); }
}

.pw-buy[b-bj3wp465rl]  .pw-cta {
    min-height: 56px;
    font-size: var(--fs-lg);
}

/* Price and period, the renewal and where to cancel (and on the App Store the title and
   the 24-hour rule), directly above the button. Two lines are kept while the plans load,
   so the dock does not jump when they arrive. As wide as the column, so the App Store
   line is three lines rather than four wherever there is room. */
.pw-dock-terms[b-bj3wp465rl] {
    min-height: 2.9em;
    margin: 0 auto var(--s-2);
    color: var(--ioha-bone-dim);
    font: 500 12px/1.45 var(--font-body);
    text-align: center;
    text-wrap: balance;
}

.pw-links[b-bj3wp465rl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: var(--s-1);
    color: var(--ioha-subtle);
    font-size: 12px;
}

/* The documents wrap as one group, so no line ends on a dangling dot. */
.pw-links-docs[b-bj3wp465rl] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* Restore and the documents share one row where it fits (at 12px Manrope the row is
   about 366px with Apple's EULA and 317px without, in a column the width of the screen
   less 32px). Narrower, Restore takes its own line and the dot between the groups goes. */
@media (max-width: 379px) {
    .pw-links[b-bj3wp465rl] { flex-direction: column; }
    .pw-links-sep[b-bj3wp465rl] { display: none; }
}

@media (max-width: 429px) {
    .pw-links.has-eula[b-bj3wp465rl] { flex-direction: column; }
    .pw-links.has-eula .pw-links-sep[b-bj3wp465rl] { display: none; }
}

.pw-link[b-bj3wp465rl] {
    display: inline-flex;
    align-items: center;
    min-height: var(--ioha-tap);
    padding: 0 var(--s-2);
    border: 0;
    background: none;
    color: var(--ioha-bone-dim);
    font: 700 12px/1 var(--font-body);
    text-decoration: underline;
    text-decoration-color: var(--ioha-line-strong);
    text-underline-offset: 3px;
    cursor: pointer;
}

.pw-link:disabled[b-bj3wp465rl] { opacity: .5; cursor: default; }

/* --- you're premium ---------------------------------------------------------------- */

.pw-done[b-bj3wp465rl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: var(--s-8) 0 var(--s-5);
    text-align: center;
}

.pw-medal-wrap[b-bj3wp465rl] {
    position: relative;
    display: grid;
    place-items: center;
    width: 116px;
    height: 116px;
}

.pw-medal[b-bj3wp465rl] {
    position: relative;
    display: grid;
    place-items: center;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgb(255 255 255 / .38), transparent 52%),
        linear-gradient(150deg, #ffe08a, var(--ioha-gold) 45%, var(--ioha-gold-deep));
    color: #1a1408;
    box-shadow: 0 0 0 8px rgb(242 193 78 / .12), 0 12px 48px rgb(242 193 78 / .35), inset 0 -5px 0 rgb(0 0 0 / .18);
}

.pw-medal svg[b-bj3wp465rl] { position: relative; width: 58px; height: 58px; }

/* Slow light rays behind the medal (earlier in the markup, so the medal paints over
   them). They stop under Reduce Motion with everything else. */
.pw-medal-rays[b-bj3wp465rl] {
    position: absolute;
    inset: -46px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgb(242 193 78 / .16) 0 9deg, transparent 9deg 22deg);
    -webkit-mask: radial-gradient(circle, #000 34%, transparent 70%);
    mask: radial-gradient(circle, #000 34%, transparent 70%);
    animation: pw-spin-b-bj3wp465rl 24s linear infinite;
}

@keyframes pw-spin-b-bj3wp465rl { to { transform: rotate(360deg); } }

.pw-done-copy[b-bj3wp465rl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--s-6);
}

.pw-done-copy .pw-title[b-bj3wp465rl] { margin-top: var(--s-3); font-size: 34px; }

.pw-fine[b-bj3wp465rl] {
    margin: var(--s-2) 0 0;
    color: var(--ioha-muted);
    font: 600 13px/1.45 var(--font-body);
}

.pw-done-actions[b-bj3wp465rl] { width: 100%; margin-top: var(--s-6); }

.pw-keep[b-bj3wp465rl] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--s-3);
    width: 100%;
    margin-top: var(--s-4);
    padding: var(--s-4);
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-lg);
    background: var(--ioha-surface-1);
    text-align: left;
    animation: ioha-rise 420ms var(--ease-out) 300ms backwards;
}

.pw-keep.is-handoff[b-bj3wp465rl] { grid-template-columns: minmax(0, 1fr); border-color: rgb(242 193 78 / .3); }
.pw-keep > :last-child[b-bj3wp465rl] { grid-column: 1 / -1; }

.pw-keep-icon[b-bj3wp465rl] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    background: var(--ioha-gold-soft);
    color: var(--ioha-gold);
}

.pw-keep-icon svg[b-bj3wp465rl] { width: 22px; height: 22px; }

.pw-keep-text[b-bj3wp465rl] { display: flex; flex-direction: column; gap: 4px; }
.pw-keep-text strong[b-bj3wp465rl] { font: 900 var(--fs-md)/1.2 var(--font-display); }
.pw-keep-text span[b-bj3wp465rl] { color: var(--ioha-bone-dim); font: 500 13px/1.45 var(--font-body); }
.pw-keep-text b[b-bj3wp465rl] { color: var(--ioha-bone); }

.pw-manage[b-bj3wp465rl] { width: 100%; margin-top: var(--s-3); }
.pw-manage .pw-fine[b-bj3wp465rl] { text-align: center; }

/* --- small and short screens -------------------------------------------------------- */

/* A short page (the iPhone 17e app, whose safe areas leave about 650px of it, or a
   360x780 or 375x812 browser): the picture shrinks and the hero tightens, so the plan
   card sits above the dock (about 128px with a two-line renewal line) at first view. */
@container pw-page (max-height: 700px) {
    .pw-art[b-bj3wp465rl] { height: 96px; transform: scale(.82); transform-origin: 50% 0; margin-bottom: -6px; }
    .pw-hero-copy[b-bj3wp465rl] { margin-top: var(--s-2); }
    .pw-title[b-bj3wp465rl] { font-size: 26px; }
    .pw-compare-row > span[b-bj3wp465rl] { min-height: 34px; }
    .pw-plans[b-bj3wp465rl] { margin-top: var(--s-4); }
    .pw-done[b-bj3wp465rl] { padding-top: var(--s-6); }
}

/* A page up to 740px with a long renewal line in the dock (the App Store's three or four
   lines, up to 35px more dock than the web's two): the picture is a little smaller, the
   lede takes two lines instead of three and the button is 50px, so the plan card stays
   above the dock with the picture still there, from an iPhone 17e (about 650px of page)
   to an XR or 11 (about 705px). Nothing here also changes in the tiers below, which
   would lose to these more specific rules. */
@container pw-page (max-height: 740px) {
    .pw-page.has-long-terms .pw-art[b-bj3wp465rl] { height: 84px; transform: scale(.72); transform-origin: 50% 0; margin-bottom: -6px; }
    .pw-page.has-long-terms .pw-hero-copy[b-bj3wp465rl] { margin-top: var(--s-2); }
    .pw-page.has-long-terms .pw-title[b-bj3wp465rl] { font-size: 26px; }
    .pw-page.has-long-terms .pw-lede[b-bj3wp465rl] { max-width: none; font-size: 13px; line-height: 1.4; }
    .pw-page.has-long-terms .pw-buy[b-bj3wp465rl]  .pw-cta { min-height: 50px; }
}

/* Shorter still (a 13 mini or an SE, a small Android with its bars showing, a 375x667
   browser): the plans matter more than the picture, so the picture goes, and the rest
   tightens so the plan card sits above the dock. */
@container pw-page (max-height: 640px) {
    .pw-art[b-bj3wp465rl] { display: none; }
    .pw-hero-copy[b-bj3wp465rl] { margin-top: var(--s-2); }
    .pw-title[b-bj3wp465rl] { margin-top: var(--s-1); }
    .pw-lede[b-bj3wp465rl] { max-width: none; margin-top: var(--s-1); font-size: 13px; line-height: 1.4; }
    .pw-proof[b-bj3wp465rl] { margin-top: var(--s-2); }
    .pw-compare[b-bj3wp465rl] { margin-top: var(--s-3); }
    .pw-compare-row > span[b-bj3wp465rl] { min-height: 33px; }
    .pw-compare-row.is-head > span[b-bj3wp465rl] { min-height: 26px; }
    .pw-plans[b-bj3wp465rl] { margin-top: var(--s-3); }
    .pw-plan[b-bj3wp465rl] { min-height: 68px; padding-block: var(--s-2); }
    .pw-buy[b-bj3wp465rl]  .pw-cta { min-height: 50px; }
}

/* A 320x568 phone (or an SE with Display Zoom), where the renewal line takes three lines,
   four on the App Store: the credit line and the lede go too. The headline and the table
   still say what Premium is. */
@container pw-page (max-height: 500px) {
    .pw-lede[b-bj3wp465rl], .pw-proof[b-bj3wp465rl] { display: none; }
    .pw-compare-row > span[b-bj3wp465rl] { min-height: 30px; }
}

/* Without container queries (iOS 15), the screen's height stands in for the page's, so
   the thresholds allow for the app's chrome. On a phone with a notch the top bar, the tab
   bar and the safe areas take about 190px: an 812pt 13 mini or X leaves about 620px of
   page, an 844pt 12 or 13 about 655px, an 896pt XR or 11 about 705px (the tallest that
   needs the long-terms rules). On a phone with a Home button they take about 110px: a
   667pt SE leaves 555px, a 568pt SE 456px. A browser this old gets a slightly tighter
   page than it needs, never a looser one. The rules are the tiers above. */
@supports not (container-type: size) {
    @media (max-height: 880px) {
        .pw-art[b-bj3wp465rl] { height: 96px; transform: scale(.82); transform-origin: 50% 0; margin-bottom: -6px; }
        .pw-hero-copy[b-bj3wp465rl] { margin-top: var(--s-2); }
        .pw-title[b-bj3wp465rl] { font-size: 26px; }
        .pw-compare-row > span[b-bj3wp465rl] { min-height: 34px; }
        .pw-plans[b-bj3wp465rl] { margin-top: var(--s-4); }
        .pw-done[b-bj3wp465rl] { padding-top: var(--s-6); }
    }

    @media (max-height: 930px) {
        .pw-page.has-long-terms .pw-art[b-bj3wp465rl] { height: 84px; transform: scale(.72); transform-origin: 50% 0; margin-bottom: -6px; }
        .pw-page.has-long-terms .pw-hero-copy[b-bj3wp465rl] { margin-top: var(--s-2); }
        .pw-page.has-long-terms .pw-title[b-bj3wp465rl] { font-size: 26px; }
        .pw-page.has-long-terms .pw-lede[b-bj3wp465rl] { max-width: none; font-size: 13px; line-height: 1.4; }
        .pw-page.has-long-terms .pw-buy[b-bj3wp465rl]  .pw-cta { min-height: 50px; }
    }

    @media (max-height: 830px) {
        .pw-art[b-bj3wp465rl] { display: none; }
        .pw-hero-copy[b-bj3wp465rl] { margin-top: var(--s-2); }
        .pw-title[b-bj3wp465rl] { margin-top: var(--s-1); }
        .pw-lede[b-bj3wp465rl] { max-width: none; margin-top: var(--s-1); font-size: 13px; line-height: 1.4; }
        .pw-proof[b-bj3wp465rl] { margin-top: var(--s-2); }
        .pw-compare[b-bj3wp465rl] { margin-top: var(--s-3); }
        .pw-compare-row > span[b-bj3wp465rl] { min-height: 33px; }
        .pw-compare-row.is-head > span[b-bj3wp465rl] { min-height: 26px; }
        .pw-plans[b-bj3wp465rl] { margin-top: var(--s-3); }
        .pw-plan[b-bj3wp465rl] { min-height: 68px; padding-block: var(--s-2); }
        .pw-buy[b-bj3wp465rl]  .pw-cta { min-height: 50px; }
    }

    @media (max-height: 620px) {
        .pw-lede[b-bj3wp465rl], .pw-proof[b-bj3wp465rl] { display: none; }
        .pw-compare-row > span[b-bj3wp465rl] { min-height: 30px; }
    }
}

@media (max-width: 359px) {
    .pw-compare-row[b-bj3wp465rl] { grid-template-columns: minmax(0, 1fr) 54px 80px; font-size: 13px; }
}

/* A desk-sized window: the sheet-like column floats on the glow. */
@media (min-width: 900px) {
    .pw-shell[b-bj3wp465rl] { padding-top: var(--s-6); }
}

/* The store returned no plans: a retry instead of a price. */
.pw-plans-error[b-bj3wp465rl] {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-4);
    border: 1px solid var(--ioha-line-strong);
    border-radius: var(--r-lg);
    background: var(--ioha-surface-1);
    text-align: center;
}

.pw-plans-error p[b-bj3wp465rl] {
    margin: 0;
    color: var(--ioha-bone-dim);
    font: 600 14px/1.45 var(--font-body);
}
/* _content/InstituteOfHumanAnatomy.Shared/Pages/Ranks.razor.rz.scp.css */
/*
   Ranks. Built on the global tokens (app.css :root) like the rest of the game:
   the old navy ground (#0b0f19) and slate text showed as a seam under the shell's
   top bar and above the tab bar.

   The page does not scroll itself: GameLayout's main column does. That is what
   lets the player's own row use position: sticky against the real viewport and
   stay in view while the board scrolls past it.
*/

.lb-page[b-h4tlspz0yw] {
    min-height: 100%;
    background:
        radial-gradient(90% 260px at 50% -40px, rgb(242 193 78 / .07), transparent 70%),
        var(--ioha-ink);
    color: var(--ioha-bone);
    font-family: var(--font-body);
}

.lb-shell[b-h4tlspz0yw] {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--s-5) var(--s-4) var(--s-6);
}

/* --- Header ------------------------------------------------------------------ */

.lb-head[b-h4tlspz0yw] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

.lb-head-text[b-h4tlspz0yw] { min-width: 0; }

.lb-kicker[b-h4tlspz0yw] {
    margin: 0 0 6px;
    color: var(--ioha-red-bright);
    font: 800 var(--fs-xs)/1.2 var(--font-body);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.lb-title[b-h4tlspz0yw] {
    margin: 0;
    color: var(--ioha-bone);
    font: 900 var(--fs-2xl)/1.02 var(--font-display);
    letter-spacing: -.02em;
}

/* Where you stand, before you have scrolled to find yourself. */
.lb-head-rank[b-h4tlspz0yw] {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    padding: 8px 12px;
    border-radius: var(--r-md);
    background: var(--ioha-red-soft);
    box-shadow: inset 0 0 0 1px rgb(224 57 43 / .4);
}

.lb-head-rank-n[b-h4tlspz0yw] {
    color: var(--ioha-bone);
    font: 900 var(--fs-xl)/1 var(--font-display);
    font-variant-numeric: tabular-nums;
}

.lb-head-rank-of[b-h4tlspz0yw] {
    color: var(--ioha-bone-dim);
    font: 700 var(--fs-xs)/1 var(--font-body);
}

/* --- Segmented control ----------------------------------------------------------
   One thumb slides under the labels instead of each tab lighting up, so a switch
   reads as one motion. --seg-i is set inline from the selected index. */

.lb-seg[b-h4tlspz0yw] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 4px;
    border-radius: var(--r-pill);
    background: var(--ioha-surface-1);
    box-shadow: inset 0 0 0 1px var(--ioha-line);
}

.lb-seg-thumb[b-h4tlspz0yw] {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 4);
    border-radius: var(--r-pill);
    background: var(--ioha-red-soft);
    box-shadow: inset 0 0 0 1px rgb(224 57 43 / .55);
    transform: translateX(calc(var(--seg-i, 0) * 100%));
    transition: transform var(--dur-3) var(--ease-spring);
}

.lb-seg-tab[b-h4tlspz0yw] {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: var(--ioha-tap);
    padding: 0 4px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ioha-muted);
    font: 800 var(--fs-sm)/1 var(--font-body);
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-2) ease, transform var(--dur-1) var(--ease-out);
}

.lb-seg-tab:active[b-h4tlspz0yw] { transform: scale(.96); }
.lb-seg-tab.is-active[b-h4tlspz0yw] { color: var(--ioha-bone); }

@media (hover: hover) and (pointer: fine) {
    .lb-seg-tab:not(.is-active):hover[b-h4tlspz0yw] { color: var(--ioha-bone-dim); }
}

.lb-caption[b-h4tlspz0yw] {
    margin: var(--s-3) 2px var(--s-4);
    color: var(--ioha-muted);
    font: 600 var(--fs-sm)/1.4 var(--font-body);
}

/* --- Podium -------------------------------------------------------------------- */

.lb-podium[b-h4tlspz0yw] {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--s-2);
    margin: var(--s-2) 0 var(--s-5);
    padding: 0;
}

/* Medal colours. Gold is the brand's own; silver and bronze exist only here. */
.lb-pod[b-h4tlspz0yw] {
    --medal: var(--ioha-line-strong);
    --medal-soft: rgb(255 255 255 / .04);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    animation: ioha-rise 560ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 110ms);
}

.lb-pod.is-gold[b-h4tlspz0yw] { --medal: var(--ioha-gold); --medal-soft: rgb(242 193 78 / .2); }
.lb-pod.is-silver[b-h4tlspz0yw] { --medal: #c9ccd3; --medal-soft: rgb(201 204 211 / .15); }
.lb-pod.is-bronze[b-h4tlspz0yw] { --medal: #da9561; --medal-soft: rgb(218 149 97 / .16); }

/* Rank order in the DOM, winner in the middle on screen. is-place-N is only
   this; how tall a column stands and whether it wears the crown follow
   is-rank-N, so a tie for first is two first-place columns. */
.lb-pod.is-place-1[b-h4tlspz0yw] { order: 2; }
.lb-pod.is-place-2[b-h4tlspz0yw] { order: 1; }
.lb-pod.is-place-3[b-h4tlspz0yw] { order: 3; }

.lb-pod-who[b-h4tlspz0yw] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding: 0 2px 10px;
}

/* A soft spotlight behind the winner. */
.lb-pod.is-rank-1 .lb-pod-who[b-h4tlspz0yw]::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 4px;
    width: 140px;
    height: 120px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgb(242 193 78 / .22), transparent);
    pointer-events: none;
}

.lb-pod-crown[b-h4tlspz0yw] {
    width: 26px;
    height: 26px;
    margin-bottom: -6px;
    fill: var(--ioha-gold);
    filter: drop-shadow(0 2px 6px rgb(242 193 78 / .5));
    animation: ioha-pop var(--dur-4) var(--ease-spring) backwards;
    animation-delay: 480ms;
}

.lb-pod-avatar[b-h4tlspz0yw] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: hsl(var(--hue, 8) 34% 27%);
    color: var(--ioha-bone);
    font: 900 20px/1 var(--font-display);
    box-shadow: 0 0 0 3px var(--ioha-ink), 0 0 0 5px var(--medal);
}

.lb-pod.is-rank-1 .lb-pod-avatar[b-h4tlspz0yw] {
    width: 64px;
    height: 64px;
    font-size: 25px;
    box-shadow: 0 0 0 3px var(--ioha-ink), 0 0 0 5px var(--medal), var(--glow-gold);
}

/* Placeholder names: a bone on the name's own colour (see Avatar in the page). */
.lb-pod-avatar.is-anon[b-h4tlspz0yw] { color: hsl(var(--hue, 8) 62% 78%); }
.lb-pod-avatar .lb-bone[b-h4tlspz0yw] { width: 54%; height: 54%; }

.lb-pod-avatar.is-open[b-h4tlspz0yw] {
    background: transparent;
    color: var(--ioha-subtle);
    box-shadow: none;
    border: 2px dashed var(--ioha-line-strong);
}

/* Up to two lines, so "Anatomist 482113" breaks at its space instead of losing
   the number that tells two placeholders apart. */
.lb-pod-name[b-h4tlspz0yw] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    color: var(--ioha-bone);
    font: 800 var(--fs-sm)/1.2 var(--font-body);
    text-align: center;
}

.lb-pod.is-open .lb-pod-name[b-h4tlspz0yw] { color: var(--ioha-subtle); font-weight: 700; }

.lb-pod.is-you .lb-pod-avatar[b-h4tlspz0yw] { box-shadow: 0 0 0 3px var(--ioha-ink), 0 0 0 5px var(--ioha-red-bright), var(--glow-red); }
.lb-pod.is-you .lb-pod-name[b-h4tlspz0yw] { color: var(--ioha-red-bright); }

.lb-pod-score[b-h4tlspz0yw] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
}

.lb-pod-plinth[b-h4tlspz0yw] {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 58px;
    padding-top: 10px;
    border-radius: var(--r-md) var(--r-md) 6px 6px;
    background:
        linear-gradient(180deg, var(--medal-soft), transparent 90%),
        var(--ioha-surface-1);
    box-shadow: inset 0 2px 0 var(--medal), inset 0 0 0 1px var(--ioha-line);
}

.lb-pod.is-rank-1 .lb-pod-plinth[b-h4tlspz0yw] { height: 86px; }
.lb-pod.is-rank-3 .lb-pod-plinth[b-h4tlspz0yw] { height: 44px; }
.lb-pod.is-open .lb-pod-plinth[b-h4tlspz0yw] { box-shadow: inset 0 0 0 1px var(--ioha-line); background: transparent; border: 1px dashed var(--ioha-line); }

.lb-pod-rank[b-h4tlspz0yw] {
    color: var(--medal);
    font: 900 26px/1 var(--font-display);
}

.lb-pod.is-rank-1 .lb-pod-rank[b-h4tlspz0yw] { font-size: 34px; }
.lb-pod.is-open .lb-pod-rank[b-h4tlspz0yw] { color: var(--ioha-subtle); font-size: 22px; }

/* --- Rows ----------------------------------------------------------------------- */

.lb-list[b-h4tlspz0yw] {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
}

/* Your own row, in the list: it scrolls with the board while it is on screen,
   and holds at the top or bottom edge once it would leave it, so you can always
   see where you stand next to whoever you are looking at. */
.lb-item.is-you[b-h4tlspz0yw] {
    position: sticky;
    top: 0;
    bottom: 0;
    z-index: 2;
    /* An ink margin that travels with it, so once it is stuck the rows sliding
       underneath are masked rather than peeking out at its edges. The negative
       margin keeps the list's spacing unchanged while it is not stuck. */
    margin: -6px 0;
    padding: 6px 0;
    background: var(--ioha-ink);
}

/* It arrives first and only slides, never fades: while the list rises in, the
   player's own row can already be stuck over other rows, and a row still
   fading in shows their names through it. (The global reduced-motion switch
   still applies; this only replaces the stagger's fade for these rows.) */
.lb-list > .lb-item.is-you[b-h4tlspz0yw],
.lb-row.is-pinned[b-h4tlspz0yw] {
    animation: lb-you-in-b-h4tlspz0yw 420ms var(--ease-out) backwards;
}

@keyframes lb-you-in-b-h4tlspz0yw {
    from { transform: translateY(16px); }
}

.lb-row[b-h4tlspz0yw] {
    position: relative;
    display: grid;
    grid-template-columns: 26px 40px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s-3);
    min-height: 60px;
    padding: 8px 14px 8px 8px;
    border-radius: var(--r-md);
    background: var(--ioha-surface-1);
    box-shadow: inset 0 0 0 1px var(--ioha-line);
    color: var(--ioha-bone);
    text-decoration: none;
}

.lb-rank[b-h4tlspz0yw] {
    color: var(--ioha-muted);
    font: 800 var(--fs-sm)/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.lb-avatar[b-h4tlspz0yw] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: hsl(var(--hue, 8) 34% 27%);
    color: var(--ioha-bone);
    font: 900 16px/1 var(--font-display);
}

/* Placeholder names: a bone in a light tint of the name's own colour. */
.lb-avatar.is-anon[b-h4tlspz0yw] { color: hsl(var(--hue, 8) 62% 78%); }

/* The signed-out "You" row: nobody yet, so no colour. */
.lb-avatar.is-ghost[b-h4tlspz0yw] {
    background: var(--ioha-surface-3);
    color: var(--ioha-muted);
}

.lb-avatar svg[b-h4tlspz0yw] {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lb-avatar svg.lb-bone[b-h4tlspz0yw],
.lb-pod-avatar svg.lb-bone[b-h4tlspz0yw] {
    fill: currentColor;
    stroke: none;
}

.lb-name[b-h4tlspz0yw] {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
    font: 700 var(--fs-md)/1.2 var(--font-body);
}

.lb-name-text[b-h4tlspz0yw] {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The player's own row: name on top, then the tag, the movement since
   yesterday and (counting boards) the flame. The "You" rows that stand in for
   a missing or signed-out player stack their hint the same way. */
.lb-row.is-you .lb-name[b-h4tlspz0yw],
.lb-name.is-stacked[b-h4tlspz0yw] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
}

.lb-name.is-stacked[b-h4tlspz0yw] { gap: 3px; }

.lb-name-meta[b-h4tlspz0yw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.lb-you-tag[b-h4tlspz0yw] {
    flex: none;
    padding: 3px 7px;
    border-radius: var(--r-pill);
    background: var(--ioha-red-strong);
    color: var(--ioha-on-red);
    font: 800 var(--fs-xs)/1 var(--font-body);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.lb-score[b-h4tlspz0yw] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-3);
}

.lb-flame[b-h4tlspz0yw] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--ioha-bone-dim);
    font: 900 var(--fs-sm)/1 var(--font-display);
    font-variant-numeric: tabular-nums;
}

.lb-flame-icon[b-h4tlspz0yw] { width: 18px; height: 18px; flex: none; }
.lb-flame-outer[b-h4tlspz0yw] { fill: var(--ioha-red); }
.lb-flame-inner[b-h4tlspz0yw] { fill: var(--ioha-gold); }

.lb-flame.is-small[b-h4tlspz0yw] { color: var(--ioha-muted); }
.lb-flame.is-small .lb-flame-icon[b-h4tlspz0yw] { width: 15px; height: 15px; }

.lb-flame.is-big[b-h4tlspz0yw] {
    color: var(--ioha-bone);
    font-size: var(--fs-lg);
}

.lb-flame.is-big .lb-flame-icon[b-h4tlspz0yw] { width: 22px; height: 22px; }

.lb-count[b-h4tlspz0yw] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-width: 3ch;
    color: var(--ioha-bone);
    font: 900 var(--fs-lg)/1 var(--font-display);
    font-variant-numeric: tabular-nums;
}

.lb-check[b-h4tlspz0yw] {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--ioha-success);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lb-pod-score .lb-count[b-h4tlspz0yw] { font-size: var(--fs-lg); }

/* "You vs yesterday" */
.lb-change[b-h4tlspz0yw] {
    flex: none;
    padding: 3px 7px;
    border-radius: var(--r-pill);
    font: 800 var(--fs-xs)/1 var(--font-body);
    font-variant-numeric: tabular-nums;
}

.lb-change.is-up[b-h4tlspz0yw] { background: var(--ioha-success-soft); color: var(--ioha-success); }
.lb-change.is-down[b-h4tlspz0yw] { background: var(--ioha-red-soft); color: var(--ioha-red-bright); }
.lb-change.is-same[b-h4tlspz0yw] { background: var(--ioha-surface-3); color: var(--ioha-bone-dim); }

/* The player's own row: the one thing on this screen they are looking for. */
.lb-row.is-you[b-h4tlspz0yw] {
    background:
        linear-gradient(90deg, rgb(224 57 43 / .24), rgb(224 57 43 / .08)),
        var(--ioha-surface-2);
    box-shadow: inset 0 0 0 1.5px rgb(224 57 43 / .7), var(--shadow-2);
}

.lb-row.is-you .lb-rank[b-h4tlspz0yw] { color: var(--ioha-red-bright); }

/* Off the end of the rows sent (or not on this board yet): pinned to the
   bottom of the screen above the tab bar. */
.lb-pin[b-h4tlspz0yw] {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: var(--s-1);
    padding: 6px 0;
    background: var(--ioha-ink);
}

.lb-row.is-missing[b-h4tlspz0yw] {
    grid-template-columns: 26px 40px minmax(0, 1fr);
    background: var(--ioha-surface-1);
    box-shadow: inset 0 0 0 1px var(--ioha-line-strong), var(--shadow-2);
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-1) var(--ease-out);
}

.lb-row.is-missing:active[b-h4tlspz0yw] { transform: scale(.98); }

.lb-missing-hint[b-h4tlspz0yw] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ioha-red-bright);
    font: 700 var(--fs-sm)/1.2 var(--font-body);
}

.lb-missing-hint[b-h4tlspz0yw]::after { content: " \2192"; }

.lb-total[b-h4tlspz0yw] {
    margin: var(--s-4) 0 0;
    color: var(--ioha-muted);
    font: 700 var(--fs-xs)/1.4 var(--font-body);
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

/* --- Name nudge ----------------------------------------------------------------- */

.lb-nudge[b-h4tlspz0yw] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 20px;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: 64px;
    margin: 0 0 var(--s-4);
    padding: 10px 12px 10px 10px;
    border: 1px solid rgb(242 193 78 / .4);
    border-radius: var(--r-lg);
    background:
        linear-gradient(90deg, var(--ioha-gold-soft), rgb(242 193 78 / .04)),
        var(--ioha-surface-1);
    color: var(--ioha-bone);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2) ease;
}

.lb-nudge:active[b-h4tlspz0yw] { transform: scale(.98); }

@media (hover: hover) and (pointer: fine) {
    .lb-nudge:hover[b-h4tlspz0yw] { border-color: rgb(242 193 78 / .7); }
}

.lb-nudge-text[b-h4tlspz0yw] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.lb-nudge-lead[b-h4tlspz0yw] {
    overflow-wrap: anywhere;
    font: 700 var(--fs-sm)/1.25 var(--font-body);
}

/* "Anatomist 291838" is one name: it moves down whole rather than splitting. */
.lb-handle[b-h4tlspz0yw] { white-space: nowrap; }

.lb-nudge-sub[b-h4tlspz0yw] {
    color: var(--ioha-gold);
    font: 800 var(--fs-sm)/1.25 var(--font-body);
}

.lb-nudge-go svg[b-h4tlspz0yw] {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--ioha-gold);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Signed out ------------------------------------------------------------------ */

.lb-join[b-h4tlspz0yw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    margin: 0 0 var(--s-5);
    padding: var(--s-6) var(--s-5) var(--s-5);
    background:
        radial-gradient(120% 90% at 50% 0%, rgb(242 193 78 / .13), transparent 62%),
        var(--ioha-surface-2);
    text-align: center;
}

.lb-join-art[b-h4tlspz0yw] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ioha-gold-soft);
    box-shadow: inset 0 0 0 1px rgb(242 193 78 / .4), var(--glow-gold);
}

.lb-join-art svg[b-h4tlspz0yw] {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: var(--ioha-gold);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lb-join-art .lb-join-cup[b-h4tlspz0yw] { fill: rgb(242 193 78 / .3); }

.lb-join-title[b-h4tlspz0yw] {
    margin: 0;
    font: 900 var(--fs-xl)/1.1 var(--font-display);
    letter-spacing: -.01em;
}

.lb-join-text[b-h4tlspz0yw] {
    max-width: 32ch;
    margin: 0 0 var(--s-1);
    color: var(--ioha-bone-dim);
    font: 500 var(--fs-sm)/1.5 var(--font-body);
}

.lb-join-fine[b-h4tlspz0yw] {
    margin: 0;
    color: var(--ioha-muted);
    font: 600 var(--fs-xs)/1.4 var(--font-body);
}

.lb-row.is-locked[b-h4tlspz0yw] {
    grid-template-columns: 26px 40px minmax(0, 1fr);
    margin-top: 6px;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-1) var(--ease-out);
    background: transparent;
    box-shadow: none;
    border: 1.5px dashed var(--ioha-line-strong);
}

.lb-row.is-locked .lb-rank[b-h4tlspz0yw] { color: var(--ioha-subtle); }
.lb-row.is-locked:active[b-h4tlspz0yw] { transform: scale(.98); }

.lb-locked-hint[b-h4tlspz0yw] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ioha-muted);
    font: 600 var(--fs-sm)/1.2 var(--font-body);
}

/* --- Loading, empty and error ------------------------------------------------------ */

.lb-skel-podium[b-h4tlspz0yw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--s-2);
    margin: var(--s-2) 0 var(--s-5);
}

.lb-skel-col[b-h4tlspz0yw] { display: block; border-radius: var(--r-md); }
.lb-skel-col.is-1[b-h4tlspz0yw] { height: 176px; }
.lb-skel-col.is-2[b-h4tlspz0yw] { height: 140px; }
.lb-skel-col.is-3[b-h4tlspz0yw] { height: 124px; }

.lb-skel-row[b-h4tlspz0yw] {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    height: 60px;
    margin-bottom: 6px;
    padding: 0 14px 0 34px;
    border-radius: var(--r-md);
    box-shadow: inset 0 0 0 1px var(--ioha-line);
}

.lb-skel-dot[b-h4tlspz0yw] { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.lb-skel-line[b-h4tlspz0yw] { display: block; height: 14px; border-radius: 7px; }
.lb-skel-pill[b-h4tlspz0yw] { flex: none; width: 44px; height: 20px; margin-left: auto; border-radius: var(--r-pill); }

.lb-state[b-h4tlspz0yw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-2);
    padding: var(--s-7) var(--s-5) var(--s-6);
    text-align: center;
}

.lb-state-icon[b-h4tlspz0yw] {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--ioha-gold-soft);
    color: var(--ioha-gold);
}

.lb-state-icon.is-error[b-h4tlspz0yw] {
    background: var(--ioha-surface-3);
    color: var(--ioha-bone-dim);
}

.lb-state-icon svg[b-h4tlspz0yw] {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lb-state-title[b-h4tlspz0yw] {
    margin: var(--s-1) 0 0;
    font: 900 var(--fs-xl)/1.15 var(--font-display);
    letter-spacing: -.01em;
}

.lb-state-text[b-h4tlspz0yw] {
    max-width: 32ch;
    margin: 0 0 var(--s-2);
    color: var(--ioha-bone-dim);
    font: 500 var(--fs-sm)/1.5 var(--font-body);
}

/* --- Name sheet ------------------------------------------------------------------- */

.lb-name-form[b-h4tlspz0yw] {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding-top: var(--s-2);
}

.lb-name-label[b-h4tlspz0yw] {
    color: var(--ioha-bone-dim);
    font: 800 var(--fs-xs)/1 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lb-name-input[b-h4tlspz0yw] {
    width: 100%;
    min-height: 52px;
    padding: 0 var(--s-4);
    border: 1px solid var(--ioha-line-strong);
    border-radius: var(--r-md);
    background: var(--ioha-ink);
    color: var(--ioha-bone);
    /* 16px or more, or iOS zooms the page when the field takes focus. */
    font: 700 var(--fs-md)/1.2 var(--font-body);
    transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}

.lb-name-input[b-h4tlspz0yw]::placeholder { color: var(--ioha-subtle); }

.lb-name-input:focus[b-h4tlspz0yw] {
    outline: none;
    border-color: var(--ioha-red);
    box-shadow: 0 0 0 3px var(--ioha-red-soft);
}

.lb-name-input[aria-invalid="true"][b-h4tlspz0yw] { border-color: var(--ioha-red-bright); }

.lb-name-help[b-h4tlspz0yw] {
    margin: 0;
    color: var(--ioha-muted);
    font: 500 var(--fs-sm)/1.45 var(--font-body);
}

.lb-name-error[b-h4tlspz0yw] {
    margin: 0;
    color: var(--ioha-red-bright);
    font: 700 var(--fs-sm)/1.4 var(--font-body);
}

/* --- Report and block -------------------------------------------------------------
   A "..." at the end of every other player's row, and in the corner of their podium
   spot, opening the player sheet. Muted so the board still reads as names and scores.
   What it draws is narrower than a finger; ::after takes what answers a tap out to
   44px wide (into the column gap and the row's end), the way .ioha-chip does. */

.lb-row.has-more[b-h4tlspz0yw] {
    grid-template-columns: 26px 40px minmax(0, 1fr) auto 32px;
    padding-right: 4px;
}

.lb-more[b-h4tlspz0yw] {
    position: relative;
    display: grid;
    place-items: center;
    width: 32px;
    height: 44px;
    margin: -8px 0;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--ioha-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-2) ease, background-color var(--dur-2) ease, transform var(--dur-1) var(--ease-out);
}

.lb-more[b-h4tlspz0yw]::after {
    content: "";
    position: absolute;
    inset: 0 -4px 0 -8px;
}

.lb-more svg[b-h4tlspz0yw] { width: 20px; height: 20px; fill: currentColor; }
.lb-more:active[b-h4tlspz0yw] { transform: scale(.9); color: var(--ioha-bone); }

/* On the podium: the top corner of the spot, clear of the centred crown and avatar. */
.lb-more.is-podium[b-h4tlspz0yw] {
    position: absolute;
    top: -8px;
    right: -6px;
    z-index: 1;
    width: 36px;
    margin: 0;
}

.lb-more.is-podium[b-h4tlspz0yw]::after { inset: 0 -4px; }

@media (hover: hover) and (pointer: fine) {
    .lb-more:hover[b-h4tlspz0yw] { color: var(--ioha-bone); background: var(--ioha-surface-2); }
}

.lb-sheet-text[b-h4tlspz0yw] {
    margin: var(--s-2) 0 var(--s-4);
    color: var(--ioha-bone-dim);
    font: 500 15px/1.5 var(--font-body);
}

/* The choices, as one card of rows like the You tab's lists. */
.lb-sheet-options[b-h4tlspz0yw] {
    overflow: hidden;
    margin-top: var(--s-2);
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-lg);
    background: var(--ioha-surface-2);
}

.lb-sheet-options > * + *[b-h4tlspz0yw] { box-shadow: inset 0 1px 0 var(--ioha-line); }

.lb-sheet-option[b-h4tlspz0yw] {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: 56px;
    padding: 10px var(--s-4);
    border: 0;
    background: transparent;
    color: var(--ioha-bone);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-2) ease;
}

.lb-sheet-option:active[b-h4tlspz0yw] { background: var(--ioha-surface-3); }
.lb-sheet-option:disabled[b-h4tlspz0yw] { opacity: .55; cursor: default; }

/* The choice being sent stays at full strength with a spinner at its end, so a slow
   answer reads as "sending" rather than as a tap that did nothing. */
.lb-sheet-option.is-busy:disabled[b-h4tlspz0yw] { opacity: 1; }

.lb-sheet-option.is-busy[b-h4tlspz0yw]::after {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    margin-left: auto;
    border: 2.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ioha-spin .7s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
    .lb-sheet-option:not(:disabled):hover[b-h4tlspz0yw] { background: var(--ioha-surface-3); }
}

.lb-sheet-option-icon[b-h4tlspz0yw] {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ioha-red-soft);
    color: var(--ioha-red-bright);
}

.lb-sheet-option-icon svg[b-h4tlspz0yw] {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lb-sheet-option-text[b-h4tlspz0yw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lb-sheet-option-label[b-h4tlspz0yw] { font: 700 var(--fs-md)/1.25 var(--font-body); }

.lb-sheet-option-sub[b-h4tlspz0yw] {
    color: var(--ioha-muted);
    font: 500 13px/1.35 var(--font-body);
}

.lb-sheet-actions[b-h4tlspz0yw] {
    display: grid;
    gap: var(--s-2);
    margin-top: var(--s-4);
}

/* --- Small phones ------------------------------------------------------------------ */

/* Short screens (iPhone SE, small Androids with the nav bar showing): a compact
   podium and header, so the sign-in card -- or the first rows of the board --
   still make it above the fold. */
@media (max-height: 740px) {
    .lb-shell[b-h4tlspz0yw] { padding-top: var(--s-3); }
    .lb-head[b-h4tlspz0yw] { margin-bottom: var(--s-3); }
    .lb-kicker[b-h4tlspz0yw] { margin-bottom: 4px; }
    .lb-title[b-h4tlspz0yw] { font-size: var(--fs-xl); }
    .lb-caption[b-h4tlspz0yw] { margin: var(--s-2) 2px var(--s-3); }

    .lb-podium[b-h4tlspz0yw] { margin: 0 0 var(--s-4); }
    .lb-pod-who[b-h4tlspz0yw] { gap: 4px; padding-bottom: 8px; }
    .lb-pod-avatar[b-h4tlspz0yw] { width: 42px; height: 42px; font-size: 17px; }
    .lb-pod.is-rank-1 .lb-pod-avatar[b-h4tlspz0yw] { width: 52px; height: 52px; font-size: 21px; }
    .lb-pod-crown[b-h4tlspz0yw] { width: 22px; height: 22px; }
    .lb-pod-plinth[b-h4tlspz0yw] { height: 42px; padding-top: 7px; }
    .lb-pod.is-rank-1 .lb-pod-plinth[b-h4tlspz0yw] { height: 60px; }
    .lb-pod.is-rank-3 .lb-pod-plinth[b-h4tlspz0yw] { height: 32px; }
    .lb-pod-rank[b-h4tlspz0yw] { font-size: 22px; }
    .lb-pod.is-rank-1 .lb-pod-rank[b-h4tlspz0yw] { font-size: 28px; }
    .lb-pod.is-rank-3 .lb-pod-rank[b-h4tlspz0yw] { font-size: 20px; }

    .lb-join[b-h4tlspz0yw] { gap: var(--s-2); padding: var(--s-5) var(--s-4) var(--s-4); }
    .lb-join-art[b-h4tlspz0yw] { display: none; }

    .lb-skel-col.is-1[b-h4tlspz0yw] { height: 140px; }
    .lb-skel-col.is-2[b-h4tlspz0yw] { height: 112px; }
    .lb-skel-col.is-3[b-h4tlspz0yw] { height: 98px; }
}

@media (max-width: 374px) {
    .lb-shell[b-h4tlspz0yw] { padding-left: var(--s-3); padding-right: var(--s-3); }
    .lb-title[b-h4tlspz0yw] { font-size: var(--fs-xl); }
    .lb-seg-tab[b-h4tlspz0yw] { font-size: 13px; }
    .lb-row[b-h4tlspz0yw] { column-gap: 10px; padding-right: 10px; }
    .lb-row.has-more[b-h4tlspz0yw] { padding-right: 2px; }
    .lb-pod-avatar[b-h4tlspz0yw] { width: 46px; height: 46px; font-size: 18px; }
    .lb-pod.is-rank-1 .lb-pod-avatar[b-h4tlspz0yw] { width: 56px; height: 56px; font-size: 22px; }
    .lb-name[b-h4tlspz0yw] { font-size: 15px; }
}
/* _content/InstituteOfHumanAnatomy.Shared/Pages/Settings.razor.rz.scp.css */
/* The You tab, in the game's palette. Tokens and the shared button, chip and badge
   classes come from app.css; everything here is layout and the few pieces only this
   page has (the save-your-streak hero, the stat tiles, the settings list, switches). */

.you-page[b-vyjwiumodj] {
    min-height: 100%;
    padding: var(--s-5) var(--s-4) var(--s-7);
    color: var(--ioha-bone);
}

.you-shell[b-vyjwiumodj] {
    max-width: 560px;
    margin: 0 auto;
}

.you-stack[b-vyjwiumodj] {
    display: grid;
    gap: var(--s-4);
    --stagger-step: 45ms;
}

/* --- Loading ---------------------------------------------------------------- */

.you-skeleton[b-vyjwiumodj] { display: grid; gap: var(--s-4); }
.you-sk-head[b-vyjwiumodj] { height: 150px; border-radius: var(--r-xl); }
.you-sk-tile[b-vyjwiumodj] { height: 104px; border-radius: var(--r-lg); }
.you-sk-card[b-vyjwiumodj] { height: 150px; border-radius: var(--r-lg); }

/* --- Signed out: save your streak ------------------------------------------- */

.you-save[b-vyjwiumodj] {
    position: relative;
    overflow: hidden;
    padding: var(--s-6) var(--s-5) var(--s-5);
    border: 1px solid rgb(224 57 43 / .38);
    border-radius: var(--r-xl);
    background:
        radial-gradient(120% 85% at 50% -12%, rgb(224 57 43 / .34), transparent 62%),
        linear-gradient(180deg, var(--ioha-surface-2), var(--ioha-surface-1));
    text-align: center;
    box-shadow: var(--shadow-2);
}

.you-save-glow[b-vyjwiumodj] {
    position: absolute;
    inset: auto -30% -60% -30%;
    height: 70%;
    background: radial-gradient(closest-side, rgb(242 193 78 / .08), transparent);
    pointer-events: none;
}

.you-save-flame[b-vyjwiumodj] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--s-3);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, var(--ioha-red-bright), var(--ioha-red-strong) 70%);
    color: #fff;
    box-shadow: var(--glow-red), inset 0 -3px 0 rgb(0 0 0 / .18);
}

.you-save-flame svg[b-vyjwiumodj] { width: 34px; height: 34px; }

.you-save .ioha-kicker[b-vyjwiumodj] { position: relative; }

.you-save-title[b-vyjwiumodj] {
    position: relative;
    margin: var(--s-2) 0 var(--s-3);
    font-size: clamp(26px, 7.4vw, 34px);
    text-wrap: balance;
}

.you-save-sub[b-vyjwiumodj] {
    position: relative;
    margin: 0 auto var(--s-5);
    max-width: 30em;
    color: var(--ioha-bone-dim);
    font-size: 15px;
    line-height: 1.5;
    text-wrap: pretty;
}

/* --- Signed in: who you are ------------------------------------------------- */

.you-profile[b-vyjwiumodj] {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) var(--ioha-tap);
    align-items: center;
    gap: 14px;
    padding: var(--s-1) 0;
}

.you-avatar[b-vyjwiumodj] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgb(255 255 255 / .14);
    background: linear-gradient(140deg, var(--ioha-red-bright), var(--ioha-red-strong) 55%, #7e1c12);
    color: #fff;
    font: 900 28px/1 var(--font-display);
    box-shadow: var(--glow-red);
}

.you-id[b-vyjwiumodj] { min-width: 0; }

.you-name[b-vyjwiumodj] {
    margin: 0;
    font: 900 26px/1.08 var(--font-display);
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

/* The whole address, always: it wraps (before the @ first, see EmailText) rather than
   being cut off with an ellipsis, so the player can read which account this is. */
.you-email[b-vyjwiumodj] {
    margin: 4px 0 0;
    color: var(--ioha-muted);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}

.you-edit[b-vyjwiumodj] {
    display: grid;
    place-items: center;
    width: var(--ioha-tap);
    height: var(--ioha-tap);
    padding: 0;
    border: 1px solid var(--ioha-line-strong);
    border-radius: 50%;
    background: var(--ioha-surface-1);
    color: var(--ioha-bone);
    cursor: pointer;
}

.you-edit svg[b-vyjwiumodj] { width: 20px; height: 20px; }

.you-nudge[b-vyjwiumodj] {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: 14px var(--s-4);
    border: 1px solid rgb(242 193 78 / .38);
    border-radius: var(--r-lg);
    background: var(--ioha-gold-soft);
    color: var(--ioha-bone);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.you-nudge-icon[b-vyjwiumodj] {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ioha-gold);
    color: #1a1408;
}

.you-nudge-icon svg[b-vyjwiumodj] { width: 20px; height: 20px; }

.you-nudge-text[b-vyjwiumodj] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.you-nudge-text strong[b-vyjwiumodj] { font-size: 15px; }
.you-nudge-text span[b-vyjwiumodj] { color: var(--ioha-bone-dim); font-size: 13px; line-height: 1.35; }

/* --- Stats ------------------------------------------------------------------ */

.you-stats[b-vyjwiumodj] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.you-stat[b-vyjwiumodj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 104px;
    padding: 14px 12px 12px;
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-lg);
    background:
        linear-gradient(180deg, rgb(255 255 255 / .025), transparent 60%),
        var(--ioha-surface-1);
}

.you-stat.is-streak[b-vyjwiumodj] {
    border-color: rgb(224 57 43 / .45);
    background:
        linear-gradient(180deg, rgb(224 57 43 / .2), transparent 72%),
        var(--ioha-surface-1);
}

.you-stat-top[b-vyjwiumodj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    min-height: 22px;
}

.you-stat-icon[b-vyjwiumodj] { width: 22px; height: 22px; color: var(--ioha-bone-dim); }
.you-stat-icon svg[b-vyjwiumodj] { width: 100%; height: 100%; }
.is-streak .you-stat-icon[b-vyjwiumodj] { color: var(--ioha-red-bright); }
.is-correct .you-stat-icon[b-vyjwiumodj] { color: var(--ioha-success); }

/* Numbers sit at the same height in every tile; a label that wraps on a narrow phone
   grows its tile downwards instead of pushing its number out of line. */
.you-stat-num[b-vyjwiumodj] {
    margin-top: var(--s-3);
    font: 900 32px/1 var(--font-display);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.you-stat-label[b-vyjwiumodj] {
    margin-top: 6px;
    color: var(--ioha-muted);
    font: 800 11px/1.2 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* "Days played" wraps beside its one-line siblings on narrow phones; say "Played" there. */
.you-stat-short[b-vyjwiumodj] { display: none; }

@media (max-width: 380px) {
    .you-stat-long[b-vyjwiumodj] { display: none; }
    .you-stat-short[b-vyjwiumodj] { display: inline; }
}

.you-stat-note[b-vyjwiumodj] {
    padding: 2px 7px;
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / .07);
    color: var(--ioha-bone-dim);
    font: 800 11px/1.4 var(--font-body);
    white-space: nowrap;
}

/* --- Premium ---------------------------------------------------------------- */

.you-premium[b-vyjwiumodj] {
    padding: 18px;
    border: 1px solid rgb(242 193 78 / .28);
    border-radius: var(--r-lg);
    background:
        radial-gradient(110% 130% at 100% 0%, rgb(242 193 78 / .15), transparent 55%),
        var(--ioha-surface-1);
}

.you-premium.is-active[b-vyjwiumodj] {
    border-color: rgb(242 193 78 / .55);
    box-shadow: var(--glow-gold);
}

.you-premium-head[b-vyjwiumodj] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.you-crown[b-vyjwiumodj] {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ioha-gold-soft);
    color: var(--ioha-gold);
}

.you-crown svg[b-vyjwiumodj] { width: 20px; height: 20px; }

.you-premium-title[b-vyjwiumodj] {
    flex: 1;
    margin: 0;
    font: 800 17px/1.2 var(--font-display);
}

.you-premium-sub[b-vyjwiumodj] {
    margin: 10px 0 14px;
    color: var(--ioha-bone-dim);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

/* --- Settings and links ----------------------------------------------------- */

.you-group-title[b-vyjwiumodj] {
    margin: var(--s-2) var(--s-1) var(--s-2);
    color: var(--ioha-muted);
    font: 800 var(--fs-xs)/1.2 var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.you-list[b-vyjwiumodj] {
    overflow: hidden;
    border: 1px solid var(--ioha-line);
    border-radius: var(--r-lg);
    background: var(--ioha-surface-1);
}

/* A hairline between rows. A shadow rather than a border, so rows that reset their own
   border (the link rows are buttons and anchors) keep it. */
.you-list > * + *[b-vyjwiumodj] { box-shadow: inset 0 1px 0 var(--ioha-line); }

.you-row[b-vyjwiumodj] { padding: 12px var(--s-4); }

.you-row-main[b-vyjwiumodj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    min-height: 40px;
}

.you-row-text[b-vyjwiumodj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.you-row-label[b-vyjwiumodj] { font-size: var(--fs-md); font-weight: 700; }

.you-row-sub[b-vyjwiumodj] {
    color: var(--ioha-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.you-row-note[b-vyjwiumodj] {
    margin: 10px 0 0;
    color: var(--ioha-warning);
    font-size: 13px;
    line-height: 1.4;
}

.you-chips[b-vyjwiumodj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-3);
}

.you-link[b-vyjwiumodj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    width: 100%;
    min-height: 56px;
    padding: 10px var(--s-4);
    border: 0;
    background: transparent;
    color: var(--ioha-bone);
    font: 700 var(--fs-md)/1.25 var(--font-body);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.you-link-text[b-vyjwiumodj] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.you-link-text .you-row-sub[b-vyjwiumodj] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.you-chevron[b-vyjwiumodj] { color: var(--ioha-muted); font-size: 24px; line-height: 1; }
.you-ext[b-vyjwiumodj] { color: var(--ioha-muted); font-size: 16px; }

@media (hover: hover) and (pointer: fine) {
    .you-link:hover[b-vyjwiumodj] { background: var(--ioha-surface-2); }
    .you-nudge:hover[b-vyjwiumodj] { border-color: rgb(242 193 78 / .6); }
    .you-edit:hover[b-vyjwiumodj] { background: var(--ioha-surface-2); }
}

/* Switch: 52x32 drawn, 44px to the finger. Red when on, like every other "yes" here. */
.you-switch[b-vyjwiumodj] {
    position: relative;
    flex: none;
    width: 52px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--ioha-surface-3);
    box-shadow: inset 0 0 0 1px var(--ioha-line-strong);
    cursor: pointer;
    transition: background-color var(--dur-2) ease;
}

.you-switch[b-vyjwiumodj]::before {
    content: "";
    position: absolute;
    inset: -6px -4px;
}

.you-switch-knob[b-vyjwiumodj] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgb(0 0 0 / .4);
    transition: transform var(--dur-2) var(--ease-spring);
}

.you-switch[aria-checked="true"][b-vyjwiumodj] {
    background: var(--ioha-red-strong);
    box-shadow: none;
}

.you-switch[aria-checked="true"] .you-switch-knob[b-vyjwiumodj] { transform: translateX(20px); }
.you-switch:disabled[b-vyjwiumodj] { opacity: .5; cursor: default; }

/* A blocked player's name on one line, whatever its length: the Unblock button keeps its place. */
.you-blocked-name[b-vyjwiumodj] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Account ---------------------------------------------------------------- */

.you-account[b-vyjwiumodj] {
    display: grid;
    gap: var(--s-2);
}

.you-danger[b-vyjwiumodj] {
    min-height: var(--ioha-tap);
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ioha-red-bright);
    font: 700 15px var(--font-body);
    cursor: pointer;
}

.you-danger:active[b-vyjwiumodj] { background: var(--ioha-red-soft); }

.you-version[b-vyjwiumodj] {
    margin: var(--s-2) 0 0;
    color: var(--ioha-subtle);
    font-size: var(--fs-xs);
    text-align: center;
}

/* --- Sheets ----------------------------------------------------------------- */

.you-sheet-text[b-vyjwiumodj] {
    margin: 0 0 14px;
    color: var(--ioha-bone-dim);
    font-size: 15px;
    line-height: 1.5;
}

.you-input[b-vyjwiumodj] {
    display: block;
    width: 100%;
    height: 54px;
    padding: 0 var(--s-4);
    border: 1px solid var(--ioha-line-strong);
    border-radius: var(--r-md);
    background: var(--ioha-ink);
    color: var(--ioha-bone);
    font: 700 18px var(--font-body);
}

.you-input[b-vyjwiumodj]::placeholder { color: var(--ioha-subtle); font-weight: 600; }
.you-input:focus[b-vyjwiumodj] { outline: none; border-color: var(--ioha-red); box-shadow: 0 0 0 3px var(--ioha-red-soft); }
.you-input[aria-invalid="true"][b-vyjwiumodj] { border-color: var(--ioha-red-bright); }

.you-input-help[b-vyjwiumodj] {
    margin: var(--s-2) 2px var(--s-4);
    color: var(--ioha-muted);
    font-size: 13px;
}

.you-input-help.is-error[b-vyjwiumodj] { color: var(--ioha-red-bright); font-weight: 700; }

.you-delete-list[b-vyjwiumodj] {
    display: grid;
    gap: 8px;
    margin: 0 0 var(--s-4);
    padding: 0;
    list-style: none;
}

.you-delete-list li[b-vyjwiumodj] {
    position: relative;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.4;
}

.you-delete-list li[b-vyjwiumodj]::before {
    content: "";
    position: absolute;
    top: .45em;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ioha-red);
}

.you-warn[b-vyjwiumodj] {
    padding: 12px 14px;
    border: 1px solid rgb(245 165 36 / .45);
    border-radius: var(--r-md);
    background: var(--ioha-warning-soft);
    color: var(--ioha-bone);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.you-warn strong[b-vyjwiumodj] { display: block; margin-bottom: 2px; color: var(--ioha-warning); }
.you-warn a[b-vyjwiumodj], .you-sheet-fine a[b-vyjwiumodj] {
    color: var(--ioha-bone);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.you-sheet-fine[b-vyjwiumodj] {
    margin: 12px 0 0;
    color: var(--ioha-muted);
    font-size: 13px;
    line-height: 1.45;
}

.you-delete-error[b-vyjwiumodj] {
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid rgb(224 57 43 / .45);
    border-radius: var(--r-md);
    background: var(--ioha-red-soft);
    color: #ffd2cc;
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.you-delete-actions[b-vyjwiumodj] {
    display: grid;
    gap: var(--s-2);
    margin-top: 18px;
}

/* The one destructive button: red, so it never reads as the safe choice next to "Keep". */
.you-btn-danger[b-vyjwiumodj] {
    --btn-bg: var(--ioha-red-strong);
    --btn-fg: var(--ioha-on-red);
    --btn-border: transparent;
    --btn-lip: var(--ioha-red-press);
}

.you-howto[b-vyjwiumodj] {
    display: grid;
    gap: 14px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.you-howto li[b-vyjwiumodj] {
    display: flex;
    gap: var(--s-3);
    font-size: 15px;
    line-height: 1.45;
    color: var(--ioha-bone-dim);
}

.you-howto strong[b-vyjwiumodj] { color: var(--ioha-bone); }

.you-howto-num[b-vyjwiumodj] {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ioha-red-soft);
    color: var(--ioha-red-bright);
    font: 800 14px var(--font-body);
}

/* "pinch" on touch screens, "scroll" with only a mouse or trackpad: the rule the
   game's coach tip and the stage's own hint use. */
.you-zoom-fine[b-vyjwiumodj] { display: none; }

@media (hover: hover) and (pointer: fine) {
    .you-zoom-touch[b-vyjwiumodj] { display: none; }
    .you-zoom-fine[b-vyjwiumodj] { display: inline; }
}

@media (any-pointer: coarse) {
    .you-zoom-touch[b-vyjwiumodj] { display: inline; }
    .you-zoom-fine[b-vyjwiumodj] { display: none; }
}

@media (max-width: 359px) {
    .you-stat[b-vyjwiumodj] { padding: 12px 10px; }
    .you-stat-num[b-vyjwiumodj] { font-size: 28px; }
}