/* A clearer stage, legible controls and a reveal that gives the app the room. */
:root{--ease:cubic-bezier(.22,.8,.22,1)}
body{background:#0a0c0d;color:#e8e9e7}
.page{max-width:1490px;padding:0 32px;margin:auto}
header{height:69px;border-color:#ffffff13}.nav{font-size:11px}.concept{font-size:9px;letter-spacing:1.4px}.visit{font-size:10px}
.intro{grid-template-columns:1.3fr 1fr;padding:27px 0 30px;gap:60px;align-items:center}
.intro .tag{font-size:9px;letter-spacing:1.8px;color:#9b9f9c;margin-bottom:13px}
.intro h1{font-size:clamp(32px,3.6vw,54px);line-height:1.04;letter-spacing:-2.4px;font-weight:520}
.intro h1 em{font-style:normal;color:#ffbc5d}.intro p{display:none}
.intro .prompt{padding:0;border:0;background:none;box-shadow:none;max-width:375px;justify-self:end}
.intro .prompt-head,.intro .prompt-text,.intro .prompt-bottom{display:none}
.story-intro{font-size:14px;line-height:1.75;color:#a2aaa7;max-width:350px;margin:0 0 19px}
.story-intro strong{color:#eceee9;font-weight:500}.story-route{display:flex;align-items:center;gap:14px;font-size:10px;color:#c1c7bd}
.story-route span{display:flex;align-items:center;gap:7px}.story-route b{font-size:8px;color:#ffbc5d;border:1px solid #ffbc5d40;border-radius:50%;height:20px;width:20px;display:grid;place-items:center;font-weight:500}.story-route i{width:20px;height:1px;background:#596052}
.bench{border:1px solid #484d48;border-radius:14px;box-shadow:0 22px 80px #0005,0 1px 0 #ffffff0a inset;overflow:hidden;scroll-margin-top:12px}
.bench-bar{height:45px;padding:0 18px;background:#1b1e20;font-size:11px;gap:11px}.bench-project{font-size:10px;color:#9ba39f}.bench-status{font-size:10px}.bench-status i{box-shadow:0 0 10px #ffc45c50}
.stage-layout{height:clamp(550px,calc(100svh - 180px),650px);grid-template-columns:42px minmax(0,1fr) 198px;transition:grid-template-columns .9s var(--ease),height .7s var(--ease)}
.canvas{background-color:#111516;background-image:radial-gradient(#929d8b28 .7px,transparent .7px);background-size:22px 22px;overflow:hidden}
.tool-rail{background:#171b1c;border-color:#ffffff0b;padding-top:18px;gap:10px;overflow:hidden;transition:opacity .4s}
.canvas-title{font-size:8px;left:19px;top:16px;letter-spacing:1.2px}.canvas-title span{font-size:7px;letter-spacing:.8px;padding:5px 7px}.zoom{top:19px;right:17px;font-size:8px;color:#8a948e}
.viewport-shell{left:23px;right:23px;top:48px;bottom:50px;border-color:#7f8b7c70;box-shadow:0 18px 50px #0006;transition:all .9s var(--ease)}
.app-chrome{height:25px;background:#e4e7df;color:#65715f;border-bottom:1px solid #c9d0c1}.app-chrome i{width:5px;height:5px;background:#aeb5a6}.app-address{font-size:8px}.app-iframe{height:calc(100% - 25px)}
.right-panel{background:#191e1e;border-color:#ffffff0c;min-width:0;padding:19px 15px 16px;overflow:hidden;transition:opacity .4s,padding .8s}
.panel-heading{font-size:9px;letter-spacing:1px;color:#b5bdb6;white-space:nowrap}.panel-heading span{font-size:8px;color:#94a28e}
.team{gap:5px;margin-top:17px}.team-member{padding:9px 7px;gap:9px;border-radius:7px;transition:background .4s,opacity .4s;min-height:48px}
.team-member.busy{background:#ffffff04}.team-member .avatar{width:27px;height:27px;font-size:10px;border-radius:8px;flex-shrink:0;background:color-mix(in srgb,var(--agent) 10%,transparent);border-color:color-mix(in srgb,var(--agent) 33%,transparent)}
.team-member .role{font-size:11px;font-weight:450;color:#cbd0cb}.team-member .task{font-size:8px;line-height:1.5;color:#84918a;margin-top:4px;white-space:nowrap}.team-member.busy .task{color:#b1c0ab}.bench[data-stage="0"] .team-member{opacity:.75}
.team-member.is-leading{background:color-mix(in srgb,var(--agent) 8%,transparent);box-shadow:inset 2px 0 var(--agent)}
.activity-head{font-size:8px;letter-spacing:1.4px;margin-top:21px;color:#89988b}.log{margin-top:12px}.log-item{font-size:9px;color:#87978e;padding:0 0 12px;line-height:1.45}.log-item b{font-size:9px;font-weight:500;color:#c5cec2}.log-item time{font-size:7px;color:#718475;margin-top:4px}.log-item>span{width:4px;height:4px;flex-shrink:0;margin-top:4px}
.layers-status{font-size:9px;line-height:1.5;color:#b6c4b0;border-color:#ffffff10}.layers-status small{font-size:8px;color:#788b7b}
.prompt-scene{padding:25px 35px;justify-content:center;background:radial-gradient(ellipse at 50% 66%,#e3ad4610,transparent 65%)}
.bench[data-stage="0"] .viewport-shell{transition:none;visibility:hidden;opacity:0}
.origin-symbol{height:38px;width:38px;border-radius:11px;margin-bottom:14px;background:#ffba510d;color:#ffc56c;border-color:#ad895b45}
.origin-eyebrow{font-size:8px;color:#9daa9f;letter-spacing:2.2px;margin-bottom:11px}.origin-title{font-size:clamp(28px,2.7vw,38px);letter-spacing:-1.5px;font-weight:500;margin-bottom:11px}.origin-sub{font-size:12px;line-height:1.5;margin-bottom:24px;color:#a1aba4}
.origin-box{width:min(590px,100%);padding:19px 22px 16px;border-radius:12px;background:#242927;border-color:#8c8763;box-shadow:0 0 0 5px #ffbb5304,0 20px 55px #0005}
.origin-box .input-label{font-size:8px;color:#c5bf9f;letter-spacing:1.7px;margin-bottom:12px}.origin-input{font-size:16px;min-height:74px;line-height:1.65;color:#f0f1e9;letter-spacing:-.25px}.origin-placeholder{color:#929a90}.origin-caret{height:19px}
.origin-actions{margin-top:13px;padding-top:13px;border-color:#4f584b}.origin-actions .input-tools small{font-size:9px;color:#a1ad9c}.origin-submit{font-size:11px;padding:11px 15px;min-width:147px;background:#ffbc5d;border-color:#ffd389;border-radius:6px;color:#2e2417;box-shadow:0 2px 0 #0003}.origin-submit:not(:disabled):hover{background:#ffd28b;transform:translateY(-1px)}
.origin-submit:disabled{opacity:.65}.origin-foot{font-size:9px;color:#8c9b8b;margin-top:15px}.origin-foot.sent{color:#cadcad}.origin-cursor svg{height:27px;width:23px}.origin-cursor span{font-size:9px;padding:5px 8px}
.brief-tags{display:flex;gap:6px;flex-wrap:wrap;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s,opacity .4s;margin:0}.brief-tags.visible{max-height:55px;opacity:1;margin-top:9px}.brief-tags span{font-size:8px;color:#d0dfb9;padding:4px 7px;border:1px solid #758d5266;border-radius:4px;background:#aec9890a;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .4s}.brief-tags span.captured{opacity:1;transform:none}.brief-tags span:before{content:'✓';color:#b2cc88;margin-right:5px}
.prompt-ribbon{font-size:10px;background:#242b22;color:#c2cbb7;padding:0 18px;gap:12px}.prompt-ribbon.visible{height:34px}.prompt-ribbon .you{font-size:7px;color:#d2dfbb}.prompt-ribbon .received{font-size:9px;color:#adc995}.prompt-ribbon .submitted-text{font-size:9px}
.canvas-bottom{left:20px;bottom:15px;font-size:9px;color:#a3b39b}.canvas-bottom i{background:#b7cf97;box-shadow:0 0 8px #b7cf9733}
.agent-cursor{transition:opacity .25s;filter:drop-shadow(0 3px 4px #0004)}.agent-cursor svg{height:23px;width:19px;stroke-width:1.4}.cursor-name{font-size:9px;padding:5px 7px;gap:6px;border-radius:0 5px 5px 5px;margin-left:14px;line-height:1.2;box-shadow:0 2px 7px #0003}.cursor-name small{font-size:7px;max-width:90px;white-space:nowrap}.agent-cursor:not(.lead){opacity:.72}.agent-cursor.hidden{opacity:0!important}.agent-cursor.lead{z-index:3}.agent-cursor .click-pulse{animation:none;opacity:0}.agent-cursor.acting .click-pulse{opacity:1;animation:purposefulClick .7s ease-out infinite}.agent-cursor.lead .cursor-name{box-shadow:0 0 0 2px #ffffff28,0 4px 12px #0005}
@keyframes purposefulClick{from{transform:scale(.4);opacity:.9}to{transform:scale(1.8);opacity:0}}
.floating-tray{background:#242b2af7;border-color:#87927e80;border-radius:9px}.tray-label{font-size:8px;color:#d2dacb}.tray-label span{color:#a3b299}.palette-tray{left:5%;top:20%;width:190px;padding:13px}.asset-tray{left:4%;bottom:65px;width:226px}.data-tray{right:4%;top:15%;width:180px}.data-row{font-size:9px;padding:9px 0}.data-row b{font-size:7px;color:#b5d49e}.type-sample span{font-size:9px;color:#b7c7ac}
#actionReadout{position:absolute;z-index:19;left:50%;bottom:13px;transform:translateX(-50%);padding:8px 12px;border:1px solid #a9ba8d48;background:#202820f2;border-radius:6px;box-shadow:0 5px 18px #0004;color:#dce9cf;max-width:80%;font-size:10px;line-height:1.4;pointer-events:none;backdrop-filter:blur(12px)}
#actionReadout:empty{display:none}#actionReadout strong,#actionReadout b{font-weight:500}#actionReadout small{display:none}.bench[data-stage="0"] #actionReadout,.bench[data-stage="7"] #actionReadout{display:none}
.bench:not([data-stage="0"]):not([data-stage="7"]) .canvas-bottom{display:none}
#beatProgress{height:2px;background:#b5d299;border-radius:2px;margin-top:5px;transform-origin:left}
.timeline{padding:13px 18px;gap:18px;background:#1a1f1e;border-top:1px solid #ffffff12}.steps{gap:12px}.step{text-align:left}.step i{height:2px;margin-bottom:9px;background:#4c5549}.step small{font-size:7px;color:#778670;margin-right:5px;display:inline}.step span{font-size:10px;color:#a1ad9b}.step.current span{color:#f5d49b}.step.current small{color:#f0bf73}.step.done span{color:#c0cdb7}.step i b{background:#e8bc72}.play-controls{gap:6px;padding-left:15px}.play-controls button{font-size:10px;padding:7px 10px;border-color:#596653;background:#2e382d;color:#e0e8d6;white-space:nowrap}.play-controls #play{min-width:58px}.play-controls #replay{border-color:transparent;background:transparent;color:#aab7a1;padding-right:0}
.transport{min-height:41px;padding:7px 18px;display:flex;align-items:center;gap:13px;border-top:1px solid #ffffff0a;background:#171c1a;color:#9cab91;font-size:9px}.transport .time{font-variant-numeric:tabular-nums;font-size:9px;white-space:nowrap;min-width:65px}.transport .seek{flex:1;min-width:40px;accent-color:#e5ba70;height:3px;cursor:pointer;margin:0 10px 0 0}.transport .speed{font:500 9px Geist;border:1px solid #516148;border-radius:4px;background:#242f22;color:#cbdbbe;min-width:38px;padding:5px;cursor:pointer}.transport .preview-views{display:flex;align-items:center;gap:4px;margin:0;border-left:1px solid #48543f;padding-left:10px}.transport .preview-views button,.transport .preview-views a{font-size:8px;padding:5px 7px}.transport .preview-views a{padding-left:9px;color:#c9dcba}
.stage-caption{padding:13px 4px;font-size:10px;color:#9bab93}.stage-caption .caption-step{max-width:none}.bottom-row{padding:12px 4px 22px;border-color:#ffffff0e;font-size:8px}.bottom-row .legend{display:none}.bottom-row .note{width:100%;text-align:left;font-size:8px;color:#6e7d6a}
.bench.complete{border-color:#697e50;box-shadow:0 0 0 1px #9fb56f16,0 25px 90px #0006}.bench.complete .stage-layout{grid-template-columns:0px minmax(0,1fr) 0px}.bench.complete .right-panel{padding:0;opacity:0;visibility:hidden}.bench.complete .tool-rail{opacity:0;border:0}.bench.complete .canvas-title,.bench.complete .zoom,.bench.complete .canvas-bottom{display:none}.bench.complete .canvas{background:#1b221a}.bench.complete .viewport-shell{left:18px;right:18px;top:14px;bottom:14px;transform:none;box-shadow:0 14px 35px #0005;border-color:#a9b69055}.bench.complete .reveal-text{display:none}.bench.complete .prompt-ribbon{background:#2c3825;border-color:#506541}.bench.complete .bench-status{color:#c7dfa4}.bench.complete .bench-status i{background:#b6d593;box-shadow:0 0 12px #c7e3a650}
.bench.complete #replay{display:none}
.desktop-phone-mode .viewport-shell{left:calc(50% - 180px)!important;right:auto!important;width:360px!important;top:12px!important;bottom:12px!important;border-radius:23px;border-width:4px}.desktop-phone-mode .app-chrome{height:22px}.desktop-phone-mode .app-iframe{height:calc(100% - 22px)}
@media(min-width:900px) and (max-height:780px){.right-panel{padding-top:14px;padding-bottom:10px}.team{gap:0;margin-top:10px}.team-member{padding:6px;min-height:42px}.team-member .task{font-size:7px;margin-top:2px}.activity-head{margin-top:14px}.log-item{padding-bottom:8px}.log-item:nth-child(n+3){display:none}.origin-symbol{margin-bottom:10px}.origin-sub{margin-bottom:20px}.origin-title{font-size:31px}.origin-input{min-height:68px}}
@media(max-width:1000px){.stage-layout{grid-template-columns:34px minmax(0,1fr) 175px}.right-panel{padding-left:10px;padding-right:10px}.team-member .role{font-size:10px}.team-member .task{font-size:7px}.origin-input{font-size:14px}.origin-title{font-size:29px}.origin-box{padding:16px 18px}.cursor-name{font-size:8px}.cursor-name small{font-size:6px}}
@media(max-width:820px){.page{padding:0 18px}.intro{gap:30px;grid-template-columns:1.2fr 1fr}.intro h1{font-size:36px;letter-spacing:-1.6px}.story-intro{font-size:12px}.story-route{font-size:8px;gap:7px}.story-route i{width:10px}.stage-layout{grid-template-columns:32px minmax(0,1fr);height:540px}.right-panel{display:none}.step span{font-size:9px}.step small{display:none}.timeline{padding:12px;gap:10px}.play-controls{padding-left:9px}.agent-cursor svg{height:20px;width:17px}.cursor-name{font-size:8px}.bench.complete .stage-layout{grid-template-columns:0px minmax(0,1fr)}.origin-box{max-width:540px}.transport{padding:8px 12px;gap:9px}.transport .preview-views{gap:2px;padding-left:7px}.transport .preview-views a{display:none}}
@media(max-width:560px){.page{padding:0 12px}header{height:58px}.concept{font-size:7px}.intro{display:block;padding:24px 5px 23px}.intro h1{font-size:38px;letter-spacing:-1.8px}.intro .tag{font-size:7px;letter-spacing:1.4px;margin-bottom:11px}.intro .prompt{max-width:none;margin-top:16px}.story-intro{font-size:11px;line-height:1.7;margin-bottom:11px;max-width:320px}.story-route{font-size:8px;gap:12px}.story-route b{height:17px;width:17px;font-size:7px}.story-route i{width:17px}.bench{border-radius:10px;scroll-margin-top:7px}.bench-bar{height:43px;padding:0 11px;font-size:9px;gap:6px}.bench-project{font-size:8px}.bench-status{font-size:7px;max-width:88px}.stage-layout{grid-template-columns:1fr;height:550px}.tool-rail{display:none}.canvas-title{top:13px;left:12px;font-size:7px}.zoom{top:18px;font-size:6px;right:11px}.viewport-shell{left:9px;right:9px;top:44px;bottom:47px}.origin-symbol{height:32px;width:32px;margin-bottom:13px}.prompt-scene{padding:22px 16px}.origin-title{font-size:29px;max-width:none;letter-spacing:-1px}.origin-eyebrow{font-size:7px;letter-spacing:1.6px}.origin-sub{font-size:11px;margin-bottom:24px}.origin-box{padding:17px 15px 14px;border-radius:10px}.origin-input{font-size:14px;min-height:110px;line-height:1.8}.origin-submit{font-size:10px;min-width:140px;padding:10px 11px}.origin-actions .input-tools{gap:5px}.origin-actions .input-tools small{font-size:7px}.origin-foot{font-size:8px;max-width:260px}.prompt-ribbon{padding:0 10px;gap:7px}.prompt-ribbon .submitted-text{font-size:8px}.prompt-ribbon .received{display:none}.prompt-ribbon.visible{height:31px}.timeline{padding:13px 11px 10px;display:block}.steps{grid-template-columns:repeat(4,1fr);gap:11px}.step i{margin-bottom:5px}.step span{font-size:9px}.step small{display:inline;font-size:6px;margin-right:4px}.play-controls{padding:11px 0 0;justify-content:flex-start;gap:8px}.play-controls #play{min-width:67px}.play-controls button{font-size:10px}.transport{flex-wrap:wrap;padding:9px 11px;gap:9px}.transport .time{font-size:8px;min-width:58px}.transport .seek{flex:1;margin:0}.transport .speed{font-size:8px;min-width:34px}.transport .preview-views{border:0;padding:0;width:100%;justify-content:flex-start;gap:7px}.transport .preview-views button{font-size:8px;padding:6px 8px}.transport .preview-views a{display:inline;margin-left:auto;font-size:8px}.stage-caption{padding:12px 4px;font-size:9px;line-height:1.5}.caption-step{min-height:0!important}.bottom-row .note{font-size:7px;line-height:1.7}.bench.complete .stage-layout{grid-template-columns:1fr}.bench.complete .viewport-shell{left:8px;right:8px;top:9px;bottom:9px}.desktop-phone-mode .viewport-shell{left:8px!important;right:8px!important;width:auto!important}.cursor-name{font-size:7px;padding:4px 5px;margin-left:10px}.agent-cursor svg{height:18px;width:15px}.agent-cursor:not(.lead){opacity:.64}.floating-tray{max-width:160px}.asset-tray{left:3%;bottom:72px;width:160px}.palette-tray{width:157px;left:4%;top:22%}.data-tray{width:155px;right:3%;top:18%}.data-row{font-size:8px}#actionReadout{font-size:8px;padding:7px 9px;max-width:91%;white-space:nowrap;bottom:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}