@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --bg:#111313; --panel:#191c1c; --panel-2:#202424; --line:#303535; --text:#f2f0ea; --muted:#929896; --orange:#ff7147; --orange-dark:#d95532; --cyan:#76d9ca; --focus:#b6f5e9; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:14px; line-height:1.5; }
button, input, textarea, select { font:inherit; }
button { cursor:pointer; }
.shell { max-width:1280px; margin:0 auto; padding:0 42px; }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { color:var(--text); text-decoration:none; display:flex; align-items:center; gap:11px; font-size:17px; font-weight:800; letter-spacing:.12em; }
.brand-dot { color:var(--orange); }.brand-mark { width:23px; height:23px; display:flex; align-items:flex-end; gap:3px; }.brand-mark i { display:block; width:5px; background:var(--orange); transform:skew(-18deg); }.brand-mark i:nth-child(1){height:11px}.brand-mark i:nth-child(2){height:17px;background:var(--cyan)}.brand-mark i:nth-child(3){height:23px}
.topbar-meta, footer { color:var(--muted); font-family:"DM Mono", monospace; font-size:11px; letter-spacing:.03em; }.status-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(255,113,71,.1); }.meta-separator { color:#515858; margin:0 9px; }
main { padding:72px 0 84px; }.intro { max-width:690px; margin-bottom:56px; }.eyebrow { margin:0 0 20px; color:var(--orange); font:500 11px "DM Mono", monospace; letter-spacing:.08em; }.eyebrow span { color:var(--muted); margin-left:8px; }.intro h1 { margin:0; font-size:clamp(42px,6vw,74px); line-height:1.03; letter-spacing:-.04em; font-weight:800; }.intro h1 em { color:var(--orange); font-style:normal; }.lede { max-width:580px; margin:24px 0 0; color:var(--muted); font-size:16px; line-height:1.75; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,1.58fr) minmax(320px,.9fr); gap:22px; align-items:start; }.panel { background:var(--panel); border:1px solid var(--line); }.builder-panel { padding:30px 32px 32px; }.panel-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; }.panel-heading > div { display:flex; align-items:center; gap:14px; }.panel-index { color:var(--orange); font:500 11px "DM Mono", monospace; }.panel-index.cyan { color:var(--cyan); }.panel h2 { margin:0; font-size:18px; letter-spacing:-.02em; }.text-button { background:none; border:0; color:var(--muted); padding:4px 0; font-size:12px; }.text-button:hover { color:var(--text); }.field { display:block; min-width:0; }.field-wide { margin-bottom:24px; }.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }.field-label { display:block; margin-bottom:9px; color:#c1c6c4; font:500 11px "DM Mono", monospace; letter-spacing:.02em; text-transform:uppercase; }.field-label b { color:var(--orange); font-weight:400; margin-left:6px; }
input, textarea, select { width:100%; color:var(--text); background:var(--panel-2); border:1px solid var(--line); border-radius:2px; outline:0; transition:border-color .18s, background .18s; }.field input, .field select { height:46px; padding:0 13px; }.field textarea { padding:13px; resize:vertical; min-height:104px; line-height:1.6; }.field input::placeholder, textarea::placeholder { color:#69716f; }.field select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#818b88 50%),linear-gradient(135deg,#818b88 50%,transparent 50%); background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--cyan); background:#232928; box-shadow:0 0 0 3px rgba(118,217,202,.08); }.field-hint { display:block; margin-top:8px; color:#68706e; font-size:11px; }
.options-block { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0 18px; margin:2px 0 22px; }.option-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px 10px; }.toggle { display:flex; align-items:center; gap:9px; color:#c1c6c4; font-size:12px; cursor:pointer; }.toggle input { position:absolute; opacity:0; width:1px; height:1px; }.switch { width:28px; height:16px; padding:2px; display:inline-flex; align-items:center; background:#303736; border-radius:99px; transition:.2s; }.switch:after { content:""; width:12px; height:12px; border-radius:50%; background:#7c8582; transition:.2s; }.toggle input:checked + .switch { background:var(--orange); }.toggle input:checked + .switch:after { transform:translateX(12px); background:#fff; }.toggle input:focus-visible + .switch { outline:2px solid var(--cyan); outline-offset:3px; }
.advanced-details { border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:24px; }.advanced-details summary { cursor:pointer; color:#c1c6c4; font-size:12px; list-style:none; }.advanced-details summary::-webkit-details-marker { display:none; }.advanced-details summary:before { content:"+"; color:var(--orange); font:16px "DM Mono",monospace; margin-right:9px; }.advanced-details[open] summary:before { content:"-"; }.advanced-details summary span { color:var(--muted); margin-left:8px; font-size:11px; }.advanced-details .field { margin-top:20px; }
.primary-action, .secondary-action { display:flex; justify-content:center; align-items:center; gap:12px; border:0; border-radius:2px; transition:transform .18s, background .18s; }.primary-action { width:100%; height:52px; color:#171716; background:var(--orange); font-weight:800; }.primary-action:hover { background:#ff8661; transform:translateY(-1px); }.arrow { font-size:20px; line-height:0; }.result-column { display:grid; gap:15px; }.result-panel { min-height:410px; padding:30px 28px; }.live-label { color:var(--cyan); font:500 10px "DM Mono",monospace; }.cyan-dot { background:var(--cyan); box-shadow:0 0 0 4px rgba(118,217,202,.1); }.result-empty { min-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-top:1px solid var(--line); color:var(--muted); }.route-graphic { width:90px; height:54px; position:relative; margin-bottom:26px; }.route-graphic:before, .route-graphic:after { content:""; position:absolute; left:13px; right:13px; top:26px; border-top:1px dashed #4d5c58; }.route-graphic span { position:absolute; width:10px; height:10px; top:21px; background:var(--panel); border:2px solid var(--cyan); transform:rotate(45deg); }.route-graphic span:nth-child(1){left:6px}.route-graphic span:nth-child(2){left:40px;border-color:var(--orange);background:var(--orange)}.route-graphic span:nth-child(3){right:6px}.result-empty p { margin:0 0 7px; color:#c6cdca; font-size:13px; }.result-empty small { color:#68716f; font-size:11px; }.is-hidden { display:none; }.result-label { color:#7d8985; font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.05em; margin-bottom:9px; }.url-box { display:flex; align-items:stretch; background:#111515; border:1px solid #3b4541; }.url-box code { flex:1; min-width:0; padding:13px 12px; color:var(--cyan); font:11px/1.6 "DM Mono",monospace; overflow-wrap:anywhere; }.icon-button { width:43px; color:#bac4c0; background:none; border:0; border-left:1px solid #3b4541; font-size:18px; }.icon-button:hover { color:var(--orange); }.result-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:13px 0 30px; }.secondary-action { min-height:38px; color:#d0d6d2; background:#262b2a; border:1px solid #3a4440; font-size:11px; }.secondary-action:hover { border-color:var(--cyan); color:var(--cyan); }.short-label { border-top:1px solid var(--line); padding-top:20px; }.summary-list { margin:0; }.summary-list div { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid #282e2c; }.summary-list dt { color:#79827f; font-size:11px; }.summary-list dd { margin:0; color:#d5dad6; font-size:11px; text-align:right; }.notice { display:flex; gap:11px; padding:14px 16px; border-left:2px solid var(--orange); background:#1b201f; }.notice-icon { display:flex; align-items:center; justify-content:center; width:16px; height:16px; border:1px solid var(--orange); border-radius:50%; color:var(--orange); font:11px Georgia,serif; }.notice p { margin:0; color:#7f8985; font-size:11px; line-height:1.6; }.notice strong { color:#c9cfcc; font-weight:600; }
footer { display:flex; justify-content:space-between; padding:18px 0 24px; border-top:1px solid var(--line); }.toast { position:fixed; bottom:25px; left:50%; padding:10px 16px; color:#171716; background:var(--cyan); font-size:12px; font-weight:700; transform:translate(-50%, 80px); opacity:0; transition:.25s; }.toast.show { transform:translate(-50%,0); opacity:1; }
@media (max-width:800px) { .shell { padding:0 20px; }.topbar { height:68px; }.topbar-meta { font-size:0; }.topbar-meta .status-dot { margin-right:0; }.meta-separator { display:none; } main { padding:48px 0 60px; }.intro { margin-bottom:38px; }.intro h1 { font-size:46px; }.lede { font-size:14px; }.workspace-grid { grid-template-columns:1fr; }.builder-panel, .result-panel { padding:24px 20px; }.result-panel { min-height:0; }.option-grid { grid-template-columns:1fr 1fr; }.field-row { grid-template-columns:1fr; gap:20px; margin-bottom:20px; } footer { display:block; line-height:2; } }
@media (prefers-reduced-motion:reduce) { *, *:before, *:after { transition:none!important; } }