*{box-sizing:border-box}html,body{margin:0;height:100%;font:14px system-ui;background:#090c13;color:#e5e9f0}body{display:flex;flex-direction:column}header{display:flex;align-items:center;gap:24px;background:#1a2030;padding:12px 18px;border-bottom:1px solid #30364a}header>div{display:flex;flex-direction:column;gap:3px}strong{color:#efdf22;letter-spacing:1.3px}header span,small{color:#a9b5c7;font-size:12px}nav{display:flex;gap:8px;margin-left:auto}button{font:inherit;background:#252b40;color:#e5e9f0;border:1px solid #414a64;border-radius:4px;padding:8px 12px;cursor:pointer}button:disabled{opacity:.45;cursor:default}button.active{border-color:#efdf22;color:#efdf22}#status{padding:7px 18px;font-size:12px;color:#a9b5c7;border-bottom:1px solid #252b40}main{flex:1;min-height:320px}#welcome{max-width:560px;margin:70px auto;padding:20px;color:#c4ccdb;line-height:1.6}h1{color:#fff;font-size:24px}code{color:#efdf22}@media(max-width:700px){header{gap:10px;flex-wrap:wrap}nav{margin-left:0;flex-wrap:wrap}small{margin-left:auto}button{font-size:12px;padding:6px 8px}}