:root{
  --bg:#ffffff; --text:#131313; --muted:#8a8a8a; --hair:#e6e6e6; --field:#fafafa;
  --btn-bg:#111111; --btn-fg:#ffffff; --line:#111111; --big-step:#ececec; --dot:#111111;
  --disabled-bg:#d0d0d0; --disabled-fg:#9a9a9a;
}
[data-theme="dark"]{
  --bg:#101011; --text:#f1f1ef; --muted:#8d8d88; --hair:#2a2a2c; --field:#1a1a1c;
  --btn-bg:#f1f1ef; --btn-fg:#101011; --line:#f1f1ef; --big-step:#242427; --dot:#f1f1ef;
  --disabled-bg:#2b2b2e; --disabled-fg:#5c5c5f;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; line-height:1.45;
  display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px;
  transition:background .18s ease,color .18s ease;
}
.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}

.app{
  position:relative; width:100%; max-width:1080px; background:var(--bg);
  border:1px solid var(--hair); display:flex; gap:56px; align-items:stretch;
  padding:56px 64px 56px 80px; min-height:600px;
}
.theme{
  position:absolute; top:16px; right:16px; z-index:5; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; background:transparent;
  border:1px solid var(--hair); cursor:pointer; font-size:15px; line-height:1;
  filter:grayscale(1); color:inherit;
}
.rail{
  width:300px; flex:0 0 300px; display:flex; flex-direction:column; gap:20px;
  border-right:1px solid var(--hair); padding-right:44px;
}
.rail .brand{font-size:22px;font-weight:800;letter-spacing:-.015em}
.rail .tag,.mhead .tag{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.rail .spacer{flex:1}
.rail .big{font-size:84px;font-weight:800;line-height:.85;letter-spacing:-.04em;color:var(--big-step)}
.rail .rtitle{font-size:18px;font-weight:800;margin-top:12px}
.rail .rdesc{font-size:13px;color:var(--muted);margin-top:6px;max-width:220px}

.col{display:flex;flex-direction:column;gap:18px;width:440px;flex:0 0 440px;min-width:0}
.mhead{display:none;padding-bottom:16px;padding-right:44px;border-bottom:1px solid var(--hair)}
.mhead .brand{font-size:19px;font-weight:800;letter-spacing:-.015em}

.step{display:flex;flex-direction:column;gap:18px}
.h-row{display:flex;align-items:baseline;gap:10px}
.h-row h2{font-size:22px;font-weight:800;letter-spacing:-.015em}
.frac{font-size:14px;font-weight:600;color:var(--muted)}
.desc{margin-top:8px;font-size:13.5px;color:var(--muted)}

.linkbox{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--field);border:1px solid var(--hair);padding:12px}
.linkbox .val{flex:1 1 200px;min-width:0;font-size:12.5px;word-break:break-all}
.btn-solid{background:var(--btn-bg);color:var(--btn-fg);border:none;padding:10px 14px;font:inherit;font-weight:700;font-size:12.5px;cursor:pointer}

.qr-row{display:flex;align-items:center;gap:16px}
.qr{width:128px;height:128px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:1px solid var(--hair)}
.qr img{width:100%;height:100%;display:block}
.qr-note{font-size:13px;color:var(--muted)}
.qr-note b{color:var(--text)}

.statusbox{background:var(--field);border:1px solid var(--hair);padding:15px 16px}
.listening{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px}
.listening .dot{width:11px;height:11px;background:var(--dot);display:inline-block;animation:blink 1s steps(2,start) infinite}
.listening + .sub-note{margin-top:6px;font-size:12.5px;color:var(--muted)}
.got-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.got-head .ok{font-weight:800;font-size:14px}
.btn-ghost{background:transparent;border:1px solid var(--hair);color:inherit;padding:7px 11px;font:inherit;font-weight:700;font-size:12px;cursor:pointer}
.device{display:grid;grid-template-columns:88px 1fr;gap:8px 12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);font-size:12px}
.device dt{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:10.5px;align-self:center}
.device dd{font-size:12px;word-break:break-all}

.btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 auto;border:none;font:inherit;font-weight:700;font-size:15px;letter-spacing:.01em;padding:14px 18px;background:var(--btn-bg);color:var(--btn-fg);cursor:pointer}
.btn-primary[disabled]{background:var(--disabled-bg);color:var(--disabled-fg);cursor:not-allowed}
.btn-outline{flex:0 0 auto;background:transparent;border:1px solid var(--line);color:inherit;padding:14px 18px;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.btn-wide{width:100%;background:transparent;border:1px solid var(--line);color:inherit;padding:14px 18px;font:inherit;font-weight:700;font-size:15px;cursor:pointer}

.field-col{display:flex;flex-direction:column;gap:8px}
textarea{width:100%;min-height:96px;resize:vertical;background:var(--field);border:1px solid var(--hair);padding:13px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:12.5px;color:var(--text);line-height:1.5}
.paste-row{display:flex;justify-content:flex-end}
.link-btn{background:transparent;border:none;color:var(--muted);font:inherit;font-weight:700;font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
.error{font-size:13px;font-weight:700;border-left:3px solid var(--line);padding:8px 12px;background:var(--field)}
.progress-wrap{display:flex;flex-direction:column;gap:7px}
.progress{height:8px;background:var(--hair);overflow:hidden}
.progress .bar{height:100%;background:var(--btn-bg);width:0;transition:width .15s linear}
.progress-status{font-size:11.5px;color:var(--muted)}
.row-gap{display:flex;gap:10px}

.keys{border:1px solid var(--hair)}
.keys-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-bottom:1px solid var(--hair)}
.keys-head .title{font-weight:800;font-size:14px}
.key{display:flex;flex-direction:column;gap:7px;padding:12px 14px;border-bottom:1px solid var(--hair)}
.key-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.key-name{font-weight:700;font-size:13px}
.key-copy{flex:0 0 auto;background:transparent;border:1px solid var(--hair);color:inherit;padding:5px 10px;font:inherit;font-weight:700;font-size:11px;cursor:pointer}
.key-uri{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.keys-toggle{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;background:transparent;border:none;color:inherit;font:inherit;cursor:pointer;padding:0;text-align:left}
.keys-toggle .title{font-weight:800;font-size:14px}
.keys-dl{padding:8px 13px;font-size:12px}
.chev{font-size:11px;color:var(--muted);width:12px;flex:0 0 auto}
.keys[data-open="closed"] .keys-body{display:none}
.keys[data-open="closed"][data-notice="0"] .keys-head{border-bottom:none}
.keys-notice{font-size:12px;font-weight:700;background:var(--field);padding:11px 14px;line-height:1.45}
.keys[data-notice="0"] .keys-notice{display:none}

/* step visibility */
.app[data-step="1"] [data-view="2"],.app[data-step="1"] [data-view="3"],
.app[data-step="2"] [data-view="1"],.app[data-step="2"] [data-view="3"],
.app[data-step="3"] [data-view="1"],.app[data-step="3"] [data-view="2"]{display:none}
/* capture sub-states */
.app:not([data-status="listening"]) .listening,
.app:not([data-status="listening"]) .sub-note{display:none}
.app:not([data-status="connected"]) .got{display:none}
.app:not([data-details="open"]) .device{display:none}
.app:not([data-processing="1"]) .progress-wrap{display:none}
.app:not([data-error="1"]) .error{display:none}

@media(max-width:860px){
  body{align-items:flex-start;padding:0}
  .app{max-width:520px;flex-direction:column;gap:20px;padding:24px;border:none;min-height:100vh}
  .rail{display:none}
  .mhead{display:block}
  .col{width:100%;flex:1 1 auto;gap:20px}
}