:root{color-scheme:light;--page:#ffffff;--text:#111111;--muted:#666666;--line:#dedede;--band:#ededed;--band-line:#d0d0d0;
  --btn:#111111;--btn-text:#ffffff;--hatch:#9a9a9a;--frame:#111111}
:root[data-mode="dark"]{color-scheme:dark;--page:#121212;--text:#ececec;--muted:#9a9a9a;--line:#2a2a2a;--band:#1c1c1c;--band-line:#323232;
  --btn:#ececec;--btn-text:#111111;--hatch:#4a4a4a;--frame:#ececec}
*{box-sizing:border-box} html,body{margin:0}
body{font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--page);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color .25s ease,color .25s ease;
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.hero{background:#0c0c0c;color:#f2f2f2}
.top{border-bottom:1px solid #262626}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.brand{font-weight:600;font-size:13px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:#fff;white-space:nowrap}
.top nav{display:flex;align-items:center}
.top nav a{margin-left:32px;text-decoration:none;color:#8c8c8c;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.top nav a:hover{color:#fff}
.mode{display:none;margin-left:26px;width:32px;height:32px;padding:0;border:0;background:none;color:#8c8c8c;cursor:pointer;place-items:center}
.js .mode{display:inline-grid}
.mode span{width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
:root[data-mode="dark"] .mode span{background:linear-gradient(90deg,transparent 50%,currentColor 50%)}
.mode:hover{color:#fff} .mode:focus-visible,.top a:focus-visible{outline:1px solid #fff;outline-offset:4px}
.title{padding-top:60px;padding-bottom:52px}
.title h1{font-weight:200;font-size:clamp(44px,5.2vw,80px);line-height:.9;letter-spacing:-.025em;margin:0;color:#fff}
.title h1 span{display:block;color:#6e6e6e}
.title p{font-size:clamp(16px,1.5vw,19px);color:#a6a6a6;margin:20px 0 0;max-width:32em}
.strip{border-top:1px solid #262626}
.facts-row{display:grid;grid-template-columns:repeat(3,1fr)}
.facts-row div{padding:16px 24px 20px 0}
.facts-row div+div{padding-left:28px;border-left:1px solid #262626}
.facts-row small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#858585;margin:0 0 6px}
.facts-row b,.facts-row a{font-weight:400;font-size:18px;color:#f2f2f2;text-decoration:none;overflow-wrap:anywhere}
.facts-row a:hover{text-decoration:underline}
.ramp{height:8px;background:linear-gradient(90deg,#000 0 12.5%,#1d1d1d 0 25%,#383838 0 37.5%,#565656 0 50%,#787878 0 62.5%,#9d9d9d 0 75%,
  #c5c5c5 0 87.5%,#ededed 0)}
.sec{padding-top:88px;padding-bottom:100px}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding:0 0 14px;margin:0 0 52px}
.band .head{border-color:var(--band-line)}
.label{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0}
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
.ink{position:relative}
.ink::before{content:"";position:absolute;inset:0;transform:translate(14px,14px);
  background:repeating-linear-gradient(135deg,var(--hatch) 0 1px,transparent 1px 6px);border:1px solid var(--hatch)}
.ink img{position:relative;display:block;width:100%;height:auto;border:1px solid var(--frame)}
.status{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);padding:5px 12px;margin:0 0 20px}
.feature h2{font-weight:200;font-size:clamp(40px,5vw,64px);line-height:1;letter-spacing:-.02em;margin:0 0 18px}
.feature p,.lead{color:var(--muted);margin:0 0 32px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.button{display:inline-block;background:var(--btn);color:var(--btn-text);text-decoration:none;font-weight:600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;padding:14px 24px;border:1px solid var(--btn);transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.button:hover{background:transparent;color:var(--text)}
.button.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.button.ghost:hover{border-color:var(--text)}
.band{background:var(--band);transition:background-color .25s ease}
.contacts{display:grid;grid-template-columns:repeat(3,1fr)}
.contact{padding:0 28px 0 0}
.contact+.contact{padding-left:28px;border-left:1px solid var(--band-line)}
.contact h3{font-weight:600;font-size:17px;margin:0 0 4px}
.contact p{margin:0 0 14px;color:var(--muted);font-size:15px;line-height:1.5}
.contact a{font-size:15px;font-weight:600;overflow-wrap:anywhere}
footer{background:#0c0c0c;color:#8a8a8a;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;padding-top:34px;padding-bottom:40px}
footer .brand{font-size:12px} footer .copy{margin-left:16px}
footer nav a{margin-left:24px;color:#8a8a8a;text-decoration:none}
footer nav a:hover{color:#fff}
footer .note{flex-basis:100%;margin:0;font-size:12.5px;line-height:1.5;color:#7d7d7d}
.game{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:start;margin:0 0 72px}
.game .lead{margin:0;font-size:19px}
.facts{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.facts li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts span{color:var(--muted);text-align:right}
.pics{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.hero.short .title{padding-top:52px;padding-bottom:46px}
.hero.short h1{font-size:clamp(40px,4.6vw,64px)}
.hero.short .title p{margin-top:16px;font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#8c8c8c}
@media (max-width:760px){
  .wrap{padding:0 20px} .top .wrap{height:64px} .brand{font-size:11.5px;letter-spacing:.14em}
  .top nav a{margin-left:14px;font-size:11.5px;letter-spacing:.1em} .mode{margin-left:8px;width:30px}
  .title{padding-top:40px;padding-bottom:34px} .title h1{font-size:12vw} .title p{margin-top:16px}
  .hero.short .title{padding-top:34px;padding-bottom:32px} .hero.short h1{font-size:10vw}
  .facts-row{grid-template-columns:1fr 1fr} .facts-row div,.facts-row div+div{padding:12px 0 14px;border-left:0}
  .facts-row div:nth-child(2){padding-left:16px;border-left:1px solid #262626}
  .facts-row div:nth-child(3){grid-column:1/-1;border-top:1px solid #262626}
  .sec{padding-top:60px;padding-bottom:68px} .head{margin-bottom:34px}
  .feature,.game{grid-template-columns:1fr;gap:38px} .game{gap:30px;margin-bottom:44px} .game .lead{font-size:17px}
  .pics{grid-template-columns:1fr;gap:36px}
  .contacts{grid-template-columns:1fr} .contact,.contact+.contact{padding:20px 0;border-left:0}
  .contact+.contact{border-top:1px solid var(--band-line)}
  footer nav a{margin:0 18px 0 0}
}
@media (prefers-reduced-motion:reduce){body,.band,.button{transition:none}}