/* The two audience sections are one zone, set a step off the page ground on the
   card surface (`--color-white`): white on the light page, its grey counterpart
   under `.dark-theme`. The cards and the editor sit on it.

   Every colour here is a token, so the dark theme is a list of values rather
   than a second set of rules. Those values stay neutral grey like the rest of
   the site's dark palette — a blue-tinted card or a navy editor reads as a
   different material on it.

   The Lean palette inside the editor follows the site theme too
   (`lean-themed.css`). */
/* The zone's surface and its hairline are declared on the root rather than on
   the section, because the sticky header — which is not inside the section —
   takes the same two values while the zone is behind it (see the header rules
   below). One declaration per theme means a theme switch repaints the header
   immediately, with no help from JavaScript. */
:root {
    --code-feature-zone: var(--color-white);
    --code-feature-border: #dfe5ee;
}

.dark-theme {
    --code-feature-zone: #121212;
    --code-feature-border: #2a2a2a;
}

.code-feature {
    --code-feature-panel: var(--color-white);
    --code-feature-on-zone: var(--home-heading-color);
    --code-feature-lead: var(--color-text-light);
    --code-feature-muted: var(--color-text-light);
    --code-feature-tint: #f4f7fc;
    --code-feature-card-hover-shadow: 0 26px 50px -34px rgba(30, 45, 75, 0.42);
    --code-feature-link-hover-shadow: 0 16px 30px -20px rgba(30, 50, 120, 0.45);
    --code-feature-accent-shadow: rgba(8, 22, 60, 0.45);

    /* The editor window. It used to be fixed dark; now it follows the site
       theme like everything else, so a light page shows a light editor and the
       band has no black rectangle sitting in the middle of it. The pane stays
       the plain surface colour and the window is held together by its chrome,
       border and shadow — the way a real light-theme editor is. */
    --code-feature-surface: var(--color-white);
    --code-feature-chrome: #edf0f5;
    --code-feature-infoview: #f5f7fa;
    --code-feature-hairline: #e1e6ee;
    --code-feature-editor-border: #d3deec;
    --code-feature-editor-text: #24292f;
    --code-feature-editor-muted: #6b7280;
    --code-feature-editor-faint: #98a1ae;
    --code-feature-editor-ok: #1a7f37;
    --code-feature-editor-shadow: rgba(30, 45, 75, 0.34);
    --code-feature-editor-shadow-edge: rgba(30, 45, 75, 0.09);

    --code-feature-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Space above and below the hairline between the two sections. */
    --code-feature-divider-gap: clamp(4.5rem, 7vw, 7rem);
    position: relative;
    overflow-x: clip;
    background: var(--code-feature-zone);
    color: var(--code-feature-on-zone);
    padding: var(--home-section-gap) 0;
}

/* The divider sits on the seam between the two sections, so the space around it
   is one value used twice rather than each section's own padding: the bottom of
   the first and the top of the second are the same, and the line is centred in
   the gap it splits. */
.code-feature--developers {
    padding-bottom: var(--code-feature-divider-gap);
}

.code-feature--mathematicians {
    padding-top: var(--code-feature-divider-gap);
    /* The tail the zone has always had before the organization section. */
    padding-bottom: clamp(5rem, 15vw, 15rem);
}

/* Dark: the zone drops a step below the page ground (#181818), so the section
   reads as a recess the cards and the editor sit up out of. All neutral, no
   blue cast. */
.dark-theme .code-feature {
    --code-feature-tint: #1a1a1a;
    --code-feature-card-hover-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.7);
    --code-feature-link-hover-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.7);
    --code-feature-accent-shadow: rgba(0, 0, 0, 0.5);
    --code-feature-surface: #161616;
    --code-feature-chrome: #1e1e1e;
    --code-feature-infoview: #191919;
    --code-feature-hairline: rgba(255, 255, 255, 0.07);
    --code-feature-editor-border: #2c2c2c;
    --code-feature-editor-text: #d4d4d4;
    --code-feature-editor-muted: #bbb;
    --code-feature-editor-faint: #858585;
    --code-feature-editor-ok: #8fbf8a;
    --code-feature-editor-shadow: rgba(0, 0, 0, 0.6);
    --code-feature-editor-shadow-edge: rgba(0, 0, 0, 0.35);
}

/* One accent per audience: teal for the engineering side, violet for the
   mathematical one, both kept quiet so the section reads as considered rather
   than loud — in either theme.

   `--code-feature-ink` fills the primary button under white text in both
   themes (4.9:1 and 6:1). `--code-feature-marker` is for type and badges: the
   ink itself on white, and on the dark zone, where that ink goes muddy (~3:1),
   a light tint of the same hue, kept low in saturation so it reads like the
   light theme's accent rather than like signage. */
.code-feature--developers {
    --code-feature-accent: #5fd3de;
    --code-feature-accent-glow: rgba(14, 124, 134, 0.09);
    --code-feature-ink: #0e7c86;
    --code-feature-marker: var(--code-feature-ink);
    --code-feature-marker-soft: rgba(14, 124, 134, 0.08);
    --code-feature-marker-line: rgba(14, 124, 134, 0.28);
}

.code-feature--mathematicians {
    --code-feature-accent: #c3b0ff;
    --code-feature-accent-glow: rgba(109, 74, 200, 0.09);
    --code-feature-ink: #6d4ac8;
    --code-feature-marker: var(--code-feature-ink);
    --code-feature-marker-soft: rgba(109, 74, 200, 0.08);
    --code-feature-marker-line: rgba(109, 74, 200, 0.28);
}

.dark-theme .code-feature--developers {
    --code-feature-accent: #5ec1c9;
    --code-feature-accent-glow: rgba(94, 193, 201, 0.035);
    --code-feature-marker: #5ec1c9;
    --code-feature-marker-soft: rgba(94, 193, 201, 0.08);
    --code-feature-marker-line: rgba(94, 193, 201, 0.3);
}

.dark-theme .code-feature--mathematicians {
    --code-feature-accent: #a18cd9;
    --code-feature-accent-glow: rgba(161, 140, 217, 0.035);
    --code-feature-marker: #a18cd9;
    --code-feature-marker-soft: rgba(161, 140, 217, 0.08);
    --code-feature-marker-line: rgba(161, 140, 217, 0.3);
}

/* One soft accent wash bleeding in from the side the editor sits on, so each
   half is tinted by its audience rather than announced by a coloured bar. */
.code-feature::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 12%;
    width: 820px;
    height: 820px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--code-feature-accent-glow), rgba(0, 0, 0, 0) 68%);
    pointer-events: none;
}

.code-feature--developers::before {
    right: -14%;
}

.code-feature--mathematicians::before {
    left: -14%;
}

/* The two audience sections are one continuous surface, so the seam between
   them is drawn rather than implied: a hairline on the page column, inset to
   the container like every other rule on the page instead of running the full
   bleed of the band. */
.code-feature--mathematicians::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: calc(min(var(--home-container), 100vw) - 2 * var(--space-4));
    height: 0;
    border-top: 1px solid var(--code-feature-border);
    transform: translateX(-50%);
    pointer-events: none;
}

.code-feature-inner.container {
    position: relative;
    z-index: 1;
    max-width: 1240px;
}

.code-feature-heading,
.code-feature-layout {
    position: relative;
    z-index: 1;
}

.code-feature-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--home-heading-gap);
    max-width: 776px;
    margin-bottom: var(--home-heading-content-gap);
}

.code-feature-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 30px;
    padding: 0.3rem 1rem;
    box-sizing: border-box;
    border: 1px solid var(--code-feature-marker-line);
    border-radius: var(--radius-pill);
    background: var(--code-feature-marker-soft);
    color: var(--code-feature-marker);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.code-feature-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--code-feature-accent);
}

.code-feature-heading h2 {
    max-width: 780px;
    margin: 0;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.code-feature-emphasis {
    color: var(--code-feature-marker);
}

.code-feature-heading > p {
    max-width: 700px;
    margin: 0;
    color: var(--code-feature-lead);
    font-size: var(--home-lead-size);
    line-height: 1.6;
}

.code-feature-layout {
    display: grid;
    grid-template-columns: minmax(0, 452px) minmax(0, 724px);
    gap: 64px;
    align-items: center;
}

.code-feature-layout--reversed {
    grid-template-columns: minmax(0, 724px) minmax(0, 452px);
}

.code-feature-layout--reversed .code-feature-details {
    order: 2;
}

.code-feature-layout--reversed .code-feature-code {
    order: 1;
}

.code-feature-details,
.code-feature-items {
    display: flex;
    flex-direction: column;
}

.code-feature-details {
    gap: 1.75rem;
}

.code-feature-items {
    gap: 1.25rem;
}

.code-feature-item {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    box-sizing: border-box;
    padding: 1.6rem 1.75rem;
    border: 1px solid var(--code-feature-border);
    border-radius: 18px;
    background: var(--code-feature-tint);
    box-shadow: none;
    transition:
        transform 0.3s var(--code-feature-ease),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.code-feature-item:hover {
    transform: translateY(-3px);
    border-color: var(--code-feature-marker-line);
    box-shadow: var(--code-feature-card-hover-shadow);
}

.code-feature-item-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.code-feature-marker {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid var(--code-feature-marker-line);
    border-radius: 9px;
    background: var(--code-feature-marker-soft);
    color: var(--code-feature-marker);
}

.code-feature-marker svg {
    width: 16px;
    height: 16px;
    display: block;
}

.code-feature-item h3 {
    margin: 0;
    color: var(--color-text);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.code-feature-item p {
    margin: 0;
    color: var(--code-feature-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.code-feature-links {
    display: flex;
    gap: 0.85rem;
}

.code-feature-link {
    min-height: 56px;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    box-sizing: border-box;
    border: 1px solid var(--code-feature-border);
    border-radius: 12px;
    background: var(--code-feature-panel);
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition:
        transform 0.3s var(--code-feature-ease),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.code-feature-link--primary {
    border-color: transparent;
    background: var(--code-feature-ink);
    color: #fff;
    text-wrap: nowrap;
    box-shadow: 0 12px 26px -16px var(--code-feature-accent-shadow);
}

.code-feature-link:hover,
.code-feature-link:focus-visible {
    transform: translateY(-2px);
    border-color: var(--code-feature-marker-line);
    box-shadow: var(--code-feature-link-hover-shadow);
}

.code-feature-link--primary:hover,
.code-feature-link--primary:focus-visible {
    border-color: transparent;
    box-shadow: 0 16px 30px -14px var(--code-feature-accent-shadow);
}

.code-feature-link:active {
    transform: translateY(-1px);
}

.code-feature-code {
    min-width: 0;
}

.vscode-frame {
    height: 470px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--code-feature-editor-border);
    border-radius: 14px;
    background: var(--code-feature-surface);
    color: var(--code-feature-editor-text);
    box-shadow:
        0 1px 2px var(--code-feature-editor-shadow-edge),
        0 34px 70px -40px var(--code-feature-editor-shadow);
    font-family: "Fira Code", "SFMono-Regular", Consolas, monospace;
}

.vscode-titlebar {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 1.1rem;
    box-sizing: border-box;
    border-bottom: 1px solid var(--code-feature-hairline);
    background: var(--code-feature-chrome);
}

.vscode-title {
    margin: 0;
    color: var(--code-feature-editor-muted);
    font-size: 0.78rem;
}

.vscode-workspace {
    min-height: 0;
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1.4fr) minmax(235px, 0.6fr);
    background: var(--code-feature-surface);
}

.vscode-editor {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Colours come from `copy-button.css`, the same as the Playground link beside it. */
.vscode-editor .copy-button {
    z-index: 3;
}

.vscode-editor .code-gallery-box {
    height: 100%;
    border: 0;
    border-radius: 0;
    background: var(--code-feature-surface);
    box-shadow: none;
}

/* The window title bar names the file, so the gallery's tab strip is redundant. */
.vscode-editor .code-gallery-tabs {
    display: none;
}

.vscode-editor .code-gallery-content {
    min-height: 0;
    overflow: auto;
    padding: 1.25rem 1.1rem;
    box-sizing: border-box;
    background: var(--code-feature-surface);
    color: var(--code-feature-editor-text);
    font-size: 0.7rem;
    line-height: 1.65;
    font-size: 0.85rem;
}

.vscode-editor .code-gallery-snippet.visible-code {
    padding: 0;
}

.lean-infoview {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid var(--code-feature-hairline);
    background: var(--code-feature-infoview);
    color: var(--code-feature-editor-text);
    font-size: 0.72rem;
}

.lean-infoview > header {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.9rem;
    border-bottom: 1px solid var(--code-feature-hairline);
    font-family: var(--font-primary);
    color: var(--code-feature-editor-faint);
}

.lean-infoview > header strong {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--code-feature-editor-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.lean-infoview-content {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* One block per Infoview section, split by a rule the way the real panel's
   collapsible sections are. */
.lean-infoview-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 0.9rem;
}

.lean-infoview-section + .lean-infoview-section {
    border-top: 1px solid var(--code-feature-hairline);
}

.lean-section-title,
.lean-message-text {
    margin: 0;
}

.lean-section-title {
    color: var(--code-feature-editor-text);
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: 500;
}

.lean-caret {
    display: inline-block;
    width: 0.9em;
    margin-right: 0.15rem;
    color: var(--code-feature-editor-faint);
    font-size: 0.55rem;
    vertical-align: 0.1em;
}

.lean-infoview-empty {
    margin: 0;
    padding: 0.85rem 0.9rem;
    color: var(--code-feature-editor-faint);
    font-family: var(--font-primary);
    font-size: 0.75rem;
}

.lean-goal-count {
    margin: 0;
    color: var(--code-feature-editor-ok);
    font-family: var(--font-primary);
    font-size: 0.7rem;
    font-weight: 600;
}

/* The goals are Verso's own markup, copied out of the code, so a name keeps the
   colour it has there. Set flat on the panel as in the editor: hypotheses on
   top, a divider, then what is left to prove. Verso breaks long types itself,
   so the line breaks it put in a type are kept; the ones between its elements
   are only template indentation. */
.lean-infoview .hl.lean.lean-infoview-goals {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--code-feature-editor-text);
    line-height: 1.75;
    white-space: normal;
}

.lean-infoview .hl.lean.lean-infoview-goals .type {
    white-space: pre-wrap;
}

.lean-infoview .hl.lean.lean-infoview-goals .goal {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* As a flex item the table would stretch to the panel's width and hand the
   extra to its columns, opening a gap between each name and its colon. */
.lean-infoview .hl.lean.lean-infoview-goals .hypotheses {
    display: table;
    align-self: flex-start;
}

.lean-infoview .hl.lean.lean-infoview-goals .hypothesis .colon {
    padding: 0 0.5em;
}

.lean-infoview .hl.lean.lean-infoview-goals .hypotheses .name {
    text-align: left;
}

.lean-infoview .hl.lean.lean-infoview-goals .conclusion {
    padding-top: 0.5rem;
    border-top: 1px dashed var(--code-feature-hairline);
}

.lean-infoview .hl.lean.lean-infoview-goals .hypotheses:empty + .conclusion,
.lean-infoview .hl.lean.lean-infoview-goals .goal > .conclusion:first-child {
    padding-top: 0;
    border-top: 0;
}

.lean-infoview .hl.lean.lean-infoview-goals .conclusion .prefix {
    color: #795e26;
    font-weight: 700;
}

.dark-theme .lean-infoview .hl.lean.lean-infoview-goals .conclusion .prefix {
    color: #dcdcaa;
}

/* A hover: the signature as code, then the docstring as prose. */
.lean-infoview .hl.lean.lean-infoview-hover {
    display: block;
    color: var(--code-feature-editor-text);
    line-height: 1.6;
    white-space: normal;
}

.lean-infoview .hl.lean.lean-infoview-hover code {
    background: none;
    white-space: pre-wrap;
    /* Full names such as `Std.Http.Response.Builder.status` are wider than the
       panel and have no space to break at. */
    overflow-wrap: anywhere;
}

.lean-infoview .hl.lean.lean-infoview-hover .docstring {
    width: auto;
    max-width: none;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--code-feature-hairline);
    font-family: var(--font-primary);
}

.lean-infoview .hl.lean.lean-infoview-hover .docstring p {
    margin: 0 0 0.5rem;
}

/* Names in the panel that open their own type, in a goal or a signature. */
.lean-infoview .hl.lean .token[data-verso-hover] {
    cursor: pointer;
}

.lean-infoview-back {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--home-accent);
    font-family: var(--font-primary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

.lean-infoview-back:hover,
.lean-infoview-back:focus-visible {
    text-decoration: underline;
}

/* The panel replaces the inline proof states, so their toggles and the pill
   Verso draws after each tactic have nothing to do here. */
.vscode-editor .hl.lean .tactic-toggle,
.vscode-editor .hl.lean .tactic-state {
    display: none !important;
}

/* `code-feature-infoview.js` keeps every tactic open so the names inside it have
   popups. With no proof state to make room for, it stays in the line. */
.vscode-editor .hl.lean .tactic:has(> .tactic-toggle:checked) {
    display: inline;
}

.vscode-editor .hl.lean .tactic > label {
    cursor: pointer;
}

.vscode-editor .hl.lean .tactic > label::after {
    content: none;
}

.vscode-editor .hl.lean [data-verso-hover],
.vscode-editor .hl.lean .has-info {
    cursor: pointer;
}

/* What a click would pick, and what the panel is showing. The themes paint
   their own hover background on a tactic's label with `!important` at five
   classes; `:not(#\#)` outranks that with an id's worth of specificity, so the
   preview below is the only one. */
.vscode-editor:not(#\#) .hl.lean .tactic > label {
    background-color: transparent !important;
}

.vscode-editor .hl.lean .infoview-hover {
    border-radius: 3px;
    background-color: rgba(45, 97, 206, 0.08);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.vscode-editor .hl.lean .infoview-focus {
    border-radius: 3px;
    background-color: rgba(45, 97, 206, 0.14);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.dark-theme .vscode-editor .hl.lean .infoview-hover {
    background-color: rgba(106, 163, 255, 0.12);
}

.dark-theme .vscode-editor .hl.lean .infoview-focus {
    background-color: rgba(106, 163, 255, 0.2);
}

.lean-message-text {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--code-feature-editor-ok);
    font-family: var(--font-primary);
    font-size: 0.75rem;
    line-height: 1.5;
}

.lean-message-text::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--code-feature-editor-ok);
}

/* While the zone is passing under the sticky header, the header takes the
   zone's own surface and hairline so the section reads as continuing behind the
   bar instead of being cut by a strip of page ground. `code-feature-nav.js`
   only says *whether* the zone is back there; the colour is the token itself,
   so switching theme mid-section repaints the bar with everything else instead
   of waiting for the next scroll.

   Nothing else about the header changes: the zone is the site's card surface in
   both themes, so the nav's own text and icon colours still read on it. */
.code-feature-nav-active .site-header {
    background-color: var(--code-feature-zone);
}

.code-feature-nav-active .navbar {
    border-bottom-color: var(--code-feature-border);
}

/* Thin, dark scrollbars so an overflowing snippet never shows a bright track. */
.vscode-editor .code-gallery-content::-webkit-scrollbar,
.lean-infoview-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.vscode-editor .code-gallery-content::-webkit-scrollbar-thumb,
.lean-infoview-content::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 8px;
    background: rgba(90, 105, 130, 0.32);
    background-clip: content-box;
}

.dark-theme .vscode-editor .code-gallery-content::-webkit-scrollbar-thumb,
.dark-theme .lean-infoview-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
}

.vscode-editor .code-gallery-content,
.lean-infoview-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(90, 105, 130, 0.35) transparent;
}

.dark-theme .vscode-editor .code-gallery-content,
.dark-theme .lean-infoview-content {
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

@media (max-width: 1100px) {
    .code-feature-layout,
    .code-feature-layout--reversed {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .code-feature-layout--reversed .code-feature-details,
    .code-feature-layout--reversed .code-feature-code {
        order: initial;
    }

    .code-feature-heading {
        margin-bottom: 4rem;
    }

    .code-feature-link {
        flex: 0 1 auto;
    }
}

@media (max-width: 640px) {
    .code-feature {
        --code-feature-divider-gap: 3rem;
        padding-top: var(--home-section-gap-tight);
    }

    .code-feature--mathematicians {
        padding-bottom: var(--home-section-gap-tight);
    }

    .code-feature-heading > p {
        font-size: 1rem;
    }

    .code-feature-item {
        padding: 1.4rem 1.5rem;
    }

    /* Without wrapping, the 100% basis just shrinks and the buttons stay side by side. */
    .code-feature-links {
        flex-wrap: wrap;
    }

    .code-feature-link {
        flex: 1 1 100%;
    }

    .vscode-editor .code-gallery-box {
        height: 100%;
    }
}

@media (max-width: 760px) {
    .vscode-frame {
        height: 720px;
    }

    .vscode-workspace {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) 230px;
    }

    .lean-infoview {
        grid-column: 1;
        border-top: 1px solid var(--code-feature-hairline);
        border-left: 0;
    }

    /* The desktop sizes assume a 724px-wide editor. On a phone the same type is
       down at ~11px, which is below what a monospace face stays readable at, so
       the editor and the Infoview both step up once they are full-width. */
    /* Long lines scroll sideways at this width, so fade the right edge to make
       the cut read as scrollable. The wider right padding lets the line ends
       clear the fade. */
    .vscode-editor .code-gallery-content {
        padding: 1rem 2rem 1rem 0.9rem;
        font-size: 0.8rem;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    }

    .lean-infoview {
        font-size: 0.82rem;
    }

    .lean-goal-count,
    .lean-section-title,
    .lean-message-text {
        font-size: 0.82rem;
    }
}

@media (max-width: 640px) {
    /* Stacked full-width buttons need a real touch height. */
    .code-feature-link {
        min-height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .code-feature-item,
    .code-feature-link {
        transition: none;
    }

    .code-feature-item:hover,
    .code-feature-link:hover,
    .code-feature-link:focus-visible,
    .code-feature-link:active {
        transform: none;
    }
}