/* APTAVIA 2.0 · the lead pages sheet (31 Oct 2026). Hand-written; served by scripts/dev/public/build-public-lead-sheet.mjs with the
   product screens appended. Linked from PublicHead in its own precedence group after the street's, and every rule carries the street frame, so it settles what the generated
   sheets leave open without editing them.

   WHY: 160 ad and search sessions on the public pages since 27 Oct came from 20 distinct window shapes. The pages were checked at
   1440 x 900 and 375 x 812 only, and broke on most of the rest: the Google button under the fold on a 320 x 568 iPhone SE; the header
   and the cookie card covering a phone held sideways (277 px tall); the station clock cut by the town on 1280 x 551 and 1024 x 659;
   a band of empty sky over the copy on a 1024 x 1366 iPad; the copy pinned to the left edge of a 2560 px monitor.
   Part A fits every public page to those shapes. Part B is the ad lead pages' redesign. Colours in oklch, no loops, no zoom. */

/* ================================================================ A · every public page, every real screen */

/* A1 · wide monitors (1920, 2560): the hero stands in the same frame as every section under it, not against the window's edges */
.spine-app[data-spine-frame="public"] .pub-hero { padding-inline: max(var(--pub-gut), calc((100% - 1360px) / 2)); }

/* A2 · tall portrait screens (iPad Pro 1024 x 1366, Galaxy Tab 686 x 1098, iPad 810 x 1080): as tall as its content, never a sky band */
@media (orientation: portrait) and (min-width: 600px) {
  .spine-app[data-spine-frame="public"] .pub-hero { min-height: 0; align-content: start; padding-top: calc(var(--pub-head-h) + clamp(28px, 4svh, 56px)); }
}

/* A3 · short laptops and tablets on their side (1280 x 551, 1366 x 633, 1536 x 695, 1024 x 659, 1180 x 688): less air, the picture whole */
@media (min-width: 900px) and (max-height: 780px) {
  .spine-app[data-spine-frame="public"] .pub-hero { min-height: 0; padding-top: calc(var(--pub-head-h) + clamp(14px, 3.4svh, 34px)); padding-bottom: clamp(64px, 11svh, 104px); }
  .spine-app[data-spine-frame="public"] .pub-hero .pub-h1 { font-size: clamp(32px, min(4vw, 6.6svh), 52px); }
}

/* A4 · phones held sideways (702 x 277, 797 x 339, 832 x 408, 852 x 310): two columns, smaller type, the action on the first screen */
@media (orientation: landscape) and (max-height: 520px) {
  .spine-app[data-spine-frame="public"] .pub-hero { min-height: 0; padding: calc(var(--pub-head-h) + 6px) var(--pub-gut) 40px; }
  .spine-app[data-spine-frame="public"] .pub-hero .pub-h1 { font-size: clamp(22px, 8.6svh, 32px); }
  .spine-app[data-spine-frame="public"] .pub-hero .pub-lede { font-size: 15px; margin-top: 8px; }
  .spine-app[data-spine-frame="public"] .pub-hero:not([data-pub-hero="center"]) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; align-content: center; row-gap: 0; }
  .spine-app[data-spine-frame="public"] .pub-hero:not([data-pub-hero="center"]) .pub-hero-pic { justify-self: end; max-width: 100%; margin: 0; }
  /* a centred hero keeps one column; its picture is sized by the width, never by a height that is not there (pricing's street fell to 21 px) */
  .spine-app[data-spine-frame="public"] .pub-hero[data-pub-hero="center"] { row-gap: 14px; }
  .spine-app[data-spine-frame="public"] .pub-hero[data-pub-hero="center"] .pub-hero-pic { width: min(100%, 760px); }
}

/* A6 · pricing on short phones (320 x 568, 360 x 649): the one button comes before the street of plans, so it is on the first screen */
@media (max-width: 599px) and (max-height: 720px) {
  .spine-app[data-spine-frame="public"] .gp-hero .pub-actions { order: 3; }
  .spine-app[data-spine-frame="public"] .gp-hero .pub-hero-pic { order: 4; }
}

/* A5 · the cookie card: on the street it is a small dark card in the corner, never a white bar across the first screen's action */
html:has(.spine-app[data-spine-frame="public"]) [data-consent-banner] > div { background: color-mix(in oklch, var(--pub-ground, oklch(0.2 0.03 285)) 92%, transparent);
  border-color: color-mix(in oklch, var(--pub-ink, oklch(0.95 0 0)) 14%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px oklch(0 0 0 / .7); }
html:has(.spine-app[data-spine-frame="public"]) [data-consent-banner] > div > p { color: var(--pub-muted, oklch(0.75 0.02 280)); }
html:has(.spine-app[data-spine-frame="public"]) [data-consent-banner] > div > p a { color: var(--pub-ink, oklch(0.95 0 0)); }
html:has(.spine-app[data-spine-frame="public"]) [data-consent-banner] button:first-child { color: var(--pub-body, oklch(0.85 0.01 280)); border-color: color-mix(in oklch, var(--pub-ink, oklch(0.95 0 0)) 18%, transparent); background: transparent; }
html:has(.spine-app[data-spine-frame="public"]) [data-consent-banner] button:last-child { color: var(--pub-ground, oklch(0.2 0.03 285)); background: var(--pub-ink, oklch(0.95 0 0)); }
html:not(.dark):has(.spine-app[data-spine-frame="public"]) [data-consent-banner] > div { background: oklch(1 0 0 / .94); }
@media (min-width: 768px) {
  html:has(.spine-app[data-spine-frame="public"]) [data-consent-banner] { right: auto; max-width: 440px; }
  html:has(.spine-app[data-spine-frame="public"]) [data-consent-banner] > div { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; margin: 0; }
  html:has(.spine-app[data-spine-frame="public"]) [data-consent-banner] > div > div { justify-content: flex-end; }
}
@media (orientation: landscape) and (max-height: 520px) {
  html:has(.spine-app[data-spine-frame="public"]) [data-consent-banner] { padding: 6px; }
  html:has(.spine-app[data-spine-frame="public"]) [data-consent-banner] > div { flex-direction: row; align-items: center; padding: 8px 12px; }
}

/* ================================================================ B · /gamsat-mock-test: the exam room, lit, on the station street */

/* B1 · the hero: copy on the left, a lit window on the right showing the real sitting with its result floating over it */
.spine-app[data-spine-frame="public"] .lp-hero--window { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; min-height: min(100svh, 900px);
  column-gap: clamp(28px, 4.5vw, 80px); }
.spine-app[data-spine-frame="public"] .lp-hero--window .pub-hero-copy { max-width: 580px; }
.spine-app[data-spine-frame="public"] .lp-hero--window .lp-door { margin-top: 24px; }

/* the sitting switch: a small glass rail of three stops above the headline */
.spine-app[data-spine-frame="public"] .lp-hero--window .lp-tabs { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; margin: 0 0 20px;
  padding: 4px; border-radius: 999px; background: color-mix(in oklch, var(--pub-ground) 50%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--pub-edge), inset 0 1px 0 oklch(1 0 0 / .07); }
.spine-app[data-spine-frame="public"] .lp-hero--window .lp-tabs[hidden] { display: none; }
.spine-app[data-spine-frame="public"] .lp-hero--window .lp-tab { min-height: 36px; padding: 0 14px; gap: 0; border-radius: 999px; font: 650 14px/1 var(--pub-font); color: var(--pub-muted);
  background: transparent; box-shadow: none; white-space: nowrap; transition: background-color .2s, color .2s; }
.spine-app[data-spine-frame="public"] .lp-hero--window .lp-tab::before { display: none; }
.spine-app[data-spine-frame="public"] .lp-hero--window .lp-tab:hover { color: var(--pub-ink); background: var(--pub-wash); }
.spine-app[data-spine-frame="public"] .lp-hero--window .lp-tab[aria-current="page"] { color: oklch(0.24 0.03 70); background: linear-gradient(180deg, oklch(0.90 0.09 86), oklch(0.82 0.11 80));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .5), 0 4px 14px -6px oklch(0.80 0.12 78 / .6); }
html:not(.dark) .spine-app[data-spine-frame="public"] .lp-hero--window .lp-tabs { background: oklch(1 0 0 / .72); box-shadow: inset 0 0 0 1px var(--pub-edge); }
html:not(.dark) .spine-app[data-spine-frame="public"] .lp-hero--window .lp-tab[aria-current="page"] { color: oklch(1 0 0); background: var(--sp-ink); box-shadow: none; }

/* the window: a walnut casing with a brass edge, a pane of glass with one sheen, a sill, and its light thrown on the street */
.spine-app[data-spine-frame="public"] .pl-stage { position: relative; justify-self: end; align-self: center; width: 100%; max-width: 760px; margin: 0; perspective: 1800px; }
.spine-app[data-spine-frame="public"] .pl-win { position: relative; padding: clamp(9px, 1.05vw, 15px); border-radius: clamp(14px, 1.5vw, 22px); transform-origin: 30% 55%;
  transform: rotateY(-7deg) rotateX(2deg); animation: pl-win-turn 1.2s .1s cubic-bezier(.2, .7, .2, 1) both;
  background: linear-gradient(160deg, oklch(0.37 0.036 62), oklch(0.26 0.03 56) 52%, oklch(0.21 0.025 52));
  box-shadow: inset 0 0 0 1.5px oklch(0.64 0.06 78 / .6), inset 0 2px 0 oklch(0.86 0.06 82 / .28), 0 2px 0 oklch(0 0 0 / .35),
    0 44px 80px -38px oklch(0 0 0 / .85), 0 0 140px -34px oklch(0.80 0.12 75 / .42); }
@keyframes pl-win-turn { from { transform: rotateY(-19deg) rotateX(5deg) translateY(10px); } to { transform: rotateY(-7deg) rotateX(2deg); } }
.spine-app[data-spine-frame="public"] .pl-win-screen { position: relative; border-radius: clamp(6px, .7vw, 10px); overflow: hidden; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .55); }
.spine-app[data-spine-frame="public"] .pl-win-screen::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: linear-gradient(112deg, oklch(1 0 0 / .11) 0%, oklch(1 0 0 / .035) 24%, transparent 25% 60%, oklch(1 0 0 / .05) 61%, transparent 78%);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / .08), inset 0 0 46px oklch(0 0 0 / .22); }
.spine-app[data-spine-frame="public"] .pl-win-sill { position: absolute; z-index: 2; left: -3%; right: -3%; bottom: calc(-1 * clamp(9px, 1.1vw, 15px)); height: clamp(10px, 1.15vw, 16px);
  border-radius: 4px; background: linear-gradient(180deg, oklch(0.72 0.06 80), oklch(0.42 0.04 62) 32%, oklch(0.27 0.03 55)); box-shadow: 0 20px 30px -14px oklch(0 0 0 / .75); }
.spine-app[data-spine-frame="public"] .pl-stage::after { content: ""; position: absolute; z-index: -1; left: 2%; right: 2%; bottom: -24%; height: 34%; pointer-events: none;
  background: radial-gradient(closest-side, oklch(0.82 0.11 76 / .24), oklch(0.82 0.11 76 / .06) 62%, transparent); }
html:not(.dark) .spine-app[data-spine-frame="public"] .pl-win { background: linear-gradient(160deg, oklch(0.99 0.004 85), oklch(0.95 0.008 82));
  box-shadow: inset 0 0 0 1.5px var(--sp-ink), 0 30px 60px -36px oklch(0.3 0.04 280 / .45); }
html:not(.dark) .spine-app[data-spine-frame="public"] .pl-win-sill { background: linear-gradient(180deg, oklch(0.99 0 0), oklch(0.90 0.01 82)); box-shadow: inset 0 0 0 1.5px var(--sp-ink); }
html:not(.dark) .spine-app[data-spine-frame="public"] .pl-stage::after { display: none; }

/* the station clock hangs from the window's corner on a brass arm: one tick per question, as before */
.spine-app[data-spine-frame="public"] .pl-win-clock { --ck: clamp(84px, 8vw, 122px); position: absolute; z-index: 8; top: calc(var(--ck) * -.42); right: calc(var(--ck) * -.22); width: var(--ck); }
.spine-app[data-spine-frame="public"] .pl-win-clock .lp-clock { width: 100%; box-shadow: 0 0 0 3px var(--pub-brass), 0 0 0 4px var(--pub-brass-lo), 0 16px 30px -12px oklch(0 0 0 / .7),
  0 0 54px -8px oklch(0.88 0.12 82 / .38); }
html:not(.dark) .spine-app[data-spine-frame="public"] .pl-win-clock .lp-clock { box-shadow: 0 0 0 1.5px var(--sp-ink); }
.spine-app[data-spine-frame="public"] .pl-win-clock .lp-ck-t { font-size: 44px; }
.spine-app[data-spine-frame="public"] .pl-win-clock .lp-ck-s { display: none; }
.spine-app[data-spine-frame="public"] .pl-win-arm { position: absolute; z-index: -1; top: 50%; right: 46%; width: 60%; height: 6px; margin-top: -3px; border-radius: 3px;
  background: linear-gradient(180deg, oklch(0.78 0.07 82), oklch(0.50 0.05 70)); transform: rotate(-24deg); transform-origin: 100% 50%; }
.spine-app[data-spine-frame="public"] .pl-win .lp-st-post { display: none; }

/* B2 · phones (320 to 599): the copy, then the window under it, flat and full width; the clock smaller on its corner */
@media (max-width: 599px) {
  .spine-app[data-spine-frame="public"] .lp-hero--window { grid-template-columns: minmax(0, 1fr); row-gap: 34px; min-height: 0; padding-bottom: 72px; }
  .spine-app[data-spine-frame="public"] .lp-hero--window .pub-hero-copy { display: block; max-width: none; }
  .spine-app[data-spine-frame="public"] .lp-hero--window .lp-tabs { margin-bottom: 16px; }
  .spine-app[data-spine-frame="public"] .lp-hero--window .lp-tab { min-height: 34px; padding: 0 11px; font-size: 13px; }
  .spine-app[data-spine-frame="public"] .lp-hero--window .lp-door { margin-top: 20px; }
  .spine-app[data-spine-frame="public"] .lp-hero--window .lp-door .pub-btn { max-width: none; }
  .spine-app[data-spine-frame="public"] .pl-stage { justify-self: stretch; max-width: none; perspective: none; }
  .spine-app[data-spine-frame="public"] .pl-win { transform: none; animation: none; padding: 7px; border-radius: 12px; }
  .spine-app[data-spine-frame="public"] .pl-win-clock { --ck: 76px; right: -2px; }
  .spine-app[data-spine-frame="public"] .pl-win-arm { display: none; }
}
@media (max-width: 380px) {
  .spine-app[data-spine-frame="public"] .lp-hero--window .pub-h1 { font-size: 31px; }
}

/* B3 · tablets and narrow windows (600 to 899): one column, the window centred under the copy */
@media (min-width: 600px) and (max-width: 899px) {
  .spine-app[data-spine-frame="public"] .lp-hero--window { grid-template-columns: minmax(0, 1fr); row-gap: 54px; min-height: 0; padding-bottom: 88px; }
  .spine-app[data-spine-frame="public"] .lp-hero--window .pub-hero-copy { max-width: 620px; }
  .spine-app[data-spine-frame="public"] .pl-stage { justify-self: center; max-width: 640px; }
}

/* B4 · phones held sideways: the copy and a small window side by side; the switch stays, the clock rests on the window */
@media (orientation: landscape) and (max-height: 520px) {
  .spine-app[data-spine-frame="public"] .lp-hero--window { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); row-gap: 0; }
  .spine-app[data-spine-frame="public"] .lp-hero--window .lp-tabs { margin-bottom: 10px; }
  .spine-app[data-spine-frame="public"] .lp-hero--window .lp-tab { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
  .spine-app[data-spine-frame="public"] .lp-hero--window .lp-door { margin-top: 12px; }
  .spine-app[data-spine-frame="public"] .pl-stage { max-width: 380px; }
  .spine-app[data-spine-frame="public"] .pl-win { padding: 6px; border-radius: 10px; }
  .spine-app[data-spine-frame="public"] .pl-win-clock { --ck: 64px; }
  .spine-app[data-spine-frame="public"] .pl-win-arm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .spine-app[data-spine-frame="public"] .pl-win { animation: none; }
}
html[data-spn-paused="true"] .spine-app[data-spine-frame="public"] .pl-win { animation: none; }

/* B5 · the smallest phones (320 to 380): the switch is three equal stops on one line */
@media (max-width: 380px) {
  .spine-app[data-spine-frame="public"] .lp-hero--window .lp-tabs { display: grid; grid-template-columns: repeat(3, auto); width: 100%; }
  .spine-app[data-spine-frame="public"] .lp-hero--window .lp-tab { justify-content: center; padding: 0 6px; font-size: 12px; }
}

/* B6 · big monitors (1800 and wider): a wider frame and a larger headline and window, so the first screen is not a postage stamp */
@media (min-width: 1800px) {
  .spine-app[data-spine-frame="public"] .pub-hero { padding-inline: max(var(--pub-gut), calc((100% - 1560px) / 2)); }
  .spine-app[data-spine-frame="public"] .lp-hero--window .pub-h1 { font-size: 64px; }
  .spine-app[data-spine-frame="public"] .lp-hero--window .pub-hero-copy { max-width: 640px; }
  .spine-app[data-spine-frame="public"] .pl-stage { max-width: 880px; }
}

/* ================================================================ C · /gamsat-mock-test: the chapters stand on the same street */

/* C1 · the night behind the chapters: sky, a far terrace and a near one, held in view while she reads; they drift as she scrolls */
.spine-app[data-spine-frame="public"] .lp-hero--window ~ .lp-rest { position: relative; isolation: isolate; }
.spine-app[data-spine-frame="public"] .pl-night { position: sticky; top: 0; z-index: -1; display: block; height: 100svh; margin-bottom: -100svh; pointer-events: none; overflow: hidden;
  background: radial-gradient(120% 60% at 50% 104%, oklch(0.42 0.09 40 / .30), transparent 60%), linear-gradient(180deg, oklch(0.17 0.035 286), oklch(0.20 0.04 292) 70%, oklch(0.23 0.05 300)); }
.spine-app[data-spine-frame="public"] .pl-night > i { position: absolute; left: 0; right: 0; bottom: 0; display: block;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V70l40-20 40 20V40h60v30l40-24 40 24V60h40V30h15v30h25v10l40-18 40 18V45h70v25l40-20 40 20V58h70v12l40-22 40 22V36h20V26h12v10h48v34l40-16 40 16V48h60v22l40-20 40 20V40h70v30l40-18 40 18V62h70v58z'/%3E%3C/svg%3E") repeat-x 0 100% / 1200px 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V70l40-20 40 20V40h60v30l40-24 40 24V60h40V30h15v30h25v10l40-18 40 18V45h70v25l40-20 40 20V58h70v12l40-22 40 22V36h20V26h12v10h48v34l40-16 40 16V48h60v22l40-20 40 20V40h70v30l40-18 40 18V62h70v58z'/%3E%3C/svg%3E") repeat-x 0 100% / 1200px 100%; }
.spine-app[data-spine-frame="public"] .pl-night-far { height: clamp(80px, 15svh, 150px);
  background: radial-gradient(2px 3px at 50% 62%, oklch(0.86 0.12 80 / .85) 70%, transparent) 0 0 / 53px 100%, radial-gradient(2px 3px at 50% 78%, oklch(0.86 0.12 80 / .6) 70%, transparent) 21px 0 / 97px 100%, oklch(0.29 0.05 292); }
.spine-app[data-spine-frame="public"] .pl-night-near { height: clamp(58px, 10svh, 104px); background: radial-gradient(3px 4px at 50% 70%, oklch(0.84 0.12 78 / .8) 70%, transparent) 9px 0 / 71px 100%, oklch(0.14 0.028 285); -webkit-mask-position: -430px 100%; mask-position: -430px 100%; }
html:not(.dark) .spine-app[data-spine-frame="public"] .pl-night { background: linear-gradient(180deg, oklch(0.975 0.008 280), oklch(0.95 0.015 260)); }
html:not(.dark) .spine-app[data-spine-frame="public"] .pl-night-far { background: oklch(0.90 0.02 270); opacity: .8; }
html:not(.dark) .spine-app[data-spine-frame="public"] .pl-night-near { background: oklch(0.84 0.025 270); }
@supports (animation-timeline: scroll()) {
  .spine-app[data-spine-frame="public"] .pl-night-far { animation: pl-drift-far linear both; animation-timeline: scroll(root); }
  .spine-app[data-spine-frame="public"] .pl-night-near { animation: pl-drift-near linear both; animation-timeline: scroll(root); }
  @keyframes pl-drift-far { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: -360px 100%; mask-position: -360px 100%; } }
  @keyframes pl-drift-near { from { -webkit-mask-position: -430px 100%; mask-position: -430px 100%; } to { -webkit-mask-position: -1330px 100%; mask-position: -1330px 100%; } }
}

/* C2 · every chapter's picture is a lit window on that street: felt glass in a walnut casing with a brass edge, its light on the night */
.spine-app[data-spine-frame="public"] .lp-hero--window ~ .lp-rest .pub-section { z-index: 1; }
.spine-app[data-spine-frame="public"] .lp-hero--window ~ .lp-rest .pub-section .pub-card {
  background: linear-gradient(180deg, oklch(0.27 0.035 286 / .74), oklch(0.21 0.03 286 / .84)); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .09), inset 0 0 0 1px oklch(0.66 0.06 78 / .32), 0 0 0 7px oklch(0.27 0.03 56), 0 0 0 8.5px oklch(0.56 0.05 74 / .75),
    0 9px 0 oklch(0.20 0.025 52), 0 44px 70px -34px oklch(0 0 0 / .9), 0 0 130px -40px oklch(0.80 0.12 75 / .38); }
html:not(.dark) .spine-app[data-spine-frame="public"] .lp-hero--window ~ .lp-rest .pub-section .pub-card { background: oklch(1 0 0 / .86);
  box-shadow: inset 0 0 0 1.5px var(--sp-ink), 0 0 0 7px oklch(0.97 0.006 85), 0 0 0 8.5px var(--sp-ink), 0 30px 60px -36px oklch(0.3 0.04 280 / .4); }
@supports (animation-timeline: view()) {
  .spine-app[data-spine-frame="public"] .lp-hero--window ~ .lp-rest .pub-section .pub-card { animation: pl-open linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; transform-origin: 50% 100%; }
  @keyframes pl-open { from { opacity: .35; transform: perspective(1400px) rotateX(12deg) translateY(36px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .spine-app[data-spine-frame="public"] .pl-night > i, .spine-app[data-spine-frame="public"] .lp-hero--window ~ .lp-rest .pub-section .pub-card { animation: none; }
}
html[data-spn-paused="true"] .spine-app[data-spine-frame="public"] :is(.pl-night > i, .lp-hero--window ~ .lp-rest .pub-section .pub-card) { animation: none; }

/* ================================================================ D · /free-essay-marking: the report, lit, beside the action */
.spine-app[data-spine-frame="public"] .pl-tick { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font: 600 15px/1.35 var(--pub-font); color: var(--pub-body); max-width: 34rem; }
.spine-app[data-spine-frame="public"] .pl-tick + .pl-tick { margin-top: 8px; }
.spine-app[data-spine-frame="public"] .pub-actions + .pl-tick { margin-top: 20px; }
.spine-app[data-spine-frame="public"] .pl-tick svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: var(--pub-lamp); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html:not(.dark) .spine-app[data-spine-frame="public"] .pl-tick svg { stroke: var(--pub-ink); }
.spine-app[data-spine-frame="public"] .fem .pub-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: min(100svh, 880px); }
.spine-app[data-spine-frame="public"] .fem .pl-stage--essay { max-width: 740px; }
@media (max-width: 899px) {
  .spine-app[data-spine-frame="public"] .fem .pub-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; row-gap: 40px; padding-bottom: 80px; }
  .spine-app[data-spine-frame="public"] .fem .pl-stage--essay { justify-self: center; max-width: 640px; }
}
@media (max-width: 599px) {
  .spine-app[data-spine-frame="public"] .fem .pl-stage--essay { justify-self: stretch; perspective: none; }
  .spine-app[data-spine-frame="public"] .pl-tick { font-size: 14px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .spine-app[data-spine-frame="public"] .fem .pub-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .spine-app[data-spine-frame="public"] .pl-tick { font-size: 13.5px; margin-top: 8px; }
  .spine-app[data-spine-frame="public"] .fem .pl-win { padding: 6px; border-radius: 10px; }
}

/* C3 · phones: the score chart's sitting labels and first score were cut at both edges (the labels grow to 24 svg units there) */
@media (max-width: 599px) {
  .spine-app[data-spine-frame="public"] .lp-hero--window ~ .lp-rest .lp-traj { overflow: visible; box-sizing: border-box; padding-inline: 26px 30px; }
}
/* GENERATED by scripts/dev/public/build-public-lead-sheet.mjs from scripts/dev/p4/pricing-shots/{_kit,mocks,essays}.css (round 40, accepted 9/10); never hand-edited. #gp -> .pl-shots */
/* Round 40 shot kit: one deliberate "screen" per tool for the /pricing showcase stage. A shot is a container sized like the stage
   screen (1103:689); everything inside is sized in cqw so it stays sharp and in proportion from 840px down to phone. Default paint is
   dark; html:not(.dark) is light. Motion: the floating card arrives once (opacity + translate); never a loop. */
.pl-shots .gp-shot { position: relative; container-type: inline-size; display: block; width: 100%; aspect-ratio: 1103 / 689; overflow: hidden; isolation: isolate; text-align: left; line-height: 1.35; }
.pl-shots .gp-shot *, .pl-shots .gp-shot *::before, .pl-shots .gp-shot *::after { box-sizing: border-box; }
.pl-shots .gp-shot-float { position: absolute; z-index: 5; animation: pl-shot-in .7s .35s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes pl-shot-in { from { opacity: 0; translate: 0 2.6cqw; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .pl-shots .gp-shot-float { animation: none; } }
/* Newsreader has an optical-size axis: left on auto it widens the serif at phone sizes and breaks a shot's proportions, so every shot keeps one optical size */
.pl-shots .gp-shot, .pl-shots .gp-shot * { font-optical-sizing: none; }
/* Round 40 · shot `mocks` · a full mock sitting in the Real Exam look (public/spine/v2/mock-sitting.css "ROUND 26 · THE REAL
   EXAM LOOK" and the round 28 lights-down block), with the result she gets after it on the Observatory record page
   (components/mocks/v2/prism/prism.css .pr-ledger / .pr-pg / .pr-sec-row / .pr-total). The room's hex values are re-stated
   in oklch. Dark first (the exam screen with the lights down); light = the exam's own white screen. Sized in cqw. */
.pl-shots .gp-shot--mocks {
  --rx-bar: oklch(0.297 0.012 264); --rx-rule: oklch(0.615 0.015 262); --rx-line: oklch(0.412 0.014 264); --rx-ink: oklch(0.949 0.006 265);
  --rx-ink-2: oklch(0.798 0.012 264); --rx-btn: oklch(0.340 0.013 262); --rx-btn-edge: oklch(0.662 0.015 262); --rx-desk: oklch(0.230 0.008 264);
  --rx-sel: oklch(0.327 0.022 259); --rx-card: oklch(0.276 0.010 261); --rx-ledger: oklch(0.259 0.010 261); --rx-key-on: oklch(0.230 0.008 264);
  --rx-violet: oklch(0.47 0.2 290); --rx-violet-edge: oklch(0.34 0.17 290); --rx-flag: oklch(0.783 0.138 68);
  --rx-font: Arial, Helvetica, sans-serif;
  /* the Observatory's record: walnut ledger, brass corners, cream paper, paper ink */
  --hs-walnut: oklch(0.300 0.036 52); --hs-walnut-deep: oklch(0.120 0.014 45); --hs-grain: oklch(0.18 0.03 45 / .35);
  --hs-brass: oklch(0.64 0.058 78); --hs-brass-lo: oklch(0.42 0.042 70);
  --hs-paper: oklch(0.885 0.030 84); --hs-paper-hi: oklch(0.915 0.026 86);
  --hs-paper-ink: oklch(0.255 0.022 60); --hs-paper-ink-2: oklch(0.415 0.022 60);
  --hs-cast: 0 2.6cqw 4.2cqw -2cqw oklch(0.05 0.01 40 / .9), 0 .25cqw 0 oklch(0.05 0.01 40 / .45);
  --sec-1: oklch(0.43 0.16 338); --sec-2: oklch(0.41 0.19 296); --sec-3: oklch(0.43 0.12 258);
  --ui: 'Schibsted Grotesk', 'Schibsted Grotesk Fallback', system-ui, sans-serif;
  background: var(--rx-desk); color: var(--rx-ink); font-family: var(--rx-font);
}
html:not(.dark) .pl-shots .gp-shot--mocks {
  --rx-bar: oklch(0.912 0.009 265); --rx-rule: oklch(0.663 0.013 264); --rx-line: oklch(0.826 0.009 265); --rx-ink: oklch(0.209 0.009 264);
  --rx-ink-2: oklch(0.405 0.012 267); --rx-btn: oklch(0.970 0.003 265); --rx-btn-edge: oklch(0.538 0.011 267); --rx-desk: oklch(0.948 0.005 258);
  --rx-sel: oklch(0.942 0.010 262); --rx-card: oklch(1 0 0); --rx-ledger: oklch(0.979 0.003 265); --rx-key-on: oklch(1 0 0);
  --rx-flag: oklch(0.479 0.112 60);
  --hs-walnut: oklch(0.905 0.030 76); --hs-walnut-deep: oklch(0.855 0.032 72); --hs-grain: oklch(0.244 0.052 292 / .07);
  --hs-brass: oklch(0.80 0.05 82); --hs-brass-lo: oklch(0.244 0.052 292 / .55);
  --hs-paper: oklch(0.985 0.010 85); --hs-paper-hi: oklch(0.995 0.006 86);
  --hs-cast: .4cqw .5cqw 0 oklch(0.244 0.052 292 / .09), 0 0 0 1px oklch(0.244 0.052 292 / .52);
}
.pl-shots .gp-shot--mocks :is(p, ol, ul) { margin: 0; padding: 0; list-style: none; }
.pl-shots .gp-shot--mocks sup, .pl-shots .gp-shot--mocks sub { font-size: .7em; line-height: 0; }

/* the exam screen: a grey title bar, two panes split down the middle, a grey bottom bar holding Next */
.pl-shots .gp-shot--mocks .mk-screen { position: absolute; inset: 0; display: grid; grid-template-rows: 5.1cqw 2.6cqw minmax(0, 1fr) 5.4cqw; }
.pl-shots .gp-shot--mocks .mk-bar { display: flex; align-items: center; gap: .7cqw; padding: 0 1.3cqw; background: var(--rx-bar); box-shadow: inset 0 -1px 0 var(--rx-rule); white-space: nowrap; }
.pl-shots .gp-shot--mocks .mk-b { display: inline-flex; align-items: center; gap: .55cqw; height: 3.4cqw; padding: 0 .95cqw; background: var(--rx-btn); color: var(--rx-ink);
  box-shadow: inset 0 0 0 1px var(--rx-btn-edge); font: 400 1.4cqw/1 var(--rx-font); }
.pl-shots .gp-shot--mocks .mk-b svg { width: 1.55cqw; height: 1.55cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-shots .gp-shot--mocks .mk-leave { font-weight: 700; }
.pl-shots .gp-shot--mocks .mk-sec { flex: 0 1 auto; min-width: 0; font: 700 1.42cqw/1.2 var(--rx-font); color: var(--rx-ink); }
.pl-shots .gp-shot--mocks .mk-move { display: inline-flex; gap: .45cqw; margin-left: auto; }
.pl-shots .gp-shot--mocks .mk-nb { width: 3.4cqw; padding: 0; justify-content: center; }
.pl-shots .gp-shot--mocks .mk-count { gap: .45cqw; }
.pl-shots .gp-shot--mocks .mk-count b, .pl-shots .gp-shot--mocks .mk-clock b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-shots .gp-shot--mocks .mk-right { display: inline-flex; gap: .45cqw; margin-left: auto; }
.pl-shots .gp-shot--mocks .mk-clock { gap: .6cqw; background: var(--rx-card); }
.pl-shots .gp-shot--mocks .mk-end { font-weight: 700; }
.pl-shots .gp-shot--mocks .mk-ledger { display: flex; align-items: center; gap: .8cqw; padding: 0 2.4cqw; background: var(--rx-ledger); box-shadow: inset 0 -1px 0 var(--rx-line);
  font: 400 1.22cqw/1 var(--rx-font); color: var(--rx-ink-2); white-space: nowrap; }
.pl-shots .gp-shot--mocks .mk-ledger b { font-weight: 700; color: var(--rx-ink); }
.pl-shots .gp-shot--mocks .mk-ledger svg { width: 1.4cqw; height: 1.4cqw; fill: none; stroke: var(--rx-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.pl-shots .gp-shot--mocks .mk-panes { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.pl-shots .gp-shot--mocks :is(.mk-paper, .mk-qcol) { min-width: 0; background: var(--rx-card); }
.pl-shots .gp-shot--mocks .mk-paper { display: grid; align-content: start; gap: .7cqw; padding: 1.8cqw 2.6cqw 0; box-shadow: inset -1px 0 0 var(--rx-rule);
  font: 400 1.72cqw/1.55 var(--rx-font); color: var(--rx-ink); }
.pl-shots .gp-shot--mocks .mk-eq { padding-left: 2.4cqw; }
.pl-shots .gp-shot--mocks .mk-table { margin-top: .4cqw; font: 400 1.5cqw/1.3 var(--rx-font); font-variant-numeric: tabular-nums; }
.pl-shots .gp-shot--mocks .mk-cap { margin: 0 0 .55cqw; font: 400 1.4cqw/1.35 var(--rx-font); }
.pl-shots .gp-shot--mocks .mk-cap b { font-weight: 700; margin-right: .5cqw; }
.pl-shots .gp-shot--mocks .mk-tr { display: grid; grid-template-columns: .8fr 1fr 1fr 1.45fr; align-items: end; text-align: center; padding: .42cqw 0;
  box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--rx-ink) 22%, transparent); }
.pl-shots .gp-shot--mocks .mk-tr span:first-child { font-weight: 700; }
.pl-shots .gp-shot--mocks .mk-th { padding: .5cqw 0; font: 700 1.3cqw/1.3 var(--rx-font); box-shadow: inset 0 1.5px 0 var(--rx-ink), inset 0 -1px 0 var(--rx-ink); }
.pl-shots .gp-shot--mocks .mk-tr:last-child { box-shadow: inset 0 -1.5px 0 var(--rx-ink); }

.pl-shots .gp-shot--mocks .mk-qcol { padding: 1.7cqw 2.6cqw 0; }
.pl-shots .gp-shot--mocks .mk-head { display: flex; justify-content: flex-end; padding-bottom: 1cqw; margin-bottom: 1.5cqw; box-shadow: inset 0 -1px 0 var(--rx-line); }
.pl-shots .gp-shot--mocks .mk-flag { font-weight: 400; }
.pl-shots .gp-shot--mocks .mk-flag svg { color: var(--rx-flag); }
.pl-shots .gp-shot--mocks .mk-stem { margin: 0 0 1.5cqw; font: 700 1.72cqw/1.5 var(--rx-font); color: var(--rx-ink); }
.pl-shots .gp-shot--mocks .mk-opts { display: grid; gap: .8cqw; }
.pl-shots .gp-shot--mocks .mk-opt { display: grid; grid-template-columns: 3.05cqw minmax(0, 1fr); align-items: center; column-gap: 1.3cqw; min-height: 4.75cqw; padding: .7cqw 1.2cqw .7cqw .85cqw;
  background: var(--rx-card); box-shadow: inset 0 0 0 1px var(--rx-line); font: 400 1.72cqw/1.3 var(--rx-font); color: var(--rx-ink); font-variant-numeric: tabular-nums; }
.pl-shots .gp-shot--mocks .mk-key { display: grid; place-items: center; width: 3.05cqw; aspect-ratio: 1; border-radius: 50%; background: var(--rx-card); color: var(--rx-ink);
  box-shadow: inset 0 0 0 1.5px var(--rx-btn-edge); font: 700 1.45cqw/1 var(--rx-font); }
.pl-shots .gp-shot--mocks .mk-opt[data-on="true"] { background: var(--rx-sel); box-shadow: inset 0 0 0 2px var(--rx-ink); }
.pl-shots .gp-shot--mocks .mk-opt[data-on="true"] .mk-key { background: var(--rx-ink); color: var(--rx-key-on); box-shadow: none; }

.pl-shots .gp-shot--mocks .mk-foot { display: flex; align-items: center; justify-content: flex-end; padding: 0 5.4cqw; background: var(--rx-bar); box-shadow: inset 0 1px 0 var(--rx-rule); }
.pl-shots .gp-shot--mocks .mk-next { display: inline-flex; align-items: center; gap: .8cqw; height: 3.6cqw; padding: 0 1.9cqw; background: var(--rx-violet); color: oklch(1 0 0);
  box-shadow: inset 0 0 0 1px var(--rx-violet-edge); font: 700 1.5cqw/1 var(--rx-font); }
.pl-shots .gp-shot--mocks .mk-next svg { width: 1.5cqw; height: 1.5cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the result after the mock: the record's left page in its walnut ledger (paper in both themes) */
.pl-shots .gp-shot--mocks .mk-rec { left: 2.4cqw; bottom: 1.2cqw; width: 44.6cqw; padding: .8cqw; border-radius: 1.2cqw;
  background: repeating-linear-gradient(178.6deg, transparent 0 1.5cqw, var(--hs-grain) 1.5cqw 1.62cqw, transparent 1.62cqw 3.6cqw), linear-gradient(180deg, var(--hs-walnut), var(--hs-walnut-deep));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--hs-brass) 40%, transparent), var(--hs-cast); }
html:not(.dark) .pl-shots .gp-shot--mocks .mk-rec { background: linear-gradient(180deg, var(--hs-walnut), var(--hs-walnut-deep)); }
.pl-shots .gp-shot--mocks .mk-corner { position: absolute; z-index: 1; width: 2.6cqw; height: 2.6cqw; background: linear-gradient(135deg, var(--hs-brass), var(--hs-brass-lo)); }
.pl-shots .gp-shot--mocks .mk-corner-tl { top: 0; left: 0; border-radius: 1.2cqw 0 0 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.pl-shots .gp-shot--mocks .mk-corner-br { right: 0; bottom: 0; border-radius: 0 0 1.2cqw 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.pl-shots .gp-shot--mocks .mk-pg { position: relative; padding: 1.15cqw 2cqw 1.05cqw; border-radius: .45cqw; color: var(--hs-paper-ink); font-family: var(--ui);
  background: repeating-linear-gradient(180deg, transparent 0 2.6cqw, color-mix(in oklch, var(--hs-paper-ink) 9%, transparent) 2.6cqw 2.7cqw), linear-gradient(180deg, var(--hs-paper-hi), var(--hs-paper)); }
.pl-shots .gp-shot--mocks .mk-pg-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1cqw; margin-bottom: .6cqw; }
.pl-shots .gp-shot--mocks .mk-pg-h b { font: 760 1.7cqw/1.2 var(--ui); letter-spacing: -.01em; }
.pl-shots .gp-shot--mocks .mk-pg-h span { font: 500 1.3cqw/1.2 var(--ui); color: var(--hs-paper-ink-2); white-space: nowrap; }
.pl-shots .gp-shot--mocks .mk-secs { border-top: 1.5px solid var(--hs-paper-ink); }
.pl-shots .gp-shot--mocks .mk-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 4.4cqw; align-items: center; gap: 1.4cqw; min-height: 3.6cqw; padding: .25cqw .4cqw;
  border-bottom: 1px dashed color-mix(in oklch, var(--hs-paper-ink) 34%, transparent); }
.pl-shots .gp-shot--mocks .mk-row[data-sec="1"] { --sec: var(--sec-1); } .pl-shots .gp-shot--mocks .mk-row[data-sec="2"] { --sec: var(--sec-2); } .pl-shots .gp-shot--mocks .mk-row[data-sec="3"] { --sec: var(--sec-3); }
.pl-shots .gp-shot--mocks .mk-name { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .4cqw .8cqw; min-width: 0; }
.pl-shots .gp-shot--mocks .mk-name b { font: 760 1.55cqw/1.15 var(--ui); }
.pl-shots .gp-shot--mocks .mk-badge { display: grid; place-items: center; width: 2.5cqw; aspect-ratio: 1; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--sec); color: var(--sec); }
.pl-shots .gp-shot--mocks .mk-badge svg { width: 1.45cqw; height: 1.45cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pl-shots .gp-shot--mocks .mk-stamp { display: inline-flex; align-items: center; height: 2cqw; padding: 0 .55cqw; border: 1.5px solid var(--hs-paper-ink); border-radius: .3cqw; rotate: -3deg;
  font: 700 1.12cqw/1 var(--ui); font-style: normal; letter-spacing: .02em; opacity: .9; white-space: nowrap; }
.pl-shots .gp-shot--mocks .mk-ruler { display: block; width: 100%; height: auto; overflow: visible; }
.pl-shots .gp-shot--mocks .mk-ruler :is(.mk-ruler-b, .mk-ruler-t) { fill: none; stroke: var(--hs-paper-ink); stroke-width: 1.2; }
.pl-shots .gp-shot--mocks .mk-ruler-p { fill: var(--hs-paper-ink); }
.pl-shots .gp-shot--mocks .mk-ruler text { font: 600 11px/1 var(--ui); fill: var(--hs-paper-ink-2); }
.pl-shots .gp-shot--mocks .mk-v { justify-self: end; font: 760 2.5cqw/1 var(--ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pl-shots .gp-shot--mocks .mk-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.6cqw; margin-top: .7cqw; padding: .8cqw .4cqw 0; border-top: 2px solid var(--hs-paper-ink); }
.pl-shots .gp-shot--mocks .mk-total-k { font: 700 1.55cqw/1.3 var(--ui); }
.pl-shots .gp-shot--mocks .mk-total-f { margin-top: .35cqw; font: 500 1.35cqw/1.35 var(--ui); color: var(--hs-paper-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-shots .gp-shot--mocks .mk-total-v { display: grid; justify-items: end; font: 780 3.9cqw/.9 var(--ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pl-shots .gp-shot--mocks .mk-total-v small { margin-top: .4cqw; font: 600 1.12cqw/1.2 var(--ui); letter-spacing: 0; color: var(--hs-paper-ink-2); white-space: nowrap; }
/* Round 40 shot · essays · "Essay Grading Engine". The top of a marked essay report, as the Studio's Essay review draws it
   (components/essay/v2/review: ReviewHero + review.css, the dc and d5 classes; before/34-essay-report.jpg dark, redo26 essay-review-1440l light):
   the glass plaque with her volume as its ink column, the two Judges' wax seals, the mark; the lamp clamped on the plaque's corner;
   the floating card = the lamp's slip (one sentence, Costs marks) over the lever (her top fix, its one violet button).
   Geometry: the plaque is the real 412 × 400 box at k = 0.1068 cqw per px. Dark first; light = html:not(.dark). */

.pl-shots .gp-shot--essays {
  --e-page: oklch(0.133 0.012 295);
  --e-ink: oklch(0.964 0.013 306);
  --e-body: oklch(0.885 0.026 306);
  --e-muted: oklch(0.759 0.04 304);
  --e-line: oklch(0.345 0.053 306);
  --e-card: oklch(0.198 0.024 299);
  --e-raised: oklch(0.24 0.043 302);
  --e-primary: oklch(0.746 0.154 300);
  --e-lilac: oklch(0.787 0.098 305);
  --e-il: oklch(0.887 0.071 307);
  --e-violet: oklch(0.465 0.226 294);
  --e-indigo: oklch(0.458 0.152 277);
  --e-on: oklch(1 0 0);
  --e-sign: oklch(0.8 0.09 84);
  --e-warm: oklch(0.95 0.035 75);
  --e-glass: linear-gradient(130deg, oklch(0.298 0.07 310 / .95), oklch(0.237 0.046 309 / .93) 55%, oklch(0.208 0.033 304 / .95));
  --e-glass-edge: oklch(0.417 0.061 309);
  --e-glint: oklch(0.892 0.071 310 / .4);
  --e-spec: oklch(0.887 0.071 307 / .2);
  --e-shade: oklch(0 0 0 / .55);
  --e-contact: 0 1px 0 oklch(0 0 0 / .5), 0 .7cqw 1.9cqw -1cqw oklch(0 0 0 / .8);
  --e-shadow: oklch(0 0 0 / .88);
  --e-desk-0: oklch(0.235 0.028 50);
  --e-desk-1: oklch(0.29 0.04 50);
  --e-desk-edge: oklch(0.66 0.05 70 / .42);
  --e-desk-lip: oklch(0.3 0.038 52);
  --e-desk-lip-lo: oklch(0.17 0.022 46);
  --si-ink: oklch(0.26 0.022 60);
  --si-ink-2: oklch(0.4 0.022 60);
  --si-rose: oklch(0.85 0.08 6);
  --si-rose-ink: oklch(0.45 0.15 6);
  --si-now: oklch(0.47 0.21 293);
  --si-paper-lit: oklch(0.945 0.024 84);
  --si-paper-edge: oklch(0.72 0.035 80);
  --e-ui: 'Schibsted Grotesk', 'Schibsted Grotesk Fallback', Arial, sans-serif;
  --e-serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  color: var(--e-ink);
  font-family: var(--e-ui);
  background: linear-gradient(180deg, color-mix(in srgb, var(--e-page) 88%, var(--e-indigo)) 0%, color-mix(in srgb, var(--e-page) 80%, var(--e-violet)) 52%, color-mix(in srgb, var(--e-page) 90%, var(--e-indigo)) 100%);
}
.pl-shots .gp-shot--essays p { margin: 0; }
.pl-shots .gp-shot--essays svg { display: block; overflow: visible; }

/* the wall's warm glow behind the lamp */
.pl-shots .gp-shot--essays .es-glow { position: absolute; left: 22cqw; top: -4cqw; width: 80cqw; height: 52cqw; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--e-warm) 9%, transparent), color-mix(in srgb, var(--e-violet) 6%, transparent) 55%, transparent); }

/* the desk: the Writing Studio's walnut slab, a top in perspective and a lit front lip */
.pl-shots .gp-shot--essays .es-desk { position: absolute; left: -20cqw; right: -20cqw; bottom: 0; height: 17cqw; }
.pl-shots .gp-shot--essays .es-desk-top { position: absolute; inset: 0 0 1.9cqw; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, var(--e-desk-0) 0%, var(--e-desk-1) 100%); }
.pl-shots .gp-shot--essays .es-desk-top::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(24% 92% at 64% 0%, color-mix(in srgb, var(--e-warm) 22%, transparent), color-mix(in srgb, var(--e-warm) 7%, transparent) 55%, transparent 82%),
  radial-gradient(26% 70% at 30% 0%, color-mix(in srgb, var(--e-warm) 8%, transparent), transparent 78%); }
.pl-shots .gp-shot--essays .es-desk-top::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--e-desk-edge) 30%, var(--e-desk-edge) 70%, transparent); }
.pl-shots .gp-shot--essays .es-desk-front { position: absolute; left: 0; right: 0; bottom: 0; height: 2.1cqw;
  background: linear-gradient(180deg, var(--e-desk-edge) 0, var(--e-desk-lip) .25cqw, var(--e-desk-lip-lo) 100%);
  box-shadow: inset 0 1.2px 0 var(--e-desk-edge); }

/* the threshold's breadcrumb pill */
.pl-shots .gp-shot--essays .es-crumb { position: absolute; right: 4.2cqw; top: 2.4cqw; display: flex; align-items: center; gap: .5cqw; padding: .45cqw; border-radius: 99cqw;
  font: 600 1.5cqw/1 var(--e-ui); color: var(--e-body); background: color-mix(in srgb, var(--e-card) 90%, transparent); border: 1px solid var(--e-line);
  box-shadow: inset 0 1px 0 var(--e-spec); }
.pl-shots .gp-shot--essays .es-crumb > span:not(.es-crumb-s) { display: inline-flex; align-items: center; gap: .7cqw; padding: .75cqw 1.3cqw; border-radius: 99cqw; }
.pl-shots .gp-shot--essays .es-crumb i { width: .55cqw; height: .55cqw; border-radius: 50%; background: var(--e-muted); }
.pl-shots .gp-shot--essays .es-crumb-s { color: var(--e-muted); }
.pl-shots .gp-shot--essays .es-crumb-b { color: var(--e-ink); border: 1px solid color-mix(in srgb, var(--e-sign) 60%, transparent); background: color-mix(in srgb, var(--e-sign) 10%, transparent); }
.pl-shots .gp-shot--essays .es-crumb-b i { background: var(--e-sign); }

/* the header: what she wrote */
.pl-shots .gp-shot--essays .es-head { position: absolute; left: 4.6cqw; top: 3.1cqw; width: 42cqw; }
.pl-shots .gp-shot--essays .es-kick { display: flex; align-items: center; gap: .8cqw; font: 600 1.6cqw/1.3 var(--e-ui); color: var(--e-body); white-space: nowrap; }
.pl-shots .gp-shot--essays .es-task { width: 1.35cqw; height: 1.35cqw; border-radius: 50%; background: var(--e-primary); flex: none; }
.pl-shots .gp-shot--essays .es-draft { padding: .2cqw .9cqw; border-radius: 99cqw; border: 1px solid color-mix(in srgb, var(--e-primary) 40%, var(--e-line)); font-weight: 650; color: var(--e-ink); }
.pl-shots .gp-shot--essays .es-title { margin-top: .5cqw; font: 760 3.7cqw/1.08 var(--e-ui); letter-spacing: -.03em; color: var(--e-ink); white-space: nowrap; }
.pl-shots .gp-shot--essays .es-meta { margin-top: .7cqw; font: 500 1.55cqw/1.4 var(--e-ui); color: var(--e-body); white-space: nowrap; }

/* the plaque (glass): the volume is its ink column */
.pl-shots .gp-shot--essays .es-plaque { position: absolute; z-index: 3; left: 4.6cqw; top: 16.6cqw; width: 44cqw; height: 42.72cqw; border-radius: 2.14cqw; color: var(--e-ink);
  background: radial-gradient(32cqw 21cqw at 100% 0%, color-mix(in srgb, var(--e-warm) 8%, transparent), transparent 70%), var(--e-glass), color-mix(in srgb, var(--e-page) 84%, var(--e-indigo));
  border: 1px solid var(--e-glass-edge);
  box-shadow: inset 1px 1px 0 var(--e-spec), inset -1px -1px 0 var(--e-shade), 0 3.2cqw 4.3cqw -3cqw var(--e-shadow), var(--e-contact); }
.pl-shots .gp-shot--essays .es-plaque::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, var(--e-glint), transparent 22%, transparent 76%, var(--e-glint)); opacity: .4; }
.pl-shots .gp-shot--essays .es-plaque::after { content: ""; position: absolute; right: -1px; top: 1.1cqw; width: 2px; height: 42%; border-radius: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--e-warm) 80%, transparent), transparent); }
.pl-shots .gp-shot--essays .es-pl { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-shots .gp-shot--essays .pl-edge { fill: none; stroke: color-mix(in srgb, var(--e-ink) 22%, transparent); stroke-width: 1; stroke-dasharray: 2 3; }
.pl-shots .gp-shot--essays .pl-band { font: 600 15.5px var(--e-ui); fill: var(--e-body); }
.pl-shots .gp-shot--essays .pl-band.is-on { font-weight: 780; fill: var(--e-ink); }
.pl-shots .gp-shot--essays .pl-end { font: 600 14.5px var(--e-ui); fill: var(--e-muted); font-variant-numeric: tabular-nums; }
.pl-shots .gp-shot--essays .pl-tick { fill: none; stroke: var(--e-ink); stroke-width: 2; stroke-linecap: round; }
.pl-shots .gp-shot--essays .pl-stem { fill: none; stroke: color-mix(in srgb, var(--e-ink) 70%, transparent); stroke-width: 1.3; stroke-linejoin: round; }
.pl-shots .gp-shot--essays .pl-vol { filter: drop-shadow(0 1cqw 1cqw color-mix(in srgb, oklch(0 0 0) 55%, transparent)); }

/* the volume in book form (d5 vl-*), dark */
.pl-shots .gp-shot--essays .vl-s0 { stop-color: color-mix(in srgb, var(--e-page) 55%, var(--e-indigo)); }
.pl-shots .gp-shot--essays .vl-s1 { stop-color: color-mix(in srgb, var(--e-raised) 40%, var(--e-violet)); }
.pl-shots .gp-shot--essays .vl-s2 { stop-color: color-mix(in srgb, var(--e-page) 62%, var(--e-indigo)); }
.pl-shots .gp-shot--essays .vl-i0 { stop-color: color-mix(in srgb, var(--e-il) 50%, var(--e-violet)); }
.pl-shots .gp-shot--essays .vl-i1 { stop-color: color-mix(in srgb, var(--e-violet) 80%, var(--e-indigo)); }
.pl-shots .gp-shot--essays .vl-body { stroke: color-mix(in srgb, var(--e-page) 60%, transparent); stroke-width: 1; }
.pl-shots .gp-shot--essays .vl-board { fill: color-mix(in srgb, var(--e-raised) 50%, var(--e-indigo)); stroke: color-mix(in srgb, var(--e-page) 60%, transparent); stroke-width: .6; }
.pl-shots .gp-shot--essays .vl-pages { fill: color-mix(in srgb, var(--e-lilac) 30%, var(--e-on)); }
.pl-shots .gp-shot--essays .vl-band { fill: none; stroke: color-mix(in srgb, var(--e-page) 60%, transparent); stroke-width: 2.2; }
.pl-shots .gp-shot--essays .vl-band-hl { fill: none; stroke: color-mix(in srgb, var(--e-on) 30%, transparent); stroke-width: .8; }
.pl-shots .gp-shot--essays .vl-label { fill: color-mix(in srgb, var(--e-page) 76%, var(--e-raised)); stroke: color-mix(in srgb, var(--e-lilac) 50%, transparent); stroke-width: .8; }
.pl-shots .gp-shot--essays .vl-g { fill: var(--e-primary); stroke: color-mix(in srgb, var(--e-on) 50%, transparent); stroke-width: .8; }
.pl-shots .gp-shot--essays .vl-win { fill: color-mix(in srgb, var(--e-page) 80%, transparent); stroke: color-mix(in srgb, var(--e-il) 46%, transparent); stroke-width: .8; }
.pl-shots .gp-shot--essays .vl-ink { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--e-violet) 70%, transparent)); }
.pl-shots .gp-shot--essays .vl-ink-top { fill: color-mix(in srgb, var(--e-on) 80%, var(--e-lilac)); }
.pl-shots .gp-shot--essays .vl-notch { fill: none; stroke: color-mix(in srgb, var(--e-on) 55%, transparent); stroke-width: .7; }
.pl-shots .gp-shot--essays .vl-spec { fill: none; stroke: color-mix(in srgb, var(--e-on) 26%, transparent); stroke-width: 1; }
.pl-shots .gp-shot--essays .vl-shade { fill: none; stroke: color-mix(in srgb, var(--e-page) 70%, transparent); stroke-width: 1.2; }

/* her mark */
.pl-shots .gp-shot--essays .es-verdict { position: absolute; z-index: 2; left: 26.27cqw; right: 1cqw; top: 1.92cqw; }
.pl-shots .gp-shot--essays .es-plq-k { font: 700 1.45cqw/1.2 var(--e-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--e-sign); }
.pl-shots .gp-shot--essays .es-mark { margin-top: .85cqw; display: flex; align-items: baseline; gap: .65cqw; line-height: .86; }
.pl-shots .gp-shot--essays .es-mark b { font: 800 10.2cqw/.86 var(--e-ui); letter-spacing: -.055em; color: var(--e-ink); font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 0 1px color-mix(in srgb, var(--e-il) 50%, transparent)) drop-shadow(0 .7cqw 1.7cqw color-mix(in srgb, var(--e-violet) 50%, transparent)); }
.pl-shots .gp-shot--essays .es-mark span { font: 700 2.1cqw/1 var(--e-ui); color: var(--e-body); letter-spacing: -.01em; }
.pl-shots .gp-shot--essays .es-band { margin-top: .7cqw; font: 760 2.75cqw/1.1 var(--e-ui); letter-spacing: -.015em; color: var(--e-primary); }

/* the Judges' wax seals */
.pl-shots .gp-shot--essays .es-seal { position: absolute; z-index: 2; left: 26.27cqw; display: flex; align-items: center; gap: 1.07cqw; font: 650 1.75cqw/1.1 var(--e-ui); color: var(--e-ink); white-space: nowrap; }
.pl-shots .gp-shot--essays .es-seal--1 { top: 18.9cqw; }
.pl-shots .gp-shot--essays .es-seal--2 { top: 23.82cqw; }
.pl-shots .gp-shot--essays .es-wx { width: 4.49cqw; height: 4.49cqw; flex: none; }
.pl-shots .gp-shot--essays .wx-shadow { fill: color-mix(in srgb, var(--e-page) 74%, transparent); }
.pl-shots .gp-shot--essays .wx-body { fill: color-mix(in srgb, var(--e-violet) 84%, var(--e-page)); stroke: color-mix(in srgb, var(--e-violet) 50%, var(--e-page)); stroke-width: 1.4; }
.pl-shots .gp-shot--essays .wx-lit { fill: none; stroke: color-mix(in srgb, var(--e-il) 80%, transparent); stroke-width: 1.8; stroke-linecap: round; }
.pl-shots .gp-shot--essays .wx-shade { fill: none; stroke: color-mix(in srgb, var(--e-page) 60%, transparent); stroke-width: 1.8; stroke-linecap: round; }
.pl-shots .gp-shot--essays .wx-ring { fill: none; stroke: color-mix(in srgb, var(--e-il) 36%, transparent); stroke-width: 1.4; }
.pl-shots .gp-shot--essays .wx-well { fill: color-mix(in srgb, var(--e-violet) 72%, var(--e-indigo)); }
.pl-shots .gp-shot--essays .wx-well-shade { fill: none; stroke: color-mix(in srgb, var(--e-page) 55%, transparent); stroke-width: 1.6; stroke-linecap: round; }
.pl-shots .gp-shot--essays .wx-well-lit { fill: none; stroke: color-mix(in srgb, var(--e-il) 60%, transparent); stroke-width: 1.4; stroke-linecap: round; }
.pl-shots .gp-shot--essays .wx-n { font: 800 19.5px var(--e-ui); letter-spacing: -.02em; fill: var(--e-on); font-variant-numeric: tabular-nums; }
.pl-shots .gp-shot--essays .es-gap { position: absolute; z-index: 2; left: 26.27cqw; top: 29.26cqw; font: 740 1.85cqw/1.2 var(--e-ui); color: var(--e-ink); white-space: nowrap; }
.pl-shots .gp-shot--essays .es-cap { position: absolute; z-index: 2; left: 2.14cqw; right: 1.7cqw; bottom: 1.55cqw; font: 500 1.45cqw/1.35 var(--e-ui); color: var(--e-muted); }

/* the lamp (the Exam Room's drawing), clamped on the plaque's top-right corner, and its beam onto the slip */
.pl-shots .gp-shot--essays .es-lamp { position: absolute; z-index: 6; left: 44.54cqw; top: 5.81cqw; width: 25.63cqw; height: 16.02cqw; }
.pl-shots .gp-shot--essays .lp-s-dark { stop-color: color-mix(in srgb, var(--e-page) 80%, var(--e-indigo)); }
.pl-shots .gp-shot--essays .lp-s-mid { stop-color: color-mix(in srgb, var(--e-raised) 60%, var(--e-lilac)); }
.pl-shots .gp-shot--essays .lp-s-hi { stop-color: color-mix(in srgb, var(--e-il) 80%, var(--e-lilac)); }
.pl-shots .gp-shot--essays .lp-s-bulb { stop-color: var(--e-card); }
.pl-shots .gp-shot--essays .lp-s-glow { stop-color: var(--e-il); stop-opacity: .9; }
.pl-shots .gp-shot--essays .lp-s-glow0 { stop-color: var(--e-il); stop-opacity: 0; }
.pl-shots .gp-shot--essays .lp-base-top { stroke: color-mix(in srgb, var(--e-il) 40%, transparent); stroke-width: 1; }
.pl-shots .gp-shot--essays .lp-arm { fill: none; stroke: color-mix(in srgb, var(--e-raised) 70%, var(--e-lilac)); stroke-width: 6; stroke-linecap: round; }
.pl-shots .gp-shot--essays .lp-screw { stroke-width: 4; }
.pl-shots .gp-shot--essays .lp-arm-hl { fill: none; stroke: color-mix(in srgb, var(--e-il) 70%, transparent); stroke-width: 1.6; stroke-linecap: round; }
.pl-shots .gp-shot--essays .lp-spring { fill: none; stroke: color-mix(in srgb, var(--e-lilac) 50%, transparent); stroke-width: 1.4; }
.pl-shots .gp-shot--essays .lp-joint { fill: color-mix(in srgb, var(--e-raised) 60%, var(--e-lilac)); stroke: color-mix(in srgb, var(--e-il) 50%, transparent); stroke-width: 1; }
.pl-shots .gp-shot--essays .lp-joint-hl { fill: color-mix(in srgb, var(--e-il) 80%, transparent); }
.pl-shots .gp-shot--essays .lp-shade { stroke: color-mix(in srgb, var(--e-il) 46%, transparent); stroke-width: 1.2; }
.pl-shots .gp-shot--essays .lp-shade-rim { fill: none; stroke: var(--e-il); stroke-width: 2.4; filter: drop-shadow(0 0 4px var(--e-il)); }
.pl-shots .gp-shot--essays .lp-mouth { filter: drop-shadow(0 0 12px var(--e-il)) drop-shadow(0 0 26px var(--e-violet)); }
.pl-shots .gp-shot--essays .lp-bulb { fill: var(--e-ink); filter: drop-shadow(0 0 10px var(--e-il)) drop-shadow(0 0 22px var(--e-il)); }
.pl-shots .gp-shot--essays .es-cone { position: absolute; z-index: 4; left: 57.1cqw; top: 9.98cqw; width: 32cqw; height: 9.6cqw; pointer-events: none;
  clip-path: polygon(13.7% 74.3%, 30.3% 13.5%, 91% 100%, 2.7% 100%);
  background: linear-gradient(150deg, color-mix(in srgb, var(--e-warm) 46%, transparent) 10%, color-mix(in srgb, var(--e-warm) 16%, transparent) 60%, color-mix(in srgb, var(--e-warm) 8%, transparent)); filter: blur(1.5px); }

/* the floating card: the plaque's glass holding the slip under the lamp and the lever */
.pl-shots .gp-shot--essays .es-float { left: 50.7cqw; top: 17.4cqw; width: 45.7cqw; padding: 1.6cqw 1.6cqw 2cqw; border-radius: 2.2cqw;
  background: radial-gradient(40cqw 22cqw at 30% 0%, color-mix(in srgb, var(--e-warm) 10%, transparent), transparent 70%), var(--e-glass), color-mix(in srgb, var(--e-page) 84%, var(--e-indigo));
  border: 1px solid var(--e-glass-edge);
  box-shadow: inset 1px 1px 0 var(--e-spec), inset -1px -1px 0 var(--e-shade), 0 4cqw 5cqw -3cqw var(--e-shadow), var(--e-contact); }
.pl-shots .gp-shot--essays .es-slip { position: relative; overflow: hidden; padding: 1.7cqw 2.3cqw 2cqw; border-radius: .5cqw .5cqw .7cqw .7cqw; color: var(--si-ink);
  background: linear-gradient(180deg, oklch(0.8 0.03 82) 0%, oklch(0.72 0.032 80) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, oklch(1 0 0) 60%, transparent), 0 1px 0 var(--si-paper-edge), 0 2.4cqw 3.4cqw -2cqw var(--e-shadow); }
.pl-shots .gp-shot--essays .es-slip::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(64% 118% at 24% 12%, oklch(0.975 0.026 86) 0%, oklch(0.95 0.028 85 / .92) 34%, oklch(0.9 0.03 84 / .55) 62%, transparent 94%); }
.pl-shots .gp-shot--essays .es-slip > * { position: relative; }
.pl-shots .gp-shot--essays .es-slip-k { display: flex; align-items: center; gap: 1.1cqw; font: 650 1.45cqw/1.2 var(--e-ui); color: var(--si-ink-2); white-space: nowrap; }
.pl-shots .gp-shot--essays .es-where { margin-right: auto; letter-spacing: .02em; }
.pl-shots .gp-shot--essays .es-stamp { display: inline-flex; align-items: center; gap: .7cqw; padding: .55cqw 1.05cqw .55cqw .85cqw; border-radius: 99cqw; font-weight: 700;
  color: var(--si-rose-ink); background: color-mix(in oklab, var(--si-rose) 55%, transparent); border: 1px solid color-mix(in oklab, var(--si-rose-ink) 30%, transparent); }
.pl-shots .gp-shot--essays .es-stamp svg { width: 2cqw; height: .9cqw; }
.pl-shots .gp-shot--essays .es-stamp rect { fill: var(--si-rose); stroke: var(--si-rose-ink); stroke-width: 1; }
.pl-shots .gp-shot--essays :is(.es-drill, .es-primary) svg { width: 1.6cqw; height: 1.6cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pl-shots .gp-shot--essays .es-slip-s { margin-top: 1.2cqw; font: 400 2.75cqw/1.34 var(--e-serif); letter-spacing: -.004em; color: var(--si-ink); text-wrap: pretty; }
.pl-shots .gp-shot--essays .es-costs { background: var(--si-rose); border-radius: 3px; padding: 0 .1em; margin: 0 -.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.pl-shots .gp-shot--essays .es-lever { margin-top: 2.1cqw; padding: 0 .7cqw; }
.pl-shots .gp-shot--essays .es-lv-k { display: flex; align-items: center; gap: 1.2cqw; }
.pl-shots .gp-shot--essays .es-sealchip { display: inline-flex; align-items: center; gap: .9cqw; font: 700 1.5cqw/1 var(--e-ui); letter-spacing: .02em; color: var(--e-ink); }
.pl-shots .gp-shot--essays .es-sealchip i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--e-violet);
  box-shadow: inset -2px -2px 0 color-mix(in srgb, oklch(0 0 0) 25%, transparent), 0 0 0 2px color-mix(in srgb, var(--e-primary) 30%, transparent); }
.pl-shots .gp-shot--essays .es-drill { margin-left: auto; display: inline-flex; align-items: center; gap: .6cqw; font: 650 1.5cqw/1 var(--e-ui); color: var(--e-body); }
.pl-shots .gp-shot--essays .es-drill { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); text-underline-offset: .28em; }
.pl-shots .gp-shot--essays .es-lv-h { margin-top: .9cqw; font: 760 2.5cqw/1.18 var(--e-ui); letter-spacing: -.02em; color: var(--e-ink); }
.pl-shots .gp-shot--essays .es-lv-why { margin-top: .7cqw; font: 500 1.75cqw/1.45 var(--e-ui); color: var(--e-body); }
.pl-shots .gp-shot--essays .es-primary { margin-top: 1.7cqw; display: inline-flex; align-items: center; gap: 1.1cqw; min-height: 5.4cqw; padding: 0 2.3cqw 0 2.6cqw; border-radius: 1.3cqw;
  font: 650 1.9cqw/1 var(--e-ui); color: var(--e-on); white-space: nowrap;
  background: linear-gradient(110deg, var(--e-violet), var(--e-indigo));
  box-shadow: inset 0 1px 1px oklch(0.92 0.06 307 / .4), 0 1.6cqw 3.6cqw -1.6cqw oklch(0.55 0.22 295 / .85); }

/* ======================================================================= light: ink and shadow, oak by day */
html:not(.dark) .pl-shots .gp-shot--essays {
  --e-page: oklch(0.976 0.006 82);
  --e-ink: oklch(0.244 0.052 292);
  --e-body: oklch(0.407 0.045 293);
  --e-muted: oklch(0.499 0.043 297);
  --e-line: oklch(0.872 0.015 78);
  --e-card: oklch(0.992 0.007 86);
  --e-raised: oklch(0.957 0.011 80);
  --e-primary: oklch(0.465 0.226 294);
  --e-lilac: oklch(0.748 0.124 301);
  --e-sign: oklch(0.244 0.052 292);
  --e-spec: oklch(1 0 0 / .9);
  --e-shade: oklch(0.3 0.03 60 / .16);
  --e-contact: 0 1px 1px oklch(0.3 0.03 60 / .1), 0 .25cqw .6cqw -.25cqw oklch(0.3 0.03 60 / .22);
  --e-desk-0: oklch(0.905 0.03 76);
  --e-desk-1: oklch(0.925 0.028 78);
  --e-desk-edge: color-mix(in srgb, var(--e-ink) 34%, transparent);
  --e-desk-lip: oklch(0.78 0.045 68);
  --e-desk-lip-lo: oklch(0.72 0.045 64);
  --si-paper-lit: oklch(0.995 0.006 85);
  --si-paper-edge: oklch(0.84 0.02 80);
  --si-rose: oklch(0.9 0.062 6);
  background: var(--e-page);
}
html:not(.dark) .pl-shots .gp-shot--essays .es-glow,
html:not(.dark) .pl-shots .gp-shot--essays .es-cone,
html:not(.dark) .pl-shots .gp-shot--essays .es-desk-top::before,
html:not(.dark) .pl-shots .gp-shot--essays .es-plaque::after,
html:not(.dark) .pl-shots .gp-shot--essays .es-slip::before { display: none; }
html:not(.dark) .pl-shots .gp-shot--essays .es-desk-top::after { background: var(--e-desk-edge); }
html:not(.dark) .pl-shots .gp-shot--essays .es-desk-front { background: linear-gradient(180deg, var(--e-desk-lip), var(--e-desk-lip-lo)); border-top: 1px solid var(--e-desk-edge); box-shadow: 0 1px 0 color-mix(in srgb, var(--e-ink) 16%, transparent); }
html:not(.dark) .pl-shots .gp-shot--essays .es-crumb { background: var(--e-card); box-shadow: var(--e-contact); }
html:not(.dark) .pl-shots .gp-shot--essays .es-crumb-b { border-color: var(--e-ink); background: transparent; }
html:not(.dark) .pl-shots .gp-shot--essays .es-crumb-b i { background: var(--e-ink); }
html:not(.dark) .pl-shots .gp-shot--essays .es-plaque,
html:not(.dark) .pl-shots .gp-shot--essays .es-float { background: var(--e-card); border-color: var(--e-line);
  box-shadow: inset 1px 1px 0 var(--e-spec), inset -1px -1px 0 var(--e-shade), var(--e-contact), 0 1.2cqw 1.7cqw -1.4cqw color-mix(in srgb, var(--e-ink) 30%, transparent); }
html:not(.dark) .pl-shots .gp-shot--essays .es-float { box-shadow: inset 1px 1px 0 var(--e-spec), var(--e-contact), 0 3cqw 4cqw -2.4cqw color-mix(in srgb, var(--e-ink) 34%, transparent); }
html:not(.dark) .pl-shots .gp-shot--essays .es-mark b { filter: none; }
html:not(.dark) .pl-shots .gp-shot--essays .pl-vol { filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--e-ink) 30%, transparent)) drop-shadow(0 .7cqw .7cqw color-mix(in srgb, var(--e-ink) 12%, transparent)); }
html:not(.dark) .pl-shots .gp-shot--essays .vl-s0 { stop-color: oklch(0.9 0.03 78); }
html:not(.dark) .pl-shots .gp-shot--essays .vl-s1 { stop-color: oklch(0.965 0.014 85); }
html:not(.dark) .pl-shots .gp-shot--essays .vl-s2 { stop-color: oklch(0.885 0.032 76); }
html:not(.dark) .pl-shots .gp-shot--essays .vl-i0 { stop-color: color-mix(in srgb, var(--e-violet) 70%, oklch(1 0 0)); }
html:not(.dark) .pl-shots .gp-shot--essays .vl-i1 { stop-color: var(--e-violet); }
html:not(.dark) .pl-shots .gp-shot--essays .vl-board { fill: oklch(0.55 0.05 60); stroke: none; }
html:not(.dark) .pl-shots .gp-shot--essays .vl-pages { fill: var(--e-card); }
html:not(.dark) .pl-shots .gp-shot--essays .vl-band-hl { stroke: var(--e-card); }
html:not(.dark) .pl-shots .gp-shot--essays .vl-body { stroke: color-mix(in srgb, var(--e-ink) 55%, transparent); }
html:not(.dark) .pl-shots .gp-shot--essays .vl-win { fill: var(--e-card); stroke: color-mix(in srgb, var(--e-ink) 30%, transparent); }
html:not(.dark) .pl-shots .gp-shot--essays .vl-band { stroke: color-mix(in srgb, var(--e-ink) 46%, transparent); stroke-width: 2; }
html:not(.dark) .pl-shots .gp-shot--essays .vl-label { fill: var(--e-card); stroke: color-mix(in srgb, var(--e-ink) 34%, transparent); }
html:not(.dark) .pl-shots .gp-shot--essays .vl-spec { stroke: var(--e-card); }
html:not(.dark) .pl-shots .gp-shot--essays .vl-shade { stroke: color-mix(in srgb, var(--e-ink) 40%, transparent); }
html:not(.dark) .pl-shots .gp-shot--essays .vl-ink { filter: none; }
html:not(.dark) .pl-shots .gp-shot--essays .vl-ink-top { fill: var(--e-card); }
html:not(.dark) .pl-shots .gp-shot--essays .vl-notch { stroke: color-mix(in srgb, var(--e-ink) 60%, transparent); }
html:not(.dark) .pl-shots .gp-shot--essays .wx-shadow { fill: color-mix(in srgb, var(--e-ink) 22%, transparent); }
html:not(.dark) .pl-shots .gp-shot--essays .wx-body { fill: var(--e-violet); stroke: color-mix(in srgb, var(--e-ink) 55%, var(--e-violet)); }
html:not(.dark) .pl-shots .gp-shot--essays .wx-lit { stroke: color-mix(in srgb, var(--e-card) 80%, transparent); }
html:not(.dark) .pl-shots .gp-shot--essays .wx-shade { stroke: color-mix(in srgb, var(--e-ink) 50%, transparent); }
html:not(.dark) .pl-shots .gp-shot--essays .wx-well { fill: color-mix(in srgb, var(--e-violet) 82%, var(--e-ink)); }
html:not(.dark) .pl-shots .gp-shot--essays .lp-s-dark { stop-color: color-mix(in oklab, var(--e-ink) 90%, oklch(0.55 0.05 60)); }
html:not(.dark) .pl-shots .gp-shot--essays .lp-s-mid { stop-color: color-mix(in oklab, var(--e-ink) 58%, oklch(0.8 0.05 70)); }
html:not(.dark) .pl-shots .gp-shot--essays .lp-s-hi { stop-color: oklch(0.93 0.03 82); }
html:not(.dark) .pl-shots .gp-shot--essays :is(.lp-s-glow, .lp-s-glow0) { stop-color: oklch(0.95 0.06 90); }
html:not(.dark) .pl-shots .gp-shot--essays .lp-arm { stroke: var(--e-ink); }
html:not(.dark) .pl-shots .gp-shot--essays .lp-arm-hl { stroke: oklch(1 0 0 / .62); }
html:not(.dark) .pl-shots .gp-shot--essays .lp-joint { fill: var(--e-ink); stroke: oklch(1 0 0 / .5); }
html:not(.dark) .pl-shots .gp-shot--essays .lp-joint-hl { fill: oklch(1 0 0 / .7); }
html:not(.dark) .pl-shots .gp-shot--essays :is(.lp-base-top, .lp-shade) { stroke: color-mix(in srgb, var(--e-ink) 40%, transparent); }
html:not(.dark) .pl-shots .gp-shot--essays .lp-spring { stroke: color-mix(in srgb, var(--e-ink) 50%, transparent); }
html:not(.dark) .pl-shots .gp-shot--essays .lp-mouth { fill: oklch(0.96 0.045 92); filter: none; }
html:not(.dark) .pl-shots .gp-shot--essays .lp-bulb { fill: var(--e-card); stroke: var(--e-ink); stroke-width: 2.5; filter: none; }
html:not(.dark) .pl-shots .gp-shot--essays .lp-shade-rim { stroke: var(--e-ink); stroke-width: 2; filter: none; }
html:not(.dark) .pl-shots .gp-shot--essays .es-slip { background: var(--si-paper-lit); box-shadow: 0 0 0 1px var(--si-paper-edge), 0 1px 1px color-mix(in srgb, var(--e-ink) 12%, transparent), 0 .7cqw 1.2cqw -.7cqw color-mix(in srgb, var(--e-ink) 28%, transparent); }
html:not(.dark) .pl-shots .gp-shot--essays .es-drill { color: color-mix(in srgb, var(--e-ink) 80%, transparent); }
html:not(.dark) .pl-shots .gp-shot--essays .es-primary { box-shadow: 0 1px 1px color-mix(in srgb, var(--e-ink) 18%, transparent), 0 .35cqw .7cqw -.35cqw color-mix(in srgb, var(--e-ink) 34%, transparent); }