/* =========================================================================
   Everything that shows a result: the water that breaks over a finished level,
   the level screen it leaves behind, the sections that break open one at a
   time, the charts, the bars, the card, and somebody else's card arrived at
   from a link.
   ========================================================================= */

/* --------------------- the water over a finished level ------------------- */

/* Breaks across the middle of the window the moment a level is finished. Only
   the band is painted — the rest of the screen is left showing — so the level
   goes up behind the water while it crosses and is there as it runs off. The
   layer itself still takes the whole window: a click anywhere waves it past. */
.curtain {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 24px;
    text-align: center;
    cursor: pointer;
}

.curtain[hidden] {
    display: none;
}

/* The water itself: a band thrown across the window from the left, its crest
   and trough fading off into the page rather than cut square. */
.curtain__splash {
    position: absolute;
    left: -14%;
    right: -14%;
    top: 50%;
    height: min(300px, 44vh);
    transform: translateY(-50%);
    background: radial-gradient(58% 130% at 30% 48%, rgba(217, 164, 65, 0.32), transparent 66%),
        radial-gradient(62% 110% at 74% 44%, rgba(34, 211, 238, 0.16), transparent 70%),
        linear-gradient(100deg, rgba(7, 10, 20, 0.82) 0%, rgba(18, 20, 31, 0.97) 44%, rgba(7, 10, 20, 0.82) 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
}

/* The foam along the crest, and its thinner answer underneath. */
.curtain__splash::before,
.curtain__splash::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(217, 164, 65, 0.7) 30%, rgba(255, 245, 220, 0.55) 55%, transparent);
}

.curtain__splash::before {
    top: 24%;
}

.curtain__splash::after {
    bottom: 24%;
    opacity: 0.45;
}

.curtain--in .curtain__splash {
    animation: surge-in 0.62s cubic-bezier(0.65, 0, 0.3, 1) both;
}

.curtain--in .curtain__words {
    animation: struck 0.7s 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Leaving, it carries on the way it came rather than backing out. */
.curtain--out .curtain__splash {
    animation: surge-out 0.9s cubic-bezier(0.55, 0, 0.2, 1) both;
}

.curtain--out .curtain__words {
    animation: struck-out 0.45s ease both;
}

@keyframes surge-in {
    from {
        transform: translate(-118%, -50%) skewX(-9deg);
    }
    to {
        transform: translate(0, -50%) skewX(0deg);
    }
}

@keyframes surge-out {
    from {
        transform: translate(0, -50%);
    }
    to {
        transform: translate(118%, -50%) skewX(9deg);
    }
}

@keyframes struck {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.94);
        filter: blur(10px);
    }
}

@keyframes struck-out {
    to {
        opacity: 0;
        transform: translateY(-16px);
    }
}

.curtain__words {
    position: relative;
}

.curtain__title {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(30px, 7vw, 68px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--gold-pale);
    text-shadow: 0 0 90px rgba(217, 164, 65, 0.5);
}

.curtain__depth {
    margin: 16px 0 0;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
}

/* -------------------------- the level screen ---------------------------- */

.level {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 34px 24px 36px;
    border-radius: 24px;
    border: 1px solid rgba(217, 164, 65, 0.3);
    background: radial-gradient(120% 150% at 50% 0%, rgba(217, 164, 65, 0.18), transparent 68%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent);
    animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* A shine that crosses the card once, as it arrives. */
.level::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 40%, rgba(255, 245, 220, 0.13) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: sheen 1.6s 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* The light crosses once and is then gone. It has to *end* invisible: the
   animation is filled `both`, so whatever the last frame holds is held for as
   long as the element lives — and a band of light parked one width to the
   right of a section is a band of light sitting in the middle of the page. */
@keyframes sheen {
    99% {
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.level__eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold);
}

.level__title {
    font-family: var(--serif);
    font-size: clamp(30px, 6vw, 46px);
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 12px 0 8px;
    color: var(--gold-pale);
    text-shadow: 0 0 60px rgba(217, 164, 65, 0.45);
}

.level .lede {
    margin-bottom: 26px;
}

/* What the level is called, under the title: the level screen is the title
   and this line, and what it opened follows underneath — unnamed, when it is
   one section, since this line has named it. */
.level__name {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.8;
}

/* The way on, at the bottom of everything the level opened: it arrives last,
   once there is nothing left to watch appear. */
.level__foot {
    display: grid;
    justify-items: center;
    gap: 16px;
    margin-top: 56px;
    padding-top: 34px;
    border-top: 1px solid var(--line);
    text-align: center;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.level__foot--sealed {
    opacity: 0;
    transform: translateY(22px);
    pointer-events: none;
}

/* A taste of the level the way on leads to, above the button: the figures the
   next level will open, blurred as in a locked panel, at a smaller size than a
   result that has been earned. It arrives with the button, as part of the way
   on, and is never sealed or sprayed open — it is nothing that was won. */
.level__next {
    justify-self: stretch;
    text-align: left;
}

/* "Next", large, and the level it means under it. */
.level__next-head {
    text-align: center;
}

.level__next-word {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(26px, 5vw, 38px);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--gold-pale);
    text-shadow: 0 0 50px rgba(217, 164, 65, 0.35);
}

.level__next-title {
    margin: 4px 0 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.8;
}

/* The count of answers still owed stands over the middle of each figure. */
.level__next .result__body {
    position: relative;
}

.level__next .result {
    padding: 18px clamp(16px, 3vw, 24px) 20px;
}

.level__next .result__chart {
    max-width: 300px;
}

.level__next .result__chart--wide {
    max-width: 440px;
}

/* ------------------------------- results -------------------------------- */

/* One questionnaire's reading, as a card on the water: its name across the
   top in its own colour, the figure, and a row a dimension underneath. */
.result {
    position: relative;
    margin-top: 20px;
    padding: 24px clamp(18px, 3vw, 28px) 26px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)), var(--surface);
    box-shadow: 0 30px 70px -50px rgba(0, 0, 0, 0.9);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease;
}

/* In a panel the first card sits straight under the bar. */
.panel__body .result:first-child {
    margin-top: 0;
}

/* Everything inside a sealed card that would animate — a bar drawing itself,
   a point popping in, a shape fading up — is held at its first frame until the
   seal comes off, so that it is seen happening rather than found done. */
.result--sealed * {
    animation-play-state: paused;
}

/* Held shut until the level opens it. What is behind the seal is drawn and
   in place — this is only the lid. */
.result--sealed {
    opacity: 0;
    transform: translateY(30px) scale(0.985);
    filter: blur(12px);
    pointer-events: none;
}

/* The moment it opens: a light crosses it and its edge burns gold, over the
   spray of particles the script throws out of the middle of it. */
.result--opening {
    animation: won 1.5s ease both;
}

.result--opening::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 20px;
    background: linear-gradient(100deg, transparent 40%, rgba(255, 245, 220, 0.12) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: sheen 1.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes won {
    from {
        box-shadow: 0 0 0 0 rgba(217, 164, 65, 0);
    }
    25% {
        box-shadow: 0 -1px 40px -6px rgba(217, 164, 65, 0.55);
    }
    to {
        box-shadow: 0 0 0 0 rgba(217, 164, 65, 0);
    }
}

.result__name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}

/* The colour the section's figure is drawn in, and a hairline running off to
   the right of the name. */
.result__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chart, var(--gold));
    box-shadow: 0 0 10px var(--chart, var(--gold));
}

.result__name::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line), transparent);
}

.result__body {
    display: grid;
    gap: 20px;
}

/* The only section of its level goes unnamed: the level has named it. */
.result--lone .result__name {
    display: none;
}

/* A section whose figure is cards of its own has no card round it, and no
   edge for the opening's light to burn along. */
.result--bare {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.result--bare.result--opening::after {
    display: none;
}

/* The chart sits above the rows it summarises, centred on the section. */
.result__chart {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.result__chart svg {
    width: 100%;
    height: auto;
}

/* A figure that carries its own words needs them at a size worth reading. */
.result__chart--wide {
    max-width: 660px;
}

/* One dimension's reading: its name and where it stands on one line, the bar
   under them, then the prediction and the vote on it. Rows are parted by a
   hairline rather than by air, so a card of five still reads as one card. */
.rows {
    display: grid;
}

.row {
    padding: 18px 0 20px;
    border-top: 1px solid var(--line);
}

.row:last-child {
    padding-bottom: 4px;
}

.row__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
}

.row__name {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 15.5px;
    font-weight: 650;
    color: var(--text);
}

.row__name::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--chart);
    box-shadow: 0 0 8px var(--chart);
}

/* Where it stands against other people, as a tag in the dimension's colour. */
.row__stand {
    margin: 0;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--chart) 32%, transparent);
    background: color-mix(in srgb, var(--chart) 14%, transparent);
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.row__stand b {
    font-weight: 700;
    color: var(--text);
}

.row__reading {
    margin: 12px 0 0;
    font-size: 14px;
    font-style: italic;
    color: var(--muted);
}

/* Does the prediction land? Two halves of one pill. */
.votes {
    display: inline-flex;
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
}

.vote {
    font: inherit;
    font-size: 11.5px;
    color: var(--muted);
    background: transparent;
    border: 0;
    padding: 4px 14px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.vote + .vote {
    border-left: 1px solid var(--line);
}

.vote:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}

/* Picked, in a wash of the colour the reading was drawn in. */
.vote--picked {
    color: var(--text);
    background: color-mix(in srgb, var(--chart, #ffffff) 30%, transparent);
    font-weight: 600;
}

/* The same pair, held inside the figure that made the prediction, directly
   under the words it is about. The figure brings its own spacing. */
.soma__votes .votes {
    margin-top: 0;
}

.soma__votes .vote {
    font-size: 11px;
    padding: 2px 11px;
}

/* ----------------------- a level not yet unlocked ----------------------- */

/* What a locked level is worth finishing for, shown but not readable: the
   dimensions are named, everything that has to be earned is blurred. */
.taste {
    display: grid;
    gap: 12px;
    margin: 0 0 8px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid rgba(217, 164, 65, 0.3);
    background: radial-gradient(120% 180% at 50% 0%, rgba(217, 164, 65, 0.15), transparent 70%);
    font-size: 15px;
    color: var(--muted);
}

.taste b {
    color: var(--gold-pale);
    font-weight: 600;
}

/* How far through the level is, drawn under the words. */
.taste__meter {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.taste__meter i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-2), var(--gold));
    transform-origin: left;
    animation: grow 0.9s 0.1s var(--ease) both;
}

.blank {
    filter: blur(4.5px);
    opacity: 0.7;
    user-select: none;
}

/* Every locked figure blurs the same way — a chart, a row of faces, the
   temperament's plane and the sign's glyph alike. */
.result--locked .result__chart svg,
.result--locked .faces svg,
.result--locked .theory__figure,
.result--locked .theory__glyph {
    filter: blur(5px);
    opacity: 0.5;
}

/* Nothing in a locked section answers to being hovered or clicked. */
.result--locked .result__body {
    pointer-events: none;
}

.result__lock {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(217, 164, 65, 0.45);
    background: rgba(10, 13, 22, 0.9);
    color: var(--gold-pale);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ------------------------ interoception, as a body ----------------------- */

/* The head, the chest, and the cord that carries what one says to the other.
   Each ring is filled to where the score sits on its own scale. */
.soma,
.sea,
.climb {
    width: 100%;
    height: auto;
}

/* The world, as a section: a title over the picture, the person's own abyss
   at the width of the card, what the picture is made of, the two ends of the
   scales to hold it against, and one question — each piece arriving a beat
   after the one above it. */
.seaview__head {
    margin: 0 0 18px;
    text-align: center;
    animation: rise 0.8s var(--ease) both;
}

.seaview__title {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--gold-pale);
    text-shadow: 0 0 40px rgba(217, 164, 65, 0.35);
}

/* The scene itself: rounded like its clip, and standing a little off the
   card. */
.sea,
.climb {
    display: block;
    border-radius: 12px;
    box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.95);
}

.seaview {
    animation: fade 1s var(--ease) 0.15s both;
}

/* Where the picture came from, and what the two small ones are: a plain
   sentence at the width of the card. */
.seaview__note {
    max-width: 660px;
    margin: 18px auto 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
    animation: rise 0.8s var(--ease) 0.3s both;
}

/* What the picture is made of: one key a channel, lit in a colour of the
   legend's own, with a bar under the name filled to where the score sits on
   its own scale — the same reach the scene is drawn from. */
.seaview__keys {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 660px;
    margin: 14px auto 0;
    padding: 0;
    list-style: none;
    animation: rise 0.8s var(--ease) 0.4s both;
}

.seaview__key {
    padding: 12px 14px 13px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

.seaview__key b {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
}

.seaview__bar {
    display: block;
    height: 5px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.seaview__bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--key) 45%, transparent), var(--key));
    box-shadow: 0 0 12px -2px var(--key);
    transform-origin: left;
    animation: grow 0.9s 0.6s var(--ease) both;
}

/* The two ends of the scales: the same abyss twice more, small, with what
   each is a picture of written under it. */
.seaview__others {
    max-width: 660px;
    margin: 28px auto 0;
    animation: rise 0.8s var(--ease) 0.55s both;
}

.seaview__aside {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}

.seaview__others .seaview__note {
    margin: 0 0 14px;
    animation: none;
}

.seaview__ends {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.seaview__end {
    margin: 0;
}

.seaview__end figcaption {
    margin-top: 9px;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}

.seaview__end figcaption b {
    display: block;
    font-weight: 600;
    color: var(--text);
}

/* The question, and the vote on it, centred under everything. */
.seaview__vote {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-top: 26px;
    animation: rise 0.8s var(--ease) 0.75s both;
}

.seaview__ask {
    margin: 0;
    font-size: 14px;
    font-style: italic;
    color: var(--text);
}

/* The water moves. Each creature sways about the place its answers put it,
   to a beat and a phase of its own written in by the script; the motes
   drift; the beam breathes; the coral leans. A sealed card holds all of it
   at the first frame, so the scene is still until the level opens. */
.sea__drift {
    animation: sea-sway 6s ease-in-out infinite alternate;
}

@keyframes sea-sway {
    from {
        transform: translate(-3px, 1.5px);
    }
    to {
        transform: translate(3px, -1.5px);
    }
}

/* Arriving, the creatures come into the beam one after another. */
.sea__creature {
    animation: fade 0.9s var(--ease) both;
}

.sea__mote {
    animation: sea-drift 9s ease-in-out infinite alternate;
}

@keyframes sea-drift {
    from {
        transform: translate(0, 3px);
    }
    to {
        transform: translate(1.5px, -5px);
    }
}

.sea__torch {
    animation: sea-breathe 7s ease-in-out infinite alternate;
}

@keyframes sea-breathe {
    from {
        opacity: 0.7;
    }
    to {
        opacity: 1;
    }
}

.sea__coral {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: sea-lean 5s ease-in-out infinite alternate;
}

@keyframes sea-lean {
    from {
        transform: rotate(-2.5deg);
    }
    to {
        transform: rotate(2.5deg);
    }
}

@media (max-width: 560px) {
    .seaview__keys,
    .seaview__ends {
        grid-template-columns: 1fr;
    }
}

/* ------------------------- the last year, as a climb --------------------- */

/* The section on the sea's pattern: a title, the person's own hill at the
   width of the card, the four channels as a bar chart under it, a note, the
   two ends of all four bars, and one question — each piece arriving a beat
   after the one above it. */
.climbview__head {
    margin: 0 0 18px;
    text-align: center;
    animation: rise 0.8s var(--ease) both;
}

.climbview__title {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(24px, 3.6vw, 32px);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--gold-pale);
    text-shadow: 0 0 40px rgba(217, 164, 65, 0.35);
}

.climbview__stage {
    animation: fade 1s var(--ease) 0.15s both;
}

/* The four channels as a bar chart: a column apiece, filled from the foot to
   the value the scene is drawn from, in a colour of its own, named under it.
   What each does to the scene is said in the tooltip on hover or focus,
   which is why the columns take focus. */
.climbview__bars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    max-width: 560px;
    margin: 22px auto 0;
    animation: rise 0.8s var(--ease) 0.4s both;
}

.climbview__col {
    display: grid;
    justify-items: center;
    gap: 9px;
    border-radius: 12px;
    outline: none;
    cursor: help;
}

.climbview__col:focus-visible .climbview__track {
    box-shadow: 0 0 0 2px var(--key);
}

.climbview__track {
    position: relative;
    display: block;
    width: 100%;
    max-width: 64px;
    height: 120px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.climbview__fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    border-radius: 9px 9px 0 0;
    background: linear-gradient(180deg, var(--key), color-mix(in srgb, var(--key) 45%, transparent));
    box-shadow: 0 0 14px -2px var(--key);
    transform-origin: bottom;
    animation: climb-fill 0.9s 0.6s var(--ease) both;
}

@keyframes climb-fill {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(1);
    }
}

.climbview__name {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.35;
    color: var(--text);
}

.climbview__note {
    max-width: 660px;
    margin: 18px auto 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
    animation: rise 0.8s var(--ease) 0.3s both;
}

.climbview__others {
    max-width: 660px;
    margin: 28px auto 0;
    animation: rise 0.8s var(--ease) 0.55s both;
}

.climbview__aside {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}

.climbview__others .climbview__note {
    margin: 0 0 14px;
    animation: none;
}

.climbview__ends {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.climbview__end {
    margin: 0;
}

.climbview__end figcaption {
    margin-top: 9px;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}

.climbview__end figcaption b {
    display: block;
    font-weight: 600;
    color: var(--text);
}

.climbview__vote {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-top: 26px;
    animation: rise 0.8s var(--ease) 0.75s both;
}

.climbview__ask {
    margin: 0;
    font-size: 14px;
    font-style: italic;
    color: var(--text);
}

/* The clouds drift, each to a beat and phase the script writes in. A sealed
   card holds them at the first frame. */
.climb__cloud {
    animation: climb-drift 24s ease-in-out infinite alternate;
}

@keyframes climb-drift {
    from {
        translate: -14px 0;
    }
    to {
        translate: 14px 0;
    }
}

@media (max-width: 560px) {
    .climbview__ends {
        grid-template-columns: 1fr;
    }

    .climbview__bars {
        gap: 8px;
    }

    .climbview__name {
        font-size: 9.5px;
        letter-spacing: 0.08em;
    }
}

.soma__track,
.soma__cord {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 7;
    stroke-linecap: round;
}

/* The face's ring is the same ring an organ fills, so it is drawn by the
   same rule. */
.soma__ring,
.soma__signal,
.face__ring {
    fill: none;
    stroke: var(--chart);
    stroke-width: 7;
    stroke-linecap: round;
    filter: drop-shadow(0 0 9px var(--chart));
    animation: fade 0.6s ease both;
}

.soma__organ {
    cursor: pointer;
}

.soma__icon {
    fill: color-mix(in srgb, var(--chart) 24%, transparent);
    stroke: var(--chart);
    stroke-width: 2;
    stroke-linejoin: round;
}

.soma__fold {
    fill: none;
    stroke: var(--chart);
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: 0.6;
}

/* The rungs are what make the cord a nerve rather than a wire. */
.soma__rung {
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 2;
    stroke-linecap: round;
}

/* Where the average person sits — on an organ's ring and cord, and on a
   face's ring, ticked the same way. */
.soma__mean,
.face__mean {
    stroke: var(--mean);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.soma__name {
    fill: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

/* Where it stands, in one sentence at one size. */
.soma__reading {
    fill: #e6ebf7;
    font-size: 15px;
    font-weight: 600;
}

/* And what tends to follow from standing there. */
.soma__told {
    fill: var(--muted);
    font-size: 12.5px;
    font-style: italic;
}

.soma__unit {
    fill: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

/* -------------------------- a reading, as a face ------------------------- */

/* Mood and Health — the PHQ-4's distress and the self-rated health single
   (and Stress, the PCL-2, while it is asked) — read as a face apiece instead of a row: the same
   ring a MINT organ fills, sad at one end and pleased at the other, coloured
   along the way, with one general reading of what that tends to mean and the
   same agree/disagree every other prediction gets. */
.faces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    gap: 32px;
    margin: 4px 0;
}

.face {
    display: grid;
    justify-items: center;
    gap: 8px;
    width: 220px;
    margin: 0;
}

.face svg {
    width: 100%;
    max-width: 140px;
    height: auto;
}

.face__track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 7;
}

/* The ring, and the average person's tick on it, are drawn by the soma's own
   rules above — a face fills the same ring an organ does. */

.face__eye {
    fill: var(--chart);
}

.face__mouth {
    fill: none;
    stroke: var(--chart);
    stroke-width: 2.6;
    stroke-linecap: round;
}

.face__name {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

.face__reading {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

/* What that general reading tends to mean, the same voice a dimension's own
   row or a soma organ's reading is told in. */
.face__told {
    margin: 0;
    font-size: 12.5px;
    font-style: italic;
    color: var(--muted);
    text-align: center;
}

/* --------------------------- two old theories --------------------------- */

/* Level 1's figure: two sentences, then two readings older than any
   questionnaire side by side — the star sign, and the temperament as a point
   on Eysenck's plane with Galen's four humours a corner each — each saying in
   a few words what it predicts, with the vote on that underneath. The section
   round them is bare (`.result--bare`): the two cards are boxes enough. */
.theories {
    display: grid;
    gap: 18px;
    margin: 4px 0 8px;
}

.theories__intro {
    margin: 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
}

.theories__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 560px) {
    .theories__pair {
        grid-template-columns: 1fr;
    }
}

/* One of the two: what is predicting, its figure, its name, the words it
   predicts, and the vote on them. */
.theory {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 4px;
    padding: 18px 16px 16px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.025);
    text-align: center;
}

.theory__kind {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}

.theory__figure {
    width: 100%;
    max-width: 210px;
    height: auto;
}

/* The sign's glyph stands where the temperament has its plane, at a size that
   reads as a figure rather than a character. */
.theory__glyph {
    margin: 0;
    height: 210px;
    display: grid;
    place-items: center;
    font-size: 96px;
    line-height: 1;
    color: var(--chart);
    text-shadow: 0 0 50px color-mix(in srgb, var(--chart) 60%, transparent);
}

.theory__name {
    margin: 6px 0 0;
    font-family: var(--serif);
    font-size: clamp(24px, 3.4vw, 30px);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--gold-pale);
    text-shadow: 0 0 40px rgba(217, 164, 65, 0.35);
}

/* What the name goes on to predict, between it and the words themselves. */
.theory__predicts {
    margin: 10px 0 0;
    font-size: 13px;
    font-style: italic;
    color: var(--muted);
}

/* The words it predicts, one to a line: the list sits in the middle of the
   card, the words line up down its left. */
.theory__keys {
    margin: 6px 0 4px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 3px;
    justify-self: center;
    text-align: left;
    font-size: 14px;
    color: var(--text);
}

.theory__keys li::before {
    content: "·";
    margin-right: 8px;
    color: var(--chart);
    font-weight: 700;
}

/* Why a card has no words to give. */
.theory__why {
    margin: 8px 0 0;
    font-size: 12.5px;
    font-style: italic;
    color: var(--muted);
}

/* Eysenck's plane: four cells, the lit one the temperament, the point the
   person, the axes named at their ends. */
.quadrant__cell {
    fill: rgba(255, 255, 255, 0.03);
    stroke: var(--line);
    stroke-width: 1;
}

.quadrant__cell--lit {
    fill: color-mix(in srgb, var(--chart) 22%, transparent);
    stroke: color-mix(in srgb, var(--chart) 60%, transparent);
}

.quadrant__name {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    fill: var(--muted);
    opacity: 0.6;
}

.quadrant__name--lit {
    fill: var(--text);
    opacity: 1;
}

.quadrant__axis {
    font-size: 8px;
    font-style: italic;
    fill: var(--muted);
}

.quadrant__halo {
    fill: var(--chart);
    opacity: 0.25;
}

.quadrant__you {
    fill: var(--chart);
    stroke: var(--gold-pale);
    stroke-width: 1.5;
}

/* ---------------------------- the AI archetype --------------------------- */

/* The BAIT's whole reading is one figure: the robot, which of the three
   archetypes the answers came nearest, and the share of people answering
   the same way. */
.archetype {
    display: grid;
    justify-items: center;
    gap: 4px;
    margin: 4px 0;
    text-align: center;
}

.archetype__emoji {
    margin: 0;
    font-size: 64px;
    line-height: 1.15;
}

.archetype__lead {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--muted);
}

.archetype__name {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--gold-pale);
    text-shadow: 0 0 40px rgba(217, 164, 65, 0.35);
}

.archetype__share {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

/* The general reading of the archetype, in the same voice as every other
   prediction — and the votes on it sit directly under it. */
.archetype__told {
    margin: 6px 0 0;
    max-width: 52ch;
    font-size: 14px;
    font-style: italic;
    color: var(--muted);
}

/* --------------------------- the archetype wheel -------------------------- */

/* The twelve archetypes are one figure and the reading under it, stacked the
   way the AI archetype's is — the wheel carries the whole section, so the
   words that go with it sit inside the block rather than in rows below. */
.wheel__all {
    display: grid;
    justify-items: center;
    gap: 3px;
    text-align: center;
}

/* One archetype's slice, in its own colour, filled out from the middle as far
   as the answers put it. */
.wheel__petal {
    fill: var(--chart);
    fill-opacity: 0.5;
    stroke: var(--chart);
    stroke-width: 1.2;
    stroke-linejoin: round;
    cursor: pointer;
    animation: fade 0.5s ease both;
}

.wheel__petal:hover {
    fill-opacity: 0.78;
}

/* The longest of them — the story loudest in this person — is the one the
   reading underneath is about, so it is picked out in the gold everything
   earned is written in. */
.wheel__petal--leading {
    fill-opacity: 0.8;
    stroke: var(--gold-pale);
    stroke-width: 1.6;
    filter: drop-shadow(0 0 9px var(--chart));
}

.wheel__lead {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--muted);
}

.wheel__name {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(24px, 3.6vw, 32px);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--gold-pale);
    text-shadow: 0 0 40px rgba(217, 164, 65, 0.35);
}

/* What leading with it tends to mean, in the same voice as every other
   prediction — and the votes on it sit directly under the last of them. */
.wheel__told {
    margin: 6px 0 0;
    max-width: 56ch;
    font-size: 14px;
    font-style: italic;
    color: var(--muted);
}

/* ----------------------------- spider chart ----------------------------- */

.chart {
    max-width: 480px;
    margin: 26px auto 0;
}

.profile__web {
    width: 100%;
    height: auto;
}

.chart__ring,
.chart__axis {
    fill: none;
    stroke: rgba(255, 255, 255, 0.09);
}

.chart__label {
    font-size: 11.5px;
    font-weight: 600;
    fill: #cfd4e4;
}

/* The whole-profile chart carries more labels than a level's. */
.chart__web--many .chart__label {
    font-size: 10px;
}

.chart__label--awaiting {
    fill: #565c70;
}

/* The average person, for comparison. */
.chart__average {
    fill: none;
    stroke: var(--mean);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    stroke-linejoin: round;
}

.chart__area {
    fill: var(--chart);
    fill-opacity: 0.22;
    stroke: var(--chart);
    stroke-width: 2;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 10px var(--chart));
    animation: fade 0.5s ease both;
}

/* Used instead of the filled shape while dimensions are still locked. */
.chart__link {
    stroke: var(--chart);
    stroke-width: 2;
    stroke-linecap: round;
    animation: fade 0.5s ease both;
}

.chart__point {
    fill: var(--chart);
    stroke: var(--bg);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    cursor: pointer;
    animation: reveal 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.chart__point:hover {
    stroke: var(--chart);
    stroke-opacity: 0.4;
    stroke-width: 6;
}

@keyframes reveal {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
}

.chart__note {
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    margin: 18px 0 0;
}

/* Tooltip for the chart points, over the panels they are drawn in. */
.tip {
    position: fixed;
    z-index: 40;
    transform: translate(-50%, -100%);
    padding: 7px 12px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: #161a29;
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
    max-width: 320px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
}

.tip--shown {
    opacity: 1;
}

/* ------------------------------ the legend ------------------------------ */

.legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.legend__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.legend__you,
.legend__average {
    width: 20px;
    height: 0;
    border-top: 2px solid var(--chart, var(--accent));
}

.legend__average {
    border-top-style: dashed;
    border-top-color: var(--mean);
}

/* ------------------------- where a score stands ------------------------- */

.bar {
    margin: 12px 0 0;
}

.bar__track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
    overflow: visible;
}

/* The fill draws itself out from the left, and the mark lands on the end of
   it once it is there. In a sealed card both wait for the seal. */
.bar__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--chart) 40%, transparent), var(--chart));
    box-shadow: 0 0 16px -3px var(--chart);
    transform-origin: left;
    animation: grow 0.9s 0.1s var(--ease) both;
}

@keyframes grow {
    from {
        transform: scaleX(0);
    }
}

/* The middle of the population, which the reading is relative to. */
.bar__mean {
    position: absolute;
    left: 50%;
    top: -4px;
    bottom: -4px;
    width: 2px;
    margin-left: -1px;
    background: rgba(255, 255, 255, 0.32);
}

.bar__you {
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
    border-radius: 50%;
    background: var(--chart);
    border: 2px solid var(--bg);
    box-shadow: 0 0 14px -1px var(--chart);
    animation: reveal 0.5s 0.85s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.bar__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(134, 143, 166, 0.75);
}

/* ------------------------------- the card ------------------------------- */

/* The two buttons sit under the web they carry, with nothing between. */
.share {
    margin-top: 26px;
}

.card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}

.card__canvas {
    display: block;
    width: 100%;
    height: auto;
}

.share__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.share--waiting .share__actions {
    display: none;
}

.share__actions .btn + .btn {
    margin-left: 0;
}

.share__note {
    margin: 14px 0 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
    overflow-wrap: anywhere;
    transition: color 0.3s;
}

.share__note--done {
    color: var(--done);
}

/* --------------------------- the whole profile --------------------------- */

/* Drawn in the panel during the run and, once there is nothing left to answer,
   on the last screen — where it is the whole of what there is to show, so it
   is given the page rather than announced with a way to it. */
#profile-done {
    text-align: center;
    animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.profile__title {
    font-family: var(--serif);
    font-size: clamp(30px, 6vw, 46px);
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 12px 0 12px;
    color: var(--gold-pale);
    text-shadow: 0 0 60px rgba(217, 164, 65, 0.45);
}

#profile-done .lede {
    max-width: 52ch;
    margin: 0 auto;
}

#profile-done .share {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile__foot {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

/* Whether the answers got where they were going, over the way of keeping a
   copy. Green once they have; the same red a refused answer gets if they
   have not, since the person then has something to do about it. */
.save__note {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
    transition: color 0.3s;
}

.save__note--done {
    color: var(--done);
}

.save__note--failed {
    color: #ff8f8f;
}

/* Somebody else's card, arrived at from a link. */
.visit {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.visit__title {
    font-size: clamp(30px, 6vw, 48px);
    margin: 10px 0 26px;
    color: #ffffff;
    text-shadow: 0 0 70px rgba(124, 92, 255, 0.5);
}

.visit .lede {
    max-width: 54ch;
    margin: 26px auto 30px;
}

@media (prefers-reduced-motion: reduce) {
    /* The staging goes: a finished level is simply all there. */
    .level::after,
    .result--opening,
    .result--opening::after,
    .curtain--in .curtain__splash,
    .curtain--in .curtain__words {
        animation: none;
    }

    .result,
    .level__foot {
        transition: none;
    }

    /* The bars are simply there, at their length. */
    .bar__fill,
    .bar__you,
    .taste__meter i {
        animation: none;
    }

    /* The water holds still, and the section is all there at once. */
    .sea__drift,
    .sea__creature,
    .sea__mote,
    .sea__torch,
    .sea__coral,
    .seaview,
    .seaview__head,
    .seaview__note,
    .seaview__keys,
    .seaview__bar i,
    .seaview__others,
    .seaview__vote,
    .climb__cloud,
    .climbview__stage,
    .climbview__head,
    .climbview__note,
    .climbview__bars,
    .climbview__fill,
    .climbview__others,
    .climbview__vote {
        animation: none;
    }

    .curtain--out .curtain__splash,
    .curtain--out .curtain__words {
        animation-name: vanish;
    }
}