@font-face{font-family:"Archivo";src:url(/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Mono";src:url(/fonts/mono.woff2) format("woff2");font-weight:100 800;font-display:swap}

:root{
  --bg:#f4f2ec;
  --ink:#111110;
  --dim:#4f4d48;
  --nav:#2b2a27;--mono-w:500;--smooth:auto;
  --line:rgba(17,17,16,.12);
  --acc:#ff4f1f;
  --scan:#000;--scan-o:.012;--grid-o:.5;--spot:rgba(255,79,31,.06);--hov:#a8a69f;--plus:rgba(17,17,16,.25);--shadow:rgba(0,0,0,.16);
  --pad:max(clamp(20px,4vw,56px),calc((100vw - 1360px) / 2));
  --mx:50vw;--my:30vh;
}
[data-theme=dark]{--nav:#b9b8b2;--mono-w:450;--smooth:antialiased;--bg:#08090a;--ink:#f2f1ec;--dim:#a6a59f;--line:rgba(236,235,230,.12);--scan:#fff;--scan-o:.03;--grid-o:.35;--spot:rgba(255,79,31,.07);--hov:#55554f;--plus:rgba(236,235,230,.3);--shadow:rgba(0,0,0,.5);color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 17px/1.55 "Archivo",system-ui,sans-serif;font-stretch:100%;-webkit-font-smoothing:var(--smooth);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;opacity:var(--grid-o);
  -webkit-mask-image:radial-gradient(520px circle at var(--mx) var(--my),#000 0,transparent 70%);
  mask-image:radial-gradient(520px circle at var(--mx) var(--my),#000 0,transparent 70%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:var(--scan-o);
  background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px)}
.spot{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(600px circle at var(--mx) var(--my),var(--spot),transparent 60%)}
a{color:inherit;text-decoration:none}
::selection{background:var(--acc);color:#000}
.mono{font-family:"Mono",ui-monospace,monospace;font-size:12px;font-weight:var(--mono-w);letter-spacing:.08em;text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main,.foot,.bar{position:relative;z-index:1}

.bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:32px;padding:18px var(--pad);
  background:linear-gradient(var(--bg) 30%,transparent)}
.brand{display:flex;align-items:center;color:var(--ink)}
.brand .wm{height:22px;width:auto;display:block}
.bar nav{display:flex;gap:28px;margin-left:auto}
.bar nav a{font-family:"Mono",monospace;font-size:12px;font-weight:var(--mono-w);letter-spacing:.08em;text-transform:uppercase;color:var(--nav);transition:color .2s}
.bar nav a:hover{color:var(--ink)}
.status{display:flex;align-items:center;gap:6px;color:var(--nav);min-width:30ch;white-space:nowrap}
.status .cur{color:var(--acc);font-weight:400;animation:blink 1s steps(1) infinite}

.hero{position:relative;height:100svh;min-height:560px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) 28px}
.hero-wm{position:absolute;left:50%;top:42%;width:min(46vw,600px);transform:translate(-50%,-50%);overflow:visible;opacity:0;animation:wm-show 0s 2.5s forwards}
.hero-wm.go{opacity:1;animation:none}
.hero-wm path,.hero-wm circle{transform-box:fill-box;transform-origin:center}
#cam{transform-box:view-box;transform-origin:0 0}
@keyframes wm-show{to{opacity:1}}
@media (max-width:900px){.hero-wm{top:36%;width:72vw}}
@media (prefers-reduced-motion:reduce){.hero-wm{opacity:1}}
.hero-copy{position:relative;max-width:600px;margin-bottom:56px;pointer-events:none}
.kicker{color:var(--acc);margin-bottom:14px}
.lede{font-size:clamp(18px,1.8vw,23px);line-height:1.3;font-weight:500;font-stretch:90%}
.hero-meta{position:relative;display:flex;justify-content:space-between;gap:16px;color:var(--dim);border-top:1px solid var(--line);padding-top:16px;pointer-events:none}
.scroll b{display:inline-block;color:var(--acc);animation:nudge 1.6s infinite}
@keyframes nudge{50%{transform:translateY(4px)}}

.term{border-block:1px solid var(--line);padding:18px var(--pad);font:400 14px/1.9 "Mono",ui-monospace,monospace;color:var(--ink)}
.term .pr{color:var(--acc)}
.term .tc{display:inline-block;width:8px;height:15px;background:var(--ink);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
.term .out{display:flex;flex-wrap:wrap;gap:4px 28px;color:var(--dim);min-height:1.9em}
.term .out b{color:var(--acc);font-weight:400}
.typed{color:var(--ink)}
@keyframes blink{50%{opacity:0}}

.block{padding:clamp(80px,12vw,160px) var(--pad) 40px;position:relative}
.head{display:grid;grid-template-columns:80px 1fr auto;align-items:end;gap:20px;border-bottom:1px solid var(--line);padding-bottom:24px}
.idx{color:var(--acc)}
h2{font-size:clamp(40px,6.4vw,92px);line-height:.88;font-weight:850;font-stretch:125%;letter-spacing:-.02em;text-transform:uppercase}
.note{color:var(--dim);max-width:280px;text-align:right}

.list{list-style:none;counter-reset:none}
.list li{border-bottom:1px solid var(--line)}
.list a{display:grid;grid-template-columns:80px 48px minmax(180px,1.1fr) 2fr 190px 32px;align-items:center;gap:24px;padding:30px 0;position:relative;transition:padding .35s cubic-bezier(.2,.8,.2,1)}
.list a::before{content:"";position:absolute;inset:0 calc(var(--pad)*-1);background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:-1}
.list a:hover::before,.list a:focus-visible::before{transform:scaleY(1)}
.list a:hover,.list a:focus-visible{color:var(--bg);padding-left:16px}
.list a:hover .n,.list a:hover .p,.list a:hover em{color:var(--hov)}
.list a:focus-visible{outline:none}
.n{color:var(--dim)}
.ic{width:48px;height:48px;border-radius:12px;filter:grayscale(1);transition:filter .3s}
.list a:hover .ic{filter:none}
.t b{display:block;font-size:clamp(19px,1.8vw,24px);font-weight:750;font-stretch:110%;line-height:1.1}
.t em{font-style:normal;color:var(--dim);font-size:14px}
.d{color:inherit;opacity:.8;font-size:15px;max-width:520px}
.p{color:var(--dim)}
.go{font-size:24px;justify-self:end;transition:transform .35s}
.list a:hover .go{transform:translate(4px,-4px);color:var(--acc)}
.more .row{display:grid;grid-template-columns:80px 48px 1fr;align-items:center;gap:24px;padding:30px 0}
.more .t b{color:var(--dim)}
.plus{position:relative;border:1px dashed var(--plus);filter:none}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;background:var(--dim);transform:translate(-50%,-50%)}
.plus::after{width:2px;height:16px}
.float{position:fixed;left:0;top:0;width:120px;height:120px;border-radius:26px;pointer-events:none;z-index:30;opacity:0;
  transform:translate(-50%,-50%) scale(.6) rotate(-8deg);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 20px 60px var(--shadow)}
.float.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}

.caps{display:grid;grid-template-columns:repeat(4,1fr);margin:80px var(--pad) 0;border-block:1px solid var(--line)}
.caps div{padding:36px 28px 36px 0;border-right:1px solid var(--line);margin-right:28px}
.caps div:last-child{border:0;margin:0}
.caps span{color:var(--acc)}
.caps h3{font-size:19px;font-weight:700;font-stretch:110%;margin:14px 0 8px}
.caps p{color:var(--dim);font-size:15px}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.rules article{padding:40px 32px 40px 0;border-right:1px solid var(--line);margin-right:32px}
.rules article:last-child{border:0;margin:0}
.rules span{color:var(--acc)}
.rules h3{font-size:clamp(20px,1.9vw,26px);font-weight:750;font-stretch:110%;margin:18px 0 12px;line-height:1.1}
.rules p{color:var(--dim);max-width:360px}

.contact{padding:clamp(100px,14vw,200px) var(--pad);position:relative;border-top:1px solid var(--line);margin-top:80px}
.contact .idx{position:absolute;top:32px;left:var(--pad)}
.contact h2{margin-bottom:28px}
.mail{display:inline-block;font-size:clamp(22px,3.6vw,48px);font-weight:500;font-stretch:100%;color:var(--acc);border-bottom:2px solid currentColor;line-height:1.15;font-family:"Mono",monospace;letter-spacing:-.02em}
.mail:hover{color:var(--ink)}
.contact .note{text-align:left;margin-top:28px;max-width:none}

.foot{display:flex;justify-content:space-between;gap:16px;padding:24px var(--pad) 32px;border-top:1px solid var(--line);color:var(--dim)}
.foot a:hover{color:var(--ink)}

[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
[data-reveal].in{opacity:1;transform:none}
.js-off [data-reveal]{opacity:1;transform:none}

@media (max-width:900px){
  h2{font-size:10vw}
  .status{display:none}
  .bar nav{gap:18px}
  .head{grid-template-columns:1fr;gap:10px}
  .note{text-align:left}
  .list a{grid-template-columns:48px 1fr 24px;grid-template-areas:"ic t go" "d d d" "p p p";gap:12px 16px;padding:26px 0}
  .list .n{display:none}
  .more .row{grid-template-columns:48px 1fr;grid-template-areas:"ic t";gap:16px;padding:26px 0}
  .ic{grid-area:ic;filter:none}
  .t{grid-area:t}.d{grid-area:d}.p{grid-area:p}.go{grid-area:go}
  .float{display:none}
  .caps{grid-template-columns:1fr 1fr}
  .caps div{padding:28px 16px 28px 0;margin-right:16px}
  .caps div:nth-child(2){border-right:0;margin-right:0}
  .caps div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .rules{grid-template-columns:1fr}
  .rules article{border-right:0;margin:0;border-bottom:1px solid var(--line);padding:32px 0}
  .hero-meta span:nth-child(2){display:none}
}
@media (max-width:560px){.caps{grid-template-columns:1fr}.caps div,.caps div:nth-child(2){border-right:0;margin-right:0;border-bottom:1px solid var(--line);padding:24px 0}.caps div:last-child{border-bottom:0}}
@media (max-width:520px){.bar nav a:nth-child(2){display:none}.foot{flex-direction:column}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}
.lost{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:0 var(--pad)}

h2{overflow-wrap:break-word}
.lang{position:relative;color:var(--nav)}
.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:4px 0;transition:color .2s}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.lang[open] summary::after{transform:translateY(1px) rotate(225deg)}
.lang summary:hover,.lang[open] summary{color:var(--ink)}
.lang summary:focus-visible{outline:1px solid var(--acc);outline-offset:4px}
.lang-menu{position:absolute;top:calc(100% + 12px);inset-inline-end:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 20px;width:max-content;max-width:calc(100vw - 32px);padding:14px 18px;background:var(--bg);border:1px solid var(--line);box-shadow:0 20px 60px var(--shadow)}
.lang-menu a{padding:6px 0;color:var(--dim);letter-spacing:.04em;text-transform:none;white-space:nowrap;transition:color .2s}
.lang-menu a:hover,.lang-menu a:focus-visible{color:var(--ink);outline:none}
.lang-menu a[aria-current]{color:var(--acc)}
@media (max-width:900px){.bar{gap:20px}}
@media (max-width:520px){.bar{gap:14px}.bar nav{gap:14px}}

[dir=rtl] .note{text-align:left}
[dir=rtl] .contact .note{text-align:right}
[dir=rtl] .contact .idx{left:auto;right:var(--pad)}
[dir=rtl] .bar nav{margin-left:0;margin-right:auto}
[dir=rtl] .list a:hover,[dir=rtl] .list a:focus-visible{padding-left:0;padding-right:16px}
[dir=rtl] .caps div{padding:36px 0 36px 28px;border-right:0;border-left:1px solid var(--line);margin-right:0;margin-left:28px}
[dir=rtl] .caps div:last-child{border:0;margin:0}
[dir=rtl] .rules article{padding:40px 0 40px 32px;border-right:0;border-left:1px solid var(--line);margin-right:0;margin-left:32px}
[dir=rtl] .rules article:last-child{border:0;margin:0}
[dir=rtl] .list .go{transform:scaleX(-1)}
[dir=rtl] .list a:hover .go{transform:scaleX(-1) translate(4px,-4px)}
[dir=rtl] .hero-wm{direction:ltr}
[lang=ar] .mono,[lang=ar] h2,[lang=ar] .bar nav a{letter-spacing:0}
[lang=ar] .mono,[lang=ar] .bar nav a,.lang-menu a[lang=ar]{font-family:"Archivo",system-ui,sans-serif;font-size:13px}
.lang-menu a[lang=ar]{letter-spacing:0}
[dir=rtl] .hero-meta span:not(.scroll),[dir=rtl] .p,[dir=rtl] .n,[dir=rtl] .idx,[dir=rtl] .rules span,[dir=rtl] .foot span{font-family:"Mono",ui-monospace,monospace}
@media (max-width:900px){
  [dir=rtl] .note{text-align:right}
  [dir=rtl] .caps div{padding:28px 0 28px 16px;margin-left:16px}
  [dir=rtl] .caps div:nth-child(2){border-left:0;margin-left:0}
  [dir=rtl] .rules article{border-left:0;margin:0;padding:32px 0}
}
@media (max-width:560px){[dir=rtl] .caps div,[dir=rtl] .caps div:nth-child(2){border-left:0;margin-left:0;padding:24px 0}}
.legal{max-width:calc(760px + var(--pad) * 2);padding:clamp(120px,16vw,180px) var(--pad) 96px}
.legal h1{font-size:clamp(40px,6.4vw,92px);line-height:.88;font-weight:850;font-stretch:125%;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:20px}
.legal .note{text-align:left;max-width:none;margin-bottom:48px}
.legal .legal-h{font-size:clamp(19px,1.8vw,24px);line-height:1.2;font-weight:750;font-stretch:110%;letter-spacing:0;text-transform:none;margin:40px 0 10px}
.legal p{color:var(--dim);max-width:680px}
.legal a{color:var(--acc);border-bottom:1px solid currentColor}
.legal a:hover{color:var(--ink)}
.legal code{font-family:"Mono",ui-monospace,monospace;font-size:.9em;color:var(--ink)}
.legal p.kicker{color:var(--acc)}
.hero-wm path[stroke="#ecebe6"]{stroke:var(--ink)}
.theme{display:grid;place-items:center;width:28px;height:28px;background:none;border:0;color:var(--dim);cursor:pointer;transition:color .2s}
.theme:hover{color:var(--ink)}
.theme:focus-visible{outline:1px solid var(--acc);outline-offset:4px}
.theme i{width:14px;height:14px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
[data-theme=dark] .theme i{transform:rotate(180deg)}
[dir=rtl] .term{direction:ltr}