:root{color-scheme:dark;--bg:#151715;--panel:#1b1d1b;--raised:#222521;--line:#30342e;--text:#e7e9e1;--muted:#91988b;--dim:#68715f;--lime:#d4ed8a;--error:#ed917e;--blue:#a5bacc;--font:'DM Sans',sans-serif;--mono:'IBM Plex Mono',monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button{border:0}button:disabled{cursor:default;opacity:.4}a{color:inherit;text-decoration:none}svg{flex-shrink:0;vertical-align:middle}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:4px}button,input{transition:background .18s,color .18s,border-color .18s}button:hover{filter:brightness(1.09)}button:disabled:hover{filter:none}button:active:not(:disabled){transform:translateY(1px)}h1,h2,h3,p{margin:0}input::placeholder{color:#798071}::selection{background:#d4ed8a40;color:#eef8d1}.sidebar{width:200px;position:fixed;inset:0 auto 0 0;border-right:1px solid var(--line);padding:27px 15px 0;display:flex;flex-direction:column;background:#191b18;z-index:3}.brand{display:flex;align-items:center;font-size:29px;letter-spacing:-1.4px;font-weight:650;padding:0 10px;margin-bottom:35px}.brand-symbol{color:var(--lime);margin-right:11px;display:flex}.brand-period{color:var(--lime)}.project-switch{display:flex;align-items:center;gap:9px;border:1px solid #373d31;border-radius:7px;background:#23271e;padding:12px 9px;text-align:left;width:100%;font-size:13px}.project-switch>span:nth-child(2){flex:1}.project-switch small{display:block;font-size:12px;color:#8c967f;margin-top:4px}.project-icon{width:28px;height:29px;border:1px solid #53613b;background:#38462b;display:grid;place-items:center;color:#d7eaa9;font-size:22px;letter-spacing:-2px}.nav-label{font:12px var(--mono);letter-spacing:.12em;color:#777f6e;padding:30px 12px 13px}.nav-label.second{padding-top:31px}.main-nav{display:flex;flex-direction:column;gap:5px}.main-nav button{display:flex;align-items:center;gap:11px;text-align:left;padding:12px 11px;border-radius:5px;background:transparent;color:#9da493;font-size:12px;white-space:nowrap}.main-nav button.active{background:#303728;color:#deecbc}.main-nav button.active svg{color:var(--lime)}.main-nav button:hover{background:#2b3026;color:var(--text)}.main-nav button>span:first-of-type{flex:1}.nav-count{background:#34362e;color:#c5c9b9;font:12px var(--mono);padding:2px 5px;border-radius:3px}.sidebar-bottom{margin-top:auto;padding-top:45px}.local-note{display:flex;gap:7px;align-items:center;color:#a1aa93;font-size:12px;padding:0 9px;margin-bottom:16px}.storage-line{display:flex;justify-content:space-between;font-size:12px;color:#88927b;padding:0 9px}.storage-line>span:last-child{font-family:var(--mono)}.storage-meter{margin:10px 9px 21px;height:3px;background:#32382c;border-radius:3px;overflow:hidden}.storage-meter i{height:100%;display:block;background:var(--lime)}.help-link{border:0;background:transparent;display:flex;align-items:center;gap:9px;font-size:12px;color:#a6ad9e;padding:13px 10px;width:100%;margin-bottom:17px}.help-link>svg:last-child{margin-left:auto}.user{display:flex;align-items:center;gap:9px;border-top:1px solid var(--line);padding:19px 3px;font-size:12px}.avatar,.top-avatar{background:#383b31;border:1px solid #505345;color:#d7dacb;border-radius:50%;display:grid;place-items:center;font:12px var(--mono);width:32px;height:32px}.user small{display:block;color:#89927d;font-size:12px;margin-top:4px}.user-dot{width:5px;height:5px;background:#c4d396;border-radius:50%;margin-left:auto}.app-main{margin-left:200px}.topbar{height:69px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px}.breadcrumbs{display:flex;align-items:center;gap:13px;font-size:12px;color:#828b78}.breadcrumbs span{color:#c3c9b8}.breadcrumbs span:last-child{color:#919a84}.top-right{display:flex;align-items:center;gap:20px}.local-badge{font:12px var(--mono);letter-spacing:.08em;color:#9ba58e;display:flex;gap:5px;align-items:center}.top-avatar{width:27px;height:27px;font-size:12px}.icon-button{display:inline-flex;justify-content:center;align-items:center;width:28px;height:28px;background:transparent;color:#9ca590;border-radius:4px}.icon-button:hover{background:#353b2d;color:var(--text)}.content{max-width:1610px;margin:auto;padding:33px 30px 0}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:31px}.eyebrow{font:12px var(--mono);letter-spacing:.16em;color:#a6b294;margin-bottom:11px}.page-heading h1{font-size:30px;letter-spacing:-1.05px;font-weight:450;line-height:1.2}.page-heading p{color:#8e9981;font-size:12px;margin-top:10px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:5px;white-space:nowrap;padding:11px 15px;font-size:12px;font-weight:500}.primary{background:var(--lime);color:#27331a;border:1px solid var(--lime);box-shadow:0 1px 0 #eff7d4 inset}.primary:hover{background:#e0f4ac}.subtle{border:1px solid #353c2e;background:#24291f;color:#bec7b0;padding:8px 11px;font-size:12px}.workspace{display:grid;grid-template-columns:221px minmax(0,1fr);border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel);animation:reveal .5s ease both}.session-list{border-right:1px solid var(--line);display:flex;flex-direction:column;background:#1b1e19;min-width:0}.list-heading{padding:19px 16px 15px;display:flex;justify-content:space-between;align-items:center;color:#747e68}.list-heading h2{font-size:13px;font-weight:500;color:#d9dfcf}.list-heading h2 span{font:12px var(--mono);color:#99a589;margin-left:6px}.search-box{margin:0 13px;display:flex;align-items:center;gap:7px;padding:8px 9px;background:#161913;border:1px solid #30382a;border-radius:5px;color:#7f8b71}.search-box input{background:transparent;border:0;min-width:0;width:100%;font-size:12px;color:#dce7ce;outline:none}.search-box kbd{padding:0 3px;font-size:12px;color:#738067}.session-filters{display:flex;gap:2px;background:#151912;border:1px solid #2b3324;border-radius:5px;margin:12px 13px 7px;padding:3px}.session-filters button{flex:1;background:transparent;color:#839275;font-size:12px;padding:6px 4px;border-radius:3px}.session-filters button.selected{background:#303a27;color:#d6e3c4;box-shadow:0 1px 3px #0003}.list-group-label{display:flex;justify-content:space-between;padding:17px 16px 10px;font:12px var(--mono);letter-spacing:.1em;color:#7e8c6f}.list-group-label span{color:#a0ae90}.session-item{position:relative;text-align:left;padding:17px 16px 13px;width:100%;background:transparent;border-top:1px solid #2d3527;border-bottom:1px solid transparent}.session-item.active{background:#2a3223;border-bottom-color:#414d34}.session-item.active:before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--lime)}.session-row-top{display:flex;gap:8px;align-items:center}.session-row-top strong{font:12px var(--mono);font-weight:400;letter-spacing:.01em;color:#d9e3cc}.session-initial{width:23px;height:23px;border-radius:5px;background:#55443655;color:var(--error);display:grid;place-items:center}.session-initial.healthy{background:#8b9e4730;color:#b6cd87}.session-duration{margin-left:auto;font:12px var(--mono);color:#91a17e}.session-item-title{font-size:12px;margin:12px 0 8px;color:#cbd8ba}.session-item-bottom{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#879976}.session-status{font-size:12px;color:#b5cf88}.session-status.has-errors{color:#e6a38b}.mini-wave{height:23px;display:flex;align-items:center;gap:2px;margin-top:12px;opacity:.65}.mini-wave i{flex:1;max-width:3px;background:#687b48;border-radius:1px}.mini-wave i.red{background:#b18b69}.session-item.active .mini-wave i{background:#a3bd6a}.session-item.active .mini-wave i.red{background:#cc9172}.list-foot{margin-top:auto;display:flex;align-items:center;gap:7px;padding:20px 16px;font-size:12px;color:#859873;border-top:1px solid #2d3826}.session-detail{min-width:0;background:#1b1e19}.detail-header{display:flex;justify-content:space-between;align-items:center;padding:20px 23px 15px;gap:12px}.session-id{font:12px var(--mono);letter-spacing:.12em;color:#849177;display:flex;gap:7px;align-items:center}.session-id>span:first-child{color:#afbea0;letter-spacing:.06em}.sample-tag,.recorded-tag{font:12px var(--mono);border:1px solid #3b4730;border-radius:3px;color:#99ad83;padding:2px 4px;letter-spacing:.03em}.recorded-tag{color:var(--lime);border-color:#5f743a}.detail-header h2{font-size:18px;letter-spacing:-.3px;font-weight:500;margin-top:9px}.detail-actions{display:flex;gap:7px}.session-meta{display:flex;align-items:center;gap:18px;padding:0 23px 17px;font-size:12px;color:#94a382;border-bottom:1px solid var(--line)}.session-meta>span{display:flex;align-items:center;gap:5px}.meta-date{margin-left:auto;color:#738364}.error-text{color:var(--error)!important}.success-text{color:#b6cf89!important}.replay-stage{position:relative;padding:37px 34px 30px;background:#10140e;background-image:radial-gradient(#5e6c4838 .7px,transparent .7px);background-size:12px 12px;min-height:230px;display:flex;flex-direction:column;align-items:center}.stage-top,.stage-bottom{position:absolute;left:20px;right:20px;display:flex;justify-content:space-between;font:12px var(--mono);color:#697c59;align-items:center}.stage-top{top:14px}.stage-top>span,.stage-bottom>span{display:flex;gap:5px;align-items:center}.replay-label{letter-spacing:.12em;color:#9dac89}.replay-label i{width:4px;height:4px;background:#bddb7c;border-radius:50%;margin-right:2px}.stage-bottom{bottom:10px}.stage-x{font-size:14px;line-height:0;margin-left:12px}.frame-shell{width:92%;max-width:980px;border:1px solid #59604b;border-radius:6px;overflow:hidden;box-shadow:0 18px 35px #0006;background:#eff0e8}.browser-chrome{height:27px;background:#ecede5;display:flex;align-items:center;justify-content:space-between;padding:0 10px;color:#878d7d}.traffic{display:flex;gap:4px}.traffic i{width:5px;height:5px;border-radius:50%;background:#c4c7ba}.traffic i:first-child{background:#d6b1a4}.traffic i:nth-child(2){background:#d5c7a0}.traffic i:nth-child(3){background:#b5c5a3}.browser-chrome>div{display:flex;align-items:center;justify-content:center;gap:5px;background:#e1e4d8;padding:3px 35px;border-radius:3px;font-size:12px;color:#8a9380}.frame-viewport{position:relative;aspect-ratio:1000/710;overflow:hidden;width:100%}.frame-viewport iframe{border:0;transform-origin:top left;display:block;pointer-events:none}.replay-cursor{position:absolute;color:#2d4115;pointer-events:none;transition:left .18s linear,top .18s linear;filter:drop-shadow(0 1px 1px #fff);z-index:2}.replay-cursor svg{fill:#d7f19b;stroke:#4f6928;stroke-width:1.6}.replay-cursor span{display:block;color:#324615;background:#d1e7a6;font:12px var(--mono);padding:3px 5px;border-radius:2px;margin:0 0 0 17px;filter:none}.transport{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 19px;border-top:1px solid #303b26;border-bottom:1px solid #303b26;background:#1b2116}.transport-left,.transport-right{display:flex;align-items:center;gap:10px}.play-button{width:30px;height:30px;display:grid;place-items:center;border-radius:5px;background:var(--lime);color:#293b17}.transport-time{font:12px var(--mono);margin-left:5px;display:flex;gap:8px}.transport-time strong{color:#d9eac4;font-weight:400}.transport-time span{color:#748568}.speed-button{font:12px var(--mono);border:1px solid #35432a;background:#252e1e;border-radius:4px;padding:5px 8px;color:#b8caa6}.jump-error{display:flex;align-items:center;gap:6px;color:#d1a48c;font-size:12px;background:transparent;padding:6px 0}.timeline{padding:13px 23px 12px;background:#1a2015}.time-ruler{display:flex;justify-content:space-between;font:12px var(--mono);color:#798c67}.timeline-tracks{position:relative;height:49px;margin-top:6px;cursor:ew-resize;background:repeating-linear-gradient(90deg,#3d4d2d40 0,#3d4d2d40 1px,transparent 1px,transparent 12.5%)}.activity-track{display:flex;align-items:center;gap:3px;height:29px;padding-top:2px}.activity-track i{flex:1;background:#8aa64f;border-radius:1px;opacity:.65;min-width:1px}.activity-track i.after-error{background:#938c59}.event-markers{height:13px;border-top:1px solid #32412766;position:relative;margin-top:3px;z-index:3;pointer-events:none}.timeline-marker{position:absolute;top:3px;width:5px;height:8px;border-radius:1px;padding:0;transform:translateX(-50%);pointer-events:auto}.click-marker{background:#9babb7}.error-marker{background:#e49a7d}.playhead{position:absolute;top:0;bottom:0;width:1px;background:#ddf4a9;z-index:3;pointer-events:none;box-shadow:0 0 5px #d8f58a22}.playhead:before{content:'';position:absolute;top:-3px;left:-3px;width:7px;height:7px;background:var(--lime);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}#scrubber{position:absolute;inset:0;width:100%;height:31px;opacity:0;cursor:ew-resize;margin:0;z-index:4}#scrubber:focus-visible{opacity:.3}.timeline-legend{display:flex;gap:15px;font-size:12px;color:#82996c;margin-top:8px}.timeline-legend>span{display:flex;align-items:center;gap:4px}.timeline-legend i{width:4px;height:4px;border-radius:1px}.legend-lime{background:#a4bd72}.legend-blue{background:#9babb7}.legend-error{background:#e49a7d}.timeline-legend .timeline-hint{margin-left:auto;color:#637b4e}.diagnostics{border-top:1px solid var(--line)}.diagnostics-tabs{display:flex;align-items:center;gap:19px;padding:0 20px;border-bottom:1px solid #303a27;height:44px}.diagnostics-tabs button{display:flex;align-items:center;gap:7px;background:transparent;padding:14px 0 12px;font-size:12px;color:#869a72;border-bottom:2px solid transparent}.diagnostics-tabs button.active{border-color:var(--lime);color:#dfebce}.diagnostics-tabs button>span{font:12px var(--mono);background:#303c25;color:#a9bf92;padding:2px 4px;border-radius:3px}.diagnostic-caption{margin-left:auto;font:12px var(--mono);letter-spacing:.08em;color:#627a4c}#diagnostic-content{display:grid;grid-template-columns:minmax(0,1fr) 235px}.event-table{min-width:0}.event-table-head{padding:11px 16px;display:grid;grid-template-columns:57px 1fr 50px;gap:5px;font:12px var(--mono);letter-spacing:.1em;color:#70875c;border-bottom:1px solid #2e3c23}.event-table-head>span:last-child{text-align:right}.event-scroll{height:189px;overflow:auto;scrollbar-width:thin;scrollbar-color:#3b4b2d transparent}.event-row{width:100%;display:grid;grid-template-columns:57px minmax(0,1fr) 50px;gap:5px;align-items:center;text-align:left;padding:10px 16px;border-bottom:1px solid #2c382340;background:transparent;color:#c1d1ae;font-size:12px}.event-row.inspected{background:#303225}.event-row.at-playhead{box-shadow:2px 0 0 var(--lime) inset}.event-row:hover{background:#303b25}.event-time{font:12px var(--mono);color:#718960}.event-message{display:flex;gap:7px;align-items:center;min-width:0}.event-message>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-message svg{color:#8da676}.event-kind{text-align:right;font:12px var(--mono);color:#759160}.event-error .event-message,.event-error .event-message svg,.event-error .event-kind{color:#daa081}.event-inspector{padding:15px;border-left:1px solid #34432a;background:#20251a}.inspector-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#91a67c;gap:5px}.inspector-title>span:first-child{display:flex;gap:5px;align-items:center}.inspector-title>span:last-child{font:12px var(--mono);color:#71895c}.inspector-message{font:12px/1.6 var(--mono);display:block;font-weight:400;margin:13px 0 11px;overflow-wrap:anywhere;color:#cfdfbb}dl{margin:0;font-size:12px}dl>div{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px}dt{color:#7d9567}dd{margin:0;font:12px var(--mono);color:#b6cba2}.cause-note{border-top:1px solid #39482d;padding-top:10px;margin-top:11px;font-size:12px;line-height:1.6;color:#a0b28d}.cause-note>span{display:block;font:12px var(--mono);color:#d1a684;letter-spacing:.08em;margin-bottom:5px}.text-button{display:inline-flex;align-items:center;gap:7px;background:transparent;padding:0;font-size:12px;color:#c1d896;margin-top:12px}.app-footer{display:flex;justify-content:space-between;gap:15px;padding:20px 0 22px;font-size:12px;color:#6e815d}.app-footer>span:first-child{display:flex;align-items:center;gap:5px}.app-footer i{width:4px;height:4px;background:#a2b76d;border-radius:50%;margin-right:3px}.footer-separator{margin:0 5px;color:#40522e}.app-footer>span:last-child{font:12px var(--mono);letter-spacing:.09em}.version{margin-left:12px;color:#9cb381}.empty-state{display:flex;align-items:center;flex-direction:column;padding:35px 20px;gap:12px;text-align:center;color:#82996b;font-size:12px}.empty-state strong{color:#c7dab6}.empty-state p{font-size:12px;line-height:1.7}.small-empty{padding:35px 20px;text-align:center;color:#93a47e;font-size:12px}.recording-limit{padding:14px;color:var(--error);font-size:12px;border-top:1px solid var(--line)}
/* Dialogs and recording lab */
dialog{color:var(--text);background:#1c2118;border:1px solid #4c5a3d;border-radius:12px;width:min(650px,calc(100% - 36px));padding:30px;box-shadow:0 25px 100px #0009;max-height:90dvh;overflow:auto}dialog::backdrop{background:#0b100be6;backdrop-filter:blur(7px)}dialog[open]{animation:reveal .22s ease}.modal-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:21px}.modal-heading h2{font-size:26px;letter-spacing:-.7px;font-weight:450}.modal-intro{font-size:14px;line-height:1.8;color:#a5b398;margin-bottom:24px}.modal-intro.small{font-size:12px;margin:20px 0 0}.modal-intro a{text-decoration:underline;color:var(--lime)}.build-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}.build-options>button{display:flex;flex-direction:column;align-items:flex-start;background:#262e1e;border:1px solid #465239;border-radius:8px;padding:23px;text-align:left}.build-options>button:hover{border-color:#bdd98a;background:#2d3823}.build-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:9px;margin-bottom:23px}.build-icon.broken{color:var(--error);background:#65483444}.build-icon.fixed{color:var(--lime);background:#a5c66522}.build-options strong{font-size:16px;font-weight:500}.build-options p{font-size:12px;color:#9eaf8e;line-height:1.7;margin-top:9px}.build-options .text-button{font-size:12px;margin-top:22px}.modal-foot{display:flex;align-items:center;justify-content:center;gap:6px;color:#8f9f7f;font-size:12px;margin-top:25px}.record-modal{width:min(1130px,calc(100% - 35px));padding:0;overflow:hidden;max-height:96dvh}.record-header{padding:17px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px}.record-header>div{display:flex;align-items:center;gap:12px}.record-header strong{font-size:13px;font-weight:500}.recording-dot{width:6px;height:6px;background:#ed917e;border-radius:50%;box-shadow:0 0 0 4px #ed917e19;animation:pulse 1.5s ease-in-out infinite}.record-build{font:12px var(--mono);color:#9dac8a;border:1px solid #445634;padding:4px 6px;border-radius:3px}.mono{font:12px var(--mono);color:#b9cda3}.record-instructions{padding:12px 20px;background:#2a3322;border-top:1px solid #394c2a;border-bottom:1px solid #394c2a;display:flex;align-items:center;gap:7px;font-size:12px;color:#c4d6ae}.record-instructions>span{color:#859b71;margin-left:auto;font-size:12px}.record-modal iframe{display:block;width:100%;height:min(710px,calc(96dvh - 157px));border:0;background:#f8f7f2}.record-footer{display:flex;justify-content:space-between;padding:13px 20px;font-size:12px;color:#8fa577}.record-footer>span:first-child{display:flex;gap:5px;align-items:center}.guide-steps{display:flex;flex-direction:column;gap:25px;margin:30px 0}.guide-steps>div{display:flex;gap:18px}.guide-steps>div>span{font:12px var(--mono);color:var(--lime);padding-top:2px}.guide-steps h3,.privacy-list h3{font-size:15px;font-weight:500;margin-bottom:8px}.guide-steps p,.privacy-list p{font-size:13px;line-height:1.8;color:#9dab90}.keyboard-guide{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;border-top:1px solid #3b4a30;padding-top:24px;font-size:12px;color:#a6b798}.keyboard-guide>span{display:flex;gap:5px;align-items:center}kbd{background:#2d3824;border:1px solid #475839;border-radius:3px;padding:3px 5px;font:12px var(--mono);color:#c2d3b0}.sdk-code{background:#11170d;border:1px solid #344928;padding:22px;border-radius:7px;color:#c5dda7;font:12px/1.9 var(--mono);overflow:auto}.sdk-details{display:flex;justify-content:space-between;color:#b4c995;font-size:12px;margin-top:17px}.privacy-list{display:flex;flex-direction:column;gap:25px}.privacy-list>section{display:flex;gap:16px}.privacy-list>section>svg{color:#b7ce91;margin-top:3px}#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,15px);opacity:0;pointer-events:none;z-index:10;background:#d4ed8a;color:#273a16;border:1px solid #e6f6bb;padding:13px 22px;border-radius:7px;box-shadow:0 8px 30px #0006;max-width:calc(100% - 30px);font-size:12px;transition:.2s}#toast.visible{opacity:1;transform:translate(-50%,0)}
/* Comparison */
.comparison{border:1px solid #36452b;border-radius:9px;overflow:hidden;background:#1d2418;animation:reveal .4s ease}.compare-banner{display:flex;align-items:center;gap:15px;padding:23px 26px;background:#2b3523;border-bottom:1px solid #415733}.compare-banner>span:first-child{color:var(--lime);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#bacf7922}.compare-banner strong{font-size:16px;font-weight:500}.compare-banner p{font-size:12px;color:#9fb18c;margin-top:6px}.verification-tag{font:12px var(--mono);color:#b7ce96;letter-spacing:.08em;margin-left:auto;white-space:nowrap}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#425331}.compare-pane{min-width:0;background:#151c11}.compare-pane>header{padding:17px 20px;display:flex;flex-direction:column;gap:10px;font-size:12px}.compare-pane select{background:#242e1d;color:#c3d7ad;border:1px solid #425534;border-radius:5px;padding:9px;font-size:12px;width:100%}.compare-browser{position:relative;overflow:hidden;width:100%;background:#f8f7f2}.compare-browser iframe{border:0;display:block;transform-origin:top left;pointer-events:none}.compare-result{display:flex;justify-content:space-between;gap:15px;padding:17px 20px;font-size:12px;color:#8ca375}.compare-result>span:first-child{display:flex;gap:6px;align-items:center}.change-explanation{padding:35px 30px 32px}.change-explanation h2{font-size:24px;font-weight:450;letter-spacing:-.5px}.code-diff{display:grid;grid-template-columns:1fr 1fr;margin-top:25px;border:1px solid #3c502e;border-radius:5px;overflow:hidden}.code-diff>div{padding:19px 20px;display:flex;flex-direction:column;gap:12px;background:#392d2044}.code-diff>div+div{background:#384f2044;border-left:1px solid #435c32}.code-diff span{font-size:12px;color:#be9f83}.code-diff>div+div span{color:#bad58e}.code-diff code{font:12px var(--mono);color:#afc098;white-space:pre-wrap;line-height:1.8}.code-diff b{font-weight:400;color:#d1e8a8}.change-explanation>p{font-size:12px;color:#8fa67b;line-height:1.8;margin-top:18px}.compare-actions{display:flex;gap:10px;margin-top:22px}
@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{50%{box-shadow:0 0 0 6px #ed917e08}}
@media(min-width:1600px){.sidebar{width:220px;padding-left:20px;padding-right:20px}.app-main{margin-left:220px}.content{padding:40px 42px 0}.workspace{grid-template-columns:250px 1fr}.frame-shell{width:85%}.replay-stage{padding:45px 45px 35px}.session-item{padding:20px}.session-item-title{font-size:12px}.detail-header{padding-top:24px;padding-bottom:20px}.detail-header h2{font-size:21px}.session-meta{font-size:12px}.session-id{font-size:12px}.page-heading h1{font-size:34px}.page-heading p{font-size:14px}.main-nav button{font-size:13px}.eyebrow{font-size:12px}.event-row{font-size:12px}.event-time{font-size:12px}.event-kind{font-size:12px}.event-table-head{font-size:12px}.event-inspector{font-size:12px}#diagnostic-content{grid-template-columns:minmax(0,1fr) 280px}.inspector-message{font-size:12px}.inspector-title,dl{font-size:12px}dd{font-size:12px}.cause-note{font-size:12px}}
@media(max-width:1200px){.sidebar{width:176px;padding:25px 10px 0}.app-main{margin-left:176px}.brand{font-size:27px}.main-nav button{font-size:12px;gap:8px}.project-switch{padding:10px 7px;gap:7px;font-size:12px}.project-switch small{font-size:12px}.content{padding:26px 20px 0}.topbar{padding:0 20px}.workspace{grid-template-columns:190px minmax(0,1fr)}.page-heading h1{font-size:26px}.page-heading .button{font-size:12px;padding:10px 12px}.session-item{padding:15px 13px}.detail-header{padding:17px 17px 13px}.detail-actions .subtle{padding:7px}.detail-actions .subtle>span{display:none}.session-meta{gap:12px;padding:0 17px 15px}.session-meta .meta-date{display:none}.replay-stage{padding:35px 14px 29px}.frame-shell{width:96%}.transport{padding:11px 13px}.transport-left{gap:6px}.transport-time{font-size:12px;gap:5px}.timeline{padding:12px 16px}.diagnostics-tabs{gap:15px;padding:0 15px}.diagnostic-caption{display:none}#diagnostic-content{grid-template-columns:minmax(0,1fr) 190px}.event-table-head,.event-row{grid-template-columns:48px minmax(0,1fr) 40px;padding-left:10px;padding-right:10px}.event-inspector{padding:12px}.page-heading{gap:15px}.app-footer>span:last-child{font-size:12px}.app-footer{font-size:12px}.verification-tag{display:none}.code-diff{grid-template-columns:1fr}.code-diff>div+div{border-left:0;border-top:1px solid #435c32}}
@media(max-width:960px){.sidebar{width:65px;padding:26px 10px 0;align-items:center}.brand{font-size:0;letter-spacing:0;padding:0;margin-bottom:32px}.brand-symbol{margin:0}.project-switch{padding:7px;justify-content:center}.project-switch>span:nth-child(2),.project-switch>svg,.nav-label,.main-nav button>span,.sidebar-bottom .local-note,.storage-line,.storage-meter,.help-link,.user>span:not(.avatar){display:none}.main-nav{width:100%;margin-top:25px}.main-nav button{padding:12px;justify-content:center}.sidebar-bottom{width:100%}.user{justify-content:center;padding:18px 0}.app-main{margin-left:65px}.content{padding:26px 20px 0}.top-right{gap:12px}.breadcrumbs{font-size:12px}.workspace{grid-template-columns:180px minmax(0,1fr)}.session-item-title{font-size:12px}.session-item-bottom{font-size:12px}.list-heading{padding-left:13px;padding-right:13px}.search-box,.session-filters{margin-left:10px;margin-right:10px}.list-foot{font-size:12px;padding-left:12px}.page-heading h1{font-size:25px}.app-footer>span:last-child{display:none}.event-inspector{display:none}#diagnostic-content{grid-template-columns:1fr}.session-meta{font-size:12px;gap:10px}.detail-header h2{font-size:16px}.timeline-hint{display:none!important}.transport-right{gap:7px}.jump-error{font-size:12px}.transport-left>.icon-button{width:23px}.transport-time{font-size:12px}.record-instructions>span{display:none}.compare-pane>header{padding:15px}.compare-result{flex-direction:column;gap:9px;padding:15px}.comparison .compare-banner{padding:20px}.compare-banner p{line-height:1.7}}
@media(max-width:720px){.sidebar{display:none}.app-main{margin:0}.topbar{height:56px;padding:0 17px}.breadcrumbs{font-size:12px;gap:7px}.breadcrumbs>svg:last-of-type,.breadcrumbs>span:last-child{display:none}.top-right .local-badge{font-size:12px}.top-right .icon-button{display:none}.content{padding:25px 14px 0}.page-heading{align-items:flex-start;margin-bottom:22px;gap:10px;flex-wrap:wrap}.page-heading h1{font-size:27px;letter-spacing:-1px}.page-heading p{font-size:12px;line-height:1.7}.page-heading .eyebrow{font-size:12px}.page-heading .button{margin-top:8px;font-size:12px;padding:10px 14px}.workspace{grid-template-columns:1fr}.session-list{border-right:0;border-bottom:1px solid var(--line)}.list-heading{padding:14px 16px}.list-heading h2{font-size:14px}.session-list .search-box{margin:0 15px}.search-box input{font-size:12px}.search-box{padding:10px}.session-filters{margin:11px 15px 0;width:210px}.session-filters button{font-size:12px}.list-group-label{display:none}#session-items{display:flex;overflow-x:auto;scrollbar-width:thin;padding:13px 15px;gap:8px}.session-item{min-width:195px;width:195px;border:1px solid #3d4b31;border-radius:5px;padding:12px}.session-item.active{border-color:#6a8447}.session-item.active:before{display:none}.session-row-top strong{font-size:12px}.session-item-title{font-size:12px;margin:9px 0}.session-item-bottom{font-size:12px}.session-status{font-size:12px}.mini-wave{display:none}.list-foot{display:none}.detail-header{padding:20px 16px 14px}.detail-header h2{font-size:18px}.detail-actions{gap:7px}.detail-actions .subtle{padding:9px}.session-id{font-size:12px}.sample-tag,.recorded-tag{font-size:12px}.session-meta{font-size:12px;gap:15px;padding-bottom:17px}.replay-stage{padding:33px 10px 27px}.frame-shell{width:100%}.stage-top{font-size:12px;left:12px;right:12px}.stage-top>span:last-child{font-size:12px}.browser-chrome{height:22px}.browser-chrome>div{font-size:12px;padding:3px 15px}.traffic i{width:4px;height:4px}.transport{padding:12px 10px}.transport-time{font-size:12px}.transport-right{gap:9px}.jump-error{font-size:12px}.jump-error>svg:last-child{display:none}.transport-left{gap:6px}.transport-left>.icon-button{width:23px}.speed-button{font-size:12px;padding:5px}.time-ruler{font-size:12px}.timeline-legend{font-size:12px}.timeline{padding:12px 14px}.timeline-tracks{height:51px}.diagnostics-tabs{gap:24px;padding:0 16px}.diagnostics-tabs button{font-size:12px}.diagnostics-tabs button>span{font-size:12px}.event-table-head{font-size:12px;grid-template-columns:57px minmax(0,1fr) 50px;padding:12px}.event-row{font-size:12px;grid-template-columns:57px minmax(0,1fr) 50px;padding:12px}.event-time{font-size:12px}.event-kind{font-size:12px}.event-scroll{height:226px}.app-footer{font-size:12px;line-height:1.6;padding:17px 2px}.app-footer .footer-separator{margin:0 2px}.replay-cursor span{font-size:12px}.replay-cursor svg{width:14px;height:14px}dialog{padding:24px;width:calc(100% - 24px)}.modal-heading h2{font-size:24px}.modal-intro{font-size:13px}.build-options{grid-template-columns:1fr}.build-options>button{padding:19px}.build-icon{width:35px;height:35px;margin-bottom:15px}.build-options p{font-size:13px}.build-options .text-button{margin-top:15px}.modal-foot{font-size:12px;line-height:1.6;text-align:center}.record-modal{width:calc(100% - 14px);padding:0}.record-header{padding:13px 12px}.record-header>div{gap:7px}.record-header strong{font-size:12px}.record-build{display:none}.record-header .button{font-size:12px;padding:9px}.record-header .mono{font-size:12px}.record-instructions{font-size:12px;padding:10px 12px;line-height:1.5}.record-modal iframe{height:calc(94dvh - 151px)}.record-footer{padding:12px;font-size:12px}.sdk-code{font-size:12px;padding:15px}.sdk-details{font-size:12px;gap:8px;flex-wrap:wrap}.keyboard-guide{gap:12px;font-size:12px}.compare-grid{grid-template-columns:1fr}.compare-banner{align-items:flex-start}.compare-banner strong{font-size:15px}.compare-banner p{font-size:12px}.compare-result{flex-direction:row}.change-explanation{padding:26px 20px}.change-explanation h2{font-size:24px}.compare-actions{flex-wrap:wrap}.compare-actions .button{font-size:12px}.comparison select{font-size:13px}.session-list .empty-state{padding:15px;align-items:flex-start;text-align:left}.session-list .empty-state svg{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* The workspace stays neutral; lime belongs to the recording controls. */
.sidebar{background:#1b1d1a}.project-switch{background:#252821;border-color:#3b4035}.project-switch small{color:#959c8b}.main-nav button{color:#a1a899}.main-nav button.active{background:#32392a}.session-list,.session-detail{background:#1d201b}.session-item.active{background:#2c3326}.session-item{border-top-color:#343a2e}.search-box{background:#181c15}.session-filters{background:#191d16}.session-filters button.selected{background:#333d2a}.session-row-top strong,.session-item-title{color:#d2dbc7}.session-item-bottom,.session-duration,.list-group-label,.session-meta{color:#a0ab93}.replay-stage{background-color:#141811;background-image:radial-gradient(#69735c33 .7px,transparent .7px)}.transport,.timeline{background:#20261b}.time-ruler,.timeline-legend,.event-time,.event-kind,.event-table-head{color:#96a487}.diagnostics-tabs button{color:#a0ad92}.event-row{color:#c3ceba}.event-row.inspected{background:#353329}.event-inspector{background:#262b20}.inspector-title,dt,.cause-note{color:#a5b394}dd{color:#c2cfb4}.app-footer{color:#94a286}.page-heading p{color:#a0aa95}.eyebrow{color:#aebb9e}.stage-top,.stage-bottom{color:#9ba88e}.replay-label{color:#aab89b}.stage-top{font-size:10px}.stage-top>span:last-child{font-size:10px}.stage-bottom{font-size:10px}.session-list .session-id{font-size:12px}.session-id{flex-wrap:wrap;row-gap:5px}.session-item-bottom{gap:8px;flex-wrap:wrap}.session-row-top{gap:6px}.mini-wave{opacity:.6}.session-status{white-space:nowrap}.nav-count{font-size:10px}.project-switch small,.user small,.storage-line,.local-note,.help-link{font-size:11px}.main-nav button{font-size:12px}.user{font-size:12px}.sidebar .nav-label{font-size:10px}.eyebrow{font-size:10px}.session-id,.sample-tag,.recorded-tag{font-size:10px}.session-meta{gap:14px;flex-wrap:wrap;font-size:11px}.session-meta>span{gap:4px}.session-meta .meta-date{font-size:10px}.session-item-title{font-size:13px;line-height:1.6}.session-item-bottom,.session-duration,.session-status{font-size:10px}.session-row-top strong{font-size:11px}.list-group-label{font-size:9px}.search-box input{font-size:12px}.session-filters button{font-size:11px}.list-foot{font-size:10px}.time-ruler{font-size:9px}.timeline-legend{font-size:10px}.timeline-hint{font-size:10px}.diagnostics-tabs button{font-size:12px}.diagnostic-caption{font-size:8px}.event-table-head{font-size:9px;grid-template-columns:65px minmax(0,1fr) 55px}.event-row{font-size:11px;grid-template-columns:65px minmax(0,1fr) 55px;padding-top:12px;padding-bottom:12px}.event-time{font-size:10px}.event-kind{font-size:9px}.event-inspector{padding:16px}.inspector-title{font-size:11px}.inspector-title>span:last-child{font-size:9px}.inspector-message{font-size:11px;line-height:1.7}.cause-note{font-size:11px}.cause-note>span{font-size:9px}dl{font-size:11px}dd{font-size:10px}.text-button{font-size:11px}.transport-time{font-size:11px}.jump-error{font-size:11px}.speed-button{font-size:11px}.app-footer{font-size:10px}.app-footer>span:last-child{font-size:8px}.browser-chrome>div{font-size:8px}.traffic i{width:5px;height:5px}.replay-cursor span{font-size:8px}.local-badge{font-size:9px}.breadcrumbs{font-size:12px}.button{font-size:13px}.subtle{font-size:12px}.detail-header h2{font-size:20px}.detail-header{gap:12px}.detail-actions{flex-shrink:0}.page-heading p{font-size:14px}.list-heading h2{font-size:14px}.compare-result{font-size:13px}.compare-pane>header{font-size:14px}.compare-pane select{font-size:13px}.record-instructions{font-size:13px}.record-footer{font-size:12px}.record-build{font-size:10px}.record-instructions>span{font-size:12px}.record-header strong{font-size:14px}.record-header .button{font-size:13px}.record-modal iframe{height:min(710px,calc(96dvh - 164px))}.code-diff code{font-size:12px}.code-diff span{font-size:12px}.change-explanation>p{font-size:14px}.verification-tag{font-size:10px}
@media(max-width:1200px){.workspace{grid-template-columns:200px minmax(0,1fr)}.session-meta{gap:10px;font-size:10px}.detail-header h2{font-size:18px}.transport-time{font-size:10px}.jump-error{font-size:10px}.inspector-title{font-size:10px}.inspector-title>span:last-child{display:none}.breadcrumbs{font-size:11px}.diagnostics-tabs{gap:16px}.session-row-top strong{font-size:10px}.app-footer{font-size:9px}.sidebar .project-switch{font-size:12px}.sidebar .main-nav button{font-size:11px}.timeline-hint{display:none!important}}
@media(max-width:960px){.workspace{grid-template-columns:195px minmax(0,1fr)}.topbar{padding:0 18px}.detail-header h2{font-size:17px}.transport-time{font-size:9px}.jump-error{font-size:9px}.session-meta>span{font-size:10px}.page-heading p{font-size:13px}.stage-top>span:last-child{display:none}.content{padding-left:16px;padding-right:16px}.page-heading{flex-wrap:wrap}.page-heading .button{font-size:12px}.diagnostics-tabs button{font-size:11px}.event-table-head,.event-row{grid-template-columns:61px minmax(0,1fr) 45px}.comparison .compare-pane>header{font-size:13px}.code-diff code{font-size:11px}}
@media(max-width:720px){.workspace{grid-template-columns:1fr}.page-heading h1{font-size:28px}.page-heading p{font-size:13px}.page-heading .eyebrow{font-size:9px}.session-item{min-width:220px;width:220px}.session-item-title{font-size:13px}.session-item-bottom{font-size:11px}.session-duration,.session-status{font-size:10px}.session-meta{gap:12px}.session-meta>span{font-size:11px}.detail-header h2{font-size:20px}.session-id{font-size:10px}.transport-time{font-size:10px}.jump-error{font-size:10px}.speed-button{font-size:10px}.timeline-legend{font-size:10px}.time-ruler{font-size:8px}.diagnostics-tabs button{font-size:13px}.event-row{font-size:12px}.event-time{font-size:10px}.event-kind{font-size:10px}.event-table-head,.event-row{grid-template-columns:62px minmax(0,1fr) 49px}.app-footer{font-size:9px}.breadcrumbs{font-size:11px}.record-header strong{font-size:12px}.record-header .button{font-size:11px}.record-instructions{font-size:11px}.record-footer{font-size:10px}.record-modal iframe{height:calc(94dvh - 154px)}.frame-shell .browser-chrome>div{font-size:7px}.stage-bottom{font-size:9px}.compare-result{font-size:12px}}

.mobile-nav{display:none}@media(max-width:720px){.mobile-nav{display:flex;gap:7px;padding:10px 14px 0}.mobile-nav button{display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid #3e4932;border-radius:5px;color:#bbc9ab;background:#262e20;font-size:12px}.mobile-nav button:last-child{margin-left:auto}}
@media(min-width:721px){.replay-stage{padding:36px 24px 26px}.frame-shell{width:min(96%,calc((clamp(320px,44vh,520px) - 89px)*1.40845));max-width:980px}.stage-top{top:13px}.page-heading{margin-bottom:26px}.content{padding-top:28px}.detail-header{padding-top:18px;padding-bottom:14px}}