:root{color:#18201d;font-synthesis:none;background:#edf1ed;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 15% 10%,#a6c4ad52,#0000 32rem),#edf1ed;min-width:320px;min-height:100vh;margin:0}main{max-width:1240px;margin:0 auto;padding:28px}header{justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px;display:flex}h1,h2,p{margin-top:0}h1{letter-spacing:-.04em;margin-bottom:0;font-size:clamp(1.75rem,4vw,2.75rem)}h2{margin-bottom:14px;font-size:.95rem}.eyebrow{color:#66726c;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;font-size:.75rem;font-weight:700}.status{cursor:pointer;background:#ffffffa6;border:1px solid #c8d0ca;border-radius:999px;align-items:center;gap:8px;padding:9px 13px;font-size:.82rem;font-weight:700;display:inline-flex}.status:before{content:"";background:#c89c41;border-radius:50%;width:8px;height:8px}.status[data-state=streaming]:before{background:#278452;box-shadow:0 0 0 4px #2784521f}.status[data-state=failed]:before{background:#c44840}.status:hover{background:#ffffffe6}.status:focus-visible{outline-offset:2px;outline:3px solid #29815133}.status-chevron{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:14px;height:14px;transition:transform .18s}.status[aria-expanded=true] .status-chevron{transform:rotate(180deg)}.device-panel-scrim{z-index:50;opacity:0;pointer-events:none;background:#0c100e3d;transition:opacity .18s;position:fixed;inset:0}.device-panel-scrim.visible{opacity:1;pointer-events:auto}.device-panel-scrim[hidden],.device-panel[hidden]{display:none}.device-panel{z-index:60;opacity:0;transform-origin:100% 0;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#f8faf8f5;border:1px solid #d4dcd5;border-radius:18px;width:min(340px,100vw - 32px);max-height:calc(100vh - 110px);padding:18px;transition:opacity .18s,transform .18s;position:fixed;top:86px;right:max(28px,50vw - 592px);overflow-y:auto;transform:translateY(-10px)scale(.98);box-shadow:0 18px 52px #1b251f38}.device-panel.open{opacity:1;transform:translateY(0)scale(1)}.device-panel-heading{justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex}.device-panel-heading h2{margin:0}.icon-button{border-radius:50%;justify-content:center;align-items:center;width:34px;min-height:34px;padding:0;display:inline-flex}.icon-button svg,.screen-actions svg{fill:none;stroke:currentColor;stroke-width:1.9px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.screen-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px;display:grid}.screen-actions button{justify-content:center;align-items:center;gap:8px;display:inline-flex}.device-events{border-top:1px solid #d4dcd5;margin-top:18px;padding-top:16px}.device-events h3{margin:0 0 10px;font-size:.82rem}.workspace{grid-template-columns:minmax(300px,1fr) 340px;align-items:start;gap:24px;display:grid}.device-shell{background:#0c100e;border:1px solid #28332e;border-radius:28px;place-items:center;min-height:700px;display:grid;position:relative;overflow:hidden;box-shadow:0 22px 60px #25312a33}#screen{touch-action:none;cursor:crosshair;object-fit:contain;width:100%;height:auto;max-height:82vh;display:block}.lan-access-details{padding:0}.lan-access-details>summary{cursor:pointer;-webkit-user-select:none;user-select:none;margin:0;padding:18px;font-size:.95rem;font-weight:700;list-style:none}.lan-access-details>summary::-webkit-details-marker{display:none}.lan-access-details>summary:after{float:right;content:"▸";transition:transform .2s}.lan-access-details[open]>summary:after{transform:rotate(90deg)}.lan-access-details>.lan-access-content,.lan-access-details>.hint{padding:0 18px}.lan-access-details>.hint{padding-bottom:18px}.lan-access-content{justify-items:center;gap:10px;display:grid}.lan-qr{background:#fff;border-radius:12px;width:184px;height:184px;padding:8px;display:block}.lan-qr[hidden],.lan-access-url[hidden],#copy-lan-url[hidden]{display:none}.lan-access-status{color:#526159;text-align:center;margin:0;font-size:.8rem}.lan-access-url{color:#1d6d42;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;overflow:hidden}#copy-lan-url{width:100%}.empty{color:#89938e;font-size:.9rem;position:absolute}.empty[hidden]{display:none}aside{gap:14px;display:grid}.panel{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffb8;border:1px solid #d4dcd5;border-radius:18px;padding:18px;box-shadow:0 10px 28px #33433912}dl{gap:10px;margin:0;display:grid}dl div{justify-content:space-between;gap:16px;display:flex}dt{color:#718078}dd{font-variant-numeric:tabular-nums;margin:0;font-weight:700}.actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.actions button{justify-content:center;align-items:center;min-width:0;height:52px;padding:0;display:inline-flex}.actions svg{fill:none;stroke:currentColor;stroke-width:1.9px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}button,textarea{font:inherit}button{color:#17201c;cursor:pointer;background:#f8faf8;border:1px solid #bfc9c1;border-radius:11px;min-height:42px;padding:0 14px;font-weight:700}button:hover{background:#eef4ef}button:disabled{cursor:not-allowed;opacity:.5}button.primary{color:#fff;background:#1d5f3b;border-color:#1d5f3b}form{gap:10px;display:grid}textarea{resize:vertical;color:#17201c;background:#fff;border:1px solid #bcc8bf;border-radius:11px;width:100%;padding:11px 12px;line-height:1.5}textarea:focus{border-color:#297d50;outline:3px solid #29815124}.hint{color:#78847d;margin:10px 0 0;font-size:.75rem;line-height:1.5}.media-picker{color:#314139;cursor:pointer;background:#ffffff73;border:1px dashed #9eaca2;border-radius:11px;justify-content:center;align-items:center;gap:8px;min-height:46px;padding:0 12px;font-size:.84rem;font-weight:700;display:flex;position:relative;overflow:hidden}.media-picker:hover{background:#297d500f;border-color:#297d50}.media-picker:focus-within{border-color:#297d50;outline:3px solid #29815124}.media-picker input{opacity:0;width:1px;height:1px;position:absolute}.media-picker svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.media-selection,.media-upload-status{color:#66756d;margin:0;font-size:.76rem;line-height:1.45}.media-upload-status:empty{display:none}.media-upload-status[data-state=success]{color:#1d6d42}.media-upload-status[data-state=error]{color:#b03e38}.media-upload-status[data-state=working]{color:#526159}.media-picker+.media-selection{margin-top:-2px}progress{accent-color:#297d50;border:0;border-radius:999px;width:100%;height:7px;overflow:hidden}progress[hidden]{display:none}ol{gap:7px;margin:0;padding:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;list-style:none;display:grid}li{color:#526159}li[data-kind=error]{color:#b03e38}.drawer-handle,.drawer-scrim,.drawer-toggle{display:none}.auth-overlay{z-index:100;background:#0c100e;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.auth-overlay[hidden]{display:none}.auth-card{text-align:center;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:20px;width:min(360px,90vw);padding:32px 28px;box-shadow:0 20px 60px #00000080}.auth-card h2{color:#eaf2ec;margin:0 0 8px;font-size:1.3rem}.auth-hint{color:#89938e;margin:0 0 20px;font-size:.85rem}.auth-card form{gap:10px}.auth-card input{color:#f2f7f3;width:100%;font:inherit;background:#00000059;border:1px solid #ffffff29;border-radius:11px;padding:12px 14px;font-size:1rem}.auth-card input:focus{border-color:#297d50;outline:3px solid #29815133}.auth-error{color:#ff8a80;margin:12px 0 0;font-size:.8rem}@media (width<=850px){html,body{overflow:hidden}body{background:#0c100e;height:100dvh}main{max-width:none;padding:0;position:fixed;inset:0}header{top:env(safe-area-inset-top,0);right:env(safe-area-inset-right,0);z-index:70;pointer-events:none;background:0 0;margin:0;padding:10px 12px;position:fixed;left:auto}.brand{display:none}.status{color:#eaf2ec;pointer-events:auto;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0c100e8c;border-color:#ffffff2e;padding:6px 10px;font-size:.72rem}.status:hover{background:#0c100eb8}.status:before{width:7px;height:7px}.device-panel-scrim{z-index:50;background:#00000061}.device-panel{top:calc(52px + env(safe-area-inset-top,0));right:calc(12px + env(safe-area-inset-right,0));left:calc(12px + env(safe-area-inset-left,0));z-index:60;width:auto;max-height:calc(100dvh - 68px - env(safe-area-inset-top,0));color:#e8efe9;transform-origin:100% 0;background:#171d1af5;border-color:#ffffff1a;padding:16px;transform:translateY(-18px)scale(.98);box-shadow:0 18px 48px #00000080}.device-panel.open{transform:translateY(0)scale(1)}.device-panel dt{color:#9daea5}.device-panel dd{color:#f2f7f3}.device-events{border-top-color:#ffffff1a}.workspace{gap:0;height:100dvh;padding:0;display:block}.device-shell{min-height:0;box-shadow:none;background:#0c100e;border:none;border-radius:0;position:absolute;inset:0}#screen{width:auto;max-width:100vw;height:auto;max-height:100dvh}.lan-access-details,#iphone-pairing-panel{display:none}aside{z-index:35;max-height:75dvh;padding:8px 14px calc(14px + env(safe-area-inset-bottom,0));color:#e8efe9;-webkit-overflow-scrolling:touch;background:#171d1a;border-top-left-radius:20px;border-top-right-radius:20px;gap:12px;transition:transform .26s cubic-bezier(.22,.61,.36,1);display:grid;position:fixed;bottom:0;left:0;right:0;overflow-y:auto;transform:translateY(calc(100% + 40px));box-shadow:0 -12px 40px #0000008c}aside.open{transform:translateY(0)}.drawer-handle{cursor:pointer;background:#ffffff47;border-radius:999px;width:44px;height:4px;margin:4px auto 6px;display:block}.panel{box-shadow:none;color:#e8efe9;background:#ffffff0f;border:1px solid #ffffff14;padding:14px}.panel h2{color:#e8efe9}dt{color:#9daea5}dd{color:#f2f7f3}button{color:#f2f7f3;background:#ffffff14;border-color:#ffffff24}button:hover{background:#ffffff24}button.primary{color:#fff;background:#297d50;border-color:#297d50}textarea{color:#f2f7f3;background:#00000059;border-color:#ffffff24}.media-picker{color:#e8efe9;background:#0000002e;border-color:#ffffff3d}.media-picker:hover{background:#58a87b1a;border-color:#58a87b}.media-selection,.media-upload-status[data-state=working]{color:#b8c5bd}.media-upload-status[data-state=success]{color:#75d49f}.hint{color:#9daea5}li{color:#b8c5bd}li[data-kind=error]{color:#ff8a80}.drawer-scrim{z-index:25;opacity:0;pointer-events:none;background:#00000059;transition:opacity .2s;display:block;position:fixed;inset:0}.drawer-scrim.visible{opacity:1;pointer-events:auto}.drawer-scrim[hidden]{display:none}.drawer-toggle{right:calc(14px + env(safe-area-inset-right,0));bottom:calc(18px + env(safe-area-inset-bottom,0));z-index:40;color:#eaf2ec;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#141a17d1;border:1px solid #ffffff2e;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;min-height:48px;padding:0;transition:transform .2s,background .2s,opacity .18s;display:inline-flex;position:fixed;box-shadow:0 8px 22px #0006}.drawer-toggle:hover{background:#1e2822e6}.drawer-toggle[aria-expanded=true]{opacity:0;pointer-events:none}}.paired-client-main{font-weight:600}.paired-client-meta{color:#5a6b62;word-break:break-all;margin-top:.2rem;font-size:.8rem}.paired-clients-list li{border-bottom:1px solid #17201c14;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.5rem .75rem;padding:.5rem 0;display:flex}.paired-clients-list li:last-child{border-bottom:none}.paired-client-revoke{flex-shrink:0}.paired-clients-list .muted{color:#6b7c74;list-style:none}.iphone-pairing-actions{flex-wrap:wrap;gap:8px;margin-bottom:12px;display:flex}.paired-clients-details{margin-top:12px}.paired-clients-list{margin:8px 0;padding-left:1.2rem;font-size:.9rem}.paired-clients-list button{margin-left:6px;font-size:.8rem}body.app-shell{background:#000}body.app-shell main{max-width:none;min-height:100dvh;margin:0;padding:0}body.app-shell header .brand,body.app-shell #lan-access-details,body.app-shell #iphone-pairing-panel,body.app-shell #auth-overlay{display:none!important}body.app-shell header{padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top,0));background:#0000008c;margin:0}body.app-shell .device-shell{border-radius:0;min-height:calc(100dvh - 120px)}
