@font-face { font-family: "Orbitron"; src: local("Arial"); }
:root { --bg:#0b0d10; --panel:#10141a; --accent:#00d1ff; --text:#e6f3ff; }
* { box-sizing: border-box; }
body { margin:0; font-family: Orbitron, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif; background: radial-gradient(1000px 600px at 80% -10%, #13223a, #0b0d10); color: var(--text); }
.header { padding: 28px 20px; text-align:center; border-bottom: 1px solid #1b2a3a; background: linear-gradient(to bottom, #0e1420, transparent); }
.header h1 { margin:0; letter-spacing:1px; font-size: clamp(26px, 3vw, 40px); }
.header p { margin:.3rem 0 0; opacity:.85 }
.container { max-width: 960px; margin: 28px auto; padding: 0 16px; }
.card { background: linear-gradient(180deg, rgba(16,20,26,.9), rgba(10,12,14,.9)); border:1px solid #1d2b3a; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 0 60px rgba(0,209,255,.06); padding: 20px; }
.hero { display:grid; grid-template-columns: 1.2fr .8fr; gap: 20px; align-items: center; }
.hero .title { font-size: clamp(22px, 2.3vw, 28px); margin-top:0 }
.hero pre { background: #0a0d11; border:1px solid #1b2a3a; border-radius: 12px; padding: 14px; overflow:auto; }
.btn { display:inline-block; padding: 12px 18px; border-radius: 999px; border:1px solid #00d1ff33; background: linear-gradient(180deg, #00d1ff, #00a1cc); color:#021018; font-weight:700; text-decoration:none; transition: transform .08s ease, box-shadow .2s ease; box-shadow: 0 10px 30px rgba(0,209,255,.25); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 40px rgba(0,209,255,.35); }
.form { margin-top: 10px; display:flex; gap: 10px; }
input[type=text] { background:#0b0f14; border:1px solid #1f2c3d; border-radius: 10px; padding: 10px 12px; color:#e6f3ff; outline:none; flex:1; }
input[type=submit] { composes: btn; }
.hint { font-size:.92rem; opacity:.88; }
footer { text-align:center; margin: 40px 0 20px; opacity:.7; font-size:.9rem; }
code { background:#0b0f14; border:1px solid #1f2c3d; padding: 2px 6px; border-radius: 6px; }
.notice { padding:10px 12px; border-radius: 10px; border:1px dashed #2c3d50; background:#0a1117; margin-bottom:10px; }
small { opacity:.8 }
@media (max-width: 800px){ .hero { grid-template-columns: 1fr; } }