:root{color-scheme:dark;--bg:#090909;--surface:#111;--surface-2:#181818;--border:#303030;--text:#eae7e2;--muted:#a0a09e;--accent:#ff641a;--accent-soft:#26180f;--red:#ff8a79;--amber:#ffb66d;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--sans:Inter,"Segoe UI",Arial,sans-serif}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 var(--sans)}
[hidden]{display:none!important}
button,input,textarea,select{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
button{color:inherit}
a{color:inherit;text-decoration:none}
button,textarea,input,select{border-radius:2px}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
input,textarea,select{color:var(--text);background:#101010;border:1px solid var(--border)}
input:focus,textarea:focus,select:focus{outline:1px solid var(--accent);outline-offset:-1px}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:#7d7d7b}
svg{display:block}
button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
::selection{background:#793614;color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:20px;z-index:20;background:var(--accent);color:#090909;padding:12px}
.skip-link:focus{top:10px}
.accent{color:var(--accent)}
.eyebrow,.technical-label{font:11px/1.5 var(--mono);letter-spacing:1.4px;color:var(--muted)}
.eyebrow{color:#b7b6b2}
.crosshair{color:var(--accent);font-size:19px;vertical-align:-1px;margin-right:7px}
.brand{display:flex;align-items:center;gap:0;font-size:27px;font-weight:650;letter-spacing:-1.5px;line-height:1}
.brand>span:not(.brand-symbol){font-weight:350}
.brand-symbol{font:24px var(--mono);color:var(--accent);margin-right:11px;letter-spacing:-4px;padding-right:4px}
.brand i{width:5px;height:5px;background:var(--accent);align-self:flex-end;margin:0 0 3px 4px}
.brand-mark{font-family:var(--mono);color:var(--accent);font-size:16px;letter-spacing:-1px;margin-right:9px}
.brand-dot{color:var(--accent)}

.app{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:31px 19px 0;background:#101010;border-right:1px solid var(--border);min-width:0;z-index:5}
.sidebar-brand{padding:0 10px}
.company-context{display:flex;flex-direction:column;gap:5px;margin:30px 10px 23px;min-width:0}
.company-context strong{font-size:13px;font-weight:450;overflow-wrap:anywhere}
.company-context select{max-width:100%;padding:6px;font-size:13px}
.company-context .technical-label{font-size:10px;color:#777}
.new-loop{display:flex;align-items:center;gap:8px;background:var(--accent);border:1px solid var(--accent);color:#0b0b0b;padding:10px 12px;font-size:13px;font-weight:650;min-height:41px;margin-bottom:16px}
.new-loop:hover,.button.primary:hover{background:#ff7b38;border-color:#ff7b38}
.new-loop>span{font-size:20px;font-weight:400}
.new-loop kbd{font:11px var(--mono);border:1px solid #bb4310;padding:0 5px;margin-left:auto}
.nav-item{border:1px solid transparent;background:none;display:flex;align-items:center;gap:11px;padding:10px 12px;text-align:left;color:var(--muted);width:100%;font-size:13px;min-height:40px}
.nav-item:hover{background:#191919;color:var(--text)}
.nav-item.selected{background:#1c1c1c;border-color:#2b2b2b;color:#f3f0ea}
.nav-arrow{margin-left:auto;color:#92928f}
.sidebar-section-label{display:flex;justify-content:space-between;align-items:center;margin:30px 10px 11px;color:#82827f;font:11px var(--mono);letter-spacing:1px}
.sidebar-section-label h2{font:inherit;margin:0}
.sidebar-section-label>span{letter-spacing:0}
.loop-list{display:flex;flex-direction:column;gap:5px;overflow:auto;min-height:80px;flex:1;padding:0 0 14px;scrollbar-width:thin;scrollbar-color:#3d3d3d transparent}
.loop-list-item{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:10px;align-items:start;text-align:left;background:none;border:1px solid transparent;border-left:2px solid transparent;padding:12px 10px;color:#a5a5a1;flex-shrink:0}
.loop-list-item:hover{background:#181818;color:var(--text)}
.loop-list-item.selected{background:#22160f;border-color:#35241a;border-left-color:var(--accent);color:var(--text)}
.loop-list-item .loop-icon{font:17px var(--mono);color:#858581;line-height:20px}
.loop-list-item.selected .loop-icon{color:var(--accent)}
.list-title{font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.list-item-meta{display:flex;align-items:center;gap:6px;font:10px var(--mono);margin-top:8px;color:#858582;grid-column:2}
.list-item-meta time{margin-left:auto;font-size:10px;white-space:nowrap}
.list-item-meta .status-dot{width:4px;height:4px}
.list-author{display:none}
.list-empty{color:var(--muted);font-size:13px;line-height:1.8;padding:8px 10px;margin:0}
.sidebar-bottom{border-top:1px solid #292929;padding:13px 0 0;margin-top:auto}
.sidebar-bottom .nav-item{font-size:12px}
.profile{display:flex;align-items:center;gap:10px;padding:19px 5px 23px}
.avatar{height:31px;width:31px;display:grid;place-items:center;background:#24211e;border:1px solid #494039;font:12px var(--mono);color:#ddd0c3;flex-shrink:0}
.signed-in-person{min-width:0;flex:1}
.signed-in-person strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:500}
.signed-in-person>span{font-size:10px;color:#92918d}
.profile .icon-button{border:0;background:none;color:#888;min-width:28px;padding:4px}
.main-shell{min-width:0}
.app-header{min-height:69px;border-bottom:1px solid #2b2b2b;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 28px;background:#0c0c0c}
.breadcrumb{display:flex;align-items:center;gap:14px;font-size:12px;color:#858582;min-width:0}
.breadcrumb>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.breadcrumb strong{font-weight:450;color:#d9d7d2;white-space:nowrap}
.header-end{display:flex;align-items:center;gap:23px}
.connection-state{display:flex;align-items:center;gap:7px;font:10px var(--mono);color:#9a9a96;white-space:nowrap}
.system-clock{color:#757572;font:11px var(--mono);white-space:nowrap}
.status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#777;flex-shrink:0}
.status-dot.live{background:var(--accent);box-shadow:0 0 7px #ff641a55}
.status-dot.warn{background:var(--amber)}
.status-dot.error{background:var(--red)}
.mobile-menu{display:none!important}

.main-content{position:relative;min-height:calc(100vh - 69px);padding:38px 44px 26px;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:48px 48px;outline:0}
.home-view{max-width:1080px;margin:0 auto}
.home-hero{display:flex;justify-content:space-between;align-items:center;min-height:310px;padding:9px 2px 29px;gap:25px}
.hero-copy h1{font-size:clamp(48px,4.5vw,76px);font-weight:600;line-height:1.04;letter-spacing:-3px;margin:22px 0 20px}
.hero-copy h1 span{color:var(--accent)}
.hero-copy p{font-size:14px;line-height:1.75;color:#93938f;margin:0}
.loop-schematic{width:320px;flex-shrink:0;position:relative;margin:0 4px 0 20px}
.loop-schematic svg{width:100%;height:auto}
.schematic-caption{font:9px var(--mono);letter-spacing:2px;position:absolute;left:12px;bottom:11px;color:#757571}
.panel{background:#101010;border:1px solid var(--border);border-radius:2px}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:19px 23px;border-bottom:1px solid #292929}
.panel-heading h2{font-size:14px;font-weight:500;margin:0}
.compose-panel{position:relative;box-shadow:0 5px 35px #0004}
.compose-panel:before,.compose-panel:after{content:"";position:absolute;pointer-events:none;width:8px;height:8px;border-color:#96908a;border-style:solid}
.compose-panel:before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.compose-panel:after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
.compose-panel .panel-heading{border:0;padding-bottom:0}
.compose-panel .panel-heading .technical-label{color:#73736f;font-size:10px}
.compose-panel textarea{display:block;resize:vertical;min-height:90px;max-height:350px;width:calc(100% - 46px);margin:12px 23px 0;border:0;background:none;font-size:16px;line-height:1.7;padding:9px 0}
.compose-panel textarea:focus{outline:0}
.compose-panel:focus-within{border-color:#785035}
.compose-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 23px 23px}
.compose-hint{color:#85857f;font-size:12px;line-height:1.6;max-width:340px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:11px 18px;min-height:41px;border:1px solid var(--border);border-radius:2px;background:#171717;color:var(--text);font-size:13px;font-weight:500;white-space:nowrap}
.button.primary{background:var(--accent);border-color:var(--accent);color:#0a0a0a;font-weight:650}
.button.secondary:hover{background:#252525;border-color:#59534d}
.button.quiet{background:transparent;border-color:transparent;color:#b3b2ac}
.button.quiet:hover{color:var(--accent);background:#1c1611}
.button.small{font-size:12px;padding:8px 11px;min-height:34px}
.compose-foot{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 23px;border-top:1px solid #292929;background:#0c0c0c;font:10px var(--mono);color:#94928c}
.compose-foot>span:first-child{display:flex;align-items:center;gap:8px}
.compose-foot .technical-label{font-size:9px;letter-spacing:.6px;color:#8e8b86}
.compose-foot b{margin:0 8px;color:#a24b22;font-weight:400}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:29px 0 15px}
.section-heading h2{font-size:14px;font-weight:450;margin:0}
.section-heading .technical-label{font-size:10px;color:#757571}
.recent-loops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.recent-loop{position:relative;border:1px solid #2b2b2b;background:#0e0e0e;padding:18px;min-height:134px;text-align:left;display:flex;flex-direction:column;align-items:start}
.recent-loop:hover{border-color:#815236;background:#15100d}
.recent-loop-index{color:#7f7d77;font:10px var(--mono);letter-spacing:1px}
.recent-loop-title{font-size:13px;color:#d4d1ca;line-height:1.65;margin:11px 0 18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.recent-loop-meta{color:#83817a;font:10px var(--mono);margin-top:auto;display:flex;align-items:center;gap:8px}
.recent-loop-arrow{position:absolute;top:14px;right:16px;color:#878079;font-size:17px}
.recent-empty{grid-column:1/-1;display:flex;gap:19px;align-items:center;padding:23px 0;border-top:1px dashed #303030;color:#a09d96}
.recent-empty>span{font:24px var(--mono);color:#5b5650}
.recent-empty p{font-size:13px;margin:0}
.recent-empty small{display:block;color:#72716c;font-size:12px;margin-top:3px}
.page-footer{display:flex;justify-content:space-between;gap:18px;margin-top:32px;padding-top:15px;border-top:1px solid #262626;color:#686863;font:9px var(--mono);letter-spacing:.5px}

.loop-view{max-width:1600px;margin:0 auto}
.loop-page-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:7px 0 29px}
.loop-page-heading .eyebrow{font-size:10px;color:#92908b}
.loop-page-heading h1{font-size:clamp(24px,2.3vw,36px);line-height:1.25;letter-spacing:-.8px;font-weight:500;margin:15px 0 0;max-width:780px;overflow-wrap:anywhere}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid #46433e;color:#d2cbc2;background:#1a1917;padding:5px 9px;font:10px var(--mono);text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}
.badge:before{content:"";width:4px;height:4px;background:currentColor}
.badge.active{background:#28180f;color:#ff934e;border-color:#68361d}
.badge.error{color:var(--red);background:#291918;border-color:#673931}
.badge.neutral{color:#989590;background:#181818;border-color:#333}
.loop-workspace{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.6fr);gap:25px;align-items:start}
.loop-workspace.desktop-only{grid-template-columns:minmax(0,1fr)}
#activity-view,#desktop-view{min-width:0}
#desktop-view{position:sticky;top:24px}
.detail-panel{display:flex;flex-direction:column;gap:28px}
.detail-panel{min-width:0}
.progress-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #303030;background:#0e0e0e;margin-bottom:26px}
.progress-step{padding:17px 20px;display:flex;gap:13px;align-items:center;border-right:1px solid #303030;min-width:0}
.progress-step:last-child{border-right:0}
.progress-step>span{font:12px var(--mono);width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;border:1px solid #44413c;color:#837d73;transform:rotate(45deg)}
.progress-step>span>i{transform:rotate(-45deg);font-style:normal}
.progress-step strong{font-weight:450;font-size:13px;display:block}
.progress-step small{display:block;font:10px/1.6 var(--mono);color:#84817b;margin-top:3px}
.progress-step.done>span{color:#19100a;background:#dc622a;border-color:#dc622a}
.progress-step.current>span{border-color:var(--accent);color:var(--accent);box-shadow:0 0 13px #ff641a14}
.progress-step.current{background:#17110d}
.request-summary{border:1px solid #303030;background:#101010}
.detail-heading{padding:17px 20px;border-bottom:1px solid #292929;display:flex;align-items:center;justify-content:space-between;gap:12px}
.detail-heading h2{font-size:13px;font-weight:500;margin:0}
.request-block,.instruction-block{padding:20px}
.request-block{border-bottom:1px solid #2b2b2b}
.content-label{font:10px var(--mono);letter-spacing:1px;color:#99958d;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.content-label time{letter-spacing:0;font-size:10px}
.request-text{font-size:14px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;color:#dfdbd2;margin:0}
.instruction-text{font-size:13px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;color:#b6b0a6;margin:0}
.instruction-missing{color:#8d877c;font-size:13px;line-height:1.7;margin:0}
.instruction-meta{color:#716d65;font:10px var(--mono);margin-top:13px;overflow-wrap:anywhere}
.instruction-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}
.instruction-actions .button{white-space:normal;text-align:left}
.run-hint{font-size:12px;line-height:1.7;color:#aaa297;margin:14px 0 0}
.workflow-attribution{font-size:11px;line-height:1.7;color:#858079;margin:12px 0 0;overflow-wrap:anywhere}
.activity-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:0 0 15px;border-bottom:1px solid #32302c}
.activity-header h3{font-size:14px;font-weight:450;margin:0}
.activity-header>span{font:10px var(--mono);color:#848079}
.run-group{padding:0 0 20px;margin-bottom:19px;border-bottom:1px solid #2c2a26}
.run-group:last-child{border-bottom:0}
.run-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0;font-size:12px}
.run-summary>div{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.run-summary .run-id{color:#77716a;font:10px var(--mono)}
.run-duration{color:#aca398;font:11px var(--mono);white-space:nowrap}
.run-group>.workflow-attribution{margin-top:-10px}
.run-group>.instruction-actions{margin:12px 0 23px}
.timeline{list-style:none;margin:0;padding:0 0 0 3px}
.timeline-event{position:relative;padding:0 0 23px 22px;border-left:1px solid #3b352d;margin-left:4px}
.timeline-event:last-child{border-left-color:transparent;padding-bottom:0}
.timeline-event:before{content:"";position:absolute;left:-4px;top:6px;height:7px;width:7px;border:1px solid #a79c8e;background:#0d0d0d;transform:rotate(45deg)}
.timeline-event.error:before{border-color:var(--red);background:#58291d}
.event-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.event-title{font-size:13px;font-weight:450;color:#d8d1c6}
.event-time{font:10px var(--mono);color:#999083;white-space:nowrap}
.event-message{font-size:12px;line-height:1.8;color:#9a9388;white-space:pre-wrap;overflow-wrap:anywhere;margin:7px 0 0}
.event-details{font-size:11px;color:#8b8378;margin-top:9px}
.event-details summary{cursor:pointer;color:#bba38d;font:10px var(--mono);padding:3px 0}
.event-data{font:11px/1.7 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:#bab1a3;background:#11100f;padding:13px;border:1px solid #322e29;max-height:270px;overflow:auto}
.no-events,.loading-message{font-size:13px;color:#969087;line-height:1.7;padding:18px 0}
.inline-error{font-size:12px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid #6b382b;background:#221512;color:var(--red);padding:13px 15px;margin:15px 0}
.pending-panel{padding:25px;border:1px solid #342c25;background:#15120f}
.pending-panel h2{font-size:19px;font-weight:450}
.pending-panel p{font-size:13px;color:#aaa193;line-height:1.7}
.spinner{display:inline-block;width:16px;height:16px;border:1px solid #5a4331;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
.notice{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#23190f;border:1px solid #70502a;color:#eac390;font-size:13px;line-height:1.7;padding:12px 17px;margin:0 0 24px;overflow-wrap:anywhere}
.notice.error{background:#251511;border-color:#6d3728;color:var(--red)}
.notice button{background:none;color:inherit;border:0;font-size:23px;padding:0 3px}

.desktop-heading{position:relative;min-height:61px;padding:12px 16px;gap:10px;flex-wrap:wrap}
.viewer-status{display:flex;align-items:center;gap:8px;font:11px var(--mono);color:#aaa398}
.desktop-identity{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap}
.desktop-identity>span{font-size:12px;color:#9f978b;overflow-wrap:anywhere}
.viewer-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:31px;min-height:31px;padding:5px 8px;background:#1b1815;border:1px solid #494137;font:11px var(--mono);color:#bdb09e}
.icon-button:hover,.icon-button.active{border-color:#8c5c38;color:#e9b48e;background:#251b13}
.desktop-display{aspect-ratio:16/10;max-height:calc(100dvh - 180px);min-height:240px;position:relative;background:#070707;overflow:hidden}
.desktop-canvas{position:absolute;inset:0;overflow:auto}
.desktop-canvas>div{background:#070707!important}
.desktop-takeover{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;border-radius:0;background:transparent;padding:0;cursor:pointer}
.desktop-takeover[aria-disabled=true]{cursor:default}
.desktop-takeover:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.viewer-placeholder{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;background-color:#070707;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:32px 32px}
.monitor-symbol{font:42px var(--mono);color:#78614d;margin:0 0 22px;letter-spacing:-4px}
.viewer-placeholder h3{font-size:17px;font-weight:450;margin:0 0 10px;color:#c6b9a7}
.viewer-placeholder p{font-size:13px;line-height:1.8;color:#938776;max-width:400px;margin:0}
.viewer-placeholder .button{margin-top:20px}
.control-mode.button{gap:7px;font-size:11px;padding:6px 9px;min-height:31px}
#control-mode-icon{color:var(--accent);font-size:15px;line-height:1}
.control-mode.human{border-color:#8c5c38;background:#251b13}
.system-details{color:#a79d8e;font-size:11px}
.system-details summary{cursor:pointer;white-space:nowrap;padding:7px 0}
.system-details[open] summary{color:var(--accent)}
.system-details dl{position:absolute;z-index:4;right:12px;top:calc(100% - 1px);width:min(410px,calc(100% - 24px));margin:0;padding:12px 16px;border:1px solid #494137;background:#151310;box-shadow:0 12px 28px #0008}
.system-details dl>div{display:grid;grid-template-columns:116px minmax(0,1fr);gap:14px;margin:9px 0}
.system-details dd{font:11px var(--mono);margin:0;overflow-wrap:anywhere}
.desktop-panel:fullscreen,.desktop-panel.expanded{width:100%;height:100dvh;border:0;display:flex;flex-direction:column}
.desktop-panel.expanded{position:fixed;inset:0;z-index:30}
.desktop-expanded{overflow:hidden}
.desktop-expanded #desktop-view{z-index:30}
.desktop-panel:fullscreen .desktop-display,.desktop-panel.expanded .desktop-display{height:auto;flex:1;min-height:0;max-height:none;aspect-ratio:auto}

.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:100px;padding:50px;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:60px 60px}
.login-card{width:360px;flex-shrink:0}
.login-card>.brand{margin-bottom:58px}
.login-card h1{font-size:64px;font-weight:550;letter-spacing:-2.8px;line-height:1.06;margin:19px 0}
.login-description{color:#99958d;font-size:14px;line-height:1.9;margin-bottom:30px}
.login-card label{display:block;font-size:12px;color:#bbb6ac;margin:18px 0 8px}
.login-card input{width:100%;padding:13px;font-size:14px}
.login-submit{width:100%;margin-top:23px}
.login-note{font:10px/1.8 var(--mono);color:#777167;margin-top:25px}
.login-card h2{font-size:22px;font-weight:450}
.auth-toggle{padding-left:0!important;margin-top:10px;white-space:normal!important}
.login-art{position:relative;width:400px;height:400px;display:grid;place-items:center}
.login-art>.technical-label{position:absolute;top:-40px;left:0;color:#827566;font-size:10px}
.orbit{position:absolute;border:1px solid #3a332b;border-radius:50%}
.orbit-one{inset:0;border-style:dashed}
.orbit-two{inset:50px;border-color:#634026}
.orbit-three{inset:105px}
.orbit:after{content:"";position:absolute;width:7px;height:7px;border:1px solid #9a7658;left:0;top:50%;transform:rotate(45deg);background:#090909}
.orbit-two:after{background:var(--accent);border-color:var(--accent);box-shadow:0 0 24px #ff641a66;top:25px;left:55px}
.orbit-center{font:64px var(--mono);letter-spacing:-6px;color:var(--accent)}
.orbit-label{position:absolute;bottom:-43px;font:10px var(--mono);letter-spacing:2px;color:#9b8672}
.form-error{font-size:13px;line-height:1.7;color:var(--red)}
.activation-account,.activation-receipt{border:1px solid #604328;background:#1c150e;padding:16px;margin-top:17px;font-size:13px;line-height:1.7;color:#dfc4a5}
.activation-code-row{display:flex;align-items:center;gap:10px}
.activation-code-row input{flex:1;min-width:0;padding:10px;font:12px var(--mono)}
.members-panel>summary{padding:19px 23px;cursor:pointer;font-size:14px}
.members-panel>summary>span{float:right;color:#8f8578;font:11px var(--mono)}
.members-content{padding:20px 23px;border-top:1px solid #332d24}
.members-note{font-size:13px;line-height:1.8;color:#a89d8d;margin:0 0 22px}
.member-table-wrap{overflow:auto}
.member-table{border-collapse:collapse;width:100%;font-size:12px;text-align:left}
.member-table th{font-size:11px;color:#958975;padding:12px 10px;border-bottom:1px solid #42382a;font-weight:400}
.member-table td{padding:14px 10px;border-bottom:1px solid #30291f;vertical-align:middle}
.member-table td span{display:block;font-size:11px;color:#998c76;margin-top:5px}
.member-table td strong{font-weight:450}
.member-form{display:flex;align-items:flex-end;gap:14px;margin-top:23px;flex-wrap:wrap}
.member-form>div{flex:1;min-width:150px}
.member-form label,.activation-receipt label{display:block;font-size:12px;color:#b6a48c;margin-bottom:7px}
.member-form input{width:100%;padding:11px}
.activation-receipt strong{font-weight:500}
.activation-receipt p{font-size:13px;color:#b5a388}
.busy{pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}
}

@media(min-width:1650px){.app{grid-template-columns:274px minmax(0,1fr)}
.sidebar{padding-left:24px;padding-right:24px}
.main-content{padding:42px 64px 28px}
.home-hero{min-height:350px}
.loop-schematic{width:355px}
}

@media(max-width:1150px){.app{grid-template-columns:224px minmax(0,1fr)}
.sidebar{padding-left:13px;padding-right:13px}
.main-content{padding:27px}
.app-header{padding:0 27px}
.loop-schematic{width:245px;margin:0}
.hero-copy h1{font-size:57px}
.home-hero{min-height:290px}
.compose-foot .technical-label{display:none}
.loop-workspace{grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);gap:18px}
.recent-loops{gap:8px}
.recent-loop{padding:13px}
.progress-step{padding:14px}
.header-end{gap:13px}
.system-clock{display:none}
.login-screen{gap:60px}
.login-art{width:310px;height:310px}
.orbit-three{inset:85px}
.orbit-two{inset:40px}
}

@media(max-width:1000px){.loop-workspace{grid-template-columns:minmax(0,1fr)}
#desktop-view{grid-row:1;position:static}
}

@media(max-width:800px){.app{grid-template-columns:200px minmax(0,1fr)}
.sidebar-brand{font-size:24px;padding-left:5px}
.brand-symbol{font-size:21px}
.main-content{padding:24px}
.app-header{padding:0 24px}
.loop-schematic{display:none}
.home-hero{min-height:275px}
.hero-copy h1{font-size:59px}
.compose-bottom{align-items:flex-start;flex-direction:column;gap:16px}
.compose-bottom>.button{width:100%}
.compose-hint{max-width:none}
.recent-loops{grid-template-columns:1fr}
.recent-loop{min-height:90px;padding:16px}
.recent-loop-title{margin:7px 0 10px;-webkit-line-clamp:1}
.recent-loop-meta{font-size:11px}
.recent-loop-index{font-size:10px}
.progress-step{flex-direction:column;align-items:flex-start;gap:15px;padding:17px}
.progress-step>span{margin-left:3px}
.loop-page-heading{align-items:flex-start;flex-direction:column;gap:18px}
.page-footer{flex-direction:column;gap:5px}
.login-art{display:none}
.login-screen{padding:40px 24px}
.connection-state{font-size:9px}
.breadcrumb>span:first-child{max-width:135px}
}

@media(max-width:600px){.app{display:block}
.sidebar{position:fixed;left:0;top:59px;bottom:0;width:260px;height:calc(100dvh - 59px);transform:translateX(-100%);transition:transform .16s ease;box-shadow:14px 0 40px #0008;padding-top:25px}
.app.nav-open .sidebar{transform:translateX(0)}
.mobile-menu{display:inline-flex!important;background:none;border-color:#38332e;color:#aca294}
.app-header{height:59px;padding:0 17px;gap:12px;position:sticky;top:0;z-index:6}
.breadcrumb{gap:10px;flex:1;font-size:11px}
.header-end .connection-state{font-size:0;gap:0}
.header-end .status-dot{width:6px;height:6px}
.main-content{min-height:calc(100vh - 59px);padding:23px 18px}
.home-hero{padding:7px 0 26px;min-height:263px}
.hero-copy h1{font-size:58px;margin:18px 0}
.hero-copy p{font-size:13px}
.hero-copy .eyebrow{font-size:10px}
.compose-panel .panel-heading{padding:17px 17px 0}
.compose-panel .panel-heading .technical-label{display:none}
.compose-panel textarea{width:calc(100% - 34px);margin:10px 17px 0;font-size:15px;min-height:99px}
.compose-bottom{padding:10px 17px 18px}
.compose-foot{padding:13px 17px}
.loop-page-heading{margin-top:3px;margin-bottom:20px}
.loop-page-heading h1{font-size:26px;line-height:1.4}
.progress-strip{margin-bottom:20px}
.progress-step{padding:15px 11px}
.progress-step strong{font-size:12px}
.progress-step small{font-size:9px}
.content-label time{display:none}
.activity-header>span{font-size:9px}
.event-title{font-size:12px}
.event-time{font-size:9px}
.desktop-heading{padding:12px}
.desktop-display{min-height:220px}
.viewer-placeholder{padding:25px}
.viewer-placeholder h3{font-size:15px}
.viewer-placeholder p{font-size:12px}
.system-details dl>div{grid-template-columns:110px 1fr;gap:10px}
.members-content{padding:15px}
.member-form{flex-direction:column;align-items:stretch}
.member-table{min-width:520px}
.activation-code-row{flex-wrap:wrap}
.activation-code-row input{flex-basis:100%}
.login-card{width:100%;max-width:360px}
.login-card h1{font-size:59px}
.login-card>.brand{margin-bottom:50px}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


.desktop-shortcut{background:none;border:0;border-left:1px solid #44372b;color:#bf9778;font:10px var(--mono);padding:0 0 0 10px;margin-left:5px}
.desktop-shortcut:hover{color:var(--accent)}

/* Company accounts share the black-and-orange application shell. */
.password-field { position: relative; width: 100%; }
.password-field input { padding-right: 48px !important; width: 100%; }
.password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: #bdb6ac; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 2px; }
.password-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.password-toggle[aria-pressed="true"] { color: var(--accent); background: #2b1a10; }
.password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field-help { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 9px 0 15px; }
.auth-message { font-size: 13px; line-height: 1.7; background: #1c1510; border: 1px solid #67442e; padding: 14px; border-radius: 2px; overflow-wrap: anywhere; }
.auth-message.error { color: var(--red); border-color: #67463d; background: #281a17; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; }
.login-card select { width: 100%; padding: 12px 14px; font-size: 14px; background: var(--surface); border-color: var(--border); }
.login-card form>div>label { margin-top: 16px; }
.login-card label { font-size: 13px; }
.login-screen[data-auth-view]:not([data-auth-view="login"]) .login-card>h1,
.login-screen[data-auth-view]:not([data-auth-view="login"]) .login-card>.login-description { display: none; }
.login-screen[data-auth-view]:not([data-auth-view="login"]) .login-card>.brand { margin-bottom: 24px; }
.login-screen[data-auth-view]:not([data-auth-view="login"]) .login-card>.eyebrow { display: block; margin-bottom: 22px; }
.company-form { max-width: 560px; margin-top: 28px; border-top: 1px solid var(--border); padding-top: 20px; }
.company-form h3 { font-size: 17px; font-weight: 500; }
.company-form>label { display: block; font-size: 13px; margin: 18px 0 8px; color: #c4bbae; }
.company-form>label span { color: var(--muted); }
.company-form input { width: 100%; padding: 12px 14px; font-size: 14px; }
.company-form>button { margin-top: 18px; }
.admin-context { flex: 1; min-width: 0; max-width: 530px; margin-left: auto; }
.admin-context-fields { display: flex; gap: 7px; align-items: center; }
.admin-context-fields>div { flex: 1; min-width: 0; }
.admin-context-fields>div:nth-child(2) { flex: 1.35; }
.admin-context select { width: 100%; min-height: 34px; padding: 6px 8px; font-size: 12px; text-overflow: ellipsis; }
.admin-context .button { padding: 6px 8px; font-size: 11px; }
.main-content.compact-workspace { padding: 22px 28px 26px; }
.member-actions { display: flex; align-items: center; gap: 8px; }
.member-role { font-size: 13px; min-width: 150px; padding: 8px 10px; }
.member-table td .button { white-space: nowrap; }
#company-view { max-width: 1220px; margin: 0 auto; }
@media (max-width: 760px) {
  .auth-links { flex-wrap: wrap; gap: 0 12px; }
}
@media (max-width: 1100px) {
  .app-header:has(.admin-context:not([hidden])) { flex-wrap: wrap; height: 104px; padding-top: 10px; padding-bottom: 10px; row-gap: 7px; }
  .app-header:has(.admin-context:not([hidden])) .breadcrumb { flex: 1; }
  .admin-context { order: 3; flex-basis: 100%; max-width: none; }
}
@media (max-width: 600px) {
  .app-header { min-height: 59px; }
  .app:has(.admin-context:not([hidden])) .sidebar { top: 104px; height: calc(100dvh - 104px); }
  .main-content.compact-workspace { padding: 16px 12px 22px; }
  .viewer-tools { gap: 9px; margin-left: 0; width: 100%; }
  .viewer-tools .viewer-status { margin-left: auto; font-size: 10px; }
  .admin-context .button { font-size: 10px; padding: 5px 2px; }
}

.member-table-wrap { position: relative; }

/* Manual steps share the existing desktop and keep evidence behind the inspector. */
.workbench-layout { grid-template-columns: minmax(340px, .95fr) minmax(0, 1.55fr); }
.wb { overflow: visible; min-width: 0; }
.wb-header { position: relative; padding: 13px 16px 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.wb-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wb-heading h2 { font-size: 16px; font-weight: 500; margin: 0; }
.wb-heading .technical-label { font-size: 9px; text-align: right; line-height: 1.5; }
.wb-header-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
.wb-header-tools:empty { display: none; }
.wb-header-tools .button { padding: 8px 0 0; min-height: 28px; font-size: 11px; }
.wb-name { width: calc(100% - 36px); margin: 0 18px 16px; padding: 9px 11px; font-size: 14px; }
.wb-controls { display: flex; gap: 5px; padding: 0 18px; flex-wrap: wrap; }
.wb-controls .button { padding: 8px 10px; min-height: 34px; font-size: 12px; gap: 6px; }
.wb-status { font-size: 12px; color: var(--muted); margin: 12px 18px 17px; }
.wb>.inline-error { margin: 12px 18px; }
.wb-steps { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); }
.wb-steps li { min-width: 0; border-bottom: 1px solid #262626; border-left: 2px solid transparent; }
.wb-steps li.selected { border-left-color: var(--accent); background: var(--accent-soft); }
.wb-steps li.is-running { background: #231b13; box-shadow: inset 0 0 0 1px #ff620f35; }
.wb-step-row { display: flex; align-items: stretch; min-width: 0; }
.wb-start { flex: 0 0 32px; border: 0; border-right: 1px solid #262626; background: #0c0c0c; color: #777; font-size: 19px; }
.wb-start[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.wb-start:not(:disabled):hover { color: var(--accent); background: #25190f; }
.wb-start:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.wb-select { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; text-align: left; background: none; border: 0; padding: 12px 12px; color: var(--text); }
.wb-select:hover { background: #ffffff05; }
.wb-step-number { color: #958b81; font: 10px var(--mono); }
.wb-step-label { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.wb-step-state { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; max-width: 108px; font: 10px var(--mono); color: #928f89; }
.wb-step-unverified { flex-basis: 100%; text-align: right; font-size: 8px; color: #b1a69a; }
.wb-step-spinner { width: 11px; height: 11px; flex: 0 0 11px; border: 1.5px solid #ff620f40; border-top-color: var(--accent); border-radius: 50%; animation: wb-spin .8s linear infinite; }
@keyframes wb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wb-step-spinner { animation: none; } }
.wb-step-state.succeeded,.wb-step-state.read,.wb-step-state.action_sent { color: #b3cf99; }
.wb-step-state.running { color: var(--accent); }
.wb-step-state.error,.wb-step-state.failed { color: var(--red); }
.wb-step-timing { min-width: 0; margin: 0 12px 9px 42px; border-top: 1px solid #ffffff0b; }
.wb-timing-summary { padding: 6px 0 2px; cursor: pointer; color: #b5aba0; font: 10px/1.5 var(--mono); }
.wb-timing-summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.wb-timing-chart { position: relative; min-width: 0; padding-top: 7px; }
.wb-timing-track { display: flex; height: 17px; width: 100%; overflow: hidden; border-radius: 3px; background: #302d29; }
.wb-timing-segment { display: block; flex: 0 0 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--segment-color); cursor: help; }
.wb-timing-segment:hover,.wb-timing-segment:focus-visible { filter: brightness(1.28); outline: 2px solid #fff; outline-offset: -2px; }
.wb-timing-scale { display: flex; justify-content: space-between; margin: 3px 0 6px; color: #8d857c; font: 9px var(--mono); }
.wb-timing-legend { display: flex; flex-wrap: wrap; gap: 3px 9px; }
.wb-timing-legend>button { display: inline-flex; align-items: baseline; gap: 4px; padding: 0; border: 0; background: none; color: #afa79e; text-align: left; font: 9px/1.5 var(--sans); cursor: help; }
.wb-timing-legend>button:hover,.wb-timing-legend>button:focus-visible { color: #fff; }
.wb-timing-key { display: inline-block; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 1px; background: var(--segment-color); }
.wb-timing-info { position: fixed; z-index: 60; width: max-content; max-width: min(360px, calc(100vw - 24px)); margin: 0; padding: 10px 12px; border: 1px solid #625244; border-radius: 4px; background: #191612; box-shadow: 0 6px 24px #0008; color: #ddd2c6; white-space: pre-line; overflow-wrap: anywhere; pointer-events: none; font: 11px/1.6 var(--mono); }
.wb-timing-note { margin: 5px 0 0; color: #958b80; overflow-wrap: anywhere; font: 9px/1.5 var(--mono); }
.wb-timing-timestamp { margin: 0 0 6px; }
.wb-timing-error { color: var(--red); }
.wb-list-actions { display: flex; justify-content: space-between; padding: 6px 10px; }
.wb-editor { border: 1px solid var(--border); border-left: 2px solid #56402e; margin: 0 16px 16px 34px; padding: 12px 14px 16px; background: #131210; }
.wb-editor-heading { display: flex; align-items: center; justify-content: space-between; }
.wb-editor-heading h3 { font: 10px var(--mono); color: var(--muted); text-transform: uppercase; margin: 0; }
.wb-editor-heading>div { display: flex; }
.wb-editor label,.wb-history label { display: block; font-size: 11px; color: var(--muted); margin: 12px 0 6px; }
.wb-editor input,.wb-editor textarea,.wb-editor select,.wb-history select { width: 100%; padding: 9px 10px; font: 13px/1.5 var(--sans); }
.wb-editor textarea { resize: vertical; min-height: 70px; }
.wb-target { margin-top: 12px; font-size: 11px; color: var(--muted); }
.wb-target summary { cursor: pointer; }
.wb-run-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 9px 0 5px; font: 10px var(--mono); color: var(--muted); }
.wb-run-accounting { padding: 0; margin: 0; font: 10px/1.6 var(--mono); color: var(--muted); }
.wb-table-wrap { overflow-x: auto; }
.wb-inspector { padding: 0 18px 18px; font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.wb-inspector h3,.wb-inspector h4 { font-size: 13px; font-weight: 500; margin: 14px 0 9px; }
.wb-inspector p { line-height: 1.7; }
.wb-muted { color: var(--muted); font-size: 11px; }
.wb-empty { padding: 0 18px 12px; }
.wb-disclosure { border-top: 1px solid #303030; margin: 10px 0 0; padding: 10px 0; }
.wb-disclosure summary { cursor: pointer; color: #c5bdb3; font-size: 12px; }
.wb-disclosure .wb-disclosure { padding-left: 10px; }
.wb-facts { display: grid; gap: 8px; margin: 12px 0; }
.wb-facts>div { display: flex; justify-content: space-between; gap: 12px; }
.wb-facts dt { color: var(--muted); }
.wb-facts dd { margin: 0; text-align: right; font-family: var(--mono); font-size: 10px; }
.wb-output,.wb-inspector pre { margin: 10px 0; padding: 12px; border: 1px solid #303030; background: #090909; font: 11px/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 330px; overflow: auto; }
.wb-detail-table { width: 100%; border-collapse: collapse; font-size: 10px; margin: 10px 0; }
.wb-detail-table th,.wb-detail-table td { padding: 7px 5px; border-bottom: 1px solid #292929; text-align: left; vertical-align: top; }
.wb-detail-table th { color: var(--muted); font-weight: 400; }
.wb-probability { font-family: var(--mono); }
.wb-history { padding-top: 8px; color: var(--muted); font-size: 11px; }
.wb-history summary { cursor: pointer; color: var(--text); }
.wb-history-menu { position: absolute; top: calc(100% + 1px); left: 16px; right: 16px; z-index: 6; padding: 4px 14px 14px; background: #161410; border: 1px solid #56402e; box-shadow: 0 12px 30px #0008; }
.wb-history select { min-width: 0; }
@media (max-width: 1150px) { .workbench-layout { grid-template-columns: minmax(310px, 1fr) minmax(0, 1.15fr); gap: 16px; } }
@media (max-width: 920px) { .workbench-layout { grid-template-columns: minmax(0,1fr); } .workbench-layout #desktop-view { position: static; } }