/* ===========================================================================
   "The descent" — the cinematic homepage.

   Loaded ALONE by index.html. Deliberately not layered on top of
   chemease.css/home.css: this design carries its own reset and its own token
   names (--bg, --ink, --brand), and home.css is shared by all 42 other pages,
   so extending either one would have meant editing a file the whole site
   depends on. Nothing else loads this stylesheet, so the short class prefix
   dsc- cannot collide with the ce- classes used everywhere else.

   Values come from the design handoff's token table. Sizes that are clamp()
   in the prototype stay clamp() here — there is exactly one media query in
   the file (the 900px rail/nav cut), because every grid is auto-fit + minmax
   and collapses on its own.
   ======================================================================== */

/* --- Tokens ----------------------------------------------------------- */
:root {
    --bg: #ffffff;
    --bg-alt: #f7f4ee;
    --d1: #fbf9f4;
    --d2: #f4efe5;
    --panel: #ffffff;
    --panel-soft: rgba(28, 26, 23, .025);
    --panel-line: #e5e0d5;
    --ink: #1c1a17;
    --ink-2: #5c564a;
    --ink-3: #7c7565;
    --faint: #9e9786;
    --line: #e5e0d5;
    --line-soft: #d4cdbc;
    --brand: #b85c27;
    --brand-hi: #9c4b1d;
    --on-brand: #ffffff;
    --pos: #0d9668;
    --warn: #b1852c;
    --neg: #c2414c;
    --neut: #8a8272;
    --wash-a: rgba(240, 138, 75, .30);
    --wash-b: rgba(238, 203, 171, .44);
    --wash-c: rgba(194, 65, 76, .12);
    --field: #ffffff;
    --shadow: 0 30px 70px -44px rgba(28, 26, 23, .4);
    --dot: rgba(28, 26, 23, .13);
    --spark: 28, 26, 23;
    --gained: #3b72b3;
    --e: cubic-bezier(.4, 0, .2, 1);
    --enter: cubic-bezier(.16, 1, .3, 1);
    --hover: cubic-bezier(.2, .8, .2, 1);
    --header-h: 65px;
    --mast-pad-t: clamp(16px, 2.8vh, 36px);
    --mast-pad-b: clamp(18px, 2.6vh, 34px);
    --tile: clamp(38px, min(8.4vw, 14vh), 112px);
    /* What the masthead occupies, so the hero can subtract it and the two
       together come to exactly one viewport on first paint. */
    --masthead-h: calc(var(--header-h) + var(--mast-pad-t) + var(--tile) + var(--mast-pad-b));
    --gut: clamp(18px, 4vw, 44px);
    --gut-left: clamp(124px, 9vw, 168px);
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root[data-ce-theme="dark"] {
    --bg: #201327;
    --bg-alt: #271831;
    --d1: #1c1023;
    --d2: #170d1d;
    --panel: rgba(255, 255, 255, .05);
    --panel-soft: rgba(255, 255, 255, .032);
    --panel-line: rgba(255, 255, 255, .11);
    --ink: #f4eef7;
    --ink-2: #c2b2cd;
    --ink-3: #9c8aa9;
    --faint: #7a6987;
    --line: rgba(255, 255, 255, .10);
    --line-soft: rgba(255, 255, 255, .19);
    --brand: #f08a4b;
    --brand-hi: #f8ab72;
    --on-brand: #1a0d07;
    --pos: #34d399;
    --warn: #e0b04f;
    --neg: #ef6a7d;
    --neut: #9c8aa9;
    --wash-a: rgba(240, 138, 75, .28);
    --wash-b: rgba(226, 68, 94, .18);
    --wash-c: rgba(122, 72, 180, .22);
    --field: rgba(0, 0, 0, .3);
    --shadow: 0 40px 90px -50px #000;
    --dot: rgba(255, 255, 255, .11);
    --spark: 244, 238, 247;
    --gained: #8fb4f5;
}

/* Hero, Act II and Act IV are dark whatever the theme, so they re-declare the
   plum palette locally rather than depending on the toggle. */
.dsc-dark {
    --ink: #f4eef7;
    --ink-2: #c2b2cd;
    --ink-3: #9b8aa8;
    --faint: #7a6987;
    --line: rgba(255, 255, 255, .10);
    --line-soft: rgba(255, 255, 255, .2);
    --brand: #f5934f;
    --brand-hi: #f9b17a;
    --on-brand: #1a0d07;
    --panel: rgba(255, 255, 255, .05);
    --panel-soft: rgba(255, 255, 255, .035);
    --panel-line: rgba(255, 255, 255, .11);
    --field: rgba(0, 0, 0, .3);
    --gained: #8fb4f5;
    color: #f4eef7;
}

/* --- Reset ------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Space Grotesk", Inter, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    transition: background-color .6s var(--e), color .6s var(--e);
}

a {
    color: var(--brand);
    text-decoration: none;
}

a:hover {
    color: var(--brand-hi);
}

img {
    max-width: 100%;
}

input,
textarea,
button,
select {
    font: inherit;
    color: inherit;
}

input[type=range] {
    accent-color: var(--brand);
}

::selection {
    background: rgba(240, 138, 75, .32);
    color: var(--ink);
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

/* Theme crossfade. The prototype kept this armed permanently on every themed
   element; it is only wanted for the half-second after the toggle, so the
   script adds .dsc-theming for that long and then takes it off again. */
:root.dsc-theming:not([data-ce-anim="off"]) *,
:root.dsc-theming:not([data-ce-anim="off"]) *::before,
:root.dsc-theming:not([data-ce-anim="off"]) *::after {
    transition: background-color .6s var(--e), border-color .6s var(--e),
        color .6s var(--e), box-shadow .6s var(--e) !important;
}

/* --- Keyframes -------------------------------------------------------- */
@keyframes dscRise {
    from { opacity: 0; transform: translateY(115%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes dscFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dscPulse {
    0%, 100% { opacity: .35; transform: scale(.85); }
    50%      { opacity: 1;   transform: scale(1); }
}

@keyframes dscDot {
    0%   { opacity: 0;   transform: translateY(-7px) scale(.35); }
    65%  { opacity: 1;   transform: translateY(0) scale(1.15); }
    100% { opacity: .95; transform: translateY(0) scale(1); }
}

@keyframes dscFlip {
    from { opacity: 0; transform: rotateX(-84deg) translateY(7px); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: rotateX(0) translateY(0); }
}

@keyframes dscDriftB {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(-4%, -3%, 0); }
}

/* --- Fixed ambient layer ---------------------------------------------- */
.dsc-spark,
.dsc-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.dsc-spark {
    width: 100%;
    height: 100%;
    opacity: 0;
}

.dsc-ambient {
    overflow: hidden;
}

.dsc-orb {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle at 42% 38%, rgba(255, 214, 170, .9), var(--wash-a) 38%, transparent 70%);
    filter: blur(26px);
    will-change: transform, opacity;
}

.dsc-wash {
    position: absolute;
    bottom: -26%;
    right: -12%;
    width: 54vw;
    max-width: 780px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--wash-b), transparent 66%);
    filter: blur(60px);
    animation: dscDriftB 46s ease-in-out infinite;
}

.dsc-grid {
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image: radial-gradient(var(--dot) .7px, transparent .8px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

/* --- Header ----------------------------------------------------------- */
.dsc-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 13px var(--gut);
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
}

.dsc-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
}

.dsc-logo:hover {
    color: var(--ink);
}

.dsc-logo img {
    display: block;
    border-radius: 8px;
}

.dsc-logo span {
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -.02em;
}

.dsc-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.dsc-nav a {
    color: var(--ink-3);
    padding: 8px 11px;
    border-radius: 999px;
}

.dsc-nav a:hover {
    color: var(--ink);
    background: var(--panel-soft);
}

.dsc-header__right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dsc-themebtn {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
}

.dsc-themebtn:hover {
    background: var(--panel-soft);
    color: var(--ink);
    border-color: var(--line-soft);
}

.dsc-themebtn svg {
    display: block;
    position: absolute;
    transition: opacity .4s, transform .5s;
}

.dsc-themebtn .dsc-sun  { opacity: 1; transform: rotate(0deg); }
.dsc-themebtn .dsc-moon { opacity: 0; transform: rotate(70deg); }

:root[data-ce-theme="dark"] .dsc-themebtn .dsc-sun  { opacity: 0; transform: rotate(-70deg); }
:root[data-ce-theme="dark"] .dsc-themebtn .dsc-moon { opacity: 1; transform: rotate(0deg); }

/* --- Buttons ---------------------------------------------------------- */
.dsc-cta-pill {
    background: var(--brand);
    color: var(--on-brand);
    padding: 10px 19px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -.01em;
    transition: transform .25s var(--hover), background-color .3s;
}

.dsc-cta-pill:hover {
    background: var(--brand-hi);
    color: var(--on-brand);
    transform: translateY(-1px);
}

.dsc-cta-pill--lg {
    padding: 15px 28px;
    font-size: 17px;
    transition: transform .25s var(--hover), background-color .3s, box-shadow .3s;
}

.dsc-cta-pill--lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -18px var(--brand);
}

.dsc-cta-pill--xl {
    padding: 17px 34px;
    font-size: 18px;
    transition: transform .25s var(--hover), background-color .3s, box-shadow .3s;
}

.dsc-cta-pill--xl:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 46px -18px var(--brand);
}

/* Google's badge asset fills its own viewBox, so the required clear space
   (a quarter of the badge height) has to come from the margin here. */
.dsc-badge {
    display: block;
}

.dsc-badge img {
    display: block;
    height: 52px;
    width: auto;
}

.dsc-badge--band img { height: 56px; }
.dsc-badge--cta img  { height: 54px; }

/* --- Scale rail ------------------------------------------------------- */
.dsc-rail {
    position: fixed;
    left: clamp(8px, 1.4vw, 24px);
    top: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.dsc-rail__inner {
    position: relative;
    height: min(62vh, 500px);
    width: 86px;
}

.dsc-rail__act {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brand);
    white-space: nowrap;
}

.dsc-rail__line {
    position: absolute;
    left: 28px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--line-soft) 10%, var(--line-soft) 90%, transparent);
}

.dsc-rail__tick {
    position: absolute;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    transform: translateY(-50%);
    transition: opacity .45s var(--e);
}

.dsc-rail__tick i {
    height: 1px;
    background: var(--line-soft);
    transition: width .45s var(--e), background-color .45s var(--e);
}

.dsc-rail__tick span {
    font-family: var(--mono);
    letter-spacing: .08em;
    color: var(--faint);
    white-space: nowrap;
    transition: font-size .45s var(--e), color .45s var(--e);
}

.dsc-rail__tick.is-on i    { background: var(--brand); }
.dsc-rail__tick.is-on span { color: var(--brand); }

.dsc-rail__marker {
    position: absolute;
    left: 22px;
    top: 6%;
    width: 13px;
    height: 13px;
    transform: translateY(-50%);
}

.dsc-rail__marker span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* --- Scene scaffolding ------------------------------------------------ */
.dsc-main {
    position: relative;
    z-index: 1;
}

.dsc-scene {
    position: relative;
}

.dsc-scene--hero { height: 230vh; background: linear-gradient(180deg, #1b1022 0%, #140b1a 62%, #17101f 100%); }
.dsc-scene--act1 { height: 155vh; background: var(--bg);  border-top: 1px solid var(--line); }
.dsc-scene--act2 { height: 155vh; background: #191024; }
.dsc-scene--act3 { height: 155vh; background: var(--d2); border-top: 1px solid var(--line); }
.dsc-scene--act4 { height: 160vh; background: #120a17; }

.dsc-stick {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(90px, 11vh, 130px) var(--gut) clamp(60px, 8vh, 100px) var(--gut-left);
}

.dsc-scene--hero .dsc-stick {
    overflow: hidden;
    /* The masthead sits directly above and shares the first screen, so the
       pane takes what is left of the viewport rather than all of it. Once
       pinned it is shorter than the screen by that much, which is invisible:
       the section paints the same gradient behind it. */
    /* Capped as well as subtracted. Without the cap the pane keeps growing
       with the viewport and, since it centres its content, half of every
       extra pixel lands between the wordmark and the headline -- which is
       what made the gap look like a mistake on a tall screen. */
    min-height: min(calc(100vh - var(--masthead-h)), 760px);
    padding-top: clamp(18px, 2.2vh, 34px);
    padding-bottom: clamp(28px, 4vh, 64px);
}

.dsc-wrap {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
}

.dsc-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.dsc-split--wide { gap: clamp(28px, 4vw, 60px); }

/* --- Act eyebrow ------------------------------------------------------ */
.dsc-scale {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 26px;
}

.dsc-scale__exp {
    font-family: var(--mono);
    font-weight: 500;
    font-size: clamp(32px, 3.8vw, 56px);
    line-height: .82;
    letter-spacing: -.04em;
    color: var(--brand);
}

.dsc-scale__exp sup { font-size: .5em; }

.dsc-scale__exp em {
    font-size: .42em;
    margin-left: .28em;
    font-style: normal;
}

.dsc-scale__txt { padding-bottom: 3px; }

.dsc-scale__act {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.dsc-scale__name {
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-top: 3px;
}

/* --- Type ------------------------------------------------------------- */
.dsc-h1 {
    font-weight: 700;
    font-size: clamp(40px, 5.6vw, 92px);
    line-height: .94;
    letter-spacing: -.04em;
    margin: 0 0 24px;
    max-width: 15ch;
}

.dsc-h1 .dsc-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.dsc-h1 .dsc-mask > span {
    display: inline-block;
    animation: dscRise 1s var(--enter) both;
}

.dsc-h2 {
    font-weight: 700;
    font-size: clamp(32px, 4vw, 60px);
    line-height: .99;
    letter-spacing: -.035em;
    margin: 0 0 18px;
}

.dsc-h2--tight { letter-spacing: -.042em; }
.dsc-h2--flat  { line-height: .98; margin-bottom: 20px; }

.dsc-lead {
    font-weight: 300;
    font-size: clamp(16.5px, 1.35vw, 21px);
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 22px;
    max-width: 46ch;
}

.dsc-lead--wide { max-width: 48ch; }

.dsc-toollink {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    font-weight: 600;
    font-size: 15.5px;
}

.dsc-toollink span { font-family: var(--mono); }

/* --- The element wordmark --------------------------------------------- */
/* A masthead of its own above the hero rather than a line inside it. The
   hero pane has to fit the viewport to stay pinnable -- a wordmark this size
   inside it would have pushed a 1366x768 laptop out of the scrubbed mode
   altogether -- and up here it can be as large as it wants. */
.dsc-masthead {
    display: flex;
    justify-content: center;
    padding: calc(var(--header-h) + var(--mast-pad-t)) var(--gut) var(--mast-pad-b);
    background: #1b1022;
}

/* Eight real elements whose initials spell the name. They turn up one at a
   time, like a split-flap board settling. */
.dsc-wordmark {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(4px, .7vw, 12px);
    margin: 0;
    perspective: 1400px;
}

.dsc-wt {
    position: relative;
    width: var(--tile);
    aspect-ratio: 1;
    border-radius: clamp(5px, .8vw, 12px);
    border: 1px solid color-mix(in srgb, var(--hue) 78%, transparent);
    background: color-mix(in srgb, var(--hue) 30%, transparent);
    display: grid;
    place-items: center;
    transform-origin: 50% 100%;
    animation: dscFlip .62s var(--enter) both;
    animation-delay: calc(.12s + var(--i) * .075s);
    transition: transform .3s var(--hover), background-color .3s var(--e);
}

.dsc-wt:hover {
    transform: translateY(-4px) scale(1.05);
    background: color-mix(in srgb, var(--hue) 46%, transparent);
}

/* Solid white rather than a tint of the category colour. The tinted version
   read as a glow on the dark ground and lost most of its contrast at the
   symbol's weight; the colour belongs to the tile, not to the letters. */
.dsc-wt__z {
    position: absolute;
    top: clamp(3px, .5vw, 9px);
    left: clamp(4px, .6vw, 11px);
    font-family: var(--mono);
    font-size: clamp(7px, 1.15vw, 16px);
    line-height: 1;
    color: #ffffff;
    opacity: .72;
}

.dsc-wt__sym {
    font-family: var(--mono);
    font-weight: 700;
    font-size: clamp(17px, 4vw, 54px);
    line-height: 1;
    letter-spacing: -.03em;
    color: #ffffff;
    margin-top: clamp(3px, .7vw, 10px);
}

/* The letter being read sits solid; the rest of the symbol steps back one
   notch so the name reads first, but stays legible -- the tile is still an
   honest label for the element. */
.dsc-wt__sym b { font-weight: 700; }
.dsc-wt__rest { opacity: .6; font-weight: 500; }

.dsc-wt[data-cat="a"] { --hue: #f0714f; }
.dsc-wt[data-cat="e"] { --hue: #f39a4e; }
.dsc-wt[data-cat="t"] { --hue: #f5b04e; }
.dsc-wt[data-cat="p"] { --hue: #c9d05a; }
.dsc-wt[data-cat="m"] { --hue: #6ec59a; }
.dsc-wt[data-cat="n"] { --hue: #5ab5cf; }
.dsc-wt[data-cat="h"] { --hue: #7c9ae0; }
.dsc-wt[data-cat="g"] { --hue: #a98ae2; }
.dsc-wt[data-cat="l"] { --hue: #e07ba8; }
.dsc-wt[data-cat="c"] { --hue: #c86fd0; }

/* --- Hero ------------------------------------------------------------- */
.dsc-status {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #f5934f;
    margin: 0 0 clamp(14px, 2vh, 20px);
    animation: dscFade 1s ease .1s both;
}

.dsc-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    animation: dscPulse 2.8s ease-in-out infinite;
}

.dsc-hero__lead {
    font-weight: 300;
    font-size: clamp(17px, 1.4vw, 23px);
    line-height: 1.55;
    color: #c2b2cd;
    max-width: 48ch;
    /* vh-scaled so a short laptop keeps the pane inside the viewport. */
    margin: 0 0 clamp(20px, 3vh, 32px);
    animation: dscFade 1s ease .48s both;
}

.dsc-hero__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    animation: dscFade 1s ease .6s both;
}

.dsc-table {
    position: relative;
    width: 100%;
    max-width: min(880px, 74vh);
    justify-self: end;
    margin-inline: auto;
}

.dsc-table__grid {
    display: grid;
    grid-template-columns: repeat(18, minmax(0, 1fr));
    gap: clamp(1px, .3vw, 4px);
    perspective: 900px;
}

.dsc-tile {
    aspect-ratio: 1;
    border-radius: 3px;
    border: 1px solid;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-weight: 500;
    font-size: clamp(7px, .9vw, 13px);
    opacity: 0;
    will-change: transform, opacity;
}

.dsc-table__cap {
    margin-top: 16px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7a6987;
    opacity: 0;
}

.dsc-table__num {
    font-size: 22px;
    letter-spacing: -.02em;
    color: #f5934f;
}

/* --- Act I: solubility ------------------------------------------------ */
.dsc-verdict {
    padding: 20px 22px;
    border-radius: 14px;
    border: 1px solid;
    transition: background-color .45s var(--e), border-color .45s var(--e);
}

.dsc-verdict__pair {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}

.dsc-verdict__v {
    font-weight: 700;
    font-size: clamp(24px, 2.4vw, 34px);
    letter-spacing: -.025em;
    margin-bottom: 8px;
    transition: color .45s var(--e);
}

.dsc-verdict__rule {
    font-weight: 300;
    font-size: 15.5px;
    line-height: 1.58;
    color: var(--ink-2);
    margin: 0;
}

.dsc-matrix {
    border: 1px solid var(--panel-line);
    border-radius: 16px;
    background: var(--panel);
    padding: 18px;
    box-shadow: var(--shadow);
    overflow-x: auto;
}

.dsc-matrix__grid {
    display: grid;
    gap: 3px;
    min-width: 470px;
    max-width: 620px;
}

.dsc-matrix__anion {
    font-family: var(--mono);
    font-size: 9.5px;
    color: var(--ink-3);
    text-align: center;
    padding-bottom: 5px;
    letter-spacing: -.01em;
}

.dsc-matrix__cation {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-3);
    display: flex;
    align-items: center;
}

.dsc-cell {
    aspect-ratio: 1;
    min-width: 0;
    border-radius: 5px;
    border: 1px solid;
    cursor: pointer;
    padding: 0;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-2);
    transition: transform .16s, box-shadow .16s, background-color .4s, border-color .4s;
}

.dsc-cell:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4);
    z-index: 2;
}

/* While the grid is resolving, the script writes transform every frame. The
   hover transition would damp that into mush, so it is switched off until
   the last cell lands and the inline styles are dropped. */
.dsc-matrix__grid.is-entering .dsc-cell,
.dsc-matrix__grid.is-entering .dsc-matrix__anion,
.dsc-matrix__grid.is-entering .dsc-matrix__cation {
    transition: none;
    will-change: transform, opacity;
}

/* --- Act II: buffer --------------------------------------------------- */
.dsc-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: clamp(18px, 2vw, 26px);
    border-left: 2px solid var(--brand);
}

.dsc-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.dsc-label--mb { margin-bottom: 10px; }

.dsc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dsc-pill {
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--ink-3);
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 12px;
    transition: background-color .24s, border-color .24s, color .24s;
}

.dsc-pill:hover { color: var(--ink); }

.dsc-pill.is-on {
    background: rgba(245, 147, 79, .18);
    border-color: var(--brand);
    color: var(--ink);
}

.dsc-slider__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.dsc-slider__val {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--brand);
}

.dsc-range {
    width: 100%;
    cursor: pointer;
}

.dsc-phcard {
    border-radius: 20px;
    border: 1px solid var(--panel-line);
    background: var(--panel);
    padding: 30px 28px;
}

.dsc-phcard__top {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 24px;
}

.dsc-ph {
    font-weight: 700;
    font-size: clamp(58px, 6.8vw, 104px);
    line-height: .84;
    letter-spacing: -.05em;
    transition: color .5s var(--e);
}

.dsc-phcard__side { padding-bottom: 10px; }

.dsc-phcard__pka {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-2);
    margin-top: 4px;
}

.dsc-strip {
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    margin-bottom: 8px;
    border: 1px solid var(--panel-line);
}

.dsc-strip span {
    flex: 1;
    transform-origin: bottom;
    transition: opacity .4s;
}

.dsc-axis {
    position: relative;
    height: 22px;
    margin-bottom: 20px;
}

.dsc-axis__mark {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: left .4s var(--hover);
}

.dsc-axis__mark i {
    width: 2px;
    height: 9px;
    background: var(--ink);
}

.dsc-axis__mark span {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink);
    margin-top: 2px;
}

.dsc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr));
    gap: 16px;
    border-top: 1px solid var(--panel-line);
    padding-top: 20px;
}

.dsc-stats dt {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.dsc-stats dd {
    font-family: var(--mono);
    font-size: 18px;
    margin: 5px 0 0;
}

.dsc-stats dd.is-brand { color: var(--brand); }

/* --- Act III: oxidation ----------------------------------------------- */
.dsc-formula {
    width: 100%;
    max-width: 440px;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--line-soft);
    padding: 6px 2px 10px;
    font-family: var(--mono);
    font-size: clamp(26px, 3vw, 42px);
    letter-spacing: -.02em;
    outline: none;
    transition: border-color .3s;
}

.dsc-formula:focus { border-color: var(--brand); }

.dsc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.dsc-chip {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-3);
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 11.5px;
    transition: border-color .24s, color .24s;
}

.dsc-chip:hover {
    border-color: var(--brand);
    color: var(--ink);
}

.dsc-oxstates {
    display: flex;
    flex-wrap: wrap;
    margin-top: 26px;
    border-top: 1px solid var(--line);
}

.dsc-oxstate {
    flex: 1 1 108px;
    padding: 16px 20px 16px 0;
    border-bottom: 1px solid var(--line);
}

.dsc-oxstate__sym {
    font-weight: 600;
    font-size: 23px;
    letter-spacing: -.02em;
}

.dsc-oxstate__n {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    margin-top: 2px;
}

.dsc-oxstate__v {
    font-weight: 700;
    font-size: 32px;
    letter-spacing: -.04em;
    margin-top: 6px;
    transition: color .45s var(--e);
}

.dsc-ledger {
    border: 1px solid var(--panel-line);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: var(--shadow);
    padding: 26px 26px 20px;
}

.dsc-ledger__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.dsc-ledger__sum {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
}

.dsc-ledger__rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dsc-lrow,
.dsc-ledger__axis {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr) 54px;
    gap: 14px;
    align-items: center;
}

.dsc-lrow__sym {
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -.02em;
}

.dsc-lrow__n {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
}

.dsc-lrow__track {
    position: relative;
    height: 34px;
}

.dsc-lrow__zero {
    position: absolute;
    left: 50%;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: var(--line-soft);
}

.dsc-lrow__bar {
    position: absolute;
    top: 7px;
    height: 20px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 5px;
    border: 1px solid;
    transition: left .6s var(--e), width .6s var(--e), background-color .4s, border-color .4s;
}

.dsc-lrow__bar i {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: dscDot .5s var(--enter) both;
}

.dsc-lrow__val {
    font-family: var(--mono);
    font-size: 17px;
    text-align: right;
    transition: color .4s var(--e);
}

.dsc-ledger__axis {
    margin-top: 4px;
}

.dsc-ledger__axis div {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 9.5px;
    color: var(--ink-3);
}

.dsc-ledger__note {
    font-weight: 300;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-3);
    margin: 16px 0 0;
}

.dsc-ledger__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.dsc-ledger__foot a { letter-spacing: .12em; }

/* --- Act IV: the atom ------------------------------------------------- */
.dsc-atom {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(20px, 3vw, 44px);
    align-items: center;
    padding-bottom: clamp(24px, 3vh, 38px);
    border-bottom: 1px solid var(--panel-line);
}

.dsc-atom__id {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dsc-atom__sym {
    font-weight: 700;
    font-size: clamp(54px, 7vw, 112px);
    line-height: .8;
    letter-spacing: -.055em;
    color: var(--brand);
}

.dsc-atom__name {
    font-weight: 600;
    font-size: 21px;
    margin-top: 4px;
    letter-spacing: -.02em;
}

.dsc-atom__meta {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 3px;
}

.dsc-atom__cfg {
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--ink-2);
    margin-top: 12px;
    line-height: 1.6;
}

.dsc-atom__exc {
    display: block;
    font-size: 11.5px;
    color: var(--brand);
    letter-spacing: .04em;
    margin-top: 5px;
}

.dsc-orbitals {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    margin-top: clamp(22px, 3vh, 36px);
}

.dsc-orb__label {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--brand);
    margin-bottom: 7px;
    letter-spacing: .04em;
}

.dsc-orb__boxes {
    display: flex;
    gap: 3px;
}

.dsc-box {
    width: 26px;
    height: 30px;
    border: 1px solid var(--line-soft);
    border-radius: 3px;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--faint);
    background: transparent;
    transition: background-color .35s, border-color .35s, color .35s;
}

.dsc-box.is-filled {
    background: rgba(245, 147, 79, .16);
    border-color: rgba(245, 147, 79, .5);
    color: var(--ink);
}

.dsc-atom__links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 26px;
}

.dsc-atom__links a {
    font-weight: 600;
    font-size: 15.5px;
}

/* --- Flat sections ---------------------------------------------------- */
.dsc-section {
    padding: clamp(78px, 9vw, 130px) var(--gut) clamp(78px, 9vw, 130px) var(--gut-left);
    border-top: 1px solid var(--line);
}

.dsc-section--tools { background: var(--bg-alt); }

.dsc-section--cta {
    padding-top: clamp(88px, 10vw, 148px);
    padding-bottom: clamp(88px, 10vw, 148px);
    text-align: center;
}

.dsc-sechead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 44px;
}

.dsc-sechead h2 {
    font-weight: 700;
    font-size: clamp(32px, 3.8vw, 58px);
    line-height: 1;
    letter-spacing: -.035em;
    margin: 0;
    max-width: 22ch;
}

.dsc-sechead p {
    font-weight: 300;
    font-size: 17.5px;
    line-height: 1.58;
    color: var(--ink-2);
    margin: 0;
    max-width: 46ch;
}

.dsc-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 16px;
}

.dsc-body {
    font-weight: 300;
    font-size: clamp(17px, 1.4vw, 22px);
    line-height: 1.58;
    color: var(--ink-2);
    margin: 0 0 28px;
    max-width: 46ch;
}

/* --- Tool families ---------------------------------------------------- */
.dsc-fams {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(20px, 2.4vw, 32px);
}

.dsc-fam {
    /* The card carries --fam-light and --fam-dark inline; --fam is resolved
       here so the theme override below is not competing with an inline
       declaration it can never outrank. */
    --fam: var(--fam-light);
    border: 1px solid var(--panel-line);
    border-top: 3px solid var(--fam);
    border-radius: 18px;
    padding: 24px 24px 28px;
    background: var(--panel);
}

.dsc-fam__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.dsc-fam__head h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -.025em;
    margin: 0;
}

.dsc-fam__head h3 i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fam);
}

.dsc-fam__count {
    font-family: var(--mono);
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fam) 13%, transparent);
    color: var(--fam);
}

.dsc-fam__blurb {
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.52;
    color: var(--ink-3);
    margin: 0 0 16px;
}

.dsc-fam__list {
    display: flex;
    flex-direction: column;
}

.dsc-fam__list a {
    display: block;
    padding: 9px 0;
    border-top: 1px solid var(--line);
}

.dsc-fam__list b {
    display: block;
    font-weight: 500;
    font-size: 14.5px;
    color: var(--ink);
    transition: color .24s var(--e);
}

.dsc-fam__list span {
    display: block;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.42;
    color: var(--ink-3);
    margin-top: 1px;
}

.dsc-fam__list a:hover b { color: var(--brand); }

/* --- The rest of a family, behind a disclosure ------------------------ */
.dsc-fam__more > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 0 2px;
    border-top: 1px solid var(--line);
    cursor: pointer;
    list-style: none;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    /* Not the family accent: three of the four light accents land near 3.4:1
       on the panel, which is fine for an 8px dot or a 3px rule but not for
       10.5px text. The accent stays on the chevron, which is a UI glyph and
       only owes 3:1. */
    color: var(--ink-3);
    transition: color .24s var(--e);
}

/* Safari still paints its own triangle without this. */
.dsc-fam__more > summary::-webkit-details-marker { display: none; }
.dsc-fam__more > summary::marker { content: ""; }

.dsc-fam__more > summary:hover { color: var(--brand); }

.dsc-fam__more > summary svg {
    color: var(--fam);
    transition: transform .3s var(--e);
}

.dsc-fam__more[open] > summary svg { transform: rotate(180deg); }

/* The label swaps on open with no script; :checked-style state only. */
.dsc-fam__more > summary .dsc-fam__more-off,
.dsc-fam__more[open] > summary .dsc-fam__more-on { display: none; }
.dsc-fam__more[open] > summary .dsc-fam__more-off { display: inline; }

:root[data-ce-theme="dark"] .dsc-fam { --fam: var(--fam-dark); }

/* --- Android ---------------------------------------------------------- */
.dsc-android {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: clamp(32px, 4vw, 64px);
    align-items: end;
}

.dsc-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 20px 28px;
}

.dsc-bullets b {
    font-weight: 600;
    font-size: 15.5px;
}

.dsc-bullets span {
    display: block;
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.52;
    color: var(--ink-3);
    margin-top: 3px;
}

.dsc-shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
    gap: clamp(14px, 1.6vw, 24px);
    margin-top: clamp(44px, 6vw, 78px);
}

.dsc-shots figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.dsc-shots__frame {
    position: relative;
    border: 1px solid var(--panel-line);
    border-radius: 20px;
    overflow: hidden;
    background: var(--panel);
    box-shadow: var(--shadow);
    transition: transform .45s var(--hover), box-shadow .45s var(--e);
}

.dsc-shots__frame:hover {
    transform: translateY(-10px) scale(1.015);
    box-shadow: 0 38px 60px -32px rgba(28, 26, 23, .45);
}

.dsc-shots img {
    width: 100%;
    height: auto;
    display: block;
}

.dsc-shots figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dsc-shots__kicker {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand);
}

.dsc-shots__cap {
    font-weight: 300;
    font-size: 13.5px;
    line-height: 1.42;
    color: var(--ink-3);
}

/* --- Departments ------------------------------------------------------ */
.dsc-depts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

.dsc-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 14px;
}

.dsc-trust__card {
    padding: 24px 22px 26px;
    border-radius: 14px;
    border: 1px solid var(--panel-line);
    background: var(--panel-soft);
}

.dsc-trust__stat {
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--brand);
}

.dsc-trust__head {
    font-weight: 600;
    font-size: 15.5px;
    margin-top: 14px;
}

.dsc-trust__card p {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.52;
    color: var(--ink-3);
    margin: 5px 0 0;
}

/* --- Closing CTA ------------------------------------------------------ */
.dsc-cta h2 {
    font-weight: 700;
    font-size: clamp(40px, 5.6vw, 88px);
    line-height: .94;
    letter-spacing: -.04em;
    margin: 0 auto 22px;
    max-width: 18ch;
}

.dsc-cta p {
    font-weight: 300;
    font-size: clamp(18px, 1.5vw, 23px);
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 auto 38px;
    max-width: 50ch;
}

.dsc-cta__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

/* --- Footer ----------------------------------------------------------- */
.dsc-footer {
    padding: 44px var(--gut) 52px var(--gut-left);
    border-top: 1px solid var(--line);
}

.dsc-footer__inner {
    max-width: 1560px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    justify-content: space-between;
}

.dsc-footer__about {
    max-width: 34ch;
}

.dsc-footer__about .dsc-logo {
    margin-bottom: 11px;
}

.dsc-footer__blurb {
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.58;
    color: var(--ink-3);
    margin: 0;
}

.dsc-footer__cols {
    display: flex;
    gap: clamp(28px, 4vw, 54px);
    flex-wrap: wrap;
    font-size: 14.5px;
}

.dsc-footer__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dsc-footer__col h2 {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}

.dsc-footer__col a { color: var(--ink-2); }
.dsc-footer__col a:hover { color: var(--brand); }

.dsc-footer__legal {
    width: 100%;
    margin: 0;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: .04em;
}

/* --- Skip link -------------------------------------------------------- */
.dsc-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--brand);
    color: var(--on-brand);
    padding: 12px 20px;
    border-radius: 0 0 10px 0;
    font-weight: 600;
}

.dsc-skip:focus {
    left: 0;
    color: var(--on-brand);
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
    .dsc-rail,
    .dsc-nav {
        display: none !important;
    }

    :root { --gut-left: clamp(18px, 4vw, 44px); }

    .dsc-header {
        padding-left: clamp(14px, 4vw, 44px);
        padding-right: clamp(14px, 4vw, 44px);
    }
}

/* --- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        /* Without this a staggered entrance still holds its "from" state for
           the length of the delay, so the wordmark would sit blank for half a
           second and then pop. Zeroing it lands everything at once. */
        animation-delay: 0s !important;
    }
}