:root{color:#eef1ef;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#111311;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{min-height:100svh;overflow-x:hidden}button,input,textarea,select{font:inherit}button{-webkit-tap-highlight-color:transparent}:root{--mint:#79e2c1;--mint-dark:#183d33;--warm:#e1a45d;--stop:#d75d54;--stop-dark:#3d1e1c;--lcd:#060d0c;--lcd-panel:#0c1513;--lcd-line:#27322f;--metal:#2d302e;--metal-light:#3a3e3b;--metal-dark:#181a19}.demo-stage{background:#111311;align-content:center;place-items:center;gap:13px;min-height:100svh;padding:15px 12px 12px;display:grid;position:relative;overflow:hidden}.demo-stage:before{content:"";pointer-events:none;background:radial-gradient(circle at 50% 46%,#ffffff0a,#0000 34%),linear-gradient(#ffffff03 1px,#0000 1px) 0 0/100% 34px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000,#000 15% 85%,#0000);mask-image:linear-gradient(#0000,#000 15% 85%,#0000)}.ambient-shadow{filter:blur(24px);pointer-events:none;background:#0000008f;border-radius:50%;width:min(440px,84vw);height:58px;position:absolute;top:calc(50% + 250px);left:50%;transform:translate(-50%,-50%)}.device-shell{isolation:isolate;color:#eef0ef;background:var(--metal);border:1px solid #454a46;border-radius:38px 38px 50px 50px;width:min(390px,100vw - 48px,69svh - 42.78px);min-width:250px;padding:clamp(15px,4.4cqw,18px) clamp(18px,5.1cqw,22px) clamp(11px,3.4cqw,14px);position:relative;box-shadow:inset 0 2px #ffffff1c,inset 0 -3px #171918,inset -1px 0 #ffffff06,0 26px 60px #0000007a,0 7px 16px #00000080;container-type:inline-size}.device-shell:before{z-index:-1;content:"";pointer-events:none;border:1px solid #ffffff06;border-radius:31px 31px 43px 43px;position:absolute;inset:7px}.device-shell:after{z-index:0;content:"";pointer-events:none;background:#202320;border:1px solid #202320;border-left:0;border-radius:0 12px 12px 0;width:13px;position:absolute;top:18px;bottom:25px;right:-10px;box-shadow:4px 8px 16px #0000004d}.device-branding{justify-content:space-between;align-items:flex-start;height:clamp(24px,7cqw,28px);padding:0 4px;display:flex}.wordmark{letter-spacing:.22em;color:#c7ccc9;font-size:clamp(8px,2.55cqw,10px);font-weight:750;line-height:1}.hardware-state{letter-spacing:.12em;color:#747c77;align-items:center;gap:4px;font-size:clamp(5px,1.65cqw,6.5px);font-weight:700;display:flex}.hardware-state span{background:var(--mint);border-radius:50%;width:4px;height:4px}.display-well{background:#171a18;border:1px solid #111312;border-radius:15px;justify-content:center;width:100%;padding:clamp(8px,2.5cqw,10px);display:flex;box-shadow:0 1px #ffffff0e,inset 0 5px 14px #00000075,inset 0 -1px #3d413e}.glass-edge{background:#020504;border:1px solid #020403;border-radius:4px;width:min(188px,59%);padding:1px;box-shadow:0 0 0 1px #303633}.lcd-display{aspect-ratio:240/280;color:#f3f5f4;background:var(--lcd);border-radius:2px;width:100%;font-family:SFMono-Regular,Consolas,Liberation Mono,ui-monospace,monospace;position:relative;overflow:hidden;container-type:inline-size}.pixel-grid{z-index:0;opacity:.055;pointer-events:none;background-image:linear-gradient(#b4d2c82b 1px,#0000 1px),linear-gradient(90deg,#b4d2c821 1px,#0000 1px);background-size:3px 3px;position:absolute;inset:0}.lcd-content{z-index:1;flex-direction:column;padding:clamp(7px,2.65cqw,10px);display:flex;position:absolute;inset:0}.lcd-device-header{border-bottom:1px solid var(--lcd-line);letter-spacing:.04em;color:#78847f;flex:none;justify-content:space-between;align-items:center;min-height:clamp(11px,3.3cqw,13px);padding-bottom:4px;font-size:clamp(5px,1.75cqw,6.5px);display:flex}.agent-identity{align-items:center;gap:5px;display:flex}.agent-identity strong{letter-spacing:.11em;color:#cbd2ce;font-size:clamp(6px,2cqw,7.5px)}.connection-dot{background:var(--mint);border-radius:50%;width:5px;height:5px}.connection-dot.is-offline{background:#5a6560}.screen-location{letter-spacing:.08em;color:#5c6964;flex:none;justify-content:space-between;align-items:center;min-height:clamp(14px,4.25cqw,17px);font-size:clamp(5px,1.7cqw,6.5px);display:flex}.screen-location strong{color:#98a49f;font-size:clamp(5.5px,1.85cqw,7px)}.status-hero{background:#0b1412;border:1px solid #273833;flex-direction:column;flex:none;justify-content:center;gap:3px;min-height:clamp(36px,11.5cqw,45px);padding:clamp(5px,1.8cqw,7px) clamp(6px,2.1cqw,8px);display:flex}.status-badge{letter-spacing:.06em;align-items:center;gap:4px;font-size:clamp(6px,2.1cqw,8px);font-weight:750;display:inline-flex}.status-badge--prominent{letter-spacing:.055em;font-size:clamp(12px,4.5cqw,17px);line-height:1}.lcd-display[data-status=APPROVAL] .status-badge--prominent,.lcd-display[data-status=NEEDS_INPUT] .status-badge--prominent{font-size:clamp(9px,3.45cqw,13px)}.status-badge--active,.status-badge--approval{color:var(--mint)}.status-badge--warning,.status-badge--danger{color:var(--warm)}.status-badge--success{color:#e7ece9}.status-badge--muted{color:#98a29e}.status-icon--animated{animation:1.4s steps(2,end) infinite lcdPulse}.status-project{letter-spacing:.11em;color:#6d7b76;padding-left:18px;font-size:clamp(5px,1.65cqw,6.5px)}.lcd-screen{flex-direction:column;flex:1;min-height:0;padding:clamp(4px,1.4cqw,5px) 0;display:flex;overflow:hidden}.content-label{letter-spacing:.1em;color:#65736e;margin-bottom:3px;font-size:clamp(4.5px,1.5cqw,5.8px);display:block}.task-block{background:var(--lcd-panel);border-left:2px solid #7d8d87;padding:clamp(5px,1.8cqw,7px)}.task-block.is-open{border-left-color:#c7d1cc}.task-block p{color:#edf2ef;min-height:2.2em;margin:0;font-family:ui-sans-serif,system-ui,sans-serif;font-size:clamp(6.5px,2.25cqw,8.5px);font-weight:650;line-height:1.25}.action-line{color:#aab6b1;align-items:center;gap:4px;margin-top:4px;font-size:clamp(5px,1.75cqw,6.5px);display:flex}.task-detail-line{border-top:1px solid var(--lcd-line);color:#687570;justify-content:space-between;margin-top:4px;padding-top:3px;font-size:clamp(4.5px,1.45cqw,5.5px);display:flex}.task-detail-line strong{color:#d7dfdb}.metrics-row{border-bottom:1px solid var(--lcd-line);color:#8d9994;justify-content:space-between;align-items:center;gap:3px;padding:clamp(4px,1.4cqw,5px) 1px;font-size:clamp(4.5px,1.55cqw,6px);display:flex}.metrics-row span{white-space:nowrap;align-items:center;gap:2px;display:inline-flex}.metrics-row .is-stopped{color:var(--warm)}.overview-usage{grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:3px;display:grid}.usage-bar__meta{letter-spacing:.05em;color:#74817c;justify-content:space-between;align-items:baseline;margin-bottom:3px;font-size:clamp(4.5px,1.55cqw,6px);display:flex}.usage-bar__meta strong{color:#d3dad6;font-size:clamp(5.5px,1.8cqw,7px)}.usage-bar__track{grid-template-columns:repeat(10,1fr);gap:1px;height:4px;display:grid}.usage-bar__track i{background:#26312e;display:block}.usage-bar__track i.is-filled{background:#c4cfca}.usage-bar--amber .usage-bar__track i.is-filled{background:var(--warm)}.usage-bar--soft .usage-bar__track i.is-filled{background:#7d8b85}.usage-bar--compact .usage-bar__track{height:3px}.usage-stack{gap:clamp(4px,1.4cqw,5px);display:grid}.usage-details{border:1px solid var(--lcd-line);background:var(--lcd-line);grid-template-columns:1fr 1fr;gap:1px;margin-top:4px;display:grid}.usage-details div{background:var(--lcd-panel);grid-template-columns:auto 1fr;gap:1px 4px;min-width:0;padding:clamp(3px,1.15cqw,4px);display:grid}.usage-details div:first-child{grid-column:1/-1}.usage-details svg{color:#8c9a94;grid-row:1/3;align-self:center}.usage-details span{color:#64716c;font-size:clamp(4px,1.35cqw,5.2px)}.usage-details strong{text-overflow:ellipsis;white-space:nowrap;font-size:clamp(5.5px,1.8cqw,7px);overflow:hidden}.decision-heading{align-items:center;gap:7px;min-height:25px;display:flex}.decision-heading>svg{color:var(--warm);flex:none}.approval-screen .decision-heading>svg{color:var(--mint)}.decision-heading strong{font-family:ui-sans-serif,system-ui,sans-serif;font-size:clamp(6.5px,2.2cqw,8.5px);line-height:1.1;display:block}.decision-heading p{color:#7c8984;margin:2px 0 0;font-family:ui-sans-serif,system-ui,sans-serif;font-size:clamp(5px,1.65cqw,6.5px)}.request-card{background:#0f1816;border:1px solid #34423e;margin-top:3px;padding:clamp(5px,1.7cqw,6.5px)}.request-card code{color:#dbe2df;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(5.5px,1.9cqw,7.2px);display:block;overflow:hidden}.approval-details{border-top:1px solid var(--lcd-line);grid-template-columns:auto 1fr;gap:2px 6px;margin-top:5px;padding-top:4px;font-size:clamp(4px,1.35cqw,5.2px);display:grid}.approval-details span{color:#62706b}.approval-details strong{text-align:right;color:#aeb9b4;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.approve-focus{letter-spacing:.08em;color:var(--mint);background:#0c1c17;border:1px solid #2b6c59;justify-content:center;align-items:center;gap:4px;margin-top:auto;padding:4px;font-size:clamp(5px,1.7cqw,6.5px);font-weight:750;display:flex}.choice-list{gap:2px;margin-top:4px;display:grid}.choice-list div{color:#8e9a95;background:#0a1210;align-items:center;gap:5px;min-height:clamp(21px,6.7cqw,26px);padding:0 6px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:clamp(5.5px,1.95cqw,7.5px);display:flex}.choice-list div span{width:5px;color:var(--lcd)}.choice-list div.is-selected{color:#07100e;background:#d9e3df}.input-note{text-align:center;color:#5d6a65;margin-top:auto;font-family:ui-sans-serif,system-ui,sans-serif;font-size:clamp(4.5px,1.45cqw,5.5px)}.result-screen{text-align:center;align-items:center}.result-icon{border:1px solid;border-radius:50%;place-items:center;width:clamp(28px,8.5cqw,33px);height:clamp(28px,8.5cqw,33px);display:grid}.result-icon--done{color:#dbe2df}.result-icon--error{color:var(--warm)}.result-icon--offline{color:#89948f}.result-title{color:#dbe2de;margin:4px 0 0;font-family:ui-sans-serif,system-ui,sans-serif;font-size:clamp(6px,2cqw,7.5px);line-height:1.2}.result-meta{border:1px solid var(--lcd-line);color:#697771;gap:2px;width:100%;margin-top:4px;padding:4px 6px;font-size:clamp(4.5px,1.45cqw,5.5px);display:grid}.result-meta strong{color:#aeb9b4;font-size:clamp(5px,1.65cqw,6.2px)}.error-code{letter-spacing:.1em;color:var(--warm);margin-top:3px;font-size:clamp(4.5px,1.45cqw,5.5px)}.offline-grid{border:1px solid var(--lcd-line);text-align:left;grid-template-columns:auto 1fr;gap:2px 7px;width:100%;margin-top:5px;padding:5px;display:grid}.offline-grid span{color:#62706b;font-size:clamp(4px,1.35cqw,5.2px)}.offline-grid strong{text-align:right;color:#a8b4af;font-size:clamp(4.5px,1.5cqw,5.7px)}.reconnect-icon{animation:1s steps(8,end) infinite reconnectSpin}.status-footer{border-top:1px solid var(--lcd-line);flex:none;grid-template-columns:repeat(6,1fr);gap:2px 3px;min-height:clamp(31px,9.5cqw,37px);padding-top:4px;display:grid}.status-footer span{letter-spacing:.015em;color:#56635e;white-space:nowrap;grid-column:span 2;align-items:center;gap:3px;min-width:0;font-size:clamp(3.8px,1.2cqw,4.7px);line-height:1;display:flex}.status-footer strong{letter-spacing:.03em;color:#b6c0bb;border:1px solid #35413d;border-radius:2px;padding:2px 3px;font-size:clamp(4px,1.35cqw,5.2px)}.lcd-display[data-screen=approval] .status-footer span:first-child strong{color:var(--mint);border-color:#367864}.stop-warning{z-index:4;letter-spacing:.08em;color:#efb1ac;background:#281413;border:1px solid #78413d;align-items:center;gap:7px;padding:6px 8px;font-size:clamp(5px,1.65cqw,6.5px);font-weight:750;display:flex;position:absolute;inset:auto 7px 7px;box-shadow:0 3px 10px #0000007a}.stop-warning__track{background:#592d29;width:30px;height:3px}.stop-warning__track i{background:var(--stop);height:100%;display:block}.control-surface{justify-content:center;align-items:flex-start;min-height:clamp(184px,52cqw,204px);margin-top:clamp(19px,5.5cqw,24px);padding:0;display:flex;position:relative}.five-way-pad{aspect-ratio:1;flex:none;width:clamp(148px,47cqw,178px);position:relative}.pad-base{background:#222522;border:1px solid #171918;border-radius:50%;position:absolute;inset:3%;box-shadow:0 1px #ffffff0f,inset 0 6px 10px #00000061}.pad-cross{clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%);filter:drop-shadow(0 5px 2px #0000006b);background:#353936;position:absolute;inset:8%;box-shadow:0 7px 8px #00000085}.pad-cross:after{clip-path:inherit;content:"";background:#ffffff09;position:absolute;inset:2px}.pad-direction,.pad-ok{z-index:2;color:#a6ada9;cursor:pointer;touch-action:manipulation;background:0 0;border:0;place-items:center;padding:0;display:grid;position:absolute}.pad-direction{width:30%;height:30%}.pad-direction--up{top:9%;left:35%}.pad-direction--right{top:35%;right:9%}.pad-direction--down{bottom:9%;left:35%}.pad-direction--left{top:35%;left:9%}.pad-ok{color:#eef1ef;background:#424743;border:1px solid #171918;border-radius:50%;width:30%;height:30%;top:35%;left:35%;box-shadow:inset 0 2px #ffffff1a,0 5px 7px #0000008c}.pad-ok span{letter-spacing:.05em;font-size:clamp(7px,2.25cqw,8.8px);font-weight:800}.pad-direction:hover{color:#eef1ef}.pad-direction:active,.pad-direction.is-keyboard-active{color:#f3f5f4;background:#ffffff12;border-radius:8px;transform:translateY(2px)}.pad-ok:active,.pad-ok.is-keyboard-active{color:#fff;transform:translateY(3px);box-shadow:0 2px 2px #0009}.secondary-controls{z-index:4;flex-direction:column;justify-content:space-between;width:38px;display:flex;position:absolute;top:clamp(65px,18cqw,72px);bottom:clamp(45px,12cqw,52px);right:-17px}.secondary-actions{gap:24px;display:grid}.action-button{color:#b6bdb9;cursor:pointer;touch-action:none;background:#1a1c1b;border:1px solid #141615;border-radius:9px;height:clamp(33px,9.6cqw,38px);padding:0;position:relative;box-shadow:0 4px #101211,0 6px 8px #00000061}.action-button__face{letter-spacing:.08em;background:#323633;border:1px solid #424743;border-radius:6px;justify-content:center;align-items:center;gap:5px;font-size:clamp(6px,1.85cqw,7.2px);font-weight:780;display:flex;position:absolute;inset:2px}.action-button--approve:not(:disabled){color:#c8f5e7;background:#10251f}.action-button--approve:not(:disabled) .action-button__face{background:#1a493b;border-color:#438a73}.action-button:disabled{color:#5f6662;cursor:not-allowed;box-shadow:0 3px #121413}.action-button:disabled .action-button__face{background:#272a28;border-color:#303431}.stop-guard{background:#211c1b;border:1px solid #3a302f;border-right:0;border-radius:9px 0 0 9px;padding:3px 0 3px 3px;position:relative;box-shadow:inset 0 3px 7px #00000052}.secondary-controls .action-button{border-radius:9px 0 0 9px;width:38px;height:18px;box-shadow:-2px 2px #111312}.secondary-controls .action-button__face{letter-spacing:.04em;border-right:0;border-radius:7px 0 0 7px;justify-content:flex-start;gap:2px;padding-left:5px;font-size:5px;inset:1px 0 1px 2px}.secondary-controls .action-button__face svg{width:8px;height:8px}.secondary-controls .action-button--approve{opacity:.42}.secondary-controls .action-button--approve .action-button__face{justify-content:center;padding-left:0;font-size:0}.secondary-controls .action-button--approve:not(:disabled){opacity:1}.secondary-controls .stop-guard .action-button{width:35px;height:21px}.secondary-controls .stop-progress{width:calc((100% - 3px) * var(--stop-progress));bottom:2px;left:3px}.action-button--stop{color:#edb5b1;background:#211413}.action-button--stop .action-button__face{background:var(--stop-dark);border-color:#6c3935}.stop-progress{z-index:3;width:calc((100% - 6px) * var(--stop-progress));background:var(--stop);pointer-events:none;border-radius:0 0 4px 4px;height:2px;position:absolute;bottom:3px;left:3px}.action-button:hover:not(:disabled) .action-button__face{color:#f4f6f5;border-color:#59605c}.action-button--approve:hover:not(:disabled) .action-button__face{border-color:var(--mint);color:#ecfff9}.action-button--stop:hover .action-button__face{color:#ffd1cd;border-color:#89504b}.action-button:active:not(:disabled),.action-button.is-keyboard-active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #101211}.pad-direction:focus-visible,.pad-ok:focus-visible,.action-button:focus-visible{outline-offset:3px;outline:2px solid #c9d1cd}.action-button--approve:focus-visible{outline-color:var(--mint)}.action-button--stop:focus-visible{outline-color:var(--stop)}.device-signature{color:#656c68;letter-spacing:.12em;justify-content:center;align-items:center;gap:8px;height:14px;font-size:clamp(4.5px,1.3cqw,5.2px);font-weight:650;display:flex}.device-signature i{background:#646b67;border-radius:50%;width:2px;height:2px}.demo-hint{letter-spacing:.025em;color:#5c645f;text-align:center;max-width:calc(100vw - 24px);margin:0;font-size:clamp(8px,2.3vw,10px);position:relative}.demo-hint span{color:#393e3b;margin:0 3px}@keyframes lcdPulse{50%{opacity:.4}}@keyframes reconnectSpin{to{transform:rotate(360deg)}}@media (height<=620px){.demo-stage{gap:7px;padding-block:8px}.device-shell{min-width:250px}.demo-hint{font-size:7.5px}}@media (width<=360px){.demo-hint{max-width:290px;line-height:1.35}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}