:root{--bg:#07090d;--panel:#0d1118;--text:#f4f1ea;--muted:#8e949f;--red:#ed1c24;--cyan:#29c6e8;--line:rgba(255,255,255,.1)} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}body::selection{background:var(--red);color:white}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.noise{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.site-header{height:82px;padding:0 clamp(22px,4vw,72px);display:flex;align-items:center;justify-content:space-between;position:absolute;top:0;width:100%;z-index:20;border-bottom:1px solid rgba(255,255,255,.12)}.brand{display:flex;align-items:center;gap:11px;font:700 16px "Chakra Petch",sans-serif;letter-spacing:.08em}.brand img{width:38px;height:38px;border-radius:9px}.brand span span{color:var(--red)}.nav{display:flex;align-items:center;gap:36px;font:600 12px "Chakra Petch",sans-serif;letter-spacing:.12em;text-transform:uppercase}.nav a:not(.nav-download){color:#b2b6be;transition:.2s}.nav a:hover{color:#fff}.nav-download{border:1px solid rgba(255,255,255,.35);padding:13px 17px}.nav-download span{color:var(--red);margin-left:10px}.nav-toggle{display:none;background:0;border:0;padding:10px}.nav-toggle span{display:block;width:24px;height:1px;background:#fff;margin:7px}.hero{min-height:100svh;position:relative;display:grid;place-items:center;overflow:hidden}.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,10,.93) 0%,rgba(5,7,10,.54) 46%,rgba(5,7,10,.22) 100%),linear-gradient(0deg,var(--bg) 0%,transparent 35%),url('assets/menu.png') center/cover no-repeat;filter:saturate(.85)}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(41,198,232,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(41,198,232,.05) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,#000,transparent 72%)}.hero-content{position:relative;width:min(1200px,88vw);margin:auto;padding-top:60px}.eyebrow,.kicker{font:600 12px "Chakra Petch";letter-spacing:.2em;color:#b7bcc4}.eyebrow span{display:inline-block;width:7px;height:7px;background:var(--red);box-shadow:0 0 12px var(--red);margin-right:9px}.hero-logo{width:clamp(300px,41vw,570px);margin:-45px 0 -38px -45px;filter:drop-shadow(0 18px 38px #000)}.hero-copy{font:400 clamp(15px,1.4vw,19px)/1.65 "Chakra Petch";color:#c2c6cc;margin:0 0 28px}.hero-actions,.download-buttons{display:flex;gap:12px;flex-wrap:wrap}.button{min-width:210px;min-height:54px;padding:0 20px;display:inline-flex;align-items:center;justify-content:space-between;text-transform:uppercase;font:700 12px "Chakra Petch";letter-spacing:.1em;transition:.25s}.button b{font-size:20px}.button-primary{background:var(--red);box-shadow:0 0 35px rgba(237,28,36,.18)}.button-primary:hover{background:#ff3037;transform:translateY(-2px);box-shadow:0 8px 38px rgba(237,28,36,.3)}.button-ghost{border:1px solid rgba(255,255,255,.28);background:rgba(7,9,13,.38);backdrop-filter:blur(8px)}.button-ghost:hover{border-color:#fff;transform:translateY(-2px)}.hero-meta{font:500 10px "Chakra Petch";letter-spacing:.12em;color:#737985;margin-top:18px}.hero-meta span{color:#44da87}.scroll-cue{position:absolute;right:4vw;bottom:35px;display:flex;gap:14px;align-items:center;writing-mode:vertical-rl;font:500 9px "Chakra Petch";letter-spacing:.17em;color:#686e78}.scroll-cue i{height:48px;width:1px;background:linear-gradient(var(--red),transparent)}.section{max-width:1280px;margin:auto;padding:120px clamp(24px,5vw,76px)}.section-label{border-bottom:1px solid var(--line);padding-bottom:18px;font:600 10px "Chakra Petch";letter-spacing:.2em;color:#7c828d}.section-label span{color:var(--red);margin-right:16px}.intro-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:9vw;align-items:end;margin:65px 0}.kicker{color:var(--red);margin-bottom:18px}.intro h2,.features h2,.download h2{margin:0;font:700 clamp(44px,6vw,78px)/.96 "Chakra Petch";letter-spacing:-.04em;text-transform:uppercase}.intro h2 em,.features h2 em,.download h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #777d86}.intro-text{color:#9fa5ae;line-height:1.8;font-size:14px}.intro-text p:first-child{color:#d3d5d8;font-size:17px}.visual{position:relative;border:1px solid var(--line);padding:9px;background:#0c1016}.visual img{width:100%;aspect-ratio:16/8.5;object-fit:cover}.visual::after{content:"";position:absolute;inset:9px;background:linear-gradient(90deg,rgba(237,28,36,.08),transparent 40%);pointer-events:none}.visual-tag{position:absolute;left:28px;bottom:28px;background:#080b0f;padding:10px 13px;font:600 9px "Chakra Petch";letter-spacing:.15em;z-index:2}.visual-tag span{color:var(--red);margin-right:8px}.visual-corner{position:absolute;right:25px;top:24px;text-align:right;font:500 9px/1.6 "Chakra Petch";letter-spacing:.14em;color:#777d85}.features{max-width:none;background:#0a0d12;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-left:max(clamp(24px,5vw,76px),calc((100vw - 1280px)/2 + 76px));padding-right:max(clamp(24px,5vw,76px),calc((100vw - 1280px)/2 + 76px))}.feature-heading{display:flex;justify-content:space-between;align-items:end;margin:65px 0}.feature-heading p{max-width:390px;color:var(--muted);line-height:1.8}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}.feature-card{position:relative;padding:38px 34px 42px;min-height:290px;border-right:1px solid var(--line);transition:.3s}.feature-card:last-child{border:0}.feature-card:hover{background:rgba(237,28,36,.055)}.card-number{position:absolute;right:22px;top:20px;font:500 10px "Chakra Petch";color:#4b515b}.card-icon{height:90px;color:var(--red);font:600 30px "Chakra Petch"}.feature-card h3{font:600 21px "Chakra Petch";text-transform:uppercase;margin:0 0 13px}.feature-card p{font-size:13px;line-height:1.7;color:var(--muted);max-width:270px}.download{padding-top:150px;padding-bottom:150px}.download-inner{padding:70px;background:radial-gradient(circle at 20% 50%,rgba(237,28,36,.13),transparent 33%),#0d1016;border:1px solid var(--line);display:grid;grid-template-columns:240px 1fr;gap:60px;align-items:center;position:relative;overflow:hidden}.download-inner::after{content:"EXECUTE";position:absolute;right:-15px;bottom:-45px;font:700 130px "Chakra Petch";color:rgba(255,255,255,.018);pointer-events:none}.download-inner>img{border-radius:38px;box-shadow:0 25px 70px #000}.download-inner>div{position:relative;z-index:2}.download-inner>div>p:not(.kicker):not(.requirements){color:var(--muted);line-height:1.7;max-width:560px}.download-buttons{margin-top:28px}.download-buttons small{display:block;font-size:8px;color:rgba(255,255,255,.62);margin-bottom:3px}.requirements{font:500 9px "Chakra Petch";letter-spacing:.1em;color:#626873;margin-top:15px}footer{max-width:1280px;margin:auto;border-top:1px solid var(--line);padding:34px clamp(24px,5vw,76px);display:flex;justify-content:space-between;align-items:center;color:#656b75;font:500 9px "Chakra Petch";letter-spacing:.12em}.footer-mark{display:flex;align-items:center;gap:9px;color:#a7abb2;font-size:11px}.footer-mark img{width:26px;height:26px;object-fit:contain}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none} @media(max-width:800px){.site-header{height:70px}.nav-toggle{display:block;z-index:2}.nav{position:absolute;top:70px;left:0;right:0;background:#090c11;padding:28px;display:none;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}.nav.open{display:flex}.hero-content{padding-top:70px}.hero-bg{background-position:60% center}.hero-logo{margin:-25px 0 -20px -25px}.hero-copy br{display:none}.scroll-cue{display:none}.section{padding-top:85px;padding-bottom:85px}.intro-layout{grid-template-columns:1fr;gap:25px;margin:45px 0}.feature-heading{display:block;margin:45px 0}.feature-heading p{margin-top:28px}.feature-grid{grid-template-columns:1fr}.feature-card{border-right:0;border-bottom:1px solid var(--line);min-height:230px}.download-inner{grid-template-columns:1fr;padding:38px 26px;gap:35px}.download-inner>img{width:120px;border-radius:25px}.download .button{width:100%}footer{gap:20px;flex-wrap:wrap}footer p{order:3;width:100%}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.button{transition:none}} /* Gameplay content refinements */ .intro-text code,.feature-card code{font-family:"Chakra Petch",monospace;color:#c8f5ff} .feature-card{border-bottom:1px solid var(--line)} .feature-card:nth-child(3n){border-right:0} .feature-card:nth-last-child(-n+3){border-bottom:0} .feature-card p{max-width:290px} @media(max-width:800px){.feature-card,.feature-card:nth-child(3n),.feature-card:nth-last-child(-n+3){border-right:0;border-bottom:1px solid var(--line)}.feature-card:last-child{border-bottom:0}} /* Centered, higher-impact hero */ .hero-bg{background:radial-gradient(circle at 50% 49%,rgba(5,7,10,.76) 0%,rgba(5,7,10,.48) 29%,rgba(5,7,10,.18) 60%),linear-gradient(0deg,var(--bg) 0%,transparent 35%),url('assets/menu.png') center/cover no-repeat} .hero-grid{mask-image:radial-gradient(circle at center,#000 0%,rgba(0,0,0,.65) 48%,transparent 88%)} .hero-content{width:min(920px,90vw);display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:82px} .hero-content .eyebrow{margin-bottom:8px} .hero-logo{width:clamp(390px,48vw,690px);margin:8px auto 28px;filter:drop-shadow(0 24px 52px #000) drop-shadow(0 0 22px rgba(237,28,36,.16))} .hero-copy{font-size:clamp(17px,1.45vw,22px);line-height:1.65;color:#e1e3e7;text-shadow:0 2px 18px #000;margin-bottom:31px} .hero-actions{justify-content:center} .hero-actions .button{min-width:235px;min-height:60px;padding-inline:24px} .hero-meta{margin-top:20px;color:#9298a2} @media(max-width:800px){.hero-content{padding-top:80px}.hero-content .eyebrow{margin-bottom:6px}.hero-logo{width:min(520px,105vw);max-width:none;margin:4px -8vw 22px}.hero-copy{font-size:16px;max-width:34rem}.hero-actions{width:min(430px,100%)}.hero-actions .button{width:100%}} /* In-game screenshot slider */ .game-slider{overflow:hidden;isolation:isolate} .slider-viewport{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#05070a} .visual .slider-slide{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;opacity:0;transform:scale(1.025);transition:opacity .65s ease,transform 1.1s ease;pointer-events:none} .visual .slider-slide.active{opacity:1;transform:scale(1);z-index:1} .slider-arrow{position:absolute;z-index:4;top:50%;width:50px;height:50px;margin-top:-25px;border:1px solid rgba(255,255,255,.28);background:rgba(5,7,10,.76);backdrop-filter:blur(8px);color:#fff;font:500 20px "Chakra Petch";cursor:pointer;transition:.2s} .slider-arrow:hover{border-color:var(--red);background:var(--red)} .slider-prev{left:28px}.slider-next{right:28px} .slider-dots{position:absolute;z-index:4;left:50%;bottom:26px;display:flex;gap:8px;transform:translateX(-50%)} .slider-dots button{width:22px;height:3px;padding:0;border:0;background:rgba(255,255,255,.3);cursor:pointer;transition:.25s} .slider-dots button.active{width:42px;background:var(--red);box-shadow:0 0 12px rgba(237,28,36,.6)} .game-slider .visual-tag b{color:#737985;font-weight:500;margin-left:10px} .game-slider .visual-corner{z-index:3} @media(max-width:800px){.visual{padding:5px}.slider-viewport{aspect-ratio:16/10}.slider-arrow{width:40px;height:40px;margin-top:-20px}.slider-prev{left:12px}.slider-next{right:12px}.slider-dots{bottom:15px}.slider-dots button{width:13px}.slider-dots button.active{width:25px}.game-slider .visual-tag{left:14px;bottom:42px}.game-slider .visual-corner{display:none}} /* Unsigned Windows installer notice */ .download-modal{width:min(540px,calc(100vw - 32px));padding:38px;border:1px solid rgba(237,28,36,.42);background:linear-gradient(145deg,#11151d,#090c11);color:var(--text);box-shadow:0 35px 110px #000;font-family:Inter,system-ui,sans-serif} .download-modal::backdrop{background:rgba(2,4,7,.82);backdrop-filter:blur(8px)} .download-modal[open]{animation:modal-in .22s ease-out} .download-modal-icon{display:grid;place-items:center;width:54px;height:54px;margin-bottom:25px;border:1px solid var(--red);color:var(--red);font:700 29px "Chakra Petch";box-shadow:inset 0 0 22px rgba(237,28,36,.1),0 0 28px rgba(237,28,36,.12)} .download-modal h2{margin:0 0 17px;font:700 clamp(24px,4vw,34px)/1.08 "Chakra Petch";text-transform:uppercase;letter-spacing:-.025em} .download-modal>p:not(.kicker){color:#aeb3bc;font-size:14px;line-height:1.75} .download-modal strong{color:#f2f3f5;font-weight:600} .download-modal-steps{margin:21px 0;padding:18px 19px;border:1px solid rgba(41,198,232,.2);background:rgba(41,198,232,.045)} .download-modal-steps p{margin:0 0 12px;color:#dfe2e7;font:600 12px "Chakra Petch";letter-spacing:.08em;text-transform:uppercase} .download-modal-steps ol{margin:0;padding-left:21px;color:#aeb3bc;font-size:13px;line-height:1.65} .download-modal-steps li{padding-left:5px;margin:6px 0} .download-modal-steps li::marker{color:var(--cyan);font:600 12px "Chakra Petch"} .download-modal .download-modal-note{padding:13px 15px;border-left:2px solid var(--red);background:rgba(237,28,36,.06);color:#e0e2e5} .download-modal-actions{display:flex;gap:10px;margin-top:27px} .download-modal-actions .button{border-radius:0;cursor:pointer} @keyframes modal-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}} @media(max-width:600px){.download-modal{padding:28px 22px}.download-modal-actions{flex-direction:column-reverse}.download-modal-actions .button{width:100%}} .button,.download-modal-actions button{color:var(--text)} /* Updates and patch notes */ .updates{max-width:1280px} .updates-heading{display:flex;justify-content:space-between;align-items:end;margin:65px 0 48px} .updates-heading h2{margin:0;font:700 clamp(44px,6vw,78px)/.96 "Chakra Petch";letter-spacing:-.04em;text-transform:uppercase} .updates-heading h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #777d86} .updates-heading>p{max-width:390px;color:var(--muted);line-height:1.8} .updates-list{border:1px solid var(--line)} .update-card{display:grid;grid-template-columns:220px 1fr;gap:45px;padding:38px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(255,255,255,.015),transparent);transition:.25s} .update-card[hidden]{display:none} .update-card:last-child{border-bottom:0}.update-card:hover{background:rgba(255,255,255,.025)} .update-meta{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;align-content:flex-start;font:600 10px "Chakra Petch";letter-spacing:.1em;text-transform:uppercase;color:#777d86} .update-type{padding:6px 9px;border:1px solid var(--cyan);color:var(--cyan)} .update-card-bugfix .update-type{border-color:#44da87;color:#44da87}.update-card-hotfix .update-type{border-color:var(--red);color:var(--red)} .update-meta time,.update-version{padding:7px 0}.update-version{width:100%;color:#c9cdd3;font-size:12px} .update-content h3{margin:0 0 13px;font:600 clamp(20px,3vw,28px) "Chakra Petch";text-transform:uppercase} .update-content>p{margin:0 0 17px;color:#aeb3bc;font-size:14px;line-height:1.7} .update-content ul{margin:0;padding:0;list-style:none;color:#8e949f;font-size:13px;line-height:1.7} .update-content li{position:relative;padding-left:19px;margin:7px 0}.update-content li::before{content:"+";position:absolute;left:0;color:var(--red);font-family:"Chakra Petch"} .updates-toggle{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:16px;border:1px solid var(--line);border-top:0;background:#0b0e14;color:#b9bec7;cursor:pointer;font:600 11px "Chakra Petch";letter-spacing:.12em;text-transform:uppercase;transition:.2s} .updates-toggle:hover{border-color:#4a5059;background:#10141b;color:#fff}.updates-toggle b{color:var(--red);font-size:16px} .updates-empty{padding:35px;border:1px solid var(--line);color:var(--muted);text-align:center} @media(max-width:800px){.updates-heading{display:block;margin:45px 0 35px}.updates-heading>p{margin-top:28px}.update-card{grid-template-columns:1fr;gap:20px;padding:28px 24px}.update-version{width:auto}} /* Access-code gate */ .access-gate-page{min-height:100svh;background:radial-gradient(circle at 50% 45%,rgba(237,28,36,.1),transparent 30%),#07090d} .access-gate{min-height:100svh;display:grid;place-items:center;padding:20px} .access-gate-modal{position:relative;z-index:2;width:min(460px,100%);padding:42px;border:1px solid rgba(237,28,36,.42);background:linear-gradient(145deg,#11151d,#090c11);box-shadow:0 35px 110px #000} .access-gate-modal>img{width:64px;height:64px;margin-bottom:25px;border-radius:14px;box-shadow:0 15px 35px #000} .access-gate-modal h1{margin:0 0 14px;font:700 clamp(30px,7vw,42px)/1 "Chakra Petch";text-transform:uppercase} .access-gate-modal>p:not(.kicker){color:#aeb3bc;font-size:14px;line-height:1.65} .access-gate-modal label{display:block;margin:27px 0 9px;color:#dfe2e7;font:600 11px "Chakra Petch";letter-spacing:.12em;text-transform:uppercase} .access-gate-modal input{width:100%;height:55px;padding:0 16px;border:1px solid rgba(255,255,255,.22);outline:0;background:#07090d;color:#fff;font:600 20px "Chakra Petch";letter-spacing:.18em} .access-gate-modal input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.1)} .access-gate-modal .access-gate-message{min-height:23px;margin:9px 0 18px;font-size:12px} .access-gate-modal .access-gate-message.is-error{color:#ff5b61} .access-gate-modal .button{width:100%;border:0;cursor:pointer;color:#fff} @media(max-width:520px){.access-gate-modal{padding:32px 24px}} /* Run flow and persistent progression */ .gameplay h2,.workspace h2{margin:0;font:700 clamp(44px,6vw,78px)/.96 "Chakra Petch";letter-spacing:-.04em;text-transform:uppercase} .gameplay h2 em,.workspace h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #777d86} .gameplay-heading{display:flex;justify-content:space-between;align-items:end;margin:65px 0 48px} .gameplay-heading>p{max-width:430px;margin:0;color:var(--muted);font-size:14px;line-height:1.8} .gameplay-steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)} .gameplay-step{position:relative;min-height:260px;padding:35px 28px;border-right:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.018),transparent)} .gameplay-step:last-child{border-right:0}.gameplay-step>span{display:block;margin-bottom:55px;color:var(--red);font:600 11px "Chakra Petch";letter-spacing:.16em} .gameplay-step strong{display:block;margin-bottom:13px;font:600 19px "Chakra Petch";text-transform:uppercase} .gameplay-step p{margin:0;color:var(--muted);font-size:13px;line-height:1.7} .partition-route{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;margin-top:18px;border:1px solid var(--line);background:#090c11} .partition-route span{padding:22px;text-align:center;color:#c5c9d0;font:600 13px "Chakra Petch";letter-spacing:.08em;text-transform:uppercase} .partition-route span b{display:block;margin-bottom:5px;color:var(--cyan);font-size:9px;letter-spacing:.16em}.partition-route i{color:var(--red);font-style:normal} .workspace{max-width:none;background:radial-gradient(circle at 78% 50%,rgba(41,198,232,.07),transparent 24%),#0a0d12;border-bottom:1px solid var(--line);padding-left:max(clamp(24px,5vw,76px),calc((100vw - 1280px)/2 + 76px));padding-right:max(clamp(24px,5vw,76px),calc((100vw - 1280px)/2 + 76px))} .workspace-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:9vw;align-items:center;margin-top:65px}.workspace-copy>p:not(.kicker){max-width:620px;color:#aeb3bc;font-size:15px;line-height:1.8} .workspace-copy ul{margin:28px 0 0;padding:0;list-style:none}.workspace-copy li{position:relative;margin:15px 0;padding-left:25px;color:var(--muted);font-size:13px;line-height:1.65}.workspace-copy li::before{content:"+";position:absolute;left:0;color:var(--red);font:600 14px "Chakra Petch"} .workspace-terminal{border:1px solid rgba(41,198,232,.27);background:rgba(5,8,12,.82);box-shadow:0 30px 80px rgba(0,0,0,.38);font:500 12px/1.6 "Chakra Petch",monospace} .workspace-terminal>div{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line);color:#737a85}.workspace-terminal>div span{width:7px;height:7px;border-radius:50%;background:#313741}.workspace-terminal>div span:first-child{background:var(--red)}.workspace-terminal>div b{margin-left:8px;font-size:9px;letter-spacing:.1em} .workspace-terminal>p{margin:0;padding:22px 24px;color:#c7ccd4}.workspace-terminal em{color:var(--cyan);font-style:normal}.workspace-terminal dl{display:grid;grid-template-columns:1fr auto;margin:0;padding:4px 24px 22px}.workspace-terminal dt,.workspace-terminal dd{margin:0;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}.workspace-terminal dt{color:#6f7681}.workspace-terminal dd{color:#e3e6ea;text-align:right}.workspace-terminal .terminal-ready{border-top:1px solid var(--line);color:#44da87;letter-spacing:.1em} .download-inner .alpha-notice{margin:22px 0 0;padding:14px 16px;border-left:2px solid var(--red);background:rgba(237,28,36,.055);font-size:12px;line-height:1.6}.alpha-notice strong{display:block;color:#fff;font:700 10px "Chakra Petch";letter-spacing:.15em} @media(max-width:980px){.gameplay-steps{grid-template-columns:repeat(2,1fr)}.gameplay-step:nth-child(2){border-right:0}.gameplay-step:nth-child(-n+2){border-bottom:1px solid var(--line)}.workspace-layout{gap:5vw}} @media(max-width:800px){.gameplay-heading{display:block;margin:45px 0 35px}.gameplay-heading>p{margin-top:28px}.workspace-layout{grid-template-columns:1fr;gap:45px;margin-top:45px}.partition-route{grid-template-columns:repeat(2,1fr)}.partition-route span{padding:16px 8px}.partition-route i{display:none}} @media(max-width:540px){.gameplay-steps{grid-template-columns:1fr}.gameplay-step,.gameplay-step:nth-child(2){min-height:0;border-right:0;border-bottom:1px solid var(--line)}.gameplay-step:last-child{border-bottom:0}.gameplay-step>span{margin-bottom:30px}.workspace-terminal dl{grid-template-columns:1fr}.workspace-terminal dd{padding-top:0;text-align:left;color:#fff}} /* ══ Mobil, 05.08.2026 ═══════════════════════════════════════════════════ Die Seite war am Telefon nicht kaputt, aber an drei Stellen unbenutzbar. Alles hier ist gemessen, nicht geschaetzt. 1 SCHRIFTGROESSEN Der Entwurf kommt vom grossen Bildschirm, wo 9px-Kapitaelchen als feine Beschriftung durchgehen. Am Telefon standen 15 Textstellen unter 12px, die kleinste bei 8px - ausgerechnet die Zeile ueber dem Download-Knopf, die sagt, WAS man da herunterlaedt. Uebersetzt in Betrachtungsabstand ist 8px am Handy etwa so gross wie 5px am Schreibtisch. Kapitaelchen mit weiter Laufweite tragen 11px, alles, was man wirklich liest, bekommt 12-13px. 2 UMLAUTE WURDEN ABGESCHNITTEN Die grossen Ueberschriften laufen mit Zeilenhoehe 0,96 bei 44px Schriftgroesse - die Zeichenflaeche ist aber 58px hoch. Jede Zeile ragt also 16px aus ihrer Zeilenbox. Bei "UEBERLEBE" und "NAECHSTEN" landen die Umlautpunkte in diesem Ueberstand und werden von der Zeile darueber verdeckt oder am Elementrand abgeschnitten. Auf Englisch faellt das nie auf, auf Deutsch bei jeder zweiten Ueberschrift. 1,06 ist die kleinste Zeilenhoehe, bei der die Punkte frei stehen - der gedrungene Satz bleibt damit erhalten. 3 TIPPZIELE Die Punkte unter dem Bilderwechsler waren 13x3px gross. Ein Finger trifft rund 9mm; das sind bei dieser Aufloesung etwa 40px. Die Balken bleiben optisch 3px duenn (background-clip), bekommen aber Polster. ══════════════════════════════════════════════════════════════════ */ /* Gilt auf allen Breiten: ein Schriftmass-Problem kennt keinen Umbruch. */ .intro h2, .features h2, .download h2, .updates-heading h2, .gameplay h2, .workspace h2 { line-height: 1.06; } @media (max-width: 800px) { /* Kapitaelchen mit weiter Laufweite - lesbar ab 11px */ .hero-meta, .section-label, .card-number, .update-type, .updates-list time, .visual-tag, .visual-corner, .partition-route span b, .alpha-notice strong, footer, .download-buttons small { font-size: 11px; } /* Fliesstext und Angaben, die man tatsaechlich liest */ .requirements { font-size: 12px; letter-spacing: .06em; line-height: 1.7; } .footer-mark { font-size: 12px; } /* Die Zeile ueber dem Download-Knopf nennt Produkt und Version. Sie war die kleinste Schrift der ganzen Seite. */ .download-buttons small { letter-spacing: .08em; margin-bottom: 5px; } /* Fusszeile: die beiden Verweise waren 12px bzw. 26px hoch. */ footer a { display: inline-flex; align-items: center; min-height: 44px; } .footer-mark { gap: 10px; } /* Bilderwechsler: sichtbar bleibt der duenne Balken, treffbar wird die Flaeche drumherum. 13x3px waren vorher da, jetzt 41x43px. */ .slider-dots { gap: 0; bottom: 6px; } .slider-dots button, .slider-dots button.active { /* Zwei Fallen an dieser Stelle: - content-box ist zwingend, sonst frisst das Polster die 13px Breite auf und der Balken haette Groesse 0 - treffbar, aber unsichtbar. - Der aktive Punkt muss mitgenannt werden: seine Regel setzt "background" als Kurzform, und die stellt background-clip still auf den Ausgangswert zurueck. Ohne das faerbt sich das ganze Polster rot - aus einem 3px-Balken wird ein Klotz. */ box-sizing: content-box; height: 3px; padding: 20px 14px; background-clip: content-box; } /* Und die dritte Falle: der Schein des aktiven Punktes ist ein box-shadow und haengt damit am Rahmenkasten, nicht an der gefaerbten Flaeche - aus dem Leuchten um einen 3px-Balken wurde ein leuchtendes Rechteck von 53x43px. drop-shadow folgt dem, was wirklich gemalt wird. */ .slider-dots button.active { box-shadow: none; filter: drop-shadow(0 0 7px rgba(237, 28, 36, .6)); } /* Die Wortmarke oben war 2px zu flach fuer einen Daumen. */ .brand { min-height: 44px; } /* Die Kopfzeile des Terminals - kleinste verbliebene Schrift. */ .workspace-terminal > div b { font-size: 11px; } }