@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("core/web/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

:root{
  --bg:#150e09; --bg-deep:#0e0906;
  --wood:#4a3325;
  --frame:#8a6247; --frame-dim:#5f4534;
  --ink:#f6e3c0; --ink-dim:#c9b391; --muted:#a08a72; --muted-dim:#9c8570;
  --accent:#9fe0a8; --warn:#ffd166;
  --display:"Rubik Mono One","Courier New",monospace;
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.65 var(--mono);
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 80% at 50% 0%, #241710 0%, var(--bg) 45%, var(--bg-deep) 100%);
  background-attachment:fixed;
}
a{color:var(--accent); text-decoration-color:var(--frame-dim); text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--warn); outline-offset:3px}

.wrap{max-width:1180px; margin:0 auto; padding:56px 20px 40px}

.brandline{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:31px}
.brand{font-family:var(--display); font-size:clamp(26px,5vw,46px); letter-spacing:-.02em; line-height:1.15}
.brand em{font-style:normal; color:var(--warn)}
.tag{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); padding-bottom:4px}
.langbar{margin-left:auto; display:flex; border:2px solid var(--frame-dim); align-self:center}
.langbar button{
  font:600 11px var(--mono); letter-spacing:.16em; background:transparent; color:var(--muted);
  border:0; padding:7px 12px; cursor:pointer;
}
.langbar button:hover{color:var(--ink)}
.langbar button[aria-pressed="true"]{background:var(--wood); color:var(--ink)}

.screen{margin:0 0 60px; max-width:1000px; border:2px solid var(--frame-dim); line-height:0}
.screen canvas{display:block; width:100%; height:auto; image-rendering:pixelated}

h1{
  font-family:var(--display); font-weight:400; margin:0 0 32px;
  font-size:clamp(21px,3.9vw,36px); line-height:1.18; letter-spacing:-.015em;
}
h1 em{font-style:normal; color:var(--warn)}
.lede{color:var(--ink-dim); font-size:clamp(15px,1.9vw,17px); max-width:64ch; margin:0 0 40px}

.cta{display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:40px}
.btn{
  display:inline-flex; align-items:center; gap:12px; flex:none;
  background:var(--wood); border:2px solid var(--frame); color:var(--ink);
  padding:14px 22px; text-decoration:none;
  font:600 14px var(--mono); letter-spacing:.13em; text-transform:uppercase;
}
.btn:hover{background:#5a3f2d}
.btn kbd{color:var(--warn); font:inherit; font-size:1.5em; letter-spacing:0; line-height:0; transform:translateY(-0.048em)}
.ctatext{display:grid; gap:3px; min-width:0}
.ctatext p{margin:0; font-size:13px; color:var(--muted)}
.ctatext .fine{font-size:12.5px; color:var(--muted-dim)}
.share{display:flex; gap:8px 16px; flex-wrap:wrap; align-items:baseline;
  margin:0 0 36px; font-size:12.5px; color:var(--muted)}
.share a, .share button{color:var(--ink-dim); text-decoration:none; font:inherit;
  border:0; border-bottom:1px solid var(--frame-dim); background:none; padding:0; cursor:pointer}
.share a:hover, .share button:hover{color:var(--warn); border-bottom-color:var(--warn)}
.share a:focus-visible, .share button:focus-visible{outline:2px solid var(--warn); outline-offset:3px}

footer{border-top:1px solid var(--frame-dim); padding-top:16px}
footer div{display:flex; gap:10px 26px; flex-wrap:wrap; align-items:baseline; font-size:12.5px; color:var(--muted)}
footer .dom a{font-weight:600; text-decoration:none}
footer .spacer{flex:1}

@media (max-width:760px){
  .wrap{padding:40px 20px 32px}
  .screen{margin-inline:-20px; max-width:none; border-left:0; border-right:0; margin-bottom:40px}
  .brandline{display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px 12px}
  .langbar{margin-left:0; grid-column:2; grid-row:1}
  .tag{grid-column:1 / -1; padding-bottom:0}
  .cta{gap:16px}
  .btn{width:100%; justify-content:center}
  footer .spacer{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important}}