:root { color-scheme: dark; --ink:#f1f5f7; --muted:#9daab2; --quiet:#6d7a83; --line:#29343b; --line-strong:#3a4750; --panel:#11181d; --panel-raised:#161f25; --canvas:#070b0e; --blue:#7399c4; --blue-strong:#91b7e0; --mint:#84c8b1; --mint-strong:#a1e2ca; --mint-dim:rgba(132,200,177,.13); --amber:#d7b076; --danger:#db8c88; --mono:"DM Mono","SFMono-Regular",Consolas,monospace; --sans:"Manrope","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--canvas); }
body { min-width:320px; margin:0; color:var(--ink); background:linear-gradient(rgba(111,145,174,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(111,145,174,.035) 1px,transparent 1px),var(--canvas); background-size:32px 32px; font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
button,input,textarea { color:inherit; font:inherit; } button { cursor:pointer; } a { color:inherit; } button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid var(--mint-strong); outline-offset:3px; }
.site-shell { min-height:100vh; }.topbar { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; min-height:66px; padding:0 42px; border-bottom:1px solid rgba(77,94,105,.45); background:rgba(7,11,14,.94); backdrop-filter:blur(14px); }.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-family:var(--mono); font-size:16px; font-weight:500; letter-spacing:.02em; text-decoration:none; }.brand:hover { color:var(--mint-strong); }.brand small { margin-left:4px; padding-left:14px; border-left:1px solid var(--line); color:var(--quiet); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }.brand-glyph { display:inline-flex; align-items:flex-end; gap:3px; width:19px; height:20px; }.brand-glyph i { display:block; width:4px; border-radius:2px; background:var(--blue); }.brand-glyph i:nth-child(1){height:8px}.brand-glyph i:nth-child(2){height:14px;background:var(--mint)}.brand-glyph i:nth-child(3){height:20px;background:var(--blue-strong)}.top-actions { display:flex; align-items:center; gap:20px; color:var(--muted); font-size:12px; }.top-actions a { text-decoration:none; }.top-actions a:hover { color:var(--ink); }.demo-status { display:inline-flex; align-items:center; gap:7px; color:var(--mint); font-family:var(--mono); font-size:10px; }.demo-status i { width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(132,200,177,.1),0 0 12px rgba(132,200,177,.5); }
.main-shell { width:min(1160px,calc(100% - 56px)); margin:0 auto; padding:64px 0 76px; }.intro-row { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:34px; }.eyebrow { margin:0 0 9px; color:var(--blue-strong); font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.14em; }.intro-row h1 { margin:0; font-size:34px; line-height:1.15; letter-spacing:0; }.intro-copy { max-width:530px; margin:12px 0 0; color:var(--muted); font-size:15px; }.mode-note { width:260px; padding:13px 15px; border-left:2px solid var(--mint); background:rgba(132,200,177,.06); }.mode-note span { display:block; color:var(--mint-strong); font-size:12px; font-weight:700; }.mode-note small { display:block; margin-top:4px; color:var(--muted); line-height:1.55; }
.flow { display:flex; align-items:center; width:min(510px,100%); margin-bottom:18px; }.flow-step { display:flex; align-items:center; gap:8px; color:var(--quiet); font-size:12px; }.flow-step span { display:grid; place-items:center; width:23px;height:23px;border:1px solid var(--line-strong);border-radius:50%;font-family:var(--mono);font-size:10px; }.flow-step.active { color:var(--mint-strong); }.flow-step.active span,.flow-step.done span { border-color:var(--mint); background:var(--mint-dim); }.flow i { width:54px;height:1px;margin:0 10px;background:var(--line); }.flow-step.done { color:var(--muted); }
.simple-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }.panel { border:1px solid var(--line); border-radius:7px; background:linear-gradient(145deg,rgba(21,30,36,.92),rgba(12,18,22,.92)); box-shadow:0 20px 48px rgba(0,0,0,.16); }.source-panel,.output-panel { min-height:510px; padding:24px; }.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; }.panel-heading h2 { margin:0; font-size:19px; letter-spacing:0; }.format-pill,.node-count { flex:none; padding:5px 8px; border:1px solid var(--line); border-radius:4px; color:var(--quiet); font-family:var(--mono); font-size:10px; }.format-pill.ready { border-color:rgba(132,200,177,.45); color:var(--mint-strong); background:var(--mint-dim); }.field-label { display:block; margin-bottom:8px; color:var(--muted); font-size:12px; } textarea { width:100%; height:286px; resize:vertical; padding:14px; border:1px solid var(--line); border-radius:5px; outline:0; background:#090e11; color:#dfe8ed; font-family:var(--mono); font-size:12px; line-height:1.65; } textarea::placeholder { color:#536069; } textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(115,153,196,.12); }.input-meta { display:flex; justify-content:space-between; gap:14px; margin-top:9px; color:var(--quiet); font-size:11px; }.text-button { padding:0; border:0; background:none; color:var(--blue-strong); font-size:11px; }.text-button:hover { color:var(--ink); }.input-footer,.output-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; }.security-hint { display:flex; align-items:flex-start; gap:7px; max-width:265px; color:var(--muted); font-size:11px; line-height:1.45; }.security-hint i { flex:none; width:7px;height:7px;margin-top:4px;border-radius:50%;background:var(--mint); }.primary-button,.ghost-button { min-height:36px; padding:0 13px; border-radius:4px; font-size:12px; font-weight:600; }.primary-button { border:1px solid var(--mint); background:var(--mint); color:#07110e; }.primary-button:hover { background:var(--mint-strong); }.primary-button:disabled { cursor:not-allowed; opacity:.5; }.primary-button b { margin-left:7px; }.ghost-button { border:1px solid var(--line-strong); background:transparent; color:var(--muted); }.ghost-button:hover { border-color:var(--blue); color:var(--ink); }
.detection-card { display:flex; align-items:center; gap:12px; min-height:71px; padding:12px 14px; border:1px dashed var(--line-strong); border-radius:5px; background:rgba(7,11,14,.38); }.detection-card.ready { border-style:solid; border-color:rgba(132,200,177,.38); background:var(--mint-dim); }.detect-icon { display:grid; place-items:center; flex:none; width:31px;height:31px;border:1px solid var(--line-strong);border-radius:50%;color:var(--quiet);font-family:var(--mono); }.detection-card.ready .detect-icon { border-color:var(--mint); color:var(--mint-strong); }.detection-card b,.detection-card small { display:block; }.detection-card b { font-size:12px; }.detection-card small { margin-top:2px; color:var(--muted); font-size:11px; }.output-options { display:grid; gap:8px; margin-top:15px; }.output-option { display:flex; align-items:center; gap:10px; min-height:52px; padding:9px 11px; border:1px solid var(--line); border-radius:5px; background:rgba(7,11,14,.32); color:var(--ink); text-align:left; }.output-option:hover { border-color:var(--line-strong); background:rgba(115,153,196,.07); }.output-option.active { border-color:rgba(132,200,177,.62); background:var(--mint-dim); }.option-mark { flex:none; width:13px;height:13px;border:1px solid var(--quiet);border-radius:50%; }.output-option.active .option-mark { border:4px solid var(--mint); }.output-option b,.output-option small { display:block; }.output-option b { font-size:12px; }.output-option small { margin-top:1px; color:var(--muted); font-size:10px; }.output-option em { margin-left:auto; padding:2px 5px; border-radius:3px; background:rgba(215,176,118,.16); color:var(--amber); font-family:var(--mono); font-size:9px; font-style:normal; }.result-area { margin-top:15px; }.result-label { margin-bottom:7px; color:var(--blue-strong); font-family:var(--mono); font-size:10px; letter-spacing:.08em; }.hosted-result { display:flex; gap:7px; }.hosted-result input { min-width:0; flex:1; height:39px; padding:0 10px; border:1px solid rgba(132,200,177,.45); border-radius:4px; outline:0; background:#09110e; color:var(--mint-strong); font-family:var(--mono); font-size:10px; }.icon-button { width:39px; border:1px solid var(--line-strong); border-radius:4px; background:var(--panel-raised); color:var(--blue-strong); } pre { max-height:132px; overflow:auto; margin:0; padding:12px; border:1px solid var(--line); border-radius:4px; background:#090e11; color:#cad6dd; font-family:var(--mono); font-size:10px; line-height:1.65; white-space:pre-wrap; word-break:break-all; } .output-footer { margin-top:14px; }.output-footer > span { color:var(--quiet); font-size:11px; }.output-footer > div { display:flex; gap:8px; }
.simple-footer { display:flex; justify-content:space-between; gap:24px; margin-top:18px; padding:20px 22px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(10,15,18,.52); }.safe-copy { display:flex; gap:12px; max-width:650px; }.safe-icon { display:grid; place-items:center; flex:none; width:22px;height:22px;border:1px solid var(--mint);border-radius:50%;color:var(--mint-strong);font-size:11px; }.safe-copy b { font-size:12px; }.safe-copy p { margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }.simple-footer nav { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:8px; }.simple-footer a { color:var(--blue-strong); font-size:12px; text-decoration:none; }.simple-footer a:hover { color:var(--mint-strong); }.advanced-link span { color:var(--quiet); font-size:10px; }
.toast { position:fixed; z-index:20; right:24px; bottom:24px; max-width:min(360px,calc(100% - 48px)); padding:10px 13px; border:1px solid rgba(132,200,177,.5); border-radius:4px; background:#102019; color:var(--mint-strong); box-shadow:0 14px 30px rgba(0,0,0,.35); font-size:12px; opacity:0; pointer-events:none; transform:translateY(10px); transition:.2s ease; }.toast.show { opacity:1; transform:none; }.toast.error { border-color:rgba(219,140,136,.6); background:#261615; color:#efb0ac; }
@media (max-width:760px) { .topbar{padding:0 20px}.top-actions{gap:13px}.top-actions a:first-of-type,.demo-status{display:none}.brand small{display:none}.main-shell{width:min(100% - 32px,1160px);padding:38px 0 42px}.intro-row,.simple-footer{display:block}.mode-note{width:auto;margin-top:22px}.simple-grid{grid-template-columns:1fr}.source-panel,.output-panel{min-height:auto;padding:18px}textarea{height:210px}.flow i{width:min(9vw,54px);margin:0 5px}.simple-footer nav{align-items:flex-start;margin-top:17px}.advanced-link span{display:none}.output-footer{align-items:flex-end}.output-footer>div{flex:none}.security-hint{max-width:175px}.intro-row h1{font-size:29px} }
@media (max-width:430px) { .top-actions a{font-size:11px}.input-footer{align-items:flex-end}.input-meta span{max-width:230px}.primary-button,.ghost-button{padding:0 10px}.output-footer{display:block}.output-footer>div{justify-content:flex-end;margin-top:10px} }