:root { --ink:#090912; --surface:#11111e; --panel:#211d3c; --line:#2e2946; --lavender:#c9bddc; --blue:#bedaf1; --paper:#eee4d0; --paper-strong:#f5eddd; --paper-muted:#e7dac0; --text:#201e1a; --text-muted:#665f55; --rule:#b9a57e; --hero-glow:#d9c08d; --rust:#8a3e24; --button-text:#fffaf0; --footer:#201e1a; --footer-text:#f0e4ca; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:var(--paper); font-family:Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-shell { max-width:1120px; margin:0 auto; }
.site-nav { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:19px 28px; border-bottom:1px solid var(--rule); font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.brand { font-family:Georgia,serif; font-size:20px; font-weight:500; letter-spacing:.03em; text-transform:none; }
.brand span { color:var(--rust); }.nav-links { display:flex; align-items:center; gap:22px; }
.hero { min-height:538px; padding:64px 28px 45px; display:grid; grid-template-columns:minmax(0,.96fr) minmax(360px,1.04fr); gap:42px; align-items:center; background:radial-gradient(circle at 90% 8%,var(--hero-glow) 0,transparent 32%),linear-gradient(110deg,var(--paper),var(--paper-muted)); }
.kicker { color:var(--rust); letter-spacing:.15em; font-size:12px; text-transform:uppercase; }
h1 { margin:14px 0 18px; font:500 clamp(42px,6vw,68px)/.96 Georgia,serif; letter-spacing:-.04em; }
.lede { max-width:510px; font-size:17px; line-height:1.55; color:var(--text-muted); }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:13px; margin-top:28px; font-size:14px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:45px; padding:13px 20px; border:1px solid var(--rust); }
.button-demo { border-radius:999px; background:var(--rust); color:var(--button-text); }
.button-discord { border-radius:999px; background:#5865f2; border-color:#5865f2; color:#fff; }
.steam-button { display:inline-block; line-height:0; }
.steam-button img { display:block; width:auto; height:60px; margin:-7.5px 0; }
.availability { margin-top:18px; font-size:12px; color:var(--text-muted); }
.app-preview { overflow:hidden; background:var(--ink); border:7px solid #202033; box-shadow:0 22px 44px #0006; }
.app-screenshot { display:block; width:100%; height:auto; }
.appbar { display:flex; justify-content:space-between; align-items:center; padding:9px 13px; background:#10101c; border-bottom:1px solid #292440; color:#c7bdd8; font-size:10px; }
.app-title { color:#eee9f5; font:15px Georgia,serif; }.sheet { display:grid; grid-template-columns:112px 1fr; min-height:338px; }
.sidebar { padding:14px 10px; background:#11101d; border-right:1px solid #25213a; color:#aea5c1; font-size:10px; }.sidebar small { display:block; margin:2px 0 13px; color:#8f82af; font-size:8px; letter-spacing:.14em; }.sidebar div { padding:8px 6px; }.sidebar .side-label { padding:12px 3px 4px; color:var(--blue); font-size:8px; font-weight:500; letter-spacing:.13em; }.sidebar .current { color:#f1edf8; background:#2a293e; border-radius:6px; font-weight:500; }
.character { padding:15px 16px; }.character-head { display:flex; justify-content:space-between; border-bottom:1px solid #292440; padding-bottom:12px; }.character-name { color:#f1edf8; font:24px Georgia,serif; }.character-sub { margin-top:4px; color:var(--lavender); font-size:9px; }.level { padding-top:8px; color:#d5c8e9; font-size:10px; }.tabs { display:flex; gap:6px; margin-top:12px; }.tabs span { border:1px solid #3c3560; border-radius:14px; padding:5px 9px; color:#c5bbd8; font-size:9px; }.tabs .active { border-color:#b9d4ed; color:#d9edff; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:12px; }.stat { padding:9px 6px; background:var(--panel); border-radius:7px; text-align:center; }.stat strong { display:block; margin-bottom:5px; color:#f4effa; font-size:17px; font-weight:500; }.stat label { display:block; color:#b6a9d2; font-size:7px; letter-spacing:.1em; }.app-row { display:grid; grid-template-columns:1.1fr .9fr; gap:9px; margin-top:10px; }.app-panel { min-height:83px; padding:10px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }.app-panel h3 { margin:0 0 8px; color:var(--blue); font-size:8px; letter-spacing:.11em; text-transform:uppercase; }.app-panel p { margin:4px 0; color:#c9c3d4; font-size:9px; }
.proof { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--rule); }.proof div { padding:25px 28px; }.proof div+div { border-left:1px solid var(--rule); }.proof strong { display:block; margin-bottom:7px; font:500 20px Georgia,serif; }.proof span,.feature p,.feature-list span,.ogl span { color:var(--text-muted); font-size:13px; line-height:1.45; }
.feature { padding:60px 28px 65px; display:grid; grid-template-columns:.78fr 1.22fr; gap:44px; }.feature h2 { margin:8px 0 12px; font:500 37px/1.05 Georgia,serif; letter-spacing:-.03em; }.feature p { line-height:1.55; }.feature-list { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); }.feature-list div { padding:19px; background:var(--paper-strong); }.feature-list strong { display:block; font:500 17px Georgia,serif; }.feature-list span { display:block; margin-top:7px; font-size:12px; }
.ogl { padding:28px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--rule); background:var(--paper-muted); }.ogl strong { display:block; margin-bottom:5px; font:500 18px Georgia,serif; }.ogl span { font-size:12px; }.ogl a { font-size:13px; white-space:nowrap; text-decoration:underline; text-underline-offset:4px; }.site-footer { padding:30px 28px; background:var(--footer); color:var(--footer-text); font-size:12px; }
.community { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:48px 28px; border-top:1px solid var(--rule); }.community h2 { margin:8px 0 10px; font:500 30px/1.1 Georgia,serif; }.community p { max-width:580px; margin:0; color:var(--text-muted); font-size:14px; line-height:1.5; }
.notes-hero { padding:72px 28px 48px; background:radial-gradient(circle at 90% 8%,var(--hero-glow) 0,transparent 32%),linear-gradient(110deg,var(--paper),var(--paper-muted)); border-bottom:1px solid var(--rule); }.notes-hero h1 { margin-bottom:14px; }.notes { padding:12px 28px 50px; }.note { display:grid; grid-template-columns:150px minmax(0,1fr); gap:36px; padding:36px 0; border-bottom:1px solid var(--rule); }.note-date { color:var(--rust); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.note h2 { margin:0 0 10px; font:500 30px/1.1 Georgia,serif; }.note h3 { margin:22px 0 -5px; color:var(--rust); font-size:12px; letter-spacing:.12em; text-transform:uppercase; }.note p,.note li { color:var(--text-muted); font-size:15px; line-height:1.55; }.note p { margin:0; }.note ul { margin:14px 0 0; padding-left:20px; }
.mobile-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,360px); align-items:center; gap:48px; padding:62px 56px; background:radial-gradient(circle at 88% 14%,var(--hero-glow) 0,transparent 30%),linear-gradient(110deg,var(--paper),var(--paper-muted)); border-bottom:1px solid var(--rule); }.mobile-hero-copy { align-self:start; }.mobile-hero h1 { max-width:760px; margin-bottom:16px; }.mobile-hero .actions { margin-top:26px; }.play-badge { display:inline-block; line-height:0; }.play-badge img { display:block; width:172px; height:auto; }.mobile-preview { justify-self:center; max-width:340px; overflow:hidden; border:7px solid #202033; border-radius:28px; box-shadow:0 22px 44px #0006; }.mobile-preview img { display:block; width:100%; height:auto; }.mobile-content { padding:56px 28px; }.mobile-intro { max-width:680px; }.mobile-intro h2 { margin:8px 0 12px; font:500 37px/1.05 Georgia,serif; letter-spacing:-.03em; }.mobile-intro p,.mobile-card p { color:var(--text-muted); font-size:15px; line-height:1.55; }.mobile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:32px; background:var(--rule); border:1px solid var(--rule); }.mobile-card { min-height:180px; padding:24px; background:var(--paper-strong); }.mobile-card h3 { margin:0 0 9px; font:500 21px Georgia,serif; }.mobile-card p { margin:0; }
@media (prefers-color-scheme:dark) { :root { --paper:#10101a; --paper-strong:#191727; --paper-muted:#181526; --text:#eee9f5; --text-muted:#c9c0d6; --rule:#3c3560; --hero-glow:#29233d; --rust:#bf613c; --button-text:#171019; --footer:#090912; --footer-text:#e9e1f4; } .brand span { color:#e09363; } .app-preview { border-color:#312a50; } }
@media (max-width:760px) { .site-nav { padding:17px 20px; }.nav-links { gap:14px; letter-spacing:.07em; }.hero { grid-template-columns:1fr; min-height:0; padding:46px 20px 36px; gap:30px; }.app-preview { max-width:680px; width:100%; margin:0 auto; }.proof { grid-template-columns:1fr; }.proof div { padding:22px 20px; }.proof div+div { border-top:1px solid var(--rule); border-left:0; }.feature { grid-template-columns:1fr; gap:28px; padding:48px 20px; }.feature-list { grid-template-columns:1fr; }.ogl,.community { align-items:flex-start; flex-direction:column; padding:24px 20px; }.notes-hero { padding:52px 20px 34px; }.mobile-hero { grid-template-columns:1fr; gap:32px; padding:52px 20px 34px; }.mobile-preview { max-width:300px; }.notes,.mobile-content { padding:8px 20px 36px; }.note { grid-template-columns:1fr; gap:10px; padding:28px 0; }.mobile-grid { grid-template-columns:1fr; }.site-footer { padding:25px 20px; } }
@media (max-width:440px) { .site-nav { align-items:flex-start; }.nav-links { gap:12px; flex-wrap:wrap; justify-content:flex-end; }.hero { padding-top:38px; }.actions { align-items:center; gap:14px; }.button { min-height:48px; }.steam-button img { height:62px; margin:-7px 0; } h1 { font-size:48px; }.feature h2 { font-size:34px; } }