/* Agent Development Environment tools (Owner, 1 November 2026): four living cards, two by two, and the slideshow they
   open. Every view is the same 800 x 500 scene, scaled to its place. Tokens only. */
.scene-tools{padding:140px 0 0}
.tl-cards{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tl-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--at-line);border-radius:16px;background:var(--at-surface);overflow:hidden;transition:border-color .15s}
.tl-card:hover,.tl-card:focus-within{border-color:var(--at-text-muted)}
.tl-card .tl-fit{border-bottom:1px solid var(--at-line)}
.tl-card-title{margin:0;padding:18px 20px 0;font:500 16px/1.4 var(--at-font-ui);letter-spacing:0}
/* The whole card opens the slideshow: one button over it, named by the card's title. */
.tl-card-open{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:16px;background:none;cursor:pointer}
.tl-card-open:focus-visible{outline:var(--at-focus-width) solid var(--at-focus);outline-offset:-3px}
.tl-card-text{margin:0;padding:6px 20px 20px;font:400 14.5px/1.55 var(--at-font-ui);color:var(--at-text-muted)}

/* The scene: drawn at 800 x 500, scaled to the width of its place. */
.tl-fit{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--at-bg)}
.tl-scene{position:absolute;left:0;top:0;width:800px;height:500px;overflow:hidden;transform-origin:0 0;transform:scale(var(--tl-k,1));background:var(--at-bg);color:var(--at-text);font:400 15px/1.4 var(--at-font-ui);transition:opacity .38s var(--at-ease)}
.tl-scene *{box-sizing:border-box}
.tl-scene p{margin:0}
.tl-scene.is-out{opacity:.12}
.tl-ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tl-ico .tl-solid{fill:currentColor;stroke:none}
.tl-lights{display:flex;gap:7px;margin:0 4px 16px}
.tl-lights i{width:11px;height:11px;border-radius:50%;background:var(--at-line)}
.tl-mark{width:8px;height:8px;flex:none;border-radius:50%;background:var(--at-text-muted)}
.tl-m-work{animation:tl-pulse 1.2s var(--at-ease) infinite}
.tl-m-needs{background:var(--at-accent)}
.tl-m-done{background:var(--at-success)}
.tl-m-idle{background:none;border:1.5px solid var(--at-line-strong)}
.tl-keys{position:absolute;left:50%;bottom:28px;display:flex;gap:8px;opacity:0;transform:translate(-50%,8px);transition:opacity .2s var(--at-ease),transform .2s var(--at-ease);pointer-events:none}
.tl-keys.is-on{opacity:1;transform:translate(-50%,0)}
.tl-keys kbd,.tl-act kbd{display:grid;place-items:center;min-width:46px;height:46px;padding:0 12px;border:1px solid var(--at-line-strong);border-bottom-width:3px;border-radius:9px;background:var(--at-surface);font:500 20px/1 var(--at-font-ui);color:var(--at-text);box-shadow:var(--at-shadow-menu)}

/* 1. Universal search. */
.tl-win{position:absolute;inset:0;display:grid;grid-template-columns:196px minmax(0,1fr)}
.tl-side{padding:14px 10px;background:var(--at-surface);border-right:1px solid var(--at-line)}
.tl-group{margin:12px 8px 6px;font-size:12.5px;color:var(--at-text-muted)}
.tl-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;font-size:14px}
.tl-row.is-on{background:var(--at-selected);color:var(--at-accent)}
.tl-body{display:grid;grid-template-rows:46px minmax(0,1fr);min-width:0}
.tl-head{display:flex;align-items:center;gap:6px;padding:0 20px;border-bottom:1px solid var(--at-line);background:var(--at-surface);font-size:14px;color:var(--at-text-muted)}
.tl-head b{font-weight:600;color:var(--at-text)}
.tl-term{padding:20px 24px;background:var(--at-sunken);font:400 13.5px/1.55 var(--at-font-mono)}
.tl-term.is-fresh{animation:tl-in .35s var(--at-ease)}
.tl-ln{margin:0 0 7px}
.tl-you{margin:0 -24px 12px;padding:7px 24px;background:var(--at-terminal-user-background);color:var(--at-terminal-user-foreground)}
.tl-do::before,.tl-say::before{content:'● '}
.tl-do::before{color:var(--at-success)}
.tl-out{padding-left:18px;color:var(--at-text-muted)}
.tl-work{color:var(--at-accent)}
.tl-work::before{content:'✻ '}
.tl-scrim{position:absolute;inset:0;background:var(--at-scrim);opacity:0;transition:opacity .25s var(--at-ease)}
.is-pal .tl-scrim{opacity:1}
.tl-pal{position:absolute;left:140px;top:52px;width:520px;border:1px solid var(--at-line-strong);border-radius:12px;background:var(--at-surface);box-shadow:var(--at-shadow-dialog);opacity:0;transform:translateY(-10px) scale(.98);transition:opacity .22s var(--at-ease),transform .22s var(--at-ease)}
.is-pal .tl-pal{opacity:1;transform:none}
.tl-input{display:flex;align-items:center;gap:10px;height:54px;padding:0 18px;border-bottom:1px solid var(--at-line);font-size:18px}
.tl-input .tl-ico{width:18px;height:18px;color:var(--at-text-muted)}
.tl-caret{width:2px;height:22px;margin-left:-8px;background:var(--at-accent);animation:tl-blink 1s steps(1) infinite}
.tl-ph{margin-left:-8px;font-size:15px;color:var(--at-text-muted);white-space:nowrap}
.tl-q:empty{display:none}
.tl-q:not(:empty)~.tl-ph{display:none}
.tl-hits{padding:6px 8px 10px;min-height:120px}
.tl-hits h5{margin:10px 10px 4px;font:500 12.5px/1 var(--at-font-ui);color:var(--at-text-muted)}
.tl-hit{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:7px;font-size:15px}
.tl-hit .tl-ico{color:var(--at-text-muted)}
.tl-hit em{margin-left:auto;font-style:normal;font-size:13px;color:var(--at-text-muted)}
.tl-hit.is-hot{background:var(--at-selected)}
.tl-hit.is-hot span,.tl-hit.is-hot .tl-ico{color:var(--at-accent)}

/* 2. A shortcut for every action. */
.tl-mini{position:absolute;left:110px;top:16px;width:580px;height:240px;display:flex;overflow:hidden;border:1px solid var(--at-line-strong);border-radius:10px;background:var(--at-bg)}
.tl-mside{width:132px;flex:none;padding:10px 8px;overflow:hidden;white-space:nowrap;background:var(--at-surface);border-right:1px solid var(--at-line);transition:width .35s var(--at-ease),padding .35s var(--at-ease)}
.is-noside .tl-mside{width:0;padding:10px 0;border-right:0}
.tl-mside .tl-lights{gap:5px;margin-bottom:12px}.tl-mside .tl-lights i{width:9px;height:9px}
.tl-mgroup{margin:4px 6px;font-size:11px;color:var(--at-text-muted)}
.tl-mrow{display:flex;align-items:center;gap:7px;padding:5px 6px;border-radius:6px;font-size:12px}
.tl-mrow.is-on{background:var(--at-selected);color:var(--at-accent)}
.tl-mrow .tl-mark{width:6px;height:6px}
.tl-mmain{flex:1;min-width:0;display:flex;flex-direction:column}
.tl-mtabs{height:30px;flex:none;display:flex;align-items:flex-end;gap:2px;padding:0 8px;background:var(--at-surface);border-bottom:1px solid var(--at-line)}
.tl-mtab{padding:6px 10px;font-size:11.5px;color:var(--at-text-muted);border-bottom:2px solid transparent}
.tl-mtab.is-on{color:var(--at-text);border-color:var(--at-accent)}
.tl-mpanes{flex:1;min-height:0;display:flex;background:var(--at-sunken)}
.tl-mpane{flex:1;min-width:0;padding:10px 12px;overflow:hidden;white-space:nowrap;font:400 11px/1.65 var(--at-font-mono);color:var(--at-text-muted)}
.tl-mpane+.tl-mpane{border-left:1px solid var(--at-line)}
.tl-mu{color:var(--at-text)}.tl-mw{color:var(--at-accent)}
.tl-mpanel{width:118px;flex:none;padding:10px;background:var(--at-surface);border-left:1px solid var(--at-line)}
.tl-mpanel i{display:block;height:46px;margin-bottom:8px;border:1px solid var(--at-line);border-radius:6px}
.is-new{animation:tl-in .3s var(--at-ease)}
.tl-maestro,.tl-mpal{position:absolute;left:50%;opacity:0;transform:translate(-50%,-6px) scale(.97);transition:opacity .2s var(--at-ease),transform .2s var(--at-ease);border:1px solid var(--at-line-strong);border-radius:10px;background:var(--at-surface);box-shadow:var(--at-shadow-dialog)}
.tl-maestro{top:54px;width:280px;padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center}
.tl-maestro .tl-ico{width:22px;height:22px;color:var(--at-accent)}
.tl-maestro b{font-size:14px;font-weight:600}
.tl-maestro p{grid-column:1/-1;font-size:12.5px;color:var(--at-text-muted)}
.tl-mpal{top:36px;width:300px;height:40px;padding:0 14px;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--at-text-muted)}
.is-maestro .tl-maestro,.is-mpal .tl-mpal{opacity:1;transform:translate(-50%,0)}
.tl-act{position:absolute;left:0;right:0;top:264px;height:40px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:17px;opacity:0}
.tl-act b{font-weight:600}
.tl-act kbd{min-width:0;height:32px;padding:0 10px;font-size:16px;border-bottom-width:2px;box-shadow:none}
.tl-act.is-on{opacity:1;animation:tl-in .3s var(--at-ease)}
.tl-kb{position:absolute;left:80px;right:80px;top:312px;display:flex;flex-direction:column;gap:5px}
.tl-kr{display:flex;gap:5px}
.tl-key{flex:10 1 0;min-width:0;height:30px;display:grid;place-items:center;border:1px solid var(--at-line);border-radius:6px;background:var(--at-surface);font:500 12px/1 var(--at-font-ui);font-style:normal;color:var(--at-text-muted);transition:background .12s,border-color .12s,color .12s,transform .12s}
.tl-key.is-used{border-color:var(--at-line-strong);color:var(--at-text)}
.tl-key.is-down{background:var(--at-accent);border-color:var(--at-accent);color:var(--at-text-on-accent);transform:translateY(2px)}
.tl-w13{flex-grow:13}.tl-w15{flex-grow:15}.tl-w18{flex-grow:18}.tl-w23{flex-grow:23}.tl-w49{flex-grow:49}

/* 3. Resource management. */
.tl-res{position:absolute;inset:0;padding:22px 26px;display:flex;flex-direction:column;gap:16px}
.tl-rhead{display:flex;align-items:baseline;gap:12px}
.tl-rhead b{font-size:18px;font-weight:600}
.tl-rhead span{font-size:13.5px;color:var(--at-text-muted)}
.tl-meters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tl-meter{display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:baseline;padding:12px 14px 10px;border:1px solid var(--at-line);border-radius:10px;background:var(--at-surface)}
.tl-meter span{font-size:13px;color:var(--at-text-muted)}
.tl-meter b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.tl-meter svg{grid-column:1/-1;width:100%;height:34px}
.tl-res polyline{fill:none;stroke:var(--at-text-muted);stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tl-meter.is-hot b{color:var(--at-accent)}
.tl-meter.is-hot polyline,.tl-proc.is-hot polyline{stroke:var(--at-accent)}
.tl-table{flex:1;min-height:0;border:1px solid var(--at-line);border-radius:10px;background:var(--at-surface);overflow:hidden}
.tl-th,.tl-proc{display:grid;grid-template-columns:1.6fr 1.1fr .6fr .8fr 92px;align-items:center;gap:10px;height:44px;padding:0 16px}
.tl-th{font-size:12.5px;color:var(--at-text-muted);border-bottom:1px solid var(--at-line)}
.tl-procs{position:relative}
.tl-proc{position:absolute;left:0;right:0;top:0;font-size:14px;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--at-line);background:var(--at-surface);transition:transform .45s var(--at-ease),background .3s var(--at-ease)}
.tl-ps{display:flex;align-items:center;gap:9px;white-space:nowrap}
.tl-pp{font:400 13px/1 var(--at-font-mono);color:var(--at-text-muted)}
.tl-proc svg{width:92px;height:20px}
.tl-proc.is-hot{background:var(--at-accent-soft)}
.tl-proc.is-hot .tl-pc{font-weight:600;color:var(--at-accent)}
.tl-proc.is-done .tl-pp{color:var(--at-success)}

/* 4. Build queue. */
.tl-qwrap{position:absolute;inset:0}
.tl-qhead{position:absolute;left:24px;right:24px;top:14px;height:44px;display:flex;align-items:center;justify-content:space-between}
.tl-qhead b{font-size:18px;font-weight:600}
.tl-qwidget{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center;padding:5px 12px;border:1px solid var(--at-line);border-radius:8px;background:var(--at-surface);font-size:12.5px;line-height:1.35}
.tl-qwidget span{font-weight:600}
.tl-qwidget em{grid-column:2;font-style:normal;color:var(--at-text-muted)}
.tl-qdot{grid-row:1/3;width:8px;height:8px;border-radius:50%;background:var(--at-accent)}
.tl-qh{position:absolute;top:92px;margin:0;font:500 12.5px/1 var(--at-font-ui);color:var(--at-text-muted)}
.tl-qh1{left:28px}.tl-qh2{left:270px}.tl-qh3{left:524px}
.tl-qs{position:absolute;left:24px;width:222px;height:58px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid var(--at-line);border-radius:9px;background:var(--at-surface);transition:border-color .3s var(--at-ease)}
.tl-qs[data-s="0"]{top:120px}.tl-qs[data-s="1"]{top:196px}.tl-qs[data-s="2"]{top:272px}.tl-qs[data-s="3"]{top:348px}
.tl-qn{display:flex;flex-direction:column;min-width:0}
.tl-qn b{font-size:14px;font-weight:500}
.tl-note{max-height:0;overflow:hidden;font-style:normal;font-size:11.5px;color:var(--at-success);transition:max-height .3s var(--at-ease)}
.is-told .tl-note{max-height:16px}
.tl-qs.is-ask{animation:tl-ask .9s var(--at-ease)}
.tl-slot{position:absolute;left:262px;width:230px;height:60px;border:1px dashed var(--at-line-strong);border-radius:10px;opacity:.55}
.tl-slot[data-k="0"]{top:120px}.tl-slot[data-k="1"]{top:196px}.tl-slot[data-k="2"]{top:272px}
.tl-worker{position:absolute;left:520px;width:256px;height:134px;padding:12px 14px;border:1px solid var(--at-line);border-radius:12px;background:var(--at-surface);font-size:12.5px;color:var(--at-text-muted)}
.tl-worker[data-w="0"]{top:120px}.tl-worker[data-w="1"]{top:272px}
.tl-job{position:absolute;left:0;top:0;width:222px;height:56px;padding:10px 12px 0;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:8px;align-items:center;border:1px solid var(--at-line-strong);border-radius:9px;background:var(--at-bg);box-shadow:var(--at-shadow-menu);opacity:0;transition:transform .55s var(--at-ease),opacity .35s var(--at-ease),border-color .3s var(--at-ease)}
.tl-job.is-shown{opacity:1}
.tl-job b{font-size:12px;font-weight:600;color:var(--at-accent)}
.tl-job span{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-share{display:none;padding:2px 7px;border-radius:999px;background:var(--at-accent-soft);color:var(--at-accent);font-style:normal;font-size:11px}
.tl-job.is-shared .tl-share{display:inline-block;animation:tl-in .3s var(--at-ease)}
.tl-ok{display:none;font-style:normal;color:var(--at-success)}
.tl-job.is-done{border-color:var(--at-success)}
.tl-job.is-done .tl-ok{display:inline}
.tl-job s{grid-column:1/-1;position:relative;height:4px;margin-top:7px;border-radius:2px;background:var(--at-line);overflow:hidden;text-decoration:none}
.tl-job u{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--at-accent);text-decoration:none}
.tl-job.tl-from u{width:30%}
.tl-job.is-running u{width:100%;transition:width var(--run,3s) linear}
.tl-job.is-done u{background:var(--at-success)}

@keyframes tl-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes tl-blink{50%{opacity:0}}
@keyframes tl-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes tl-ask{0%,100%{border-color:var(--at-line)}30%,60%{border-color:var(--at-accent)}}

/* The slideshow: the scene large on the left, its words on the right, arrows beside it, a counter and dots below. */
.tl-dialog{width:100vw;height:100svh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--at-text);overflow:hidden}
.tl-dialog[open]{display:grid;place-items:center}
.tl-dialog::backdrop{background:var(--at-scrim);backdrop-filter:blur(8px)}
.tl-modal:focus{outline:none}
.tl-modal{position:relative;width:min(1100px,calc(100vw - 180px));display:grid;grid-template-columns:minmax(0,1fr) 330px;overflow:hidden;border:1px solid var(--at-line-strong);border-radius:16px;background:var(--at-surface);box-shadow:var(--at-shadow-dialog)}
.tl-dview .tl-fit{border-right:1px solid var(--at-line)}
.tl-dside{position:relative;display:flex;flex-direction:column;min-width:0;padding:30px 28px 22px}
.scene .tl-dside h2{margin:0 52px 0 0;font:500 26px/1.2 var(--at-font-ui);letter-spacing:var(--at-track-tight)}
.tl-dtext{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--at-text-muted)}
.tl-dfoot{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--at-line)}
.tl-count{font:400 12.5px/1 var(--at-font-mono);color:var(--at-text-muted)}
.tl-dots{display:flex;align-items:center}
.tl-dot{display:grid;place-items:center;height:28px;padding:0 4px;border:0;background:none}
.tl-dot::before{content:'';width:6px;height:6px;border-radius:3px;background:var(--at-line-strong);transition:width .25s var(--at-ease),background .25s var(--at-ease)}
.tl-dot[aria-current]::before{width:22px;background:var(--at-text)}
.tl-close,.tl-nav{display:grid;place-items:center;padding:0;border:1px solid var(--at-line-strong);border-radius:50%;background:var(--at-surface);color:var(--at-text)}
.tl-close svg,.tl-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tl-close{position:absolute;top:18px;right:18px;width:40px;height:40px}
.tl-nav{position:absolute;top:50%;width:48px;height:48px;margin-top:-24px}
.tl-prev{left:max(16px,calc(50% - 550px - 72px))}
.tl-next{right:max(16px,calc(50% - 550px - 72px))}
.tl-close:hover,.tl-nav:hover{border-color:var(--at-text)}

@media(prefers-reduced-motion:reduce){
 .tl-scene,.tl-scene *,.tl-card,.tl-dot::before{animation:none!important;transition:none!important}
}
/* A phone: the cards one under the other; the slideshow takes the width, its arrows sit under it. */
@media(max-width:680px){
 .scene-tools{padding:88px 0 0}
 .tl-cards{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:32px}
 .tl-modal{width:calc(100vw - 24px);grid-template-columns:minmax(0,1fr);max-height:calc(100svh - 120px);overflow:auto}
 .tl-dview .tl-fit{border-right:0;border-bottom:1px solid var(--at-line)}
 .tl-dside{padding:20px 18px 14px}
 .scene .tl-dside h2{margin-right:44px;font-size:22px}
 .tl-dtext{font-size:15px;margin-bottom:18px}
 .tl-close{top:14px;right:14px;width:36px;height:36px}
 .tl-nav{top:auto;bottom:16px;margin-top:0;width:44px;height:44px}
 .tl-prev{left:calc(50% - 56px)}.tl-next{right:calc(50% - 56px)}
}