:root { --ink:#eaf3f6; --muted:#83949c; --line:#263840; --panel:#101d23; --panel2:#14242b; --lime:#d8ff4f; --aqua:#68e4df; }
* { box-sizing:border-box; }
body { margin:0; background:#071116; color:var(--ink); font-family:Arial,sans-serif; min-width:320px; }
button,select { font:inherit; }
.app-shell { max-width:1240px; margin:auto; padding:30px 38px 60px; }
.masthead { border-bottom:1px solid var(--line); padding-bottom:23px; display:flex; justify-content:space-between; align-items:center; }
.brand { font-weight:700; font-size:17px; letter-spacing:2.5px; display:flex; gap:10px; align-items:center; }.brand-mark { background:var(--lime); color:#071116; padding:3px 5px 2px; letter-spacing:-1px; font-size:13px; }.eyebrow,.kicker,.section-label { font-family:monospace; color:var(--aqua); text-transform:uppercase; letter-spacing:1.5px; font-size:11px; margin:0; }
.hero { padding:58px 0 42px; display:flex; justify-content:space-between; gap:35px; align-items:end; }.hero h1 { margin:7px 0; font-size:clamp(40px,7vw,76px); letter-spacing:-4px; line-height:.93; }.subhead { color:var(--muted); margin:17px 0 0; font-size:17px; }.connection-card { min-width:320px; background:var(--panel); border:1px solid var(--line); padding:16px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; font-size:13px; }.connection-light { width:9px; height:9px; border-radius:50%; background:#65757b; }.connection-card.connected .connection-light { background:var(--lime); box-shadow:0 0 14px var(--lime); }.outline-button { grid-column:1/-1; margin-top:7px; background:transparent; border:1px solid #52636a; color:var(--ink); padding:10px; cursor:pointer; font-weight:600; }.toolbar { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:13px 0; display:flex; align-items:center; gap:10px; }.action-button { border:0; background:var(--lime); color:#071116; padding:11px 15px; font-weight:700; cursor:pointer; }.action-button.secondary { color:var(--ink); background:var(--panel2); }.action-button:disabled { opacity:.38; cursor:not-allowed; }.status { color:var(--muted); margin-left:auto; font-size:13px; }
.workspace { display:grid; grid-template-columns:210px 1fr; margin-top:30px; }.sidebar { padding-right:24px; border-right:1px solid var(--line); }.side-title { font-family:monospace; color:var(--muted); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; padding:0 12px 12px; }.profile-tabs { display:grid; gap:3px; }.profile-tab { color:#a7bac1; background:transparent; text-align:left; border:0; padding:12px; cursor:pointer; font-size:15px; }.profile-tab span { font:11px monospace; color:#586970; margin-right:8px; }.profile-tab.active { background:var(--lime); color:#071116; font-weight:700; }.profile-tab.active span { color:#425214; }.readme-link { margin:32px 12px; padding:0; color:var(--aqua); background:none; border:0; cursor:pointer; font-size:13px; }.editor-panel { min-width:0; padding-left:42px; }.panel-header { display:flex; justify-content:space-between; padding:0 0 20px; align-items:end; }.panel-header h2 { font-size:29px; margin:6px 0 0; letter-spacing:-1px; }.panel-controls { display:flex; gap:14px; }.orientation { color:var(--muted); font:11px monospace; text-transform:uppercase; letter-spacing:1px; display:grid; gap:7px; }.orientation select,.mapping-select { border:1px solid #35484e; border-radius:0; background:#0c171c; color:var(--ink); padding:10px; cursor:pointer; }.orientation-section { display:flex; justify-content:space-between; align-items:end; background:var(--panel2); border-left:4px solid var(--aqua); padding:18px 20px; margin-bottom:24px; }.orientation-section h3 { font-size:24px; margin:5px 0 0; letter-spacing:-.8px; }.orientation-choice { min-width:240px; font-size:11px; }.orientation-choice select { font-size:15px; padding:12px; }.column-head,.mapping-row { display:grid; grid-template-columns:1.05fr 1.2fr 1.05fr; gap:20px; align-items:center; }.column-head { padding:0 13px 10px; color:var(--muted); text-transform:uppercase; letter-spacing:1.3px; font:10px monospace; }.mapping-row { padding:13px; background:var(--panel); border-top:1px solid var(--line); min-height:72px; }.mapping-row:last-child { border-bottom:1px solid var(--line); }.control-name { font-weight:600; }.control-detail { font:10px monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; margin-top:4px; }.options { display:flex; gap:14px; align-items:center; color:#a4b7bd; font-size:12px; }.option { display:flex; gap:6px; align-items:center; cursor:pointer; }.option input { accent-color:var(--lime); }
dialog { max-width:560px; background:#14242b; color:var(--ink); border:1px solid #486067; padding:35px; box-shadow:0 20px 80px #000; }.close { float:right; border:0; background:transparent; color:var(--ink); cursor:pointer; font-size:30px; line-height:18px; }dialog h2 { margin:8px 0 18px; font-size:27px; letter-spacing:-1px; }dialog p:not(.kicker) { color:#b5c4c9; line-height:1.6; }dialog::backdrop { background:#020708cc; }.mapping-row.testing { background:#2a3918; box-shadow:inset 4px 0 var(--lime); }
@media (max-width:760px) { .app-shell { padding:22px 18px 40px; }.hero { padding:42px 0 28px; display:block; }.connection-card { min-width:0; margin-top:28px; }.toolbar { flex-wrap:wrap; }.status { width:100%; margin:4px 0 0; }.workspace { grid-template-columns:1fr; }.sidebar { border:0; padding:0 0 22px; }.profile-tabs { grid-template-columns:repeat(3,1fr); }.profile-tab { font-size:13px; padding:10px 6px; }.profile-tab span { display:none; }.readme-link { margin:18px 6px 0; }.editor-panel { padding:25px 0 0; border-top:1px solid var(--line); }.panel-header { align-items:start; }.orientation { max-width:130px; }.orientation-section { align-items:start; flex-direction:column; gap:14px; }.orientation-choice { min-width:0; max-width:none; width:100%; }.column-head { display:none; }.mapping-row { grid-template-columns:1fr; gap:9px; }.options { padding-top:2px; }.hero h1 { letter-spacing:-2px; } }