:root {
--cream: #F3F1E5;
--ink: #1D1D1D;
--purple: #845CE0;
--lav: #B99DF9;
--lav-soft: #b99df93d;
--sand: #E7E3CC;
--sand2: #D8D4BB;
--plum: #2C0929;
--men: #18618F;
--men-bg: #EBF5FD;
--grey: #EDEDED;
--muted: #1d1d1d99;
--white: #fff;
--opaque: #000;
--band: 52px;
--nav: 56px;
--top: calc(var(--band) + var(--nav));
--stage: calc(100svh - var(--band) - var(--nav));
--g: clamp(20px, 2.674vw, 40px);
--fluid: cubic-bezier(.6, 0, .15, 1);
--hover: cubic-bezier(.6, 0, .2, 1);
--curtain: cubic-bezier(.61, 0, .2, 1);
--sw: "Switzer", ui-sans-serif, system-ui, sans-serif;
--mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
--lato: "Lato", ui-sans-serif, system-ui, sans-serif;
--hero-h: max(540px, var(--stage));
--lw: 3px;
--lift: 0px;
--foot-b: 40px;
--thread-k: .408;
--thread-y: calc(var(--hero-h) * var(--thread-k));
}
@media (max-width: 560px) {
:root {
--band: 44px;
--lw: 2px;
--foot-b: 24px;
--trp: 0px;
--hero-h: max(calc(600px + var(--lift)), var(--stage));
--hero-av: calc(var(--hero-h) - var(--foot-b) - var(--lift) - 364px);
--thread-y: calc(var(--hero-av) / 2);
}
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: var(--top);
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--sw);
font-size: 16px;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; font: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
.vh {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: clip;
clip-path: inset(50%);
white-space: nowrap;
}
.w { display: inline-block; }
.mono-label {
font: 500 12px/1 var(--mono);
letter-spacing: .02em;
text-transform: uppercase;
}
.mono-note {
font: 400 11px/1.45 var(--mono);
letter-spacing: .02em;
color: var(--muted);
}
.tag {
display: inline-block;
padding: 5px 7px 4px;
border-radius: 2px;
background: var(--tag-bg);
color: var(--tag-fg);
font: 500 12px/1 var(--mono);
letter-spacing: .02em;
white-space: nowrap;
}
.tier-chip {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 8px;
border-radius: 3px;
background: var(--accent);
color: var(--accent-fg);
font: 500 11px/1 var(--mono);
letter-spacing: .03em;
text-transform: uppercase;
white-space: nowrap;
}
.mention {
padding: 0 3px;
border-radius: 3px;
background: var(--men-bg);
color: var(--men);
}
@media (max-width: 560px) {
.mono-note, .tier-chip { font-size: 12px; }
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 24px;
border: 1px solid transparent;
border-radius: 2px;
font-size: 16px;
font-weight: 500;
letter-spacing: -.02em;
line-height: 1;
white-space: nowrap;
transition: background-color .36s var(--hover), border-color .36s var(--hover);
}
.btn-s { height: 40px; font-size: 14px; }
.btn-fill { background: var(--btn-bg); color: var(--btn-fg); }
.btn-fill:hover, .btn-fill:focus-visible { background: var(--btn-bg-h); }
.btn-line { border-color: var(--btn2-bd); background: var(--btn2-bg); }
.btn-line:hover, .btn-line:focus-visible { border-color: var(--btn2-bd-h); background: var(--btn2-bg-h); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lf {
position: relative;
display: inline-block;
overflow: clip;
overflow-clip-margin: 1px;
vertical-align: top;
line-height: 1.2;
}
.lf-f { display: block; }
.lf-a { display: block; white-space: nowrap; }
.lf-b { position: absolute; inset: 0; white-space: nowrap; }
.l {
display: inline-block;
white-space: pre;
transition: translate .45s var(--hover);
transition-delay: calc(var(--i) * 20ms);
}
.lf-b .l { translate: 0 calc(100% + 2px); }
a:hover .lf-a .l, a:focus-visible .lf-a .l { translate: 0 calc(-100% - 2px); }
a:hover .lf-b .l, a:focus-visible .lf-b .l { translate: 0 0; }
.mark { width: 22px; height: 12px; color: var(--mark); flex: none; }
.mark path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mark-w { color: var(--mark-w); }
.mark-ink { color: var(--text); }
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--band);
background: var(--bg);
z-index: 2147482999;
pointer-events: none;
}
.nav {
position: sticky;
top: var(--band);
z-index: 50;
height: var(--nav);
background: var(--nav-bg);
-webkit-backdrop-filter: var(--nav-fx);
backdrop-filter: var(--nav-fx);
box-shadow: 0 1px 0 var(--nav-bd);
animation: navin .6s var(--fluid) 3.2s both;
}
.nav-in {
height: 100%;
display: flex;
align-items: center;
padding: 0 var(--g);
}
.logo {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 23px;
font-weight: 600;
letter-spacing: -.045em;
line-height: 1;
}
.logo .mark { width: 25px; height: 14px; }
.nav-links {
display: flex;
gap: 48px;
margin-left: auto;
margin-right: 24px;
}
.nl {
font-size: 14px;
font-weight: 500;
letter-spacing: -.02em;
color: var(--muted);
transition: color .36s var(--hover);
}
.nl:hover, .nl:focus-visible { color: var(--text); }
.nav-cta { display: flex; gap: 8px; }
@media (max-width: 900px) {
.nav-links { display: none; }
.nav-cta { margin-left: auto; }
}
@media (max-width: 560px) {
.nav-sample { display: none; }
.nav-cta .btn { height: 44px; padding: 0 16px; }
}
.intro {
position: absolute;
top: var(--band);
left: 0;
right: 0;
height: calc(100svh - var(--band));
z-index: 60;
pointer-events: none;
visibility: hidden;
animation: introvis 3.05s linear;
}
.intro-back, .intro-front {
position: absolute;
inset: 0;
transform-origin: 50% calc(var(--nav) + var(--thread-y) + var(--lw) / 2);
}
.intro-back { background: var(--intro2); animation: curtain .62s var(--curtain) 2.4s both; }
.intro-front { background: var(--intro); animation: curtain .68s var(--curtain) 2.3s both; }
.intro::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: calc(var(--nav) + var(--thread-y));
height: var(--lw);
background: var(--intro-ln);
box-shadow: var(--line-glow);
-webkit-mask-image: var(--fade-x);
mask-image: var(--fade-x);
animation: iline 1.5s var(--curtain) .35s both;
}
.hero {
position: relative;
height: var(--hero-h);
overflow: clip;
view-timeline: --hero block;
view-timeline-inset: var(--top) 0;
}
.hero-line {
position: absolute;
left: 0;
right: 0;
top: var(--thread-y);
height: var(--lw);
background: var(--ln-a);
box-shadow: var(--line-glow);
-webkit-mask-image: var(--fade-x);
mask-image: var(--fade-x);
}
.threads {
--tw: clamp(360px, 55.6vw, 800px);
position: absolute;
left: 0;
top: calc(var(--thread-y) + var(--lw) / 2 - var(--tw) / 4);
width: var(--tw);
height: calc(var(--tw) / 2);
-webkit-mask-image: var(--fade-l);
mask-image: var(--fade-l);
animation: drift linear both;
animation-timeline: --hero;
animation-range: exit 0% exit 100%;
}
.threads svg { width: 100%; height: 100%; overflow: visible; }
.threads path, .threads circle { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.threads .tg {
transform-box: view-box;
transform-origin: 520px 200px;
animation: grow 1.85s var(--fluid) 3s both;
}
.threads .ts {
color: var(--ln-a);
stroke-dasharray: 1 1;
animation: draw 1.29s cubic-bezier(.45, 0, .2, 1) both;
animation-delay: calc(3s + var(--k) * 80ms);
}
.threads .ts2 { color: var(--line2, var(--ln-a)); }
.threads .ts3 { color: var(--line3, var(--ln-a)); }
.threads .tsh { stroke-width: 11; stroke-opacity: var(--halo-o); }
.threads .tf { fill: var(--bg); stroke: none; animation: tfill .45s linear 4.58s backwards; }
.threads .tl {
color: var(--ln-a);
stroke-dasharray: 1 1;
animation: draw .65s cubic-bezier(.45, 0, .2, 1) 4.38s both;
}
.threads .te { color: var(--ln-eye); }
.threads .topen, .threads .tblink { transform-box: fill-box; transform-origin: 50% 50%; }
.threads .topen { animation: eopen .6s var(--fluid) 5.53s both; }
.threads .tblink { animation: blink 6.6s linear 6.2s infinite; }
.threads .tlook { --eu: 21.667; animation: look 11s cubic-bezier(.55, 0, .25, 1) 6.6s infinite; }
@media (max-width: 1100px) {
.threads path, .threads circle { stroke-width: 3.4; }
.threads .tsh { stroke-width: 12; }
}
@media (max-width: 700px) {
.threads path, .threads circle { stroke-width: 4.6; }
.threads .tsh { stroke-width: 14; }
}
@media (max-width: 560px) {
.threads {
--tw: min(123vw, 546px, calc((var(--hero-av) - 48px) * 2.2727));
left: calc(100% - 30px - .975 * var(--tw));
-webkit-mask-size: calc(100vw - 30px + .025 * var(--tw)) 100%;
mask-size: calc(100vw - 30px + .025 * var(--tw)) 100%;
-webkit-mask-position: right;
mask-position: right;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.threads path, .threads circle { stroke-width: 3.4; }
.threads .tsh { stroke-width: 12; }
}
.hero-foot {
position: absolute;
left: var(--g);
right: var(--g);
bottom: calc(var(--foot-b) + var(--lift));
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 458px);
column-gap: 40px;
align-items: end;
}
.hero-h {
font-size: clamp(40px, 3.83vw, 55.2px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.04em;
max-width: 12em;
}
.hero-h .w { animation: rw .45s var(--fluid) both; animation-delay: calc(3.4s + var(--i) * 60ms); }
.hero-sub {
font-size: 20px;
line-height: 26px;
letter-spacing: -.01em;
animation: await .6s var(--fluid) 3.65s both;
}
.hero-btns { display: flex; gap: 16px; margin-top: 24px; animation: await .6s var(--fluid) 3.75s both; }
.hero-btns .btn { flex: 1 1 0; }
.hero-note { margin-top: 14px; animation: await .6s var(--fluid) 3.82s both; }
@media (max-width: 860px) {
.hero-foot { grid-template-columns: 1fr; row-gap: 20px; }
.hero-sub { font-size: 18px; line-height: 24px; }
}
@media (max-width: 560px) {
.hero-btns { flex-direction: column; gap: 12px; margin-top: 20px; }
.hero-btns .btn { flex: none; }
}
@property --n { syntax: "<integer>"; inherits: false; initial-value: 7; }
@property --on { syntax: "<number>"; inherits: true; initial-value: 1; }
.trail {
position: relative;
height: 480svh;
background: var(--sec-trail);
view-timeline: --trail block;
view-timeline-inset: var(--top) 0;
}
.tr-stage {
position: sticky;
top: var(--top);
height: var(--stage);
overflow: clip;
}
.tr-half {
position: absolute;
top: calc(48% - .55em);
font-size: clamp(30px, 3.21vw, 46.2px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.04em;
white-space: nowrap;
}
.tr-l { right: 50%; }
.tr-r { left: 50%; }
.tr-t { display: block; }
.tr-t2, .tr-t3 { position: absolute; top: 0; }
.tr-l .tr-t2 { right: 0; }
.tr-r .tr-t2, .tr-r .tr-t3 { left: 0; }
.tr-l, .tr-r, .tr-t, .rcard, .rx, .rx-in, .cnt, .tp {
animation-timing-function: linear;
animation-fill-mode: both;
}
.tr-l { animation-name: trL; }
.tr-r { animation-name: trR; }
.tr-l .tr-t1, .tr-r .tr-t1 { animation-name: tOut; }
.tr-l .tr-t2 { animation-name: tIn; }
.tr-r .tr-t2 { animation-name: tInOut; }
.tr-r .tr-t3 { animation-name: tIn; }
.tr-l, .tr-r, .tr-t, .rcard, .rx, .rx-in, .cnt, .tp {
animation-timeline: --trail;
animation-range: contain 0% contain 100%;
}
.tr-l .tr-t1, .tr-r .tr-t1 { animation-range: contain 44% contain 48%; }
.tr-l .tr-t2 { animation-range: contain 46.5% contain 52%; }
.tr-r .tr-t2 { animation-range: contain 46.5% contain 70%; }
.tr-r .tr-t3 { animation-range: contain 68.5% contain 74%; }
.tr-cards {
position: absolute;
left: 50%;
top: 50%;
width: min(438px, 30.4vw);
height: 0;
margin-left: calc(min(438px, 30.4vw) / -2);
}
.tr-slot {
--s: 1;
--o: 1;
--bl: 0px;
--se: .92;
position: absolute;
left: 0;
right: 0;
top: -46px;
height: 92px;
animation-name: trRise, trConv;
animation-timing-function: cubic-bezier(.3, 0, .2, 1), cubic-bezier(.5, 0, .3, 1);
animation-fill-mode: both, forwards;
animation-timeline: --trail, --trail;
animation-range: contain calc(9% + var(--j) * 1.5%) contain calc(19% + var(--j) * 1.5%), contain 34% contain 43%;
}
.tr-post { top: -58px; height: 116px; }
.tr-slot:nth-child(1), .tr-slot:nth-child(5) { --s: .86; --o: .55; --bl: 1.5px; --se: .84; }
.tr-slot:nth-child(1) { --j: 0; --y: -246px; }
.tr-slot:nth-child(2) { --j: 1; --y: -132px; }
.tr-slot:nth-child(3) { --j: 2; --y: 0px; }
.tr-slot:nth-child(4) { --j: 3; --y: 132px; }
.tr-slot:nth-child(5) { --j: 4; --y: 246px; }
.tcard {
height: 100%;
padding: 14px 18px;
border-radius: 6px;
background: var(--card-solid);
outline: 1px solid var(--card-bd);
outline-offset: -1px;
font-family: var(--lato);
}
.tcard-top {
display: flex;
justify-content: space-between;
gap: 12px;
font: 500 10.5px/1 var(--mono);
letter-spacing: .04em;
color: rgba(var(--ink-rgb), .5);
}
.tcard-top > span:first-child { display: flex; align-items: center; color: var(--accent); }
.mchip {
display: grid;
place-items: center;
flex: none;
width: 17px;
height: 17px;
margin: -3.25px 7px -3.25px 0;
border-radius: 4px;
font: 500 8.5px/1 var(--mono);
letter-spacing: .02em;
}
.mc-sand { background: var(--chip-sand); color: var(--text); }
.mc-cream { background: var(--chip-cream); color: var(--text); box-shadow: inset 0 0 0 1px var(--rule2); }
.mc-lav { background: var(--soft); color: var(--soft-ink); }
.mc-plum { background: var(--chip-deep); color: var(--chip-deep-fg); }
.tcard-who { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.tcard-txt { flex: 1; min-width: 0; }
.tcard-who .tcard-main { margin-top: 0; }
.tr-post .tcard-who { align-items: flex-start; margin-top: 10px; }
.tpost-by { font-size: 13px; font-weight: 700; line-height: 16px; }
.tpost-text {
margin-top: 2px;
font-size: 15px;
line-height: 19px;
white-space: nowrap;
overflow: clip;
text-overflow: ellipsis;
}
.tpost-rep {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
font-size: 12.5px;
font-weight: 700;
line-height: 22px;
color: var(--accent);
}
.av {
display: block;
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 0 1px var(--av-ring);
}
.av-fb { display: grid; place-items: center; font: 600 13px/1 var(--sw); color: var(--white); }
.av-face-you { background: linear-gradient(135deg, var(--purple), var(--plum) 160%); }
.av-face-them { background: linear-gradient(135deg, var(--plum), var(--purple) 180%); }
.av-face-friend { background: linear-gradient(135deg, var(--sand2), var(--lav)); color: var(--plum); }
.av-stack { display: flex; }
.av-stack .av { width: 22px; height: 22px; box-shadow: 0 0 0 2px var(--av-cut), 0 0 0 3px var(--av-ring); font-size: 10px; }
.av-stack .av + .av { margin-left: -7px; }
.tcard-main {
margin-top: 12px;
font-size: 16px;
font-weight: 700;
line-height: 20px;
white-space: nowrap;
overflow: clip;
text-overflow: ellipsis;
}
.tcard-meta {
margin-top: 4px;
font-size: 13px;
line-height: 17px;
color: rgba(var(--ink-rgb), .6);
white-space: nowrap;
overflow: clip;
text-overflow: ellipsis;
}
.rcard {
position: absolute;
left: 50%;
top: 50%;
width: min(522px, 36.3vw);
transform: translate(-50%, -50%);
border-radius: 6px;
overflow: clip;
background: var(--rcard-bg);
outline: 1px solid var(--rcard-bd);
outline-offset: -1px;
font-family: var(--lato);
animation-name: trCard;
}
.rcard-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
height: 50px;
padding: 0 18px;
background: var(--head-bg);
color: var(--head-fg);
}
.rcard-title {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--sw);
font-size: 19px;
font-weight: 500;
letter-spacing: -.02em;
}
.rcard-wallet {
font: 400 10.5px/1 var(--mono);
letter-spacing: .03em;
color: var(--head-fg2);
white-space: nowrap;
}
.rcard-body { padding: 16px 18px 18px; }
.rmsg { display: flex; gap: 12px; }
.ravatar {
display: grid;
place-items: center;
flex: none;
width: 30px;
height: 30px;
border-radius: 4px;
background: var(--ravatar);
}
.ravatar .mark { width: 17px; height: 10px; }
.rmeta {
display: flex;
align-items: center;
gap: 7px;
font-size: 15.4px;
line-height: 20px;
}
.rmeta b { font-weight: 700; }
.rchip {
padding: 2px 4px 1px;
border-radius: 2px;
background: var(--fill);
font-size: 9.6px;
font-weight: 700;
letter-spacing: .04em;
color: rgba(var(--ink-rgb), .66);
}
.rtime { font-size: 11.5px; color: rgba(var(--ink-rgb), .5); }
.rline { margin-top: 3px; font-size: 15.4px; line-height: 20px; }
.rx { max-height: 340px; overflow: clip; animation-name: trX; }
.rx-in { padding: 14px 0 0 42px; animation-name: trXin; }
.rscore {
display: flex;
align-items: center;
gap: 12px;
padding-top: 14px;
border-top: 1px solid var(--rule);
}
.rscore-n {
font-family: var(--sw);
font-size: 30px;
font-weight: 600;
letter-spacing: -.03em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.cnt { counter-reset: n calc(var(--n)); animation-name: cnt; }
.cnt::after { content: counter(n); }
.rreply { display: flex; gap: 10px; margin-top: 12px; font-size: 14.5px; line-height: 19px; }
.rr-ic, .tick { display: inline-grid; place-items: center; flex: none; }
.rr-ic { width: 18px; height: 19px; }
.rr-ic svg, .tick svg, .chip svg { width: 12px; height: 12px; }
.ico path { fill: none; stroke: var(--ln-b); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tr-prog {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
display: flex;
justify-content: center;
gap: 48px;
padding: 72px 0 26px;
background: linear-gradient(to top, var(--sec-trail) 50%, var(--sec-trail-0));
font: 500 12px/1 var(--mono);
letter-spacing: .02em;
}
.tp { position: relative; color: rgba(var(--ink-rgb), calc(.42 + .58 * var(--on))); }
.tp::before {
content: "";
position: absolute;
left: -14px;
top: 50%;
width: 4px;
height: 4px;
margin-top: -2px;
background: var(--tp-dot);
box-shadow: var(--tp-glow);
opacity: var(--on);
}
.tp1 { animation-name: tp1; animation-range: contain 0% contain 44%; }
.tp2 { animation-name: tpMid; animation-range: contain 43.8% contain 66.2%; }
.tp3 { animation-name: tp3; animation-range: contain 66% contain 100%; }
@keyframes trL {
0%, 8% { transform: translateX(-2.062em); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
22%, 100% { transform: translateX(-22.08vw); }
}
@keyframes trR {
0%, 8% { transform: translateX(-1.79em); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
22%, 100% { transform: translateX(22.08vw); }
}
@keyframes tOut {
from { opacity: 1; filter: blur(0px); transform: none; }
to { opacity: 0; filter: blur(6px); transform: translateY(-.15em); }
}
@keyframes tIn {
from { opacity: 0; filter: blur(.1em); transform: translateY(.1875em); }
to { opacity: 1; filter: blur(0px); transform: none; }
}
@keyframes tInOut {
0% { opacity: 0; filter: blur(.1em); transform: translateY(.1875em); }
23.4%, 84.4% { opacity: 1; filter: blur(0px); transform: none; }
100% { opacity: 0; filter: blur(6px); transform: translateY(-.15em); }
}
@keyframes trRise {
from { opacity: 0; transform: translateY(calc(60vh + var(--y))) scale(var(--s)); filter: blur(var(--bl)); }
to { opacity: var(--o); transform: translateY(var(--y)) scale(var(--s)); filter: blur(var(--bl)); }
}
@keyframes trConv {
from { opacity: var(--o); transform: translateY(var(--y)) scale(var(--s)); filter: blur(var(--bl)); }
to { opacity: 0; transform: translateY(0px) scale(var(--se)); filter: blur(10px); }
}
@keyframes trCard {
0%, 35% { opacity: 0; transform: translate(-50%, -50%) scale(.9); filter: blur(16px); }
42%, 45% { opacity: .55; transform: translate(-50%, -50%) scale(.96); filter: blur(8px); }
52%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0px); }
}
@keyframes trX {
0%, 64% { max-height: 0px; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
74%, 100% { max-height: 340px; }
}
@keyframes trXin {
0%, 67% { opacity: 0; transform: translateY(10px); }
75%, 100% { opacity: 1; transform: none; }
}
@keyframes cnt {
0%, 70% { --n: 100; }
86%, 100% { --n: 7; }
}
@keyframes tp1 { 0%, 99.6% { --on: 1; } 100% { --on: 0; } }
@keyframes tpMid { 0% { --on: 0; } .6%, 99.4% { --on: 1; } 100% { --on: 0; } }
@keyframes tp3 { 0% { --on: 0; } .6%, 100% { --on: 1; } }
@media (max-width: 560px) {
.trail { height: 420svh; }
.tr-half { left: 0; right: 0; text-align: center; font-size: 34px; }
.tr-l { top: calc(47% - 1.1em); animation-name: trLm; }
.tr-r { top: 47%; z-index: 2; animation-name: trRm; }
.tr-r::before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
top: -10px;
height: 100vh;
background: linear-gradient(var(--sec-trail-0), var(--sec-trail) 10px);
}
.tr-l .tr-t2, .tr-r .tr-t2, .tr-r .tr-t3 { left: 0; right: 0; }
.tr-cards { top: calc(46% - var(--trp) / 2); width: min(360px, calc(100vw - 40px)); margin-left: calc(min(360px, calc(100vw - 40px)) / -2); }
.tr-slot {
--sd: min(211.5px, calc(var(--stage) * .36 - var(--trp) / 2 - 52.5px));
top: -45px;
height: 90px;
animation-range: contain calc(14% + var(--j) * 1%) contain calc(22% + var(--j) * 1%), contain 34% contain 43%;
}
.tr-post { top: -57px; height: 114px; }
.tr-slot:nth-child(1), .tr-slot:nth-child(5) { --s: .9; --se: .86; }
.tr-slot:nth-child(1) { --y: calc(var(--sd) * -1); }
.tr-slot:nth-child(2) { --y: -114px; }
.tr-slot:nth-child(3) { --y: 0px; }
.tr-slot:nth-child(4) { --y: 114px; }
.tr-slot:nth-child(5) { --y: var(--sd); z-index: -1; }
.tcard { padding: 13px 16px; }
.tcard-top { font-size: 12px; }
.mchip { margin-block: -2.5px; }
.tcard-main { margin-top: 10.5px; }
.tr-post .tcard-who { margin-top: 8.5px; }
.rcard { top: calc(46% - var(--trp) / 2); width: calc(100vw - 32px); }
.rcard-head { flex-wrap: wrap; row-gap: 3px; height: auto; min-height: 46px; padding: 8px 14px; }
.rcard-title { font-size: 17px; }
.rcard-wallet { font-size: 12px; }
.rcard-body { padding: 14px; }
.rchip, .rtime { font-size: 12px; }
.rreply { font-size: 15px; }
.rx-in { padding-left: 0; }
.tr-prog { z-index: 3; gap: 36px; padding-bottom: 20px; }
}
@keyframes trLm {
0%, 8% { transform: translateY(0px); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
22%, 100% { transform: translateY(calc((100svh - 100px) * -.37)); }
}
@keyframes trRm {
0%, 8% { transform: translateY(0px); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
22%, 100% { transform: translateY(calc((100svh - 100px) * .35 - var(--trp))); }
}
.bridge {
position: relative;
padding: 216px var(--g) 252px;
text-align: center;
overflow: clip;
view-timeline: --bridge block;
}
.bridge-h {
position: relative;
font-size: clamp(32px, 3.3vw, 47.6px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.04em;
}
.bridge-h .w {
animation: rw linear both;
animation-timeline: --bridge;
animation-range: entry calc(35% + var(--i) * 6%) entry calc(65% + var(--i) * 6%);
}
.bundle {
position: absolute;
top: calc(50% + 34px);
width: min(340px, 23.6vw);
aspect-ratio: 340 / 120;
}
.bundle-l { left: 0; }
.bundle-r { right: 0; transform: scaleX(-1); }
.bundle svg { width: 100%; height: 140%; margin-top: -7.06%; overflow: visible; }
.bundle path {
fill: none;
stroke: var(--ln-a);
stroke-width: 1.6;
stroke-dasharray: 1 1;
animation: draw linear both;
animation-timeline: --bridge;
animation-range: cover calc(18% + var(--k) * 2.5%) cover calc(42% + var(--k) * 2.5%);
}
@media (max-width: 560px) {
.bridge { padding: 150px var(--g) 190px; }
.bundle { width: 30vw; top: calc(50% + 46px); }
.bundle path { stroke-width: 2.4; }
}
.how { padding: 112px var(--g) 150px; }
.how-label { margin-bottom: 72px; }
.step {
display: grid;
grid-template-columns: minmax(0, 1fr) min(554px, 40vw) minmax(0, 1fr);
column-gap: clamp(24px, 4.1vw, 59px);
view-timeline: --st block;
}
.step-h, .step-d { padding-top: 34px; }
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 25px;
min-width: 31px;
padding: 0 6px;
border-radius: 2px;
background: var(--tag-bg);
color: var(--tag-fg);
font: 500 14px/1 var(--mono);
}
.step-h h3 {
margin-top: 16px;
max-width: 9em;
font-size: clamp(28px, 2.75vw, 39.6px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.04em;
}
.step-d {
max-width: 344px;
font-size: clamp(17px, 1.38vw, 19.9px);
line-height: 1.3;
letter-spacing: -.01em;
}
.step-h, .step-d, .lrow {
animation: await linear both;
animation-timeline: --st;
animation-range: entry 8% entry 42%;
}
.lrow { animation-range: entry calc(30% + var(--i) * 7%) entry calc(52% + var(--i) * 7%); }
.panel {
padding: 20px 22px 22px;
border-radius: 8px;
background: var(--card);
outline: 1px solid var(--card-bd);
outline-offset: -1px;
font-family: var(--lato);
animation: cardin linear both;
animation-timeline: --st;
animation-range: entry 0% entry 34%;
}
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-title { font-family: var(--sw); font-size: 19.24px; font-weight: 500; letter-spacing: -.02em; }
.pchip {
padding: 4px 7px;
border-radius: 3px;
background: var(--soft);
color: var(--accent);
font-size: 12px;
font-weight: 700;
}
.sigbox {
display: grid;
gap: 4px;
margin-top: 16px;
padding: 14px 16px;
border: 1px solid var(--rule);
border-radius: 6px;
background: var(--card-2);
font: 400 12px/1.55 var(--mono);
}
.sigbox p:last-child { color: rgba(var(--ink-rgb), .55); }
.panel-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.panel-btns-l { justify-content: flex-start; margin-top: 18px; }
.pbtn {
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 12px;
border: 1px solid transparent;
border-radius: 3px;
font-family: var(--sw);
font-size: 12.5px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.pbtn-line { border-color: var(--rule2); }
.pbtn-fill { background: var(--btn-bg); color: var(--btn-fg); }
.pbtn-text { padding: 0 6px; color: rgba(var(--ink-rgb), .6); }
.pbtn-soft { background: var(--soft); color: var(--accent); }
.tabs { display: flex; gap: 20px; margin-top: 12px; border-bottom: 1px solid var(--rule); }
.tab {
position: relative;
padding: 8px 0 10px;
font-family: var(--sw);
font-size: 13.5px;
font-weight: 500;
color: rgba(var(--ink-rgb), .55);
}
.tab.on { color: var(--text); }
.tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.tab i {
margin-left: 4px;
padding: 2px 4px;
border-radius: 3px;
background: var(--soft);
color: var(--accent);
font: 500 9.6px/1 var(--mono);
font-style: normal;
vertical-align: 1px;
}
.prow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 0;
border-bottom: 1px solid var(--rule);
}
.prow:last-child { border-bottom: 0; padding-bottom: 2px; }
.prow-t { display: flex; align-items: center; font-size: 15.5px; line-height: 20px; }
.prow-b { display: flex; gap: 4px; flex: none; }
.tick {
width: 1.05em;
height: 1em;
margin-right: .5em;
overflow: clip;
animation: nudge linear both;
animation-timeline: --st;
animation-range: entry calc(32% + var(--i) * 9%) entry calc(52% + var(--i) * 9%);
}
.pscore { display: flex; align-items: baseline; gap: 10px; padding: 16px 0 10px; }
.pscore-n { font-family: var(--sw); font-size: 56px; font-weight: 600; line-height: .9; letter-spacing: -.04em; }
.pscore-of { font-size: 14px; color: rgba(var(--ink-rgb), .6); }
.pscore .tier-chip { align-self: center; margin-left: auto; }
.lrow {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 11px 0;
border-top: 1px solid var(--rule);
font-size: 15px;
line-height: 20px;
}
.pts { font: 500 12.5px/20px var(--mono); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
display: inline-flex;
align-items: center;
gap: 7px;
height: 30px;
padding: 0 11px 0 9px;
border: 1px solid var(--rule2);
border-radius: 3px;
background: var(--chip-bg);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
animation: chipin linear both;
animation-timeline: --st;
animation-range: entry calc(36% + var(--i) * 7%) entry calc(54% + var(--i) * 7%);
}
.fork { height: 260px; view-timeline: --fk block; }
.fork svg { width: 160px; height: 260px; margin: 0 auto; overflow: visible; }
.fork path {
fill: none;
stroke: var(--ln-a);
stroke-width: 2;
stroke-dasharray: 1 1;
animation: draw linear both;
animation-timeline: --fk;
animation-range: cover calc(8% + var(--k) * 10%) cover calc(36% + var(--k) * 10%);
}
.step:last-child .step-c { padding-bottom: 8px; }
@media (max-width: 900px) {
.step { grid-template-columns: 1fr; grid-template-areas: "h" "d" "c"; }
.step-h { grid-area: h; padding-top: 0; }
.step-d { grid-area: d; padding-top: 16px; max-width: 34em; }
.step-c { grid-area: c; margin-top: 28px; }
.fork { height: 120px; }
.fork svg { height: 120px; }
.how-label { margin-bottom: 48px; }
}
@media (max-width: 560px) {
.how { padding: 88px var(--g) 110px; }
.panel { padding: 16px; }
.prow { flex-wrap: wrap; row-gap: 6px; }
.prow-t { font-size: 15px; }
.pscore-n { font-size: 48px; }
.tab { padding: 12px 0 14px; }
.tab i { font-size: 12px; }
.pbtn { height: 44px; border-width: 4px 1px; border-color: transparent; border-radius: 7px; background-clip: padding-box; }
.pbtn-line { border-color: transparent; box-shadow: inset 0 0 0 1px var(--rule2); }
}
.why {
position: relative;
height: 620svh;
background: var(--sec-why);
view-timeline: --why block;
view-timeline-inset: var(--top) 0;
}
.why-stage { position: sticky; top: var(--top); height: var(--stage); overflow: clip; }
.why-st {
position: absolute;
inset: 0;
--wa: none;
animation: stIn linear backwards, stOut linear forwards, waOn linear;
animation-timeline: --why, --why, --why;
animation-range:
contain calc(var(--t) - .3%) contain calc(var(--t) + .1%),
contain calc(var(--u) - .45%) contain calc(var(--u) - .05%),
contain calc(var(--t) - .3%) contain calc(var(--u) - .05%);
}
.why-s0 {
--t: 0%;
--u: 17.5%;
animation-name: none, stOut, waOn;
animation-range: contain 0% contain .1%, contain calc(var(--u) - .45%) contain calc(var(--u) - .05%), entry 55% contain calc(var(--u) - .05%);
}
.why-s1 { --t: 17.5%; --u: 34%; }
.why-s2 { --t: 34%; --u: 50.5%; }
.why-s3 { --t: 50.5%; --u: 67%; }
.why-s4 { --t: 67%; --u: 83.5%; }
.why-s5 {
--t: 83.5%;
--u: 100%;
animation-name: stIn, none, waOn;
animation-range: contain calc(var(--t) - .3%) contain calc(var(--t) + .1%), contain 99% contain 100%, contain calc(var(--t) - .3%) exit 100%;
}
.why-art { position: absolute; left: 0; right: 0; top: 0; height: 72%; display: var(--wa); }
.why-art svg { width: 100%; height: 100%; }
.why-art .art-m { display: none; }
.why-art path, .why-art circle { fill: none; stroke: var(--ln-b); stroke-width: 2; }
.why-art .dp {
stroke-dasharray: 1 1;
animation: draw var(--dd) cubic-bezier(.45, 0, .2, 1) var(--dl) both;
}
.why-statement, .why-h h3 {
font-size: clamp(30px, 3.27vw, 47px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.04em;
}
.why-statement { position: absolute; left: var(--g); bottom: calc(40px + var(--lift)); max-width: min(15.5em, 62vw); }
.why-h { position: absolute; left: var(--g); bottom: calc(40px + var(--lift)); max-width: min(13.5em, 50vw); font-size: clamp(30px, 3.27vw, 47px); }
.why-h .tag { margin-bottom: 18px; }
.why-h h3 { font-size: 1em; }
.why-d {
position: absolute;
right: var(--g);
bottom: calc(44px + var(--lift));
width: min(431px, 32vw);
font-size: clamp(16px, 1.3vw, 18.5px);
line-height: 1.38;
letter-spacing: -.01em;
}
.why-btn { margin-top: 20px; }
.why-st .w {
animation: wsc linear both;
animation-timeline: --why;
animation-range: contain calc(var(--t) + var(--a)) contain calc(var(--t) + var(--b));
}
.why-s0 .w { animation-range: entry var(--a) entry var(--b); }
@media (max-width: 760px) {
.why { height: 560svh; }
.why-art { height: 56%; }
.why-art .art-d { display: none; }
.why-art .art-m { display: block; }
.why-st { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--g) calc(28px + var(--lift)); }
.why-statement, .why-h, .why-d { position: static; width: auto; max-width: none; }
.why-statement, .why-h, .why-h h3 { font-size: clamp(28px, 7.8vw, 34px); }
.why-h .tag { margin-bottom: 14px; }
.why-d { margin-top: 14px; font-size: 16px; }
.why-btn { width: 100%; }
}
.quantum {
padding: 136px var(--g) 128px;
background: var(--sec-q);
color: var(--q-fg);
}
.q-head, .q-split, .q-foot {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
column-gap: 40px;
}
.q-head { align-items: end; }
.q-h {
margin-top: 22px;
max-width: 9em;
font-size: clamp(36px, 4.17vw, 60px);
font-weight: 600;
line-height: 1.04;
letter-spacing: -.045em;
}
.q-h .w, .sec-head h2 .w, .faq-head h2 .w {
animation: rw linear both;
animation-timeline: view();
animation-range: entry calc(40% + var(--i) * 8%) entry calc(80% + var(--i) * 8%);
}
.q-paras {
display: grid;
gap: 14px;
font-size: clamp(17px, 1.3vw, 18.5px);
line-height: 1.42;
color: rgba(var(--q-rgb), .8);
}
.q-split { margin-top: 96px; column-gap: 0; view-timeline: --q block; }
.q-art { position: relative; min-width: 0; }
.q-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.q-art-m { display: none; }
.q-art path, .q-art-m path {
fill: none;
stroke: var(--ln-a);
stroke-width: 1.6;
stroke-dasharray: 1 1;
animation: draw linear both;
animation-timeline: --q;
animation-range: cover calc(8% + var(--k) * 7%) cover calc(30% + var(--k) * 7%);
}
.q-art .dim, .q-art-m .dim { stroke: var(--ln-dim); }
.bundle svg, .fork svg, .why-art svg, .q-art svg, .q-art-m svg { opacity: var(--ln-o); }
.bundle svg, .q-art svg, .q-art-m svg { -webkit-mask-image: var(--fade-l); mask-image: var(--fade-l); }
.why-art svg { -webkit-mask-image: var(--fade-x); mask-image: var(--fade-x); }
.fork svg { transform: translateZ(0); }
.bundle path:nth-child(3n+2), .fork path:nth-child(2), .q-art path:nth-child(2), .q-art-m path:nth-child(2) { stroke: var(--line2, var(--ln-a)); }
.bundle path:nth-child(3n), .fork path:nth-child(3) { stroke: var(--line3, var(--ln-a)); }
.why-art path:nth-of-type(3n+2), .why-art circle:nth-of-type(2n) { stroke: var(--line2, var(--ln-b)); }
.why-art path:nth-of-type(3n) { stroke: var(--line3, var(--ln-b)); }
.q-cards { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; }
.qcard {
display: flex;
flex-direction: column;
min-height: 240px;
padding: 26px 28px 24px;
border: 1px solid rgba(var(--q-ln-rgb), .38);
border-radius: 10px;
background: rgba(var(--q-rgb), .04);
animation: cardin linear both;
animation-timeline: --q;
animation-range: cover 18% cover 36%;
}
.qcard + .qcard { border-color: rgba(var(--q-ln-rgb), .2); animation-range: cover 24% cover 42%; }
.qcard-lab { font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--q-acc); }
.qcard h3 {
margin-top: 18px;
font-size: clamp(24px, 2vw, 28.8px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.035em;
}
.qcard p:not([class]) { margin-top: 10px; max-width: 30em; font-size: 16px; line-height: 1.42; color: rgba(var(--q-rgb), .78); }
.qcard-mono span { white-space: nowrap; }
.qcard-mono {
margin-top: auto;
padding-top: 22px;
font: 400 11px/1.5 var(--mono);
letter-spacing: .03em;
color: rgba(var(--q-rgb), .6);
}
.q-foot { margin-top: 96px; padding-top: 40px; border-top: 1px solid rgba(var(--q-rgb), .16); }
.q-list h3 { font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.q-list ul { margin-top: 20px; max-width: 560px; }
.q-list li {
display: flex;
gap: 14px;
padding: 13px 0;
border-top: 1px solid rgba(var(--q-rgb), .12);
font-size: 17px;
line-height: 1.4;
}
.q-list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .5em; background: var(--q-acc); }
.q-fine { align-self: end; font-size: 14px; line-height: 1.55; color: rgba(var(--q-rgb), .62); }
@media (max-width: 860px) {
.q-head, .q-split, .q-foot { grid-template-columns: 1fr; }
.q-paras { margin-top: 28px; }
.q-split { margin-top: 48px; }
.q-art { display: none; }
.q-art-m { display: block; height: 72px; margin-bottom: 20px; }
.q-art-m svg { width: 100%; height: 100%; overflow: visible; }
.q-cards { gap: 16px; }
.qcard { min-height: 0; }
.q-foot { margin-top: 64px; }
.q-fine { margin-top: 32px; }
}
@media (max-width: 560px) {
.quantum { padding: 96px var(--g) 88px; }
.qcard { padding: 22px 20px 20px; }
.qcard-mono { font-size: 12px; }
.q-fine { font-size: 15px; }
}
.sec-head { max-width: 820px; }
.sec-head .tag { margin-bottom: 22px; }
.sec-head h2, .faq-head h2 {
font-size: clamp(34px, 3.3vw, 47.6px);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.04em;
}
.sec-sub {
margin-top: 16px;
max-width: 34em;
font-size: clamp(17px, 1.3vw, 19px);
line-height: 1.4;
color: var(--muted);
}
.report { padding: 140px var(--g) 140px; }
.rep-grid {
display: grid;
grid-template-columns: minmax(0, 820px) minmax(0, 340px);
justify-content: space-between;
column-gap: 40px;
align-items: start;
margin-top: 56px;
}
.rep {
padding: 32px 36px 36px;
border-radius: 10px;
background: var(--card);
outline: 1px solid var(--card-bd);
outline-offset: -1px;
font-family: var(--lato);
}
.rep-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; }
.rep-wallet { font: 500 13px/1.4 var(--mono); }
.rep-time { margin-top: 2px; font: 400 12px/1.4 var(--mono); color: var(--muted); }
.rep-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-note { margin-top: 12px; max-width: 46em; }
.rep-score {
display: flex;
align-items: flex-end;
gap: 20px;
margin-top: 28px;
padding-bottom: 28px;
border-bottom: 1px solid var(--rule);
}
.rep-n {
font-family: var(--sw);
font-size: clamp(88px, 7.8vw, 112px);
font-weight: 600;
line-height: .8;
letter-spacing: -.06em;
}
.rep-of { font-size: 16px; color: var(--muted); }
.rep-tier { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.rep-off { font: 400 12px/1 var(--mono); color: var(--muted); }
.room { margin-top: 32px; }
.room-h {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding-bottom: 10px;
border-bottom: 2px solid var(--ln-a);
}
.room-h h3 { font-family: var(--sw); font-size: 21px; font-weight: 600; letter-spacing: -.03em; }
.room-pts { font: 500 12.5px/1 var(--mono); white-space: nowrap; }
.lg {
display: grid;
grid-template-columns: 92px minmax(0, 1fr) 44px;
column-gap: 12px;
align-items: start;
padding: 11px 0;
border-bottom: 1px solid var(--rule);
font-size: 15px;
line-height: 1.42;
}
.st {
justify-self: start;
margin-top: 1px;
padding: 3px 6px;
border-radius: 3px;
font: 500 11px/1.2 var(--mono);
}
.st-f { background: var(--soft); color: var(--accent); }
.st-n { background: var(--fill); color: var(--muted); }
.st-u { background: var(--chip-sand); color: var(--text); }
.lg .pts { text-align: right; }
.cap-note { padding-top: 10px; font: 400 11.5px/1.45 var(--mono); color: var(--muted); }
.score-line {
margin-top: 32px;
padding: 16px 18px;
border-radius: 6px;
background: var(--well);
font: 400 13px/1.6 var(--mono);
}
.fixes { margin-top: 32px; }
.fixes li {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
column-gap: 14px;
padding: 11px 0;
border-bottom: 1px solid var(--rule);
font-size: 15.5px;
line-height: 1.45;
}
.fx-n {
display: flex;
align-items: center;
justify-content: center;
height: 22px;
border-radius: 2px;
background: var(--tag-bg);
color: var(--tag-fg);
font: 500 11.5px/1 var(--mono);
}
.src { margin-top: 28px; }
summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
cursor: pointer;
list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.src summary { padding: 14px 0; border-top: 1px solid var(--rule); font-family: var(--sw); font-size: 16px; font-weight: 500; }
.src-list li {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-top: 1px solid var(--rule);
font: 400 12.5px/1.4 var(--mono);
}
.src-list .code { color: var(--accent); }
.pm { position: relative; flex: none; width: 14px; height: 14px; }
.pm::before, .pm::after {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 14px;
height: 2px;
background: currentColor;
}
.pm::after { transform: rotate(90deg); transition: transform .45s var(--hover); }
details[open] > summary .pm::after { transform: rotate(0deg); }
.share-col { position: sticky; top: calc(var(--top) + 24px); }
.share {
display: flex;
flex-direction: column;
align-items: flex-start;
aspect-ratio: 340 / 430;
padding: 24px 24px 22px;
border-radius: 10px;
background: var(--share-bg);
outline: 1px solid var(--share-bd);
outline-offset: -1px;
}
.share-top { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.share-n {
margin-top: auto;
font-size: 168px;
font-weight: 600;
line-height: .8;
letter-spacing: -.07em;
}
.share-of { margin: 10px 0 12px; font-size: 17px; }
.tier-chip-ink { background: var(--chip-ink); color: var(--chip-ink-fg); }
.share-foot {
align-self: stretch;
margin-top: 28px;
padding-top: 14px;
border-top: 1px solid rgba(var(--ink-rgb), .2);
font: 500 12px/1 var(--mono);
}
.share-cap { margin-top: 14px; font: 400 11.5px/1.45 var(--mono); color: var(--muted); }
.room, .score-line, .fixes, .src {
animation: await linear both;
animation-timeline: view();
animation-range: entry 0% entry 30%;
}
@media (max-width: 1000px) {
.rep-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
.share-col { position: static; width: min(340px, 100%); }
}
@media (max-width: 560px) {
.report { padding: 96px var(--g) 72px; }
.rep { padding: 22px 16px 24px; margin-inline: -4px; }
.lg { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding: 9px 0; }
.lg .st { grid-area: 1 / 1; }
.lg .pts { grid-area: 1 / 2; }
.lg p { grid-area: 2 / 1 / 3 / -1; }
.st, .cap-note, .fx-n, .share-cap { font-size: 12px; }
.rep-score { gap: 14px; }
.share-n { font-size: 144px; }
}
.tiers { padding: 120px var(--g) 140px; view-timeline: --tiers block; }
.scale { position: relative; margin-top: 64px; }
.scale-bar {
display: grid;
grid-template-columns: 16fr 25fr 25fr 35fr;
gap: 3px;
height: 56px;
}
.seg {
display: flex;
align-items: center;
padding: 0 14px;
font: 500 12px/1 var(--mono);
letter-spacing: .03em;
text-transform: uppercase;
white-space: nowrap;
animation: segin linear both;
animation-timeline: --tiers;
animation-range: entry calc(40% + var(--j) * 9%) entry calc(62% + var(--j) * 9%);
}
.seg-p { --j: 0; background: var(--seg1); border-radius: 3px 0 0 3px; }
.seg-sh { --j: 1; background: var(--seg2); }
.seg-se { --j: 2; background: var(--seg3); }
.seg-n { --j: 3; background: var(--seg4); color: var(--seg4-fg); border-radius: 0 3px 3px 0; }
.scale-mk { position: absolute; top: -12px; left: 93%; width: 0; height: 104px; }
.scale-mk::before {
content: "";
position: absolute;
left: -1px;
top: 0;
width: 2px;
height: 80px;
background: var(--text);
}
.scale-lab {
position: absolute;
right: 10px;
bottom: 0;
font: 500 12px/1 var(--mono);
letter-spacing: .03em;
text-transform: uppercase;
white-space: nowrap;
}
.scale-mk {
animation: mkin linear both;
animation-timeline: --tiers;
animation-range: entry 78% entry 100%;
}
.tier-cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-top: 72px;
}
.tcd {
padding: 20px 22px 26px;
border-top: 4px solid;
border-radius: 3px 3px 6px 6px;
background: var(--card);
outline: 1px solid var(--card-bd);
outline-offset: -1px;
font-size: 16px;
line-height: 1.4;
animation: cardin linear both;
animation-timeline: view();
animation-range: entry 0% entry 40%;
}
.tcd-p { border-color: var(--tcd1); }
.tcd-sh { border-color: var(--seg2); }
.tcd-se { border-color: var(--seg3); }
.tcd-n { border-color: var(--seg4); }
.tcd-name { font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.tcd-r { margin: 6px 0 14px; font: 400 12px/1.3 var(--mono); color: var(--muted); }
@media (max-width: 900px) {
.tier-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.tiers { padding: 72px var(--g) 104px; }
.scale-bar { height: auto; }
.seg {
position: relative;
align-items: flex-end;
justify-content: center;
height: 72px;
padding: 0;
background: none;
font-size: 12px;
letter-spacing: -.02em;
color: var(--text);
}
.seg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 48px; border-radius: inherit; background: var(--segc); }
.seg-p { --segc: var(--seg1); }
.seg-sh { --segc: var(--seg2); }
.seg-se { --segc: var(--seg3); }
.seg-n { --segc: var(--seg4); }
.scale-mk { height: 128px; }
.scale-mk::before { height: 104px; }
.tier-cards { grid-template-columns: 1fr; gap: 12px; margin-top: 64px; }
}
.faq {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 820px);
column-gap: 40px;
padding: 120px var(--g) 150px;
}
.faq-list details { border-top: 1px solid var(--rule2); }
.faq-list details:last-child { border-bottom: 1px solid var(--rule2); }
.faq-list summary {
padding: 22px 0;
font-size: clamp(18px, 1.46vw, 21px);
font-weight: 500;
line-height: 1.3;
letter-spacing: -.02em;
}
.faq-list details p {
max-width: 40em;
padding: 0 48px 26px 0;
font-size: 17px;
line-height: 1.5;
color: rgba(var(--ink-rgb), .76);
}
.faq-list details[open] p { animation: await .5s var(--fluid) both; }
@media (max-width: 900px) {
.faq { grid-template-columns: 1fr; row-gap: 40px; }
}
@media (max-width: 560px) {
.faq { padding: 96px var(--g) 72px; }
.faq-list details p { padding-right: 0; font-size: 16px; }
}
.foot { padding: 72px var(--g) 36px; background: var(--foot-bg); color: var(--foot-fg); }
.foot-top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 32px;
padding-bottom: 64px;
}
.foot-word {
display: flex;
align-items: center;
gap: .2em;
font-size: clamp(56px, 6.9vw, 100px);
font-weight: 600;
line-height: 1;
letter-spacing: -.05em;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 32px; font-size: 15px; font-weight: 500; color: rgba(var(--foot-rgb), .72); }
.foot-links a:hover { color: var(--foot-fg); }
.foot-lines {
display: grid;
gap: 6px;
padding-top: 24px;
border-top: 1px solid rgba(var(--foot-rgb), .16);
font: 400 12px/1.5 var(--mono);
color: rgba(var(--foot-rgb), .6);
}
@media (max-width: 560px) {
.foot { padding: 48px var(--g) 32px; }
.foot-links { gap: 20px; }
}
.foot-word span { color: var(--word-fill); -webkit-text-stroke: var(--word-stroke); text-shadow: var(--word-glow); }
.mark-l { width: .92em; height: .5em; color: var(--foot-mark); }
.mark-l path { stroke-width: 1.5; }
.mark-l circle { fill: none; stroke: currentColor; stroke-width: .8; }
.mark-l .mk-blink { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 6.6s linear 2.9s infinite; }
@keyframes navin { from { opacity: 0; } }
@keyframes introvis { from, to { visibility: visible; } }
@keyframes curtain { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes iline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow { from { transform: scale(.4); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tfill { from { opacity: 0; } }
@keyframes eopen { 0% { opacity: 0; transform: scaleY(.1); } 30% { opacity: 1; transform: scaleY(.1); } 100% { opacity: 1; transform: none; } }
@keyframes blink { 0%, 30% { transform: none; } 31% { transform: scaleY(.1); } 32.5%, 100% { transform: none; } }
@keyframes look {
0%, 12% { transform: none; }
15%, 33% { transform: translate(calc(var(--eu) * -.6px), calc(var(--eu) * .1px)); }
36%, 50% { transform: none; }
53%, 70% { transform: translate(calc(var(--eu) * .45px), calc(var(--eu) * -.25px)); }
73%, 84% { transform: translate(calc(var(--eu) * .15px), calc(var(--eu) * .2px)); }
87%, 100% { transform: none; }
}
@keyframes waOn { from, to { --wa: block; } }
@keyframes drift { to { transform: translateY(-18%); } }
@keyframes rw { from { opacity: 0; filter: blur(.1em); transform: translateY(.1875em); } }
@keyframes wsc { from { opacity: .16; filter: blur(.1em); transform: translateY(.1875em); } }
@keyframes await { from { opacity: 0; transform: translateY(.55em); } }
@keyframes cardin { from { opacity: 0; transform: translateY(-1.2em); } }
@keyframes chipin { from { opacity: 0; transform: translateX(-2.2em); } }
@keyframes nudge { from { opacity: 0; width: 0; margin-right: 0; transform: scale(.6); } }
@keyframes stIn { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@keyframes stOut { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes segin { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mkin { from { opacity: 0; transform: translateY(-12px); } }
@supports not (animation-timeline: view()) {
*, *::before, *::after { animation: none !important; transition: none !important; }
html { scroll-behavior: auto; }
.intro { display: none; }
.trail { height: auto; padding: 104px var(--g) 120px; }
.tr-stage {
position: static;
height: auto;
overflow: visible;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
column-gap: 12px;
}
.tr-half, .tr-prog { display: contents; }
.tr-t2, .tr-t3 { position: static; }
.tp { flex: 0 0 100%; margin: 80px 0 22px; text-align: center; color: var(--text); }
.tp::before { display: none; }
.tp1 { order: 1; margin-top: 0; }
.tr-l .tr-t1 { order: 2; }
.tr-r .tr-t1 { order: 3; }
.tr-cards { order: 4; }
.tp2 { order: 5; }
.tr-l .tr-t2 { order: 6; }
.tr-r .tr-t2 { order: 7; }
.tr-stage::before { content: ""; order: 8; flex: 0 0 100%; }
.rcard { order: 9; }
.tp3 { order: 10; }
.tr-r .tr-t3 { order: 11; }
.tr-cards {
position: static;
flex: 0 0 100%;
width: auto;
max-width: 1104px;
height: auto;
margin: 36px 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.tr-slot { position: static; flex: 0 1 360px; height: auto; }
.rcard { position: static; width: min(522px, 100%); margin: 36px auto 0; transform: none; }
.rx { max-height: none; }
.cnt { display: none; }
.rscore-n .vh {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip-path: none;
white-space: normal;
}
.why { height: auto; padding: 112px 0 16px; }
.why-stage { position: static; height: auto; overflow: visible; }
.why-st {
--wa: block;
position: relative;
inset: auto;
display: grid;
grid-template-columns: minmax(0, 1fr) min(431px, 32vw);
column-gap: 40px;
align-items: end;
padding: 0 var(--g) 104px;
}
.why-art { position: relative; grid-column: 1 / -1; height: auto; aspect-ratio: 1440 / 400; margin: 0 calc(var(--g) * -1) 40px; }
.why-statement, .why-h, .why-d { position: static; width: auto; }
.why-s0 .why-statement { grid-column: 1 / -1; }
@media (max-width: 760px) {
.why-st { display: block; padding: 0 var(--g) 80px; }
.why-art { aspect-ratio: 390 / 340; margin-bottom: 28px; }
}
@media (max-width: 560px) {
.trail { padding: 88px var(--g) 96px; }
.tr-stage { column-gap: 9px; }
.tr-cards { max-width: 360px; margin-inline: auto; }
.tp { margin-top: 64px; }
.tr-r::before { content: none; }
.tr-slot:nth-child(5) { z-index: auto; }
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
html { scroll-behavior: auto; }
.intro { display: none; }
.trail { height: auto; padding: 104px var(--g) 120px; }
.tr-stage {
position: static;
height: auto;
overflow: visible;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
column-gap: 12px;
}
.tr-half, .tr-prog { display: contents; }
.tr-t2, .tr-t3 { position: static; }
.tp { flex: 0 0 100%; margin: 80px 0 22px; text-align: center; color: var(--text); }
.tp::before { display: none; }
.tp1 { order: 1; margin-top: 0; }
.tr-l .tr-t1 { order: 2; }
.tr-r .tr-t1 { order: 3; }
.tr-cards { order: 4; }
.tp2 { order: 5; }
.tr-l .tr-t2 { order: 6; }
.tr-r .tr-t2 { order: 7; }
.tr-stage::before { content: ""; order: 8; flex: 0 0 100%; }
.rcard { order: 9; }
.tp3 { order: 10; }
.tr-r .tr-t3 { order: 11; }
.tr-cards {
position: static;
flex: 0 0 100%;
width: auto;
max-width: 1104px;
height: auto;
margin: 36px 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.tr-slot { position: static; flex: 0 1 360px; height: auto; }
.rcard { position: static; width: min(522px, 100%); margin: 36px auto 0; transform: none; }
.rx { max-height: none; }
.cnt { display: none; }
.rscore-n .vh {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip-path: none;
white-space: normal;
}
.why { height: auto; padding: 112px 0 16px; }
.why-stage { position: static; height: auto; overflow: visible; }
.why-st {
--wa: block;
position: relative;
inset: auto;
display: grid;
grid-template-columns: minmax(0, 1fr) min(431px, 32vw);
column-gap: 40px;
align-items: end;
padding: 0 var(--g) 104px;
}
.why-art { position: relative; grid-column: 1 / -1; height: auto; aspect-ratio: 1440 / 400; margin: 0 calc(var(--g) * -1) 40px; }
.why-statement, .why-h, .why-d { position: static; width: auto; }
.why-s0 .why-statement { grid-column: 1 / -1; }
@media (max-width: 760px) {
.why-st { display: block; padding: 0 var(--g) 80px; }
.why-art { aspect-ratio: 390 / 340; margin-bottom: 28px; }
}
@media (max-width: 560px) {
.trail { padding: 88px var(--g) 96px; }
.tr-stage { column-gap: 9px; }
.tr-cards { max-width: 360px; margin-inline: auto; }
.tp { margin-top: 64px; }
.tr-r::before { content: none; }
.tr-slot:nth-child(5) { z-index: auto; }
}
}
:root {
color-scheme: dark;
--bg: #08060E;
--text: #EEEAF6;
--ink-rgb: 238, 234, 246;
--muted: #9C94AE;
--men: #8FEFFF;
--men-bg: rgba(143, 239, 255, .14);
--nav-bg: rgba(8, 6, 14, .72);
--nav-fx: saturate(140%) blur(14px);
--nav-bd: rgba(255, 255, 255, .07);
--accent: #8FEFFF;
--accent-fg: #08060E;
--mark: #B99DF9;
--mark-w: #B99DF9;
--soft: rgba(143, 239, 255, .13);
--soft-ink: #8FEFFF;
--fill: rgba(255, 255, 255, .07);
--rule: rgba(255, 255, 255, .09);
--rule2: rgba(255, 255, 255, .16);
--card: rgba(255, 255, 255, .04);
--card-solid: #17141F;
--card-bd: rgba(255, 255, 255, .09);
--card-2: rgba(255, 255, 255, .03);
--well: rgba(255, 255, 255, .04);
--chip-bg: rgba(255, 255, 255, .04);
--chip-sand: rgba(255, 255, 255, .08);
--chip-cream: rgba(255, 255, 255, .05);
--chip-deep: rgba(143, 239, 255, .2);
--chip-deep-fg: #8FEFFF;
--chip-ink: rgba(255, 255, 255, .1);
--chip-ink-fg: #EEEAF6;
--tag-bg: rgba(143, 239, 255, .14);
--tag-fg: #8FEFFF;
--btn-bg: linear-gradient(90deg, #B99DF9, #8FEFFF 55%, #9BFFD0);
--btn-bg-h: linear-gradient(90deg, #CBB6FF, #AEF4FF 55%, #B6FFDD);
--btn-fg: #08060E;
--btn2-bd: rgba(255, 255, 255, .26);
--btn2-bd-h: rgba(255, 255, 255, .5);
--btn2-bg: rgba(255, 255, 255, .02);
--btn2-bg-h: rgba(255, 255, 255, .07);
--intro: #110E1A;
--intro2: #1B1728;
--intro-ln: #B99DF9;
--ln-a: #B99DF9;
--ln-b: #B99DF9;
--ln-dim: rgba(185, 157, 249, .38);
--ln-eye: #B99DF9;
--dash: #FFFFFF;
--ln-o: 1;
--glow: rgba(143, 239, 255, .42);
--glow2: rgba(185, 157, 249, .16);
--halo-o: .14;
--line-glow: 0 0 10px var(--glow), 0 0 28px var(--glow2);
--fade-x: linear-gradient(90deg, transparent, var(--opaque) 9%, var(--opaque) 91%, transparent);
--fade-l: linear-gradient(90deg, transparent, var(--opaque) 22%);
--tp-dot: #B99DF9;
--tp-glow: 0 0 6px var(--glow);
--sec-trail: #0D0A16;
--sec-trail-0: rgba(13, 10, 22, 0);
--sec-why: #120E1E;
--sec-q: #120B22;
--q-fg: #EEEAF6;
--q-rgb: 238, 234, 246;
--q-ln-rgb: 185, 157, 249;
--q-acc: #8FEFFF;
--rcard-bg: #151120;
--rcard-bd: rgba(185, 157, 249, .45);
--head-bg: rgba(185, 157, 249, .07);
--head-fg: #EEEAF6;
--head-fg2: #9C94AE;
--ravatar: rgba(143, 239, 255, .14);
--av-ring: rgba(185, 157, 249, .4);
--av-cut: #17141F;
--share-bg: #120B22;
--share-bd: rgba(185, 157, 249, .45);
--seg1: rgba(255, 255, 255, .06);
--seg2: rgba(143, 239, 255, .16);
--seg3: rgba(143, 239, 255, .34);
--seg4: #8FEFFF;
--seg4-fg: #08060E;
--tcd1: rgba(255, 255, 255, .2);
--foot-bg: #050409;
--foot-fg: #EEEAF6;
--foot-rgb: 238, 234, 246;
--foot-mark: #B99DF9;
--word-fill: transparent;
--word-stroke: 1px rgba(185, 157, 249, .5);
--word-glow: 0 0 28px rgba(185, 157, 249, .16);
--line2: #8FEFFF;
--line3: #9BFFD0;
}
:root { --band: 0px; }
@media (max-width: 560px) {
:root { --band: 0px; }
}
.s0 { --i:0 !important; }
.s1 { --i:1 !important; }
.s2 { --i:2 !important; }
.s3 { --i:3 !important; }
.s4 { --i:4 !important; }
.s5 { --i:5 !important; }
.s6 { --i:6 !important; }
.s7 { --i:7 !important; }
.s8 { --i:8 !important; }
.s9 { --i:9 !important; }
.s10 { --i:10 !important; }
.s11 { --i:11 !important; }
.s12 { --i:12 !important; }
.s13 { --i:13 !important; }
.s14 { --i:14 !important; }
.s15 { --k:0 !important; }
.s16 { --k:1 !important; }
.s17 { --k:2 !important; }
.s18 { --k:3 !important; }
.s19 { --k:4 !important; }
.s20 { --k:5 !important; }
.s21 { --i:15 !important; }
.s22 { --i:16 !important; }
.s23 { --i:17 !important; }
.s24 { --i:18 !important; }
.s25 { --i:19 !important; }
.s26 { --i:20 !important; }
.s27 { --dl:0.1s !important; --dd:1.1s !important; }
.s28 { --i:0 !important; --a:78% !important; --b:85.7% !important; }
.s29 { --i:1 !important; --a:78.84% !important; --b:86.54% !important; }
.s30 { --i:2 !important; --a:79.68% !important; --b:87.38% !important; }
.s31 { --i:3 !important; --a:80.52% !important; --b:88.22% !important; }
.s32 { --i:4 !important; --a:81.36% !important; --b:89.06% !important; }
.s33 { --i:5 !important; --a:82.21% !important; --b:89.91% !important; }
.s34 { --i:6 !important; --a:83.05% !important; --b:90.75% !important; }
.s35 { --i:7 !important; --a:83.89% !important; --b:91.59% !important; }
.s36 { --i:8 !important; --a:84.73% !important; --b:92.43% !important; }
.s37 { --i:9 !important; --a:85.57% !important; --b:93.27% !important; }
.s38 { --i:10 !important; --a:86.41% !important; --b:94.11% !important; }
.s39 { --i:11 !important; --a:87.25% !important; --b:94.95% !important; }
.s40 { --i:12 !important; --a:88.09% !important; --b:95.79% !important; }
.s41 { --i:13 !important; --a:88.94% !important; --b:96.64% !important; }
.s42 { --i:14 !important; --a:89.78% !important; --b:97.48% !important; }
.s43 { --i:15 !important; --a:90.62% !important; --b:98.32% !important; }
.s44 { --i:16 !important; --a:91.46% !important; --b:99.16% !important; }
.s45 { --i:17 !important; --a:92.3% !important; --b:100% !important; }
.s46 { --i:0 !important; --a:-0.25% !important; --b:-0.04% !important; }
.s47 { --i:1 !important; --a:-0.18% !important; --b:0.02% !important; }
.s48 { --i:2 !important; --a:-0.12% !important; --b:0.09% !important; }
.s49 { --i:3 !important; --a:-0.06% !important; --b:0.15% !important; }
.s50 { --i:4 !important; --a:0.01% !important; --b:0.22% !important; }
.s51 { --i:5 !important; --a:0.08% !important; --b:0.29% !important; }
.s52 { --i:6 !important; --a:0.14% !important; --b:0.35% !important; }
.s53 { --i:0 !important; --a:-0.15% !important; --b:0.08% !important; }
.s54 { --i:1 !important; --a:-0.12% !important; --b:0.11% !important; }
.s55 { --i:2 !important; --a:-0.09% !important; --b:0.14% !important; }
.s56 { --i:3 !important; --a:-0.06% !important; --b:0.17% !important; }
.s57 { --i:4 !important; --a:-0.03% !important; --b:0.2% !important; }
.s58 { --i:5 !important; --a:0% !important; --b:0.23% !important; }
.s59 { --i:6 !important; --a:0.03% !important; --b:0.26% !important; }
.s60 { --i:7 !important; --a:0.06% !important; --b:0.29% !important; }
.s61 { --i:8 !important; --a:0.09% !important; --b:0.32% !important; }
.s62 { --i:9 !important; --a:0.12% !important; --b:0.35% !important; }
.s63 { --i:10 !important; --a:0.15% !important; --b:0.38% !important; }
.s64 { --i:11 !important; --a:0.18% !important; --b:0.41% !important; }
.s65 { --i:12 !important; --a:0.21% !important; --b:0.44% !important; }
.s66 { --i:13 !important; --a:0.24% !important; --b:0.47% !important; }
.s67 { --i:14 !important; --a:0.27% !important; --b:0.5% !important; }
.s68 { --dl:0.5s !important; --dd:0.85s !important; }
.s69 { --dl:0.62s !important; --dd:0.85s !important; }
.s70 { --i:1 !important; --a:-0.13% !important; --b:0.1% !important; }
.s71 { --i:2 !important; --a:-0.1% !important; --b:0.13% !important; }
.s72 { --i:3 !important; --a:-0.08% !important; --b:0.15% !important; }
.s73 { --i:4 !important; --a:-0.05% !important; --b:0.18% !important; }
.s74 { --i:5 !important; --a:-0.03% !important; --b:0.2% !important; }
.s75 { --i:6 !important; --a:0% !important; --b:0.23% !important; }
.s76 { --i:7 !important; --a:0.02% !important; --b:0.25% !important; }
.s77 { --i:8 !important; --a:0.05% !important; --b:0.28% !important; }
.s78 { --i:9 !important; --a:0.07% !important; --b:0.3% !important; }
.s79 { --i:10 !important; --a:0.1% !important; --b:0.33% !important; }
.s80 { --i:11 !important; --a:0.12% !important; --b:0.35% !important; }
.s81 { --i:12 !important; --a:0.15% !important; --b:0.38% !important; }
.s82 { --i:13 !important; --a:0.17% !important; --b:0.4% !important; }
.s83 { --i:14 !important; --a:0.2% !important; --b:0.43% !important; }
.s84 { --i:15 !important; --a:0.22% !important; --b:0.45% !important; }
.s85 { --i:16 !important; --a:0.25% !important; --b:0.48% !important; }
.s86 { --i:17 !important; --a:0.27% !important; --b:0.5% !important; }
.s87 { --dl:0.74s !important; --dd:0.85s !important; }
.s88 { --i:2 !important; --a:-0.09% !important; --b:0.13% !important; }
.s89 { --i:3 !important; --a:-0.07% !important; --b:0.16% !important; }
.s90 { --i:4 !important; --a:-0.04% !important; --b:0.19% !important; }
.s91 { --i:5 !important; --a:-0.01% !important; --b:0.22% !important; }
.s92 { --i:6 !important; --a:0.02% !important; --b:0.25% !important; }
.s93 { --i:7 !important; --a:0.05% !important; --b:0.27% !important; }
.s94 { --i:8 !important; --a:0.08% !important; --b:0.3% !important; }
.s95 { --i:9 !important; --a:0.1% !important; --b:0.33% !important; }
.s96 { --i:10 !important; --a:0.13% !important; --b:0.36% !important; }
.s97 { --i:11 !important; --a:0.16% !important; --b:0.39% !important; }
.s98 { --i:12 !important; --a:0.19% !important; --b:0.42% !important; }
.s99 { --i:13 !important; --a:0.22% !important; --b:0.44% !important; }
.s100 { --i:14 !important; --a:0.24% !important; --b:0.47% !important; }
.s101 { --i:15 !important; --a:0.27% !important; --b:0.5% !important; }
.s102 { --dl:0.2s !important; --dd:1.1s !important; }
.s103 { --dl:0.3s !important; --dd:1.1s !important; }
.s104 { --dl:0.4s !important; --dd:1.1s !important; }
.s105 { --dl:0.86s !important; --dd:0.85s !important; }
.s106 { --i:2 !important; --a:-0.08% !important; --b:0.14% !important; }
.s107 { --i:3 !important; --a:-0.05% !important; --b:0.18% !important; }
.s108 { --i:4 !important; --a:-0.02% !important; --b:0.21% !important; }
.s109 { --i:5 !important; --a:0.01% !important; --b:0.24% !important; }
.s110 { --i:6 !important; --a:0.05% !important; --b:0.27% !important; }
.s111 { --i:7 !important; --a:0.08% !important; --b:0.31% !important; }
.s112 { --i:8 !important; --a:0.11% !important; --b:0.34% !important; }
.s113 { --i:9 !important; --a:0.14% !important; --b:0.37% !important; }
.s114 { --i:10 !important; --a:0.18% !important; --b:0.4% !important; }
.s115 { --i:11 !important; --a:0.21% !important; --b:0.44% !important; }
.s116 { --i:12 !important; --a:0.24% !important; --b:0.47% !important; }
.s117 { --i:13 !important; --a:0.27% !important; --b:0.5% !important; }
.s118 { --dl:0.5s !important; --dd:1.1s !important; }
.s119 { --i:1 !important; --a:-0.19% !important; --b:0.02% !important; }
.s120 { --i:2 !important; --a:-0.14% !important; --b:0.07% !important; }
.s121 { --i:3 !important; --a:-0.08% !important; --b:0.13% !important; }
.s122 { --i:4 !important; --a:-0.03% !important; --b:0.18% !important; }
.s123 { --i:5 !important; --a:0.03% !important; --b:0.24% !important; }
.s124 { --i:6 !important; --a:0.08% !important; --b:0.29% !important; }
.s125 { --i:7 !important; --a:0.14% !important; --b:0.35% !important; }
.s126 { --i:1 !important; --a:-0.11% !important; --b:0.11% !important; }
.s127 { --i:2 !important; --a:-0.08% !important; --b:0.15% !important; }
.s128 { --i:3 !important; --a:-0.04% !important; --b:0.18% !important; }
.s129 { --i:4 !important; --a:-0.01% !important; --b:0.22% !important; }
.s130 { --i:5 !important; --a:0.03% !important; --b:0.25% !important; }
.s131 { --i:6 !important; --a:0.06% !important; --b:0.29% !important; }
.s132 { --i:7 !important; --a:0.1% !important; --b:0.32% !important; }
.s133 { --i:8 !important; --a:0.13% !important; --b:0.36% !important; }
.s134 { --i:9 !important; --a:0.17% !important; --b:0.39% !important; }
.s135 { --i:10 !important; --a:0.2% !important; --b:0.43% !important; }
.s136 { --i:11 !important; --a:0.24% !important; --b:0.46% !important; }
.s137 { --i:12 !important; --a:0.27% !important; --b:0.5% !important; }