:root{--navy:#0A2351;--navy-deep:#061838;--gold:#FFC52F;--gold-deep:#B6922E;--columbia:#78B4D6;--page:#F3E8CF;--wall:#E7DBBE;--card:#fff;--slate:#2C3E5A;--smoke:#66738A;--green:#1E7A3C;--red:#C0272D;--line:rgba(10,35,81,.22);--display:"Oswald","Helvetica Neue Condensed","Arial Narrow",sans-serif;--body:"Inter",-apple-system,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100dvh;background:var(--wall);color:var(--navy);font:15px/1.45 var(--body)}
button,input,textarea{font:inherit}
button{min-height:44px;border:2px solid var(--navy);border-radius:8px;background:var(--gold);color:var(--navy-deep);font-weight:800;cursor:pointer}
button:active{transform:scale(.98)}
a{color:var(--navy);text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--gold-deep)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.shell{width:min(100%,720px);margin:0 auto;min-height:100dvh;background:var(--page);padding:0 14px max(28px,env(safe-area-inset-bottom));box-shadow:0 0 40px rgba(6,24,56,.14)}
.topline{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;background:var(--page);border-bottom:1px solid rgba(10,35,81,.16)}
.home-link{display:flex;align-items:center;gap:10px;font:700 22px/1.1 var(--display);letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.home-link span{border-left:2px solid var(--line);padding-left:10px;font:700 13px/1.2 var(--mono);letter-spacing:0;text-transform:none;color:var(--slate)}
.topline button{padding:8px 12px;font:800 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.04em}
.masthead{margin:14px 0 12px;padding:25px 18px 21px;border-radius:10px;background:var(--navy-deep);border-bottom:5px solid var(--gold);color:#fff;text-align:center}
h1{font:700 clamp(34px,8vw,54px)/1.02 var(--display);letter-spacing:.035em;text-transform:uppercase}
h1 span{color:var(--gold)}
.masthead p{margin-top:10px;color:#d7e5ec;font:700 12px/1.5 var(--mono)}
.status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.status-grid article{min-width:0;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--gold-deep);border-radius:8px;padding:11px;box-shadow:0 2px 8px rgba(10,35,81,.06)}
.status-grid b{display:block;font:700 20px/1 var(--display);text-transform:uppercase}
.status-grid span{display:block;margin-top:4px;font:800 10px/1.35 var(--mono);letter-spacing:.04em;color:var(--green);text-transform:uppercase}
.status-grid small{display:block;margin-top:3px;color:var(--smoke);font-size:11px;font-weight:700}
.panel{background:var(--card);border:1px solid var(--line);border-radius:8px;margin:12px 0;padding:12px;box-shadow:0 3px 10px rgba(10,35,81,.07)}
.recovered{border-left:5px solid var(--columbia)}
.recovered-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.recovered-grid article{min-width:0;border:1px solid rgba(10,35,81,.14);border-radius:8px;background:#fbfaf3;padding:10px}
.recovered-grid b{display:block;font:700 15px/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.recovered-grid span{display:block;margin-top:4px;font:800 10px/1.35 var(--mono);color:var(--green);text-transform:uppercase}
.recovered-grid small{display:block;margin-top:3px;color:var(--smoke);font-size:11px;font-weight:700}
.route-list{display:grid;grid-template-columns:1fr;gap:7px;margin-top:10px}
.route-list a{min-height:44px;display:flex;align-items:center;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#f8f1df;font:800 11px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.inside-grid{display:grid;grid-template-columns:1fr;gap:8px}
.inside-grid a{min-height:70px;display:block;padding:11px;border:1px solid rgba(10,35,81,.16);border-radius:8px;background:#fbfaf3;text-decoration:none}
.inside-grid b{display:block;font:700 18px/1.05 var(--display);letter-spacing:.035em;text-transform:uppercase}
.inside-grid span{display:block;margin-top:5px;font:800 10px/1.3 var(--mono);color:var(--green);letter-spacing:.04em;text-transform:uppercase}
.inside-grid small{display:block;margin-top:4px;color:var(--smoke);font-size:11px;font-weight:700}
.build-list{display:grid;gap:8px;padding-left:22px;color:var(--slate);font-size:13px}
.build-list li{padding-left:2px}
.build-list b{color:var(--navy)}
.panel-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
h2{font:700 21px/1.1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.panel-head button{margin-left:auto;padding:8px 12px;font:800 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em;background:#f8f1df}
.panel-head span{margin-left:auto;color:var(--smoke);font:800 10px/1.2 var(--mono);text-transform:uppercase}
.form-grid{display:grid;grid-template-columns:1fr;gap:9px}
label{display:flex;flex-direction:column;gap:5px;min-width:0;color:var(--slate);font:800 10px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase}
input,textarea{width:100%;border:1px solid rgba(10,35,81,.25);border-radius:8px;background:#fbfaf3;color:var(--navy);padding:10px 11px;font:600 14px/1.35 var(--body)}
textarea{min-height:88px;resize:vertical}
#markdown{min-height:180px;font-family:var(--mono);font-size:12px}
#packet{min-height:260px;background:#061838;color:#fff;border-color:#061838;font:600 12px/1.55 var(--mono)}
.output-panel{border-left:5px solid var(--green)}
.build-footer{margin:18px 0 0;padding:16px 4px 0;border-top:2px solid var(--line);display:flex;flex-direction:column;gap:5px;text-align:center;color:var(--slate);font:700 12px/1.5 var(--mono)}
@media(min-width:640px){.shell{padding-left:22px;padding-right:22px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wide-label{grid-column:1/-1}.status-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.route-list{grid-template-columns:repeat(3,minmax(0,1fr))}.inside-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:390px){.shell{padding-left:10px;padding-right:10px}.status-grid b{font-size:18px}input,textarea{font-size:13px}.topline{gap:8px}.home-link{font-size:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button:active{transform:none}}