:root {
  --bg: #070b0a; --panel: #0b1210; --panel2: #0e1714; --green: #39ff9c;
  --green-soft: #a3ffc9; --muted: #81958a; --line: rgba(57,255,156,.17);
  --text: #e6f4eb; --mono: "Share Tech Mono", monospace; --sans: "Space Grotesk", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(ellipse at 50% 0%, #10251b 0%, var(--bg) 52%); font-family: var(--sans); overflow-x: hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.16; background-image:linear-gradient(rgba(57,255,156,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(57,255,156,.045) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent 90%); }
.matrix-noise { position:fixed; inset:0; pointer-events:none; opacity:.08; z-index:0; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(57,255,156,.08) 4px); }
.scanline { position:fixed; z-index:5; left:0; right:0; top:-10%; height:100px; pointer-events:none; background:linear-gradient(transparent,rgba(57,255,156,.035),transparent); animation:scan 9s linear infinite; }
@keyframes scan { to { top:110%; } }
.topbar { width:min(1120px, calc(100% - 48px)); margin:auto; height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:1; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:#eafff1; font:16px var(--mono); letter-spacing:1px; }
.brand-mark { display:grid; place-items:center; width:35px; height:35px; border:1px solid var(--green); color:var(--green); font-size:20px; box-shadow:0 0 18px #39ff9c22; }
.brand-mark span { color:#eafff1; }
.brand-light { color:var(--green); }
.top-status { color:#8ba697; font:11px var(--mono); letter-spacing:1.3px; }
.pulse { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); margin-right:7px; animation:pulse 1.5s infinite; vertical-align:1px; }
@keyframes pulse { 50% { opacity:.35; box-shadow:0 0 2px var(--green); } }
.divider { color:#3b5949; margin:0 8px; }
.shell { width:min(900px, calc(100% - 40px)); margin:0 auto; position:relative; z-index:1; }
.hero { text-align:center; padding:65px 0 28px; }
.eyebrow { display:flex; align-items:center; justify-content:center; gap:12px; color:var(--green); font:11px var(--mono); letter-spacing:3px; }
.eyebrow-line { width:35px; height:1px; background:var(--green); opacity:.5; }
h1 { font-size:clamp(38px, 6.2vw, 66px); line-height:1.04; letter-spacing:-3px; margin:22px 0 15px; font-weight:700; }
h1 span { color:var(--green); text-shadow:0 0 30px #39ff9c33; }
.hero-copy { color:#91a79a; line-height:1.7; font-size:14px; margin:0; }
.slide-window { max-width:560px; margin:29px auto 0; overflow:hidden; border:1px solid var(--line); background:#09110d; height:36px; }
.slide-track { width:max-content; display:flex; align-items:center; height:100%; animation:marquee 28s linear infinite; }
.slide-window:hover .slide-track { animation-play-state:paused; }
.slide-item { padding:0 25px; white-space:nowrap; color:#b7d9c4; font:11px var(--mono); letter-spacing:1px; }
.slide-item span { color:var(--green); margin-right:8px; }
@keyframes marquee { to { transform:translateX(-50%); } }
.terminal-card { border:1px solid rgba(57,255,156,.27); background:linear-gradient(145deg,rgba(13,24,19,.98),rgba(7,13,10,.98)); box-shadow:0 22px 80px #0008,0 0 45px #39ff9c0b; }
.terminal-head { height:43px; display:flex; align-items:center; padding:0 17px; border-bottom:1px solid var(--line); background:#0b1510; }
.window-dots { display:flex; gap:6px; }
.window-dots i { width:7px; height:7px; border-radius:50%; background:#355544; }
.window-dots i:first-child { background:#ff5c67; }.window-dots i:nth-child(2) { background:#e5c65b; }.window-dots i:nth-child(3) { background:#39d98a; }
.terminal-path { margin:auto; color:#789183; font:11px var(--mono); }
.secure-label { color:var(--green); font:10px var(--mono); letter-spacing:1px; }
.terminal-content { padding:28px 32px 18px; }
.tool-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:25px; }
.section-tag { color:#6f9c80; font:10px var(--mono); letter-spacing:2px; margin-bottom:7px; }
h2 { margin:0; font-size:25px; letter-spacing:-.8px; } h2 span { color:var(--green); }
.mode-switch { display:flex; padding:4px; border:1px solid var(--line); background:#07100b; }
.mode-btn { border:0; padding:9px 15px; background:transparent; color:#779080; font:11px var(--mono); cursor:pointer; transition:.2s; }
.mode-btn.active { background:var(--green); color:#06110b; box-shadow:0 0 16px #39ff9c33; }
.field-label-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }
.field-label-row label { color:#b8d6c3; font:11px var(--mono); letter-spacing:1.5px; }
.char-count,.output-state { color:#688575; font:10px var(--mono); margin-left:8px; }
textarea { width:100%; min-height:145px; resize:vertical; display:block; padding:16px; border:1px solid #203d2c; border-radius:0; outline:none; color:#d8f3e2; background:#060d09; font:13px/1.65 var(--mono); transition:border-color .2s,box-shadow .2s; }
textarea:focus { border-color:#39ff9c88; box-shadow:0 0 0 2px #39ff9c0d; }
textarea::placeholder { color:#4e6758; }
.action-row { display:flex; gap:10px; margin:14px 0 24px; }
button { font-family:var(--mono); }
.primary-btn,.ghost-btn,.copy-btn { cursor:pointer; transition:.2s; }
.primary-btn { flex:1; min-height:45px; border:1px solid var(--green); background:var(--green); color:#041109; font-size:12px; font-weight:bold; letter-spacing:1px; }
.primary-btn:hover { background:#a0ffc8; box-shadow:0 0 22px #39ff9c44; }
.btn-icon { font-size:17px; margin-right:9px; }
.ghost-btn { padding:0 19px; border:1px solid #294334; color:#91aa9a; background:transparent; font-size:11px; letter-spacing:1px; }
.ghost-btn:hover { border-color:var(--green); color:var(--green); }.ghost-btn span { font-size:17px; margin-left:6px; }
.output-label-row { margin-bottom:9px; }
.output-box { min-height:125px; color:var(--green-soft); background:#08110c; }
.copy-btn { border:0; background:transparent; color:#8eae9a; font-size:10px; letter-spacing:.7px; }
.copy-btn:hover:not(:disabled) { color:var(--green); }.copy-btn:disabled { opacity:.35; cursor:not-allowed; }
.feedback { margin-top:12px; color:#789484; font:10px var(--mono); letter-spacing:.5px; min-height:16px; }
.feedback.error { color:#ff858b; }.feedback.success { color:var(--green); }
.feedback-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:currentColor; margin:0 7px 1px 0; }
.terminal-foot { display:flex; justify-content:space-between; margin-top:17px; padding-top:13px; border-top:1px solid #1b3024; color:#597564; font:9px var(--mono); letter-spacing:1px; }
.terminal-foot b { color:var(--green); font-size:13px; }
.info-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0 58px; }
.info-strip>div { display:flex; gap:12px; align-items:center; border:1px solid var(--line); background:#0a120eaa; padding:14px; }
.info-icon { color:var(--green); font-size:20px; }
.info-strip p { margin:0; display:grid; gap:4px; }.info-strip strong { font-size:11px; font-weight:600; }.info-strip small { color:#71877a; font-size:10px; }
footer { text-align:center; padding:0 20px 28px; position:relative; z-index:1; }
.footer-line { width:min(900px,calc(100% - 20px)); height:1px; margin:0 auto 22px; background:linear-gradient(90deg,transparent,var(--line),transparent); }
footer p { color:#8ba394; font:11px var(--mono); letter-spacing:1.5px; } footer p span { color:var(--green); }
footer a { color:var(--green); text-decoration:none; } footer a:hover { text-decoration:underline; }
footer small { color:#52695b; font:9px var(--mono); letter-spacing:1.5px; } footer small span { color:#39ff9c; margin:0 5px; }
@media(max-width:650px) {
 .topbar { width:calc(100% - 32px); height:68px; }.brand { font-size:13px; gap:8px; }.brand-mark { width:30px;height:30px; }.top-status { font-size:9px; letter-spacing:.5px; }.divider { margin:0 4px; }
 .shell { width:calc(100% - 28px); }.hero { padding:50px 0 23px; } h1 { letter-spacing:-2px; }.hero-copy { font-size:12px; padding:0 5px; }.desktop-break { display:none; }
 .terminal-content { padding:22px 17px 16px; }.tool-heading { align-items:flex-start; flex-direction:column; }.mode-switch { width:100%; }.mode-btn { flex:1; }
 textarea { min-height:135px; font-size:12px; padding:13px; }.action-row { gap:8px; }.primary-btn { font-size:10px; }.ghost-btn { padding:0 13px; }
 .info-strip { grid-template-columns:1fr; margin-bottom:45px; }.info-strip>div { padding:12px 15px; }.terminal-path { font-size:9px; }.secure-label { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }