@charset "UTF-8";
/* NIGHT THEME — additive layer.
   Loaded LAST on index / materials / order-guide / privacy, after styles.css,
   guide.css, order-guide.css and analytics.css, which stay byte-identical.
   1) re-point the base tokens to the night palette
   2) repair the places where the base sheets hard-code light colours
   3) add the night-court components (hero scene, DAY/NIGHT, ナイト仕様, scoreboard)
   One flat accent: lime. No third-party requests. */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("assets/fonts/BigShouldersDisplay-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2212;
}

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: dark;
  --night: #060b16;
  --night-2: #08101f;
  --night-3: #0b1526;
  --night-deep: #050912;
  --panel: #0e1a2c;
  --text: #eef4fb;
  --soft: #c6d5e6;
  --faint: #8ea3bb;
  --line-strong: rgba(173, 199, 226, .32);
  --lime: #d8ff3e;
  --lime-hover: #e6ff6d;
  --lime-soft: rgba(216, 255, 62, .14);
  --on-lime: #061018;
  --display: "Big Shoulders Display", "Arial Narrow", Arial, sans-serif;

  /* styles.css tokens */
  --ink: var(--text);
  --paper: var(--night);
  --surface: var(--night-3);
  --muted: #a3b6cc;
  --line: rgba(173, 199, 226, .18);
  --accent: var(--lime);
  --accent-text: var(--lime);
  --accent-hover: var(--lime-hover);
  --soft-accent: var(--lime-soft);

  /* guide.css tokens (materials.html) */
  --white: var(--on-lime);
  --navy: var(--text);
  --accent-ink: var(--lime);
}

/* ---------- 2. Base ---------- */
html { background: var(--night); }
body {
  overflow-x: clip;
  color: var(--text);
  background:
    radial-gradient(60% 420px at 86% -80px, rgba(216, 255, 62, .07), rgba(216, 255, 62, 0) 70%),
    radial-gradient(70% 520px at 8% -140px, rgba(150, 196, 255, .11), rgba(150, 196, 255, 0) 70%),
    var(--night);
  background-repeat: no-repeat;
  line-break: strict;
}
/* Phrase-level breaks for display text only; running copy keeps normal breaking so it stays even. */
/* Display text, leads and short definitional copy (cards, table cells, checklists, callouts) break by phrase;
   running paragraphs keep normal breaking so the right edge stays even. */
h1, h2, h3, dt, summary, .hero-lead, .hero-summary, .hero-intro, .hero-condition, .section-intro, .order-guide-intro p, .order-guide-section > h2 + p, .privacy-intro,
.quantity > p, .scene-caution, .image-note, .design-example p, .design-support p, .night-body p, .night-note p, .process-steps p, .process-note p,
.cost-breakdown dd, .cost-breakdown p, .specification-table td, .comparison-table th, .comparison-table td, .material-visual figcaption, .approval-note,
.use-cases-heading p, .use-case-list h4, .use-case-list p, .pattern-summary, .pattern-spec dd, .pattern-use, .pattern-order li, .pattern-consult li,
.price-basis li, .price-terms dd, .analytics-consent p,
.guide-checklist dd, .guide-table td, .guide-timeline span, .guide-callout p, .guide-closing p { word-break: auto-phrase; }
.phrase { display: inline-block; }
::selection { color: var(--on-lime); background: var(--lime); }
.skip-link { z-index: 60; color: var(--on-lime); background: var(--lime); font-weight: 700; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
/* guide.css sets .site-footer a:focus-visible { outline-color: var(--paper) }, which is the page colour here. */
.site-footer a:focus-visible, .site-footer button:focus-visible { outline-color: var(--lime); }

/* ---------- 3. Shared parts ---------- */
.section-index { display: block; margin-bottom: 12px; color: transparent; font: 900 clamp(38px, 3.9vw, 56px)/1 var(--display); letter-spacing: .03em; -webkit-text-stroke: 1.2px rgba(216, 255, 62, .74); }
@supports not (-webkit-text-stroke: 1px #000) { .section-index { color: rgba(216, 255, 62, .74); } }
.section-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--lime); font-size: 13px; letter-spacing: .08em; }
.label-en { display: inline-flex; align-items: center; color: var(--lime); font: 700 16px/1 var(--display); letter-spacing: .16em; }
.label-en::after { content: ""; width: 28px; height: 1px; margin-left: 14px; background: rgba(216, 255, 62, .6); }
.label-ja { color: var(--soft); }
.section-intro { color: var(--muted); }
.image-note { color: var(--faint); }

.button { border: 0; border-radius: 2px; color: var(--on-lime); background: var(--lime); transition: background .2s, box-shadow .2s, color .2s; }
.button:hover { background: var(--lime-hover); box-shadow: 0 0 28px rgba(216, 255, 62, .3); }
.button > span { font-size: 22px; }
.button-outline { border: 1px solid var(--lime); color: var(--lime); background: transparent; }
.button-outline:hover { color: var(--on-lime); background: var(--lime); }
.inline-link { border-bottom-color: var(--line-strong); color: var(--text); transition: color .18s, border-color .18s; }
.inline-link:hover { color: var(--lime); border-color: var(--lime); }
.context-link { color: var(--lime); text-decoration-color: rgba(216, 255, 62, .5); }
.context-link:hover { color: var(--lime-hover); text-decoration-color: var(--lime-hover); }

/* ---------- 4. Header ---------- */
.site-header { position: relative; z-index: 30; border-bottom-color: transparent; }
.site-header::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); border-bottom: 1px solid var(--line); background: rgba(6, 11, 22, .84); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* Approved inline wordmark: compact header files retain the top logo's exact letter contours.
   PC: name and subtitle at 240 px wide. Phones (<=760 px, the <source> in each page): one line at 210 px wide.
   The link may shrink on narrow phones so the inquiry button stays in the bar; the SVG scales with it.
   At 374 px and below every page uses the same 156 px logo (see the max-width: 374px block).
   aspect-ratio pins each file's own box before it loads, whichever <source> the browser picks. */
.service-name, .brand { flex-shrink: 1; min-width: 0; }
.site-header:not(:has(.site-nav)) { flex-wrap: nowrap; }
.service-name picture, .brand picture { display: block; }
.site-logo { display: block; width: 240px; max-width: 100%; height: auto; aspect-ratio: 206.92 / 44; }
.site-nav > a { position: relative; color: #d5e2f0; }
.site-nav > a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 9px; height: 1px; background: var(--lime); transition: right .2s; }
.site-nav > a:hover { color: var(--lime); }
.site-nav > a:hover::after { right: 0; }
.header-contact { border: 1px solid var(--lime); border-radius: 2px; color: var(--lime); background: transparent; transition: background .18s, color .18s, box-shadow .18s; }
.header-contact:hover { color: var(--on-lime); background: var(--lime); box-shadow: 0 0 24px rgba(216, 255, 62, .32); }
.header-contact > span[aria-hidden=true]:not(.contact-arrow) { font: 20px Arial, sans-serif; }
.menu-toggle > span { background: var(--text); }
.header-nav .back-link { color: #d5e2f0; }
.header-nav .back-link:hover { color: var(--lime); }
@media (min-width: 961px) {
  html { scroll-padding-top: 112px; }
  .site-header { position: sticky; top: 0; }
  .article-nav { top: 116px; }
}
@media (max-width: 960px) {
  .js-enabled .site-nav { z-index: 20; border-bottom: 1px solid var(--line); background: rgba(6, 11, 22, .97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .js-enabled .site-nav > a::after { display: none; }
}

/* ---------- 5. Hero: the orderable product first, the night court around it ---------- */
.hero { --night-mix: 0; position: relative; grid-template-columns: 1.02fr .98fr; padding-top: 40px; padding-bottom: 92px; }
.hero-scene { position: absolute; z-index: 0; inset: -89px calc(50% - 50vw) 0; overflow: hidden; pointer-events: none; }
.hero-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 11, 22, .88) 0%, rgba(6, 11, 22, .52) 38%, rgba(6, 11, 22, 0) 64%), linear-gradient(180deg, rgba(6, 11, 22, .62) 0%, rgba(6, 11, 22, .08) 34%, rgba(6, 11, 22, .45) 86%, var(--night) 100%); }
.hero-court { position: absolute; inset: 18% 0 0; width: 100%; height: 82%; opacity: calc(.92 - var(--night-mix) * .42); }
.hero-flood { position: absolute; border-radius: 50%; filter: blur(52px); opacity: calc(1 - var(--night-mix) * .7); }
.hero-flood-a { top: -220px; left: 8%; width: 640px; height: 480px; background: radial-gradient(closest-side, rgba(160, 205, 255, .28), rgba(160, 205, 255, 0)); }
.hero-flood-b { top: -260px; right: 4%; width: 720px; height: 540px; background: radial-gradient(closest-side, rgba(216, 255, 62, .15), rgba(216, 255, 62, 0)); }
.hero-copy, .hero-comparison { position: relative; z-index: 1; }
/* Hero wordmark: top-pc.svg (inline outline) at 520 px, top-sp.svg (two rows, ink flush left) at 310.06 px from 960 px down. Not the h1.
   The gap below the logo is wider than the gaps inside it (PC: 21 px inside, 32 px below; top-sp: 11-13 px inside, 22 px below), so the logo reads as one block. */
.hero-logo { margin: 0 0 32px; }
.hero-logo picture, .hero-logo img { display: block; }
.hero-logo img { width: 520px; max-width: 100%; height: auto; aspect-ratio: 520 / 105.65; }
@media (max-width: 960px) {
  .hero-logo { margin-bottom: 22px; }
  .hero-logo img { width: 310.06px; aspect-ratio: 310.06 / 161.32; }
}
.hero-kicker { margin-bottom: 18px; color: var(--lime); font: 900 clamp(44px, 5.7vw, 84px)/.92 var(--display); letter-spacing: .005em; text-shadow: 0 0 30px rgba(216, 255, 62, .3); }
.hero h1 { font-size: clamp(30px, 3.8vw, 52px); line-height: 1.42; letter-spacing: .015em; white-space: normal; }
.hero-lead { max-width: 30em; margin-top: 24px; color: var(--soft); font-size: 15px; }
.hero-condition { gap: 2px; margin-top: 28px; padding: 15px 22px; border-left-width: 2px; background: linear-gradient(90deg, var(--lime-soft), rgba(216, 255, 62, 0)); }
.hero-condition > span { font-size: 13px; }
.hero-condition > strong { font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 34px; margin-top: 32px; }

/* DAY / NIGHT */
.scene-switch { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-bottom: 14px; }
.scene-switch-title { color: var(--muted); font-size: 12px; letter-spacing: .12em; }
.scene-switch-buttons { display: inline-flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(8, 16, 31, .82); }
.scene-switch-buttons button { min-width: 74px; min-height: 38px; padding: 6px 18px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 700 16px/1.5 var(--display); letter-spacing: .14em; transition: color .18s, background .18s; }
.scene-switch-buttons button:hover { color: var(--text); }
.scene-switch-buttons button[aria-pressed=true] { color: var(--on-lime); background: var(--lime); }

.paddle-comparison { border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.comparison-image { background: radial-gradient(120% 90% at 50% 8%, #2a5f86 0%, #17405f 42%, #0f2a43 100%); }
.comparison-image::before { content: ""; position: absolute; z-index: 0; inset: 0; opacity: var(--night-mix); background: radial-gradient(110% 80% at 50% 12%, #101d33 0%, #070d18 52%, #04070c 100%); }
.comparison-image img { position: relative; z-index: 1; filter: drop-shadow(0 18px 22px rgba(2, 8, 18, .38)); }
.comparison-image img.comparison-night { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; opacity: var(--night-mix); filter: none; }
.comparison-badge { z-index: 3; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--text); background: rgba(6, 11, 22, .74); letter-spacing: .06em; }
.scene-tag { position: absolute; z-index: 5; left: 18px; bottom: 18px; padding: 5px 12px; border: 1px solid rgba(216, 255, 62, .55); border-radius: 2px; color: var(--lime); background: var(--night-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.7; pointer-events: none; }
.comparison-divider { background: var(--lime); box-shadow: 0 0 calc(10px + var(--night-mix) * 12px) rgba(216, 255, 62, .55); }
.comparison-handle { border-color: var(--lime); color: var(--lime); background: rgba(6, 11, 22, .88); box-shadow: 0 0 20px rgba(216, 255, 62, .3); }
.comparison-range:focus-visible ~ .comparison-divider .comparison-handle { outline: 3px solid var(--lime); outline-offset: 5px; }
.hero-image-label { letter-spacing: .08em; }
.comparison-instruction label > span { color: var(--lime); }
.scene-caution { margin-top: 10px; padding-left: 12px; border-left: 2px solid rgba(216, 255, 62, .6); color: var(--soft); font-size: 12px; line-height: 1.8; }

/* ---------- 6. Design examples ---------- */
.designs { border-top-color: var(--line); }
.design-example figure { position: relative; border: 1px solid var(--line); border-radius: 4px; background: radial-gradient(120% 85% at 50% 0%, #1c3b58 0%, #102a44 45%, #081422 100%); }
.design-example figure::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(180deg, rgba(5, 10, 18, 0), rgba(5, 10, 18, .5)); pointer-events: none; }
.design-example img { object-fit: contain; filter: drop-shadow(0 16px 20px rgba(2, 8, 18, .4)); }
.example-heading { align-items: baseline; }
.example-heading > span { color: var(--lime); font: 900 26px/1 var(--display); letter-spacing: .04em; }

/* ご相談例: examples of requests by buyer type (not a record of past work). */
.use-cases { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--line); }
.use-cases-label { display: flex; align-items: center; margin-bottom: 12px; color: var(--lime); font: 700 16px/1 var(--display); letter-spacing: .16em; }
.use-cases-label::after { content: ""; width: 28px; height: 1px; margin-left: 14px; background: rgba(216, 255, 62, .6); }
.use-cases-heading h3 { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.55; }
.use-cases-heading h3 + p { max-width: 790px; margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 1.95; }
.use-case-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 30px 0 0; padding: 0; list-style: none; }
.use-case-list li { position: relative; min-width: 0; padding: 24px 24px 26px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(180deg, rgba(14, 26, 44, .82) 0%, rgba(8, 16, 31, .5) 100%); }
.use-case-list li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--lime), transparent 70%); }
.use-case-list h4 { margin: 0 0 10px; color: var(--text); font-size: 17px; line-height: 1.6; }
.use-case-list p { color: var(--muted); font-size: 14px; line-height: 1.95; }

/* ---------- 7. ナイト仕様 ---------- */
.night { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: var(--night-2); }
.night::before { content: ""; position: absolute; inset: -20% -10% auto; height: 70%; background: radial-gradient(56% 60% at 20% 18%, rgba(110, 150, 255, .16), transparent 70%), radial-gradient(50% 55% at 84% 6%, rgba(216, 255, 62, .1), transparent 70%); pointer-events: none; }
.night > .section-wrap { position: relative; }
.night-heading { max-width: 900px; }
.night-lockup { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); margin: 4px 0 20px; color: var(--text); font: 900 clamp(46px, 7.4vw, 116px)/.9 var(--display); letter-spacing: .01em; }
.night-lockup > span:first-child { color: transparent; -webkit-text-stroke: 1.5px rgba(238, 244, 251, .8); }
@supports not (-webkit-text-stroke: 1px #000) { .night-lockup > span:first-child { color: var(--muted); } }
.lockup-arrow { position: relative; flex: 0 0 clamp(44px, 7vw, 116px); height: 3px; background: var(--lime); }
.lockup-arrow::after { content: ""; position: absolute; right: 1px; top: 50%; width: clamp(10px, 1.3vw, 18px); height: clamp(10px, 1.3vw, 18px); border-top: 3px solid var(--lime); border-right: 3px solid var(--lime); transform: translateY(-50%) rotate(45deg); }
.night-heading h2 { font-size: clamp(22px, 2.3vw, 31px); line-height: 1.6; }
/* The two cards share one height; the note keeps its own height at the top of its column (no empty band inside the box). */
.night-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(320px, 1.06fr); gap: 28px; align-items: stretch; }
.night-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(180deg, rgba(14, 26, 44, .9), rgba(8, 12, 26, .92)); }
.night-card figure { position: relative; background: radial-gradient(90% 70% at 50% 22%, #101d33 0%, #080e1b 55%, #04070c 100%); }
.night-card-uv figure { background: radial-gradient(90% 70% at 50% 24%, #1d1546 0%, #0d0a24 55%, #05060f 100%); }
.night-card img { aspect-ratio: 4 / 5; object-fit: cover; }
.night-tag { position: absolute; left: 14px; bottom: 14px; padding: 4px 11px; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--text); background: rgba(6, 11, 22, .78); font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1.7; }
.night-body { padding: 22px 24px 26px; }
.night-status { display: inline-block; margin-bottom: 12px; padding: 2px 11px; border: 1px solid rgba(216, 255, 62, .55); border-radius: 999px; color: var(--lime); font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.8; }
.night-body h3 { font-size: 19px; line-height: 1.6; }
.night-body h3 + p { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.95; }
.night-note { display: flex; flex-direction: column; align-self: start; padding: 28px 28px 30px; border: 1px solid var(--line); border-radius: 4px; background: rgba(9, 16, 30, .78); }
.night-note > p { color: var(--muted); font-size: 14px; line-height: 1.95; }
.night-note > * + * { margin-top: 16px; }
.night-note > .night-note-status { padding-left: 16px; border-left: 3px solid var(--lime); color: var(--text); font-weight: 700; }
.night-note > .image-note { padding-top: 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; line-height: 1.9; }
.night-note .button { width: 100%; margin-top: auto; padding-top: 15px; font-size: 15px; }
.night-note > .image-note { margin-bottom: 22px; }

/* ---------- 8. Specification table ---------- */
.specifications-section { padding-top: 96px; }
.specification-table thead th { color: var(--lime); font-size: 12px; letter-spacing: .12em; }
.specification-table td:last-child { color: var(--soft); }
.spec-status { display: inline-block; margin: 0 10px 0 0; padding: 3px 10px; border: 1px solid rgba(216, 255, 62, .5); border-radius: 2px; color: var(--lime); font-size: 12px; letter-spacing: .06em; line-height: 1.5; vertical-align: 1px; }

/* Two standard patterns, then what the customer tells us, then what is by consultation. */
.pattern-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.pattern-card { position: relative; min-width: 0; padding: 32px 34px 34px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(180deg, var(--panel) 0%, rgba(8, 16, 31, .62) 100%); }
.pattern-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--lime), transparent 70%); }
.pattern-code { color: transparent; font: 900 clamp(44px, 4.6vw, 68px)/.95 var(--display); letter-spacing: .03em; -webkit-text-stroke: 1.2px rgba(216, 255, 62, .78); }
@supports not (-webkit-text-stroke: 1px #000) { .pattern-code { color: rgba(216, 255, 62, .78); } }
.pattern-card h3 { margin-top: 14px; font-size: 22px; line-height: 1.5; }
.pattern-summary { margin-top: 8px; color: var(--soft); font-size: 14px; line-height: 1.9; }
.pattern-spec { margin: 22px 0 0; border-top: 1px solid var(--line); }
.pattern-spec > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.7; }
.pattern-spec dt { color: var(--muted); font-weight: 400; }
.pattern-spec dd { margin: 0; color: var(--text); font-weight: 700; }
.pattern-use { margin-top: 20px; padding-left: 14px; border-left: 2px solid rgba(216, 255, 62, .6); color: var(--soft); font-size: 14px; line-height: 1.9; }
.pattern-common { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px 48px; margin-top: 28px; padding: 30px 34px 32px; border: 1px solid var(--line); border-radius: 4px; background: rgba(9, 16, 30, .78); }
.pattern-order h3 { font-size: 17px; line-height: 1.6; }
.pattern-order ol { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: pattern-order; border-bottom: 1px solid var(--line); }
.pattern-order li { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.6; counter-increment: pattern-order; }
.pattern-order li::before { content: counter(pattern-order, decimal-leading-zero); flex: 0 0 1.4em; color: var(--lime); font: 900 20px/1 var(--display); letter-spacing: .04em; }
.pattern-notes > p:first-child { color: var(--soft); font-size: 14px; line-height: 1.95; }
.pattern-consult-title { margin-top: 20px; color: var(--lime); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.pattern-consult { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.pattern-consult li { padding: 3px 10px; border-radius: 2px; color: var(--soft); background: rgba(238, 244, 251, .07); font-size: 13px; line-height: 1.7; }
.specifications-section .specification-links { margin-top: 24px; }
.oem-note { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 12px 48px; margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--line); }
.oem-note h3 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.6; }
.oem-note p { max-width: 46em; color: var(--soft); font-size: 14px; line-height: 1.95; }

/* ---------- 9. Quantity and cost: scoreboard ---------- */
.pricing { background: linear-gradient(180deg, var(--night-2) 0%, var(--night-deep) 100%); }
.pricing-layout { grid-template-columns: .82fr 1.18fr; gap: 48px; align-items: stretch; }
.quantity { display: grid; align-content: center; gap: 6px; padding: 38px 34px; border: 1px solid rgba(216, 255, 62, .32); border-radius: 4px; background: repeating-linear-gradient(180deg, rgba(216, 255, 62, .05) 0 1px, transparent 1px 5px), #04070d; box-shadow: inset 0 0 60px rgba(216, 255, 62, .07); text-align: center; }
.quantity > p { color: var(--soft); font-size: 14px; letter-spacing: .04em; }
.quantity > p:last-child { color: var(--muted); }
.quantity-number { justify-content: center; gap: 12px; margin: 4px 0 8px; }
.quantity-number strong { color: var(--lime); font: 900 clamp(96px, 11vw, 148px)/1 var(--display); letter-spacing: .02em; text-shadow: 0 0 40px rgba(216, 255, 62, .42); }
.quantity-number > span { color: var(--text); font-size: 22px; }
.cost-breakdown { padding: 34px 38px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.quote-quantities { color: var(--lime); font: 900 27px/1 var(--display); letter-spacing: .06em; }
.quote-quantities > span { border-bottom-color: rgba(216, 255, 62, .4); }
.quote-comparison strong { color: var(--text); }

/* Price tables: tax-excluded figures first, tax-included below; the basis sits right under the tables. */
.price-block { display: flex; flex-direction: column; min-width: 0; }
.price-tables { display: grid; gap: 18px; }
.price-table-wrap { min-width: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.price-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; text-align: left; font-variant-numeric: tabular-nums; }
.price-table caption { padding: 16px 22px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.price-table-name { color: var(--text); font-size: 17px; font-weight: 700; }
.price-table-spec { margin-left: 8px; color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.price-table thead th { padding: 10px 22px; border-bottom: 1px solid var(--line); color: var(--lime); font-size: 12px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.price-table thead th:not(:first-child), .price-table td { text-align: right; }
.price-table tbody th { padding: 14px 22px; color: var(--text); font-size: 15px; font-weight: 700; white-space: nowrap; }
.price-table td { padding: 14px 22px; }
.price-table tbody tr + tr > * { border-top: 1px solid var(--line); }
.price-ex { display: block; color: var(--text); font: 800 24px/1.15 var(--display); letter-spacing: .03em; }
.price-in { display: block; margin-top: 4px; color: var(--soft); font-size: 14px; line-height: 1.45; white-space: nowrap; font-feature-settings: "palt"; }
.price-basis { margin: 16px 0 0; padding: 0; list-style: none; }
.price-basis li { position: relative; padding-left: 18px; color: var(--soft); font-size: 13px; line-height: 1.9; }
.price-basis li + li { margin-top: 4px; }
.price-basis li::before { content: ""; position: absolute; left: 2px; top: .95em; width: 8px; height: 1px; background: var(--lime); }
.price-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 40px 0 0; }
.price-terms > div { padding: 16px 0 18px; border-top: 1px solid var(--line); }
.price-terms dt { color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.7; }
.price-terms dd { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.9; }
.price-links { margin-top: 12px; }

/* ---------- 10. Process ---------- */
.process { background: var(--night-deep); }
.process-steps { gap: 24px; }
.process-steps li { position: relative; padding: 26px 24px 28px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(180deg, var(--panel) 0%, rgba(8, 16, 31, .6) 100%); }
.process-steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--lime), transparent 70%); }
.step-number { display: block; color: transparent; font: 900 42px/1 var(--display); letter-spacing: .03em; -webkit-text-stroke: 1.2px rgba(216, 255, 62, .78); }
@supports not (-webkit-text-stroke: 1px #000) { .step-number { color: rgba(216, 255, 62, .78); } }
.process-steps h3 { margin-top: 16px; }

/* ---------- 11. FAQ / company ---------- */
.faq { background: var(--night-2); }
.faq-list summary > span { color: var(--lime); }
/* A question that needs a .phrase is wrapped in <b> so the span is not a flex child styled as the + icon. */
.faq-list summary > .faq-question { font-weight: inherit; }
.faq-list summary:hover { color: var(--lime); }
.company-details a { display: inline-block; margin-block: -6px; padding-block: 6px; border-bottom: 1px solid var(--line-strong); }
.related-service > span:first-child { color: var(--lime); letter-spacing: .08em; }

/* ---------- 12. Contact: a light paper card on the night page ---------- */
.contact { position: relative; color: var(--text); background: linear-gradient(180deg, var(--night-deep) 0%, var(--night-3) 100%); }
.contact::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 10% 18%, rgba(216, 255, 62, .07), rgba(216, 255, 62, 0) 70%); pointer-events: none; }
.contact-layout { position: relative; }
.contact .section-label { color: var(--lime); }
.contact-lead { color: var(--soft); }
.inquiry-required-note { color: var(--muted); }
.contact-action {
  color-scheme: light;
  --ink: #101720;
  --muted: #4b5762;
  --line: #c9c4b6;
  --card: #f3f0e8;
  --field-border: #8f8a7c;
  --danger: #8c2f1a;
  --submit-bg: #0b1422;
  --submit-ink: #ffffff;
  --submit-disabled-bg: #d6d8d3;
  --submit-disabled-ink: #4f5861;
  min-width: 0;
  padding: 40px;
  border-radius: 4px;
  color: var(--ink);
  background: var(--card);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.contact-action a:focus-visible, .contact-action button:focus-visible, .contact-action .inquiry-submit:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.inquiry-field label { color: var(--ink); }
.inquiry-field label > span { color: var(--danger); font-weight: 700; }
.inquiry-field label > small { color: var(--muted); }
.inquiry-field input, .inquiry-field textarea, .inquiry-field select { border-color: var(--field-border); border-radius: 2px; background-color: #fff; color: var(--ink); }
.inquiry-field select { -webkit-appearance: none; appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23101720' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 14px 9px; }
.inquiry-field input::placeholder, .inquiry-field textarea::placeholder { color: #5d6771; }
.inquiry-field input:focus-visible, .inquiry-field textarea:focus-visible, .inquiry-field select:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.inquiry-field [aria-invalid=true] { border-color: var(--danger); outline: 2px solid var(--danger); outline-offset: 1px; }
.contact-action .field-help { color: var(--muted); }
.contact-action .field-help a { text-decoration: underline; text-underline-offset: 4px; }
.contact-action .field-error { color: var(--danger); font-weight: 700; }
.contact-action .inquiry-noscript { color: var(--danger); }
.inquiry-submit { color: var(--submit-ink); background: var(--submit-bg); }
.inquiry-submit > span[aria-hidden] { color: var(--lime); }
.inquiry-submit:hover { background: #1a2a40; box-shadow: none; }
.inquiry-submit:disabled, .inquiry-submit:disabled:hover { opacity: 1; color: var(--submit-disabled-ink); background: var(--submit-disabled-bg); box-shadow: none; cursor: not-allowed; }
.inquiry-submit:disabled > span[aria-hidden] { color: var(--submit-disabled-ink); }
.inquiry-form[aria-busy=true] .inquiry-submit { cursor: wait; }
.inquiry-feedback { border-left-color: var(--danger); background: #fff; color: var(--ink); }
.inquiry-feedback[data-state=success] { border-left-color: #3f5c00; }

/* ---------- 13. Footer ---------- */
.site-footer { border-top: 1px solid var(--line); color: var(--text); background: transparent; }
.site-footer.section-wrap { flex-wrap: wrap; column-gap: 24px; padding-top: 26px; padding-bottom: 22px; }
.footer-service, .footer-brand { flex: 0 0 auto; min-width: 0; max-width: 100%; }
.footer-logo { display: block; width: 280px; max-width: 100%; height: auto; aspect-ratio: 520 / 105.65; }
/* analytics.css puts the privacy link on a row of its own; here all links share one row and back-to-top stays right. */
.site-footer .analytics-footer-links { flex-basis: auto; font-size: 14px; }
.analytics-footer-links a { color: var(--muted); }
.site-footer a:hover { color: var(--lime); }
.back-top { border-color: var(--line-strong); border-radius: 50%; }
.back-top:hover { border-color: var(--lime); color: var(--lime); }
.footer-inner p, .footer-back { color: var(--muted); }
.footer-brand span { color: var(--muted); font-weight: 500; letter-spacing: .1em; }

/* ---------- 14. Analytics consent and settings ---------- */
.analytics-consent { border-top: 1px solid var(--line-strong); color: var(--text); background: rgba(9, 16, 30, .97); box-shadow: 0 -10px 34px rgba(0, 0, 0, .5); }
.analytics-consent a { color: var(--lime); }
.analytics-consent-actions button { border: 1px solid rgba(238, 244, 251, .6); border-radius: 2px; color: var(--text); background: transparent; }
.analytics-consent-actions button:hover { border-color: var(--lime); color: var(--lime); background: rgba(216, 255, 62, .08); }
.analytics-consent :focus-visible, .analytics-settings:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.analytics-settings { color: var(--muted); }
.analytics-settings:hover { color: var(--lime); }
/* Compact strip: title and text share a row, less padding, so the first screen keeps the hero notes and CTA in view.
   Wording and buttons are unchanged; buttons keep 44 px on touch screens. */
.analytics-consent { gap: 8px 28px; padding-block: 8px; line-height: 1.6; }
.analytics-consent-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; min-width: 0; }
.analytics-consent h2 { margin: 0; font-size: 14px; line-height: 1.6; }
.analytics-consent p { font-size: 13px; }
@media (min-width: 761px) {
  .pricing-layout > .quantity { align-self: start; position: sticky; top: 32px; min-height: 360px; }
}
@media (pointer: fine) and (min-width: 761px) {
  .analytics-consent-actions button { min-height: 40px; padding-block: 6px; }
}

/* ---------- 15. order-guide.html ---------- */
.guide-breadcrumb a:hover, .order-guide-index a:hover { color: var(--lime); }
.order-guide-index a { color: #d5e2f0; }
.guide-callout { border: 1px solid var(--line); border-left: 2px solid var(--lime); border-radius: 0 4px 4px 0; background: var(--panel); }
.guide-callout h3 { color: var(--text); }
.guide-checklist dt, .guide-table th, .guide-timeline li strong { color: var(--text); }
.guide-table thead th { color: var(--lime); letter-spacing: .08em; }
.guide-timeline li::before { font: 900 22px/1.35 var(--display); letter-spacing: .04em; }
.guide-closing { margin-top: 56px; margin-bottom: 72px; padding: 36px 38px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.order-guide-section:nth-last-of-type(2) { border-bottom: 0; }

/* ---------- 16. materials.html (guide.css) ---------- */
/* Header and footer take the index inset (56 / 40 / 28 px) so the brand and CTA stay put between pages; the article keeps its reading width. */
.header-inner, .footer-inner { width: min(calc(100% - 112px), 1328px); }
@media (max-width: 1279px) { .header-inner, .footer-inner { width: calc(100% - 80px); } }
@media (max-width: 1023px) { .header-inner, .footer-inner { width: calc(100% - 56px); } }
@media (max-width: 720px) { .header-inner, .footer-inner { width: calc(100% - 40px); } }
@media (min-width: 901px) {
  .footer-inner { grid-template-columns: auto 1fr auto auto; }
  .footer-inner .analytics-footer-links { grid-column: auto; }
}
.breadcrumb a:hover { color: var(--lime); }
.section-number { font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: .14em; }
.eyebrow { letter-spacing: .08em; }
.hero-summary { color: var(--text); }
.hero-intro, .guide-content { color: var(--soft); }
.material-visual img { border: 1px solid var(--line); border-radius: 4px; }
.article-nav-label { color: var(--muted); letter-spacing: .08em; }
.article-nav a { color: #d5e2f0; }
.article-nav a:hover { color: var(--lime); }
.article-nav a span { font: 700 15px/1 var(--display); letter-spacing: .08em; }
.comparison-table thead th { border-top: 2px solid rgba(216, 255, 62, .7); border-bottom-color: var(--line-strong); color: var(--lime); letter-spacing: .06em; }
.comparison-table tbody th { color: var(--text); font-weight: 700; }
.comparison-table td { color: var(--soft); }
.comparison-table tbody tr:last-child th, .comparison-table tbody tr:last-child td { border-bottom-color: var(--line-strong); }
.approval-note { padding-right: 20px; background: linear-gradient(90deg, var(--lime-soft), rgba(216, 255, 62, 0)); color: var(--text); }
.text-link:hover { color: var(--lime); border-color: var(--lime); }
.primary-link { border-radius: 2px; transition: background .2s, box-shadow .2s; }
.primary-link:hover { background: var(--lime-hover); box-shadow: 0 0 28px rgba(216, 255, 62, .3); }
.sources a:hover, .guide-section p a:hover, .privacy-page a:hover { color: var(--lime); }

/* ---------- 17. privacy.html ---------- */
.privacy-page { color: var(--soft); }
.privacy-page h1, .privacy-page h2 { color: var(--text); }
.privacy-page [data-analytics-status] { margin-top: 18px; padding: 14px 18px; border: 1px solid var(--line); border-left: 2px solid var(--lime); background: var(--panel); color: var(--text); }

/* ---------- 18. Widths ---------- */
@media (max-width: 1279px) {
  .hero { gap: 40px; }
  .night-grid { gap: 24px; }
}
@media (max-width: 1180px) {
  .night-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .night-note { grid-column: 1 / -1; }
  .night-note .button { width: auto; min-width: 320px; align-self: flex-start; margin-top: 0; }
}
@media (min-width: 1024px) {
  .inquiry-heading { position: sticky; top: 124px; }
}
@media (max-width: 1023px) {
  .hero { gap: 28px; padding-top: 44px; padding-bottom: 64px; }
  .hero-lead { font-size: 14px; margin-top: 20px; }
  .hero-condition { margin-top: 22px; }
  .hero-actions { margin-top: 26px; gap: 14px 24px; }
  .specifications-section { padding-top: 74px; }
  .use-case-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .pattern-grid { gap: 20px; }
  .pattern-card { padding: 28px 26px 30px; }
  .pattern-common { grid-template-columns: 1fr; gap: 26px; padding: 28px 26px 30px; }
  .oem-note { gap: 12px 32px; }
  .pricing-layout { grid-template-columns: .8fr 1.2fr; gap: 28px; }
  .quantity { padding: 30px 22px; }
  .cost-breakdown { padding: 28px 26px; }
  .price-table caption { padding: 14px 18px 12px; }
  .price-table thead th, .price-table tbody th, .price-table td { padding-inline: 16px; }
  .price-terms { gap: 0 32px; }
  .process-steps { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .contact-action { padding: 30px 28px; }
  .guide-closing { padding: 30px 28px; }
}
@media (max-width: 760px) {
  h2 { font-size: clamp(20px, 6.15vw, 26px); }
  .section-index { font-size: 36px; margin-bottom: 10px; }
  .section-label { font-size: 13px; gap: 6px 10px; }
  .label-en { font-size: 15px; }
  .label-en::after { width: 20px; margin-left: 10px; }

  .hero { grid-template-columns: 1fr; gap: 30px; padding-top: 22px; padding-bottom: 46px; }
  .hero-scene { inset: -73px calc(50% - 50vw) 0; }
  .hero-court { inset: 46% 0 0; height: 54%; }
  .hero-flood-a { left: -30%; width: 420px; height: 360px; }
  .hero-flood-b { right: -40%; width: 420px; height: 360px; }
  /* The Japanese h1 leads on small screens: smaller kicker, no glow. */
  .hero-kicker { margin-bottom: 12px; font-size: 30px; line-height: 1; letter-spacing: .03em; text-shadow: none; }
  .hero h1 { font-size: 34px; line-height: 1.4; }
  .hero-lead { max-width: none; margin-top: 14px; font-size: 14px; }
  .hero-condition { margin-top: 16px; padding: 13px 16px; }
  .hero-condition > strong { font-size: 15px; }
  .hero-actions { margin-top: 20px; }
  .hero-actions .button { width: 100%; }
  .scene-switch { justify-content: flex-start; gap: 12px; margin-bottom: 12px; }
  .scene-switch-buttons button { min-height: 44px; }
  /* Re-crop: a taller frame shows the whole paddle, with room for the glow on both sides. */
  .paddle-comparison.is-ready { aspect-ratio: 4 / 5; }
  .comparison-badge { top: auto; bottom: 12px; }
  .scene-tag { left: 12px; top: 12px; bottom: auto; }

  .design-example img { aspect-ratio: 1; }
  .night-lockup { margin-bottom: 14px; font-size: 54px; }
  .lockup-arrow { flex-basis: 46px; }
  .night-heading h2 { font-size: 22px; }
  .night-grid { grid-template-columns: 1fr; gap: 20px; }
  .night-card img { aspect-ratio: 1; }
  .night-body { padding: 20px 20px 24px; }
  .night-note { padding: 22px 20px 24px; }
  .night-note .button { width: 100%; min-width: 0; align-self: stretch; }

  .specifications-section { padding-top: 56px; }
  .spec-status { display: block; width: fit-content; margin: 0 0 8px; font-size: 13px; }
  .night-tag, .night-status, .scene-tag { font-size: 13px; }
  .use-cases { margin-top: 48px; padding-top: 40px; }
  .use-cases-label { font-size: 15px; margin-bottom: 10px; }
  .use-cases-label::after { width: 20px; margin-left: 10px; }
  .use-cases-heading h3 { font-size: 21px; }
  .use-case-list { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
  .use-case-list li { padding: 20px 18px 22px; }
  .use-case-list h4 { margin-bottom: 6px; font-size: 16px; }
  .pattern-grid { grid-template-columns: 1fr; gap: 16px; }
  .pattern-card { padding: 24px 20px 26px; }
  .pattern-code { font-size: 44px; }
  .pattern-card h3 { margin-top: 10px; font-size: 20px; }
  .pattern-spec > div { gap: 12px; padding: 10px 0; }
  .pattern-common { margin-top: 16px; gap: 24px; padding: 24px 20px 26px; }
  .pattern-order li { font-size: 14px; }
  .oem-note { grid-template-columns: 1fr; gap: 10px; margin-top: 40px; padding-top: 28px; }
  .oem-note h3 { font-size: 19px; }
  .pricing-layout { grid-template-columns: 1fr; gap: 20px; }
  .quantity { padding: 28px 20px; border-bottom: 1px solid rgba(216, 255, 62, .32); }
  .quantity-number { margin: 2px 0 6px; }
  .quantity-number strong { font-size: 104px; }
  .quantity-number > span { font-size: 20px; }
  .cost-breakdown { padding: 24px 20px; }
  .price-tables { gap: 14px; }
  .price-table caption { padding: 14px 14px 12px; }
  .price-table-spec { display: block; margin: 2px 0 0; }
  .price-table thead th { padding: 9px 12px; line-height: 1.5; white-space: normal; }
  .price-table tbody th, .price-table td { padding: 12px; }
  .price-table tbody th { font-size: 14px; }
  .price-ex { font-size: 21px; }
  .price-in { font-size: 13px; }
  .price-terms { grid-template-columns: 1fr; margin-top: 28px; }
  .price-terms > div { padding: 14px 0 16px; }
  .analytics-consent { gap: 8px; padding: 10px 20px max(10px, env(safe-area-inset-bottom)); }
  .analytics-consent p { font-size: 12px; }
  .quote-quantities { font-size: 24px; }
  .process-steps { grid-template-columns: 1fr; gap: 14px; }
  /* Number and title share a row; the paragraph takes the full card width. */
  .process-steps li { padding: 20px 18px 22px; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; }
  .step-number { grid-row: 1; font-size: 34px; padding-top: 0; }
  .process-steps h3 { margin-top: 0; }
  .process-steps p { grid-column: 1 / -1; }
  .contact-action { padding: 24px 18px; }
  .guide-closing { margin-top: 40px; margin-bottom: 52px; padding: 26px 20px; }
  .privacy-page [data-analytics-status] { padding: 12px 14px; }
  .header-contact { min-height: 44px; }
  .header-contact > span[aria-hidden=true]:not(.contact-arrow) { display: none; }
  .site-logo { width: 210px; aspect-ratio: 210 / 26.67; }
  /* Stacked footer links: each a 44 px row. */
  .site-footer.section-wrap { row-gap: 0; padding-top: 18px; padding-bottom: 18px; }
  .site-footer.section-wrap > .footer-service { grid-column: 1 / -1; margin-bottom: 12px; }
  .site-footer > a:not(.back-top), .analytics-footer-links a { display: flex; align-items: center; min-height: 44px; }
  .site-footer .analytics-footer-links { gap: 0 24px; }
  .site-footer .back-top { grid-row: 2 / span 2; align-self: start; }
  .company-name { min-height: 44px; }
  .text-link { min-height: 44px; }
  /* materials.html: three columns at 390px — a slightly smaller face keeps each phrase on one line. */
  .comparison-table th:first-child { width: 21%; }
  .comparison-table td, .comparison-table tbody th, .comparison-table thead th { font-size: 13px; }
}
@media (max-width: 720px) {
  .footer-inner { gap: 0; }
  .footer-inner > a, .footer-inner > p, .footer-inner p > a, .footer-inner .analytics-footer-links a { display: flex; align-items: center; min-height: 44px; }
  .footer-inner > .footer-brand { flex-direction: column; align-items: flex-start; justify-content: center; }
  .footer-back { padding-block: 0; }
}
@media (max-width: 389px) {
  .hero h1 { font-size: 32px; }
  .price-table thead th, .price-table tbody th, .price-table td { padding-inline: 10px; }
  .hero-kicker { font-size: 28px; }
  .scene-switch-buttons button { min-width: 66px; padding-inline: 14px; }
}
@media (max-width: 374px) {
  /* One header logo size on every page (it no longer shrinks page by page), leaving >= 12 px before the inquiry button. */
  .site-logo { width: 156px; }
  .hero h1 { font-size: 27px; }
  .night-lockup { font-size: 44px; }
  .quantity-number strong { font-size: 88px; }
  .price-table thead th, .price-table tbody th, .price-table td { padding-inline: 6px; }
  .price-table tbody th { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Print drops the dark background: draw the lime / white wordmarks in black so the name stays on paper. */
@media print {
  .site-logo, .footer-logo, .hero-logo img { filter: brightness(0); }
}

@media (forced-colors: active) {
  .scene-switch-buttons button { border: 1px solid ButtonText; }
  .scene-switch-buttons button[aria-pressed=true] { forced-color-adjust: none; color: HighlightText; background: Highlight; }
  .comparison-divider { border: 1px solid CanvasText; }
  .section-index, .step-number, .night-lockup > span:first-child, .pattern-code { color: CanvasText; -webkit-text-stroke: 0; }
}