/*
  myAviLink — https://myavi.link
  Copyright (c) myAviLink. This page, its stylesheet and its script are the
  work of its author. You are welcome to read them; they are served to your
  browser because that is the only way it can render them.

  Class names have been rewritten and comments stripped on the way out, so
  what you are reading is not what was written.
*/
@font-face {
font-family: Geist;
src: url("/fonts/geist.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "Geist Mono";
src: url("/fonts/geist-mono.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: block;
}
:root {
color-scheme: dark;
--bg: #0c0d10;
--bg-top: #101217;
--bg-bottom: #090a0d;
--s1: #13151a;
--s2: #1a1d23;
--s3: #22262d;
--panel: #0e1014;
--stage: #0f1115;
--line: #212429;
--line2: #31353d;
--line3: #383d46;
--text: #eef0f5;
--text2: #b3bac8;
--dim: #8a92a3;
--faint: #7e8697;
--fainter: #6b7385;
--accent: #5cc8ff;
--accent-ink: #04121c;
--accent-panel: #143443;
--accent-track: #164b66;
--live: #3ad598;
--warn: #ffb454;
--danger: #ff5f6b;
--danger-text: #ff9ba2;
--adult: #f07ac0;
--focus: #8fdcff;
--sans: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; scrollbar-width: none; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--text);
font: 400 16px/1.6 var(--sans);
-webkit-text-size-adjust: 100%;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.1'/%3E%3C/svg%3E") repeat,
linear-gradient(var(--bg-top), #0c0d11 52%, var(--bg-bottom));
background-size: 180px 180px, auto;
background-attachment: fixed;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
._ue {
position: absolute; left: 12px; top: -60px; z-index: 100;
display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
border-radius: 2px; text-decoration: none;
background: var(--accent); color: var(--accent-ink);
font: 600 13.5px/1 var(--sans);
transition: top .12s ease;
}
._ue:focus-visible { top: 12px; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #85d8ff; }
.icon { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon._ve { width: 13px; height: 13px; }
.icon._hc { width: 18px; height: 18px; }
.icon._vf { width: 26px; height: 26px; }
._wb { position: absolute; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
._ec { font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
h2 { margin: 0; font: 600 38px/1.15 var(--sans); letter-spacing: -.03em; }
h3 { margin: 0; font: 600 17px/1.3 var(--sans); letter-spacing: -.015em; }
.top {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center; gap: 12px;
height: 64px; padding: 0 32px;
background: rgba(13, 14, 18, .86);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.mark { width: 22px; height: 22px; flex: 0 0 auto; color: var(--text); }
._uf { font-size: 16px; letter-spacing: -.02em; }
._uf b { font-weight: 600; }
._uf span { color: var(--faint); }
.top nav { display: flex; align-items: center; gap: 26px; margin-left: 40px; }
.top nav a { color: var(--dim); font-size: 14px; }
.top nav a:hover { color: var(--text); }
.top ._s { margin-left: auto; }
._q { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
._s {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
height: 36px; padding: 0 16px; border-radius: 2px; white-space: nowrap;
background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink);
font: 600 13.5px/1 var(--sans); cursor: pointer;
}
._s:hover { background: #85d8ff; border-color: #85d8ff; color: var(--accent-ink); }
._s._p { height: 52px; padding: 0 24px; font-size: 16px; gap: 10px; }
._s._jb { background: var(--s2); border-color: var(--line2); color: var(--text); font-weight: 500; }
._s._jb:hover { border-color: var(--accent); color: var(--accent); background: var(--s2); }
._pb { padding-top: 96px; padding-bottom: 46px; }
._pb ._ec { color: var(--accent); font-size: 11.5px; letter-spacing: .16em; display: block; margin-bottom: 26px; }
._pb h1 {
margin: 0; font: 600 clamp(40px, 5.4vw, 68px)/1.04 var(--sans);
letter-spacing: -.035em; max-width: 17ch; text-wrap: pretty;
}
._gc { margin: 28px 0 0; max-width: 62ch; font-size: 18.5px; line-height: 1.65; color: var(--text2); text-wrap: pretty; }
._da { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 40px; }
._ca { flex: 1 1 100%; margin: 6px 0 0; font: 400 13px/1.5 var(--mono); color: var(--faint); }
._ma { min-height: 100vh; display: flex; flex-direction: column; }
._ma main { flex: 1 1 auto; display: flex; align-items: center; }
.err { padding-top: 64px; padding-bottom: 96px; width: 100%; }
.err ._ec { display: block; margin-bottom: 22px; font-size: 12px; letter-spacing: .18em; }
.err h1 {
margin: 0; font: 600 clamp(34px, 4.4vw, 54px)/1.06 var(--sans);
letter-spacing: -.035em; max-width: 18ch; text-wrap: pretty;
}
.err ._gc { max-width: 54ch; }
._ja { padding-top: 0; padding-bottom: 44px; }
._ha { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-bottom: 14px; }
._ec._a { color: var(--accent); }
._ia { margin-left: auto; font-size: 14px; color: var(--faint); text-wrap: pretty; }
._pa { display: grid; grid-template-columns: minmax(0, 1fr) 452px; gap: 56px; align-items: center; padding-bottom: 44px; border-bottom: 1px solid var(--line); }
._pa._ya { grid-template-columns: 452px minmax(0, 1fr); padding: 44px 0; }
._qa { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
._qa .icon { width: 17px; height: 17px; color: var(--accent); }
._qa h3 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
._pa p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.65; color: var(--dim); max-width: 52ch; text-wrap: pretty; }
._pa p:last-child { margin-bottom: 0; }
._pa p._oc { font: 400 13px/1.6 var(--mono); color: var(--faint); max-width: 48ch; }
._cb { background: var(--s1); border: 1px solid var(--line); border-radius: 4px; padding: 15px 18px 6px; }
._cb._ad { padding-bottom: 18px; }
._db { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
._eb { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; margin-left: auto; background: var(--s2); border: 1px solid var(--line2); border-radius: 2px; color: var(--text2); font: 400 12px/1 var(--sans); text-transform: none; letter-spacing: 0; }
._eb i { font: 400 11px/1 var(--mono); font-style: normal; color: var(--faint); }
._gb { display: grid; grid-template-columns: minmax(0, 1fr) 58px 30px; gap: 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
._gb:last-child { border-bottom: none; }
._gb ._za { font-size: 14px; font-weight: 450; color: var(--text); }
._gb ._za.dim { color: var(--dim); }
._gb ._ab { font: 400 11.5px/1.5 var(--mono); color: var(--faint); margin-top: 1px; }
._gb ._ab._qf { color: var(--warn); }
._gb ._hb { font: 400 13px/1 var(--mono); color: var(--text2); text-align: right; font-variant-numeric: tabular-nums; }
._oa { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 3px; border: 1px solid var(--line2); color: var(--faint); opacity: .4; }
._oa .icon { width: 13px; height: 13px; }
._oa._m { color: var(--fainter); }
._oa.on { opacity: 1; color: var(--warn); border-color: rgba(255, 180, 84, .34); background: rgba(255, 180, 84, .09); }
._r { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
._r ._ld { font: 400 13.5px/1 var(--mono); color: var(--text); }
._r .what { font-size: 13px; color: var(--faint); }
._r ._kf { margin-left: auto; padding: 4px 6px; font: 400 11px/1 var(--sans); color: var(--dim); border: 1px solid var(--line2); border-radius: 2px; }
._r .x { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; color: var(--dim); border: 1px solid var(--line2); border-radius: 3px; }
._r .x .icon { width: 12px; height: 12px; }
._o { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
._o ._xa { flex: 1 1 auto; display: flex; align-items: center; height: 38px; padding: 0 12px; background: var(--s2); border: 1px solid var(--line2); border-radius: 3px; font: 400 13px/1 var(--sans); color: var(--fainter); }
._o ._t { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; background: var(--s2); border: 1px solid var(--line2); border-radius: 3px; font: 500 13px/1 var(--sans); color: var(--text); }
._ra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; padding-top: 36px; }
._mc { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
._mc .icon { width: 15px; height: 15px; color: var(--accent); }
._mc h3 { margin: 0; }
._ra p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--dim); text-wrap: pretty; }
._le { padding-top: 70px; padding-bottom: 70px; }
._ne { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: end; margin-bottom: 42px; }
._ne ._ec { display: block; margin-bottom: 14px; }
._ne ._j { margin: 0 0 5px; font-size: 14.5px; color: var(--dim); text-wrap: pretty; }
._ne h2 { max-width: 24ch; }
._lb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
._kb { border-top: 1px solid var(--line); }
._u { border-top: 2px solid var(--accent); padding: 22px 0 0; }
._u .n { font: 400 11px/1 var(--mono); color: var(--faint); letter-spacing: .12em; margin-bottom: 16px; }
._u h3 { margin-bottom: 12px; font-size: 21px; letter-spacing: -.02em; }
._u p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--dim); text-wrap: pretty; }
._u._mf { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; padding: 24px 0; border-top: none; border-bottom: 1px solid var(--line); }
._u._mf h3 { font-size: 17px; }
._u._mf p { font-size: 15.5px; line-height: 1.6; max-width: 68ch; }
._v { display: flex; align-items: center; gap: 11px; }
._v .icon { color: var(--accent); width: 16px; height: 16px; }
._v h3 { margin: 0; }
.stage {
position: relative; background: var(--stage);
border: 1px solid var(--line); border-radius: 6px; padding: 24px; overflow: hidden;
}
._we { position: relative; overflow: hidden; height: 534px; }
._xe {
position: relative; width: 1059px; height: 534px;
display: flex; gap: 28px;
transform-origin: top left;
}
._rf {
width: 726px; height: 534px; flex: 0 0 auto;
border: 1px solid var(--line2); border-radius: 4px; overflow: hidden;
box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
._tf {
width: 980px; height: 721px; transform: scale(.741); transform-origin: top left;
display: grid; grid-template-rows: auto auto minmax(0, 1fr);
background: linear-gradient(var(--bg-top), #0c0d11 52%, var(--bg-bottom));
font: 400 13.5px/1.5 var(--sans);
}
.phone {
width: 305px; height: 534px; flex: 0 0 auto;
border: 1px solid var(--line2); border-radius: 22px; padding: 8px;
background: #16181d; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
._nd { width: 100%; height: 100%; border-radius: 15px; overflow: hidden; background: var(--bg); }
._md {
width: 390px; height: 700px; transform: scale(.741); transform-origin: top left;
background: linear-gradient(var(--bg-top), #0c0d11 52%, var(--bg-bottom));
font: 400 15px/1.5 var(--sans);
}
.cursor {
position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none;
transition: transform .46s cubic-bezier(.24, .66, .3, 1); will-change: transform;
}
.cursor.drag { transition: transform .1s linear; }
.cursor svg { display: block; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .7)); }
.cursor ._ee {
position: absolute; left: -15px; top: -15px; width: 34px; height: 34px;
border-radius: 50%; border: 2px solid var(--accent); opacity: 0;
}
.cursor.click ._ee { animation: ping .62s ease-out; }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
._de { display: flex; align-items: center; gap: 20px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.chaps { display: flex; gap: 10px; flex: 0 0 auto; }
.chap {
display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
width: 216px; padding: 0; cursor: pointer; background: none; border: none; text-align: left;
}
.chap i { width: 100%; height: 2px; background: var(--line); transition: background .2s; }
.chap span { font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--fainter); }
.chap[aria-current="true"] i { background: var(--accent); }
.chap[aria-current="true"] span { color: var(--text); }
.caption { margin: 0 0 0 auto; flex: 1 1 320px; min-width: 0; font-size: 15px; color: var(--text); text-wrap: pretty; }
._nb { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 26px; background: var(--s1); border-bottom: 1px solid var(--line); box-shadow: inset 0 1px 0 #1c1f25; }
._nb .mark { width: 20px; height: 20px; }
._nb ._uf { font-size: 15px; }
._fe { width: 1px; height: 15px; background: var(--line3); flex: 0 0 auto; }
.who { font-size: 14.5px; font-weight: 500; }
._n { font-size: 13.5px; color: var(--dim); }
._ob { display: flex; align-items: center; gap: 10px; margin-left: auto; }
._la { width: 8px; height: 8px; border-radius: 50%; background: var(--fainter); flex: 0 0 auto; }
._la.live { background: var(--live); box-shadow: 0 0 0 5px rgba(58, 213, 152, .13); }
._x { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; background: var(--s2); border: 1px solid var(--line2); border-radius: 2px; color: var(--text2); font: 400 12.5px/1 var(--sans); }
._x ._oc { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
._x ._wc { color: var(--live); }
._pd { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px; border: 1px solid var(--line2); background: var(--s2); border-radius: 2px; font-size: 12.5px; color: var(--text2); }
._b { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px; border-radius: 2px; font: 600 12.5px/1 var(--sans); background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink); }
._b ._xc { display: none; }
._jf { display: flex; align-items: flex-end; gap: 26px; height: 44px; padding: 0 26px; border-bottom: 1px solid var(--line); }
.tab { padding: 0 0 9px; font: 500 15px/1 var(--sans); letter-spacing: -.01em; border-bottom: 1.5px solid transparent; opacity: .45; }
._nf { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-bottom: 6px; }
._ke { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 9px; min-width: 230px; background: var(--s2); border: 1px solid var(--line2); border-radius: 2px; color: var(--faint); font: 400 12.5px/1 var(--sans); }
._ke span { flex: 1 1 auto; }
._dc { font: 400 11px/1 var(--mono); color: var(--faint); background: var(--s3); border: 1px solid var(--line2); border-radius: 2px; padding: 4px 5px; }
._ib { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; background: var(--s2); border: 1px solid var(--line2); border-radius: 3px; color: var(--text2); font: 400 12.5px/1 var(--sans); }
._sf { padding: 30px 26px; overflow: hidden; }
._y { max-width: 900px; margin: 0 auto; }
._bd { display: none; }
._oe { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
._oe h3 { font: 600 19px/1.3 var(--sans); letter-spacing: -.02em; }
._oe._me { margin-top: 36px; }
._ba { color: var(--faint); font-size: 13px; }
.looks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.look { position: relative; display: flex; flex-direction: column; border-radius: 4px; background: var(--s2); border: 1px solid var(--line); }
.look ._na { display: flex; flex-direction: column; align-items: flex-start; padding: 16px 16px 12px; }
.look .tile { width: 38px; height: 38px; border-radius: 3px; display: grid; place-items: center; font: 500 14px/1 var(--sans); margin-bottom: 26px; background: var(--s3); color: var(--text2); }
.look .name { font-size: 15px; font-weight: 500; }
.look .meta { font: 400 12.5px/1.5 var(--mono); margin-top: 2px; color: var(--faint); }
.look.worn { background: var(--accent-panel); border-color: var(--accent); }
.look.worn .tile { background: rgba(92, 200, 255, .18); color: var(--accent); }
.look.worn .meta { color: var(--accent); }
.look.withheld { border-color: rgba(255, 180, 84, .28); }
.look.withheld .meta { color: var(--warn); }
._be { display: flex; align-items: center; gap: 9px; height: 30px; margin: auto 16px 16px; padding: 0 9px; border-radius: 3px; background: var(--s1); border: 1px solid var(--line2); color: var(--text2); font: 400 12.5px/1 var(--sans); }
._be span:first-child { flex: 1 1 auto; }
._be ._vc { display: inline; }
._be ._yc { display: none; }
._be.on { background: rgba(58, 213, 152, .09); border-color: rgba(58, 213, 152, .34); color: var(--live); }
._be.on ._vc { display: none; }
._be.on ._yc { display: inline; }
._ff { position: relative; display: inline-block; width: 30px; height: 17px; flex: 0 0 auto; }
._ff i { position: absolute; inset: 0; border-radius: 999px; background: var(--s2); border: 1px solid var(--line2); }
._ff i::after { content: ""; position: absolute; top: 1px; left: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--fainter); transition: transform .14s, background .14s; }
._be.on ._ff i { background: rgba(58, 213, 152, .22); border-color: var(--live); }
._be.on ._ff i::after { transform: translateX(13px); background: var(--live); }
._qd.on ._ff i { background: var(--accent-track); border-color: var(--accent); }
._qd.on ._ff i::after { transform: translateX(13px); background: var(--accent); }
._je { display: flex; align-items: center; gap: 10px; margin-top: 12px; border: 1px dashed var(--line2); border-radius: 4px; padding: 14px 16px; }
._je .icon { color: var(--faint); }
._je .draft { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--faint); }
._je .draft.filled { color: var(--text); }
._he { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; font: 600 12.5px/1 var(--sans); background: var(--accent); border: 1px solid var(--accent); border-radius: 2px; color: var(--accent-ink); }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) 300px 64px; gap: 20px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.prow ._vd { font-size: 14px; font-weight: 450; }
.prow .track { height: 3px; background: var(--s3); position: relative; }
.prow .track i { position: absolute; top: 0; left: 0; height: 100%; background: var(--accent); }
.prow .pval { font: 400 13px/1 var(--mono); color: var(--text2); text-align: right; }
._qb { background: var(--s1); border: 1px solid var(--line); border-radius: 4px; padding: 20px 22px; }
._ub { display: flex; align-items: flex-start; gap: 24px; }
._ub ._la { margin-top: 6px; }
._vb { flex: 1 1 auto; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
._rb { font-size: 15px; font-weight: 500; }
._tb { font-size: 14px; color: var(--dim); }
._jc { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
._ic { font: 500 19px/1.2 var(--mono); letter-spacing: -.02em; color: var(--dim); }
._xb { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; background: var(--s3); border: 1px solid var(--line2); border-radius: 3px; color: var(--text2); }
._sb { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--faint); max-width: 78ch; }
._gf { display: flex; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
._qd { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; border-radius: 2px; background: var(--s2); border: 1px solid var(--line2); color: var(--text2); font: 400 13px/1 var(--sans); }
._qd .icon { color: var(--faint); }
._qd.on { background: rgba(92, 200, 255, .09); border-color: rgba(92, 200, 255, .34); color: var(--text); }
._qd.on .icon { color: var(--accent); }
._d { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; margin-left: auto; background: var(--s2); border: 1px solid var(--line2); border-radius: 3px; color: var(--text2); font: 400 13px/1 var(--sans); }
._d .icon { transition: transform .14s; }
._f { margin-bottom: 14px; padding: 16px; background: var(--s1); border: 1px solid var(--line2); border-radius: 3px; }
._g { display: flex; align-items: center; gap: 8px; }
._ce { flex: 1 1 auto; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; background: var(--s2); border: 1px solid var(--accent); border-radius: 2px; font-size: 13.5px; color: var(--faint); }
._ce .icon { color: var(--fainter); }
._ce.filled { color: var(--text); }
._e { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; font: 600 13px/1 var(--sans); background: var(--accent); border: 1px solid var(--accent); border-radius: 2px; color: var(--accent-ink); }
._ka { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; font: 500 13px/1 var(--sans); background: var(--s2); border: 1px solid var(--line2); border-radius: 2px; color: var(--text); }
.matches { display: flex; flex-direction: column; margin-top: 8px; background: var(--stage); border: 1px solid var(--line); border-radius: 2px; }
._lc { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); font: 400 13.5px/1.4 var(--sans); }
._lc:last-child { border-bottom: none; }
._lc ._nc { font: 400 12px/1 var(--mono); color: var(--fainter); }
._lc ._sc { font: 400 12.5px/1 var(--mono); color: var(--faint); }
.ctrl { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.ctrl .id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctrl .label { font-size: 14.5px; font-weight: 450; }
.ctrl .real { font: 400 12.5px/1 var(--mono); color: var(--faint); }
.ctrl ._ef { font: 400 12.5px/1 var(--mono); color: var(--dim); }
.ctrl ._w { color: var(--fainter); }
.ctrl.withheld { border-left: 2px solid var(--warn); padding-left: 12px; }
.ctrl.withheld ._ef { color: var(--warn); }
.ctrl._fb { background: rgba(92, 200, 255, .06); }
._lf { font: 400 11px/1 var(--sans); border-radius: 2px; padding: 4px 6px; color: var(--adult); border: 1px solid rgba(240, 122, 192, .34); background: rgba(240, 122, 192, .09); }
._ga { border-bottom: 1px solid var(--line); }
._ga .ctrl { border-bottom: none; }
._fa { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; padding: 0 4px 14px; }
._sa { display: flex; flex-direction: column; gap: 5px; flex: 1 1 220px; min-width: 0; }
._wa { font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
._va { height: 38px; display: flex; align-items: center; padding: 0 11px; background: var(--s2); border: 1px solid var(--accent); border-radius: 2px; font-size: 13.5px; color: var(--faint); }
._va.filled { color: var(--text); }
._h { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; background: var(--s2); border: 1px solid var(--line2); border-radius: 2px; color: var(--text2); font: 400 13px/1 var(--sans); }
._ie { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; font: 600 13px/1 var(--sans); background: var(--accent); border: 1px solid var(--accent); border-radius: 2px; color: var(--accent-ink); }
.why { flex: 1 1 100%; margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--faint); text-wrap: pretty; }
.audit { margin-top: 28px; }
._i { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
._i ._of { font: 400 12px/1 var(--mono); color: var(--fainter); }
._i .what { color: var(--text2); }
._i ._zc { font: 400 12px/1 var(--mono); color: var(--live); }
._ed { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 20px 20px 16px; }
._ed .mark { width: 24px; height: 24px; }
._ed ._uf { font-size: 14px; }
._ed ._la { margin-left: auto; }
._id { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; flex: 0 0 auto; border-radius: 2px; background: rgba(92, 200, 255, .09); border: 1px solid rgba(92, 200, 255, .34); color: var(--accent); font: 500 12px/1 var(--sans); white-space: nowrap; }
._zd { flex: 1 1 100%; font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
._fd { padding: 0 20px 20px; }
._od { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
._od .tile { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 4px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 600 20px/1 var(--sans); }
._od ._ec { display: block; margin-bottom: 6px; }
._od ._tc { font: 600 25px/1.15 var(--sans); letter-spacing: -.03em; }
._od ._rc { font-size: 13px; color: var(--faint); margin-top: 4px; }
._wd { font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin: 0 0 10px; }
._ud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; }
._td { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 92px; padding: 12px; border-radius: 4px; background: var(--s2); border: 1px solid var(--line2); }
._td .tile { width: 34px; height: 34px; border-radius: 3px; margin-bottom: 6px; display: grid; place-items: center; font: 500 13px/1 var(--sans); background: var(--s3); border: 1px solid var(--line2); color: var(--text2); }
._td .name { font-size: 14.5px; font-weight: 500; }
._td .meta { font: 400 12px/1.4 var(--mono); color: var(--faint); }
._td.active { background: var(--accent-panel); border-color: var(--accent); }
._td.active .tile { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
._td.active .meta { color: var(--accent); }
._jd { padding: 14px 0; border-bottom: 1px solid var(--line); }
._jd:last-child { border-bottom: none; }
._ae { display: flex; align-items: center; gap: 14px; min-height: 38px; }
._ae ._fc { flex: 1 1 auto; font-size: 15.5px; font-weight: 450; }
._ae ._pf { font: 500 13.5px/1 var(--mono); color: var(--accent); }
._ae ._pf.off { color: var(--faint); }
.switch { position: relative; width: 52px; height: 31px; flex: 0 0 auto; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--s2); border: 1px solid var(--line2); }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: var(--fainter); transition: transform .16s, background .16s; }
._xd { height: 10px; background: #262a31; margin-top: 6px; position: relative; }
._xd i { position: absolute; left: 0; top: 0; height: 100%; width: 39%; background: var(--accent); }
._xd b { position: absolute; left: 39%; top: -9px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: var(--accent); border: 4px solid var(--bg); box-shadow: 0 2px 8px rgba(0, 0, 0, .55); }
._kd { display: flex; justify-content: space-between; font: 400 12px/1 var(--mono); color: var(--fainter); margin-top: 12px; }
._hd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
._gd { min-height: 44px; display: grid; place-items: center; border-radius: 2px; background: var(--s2); border: 1px solid var(--line2); font: 450 14.5px/1.25 var(--sans); }
._gd.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
._yd { text-align: center; text-wrap: pretty; background: var(--s1); border: 1px solid var(--line); border-radius: 4px; padding: 40px 22px 32px; margin-top: 60px; }
._yd .tile { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 20px; border-radius: 4px; background: var(--s2); border: 1px solid var(--line2); color: var(--faint); }
._yd h4 { font: 600 21px/1.2 var(--sans); letter-spacing: -.02em; margin: 0; }
._yd p { font-size: 14.5px; color: var(--dim); margin: 10px auto 0; max-width: 34ch; }
._yd .next { font-size: 13px; color: var(--faint); margin-top: 14px; max-width: 38ch; }
#stage[data-tab="wear"] ._dd { display: block; }
#stage[data-tab="share"] ._cd { display: block; }
#stage[data-tab="wear"] ._if,
#stage[data-tab="share"] ._hf { opacity: 1; border-bottom-color: var(--accent); }
#stage[data-looks="3"] ._kc { display: none; }
#stage[data-shared="4"] ._ea { display: none; }
#stage:not([data-add="1"]) ._f { display: none; }
#stage[data-add="1"] ._d { border-color: var(--accent); color: var(--accent); }
#stage[data-add="1"] ._d .icon { transform: rotate(45deg); }
#stage:not([data-query="1"]) .matches { display: none; }
#stage[data-hot="1"] ._lc:first-child { background: var(--s2); }
#stage[data-live="1"] ._pd { border-color: rgba(58, 213, 152, .34); background: rgba(58, 213, 152, .09); color: var(--text); }
#stage[data-live="1"] ._pd ._la { background: var(--live); box-shadow: 0 0 0 5px rgba(58, 213, 152, .13); }
#stage[data-live="1"] ._b { background: rgba(255, 95, 107, .1); border-color: rgba(255, 95, 107, .34); color: var(--danger-text); }
#stage[data-live="1"] ._b ._uc { display: none; }
#stage[data-live="1"] ._b ._xc { display: inline-flex; }
#stage[data-live="1"] ._qb { border-color: #2c4c41; }
#stage[data-live="1"] ._qb ._la { background: var(--live); box-shadow: 0 0 0 5px rgba(58, 213, 152, .13); }
#stage[data-live="1"] ._ic { color: var(--text); }
#stage[data-live="1"] ._yd { display: none; }
#stage:not([data-live="1"]) ._sd { display: none; }
#stage:not([data-live="1"]) ._jc { display: none; }
#stage:not([data-row="1"]) ._fa { display: none; }
#stage[data-row="1"] ._ga ._w { transform: rotate(90deg); }
#stage:not([data-phone="1"]) .phone { display: none; }
#stage:not([data-live="1"]) .phone ._la { background: var(--fainter); box-shadow: none; }
#stage[data-copied="1"] ._xb.copy { border-color: var(--accent); color: var(--accent); }
#stage[data-copied="1"] ._sb { color: var(--accent); }
#stage[data-ears="1"] .switch i { background: var(--accent-track); border-color: var(--accent); }
#stage[data-ears="1"] .switch i::after { transform: translateX(21px); background: var(--accent); }
#stage:not([data-audit="1"]) .audit { display: none; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 60px; align-items: start; }
.two-col h3 { margin-bottom: 18px; }
.need { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.need span { font-size: 15px; }
.need b { font: 400 13px/1 var(--mono); color: var(--faint); text-align: right; }
.strip { margin: 22px 0 0; padding: 12px 14px; border-left: 2px solid var(--warn); background: #15130f; font-size: 13.5px; line-height: 1.55; color: var(--text2); text-wrap: pretty; }
.step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--line); }
.step .n { font: 400 12px/1.5 var(--mono); color: var(--accent); }
.step .t { font-size: 15.5px; margin-bottom: 5px; }
.step .b { font-size: 14px; line-height: 1.6; color: var(--dim); text-wrap: pretty; }
._ua { border-top: 1px solid var(--line); background: var(--stage); margin-top: 44px; }
._ta { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; padding-top: 72px; padding-bottom: 72px; }
._ta .words { flex: 1 1 380px; min-width: 0; }
._ta h2 { font-size: 36px; margin-bottom: 14px; }
._ta p { margin: 0; font-size: 16px; color: var(--dim); max-width: 46ch; text-wrap: pretty; }
._ta ._c { display: flex; flex-direction: column; gap: 12px; flex: 0 0 auto; }
._ta ._c small { font: 400 12.5px/1 var(--mono); color: var(--faint); text-align: center; }
footer { border-top: 1px solid var(--line); }
footer .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 34px; padding-bottom: 34px; }
footer .mark { width: 20px; height: 20px; color: var(--faint); }
footer ._uf { font-size: 14px; color: var(--faint); }
footer ._uf b { color: var(--dim); }
footer small { font: 400 12.5px/1 var(--mono); color: var(--fainter); margin-left: auto; }
@media (max-width: 940px) {
.wrap { padding-left: 22px; padding-right: 22px; }
.top { padding: 0 22px; }
.top nav { display: none; }
._ne { grid-template-columns: minmax(0, 1fr); gap: 20px; }
._ne ._j { margin: 0; }
._lb { grid-template-columns: minmax(0, 1fr); gap: 28px; }
._u._mf { grid-template-columns: minmax(0, 1fr); gap: 10px; }
._ia { margin-left: 0; flex: 1 1 100%; }
.two-col { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.chaps { flex-wrap: wrap; }
.chap { width: 140px; }
._pa, ._pa._ya { grid-template-columns: minmax(0, 1fr); gap: 32px; }
._pa._ya ._cb { order: 2; }
._ra { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 720px) {
._pb { padding-top: 60px; }
._ta { padding-top: 48px; padding-bottom: 48px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}