@view-transition{navigation: auto;}::view-transition-old(root){animation:fade-out .15s ease-out}::view-transition-new(root){animation:fade-in .15s ease-in}@keyframes fade-out{to{opacity:0}}@keyframes fade-in{0%{opacity:0}}html{background:#111114}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;background:#111114;min-height:100vh;color:#e4e4e7;line-height:1.6}.container{max-width:900px;margin:0 auto;padding:40px 20px}header{text-align:center;margin-bottom:32px}h1{font-size:28px;font-weight:700;color:#e4e4e7;margin-bottom:8px}h1.hero{font-size:32px;margin-bottom:12px}.subtitle{color:#71717a;font-size:14px}.subtitle.hero{font-size:16px}.kofi-badge{position:fixed;top:16px;right:16px;z-index:100;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:6px 12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#f87171;text-decoration:none;transition:background .15s ease,border-color .15s ease}.kofi-badge:hover{background:#ffffff1a;border-color:#fff3}.kofi-badge svg{width:14px;height:14px;fill:currentColor}.kofi-badge .callsign{font-size:9px;font-weight:700;font-family:Consolas,Monaco,monospace;letter-spacing:.5px;margin-left:8px;padding:2px 6px;background:#3b9ece;border-radius:3px;color:#111114}.back-link{display:inline-flex;align-items:center;gap:6px;color:#71717a;text-decoration:none;font-size:13px;margin-bottom:24px;transition:color .15s ease}.back-link:hover{color:#3b9ece}.back-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.card{background:#1c1d21;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:24px;margin-bottom:16px}.card.disabled{opacity:.5;pointer-events:none}.card-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.step-number{width:28px;height:28px;min-width:28px;background:#0ea5e9;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#111114}.card-title{font-size:15px;font-weight:600;color:#e4e4e7}.card-title-group{display:flex;flex-direction:column;gap:2px}.status-subtitle{font-size:12px;color:#71717a}.status-subtitle.connected{color:#4ade80}.status-subtitle.disconnected{color:#71717a}button{font-family:inherit;font-size:14px;font-weight:600;padding:10px 20px;border-radius:6px;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}button:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.btn-loading{pointer-events:none;font-family:monospace}.btn-loading:before{content:"";display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .6s linear infinite;margin-right:6px;vertical-align:middle}@keyframes spin{to{transform:rotate(360deg)}}.btn-primary{background:#0ea5e9;color:#111114}.btn-primary:hover:not(:disabled){background:#38bdf8}.btn-secondary{background:#ffffff1a;color:#a1a1aa;border:1px solid rgba(255,255,255,.1)}.btn-secondary:hover:not(:disabled){background:#ffffff26;color:#e4e4e7}.btn-success{background:#16a34a;color:#f0fdf4}.btn-success:hover:not(:disabled){background:#22c55e}.btn-danger{background:#ef444426;color:#f87171;border:1px solid rgba(239,68,68,.3)}.btn-danger:hover:not(:disabled){background:#ef444440;color:#fca5a5}.btn-disconnect{background:#ef444426;color:#f87171;border:1px solid rgba(239,68,68,.3)}.btn-disconnect:hover:not(:disabled){background:#ef444440;color:#fca5a5}.button-group{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.button-group button{flex:1}.status-badge{margin-left:auto;padding:6px 14px;border-radius:12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}.status-badge:before{content:"";width:8px;height:8px;border-radius:50%}.status-badge.disconnected{background:#ef444426;color:#f87171}.status-badge.disconnected:before{background:#ef4444}.status-badge.connected{background:#22c55e26;color:#4ade80}.status-badge.connected:before{background:#22c55e;animation:pulse 2s infinite}.badge-experimental{display:inline-block;background:#f59e0b26;color:#fbbf24;font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;margin-left:8px;vertical-align:middle}.warning-box{background:#ffffff08;border:none;border-left:3px solid #d97706;border-radius:0 6px 6px 0;padding:14px 16px;font-size:13px;color:#d4d4d8;margin-bottom:16px;line-height:1.5}.warning-box strong{color:#fbbf24}.help-box{background:#ffffff08;border:none;border-left:3px solid #3b9ece;border-radius:0 6px 6px 0;padding:12px 16px;font-size:13px;color:#a1a1aa;margin-bottom:16px}.help-box strong{color:#3b9ece}.help-box ol{margin:8px 0 0;padding-left:20px}.help-box li{margin:4px 0}.help-box a{color:#3b9ece;text-decoration:none}.help-box a:hover{text-decoration:underline}.file-input-wrapper{position:relative}.file-input{display:none}.drop-zone-wrapper{border:2px dashed rgba(255,255,255,.15);border-radius:8px;transition:all .2s ease}.drop-zone-wrapper:hover{border-color:#3b9ece66}.drop-zone-wrapper.has-file{border-color:#22c55e66;border-style:solid}.file-drop-zone{display:block;border-radius:6px;padding:24px;text-align:center;cursor:pointer;transition:background .2s ease;background:#00000040}.file-drop-zone:hover{background:#3b9ece0f}.drop-zone-wrapper.has-file .file-drop-zone{background:#22c55e1a}.file-icon{margin-bottom:8px}.file-icon svg{width:40px;height:40px;fill:#71717a}.file-text{color:#71717a;font-size:14px}.file-name{color:#4ade80;font-weight:600;font-size:14px}.file-size{color:#71717a;font-size:12px;margin-top:4px}.file-error{color:#f87171;font-size:13px;margin-top:8px}.notice{text-align:center;font-size:12px;color:#52525b;margin-top:16px}