@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,500;1,6..72,500&family=Syne:wght@700;800&display=swap');
:root { --void:#07101c; --ink:#e7f3ff; --muted:#7d93a8; --ion:#5ce1ff; --gold:#ffd36a; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--void); color:var(--ink); font-family:'Newsreader',Georgia,serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
.crop { position:fixed; inset:12px; pointer-events:none; z-index:5; }
.crop i { position:absolute; width:14px; height:14px; border:1px solid rgba(92,225,255,.3); }
.crop i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.crop i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.crop i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.crop i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.nav,.eyebrow,.hud span,.actions button,.keys { font-family:'IBM Plex Mono',ui-monospace,monospace; text-transform:uppercase; letter-spacing:.08em; font-size:10px; }
.nav { display:flex; justify-content:space-between; align-items:center; max-width:1440px; margin:0 auto; padding:22px 5vw 0; color:var(--muted); }
.nav strong { color:var(--ion); font-weight:500; margin-left:10px; }
.nav a:hover { color:var(--ion); }
.layout { display:grid; grid-template-columns:minmax(240px,.8fr) minmax(0,1.3fr); gap:3vw; max-width:1440px; margin:0 auto; padding:28px 5vw 40px; align-items:center; }
.copy { min-width:0; }
.eyebrow { color:var(--ion); margin:0 0 14px; }
h1 { margin:0 0 14px; font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(40px,5.4vw,72px); line-height:.84; letter-spacing:-.06em; }
h1 em { font-family:'Newsreader',serif; font-style:italic; font-weight:500; color:var(--gold); }
.lede { color:var(--muted); font-size:16px; line-height:1.5; max-width:380px; }
.hud { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:20px 0 12px; }
.hud div { border-top:1px solid rgba(231,243,255,.16); padding-top:8px; }
.hud span { display:block; color:var(--muted); margin-bottom:6px; }
.hud strong { font-family:'Syne',sans-serif; font-size:20px; }
.status { min-height:2.6em; color:var(--gold); }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.actions button { background:var(--ion); color:#071018; border:0; padding:12px 14px; }
.actions .ghost { background:transparent; color:var(--ink); border:1px solid rgba(231,243,255,.2); }
.keys { color:var(--muted); }
kbd { display:inline-block; padding:1px 5px; border:1px solid rgba(231,243,255,.25); text-transform:none; letter-spacing:0; }
#view { width:100%; height:min(70vh,620px); background:#04080f; border:1px solid rgba(92,225,255,.2); cursor:grab; }
#view:active { cursor:grabbing; }
#view:focus { outline:2px solid var(--ion); outline-offset:3px; }
#view canvas { display:block; width:100%; height:100%; }
.foot { display:flex; justify-content:space-between; max-width:1440px; margin:0 auto; padding:0 5vw 28px; color:var(--muted); }
.foot a:hover { color:var(--ion); }
@media (max-width:900px) {
  .layout { grid-template-columns:1fr; }
  .hud { grid-template-columns:repeat(2,1fr); }
  #view { height:62vw; min-height:280px; }
  .nav p { display:none; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition-duration:.01ms !important; } }