html,body{margin:0;height:100%;overflow:hidden;background:#07090f;color:#dfe7ee;
  font-family:'Segoe UI',system-ui,sans-serif}
canvas{display:block}
.sf-title{position:fixed;top:18px;left:22px;z-index:40;pointer-events:none}
.sf-title h1{margin:0;font:700 26px/1.2 'Consolas',monospace;color:#fff;letter-spacing:2px;
  text-shadow:0 0 18px rgba(46,255,140,.45)}
.sf-title p{margin:4px 0 0;color:#8fa8b8;font-size:13px}
.sf-back{position:fixed;bottom:16px;left:22px;z-index:40;color:#2eff8c;text-decoration:none;
  font:13px monospace;background:rgba(8,14,10,.7);border:1px solid rgba(46,255,140,.4);
  padding:6px 12px;border-radius:7px}
.sf-back:hover{background:rgba(22,74,46,.8)}
.sf-hint{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:40;
  color:#7c93a4;font-size:12px;background:rgba(8,10,16,.6);padding:5px 14px;border-radius:14px;
  pointer-events:none;white-space:nowrap}
.sf-attrib{position:fixed;bottom:16px;right:14px;z-index:40;color:#5d7284;font-size:11px;
  max-width:320px;text-align:right}
.sf-attrib a{color:#7ea8c4}
.sf-ticker{position:fixed;left:22px;top:96px;z-index:39;font:12px/1.9 monospace;color:#69dfa2;
  pointer-events:none;text-shadow:0 0 8px rgba(46,255,140,.5)}
.sf-ticker div{opacity:0;transform:translateX(-14px);transition:all .5s}
.sf-ticker div.in{opacity:.92;transform:none}
.sf-info{position:fixed;right:14px;bottom:14px;z-index:60;max-width:360px;
  background:rgba(8,14,11,.92);border:1px solid rgba(46,255,140,.5);border-radius:12px;
  padding:14px 16px;backdrop-filter:blur(8px);box-shadow:0 8px 40px rgba(0,0,0,.6)}
.sf-info h3{margin:0 34px 6px 0;font:700 15px 'Consolas',monospace;color:#2eff8c;letter-spacing:.5px}
.sf-info p{margin:0;color:#cfe0d6;font-size:13px;line-height:1.6}
.sf-info-x{position:absolute;top:8px;right:8px;background:#101a14;border:1px solid #24513a;
  color:#9adbb4;border-radius:5px;width:26px;height:24px;cursor:pointer;font:12px monospace}
.sf-info-x:hover{background:#164a2e}
@media (max-width:640px){
  .sf-title h1{font-size:18px}
  .sf-title p{font-size:11px;max-width:62vw}
  .sf-hint{display:none}
  .sf-attrib{display:none}
  .sf-back{bottom:10px;left:10px;padding:5px 10px}
  .sf-info{left:0;right:0;bottom:0;max-width:none;border-radius:14px 14px 0 0;
    border-left:none;border-right:none;border-bottom:none;padding:14px 16px 20px}
}