/* opjai v0.9 — final cinematic pacing / enterprise certificate */

:root{
  --black:#010203;
  --white:rgba(246,249,250,.97);
  --soft:rgba(218,230,233,.64);
  --cyan:rgba(151,240,255,.92);
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--black)}
html{color-scheme:dark}

body{
  position:relative;
  font-family:"Oxanium",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

#gl{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:#010203;
}

.sequence{position:fixed;inset:0;z-index:3;overflow:hidden;pointer-events:none}

.optics{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 55% 46%,transparent 0 29%,rgba(0,0,0,.075) 60%,rgba(0,0,0,.53) 100%),
    linear-gradient(90deg,rgba(0,0,0,.15),transparent 13% 87%,rgba(0,0,0,.19));
}

.grain{
  position:fixed;
  inset:-35%;
  z-index:5;
  pointer-events:none;
  opacity:.035;
  background-image:
    repeating-radial-gradient(circle at 29% 47%,rgba(255,255,255,.44) 0 .42px,transparent .65px 2.35px);
  background-size:5px 5px;
  mix-blend-mode:soft-light;
  animation:grain-shift 780ms steps(2,end) infinite;
}

@keyframes grain-shift{
  0%{transform:translate3d(-1.1%,.6%,0)}
  25%{transform:translate3d(.7%,-1%,0)}
  50%{transform:translate3d(1.1%,.8%,0)}
  75%{transform:translate3d(-.5%,-1.1%,0)}
  100%{transform:translate3d(.8%,.3%,0)}
}

.bar{
  position:fixed;
  left:0;
  width:100%;
  height:clamp(48px,6.2vh,70px);
  z-index:8;
  background:#010203;
}
.bar--top{top:0}.bar--bottom{bottom:0}

.scene{
  position:absolute;
  inset:0;
  opacity:0;
  will-change:opacity,transform,filter;
  --scene-accent:210,235,255;
}

.scene--act::before{
  content:attr(data-theme);
  position:absolute;
  z-index:0;
  left:50%;
  top:84%;
  transform:translate(-50%,-50%);
  color:rgb(255,255,255);
  font-family:"Orbitron",sans-serif;
  font-size:clamp(22px,6vw,270px);
  font-weight:250;
  line-height:.78;
  letter-spacing:.04em;
  white-space:nowrap;
  text-shadow:0 0 30px rgba(var(--scene-accent),.14);
  mix-blend-mode:screen;
  opacity:.23;
  filter:blur(2.9px);
}

.scene--act h1,
.scene--act .answer,
.scene--act .eyebrow{z-index:1}

.scene--01{--scene-accent:255,181,195}
.scene--02{--scene-accent:140,232,255}
.scene--03{--scene-accent:255,219,137}
.scene--04{--scene-accent:190,164,255}
.scene--05{--scene-accent:255,151,126}
.scene--06{--scene-accent:139,255,202}
.scene--07{--scene-accent:129,207,255}
.scene--certificate-copy{--scene-accent:235,183,255}

.scene h1{
  position:absolute;
  margin:0;
  color:rgba(var(--scene-accent),.98);
  font-family:"Oxanium",sans-serif;
  font-size:clamp(58px,5.65vw,88px);
  font-weight:360;
  line-height:.95;
  letter-spacing:-.052em;
  text-shadow:0 10px 34px rgba(0,0,0,.34);
  will-change:opacity,transform,filter;
}

.scene .answer{
  position:absolute;
  margin:0;
  max-width:min(700px,48vw);
  color:rgba(var(--scene-accent),.92);
  font-family:"Oxanium",sans-serif;
  font-size:clamp(27px,2.45vw,38px);
  font-weight:370;
  line-height:1.12;
  letter-spacing:-.038em;
  text-wrap:balance;
  text-shadow:
    0 0 24px rgba(103,221,239,.05),
    0 16px 48px rgba(0,0,0,.48);
  opacity:0;
  will-change:opacity,transform,filter;
}

.answer--emphasis{font-size:clamp(34px,3.15vw,48px)!important}
.answer--certificate{font-size:clamp(30px,2.7vw,42px)!important}

.answer--words{
  display:flex;
  flex-wrap:wrap;
  gap:.1em .42em;
  max-width:760px!important;
}
.answer--words span{
  display:inline-block;
  opacity:.12;
  filter:blur(2px);
  transform:translateY(7px);
  will-change:opacity,transform,filter;
}

.eyebrow{
  position:absolute;
  font-family:"Space Mono",monospace;
  color:rgba(var(--scene-accent),.72);
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
  will-change:opacity;
}

/* editorial act layouts */
.scene--01 h1{left:8vw;top:27.7vh;font-size:clamp(65px,6.45vw,100px)}
.scene--01 .eyebrow{left:8.2vw;top:20.7vh}
.scene--01 .answer{right:8vw;top:50.5vh;text-align:right}

.scene--02 h1{right:7.8vw;top:26.8vh;text-align:right}
.scene--02 .eyebrow{right:8.1vw;top:20vh;text-align:right}
.scene--02 .answer{left:8vw;top:52vh}

.scene--03 h1{left:8.4vw;top:26.4vh;font-size:clamp(53px,5.05vw,78px)}
.scene--03 .eyebrow{left:8.6vw;top:19.7vh}
.scene--03 .answer{right:8.2vw;top:51.5vh;justify-content:flex-end;text-align:right}

.scene--04 h1{left:9vw;top:25.8vh;font-size:clamp(50px,4.9vw,76px)}
.scene--04 .eyebrow{left:12.2vw;top:20.6vh}
.scene--04 .answer{right:8.2vw;top:49.5vh;text-align:right;max-width:min(760px,50vw)}

.scene--05 h1{right:7.7vw;top:25.2vh;text-align:right;font-size:clamp(53px,5.25vw,82px)}
.scene--05 .eyebrow{right:8vw;top:18.9vh;text-align:right}
.scene--05 .answer{left:8.4vw;top:51.5vh}

.scene--06 h1{left:8.2vw;top:26.2vh;font-size:clamp(50px,5vw,78px)}
.scene--06 .eyebrow{left:8.4vw;top:21.2vh}
.scene--06 .answer{right:8vw;top:50.3vh;text-align:right}

.scene--07 h1{right:7.6vw;top:25vh;text-align:right;font-size:clamp(46px,4.55vw,70px)}
.scene--07 .eyebrow{right:7.9vw;top:19.5vh;text-align:right}
.scene--07 .answer{left:8.2vw;top:51.5vh}

.scene--certificate-copy h1{
  left:7.8vw;
  top:24.5vh;
  font-size:clamp(49px,4.7vw,72px)
}
.scene--certificate-copy .eyebrow{left:8vw;top:18vh}
.scene--certificate-copy .answer{right:8.2vw;top:53vh;text-align:right}

/* brand */
.brand-lockup{
  position:absolute;
  left:7.6vw;
  right:7.6vw;
  top:50%;
  transform:translateY(-48%);
}
.brand-lockup--opening{top:49%}

.brand{
  font-family:"Orbitron",sans-serif;
  color:var(--white);
  font-size:clamp(118px,14.6vw,222px);
  font-weight:500;
  line-height:.84;
  letter-spacing:-.035em;
  text-shadow:0 0 1px rgba(255,255,255,.24),0 24px 72px rgba(0,0,0,.48);
}
.brand-line{
  width:0%;
  height:1px;
  margin-top:4vh;
  background:linear-gradient(90deg,rgba(224,241,244,.76),rgba(127,226,242,.34),rgba(127,226,242,0));
}
.brand-sub{
  margin-top:17px;
  color:rgba(216,229,232,.59);
  font-family:"Oxanium",sans-serif;
  font-size:clamp(20px,1.08vw,17px);
  font-weight:400;
  letter-spacing:.015em;
}
.brand-signoff{
  margin-top:8px;
  color:rgba(216,229,232,.42);
  font-family:"Space Mono",monospace;
  font-size:clamp(9px,.72vw,12px);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.brand-sub--closing{color:rgba(192,255,181,.82)!important;font-size:clamp(26px,1.45vw,24px)}

/* certificate */
.certificate{
  position:absolute;
  inset:0;
  z-index:7;
  display:grid;
  place-items:center;
  opacity:0;
  transform:scale(.982) translateY(10px);
  filter:blur(12px);
  will-change:opacity,transform,filter;
}

.certificate__frame{
  position:relative;
  width:min(1160px,76vw);
  min-height:525px;
  padding:38px 42px 27px;
  overflow:hidden;
  border-top:1px solid rgba(183,229,236,.27);
  border-bottom:1px solid rgba(183,229,236,.17);
  background:
    linear-gradient(180deg,rgba(6,11,14,.80),rgba(2,5,7,.72)),
    radial-gradient(circle at 76% 28%,rgba(64,185,205,.06),transparent 36%);
  box-shadow:0 35px 110px rgba(0,0,0,.50);
  backdrop-filter:blur(9px);
}

.certificate__frame::before,
.certificate__frame::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(169,220,229,.18) 18% 82%,transparent);
}
.certificate__frame::before{left:0}
.certificate__frame::after{right:0}

.certificate__scan{
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  height:1px;
  opacity:0;
  background:linear-gradient(90deg,transparent 4%,rgba(171,240,250,.16) 28%,rgba(210,250,255,.55) 50%,rgba(171,240,250,.16) 72%,transparent 96%);
  box-shadow:0 0 18px rgba(116,225,242,.18);
  will-change:transform,opacity;
}

.certificate__header{
  display:flex;
  justify-content:space-between;
  gap:48px;
  align-items:flex-start;
}

.certificate__kicker,
.certificate__section-label{
  font-family:"Space Mono",monospace;
  font-size:8px;
  font-weight:700;
  letter-spacing:.19em;
  color:rgba(177,215,222,.45);
}

.certificate__id{
  margin-top:8px;
  font-family:"Oxanium",sans-serif;
  color:rgba(237,245,247,.88);
  font-size:26px;
  font-weight:360;
  letter-spacing:-.035em;
}

.certificate__authority{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:.82;
}
.certificate__authority span{
  font-family:"Space Mono",monospace;
  font-size:9px;
  letter-spacing:.19em;
  color:rgba(182,222,229,.44);
}
.certificate__authority strong{
  margin-top:15px;
  font-family:"Oxanium",sans-serif;
  font-size:clamp(42px,4vw,62px);
  font-weight:360;
  letter-spacing:-.055em;
  color:rgba(223,250,253,.96);
  text-shadow:0 0 30px rgba(100,225,241,.10);
}

.certificate__rule{
  height:1px;
  margin:28px 0 29px;
  background:linear-gradient(90deg,rgba(173,216,223,.15),rgba(173,216,223,.05) 65%,transparent);
}

.certificate__body{
  display:grid;
  grid-template-columns:1.03fr .97fr;
  gap:64px;
  align-items:center;
}

.certificate__section-label{margin-bottom:12px}

.cert-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:34px;
  align-items:center;
  min-height:39px;
  border-bottom:1px solid rgba(165,201,208,.065);
  font-family:"Oxanium",sans-serif;
  color:rgba(207,222,226,.54);
  font-size:13px;
}
.cert-row strong{
  font-family:"Space Mono",monospace;
  font-size:8px;
  font-weight:400;
  letter-spacing:.12em;
  color:rgba(207,243,248,.81);
}

.certificate__math{
  display:grid;
  grid-template-columns:215px 1fr;
  gap:28px;
  align-items:center;
}

.certificate__seal{width:215px;height:215px}
.certificate__seal svg{width:100%;height:100%;overflow:visible}
.seal{
  fill:none;
  stroke:rgba(126,229,244,.28);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:560;
  stroke-dashoffset:560;
}
.s2{stroke:rgba(161,224,235,.25)}
.s3{stroke:rgba(127,203,219,.31)}
.s4{stroke:rgba(174,235,244,.30)}
.s5{stroke:rgba(109,196,218,.34)}
.seal-core{
  fill:rgba(214,251,255,.98);
  filter:drop-shadow(0 0 11px rgba(131,230,244,.76));
  opacity:0;
}

.math-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 25px;
  font-family:"Space Mono",monospace;
  font-size:8px;
  line-height:1.32;
  letter-spacing:.075em;
  color:rgba(161,196,203,.38);
}
.math-grid strong{
  font-weight:400;
  color:rgba(195,230,235,.68);
}
.certificate__section-label--math{margin:0 0 4px}

.certificate__footer{
  display:flex;
  justify-content:space-between;
  gap:32px;
  margin-top:28px;
  padding-top:17px;
  border-top:1px solid rgba(173,214,221,.12);
  font-family:"Space Mono",monospace;
  font-size:8px;
  letter-spacing:.11em;
  color:rgba(166,208,214,.42);
}

/* restrained HUD */
.hud{
  position:absolute;
  z-index:4;
  display:flex;
  gap:18px;
  font-family:"Space Mono",monospace;
  color:rgba(161,193,200,.23);
  font-size:8px;
  font-weight:700;
  letter-spacing:.10em;
  white-space:nowrap;
  opacity:.64;
  transition:opacity .45s ease;
}
.hud--tl{top:calc(clamp(48px,6.2vh,70px) + 20px);left:2.6vw}
.hud--tr{top:calc(clamp(48px,6.2vh,70px) + 20px);right:2.6vw}
.hud--bl{bottom:calc(clamp(48px,6.2vh,70px) + 20px);left:2.6vw}
.hud--br{bottom:calc(clamp(48px,6.2vh,70px) + 20px);right:2.6vw}

@media (max-aspect-ratio:1.45/1){
  .scene h1{font-size:clamp(50px,5vw,75px)}
  .scene .answer{font-size:clamp(25px,2.2vw,34px)}
  .brand{font-size:clamp(108px,13.4vw,196px)}
  .certificate__frame{width:81vw}
}

@media (prefers-reduced-motion:reduce){.grain{animation:none}}


/* =========================================================
   v0.10 — authored mobile cinema
   Desktop above remains the MacBook Air reference.
   ========================================================= */

:root{
  --neon:#7CFF5B;
  --neon-soft:rgba(124,255,91,.66);
  --safe-top:max(18px, env(safe-area-inset-top));
  --safe-bottom:max(18px, env(safe-area-inset-bottom));
}

.scene--brand-neon .brand{
  color:var(--neon);
  text-shadow:
    0 0 1px rgba(220,255,214,.72),
    0 0 18px rgba(124,255,91,.22),
    0 0 52px rgba(124,255,91,.10),
    0 24px 72px rgba(0,0,0,.50);
}
.scene--brand-neon .brand-sub{color:rgba(192,255,181,.72)}
.scene--brand-neon .brand-line{
  background:linear-gradient(90deg,rgba(198,255,188,.90),rgba(124,255,91,.52),rgba(124,255,91,0));
}

/* portrait phones */
html[data-layout="mobile"] body{min-height:100svh}
html[data-layout="mobile"] .bar{
  height:calc(var(--safe-top) + 14px);
  background:linear-gradient(180deg,#010203 45%,rgba(1,2,3,.88));
}
html[data-layout="mobile"] .bar--bottom{
  height:calc(var(--safe-bottom) + 12px);
  background:linear-gradient(0deg,#010203 45%,rgba(1,2,3,.88));
}
html[data-layout="mobile"] .optics{
  background:
    radial-gradient(ellipse at 50% 43%,transparent 0 24%,rgba(0,0,0,.10) 55%,rgba(0,0,0,.56) 100%),
    linear-gradient(180deg,rgba(0,0,0,.12),transparent 18% 80%,rgba(0,0,0,.18));
}
html[data-layout="mobile"] .scene h1{
  font-size:clamp(42px,11.1vw,57px);
  line-height:.91;
  letter-spacing:-.058em;
  max-width:84vw;
}
html[data-layout="mobile"] .scene .answer{
  max-width:82vw;
  font-size:clamp(25px,7.05vw,35px);
  line-height:1.08;
  letter-spacing:-.041em;
}
html[data-layout="mobile"] .scene--act::before{
  top:47%;
  font-size:clamp(38px,21vw,96px);
  letter-spacing:-.075em;
  opacity:.03;
}
html[data-layout="mobile"] .answer--emphasis{font-size:clamp(32px,9vw,43px)!important}
html[data-layout="mobile"] .eyebrow{font-size:8px;letter-spacing:.16em}

/* portrait brand */
html[data-layout="mobile"] .brand-lockup,
html[data-layout="mobile"] .brand-lockup--opening{
  left:8.5vw;right:8.5vw;top:46%;transform:translateY(-50%);
}
html[data-layout="mobile"] .brand{
  font-size:clamp(82px,25vw,112px);
  line-height:.86;
  letter-spacing:-.075em;
}
html[data-layout="mobile"] .brand-line{margin-top:3.2vh}
html[data-layout="mobile"] .brand-sub{
  margin-top:14px;
  max-width:82vw;
  font-size:13px;
  line-height:1.4;
}
html[data-layout="mobile"] .brand-signoff{font-size:8px;line-height:1.5;max-width:82vw}

/* Mobile scene blocking */
html[data-layout="mobile"] .scene--01 h1{left:8vw;right:auto;top:22%;text-align:left}
html[data-layout="mobile"] .scene--01 .eyebrow{left:8.2vw;right:auto;top:16.8%}
html[data-layout="mobile"] .scene--01 .answer{left:auto;right:8vw;top:54%;text-align:right}

html[data-layout="mobile"] .scene--02 h1{left:auto;right:8vw;top:21%;text-align:right}
html[data-layout="mobile"] .scene--02 .eyebrow{left:auto;right:8.2vw;top:15.8%;text-align:right}
html[data-layout="mobile"] .scene--02 .answer{left:8vw;right:auto;top:55%;text-align:left}

html[data-layout="mobile"] .scene--03 h1{
  left:8vw;right:auto;top:20%;text-align:left;
  font-size:clamp(37px,9.4vw,49px)
}
html[data-layout="mobile"] .scene--03 .eyebrow{left:8.2vw;right:auto;top:14.8%}
html[data-layout="mobile"] .scene--03 .answer{
  left:8vw;right:8vw;top:54%;
  justify-content:flex-start;text-align:left;max-width:84vw!important;
  gap:.16em .36em;
}
html[data-layout="mobile"] .scene--03 .answer span{width:100%}

html[data-layout="mobile"] .scene--04 h1{left:8vw;right:auto;top:22%;text-align:left}
html[data-layout="mobile"] .scene--04 .eyebrow{left:8.2vw;right:auto;top:16.5%}
html[data-layout="mobile"] .scene--04 .answer{
  left:auto;right:8vw;top:52%;text-align:right;max-width:83vw
}

html[data-layout="mobile"] .scene--05 h1{
  left:auto;right:8vw;top:20%;text-align:right;
  font-size:clamp(39px,9.8vw,51px)
}
html[data-layout="mobile"] .scene--05 .eyebrow{left:auto;right:8.2vw;top:14.6%;text-align:right}
html[data-layout="mobile"] .scene--05 .answer{left:8vw;right:auto;top:56%;text-align:left}

html[data-layout="mobile"] .scene--06 h1{left:8vw;right:auto;top:21%;text-align:left}
html[data-layout="mobile"] .scene--06 .eyebrow{left:8.2vw;right:auto;top:15.5%}
html[data-layout="mobile"] .scene--06 .answer{left:auto;right:8vw;top:53%;text-align:right}

html[data-layout="mobile"] .scene--07 h1{
  left:auto;right:8vw;top:22%;text-align:right;
  font-size:clamp(39px,9.8vw,51px)
}
html[data-layout="mobile"] .scene--07 .eyebrow{left:auto;right:8.2vw;top:16.2%;text-align:right}
html[data-layout="mobile"] .scene--07 .answer{left:8vw;right:auto;top:55%;text-align:left}

html[data-layout="mobile"] .scene--certificate-copy h1{
  left:8vw;right:auto;top:20%;max-width:84vw;
  font-size:clamp(37px,9.3vw,48px);text-align:left
}
html[data-layout="mobile"] .scene--certificate-copy .eyebrow{left:8.2vw;right:auto;top:14.6%}
html[data-layout="mobile"] .scene--certificate-copy .answer{
  left:auto;right:8vw;top:55%;text-align:right;
  font-size:clamp(27px,7.5vw,36px)!important
}

/* portrait certificate */
html[data-layout="mobile"] .certificate{
  place-items:center;
  padding:calc(var(--safe-top) + 18px) 6vw calc(var(--safe-bottom) + 18px);
}
html[data-layout="mobile"] .certificate__frame{
  width:88vw;
  min-height:0;
  max-height:86svh;
  padding:26px 22px 21px;
  overflow:hidden;
  border-top-color:rgba(183,229,236,.30);
  background:
    linear-gradient(180deg,rgba(5,10,13,.90),rgba(2,5,7,.84)),
    radial-gradient(circle at 50% 27%,rgba(64,185,205,.07),transparent 31%);
}
html[data-layout="mobile"] .certificate__header{display:block}
html[data-layout="mobile"] .certificate__identity{
  display:flex;justify-content:space-between;align-items:flex-start
}
html[data-layout="mobile"] .certificate__id{
  margin-top:0;
  font-family:"Space Mono",monospace;
  font-size:10px;
  letter-spacing:.12em;
}
html[data-layout="mobile"] .certificate__authority{
  align-items:flex-start;
  margin-top:25px;
}
html[data-layout="mobile"] .certificate__authority strong{
  margin-top:10px;
  font-size:clamp(48px,13vw,64px);
  line-height:.82;
}
html[data-layout="mobile"] .certificate__rule{margin:22px 0 20px}
html[data-layout="mobile"] .certificate__body{
  display:flex;
  flex-direction:column;
  gap:19px;
}
html[data-layout="mobile"] .certificate__math{
  display:grid;
  grid-template-columns:112px 1fr;
  gap:18px;
  align-items:center;
  order:-1;
}
html[data-layout="mobile"] .certificate__seal{width:112px;height:112px}
html[data-layout="mobile"] .math-grid{font-size:7px;gap:6px 14px}
html[data-layout="mobile"] .certificate__enterprise{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 20px;
}
html[data-layout="mobile"] .certificate__enterprise .certificate__section-label{grid-column:1/-1}
html[data-layout="mobile"] .cert-row{
  display:block;
  min-height:48px;
  padding:8px 0;
  font-size:10px;
}
html[data-layout="mobile"] .cert-row span,
html[data-layout="mobile"] .cert-row strong{display:block}
html[data-layout="mobile"] .cert-row strong{margin-top:5px;font-size:7px}
html[data-layout="mobile"] .certificate__footer{
  margin-top:19px;
  padding-top:13px;
  font-size:6.5px;
  line-height:1.45;
}

/* HUD nearly disappears on portrait */
html[data-layout="mobile"] .hud{
  font-size:6px;
  gap:9px;
  opacity:.28!important;
}
html[data-layout="mobile"] .hud--tl,
html[data-layout="mobile"] .hud--tr{top:calc(var(--safe-top) + 17px)}
html[data-layout="mobile"] .hud--bl,
html[data-layout="mobile"] .hud--br{bottom:calc(var(--safe-bottom) + 17px)}
html[data-layout="mobile"] .hud--tl,
html[data-layout="mobile"] .hud--bl{left:4.5vw}
html[data-layout="mobile"] .hud--tr,
html[data-layout="mobile"] .hud--br{right:4.5vw}

/* landscape phones remain mobile-directed */
html[data-layout="mobile-landscape"] .scene h1{font-size:clamp(38px,6.7vw,54px)}
html[data-layout="mobile-landscape"] .scene .answer{font-size:clamp(23px,3.5vw,31px)}
html[data-layout="mobile-landscape"] .brand{font-size:clamp(80px,17vw,132px)}
html[data-layout="mobile-landscape"] .certificate__frame{width:82vw;transform:scale(.86)}

/* tablet middle state */
html[data-layout="tablet"] .scene h1{font-size:clamp(54px,7vw,76px)}
html[data-layout="tablet"] .scene .answer{font-size:clamp(28px,3.5vw,38px);max-width:64vw}
html[data-layout="tablet"] .certificate__frame{width:84vw}

@media (hover:none) and (pointer:coarse){
  .grain{opacity:.026}
}