/* ============================================================
   OMYLIGHT — DAYLIGHT / MINERAL COLOUR THEME
   Loaded after style.css. Bright cream base, logo lime + teal,
   one deep-forest chapter, one lime→teal contact finish.
   ============================================================ */

:root{
  --ink:#11251e;
  --ink-2:#18332a;
  --bone:#f7f3ea;
  --bone-2:#ece5d7;
  --paper:#fcf9f3;
  --sand:#e9e0d0;
  --sage:#e5eedd;
  --copper:#c68b58;
  --copper-2:#e4bd91;
  --muted:#6c7b71;
  --line:rgba(17,37,30,.14);
  --line-soft:rgba(17,37,30,.08);
  --line-light:rgba(247,243,234,.18);
  --lime:#b8d60d;
  --lime-2:#d8ee74;
  --lime-soft:#eef6cd;
  --teal:#178da0;
  --teal-2:#62c6cf;
  --teal-soft:#dcf0f1;
  --forest:#0d2a22;
  --forest-2:#143b30;
  --shadow:0 24px 60px rgba(17,37,30,.12);
}

html{background:var(--bone)}
body{background:var(--bone);color:var(--ink)}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline-color:var(--teal)}
html::-webkit-scrollbar-track,body::-webkit-scrollbar-track{background:var(--bone)}
html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{background:rgba(17,37,30,.24)}
.grain{opacity:.13}

/* ---------- shared ---------- */
.label span{color:var(--teal)}
.label--light{color:var(--muted)}
.head-note{color:var(--muted)}
.display{color:var(--ink)}
.btn--light{background:var(--ink);color:var(--bone)}
.btn--light:hover{background:var(--lime);color:var(--ink)}
.btn--ghost{border-color:rgba(17,37,30,.28);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.fine{color:rgba(17,37,30,.46)}

/* ---------- logo ---------- */
.brand__mark{
  width:auto;
  height:64px;
  max-width:none;
  flex:0 0 auto;
}
.brand__word em{opacity:.58}
.brand__chip{
  display:grid;place-items:center;flex:0 0 auto;
  width:120px;height:80px;padding:6px 8px;
  border-radius:16px;
  background:var(--bone);
}
.brand__chip img{display:block;width:100%;height:auto}
.loader__logo{
  display:block;width:auto;height:72px;
  margin:0 0 26px;
}
.official__logo{
  display:grid;place-items:center;
  width:112px;height:112px;padding:8px;
  border-radius:22px;
  background:var(--bone);
}
.official__logo img{display:block;width:100%;height:auto}
.contact__mark{
  position:absolute;right:-3vw;bottom:-3vw;z-index:0;
  width:50vw;max-width:760px;height:auto;
  opacity:.14;pointer-events:none;
}

/* ---------- loader ---------- */
.loader{background:var(--bone);color:var(--ink)}
.loader__top{color:var(--muted)}
.loader__word em{color:var(--teal)}
.loader__track{background:rgba(17,37,30,.14)}
.loader__track i{background:linear-gradient(90deg,var(--teal),var(--lime))}
.loader__pct{color:var(--teal)}

/* ---------- nav ---------- */
.nav{color:var(--ink)}
.nav.is-scrolled{
  background:rgba(252,249,243,.88);
  border-color:rgba(17,37,30,.12);
  box-shadow:0 14px 34px rgba(17,37,30,.09);
}
.brand{color:var(--ink)}
.nav__links a{color:var(--ink)}
.nav__cta{border-color:rgba(17,37,30,.24);color:var(--ink)}
.nav__cta:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.nav__toggle{color:var(--ink)}

.menu{background:var(--bone);color:var(--ink)}
.menu .eyebrow{color:var(--muted)}
.menu nav a{border-color:rgba(17,37,30,.12)}
.menu nav a span{color:var(--teal)}
.menu__foot{border-color:rgba(17,37,30,.12);color:var(--muted)}
.menu__foot a{color:var(--ink)}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(58% 55% at 70% 32%,rgba(184,214,13,.20),transparent 66%),
    radial-gradient(42% 44% at 16% 18%,rgba(23,141,160,.14),transparent 68%),
    linear-gradient(158deg,#fbf7ee 0%,#f2ebdf 56%,#e7efdb 100%);
  color:var(--ink);
}
.hero__glow{
  background:
    radial-gradient(56% 46% at 52% 66%,rgba(198,139,88,.12),transparent 70%),
    radial-gradient(32% 38% at 84% 18%,rgba(23,141,160,.12),transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 38%,rgba(247,243,234,.38) 100%);
}
.hero__glow::after{background:linear-gradient(180deg,transparent,rgba(17,37,30,.14),transparent);opacity:.4}
.hero__ghost{-webkit-text-stroke:1px rgba(17,37,30,.06)}
.hero__grain{opacity:.12}
.hero__eyebrow{color:var(--teal)}
.hero__eyebrow .dot{background:var(--lime)}
.hero__title{color:var(--ink)}
.hero__lede{color:#4d5d54}
.hero__actions .btn--text{color:var(--ink)}
.hero__card{
  background:rgba(255,255,255,.58);
  border-color:rgba(17,37,30,.13);
  box-shadow:0 30px 70px rgba(17,37,30,.13);
}
.hero__card figcaption{color:var(--muted)}
.hero__card figcaption strong{color:var(--ink)}
.hero__badge{background:var(--lime);color:var(--ink);box-shadow:0 18px 42px rgba(17,37,30,.18)}
.hero__badge::after{border-color:rgba(17,37,30,.18)}
.hero__foot{
  border-color:rgba(17,37,30,.14);
  background:linear-gradient(180deg,rgba(247,243,234,0),rgba(247,243,234,.62));
}
.hero__foot-inner{color:var(--muted)}
.hero__foot-inner span:first-child{color:var(--teal)}
.scroll{color:var(--ink)}
.scroll i{background:rgba(17,37,30,.18)}
.scroll i::after{background:var(--teal)}
.hero__aside{color:rgba(17,37,30,.34)}

/* ---------- marquee ---------- */
.marquee{
  background:var(--forest);
  border-bottom:1px solid rgba(247,243,234,.12);
}
.marquee__track span{color:var(--bone)}
.marquee__track i{color:var(--lime)}

/* ---------- 01 material ---------- */
.material{background:var(--bone)}
.material__copy p{color:#4f5f55}
.material__copy blockquote{border-color:var(--lime);color:var(--ink)}
.material__visual{isolation:isolate;z-index:0}
.material__visual::before{
  content:"";position:absolute;inset:-9% -7% -11% -9%;z-index:-1;
  background:
    radial-gradient(58% 58% at 72% 28%,rgba(184,214,13,.28),transparent 68%),
    radial-gradient(52% 52% at 26% 82%,rgba(23,141,160,.20),transparent 70%);
  filter:blur(34px);
  pointer-events:none;
}
.float-card{
  background:rgba(255,255,255,.88);
  border-color:rgba(17,37,30,.12);
  box-shadow:0 22px 54px rgba(17,37,30,.10);
}
.float-card__icon{background:var(--lime);color:var(--ink)}
.stat__num em{color:var(--teal)}
.stat p span{color:var(--muted)}

/* ---------- 02 performance (light sage gallery) ---------- */
.perf{
  background:linear-gradient(180deg,#eaf2e2 0%,#dce8d2 100%);
  color:var(--ink);
}
.perf .section__head{border-color:var(--line)}
.perf .display{color:var(--ink)}
.perf .label{color:var(--teal)}
.perf .head-note{color:var(--muted)}
.perf__copy .eyebrow{color:var(--lime-2)}
.perf__copy h3{color:var(--bone)}
.perf__copy > p:last-of-type{color:rgba(247,243,234,.8)}
.tags li{border-color:rgba(216,238,116,.44);color:rgba(247,243,234,.9)}
.perf__ui{
  bottom:18px;padding:10px 18px;
  background:rgba(252,249,243,.88);
  border:1px solid rgba(17,37,30,.10);
  border-radius:999px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 34px rgba(17,37,30,.10);
}
.perf__count{color:var(--muted)}
.perf__count span:first-child{color:var(--teal)}
.perf__rail{background:rgba(17,37,30,.14)}
.perf__rail-fill{background:linear-gradient(90deg,var(--teal),var(--lime))}
.perf__hint{color:var(--muted)}
.perf__shade{background:linear-gradient(180deg,rgba(11,36,29,.18) 0%,rgba(11,36,29,.02) 32%,rgba(11,36,29,.9) 100%)}
.perf__panel:nth-child(2) img{filter:brightness(.82) saturate(.9) contrast(1.02)}

/* ---------- 03 evidence (light + teal data card) ---------- */
.evidence{background:var(--bone);color:var(--ink)}
.evidence .section__head{border-color:var(--line)}
.evidence .label,.assurance .label{color:var(--teal)}
.evidence .head-note,.assurance .head-note{color:var(--muted)}
.evidence .display,.assurance .display{color:var(--ink)}
.evidence__lead{
  position:relative;overflow:hidden;
  padding:clamp(26px,3vw,42px);
  background:linear-gradient(155deg,#10737c 0%,#0a4e54 58%,#0b3f45 100%);
  color:var(--bone);
  box-shadow:0 34px 70px rgba(9,63,68,.20);
}
.evidence__lead::after{
  content:"";position:absolute;right:-90px;top:-100px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(216,238,116,.28),transparent 66%);
  pointer-events:none;
}
.evidence__lead .eyebrow{color:var(--lime-2)}
.evidence__big strong{
  background:linear-gradient(180deg,#fbf7ee 8%,#d7ee7a 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.evidence__big em{color:var(--lime-2)}
.evidence__limit{color:rgba(247,243,234,.66)}
.meter{background:rgba(247,243,234,.24)}
.meter__fill{background:var(--lime-2)}
.meter__mark{border-color:var(--lime-2)}
.evidence__rows{
  padding:10px clamp(18px,2.4vw,30px);
  background:var(--paper);
  border:1px solid rgba(17,37,30,.08);
  box-shadow:0 24px 56px rgba(17,37,30,.08);
}
.erow{border-color:rgba(17,37,30,.10)}
.erow span{color:var(--muted)}
.erow strong{color:var(--ink)}
.erow strong small{color:var(--muted)}
.erow em{color:rgba(17,37,30,.44)}
.erow__place{color:var(--ink)!important}
.chips span{
  background:var(--paper);
  border-color:rgba(17,37,30,.12);
  color:var(--ink);
}
.chips span:nth-child(3n+1){border-color:rgba(184,214,13,.62)}
.chips span:nth-child(3n+2){border-color:rgba(23,141,160,.42)}
.docs .doc__img{box-shadow:0 22px 54px rgba(17,37,30,.13)}
.doc__cap{color:var(--muted)}
.doc__cap span{color:var(--ink)}
.fine--light{color:rgba(17,37,30,.46)}

/* ---------- 04 palette ---------- */
.palette{
  background:linear-gradient(180deg,var(--bone-2) 0%,#f4eee3 100%);
  position:relative;
}
.palette::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,#dedad2 0%,#c3c0ba 16%,#918d8a 32%,#cfc6a7 50%,#4c9fbe 72%,#3fa98d 100%);
}
.palette .label{color:var(--teal)}
.palette__note{color:var(--muted)}
.palette__stage{background:#d8d2c6}
.palette__stage-copy{color:var(--bone)}
.palette__no{color:var(--lime-2)}
.palette__stage-copy em{color:rgba(247,243,234,.66)}
.palette__stage-copy p{color:rgba(247,243,234,.76)}
.swatch{border-color:rgba(17,37,30,.12);color:var(--ink)}
.swatch::before{background:var(--lime)}
.swatch.is-active{background:rgba(255,255,255,.56)}
.swatch__no{color:var(--muted)}
.swatch__name em{color:var(--muted)}
.swatch__arrow{color:var(--teal)}
.palette__warn{color:var(--muted)}

/* ---------- 05 cases ---------- */
.cases{background:var(--paper)}
.cases .label{color:var(--teal)}
.cases .head-note{color:var(--muted)}
.live-dot{background:var(--lime)}
.cases__intro > p{color:var(--muted)}

/* ---------- 06 assurance (sage) ---------- */
.assurance{background:var(--sage);color:var(--ink)}
.assurance .section__head{border-color:var(--line)}
.assurance__note{color:var(--muted)}
.assure__grid{border-color:rgba(17,37,30,.15)}
.assure{
  border-color:rgba(17,37,30,.15);
  background:rgba(255,255,255,.58);
  box-shadow:0 14px 34px rgba(17,37,30,.035);
}
.assure:hover{background:rgba(255,255,255,.86)}
.assure__no{color:var(--teal)}
.assure__icon{color:rgba(23,141,160,.62)}
.assure h3{color:var(--ink)}
.assure p{color:var(--muted)}
.official{border-color:rgba(17,37,30,.15)}
.official__seal{
  background:
    radial-gradient(80% 70% at 50% 18%,rgba(184,214,13,.16),transparent 66%),
    linear-gradient(160deg,#0f342a,#0a211b);
  border-color:rgba(184,214,13,.32);
}
.official__seal-ring{border-color:rgba(247,243,234,.10)}
.official__seal-ring::before{border-color:rgba(184,214,13,.30)}
.official__brand{color:rgba(247,243,234,.70)}
.official__hundred{color:var(--bone)}
.official__hundred em{color:var(--lime)}
.official__cn{color:var(--lime-2)}
.official__rule{background:rgba(247,243,234,.22)}
.official__seal-copy{color:rgba(247,243,234,.62)}
.official__serial{color:rgba(247,243,234,.26)}
.official__copy .eyebrow{color:var(--teal)}
.official__copy h3{color:var(--ink)}
.official__copy > p{color:var(--muted)}
.official__chips span{border-color:rgba(17,37,30,.16);color:var(--ink)}
.fine--light{color:rgba(17,37,30,.46)}

/* ---------- 07 faq ---------- */
.faq{background:var(--bone)}
.faq .label{color:var(--teal)}
.faq__item{border-color:rgba(17,37,30,.12)}
.faq__item summary i::before,.faq__item summary i::after{background:var(--ink)}
.faq__item[open] h3{color:var(--teal)}
.faq__item[open] summary i::before{background:var(--teal)}
.faq__a p{color:#55645a}
.faq__head .btn{color:var(--ink)}

/* ---------- contact (lime → teal finish) ---------- */
.contact{
  background:
    radial-gradient(52% 64% at 16% 18%,rgba(216,238,116,.62),transparent 72%),
    linear-gradient(135deg,#eef6c5 0%,#d9ed9a 46%,#b9e4d9 100%);
  color:var(--ink);
}
.contact__bg{-webkit-text-stroke:1px rgba(17,37,30,.06);color:transparent}
.contact .eyebrow{color:var(--teal)}
.contact h2{color:var(--ink)}
.contact__row{border-color:rgba(17,37,30,.16)}
.contact__phone{color:var(--ink)}
.contact__phone:hover{color:var(--teal)}
.contact__meta{color:rgba(17,37,30,.60)}
.contact__status{color:rgba(17,37,30,.72)}
.contact__status span{background:var(--teal);box-shadow:0 0 0 4px rgba(23,141,160,.12)}
.contact__actions .btn--light{background:var(--ink);color:var(--bone)}
.contact__actions .btn--light:hover{background:var(--teal);color:var(--bone)}
.contact__actions .btn--ghost{border-color:rgba(17,37,30,.30);color:var(--ink)}
.contact__actions .btn--ghost:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}

/* ---------- footer ---------- */
.footer{
  background:var(--forest);
  color:rgba(247,243,234,.5);
  border-color:rgba(247,243,234,.14);
}
.footer .brand__word{color:var(--bone)}
.footer__nav a{color:rgba(247,243,234,.56)}
.footer__nav a:hover{color:var(--lime-2)}
.footer__top-link{color:rgba(247,243,234,.5)}
.footer__top-link:hover{color:var(--bone)}
.footer__fine{color:rgba(247,243,234,.35)}
.footer__bottom{color:rgba(247,243,234,.30)}
.footer__bottom a:hover{color:var(--bone)}

/* ---------- responsive additions ---------- */
@media (max-width:1100px){
  .brand__mark{height:56px}
}
@media (max-width:900px){
  .evidence__lead{padding:26px 24px 30px}
  .evidence__rows{padding:6px 20px}
  .contact__mark{width:74vw;right:-12vw;bottom:-2vw;opacity:.11}
}
@media (max-width:680px){
  .brand__mark{height:48px}
  .brand{gap:9px}
  .brand__word{font-size:12px;gap:4px}
  .brand__word em{font-size:8px;letter-spacing:.24em}
  .brand__chip{width:100px;height:68px;padding:5px 8px}
  .loader__logo{height:58px;margin-bottom:20px}
  .official__logo{width:96px;height:96px;padding:7px}
  .contact__mark{width:92vw;right:-18vw;bottom:0;opacity:.09}
  .evidence__big strong{font-size:clamp(100px,27vw,170px)}
  .evidence__lead::after{width:190px;height:190px;right:-70px;top:-70px}
  .contact__actions .btn--light{background:var(--ink);color:var(--bone)}
}
@media (max-width:420px){
  .brand__chip{width:92px;height:62px}
}



/* ---------- EXIT / 退出网站 ---------- */
.exit{
  position:relative;
  padding:clamp(64px,8vw,110px) var(--pad) clamp(72px,9vw,120px);
  background:
    radial-gradient(60% 80% at 50% 0%,rgba(255,255,255,.55),transparent 70%),
    linear-gradient(135deg,#eef5c8 0%,#dcec97 55%,#c7e5d7 100%);
  color:var(--ink);
  text-align:center;
  border-top:1px solid rgba(17,37,30,.12);
}
.exit .eyebrow{justify-content:center;color:rgba(17,37,30,.55)}
.exit__title{
  margin:24px auto 34px;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(36px,4.8vw,64px);
  line-height:1.2;
  letter-spacing:.01em;
}
.exit__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-width:min(100%,520px);min-height:68px;
  padding:14px 30px;
  background:var(--ink);color:var(--bone);
  border-radius:999px;
  font-size:20px;font-weight:600;letter-spacing:.06em;
  box-shadow:0 18px 40px rgba(17,37,30,.18);
  transition:background .35s,color .35s,transform .35s;
}
.exit__btn em{font-style:normal;font-size:10px;font-weight:400;letter-spacing:.14em;color:rgba(247,243,234,.62)}
.exit__btn i{font-style:normal;font-size:20px;transition:transform .35s}
.exit__btn:hover{background:var(--teal);color:var(--bone);transform:translateY(-2px)}
.exit__btn:hover i{transform:translate(2px,-2px)}
.exit__note{margin:18px 0 0;font-size:12px;line-height:1.8;color:rgba(17,37,30,.6)}

.exit-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(252,249,243,.95);
  border-top:1px solid rgba(17,37,30,.12);
  box-shadow:0 -12px 30px rgba(17,37,30,.1);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .4s var(--ease),opacity .3s;
}
.exit-bar.is-hidden{transform:translateY(110%);opacity:0;pointer-events:none}
.exit-bar__btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:10px 20px;
  background:var(--ink);color:var(--bone);border-radius:999px;
  font-size:16px;font-weight:600;letter-spacing:.06em;
}
.exit-bar__btn em{font-style:normal;font-size:10px;font-weight:400;letter-spacing:.12em;color:rgba(247,243,234,.62)}
.exit-bar__btn i{font-style:normal;font-size:16px}

@media (max-width:900px){
  .exit-bar{display:block}
  .exit{padding-bottom:92px}
}
@media (max-width:680px){
  .exit__title{font-size:clamp(32px,9vw,44px)}
  .exit__btn{width:100%;min-height:64px;font-size:19px}
  .exit-bar__btn{min-height:52px;font-size:16px}
}

/* ---------- LIVE TEST / 实测视频 ---------- */
.tests{
  background:linear-gradient(180deg,var(--sage) 0%,var(--paper) 100%);
}
.tests .label{color:var(--teal)}
.tests__label span{
  width:7px;height:7px;padding:0;border-radius:50%;
  background:#d6553c;box-shadow:0 0 0 3px rgba(214,85,60,.13);
  font-size:0;line-height:0;
}
.tests .head-note{color:var(--muted)}
.tests > .display{
  margin:clamp(24px,3.2vw,42px) 0 clamp(34px,4.8vw,58px);
}
.tests__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,20px);
}
.test{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4/5;
  padding:0;border:0;
  overflow:hidden;
  background:var(--ink);
  color:var(--bone);
  text-align:left;
  border-radius:2px;
  cursor:pointer;
  isolation:isolate;
}
.test__media{position:absolute;inset:0;overflow:hidden}
.test__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.3s var(--ease);
}
.test:hover .test__media img,
.test:focus-visible .test__media img{transform:scale(1.045)}
.test__shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,12,.18) 0%,rgba(11,11,12,0) 34%,rgba(11,11,12,.9) 100%);
}
.test__top{
  position:absolute;top:16px;left:16px;right:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  z-index:2;
  font-size:9px;letter-spacing:.14em;
  color:rgba(247,243,234,.8);
}
.test__rec{display:flex;align-items:center;gap:6px;color:var(--bone)}
.test__rec i{
  width:5px;height:5px;border-radius:50%;
  background:#e0523f;box-shadow:0 0 0 3px rgba(224,82,63,.16);
}
.test__play{
  position:absolute;left:50%;top:45%;
  width:62px;height:62px;
  transform:translate(-50%,-50%);
  z-index:2;
  color:var(--bone);
  opacity:.95;
  transition:transform .4s var(--ease),color .4s;
}
.test__play svg{display:block;width:100%;height:100%}
.test:hover .test__play,
.test:focus-visible .test__play{transform:translate(-50%,-50%) scale(1.08);color:var(--lime-2)}
.test__body{
  position:absolute;left:20px;right:20px;bottom:20px;
  z-index:2;
  display:flex;flex-direction:column;gap:7px;
}
.test__no{font-size:9px;letter-spacing:.16em;color:var(--lime-2)}
.test__body strong{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(24px,2.2vw,31px);line-height:1.2;
  color:var(--bone);
}
.test__body em{
  font-style:normal;
  font-size:11px;line-height:1.7;
  color:rgba(247,243,234,.7);
  max-width:290px;
}
.test__cta{
  display:flex;align-items:center;gap:8px;
  margin-top:8px;padding-top:10px;
  border-top:1px solid rgba(247,243,234,.2);
  font-size:9px;letter-spacing:.12em;
  color:var(--lime-2);
}
.test__cta i{font-style:normal;transition:transform .4s}
.test:hover .test__cta i{transform:translate(2px,-2px)}
.tests__note{
  margin:16px 0 0;
  font-size:9px;letter-spacing:.05em;
  color:var(--muted);text-align:right;
}

/* video modal */
.video-modal{
  width:100vw;max-width:100vw;
  height:100vh;height:100dvh;max-height:none;
  margin:0;padding:0;border:0;
  background:rgba(7,7,8,.97);
  color:var(--bone);
  overflow:hidden;
}
.video-modal::backdrop{background:rgba(7,7,8,.9);backdrop-filter:blur(16px)}
.video-modal[open]{display:flex;flex-direction:column;align-items:center;justify-content:center}
.video-modal__stage{
  display:flex;align-items:center;justify-content:center;
  width:calc(100% - 80px);height:calc(100% - 130px);
}
.video-modal__stage video{
  display:block;
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.video-modal__close{
  position:absolute;top:14px;right:22px;z-index:2;
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:50%;
  font-size:30px;line-height:1;
  color:var(--bone);
  opacity:.72;
  transition:opacity .3s,background .3s;
}
.video-modal__close:hover{opacity:1;background:rgba(247,243,234,.08)}
.video-modal__bar{
  position:absolute;left:40px;right:40px;bottom:22px;
  display:flex;align-items:baseline;gap:22px;
  padding-top:14px;
  border-top:1px solid var(--line-light);
  font-size:11px;
}
.video-modal__bar strong{
  font-family:var(--serif);font-weight:400;
  font-size:20px;color:var(--bone);
  white-space:nowrap;
}
.video-modal__bar p{margin:0;color:rgba(247,243,234,.6);line-height:1.7}
body.video-open{overflow:hidden}

@media (max-width:900px){
  .tests__grid{grid-template-columns:1fr;gap:14px}
  .test{aspect-ratio:4/4.7}
  .test__body strong{font-size:30px}
  .test__body em{font-size:12px;max-width:320px}
  .tests__note{text-align:left}
  .video-modal__stage{width:calc(100% - 24px);height:calc(100% - 140px)}
  .video-modal__bar{left:18px;right:18px;bottom:16px;display:block}
  .video-modal__bar strong{font-size:18px}
  .video-modal__bar p{margin-top:5px;font-size:10px}
  .video-modal__close{top:8px;right:12px;width:44px;height:44px}
}
@media (max-width:680px){
  .test{aspect-ratio:4/5}
  .test__top{top:14px;left:14px;right:14px}
  .test__body{left:18px;right:18px;bottom:18px}
  .test__body strong{font-size:28px}
}

.fine a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.fine a:hover{color:var(--ink)}

.docs__actions{display:flex;justify-content:center;margin-top:clamp(30px,4vw,50px)}
.docs__actions .btn{min-height:52px}