/* The film pages / and /supradraft/ (only when @page sets "film": true). Paper is the only light; brand blue only
   in paper. No url() (G7). Base styles never hide anything: start frames live in @keyframes (G7). 20 KB (G9). */

body.film { --maxw: 1600px; background: var(--night); color: var(--fog); }
body.film .site-header { position: absolute; inset: 0 0 auto; background: linear-gradient(rgba(8,9,11,.6), rgba(8,9,11,0)); border: 0; }

/* -- the scene: one screen, its photo, its copy block (overflow clip: never a scroll container) -- */
.scene { --gutter: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(48px, 11vh, 128px) var(--gutter); background: var(--night); }
.scene--hero { padding-top: calc(64px + clamp(20px, 6vh, 64px)); }
.scene-media { position: absolute; inset: 0; z-index: 0; }
.scene-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--px, 50%) var(--py, 50%); }
.scene::after, .scene::before { content: ""; position: absolute; inset: auto 0 0; height: 12%; z-index: 1; pointer-events: none;
  background: linear-gradient(#08090b00, var(--night)); }   /* every scene dips to black in its bottom 12% */
.scene::before { inset: 0 0 auto; background: linear-gradient(var(--night), #08090b00); }   /* and fades in from it */
.scene-copy { --scrim: .56; position: relative; z-index: 2; justify-self: start; width: fit-content; max-width: 100%; min-width: 0; }

/* where the copy sits: l- in landscape frames, p- in portrait frames (the stills' own 4/5 split) */
@media not all and (max-aspect-ratio: 4/5) {
  .l-top { align-self: start; } .l-mid { align-self: center; } .l-low { align-self: end; }
  .l-narrow { max-width: min(100%, max(30rem, 34vw)); }
  .l-narrow .scene-sub { max-width: 25rem; font-size: clamp(1.05rem, .95rem + .3vw, 1.2rem); }
}
@media (max-aspect-ratio: 4/5) { .p-top { align-self: start; } .p-mid { align-self: center; } .p-low { align-self: end; } }
.at-center { align-self: center; justify-self: center; text-align: center; width: min(100%, 76rem); }

/* -- scrims: full strength 1.5em past the text, then an eased feather (--fx sideways, --fy up/down;
   smoothstep at thirds) -- */
.scene-copy[class*="scrim-"]::before { --fx: 20em; --fy: 8em;
  --rx: linear-gradient(90deg, #0000, #00000042 calc(var(--fx)/3), #000000bd calc(var(--fx)*2/3), #000 var(--fx),
    #000 calc(100% - var(--fx)), #000000bd calc(100% - var(--fx)*2/3), #00000042 calc(100% - var(--fx)/3), #0000);
  --ry: linear-gradient(180deg, #0000, #00000042 calc(var(--fy)/3), #000000bd calc(var(--fy)*2/3), #000 var(--fy),
    #000 calc(100% - var(--fy)), #000000bd calc(100% - var(--fy)*2/3), #00000042 calc(100% - var(--fy)/3), #0000);
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: calc(-1.5em - var(--fy)) calc(-1.5em - var(--fx));
  background: rgba(8,9,11,var(--scrim));
  -webkit-mask-image: var(--rx), var(--ry); -webkit-mask-composite: source-in; mask-image: var(--rx), var(--ry); mask-composite: intersect; }
.scrim-top::before, .scrim-low::before { left: -60vw; }   /* run on past the frame edge; the scene clips them */
.scrim-top::before { top: -24rem; }
.scrim-low::before { bottom: -24rem; }
@media (prefers-contrast: more) { .scene-copy { --scrim: .66; } }

/* -- type -- */
.scene-title { margin: 0; max-width: 7.2em; font-family: var(--body); font-weight: 800; line-height: .9; letter-spacing: -.02em;
  font-size: clamp(2.9rem, 1rem + 8.4vw, 8.5rem); font-size: min(clamp(2.9rem, 1rem + 8.4vw, 8.5rem), 15svh);
  text-transform: uppercase; text-wrap: balance; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 0 40px rgba(0,0,0,.35); }
/* a narrow dark ground (a split frame, the pad) takes the same capitals a size down */
.scene-title--mid { font-size: clamp(2.9rem, 1rem + 5.4vw, 6.25rem); font-size: min(clamp(2.9rem, 1rem + 5.4vw, 6.25rem), 12svh); }
/* phones: the longest word (DISCOVERY., 10 characters) runs close to the full measure */
@media (max-width: 560px) { .scene-title, .scene-title--mid { font-size: max(2.9rem, 14.5vw); } }
.scene-label { display: flex; align-items: center; gap: .9em; margin: 0 0 1.35rem;
  font: 700 .8rem/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.scene-label::before { content: ""; flex: none; width: 6px; height: 1.15em;   /* the margin's double rule, in miniature */
  background: linear-gradient(90deg, #fff 0 1.5px, transparent 1.5px 4.5px, #fff 4.5px 6px); }
.scene-sub { margin: clamp(1rem, .7rem + .8vw, 1.6rem) 0 0; max-width: 34em; font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem);
  line-height: 1.5; font-weight: 450; color: var(--fog); text-wrap: pretty; }

/* -- the desk: no photo, a pool of lamp light, the paper stack falling off into the dark -- */
.scene--desk { background: radial-gradient(ellipse 58% 64% at 72% 50%, rgba(250,248,243,.085), rgba(250,248,243,.03) 44%, rgba(250,248,243,0) 72%), var(--night); }
.desk { align-self: center; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }
.desk-art { margin: clamp(32px, 6vh, 56px) 0 0; min-width: 0; }
.desk-art .stack { max-width: min(40rem, 90svh); -webkit-mask-image: linear-gradient(#000 56%, #0000 97%); mask-image: linear-gradient(#000 56%, #0000 97%); }
.desk-art .stack::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 90% 75% at 30% 18%, rgba(8,9,11,0) 45%, rgba(8,9,11,.34)); }
.desk-art .leaf, .desk-art .sheet-page { box-shadow: none; }
.desk-art .sheet-fade { display: none; }
.desk-note { margin: .4rem 0 0; max-width: 36em; font-size: .86rem; line-height: 1.45; color: var(--ash); }
@media (min-width: 900px) and (min-aspect-ratio: 1/1), (min-width: 640px) and (min-aspect-ratio: 3/2) {
  .desk { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(40px, 5vw, 96px); }
  .desk > .scene-title { grid-area: 2 / 1; } .desk > .scene-sub { grid-area: 3 / 1; } .desk > .desk-art { grid-area: 1 / 2 / 5 / 3; margin: 0; }
  .desk > .desk-lead { grid-area: 2 / 1 / 4 / 2; }
}
@media (max-width: 700px) { .desk-art .stack { margin-right: calc(-1 * var(--gutter)); } }

/* -- title cards: a number or a word, its label, its line -- */
.stat-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vh, 56px) clamp(32px, 4vw, 72px); }
@media (min-width: 900px), (min-width: 600px) and (min-aspect-ratio: 4/3) { .stat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat-cards li { display: grid; justify-items: center; align-content: start; }
/* wide: the cards arrive as a descending sequence, one beat at a time */
@media (min-width: 900px) { .stat-cards { align-items: start; } .stat-cards li { justify-items: start; text-align: left; }
  .stat-cards li:nth-child(2) { margin-top: 12svh; } .stat-cards li:nth-child(3) { margin-top: 24svh; } }
.stat-num { margin: 0; font-weight: 800; line-height: .85; letter-spacing: -.04em; color: #fff; text-transform: uppercase;
  font-size: clamp(4.75rem, 2.4rem + 10vw, 11rem); font-size: min(clamp(4.75rem, 2.4rem + 10vw, 11rem), 24svh);
  font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 0 40px rgba(0,0,0,.35); }
.stat-label { margin: .95rem 0 0; font: 700 clamp(.9rem, .8rem + .5vw, 1.25rem)/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.stat-note { margin: .7rem 0 0; max-width: 23em; font-size: .98rem; line-height: 1.5; color: var(--fog); text-wrap: balance; }

/* -- the lockup: pure black, the mark and the name, quiet and exact -- */
.lockup { display: grid; justify-items: center; }
.lockup .product-mark { width: 72px; height: 72px; margin: 0 0 1.6rem; filter: none; }
.lockup-word { margin: 0 -.22em 0 0; font: 800 clamp(1.75rem, 1.1rem + 2.6vw, 3rem)/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: #fff; }
.lockup-tag { margin: 1.3rem 0 0; font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); line-height: 1.45; font-weight: 450; color: var(--fog); }
.lockup-tag span { display: block; }
.lockup-os { margin: 1.1rem 0 0; font: 700 .78rem/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ash); }
.lockup .btn-cta { margin-top: 2.3rem; font-size: .86rem; padding: 1.15em 1.7em; }
.lockup-from { margin: clamp(3rem, 10vh, 6rem) 0 0; font-size: .86rem; color: var(--ash); text-wrap: balance; }

/* -- home hero "Meet SupraDraft.": the product on a showroom floor - title up top, the sheet lit from above, two
   buttons below (owner 2026-09-25: "a sexy, Tesla-like landing page"). Sentence case on purpose: a reveal, not a shout -- */
.scene--meet { background: radial-gradient(ellipse 46% 42% at 50% 46%, rgba(250,248,243,.11), rgba(250,248,243,.035) 50%, rgba(250,248,243,0) 74%),
  radial-gradient(ellipse 38% 7% at 50% 86%, rgba(250,248,243,.07), rgba(250,248,243,0) 72%), var(--night); }
.meet { justify-self: stretch; width: auto; display: grid; grid-template-rows: auto auto 1fr; justify-items: center; text-align: center; }
.meet-title { margin: 0; font: 700 clamp(2.6rem, 1.3rem + 5vw, 5.75rem)/1 var(--body); letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.meet-sub { margin: .9rem 0 0; font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem); font-weight: 450; color: var(--fog); text-wrap: balance; }
.meet-tag { margin: .35rem 0 0; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.9rem); font-weight: 600; letter-spacing: -.005em; color: #fff; text-wrap: balance; }
.meet-promise { margin: .75rem 0 0; font-size: clamp(1rem, .92rem + .35vw, 1.2rem); font-weight: 650; letter-spacing: .01em; color: #fff; text-wrap: balance; }
.meet-local { margin: .3rem 0 0; font-size: clamp(.95rem, .9rem + .25vw, 1.1rem); font-weight: 450; color: var(--fog); text-wrap: balance; }
.meet-local + .meet-local, .meet-promise + .meet-promise { margin: .4rem auto 0; max-width: 52rem; }
.meet-os { margin: .8rem 0 0; font: 700 .72rem/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ash); }
.meet-art { align-self: center; width: min(40rem, 100%); margin: clamp(18px, 3.5vh, 40px) 0; }
.meet-art .stack { text-align: left; max-height: min(42svh, 27rem); overflow: clip; transform: perspective(1600px) rotateX(9deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(#000 48%, #0000 94%); mask-image: linear-gradient(#000 48%, #0000 94%); }
.meet-art .sheet-page { box-shadow: 0 40px 90px -30px rgba(250,248,243,.18); }
.meet-art .sheet-fade { display: none; }
.meet-art .desk-note { margin-inline: auto; text-align: center; }
.meet-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(18px, 3vh, 30px); }
.meet-actions .btn { min-width: 15rem; padding: 1.15em 1.6em; font-size: .82rem; }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; font: 700 .78rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.btn-ghost:hover { background: rgba(255,255,255,.18); }
/* -- "Everything it does.": every feature on one screen, names first, scannable in seconds (owner 2026-09-25) -- */
.features { list-style: none; margin: clamp(26px, 4.5vh, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px) clamp(18px, 2.2vw, 32px); }
.features li { border-top: 1px solid var(--night-hair); padding-top: .9rem; }
.feat-name { margin: 0; font: 700 clamp(1rem, .92rem + .3vw, 1.2rem)/1.25 var(--body); color: #fff; }
.feat-note { margin: .45rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--fog); }
.feat-steps { margin: .45rem 0 0; padding-left: 1.25rem; font-size: .95rem; line-height: 1.55; color: var(--fog); }
.features .feat-steps li { border-top: 0; padding-top: 0; margin-top: .3rem; }
.feat-steps b { color: #fff; font-weight: 600; }
@media (max-width: 999px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .features { grid-template-columns: 1fr; } .feat-note { font-size: .92rem; } }
@media (max-width: 560px) { .meet-actions { flex-direction: column; align-self: stretch; } .meet-actions .btn { min-width: 0; }
  .meet-art { width: auto; margin-inline: calc(-.5 * var(--gutter)); } .meet-art .stack { max-height: 30svh; } }

/* -- /supradraft/: site.css's paper components re-inked for the night (paper objects keep their ink) -- */
main { --ink: #fff; --ink-2: var(--fog); --graphite: var(--ash); --hair: var(--night-hair); --margin: #fff; }
.desk-art, .meet-art, .product-mark { --ink: #16191F; --ink-2: #242935; --graphite: #5C616A; --hair: #DCD8CF; --margin: #1F4E79; }
::selection { color: #16191F; }
main strong { color: #fff; }
.soon { background: var(--night-2); }
.scene--text { min-height: 0; }
.scene--text :is(.scene-title, .stat-num), .desk-lead .scene-title { text-shadow: none; }
.stack--one { padding: 0; }
@media (max-width: 560px) { .scene--text .scene-title { font-size: 12.6vw; } }   /* MECHANICAL at 320 */
.scene--card { min-height: 78svh; }
.scene--card + .scene--text { padding-top: clamp(24px, 4vh, 40px); }
@media (max-width: 560px) { .scene--card { min-height: 64svh; } }
.wide { width: 100%; }
.at-center .scene-label { justify-content: center; }
.at-center > .scene-title, .at-center > .scene-sub { margin-inline: auto; text-wrap: balance; }
.scene-title em { display: block; font-style: normal; }
.blanks { max-width: 20rem; }
.desk-lead .where { color: var(--fog); font-weight: 450; max-width: 26rem; }
/* claims R48 (Cal. B&P 17500.6): the buy-means-license line stands out from its fog/450 neighbour (G15) */
.desk-lead .where.license-line { color: #fff; font-weight: 560; }
.lockup .soon { margin-top: 1.6rem; }
.index, .steps, .faq { margin-top: clamp(32px, 5vh, 56px); }
.index .label { color: #fff; }
@media (min-width: 760px) { .index li { grid-template-columns: 16rem minmax(0, 1fr); } }
.pair h3 { margin: 0 0 1rem; font: 800 clamp(1.35rem, 1.1rem + .9vw, 1.85rem)/1.15 var(--body); letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.pair * + h3 { margin-top: 2.2rem; }
.stat-inline { display: grid; justify-items: start; margin: 2.6rem 0 0; font: 700 .8rem/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ash); }
.stat-inline b { margin: .35rem 0 .45rem; font: 800 clamp(4rem, 3rem + 4vw, 6.5rem)/.85 var(--body); letter-spacing: -.04em; color: #fff; }
.said { margin: 0 0 1.2rem; padding-left: 1.3rem; border-left: 6px double #fff; font: italic 450 clamp(1.2rem, 1rem + .8vw, 1.6rem)/1.4 var(--body); color: #fff; }
.steps li::before { font: 800 2.6rem/1 var(--body); color: var(--ash); }
@media (min-width: 700px) { .steps { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); } .steps li:nth-child(3) { border-bottom: 1px solid var(--hair); } }
.slip { background: none; box-shadow: none; padding-right: 0; }
.slip::before { opacity: .45; }
.slip .stat-num { font-size: clamp(4.5rem, 1.5rem + 7vw, 9rem); }
.slip .stat-label { margin-top: .7rem; }
.faq summary { font-weight: 650; font-size: 1.1rem; color: #fff; }
.faq summary::after { top: 20px; font: 300 1.7rem/1 var(--body); color: #fff9; }
@media (min-width: 900px) { .split { display: grid; grid-template: auto auto 1fr / minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 96px); } .split > .faq { grid-area: 1 / 2 / 4; margin: 0; } }

/* -- focal points (the stills ledger, snapped to a 5x5 grid): pp- portrait, lp- landscape -- */
@media (max-aspect-ratio: 4/5) {
  [class*="pp-20-"]{--px:20%} [class*="pp-35-"]{--px:35%}
  [class*="pp-65-"]{--px:65%} [class*="pp-80-"]{--px:80%}
  .pp-20-20,.pp-35-20,.pp-50-20,.pp-65-20,.pp-80-20{--py:20%} .pp-20-35,.pp-35-35,.pp-50-35,.pp-65-35,.pp-80-35{--py:35%}
  .pp-20-65,.pp-35-65,.pp-50-65,.pp-65-65,.pp-80-65{--py:65%} .pp-20-80,.pp-35-80,.pp-50-80,.pp-65-80,.pp-80-80{--py:80%}
}
@media not all and (max-aspect-ratio: 4/5) {
  [class*="lp-20-"]{--px:20%} [class*="lp-35-"]{--px:35%}
  [class*="lp-65-"]{--px:65%} [class*="lp-80-"]{--px:80%}
  .lp-20-20,.lp-35-20,.lp-50-20,.lp-65-20,.lp-80-20{--py:20%} .lp-20-35,.lp-35-35,.lp-50-35,.lp-65-35,.lp-80-35{--py:35%}
  .lp-20-65,.lp-35-65,.lp-50-65,.lp-65-65,.lp-80-65{--py:65%} .lp-20-80,.lp-35-80,.lp-50-80,.lp-65-80,.lp-80-80{--py:80%}
}   /* (50 on either axis is the default) */

/* -- motion: CSS only, scroll-driven; site.css's reduced-motion kill switch stops all of it -- */
.drift-discovery { --dx1: -1.5%; --dy1: 1%; }
.drift-yours { --dx1: 1%; --dy1: .6%; }   /* the pad zooms out of the text zone and away from it */
.drift-yours .scene-media img { transform-origin: 15% 15%; }
/* portrait: the pad lifts above the copy; non-16:9 landscape: pulled right, clear of the headline */
@media (max-aspect-ratio: 4/5) { .drift-yours { --py: 15%; }
  .drift-yours .scene-media { inset: 0 0 42%; -webkit-mask-image: linear-gradient(#000 62%, #0000); mask-image: linear-gradient(#000 62%, #0000); } #p-never .scene-media { bottom: 64%; } }
@media not all and (max-aspect-ratio: 4/5) { .drift-yours .scene-media img { --px: 20%; } }
.drift-nocloud { --dx0: -1%; --dx1: 1.2%; --dy0: .6%; --dy1: -.8%; }
.drift-stats { --dx1: .6%; --dy1: -1.2%; }
@media (prefers-reduced-motion: no-preference) {
  .scene--hero .scene-media img { animation: film-settle 4.5s cubic-bezier(.2,.7,.2,1) 1 both; }   /* once, on load; never hidden */
  @supports (animation-timeline: view()) {
    .scene { view-timeline: --scene block; }
    .scene:not(.scene--hero) .scene-media img { animation: film-kb linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    /* the staggered reveal: settled by the time its scene fills the screen */
    .scene:not(.scene--hero) .scene-copy > :not(.stat-cards), .stat-cards > li { animation: film-in linear both; animation-timeline: --scene;
      animation-range: entry calc(20% + var(--stg, 0) * 6%) entry calc(60% + var(--stg, 0) * 6%); }
    .scene-copy > :nth-child(2), .stat-cards > li:nth-child(2) { --stg: 1; }
    .scene-copy > :nth-child(3), .stat-cards > li:nth-child(3) { --stg: 2; }
    .scene-copy > :nth-child(4) { --stg: 3; } .scene-copy > :nth-child(5) { --stg: 4; } .scene-copy > :nth-child(n+6) { --stg: 5; }
    /* the home desk types over cover 5%..33% of its pass, done as it settles; shares follow the t1..t15 lengths
       (--n: site.css) */
    .desk-art { view-timeline: --sheet block; }
    .sheet--scroll .tx { animation: film-type steps(var(--n, 20), end) both; animation-timeline: --sheet; animation-range: cover var(--r0) cover var(--r1); }
    .sheet--scroll .caret-slot { animation: film-appear linear both; animation-timeline: --sheet; animation-range: cover 17.4% cover 17.8%; }
    .sheet--scroll .t1 { --r0: 5%; --r1: 5.8%; }      .sheet--scroll .t2 { --r0: 6.1%; --r1: 8.8%; }
    .sheet--scroll .t3 { --r0: 9%; --r1: 12%; }       .sheet--scroll .t4 { --r0: 12.2%; --r1: 14.9%; }
    .sheet--scroll .t5 { --r0: 15.2%; --r1: 15.7%; }  .sheet--scroll .t6 { --r0: 16%; --r1: 17.4%; }
    .sheet--scroll .t10 { --r0: 19.3%; --r1: 20.1%; } .sheet--scroll .t11 { --r0: 20.4%; --r1: 23.2%; }
    .sheet--scroll .t12 { --r0: 23.4%; --r1: 26%; }   .sheet--scroll .t13 { --r0: 26.3%; --r1: 29.2%; }
    .sheet--scroll .t14 { --r0: 29.5%; --r1: 31.3%; } .sheet--scroll .t15 { --r0: 31.6%; --r1: 33%; }
  }
}
@keyframes film-settle { from { scale: 1.06; } to { scale: 1; } }
@keyframes film-kb { from { scale: 1.04; translate: var(--dx0, 0) var(--dy0, 0); } to { scale: 1.12; translate: var(--dx1, 0) var(--dy1, 0); } }
@keyframes film-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes film-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes film-appear { from { visibility: hidden; } to { visibility: visible; } }

@media print {
  .scene-media, .scene::after, .scene::before, .scene-copy::before { display: none !important; }
  body.film, .scene { background: #fff !important; color: #000; }
  .scene { min-height: 0; padding: 18pt 0; }
  main, main * { color: #000 !important; text-shadow: none !important; }
  .said { border-color: #000; }
}