/* Thin graphite hardware. Presentation labels stay outside the display. */
.ap-work-device{
  --frame-radius:39px;
  --frame-edge:#555b61;
  --frame-shadow:0 18px 35px #1018201a,0 3px 8px #10182012;
  box-sizing:border-box;
  margin-bottom:28px;
}
.ap-work-device.ap-work-device--phone,
.ap-work-device .ap-wds-duo-phone{
  padding:3px;
  border:.75px solid var(--frame-edge);
  border-radius:var(--frame-radius);
  background:#101214;
  box-shadow:var(--frame-shadow),inset 0 0 0 .5px #c3ccd34d;
}
.ap-work-device.ap-work-device--phone{width:min(100%,336px);aspect-ratio:9/18.9}
.ap-work-device--phone .ap-wds-phone-screen{height:100%;border-radius:calc(var(--frame-radius) - 4px);box-shadow:none}
.ap-work-device--phone:has(.ap-wds-native-capture){aspect-ratio:auto}
.ap-work-device--phone:has(.ap-wds-native-capture) .ap-wds-phone-screen{height:auto;aspect-ratio:1206/2622}
.ap-work-device.ap-work-device--foldable{
  width:min(100%,840px);aspect-ratio:1.48;padding:4px;
  border:.75px solid var(--frame-edge);border-radius:29px;
  background:#111315;box-shadow:var(--frame-shadow),inset 0 0 0 .5px #c3ccd34d;
}
.ap-work-device--foldable .ap-wds-panels{height:100%;display:grid;grid-template-columns:1fr 1fr;gap:2px;border-radius:24px}
.ap-work-device--foldable .ap-wds-panel--master{border-radius:24px 0 0 24px}
.ap-work-device--foldable .ap-wds-panel--detail{border-radius:0 24px 24px 0}
.ap-work-device--foldable .ap-wds-hinge{top:5px;bottom:5px;width:2px;border-radius:0;background:#131719;box-shadow:none}
.ap-work-device.ap-work-device--duo{width:min(100%,760px);padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.ap-wds-duo-grid{gap:clamp(20px,4vw,44px);align-items:flex-start}
.ap-work-device .ap-wds-duo-phone{width:min(46%,310px);aspect-ratio:9/18.9;container-type:inline-size}
.ap-work-device .ap-wds-duo-phone:has(.ap-wds-native-capture),
.ap-work-device .ap-wds-duo-phone:has(.ap-wds-jeff-demo){aspect-ratio:1206/2622}
.ap-wds-duo-phone>.ap-concept-screen{height:100%;border-radius:calc(var(--frame-radius) - 4px)}
.ap-wds-duo-phone>.ap-wds-native-capture,
.ap-wds-duo-phone>.ap-wds-jeff-demo{border-radius:calc(var(--frame-radius) - 4px)}
.ap-work-device .ap-wds-duo-phone>.ap-wds-jeff-demo{inset:3px!important}
.ap-work-device .ap-wds-outer-badge{
  position:absolute;top:calc(100% + 12px);bottom:auto;left:0;right:0;
  display:block;text-align:center;width:auto;padding:0;border:0;border-radius:0;
  background:none;box-shadow:none;color:var(--ap-muted,#73787d);
  font:500 9px/1.5 "Plex Mono",monospace;letter-spacing:.04em;text-transform:none;
  white-space:normal;pointer-events:none;
}
.ap-gallery-stage:has(>.ap-work-device){padding-bottom:46px}
.ap-showcase-device{padding-bottom:clamp(46px,5vw,64px)}
.ap-work-device--phone:has(.ap-wds-jeff-demo){container-type:inline-size}
.ap-work-device .ap-wds-jeff-demo{
  position:relative!important;inset:auto!important;height:100%;min-height:0;padding:0;
  background:#090b0d;color:#f2f5f6;font-family:"Inter Tight",Arial,sans-serif;
  --agent-muted:#9ba3ab;
}
.ap-work-device .ap-wds-duo-phone>.ap-wds-jeff-demo{position:absolute!important;inset:3px!important;height:auto}
.ap-work-device .ap-wds-jeff-demo>header{
  display:flex;align-items:center;justify-content:space-between;height:10%;min-height:27px;
  padding:4% 7% 0;font-size:clamp(8px,3.6cqw,12px);font-weight:650;
}
.ap-wds-agent-signals{display:flex;align-items:center;gap:4px}
.ap-wds-agent-signals svg{width:13px;height:12px}
.ap-wds-agent-island{position:absolute;top:2.2%;left:50%;transform:translateX(-50%);width:20%;height:2.5%;max-height:15px;background:#020304;border-radius:20px}
.ap-wds-agent-body{display:flex;flex-direction:column;flex:1;min-height:0;padding:5% 6% 3%}
.ap-wds-agent-toolbar{display:flex;align-items:center;justify-content:space-between;padding-bottom:8%}
.ap-wds-agent-toolbar>span{display:grid;place-items:center;width:clamp(26px,10cqw,34px);aspect-ratio:1;border:1px solid #303438;border-radius:50%;color:#e6ebef}
.ap-wds-agent-toolbar svg{width:46%;height:46%}
.ap-wds-agent-toolbar>div{display:flex;align-items:center;gap:7px;font-size:clamp(10px,4.4cqw,15px);font-weight:600}
.ap-wds-agent-toolbar>div i{width:6px;height:6px;background:#6ac8ad;border-radius:50%}
.ap-wds-agent-intro{padding:7% 0 8%}
.ap-wds-agent-intro>i{display:grid;place-items:center;width:30px;height:30px;margin-bottom:14px;border-radius:11px;background:#172a2a;color:#98dfce}
.ap-wds-agent-intro svg{width:18px;height:18px}
.ap-work-device .ap-wds-agent-intro h2{margin:0;color:#f2f5f6;font-size:clamp(19px,8.4cqw,27px);line-height:1.07;letter-spacing:-.045em;font-weight:600}
.ap-wds-agent-intro p{margin:9px 0 0;color:var(--agent-muted);font-size:clamp(10px,4cqw,13px);line-height:1.45}
.ap-wds-agent-prompts{display:grid;gap:7px;margin-bottom:12px}
.ap-wds-agent-prompts>div{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid #2c3336;border-radius:12px;background:#15191c}
.ap-wds-agent-prompts i{display:grid;place-items:center;flex:none;color:#bed8d4}
.ap-wds-agent-prompts svg{width:17px;height:17px}
.ap-wds-agent-prompts span{display:grid;gap:3px}
.ap-wds-agent-prompts b{font-size:clamp(10px,4.1cqw,13px);line-height:1.2;font-weight:550}
.ap-wds-agent-prompts small{color:var(--agent-muted);font-size:clamp(8px,3.3cqw,10px);line-height:1.3}
.ap-wds-agent-approval{display:flex;align-items:center;gap:6px;color:var(--agent-muted);font-size:clamp(8px,3.3cqw,10px);line-height:1.35}
.ap-wds-agent-approval svg{width:12px;height:12px;flex:none}
.ap-work-device .ap-wds-jeff-composer{margin-top:auto;padding-top:15px}
.ap-work-device .ap-wds-jeff-composer>div{display:flex;align-items:center;gap:8px;padding:10px 11px;border:1px solid #42494d;border-radius:23px;background:#1b2024;font-size:clamp(10px,4cqw,13px)}
.ap-wds-jeff-composer>div>b{flex:1;color:#afb7be;font-weight:450}
.ap-wds-agent-plus{font-size:18px;line-height:1;color:#d9e0e5}
.ap-wds-agent-send{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#edf3f3;color:#101819}
.ap-wds-agent-send svg{width:13px;height:13px;transform:rotate(-90deg)}
.ap-work-device .ap-wds-jeff-composer>small{display:block;margin:8px 0 0;color:#9ba3ab;font-size:clamp(7px,2.8cqw,9px);text-align:center;line-height:1.3}
.ap-work-device .ap-wds-home-indicator{width:32%;max-width:90px;height:3px;min-height:3px;margin:10px auto 8px;background:#edf1f3;border-radius:10px}
[data-theme="dark"] .ap-work-device{--frame-edge:#52585e;--frame-shadow:0 18px 35px #0005,0 3px 8px #0003}
[data-theme="dark"] .ap-work-device.ap-work-device--phone,
[data-theme="dark"] .ap-work-device.ap-work-device--foldable{box-shadow:var(--frame-shadow),inset 0 0 0 .5px #c3ccd333}
@container(max-width:260px){
  .ap-wds-agent-toolbar{padding-bottom:5%}
  .ap-wds-agent-intro{padding:3% 0 5%}
  .ap-wds-agent-intro>i{width:25px;height:25px;margin-bottom:9px}
  .ap-wds-agent-intro p{margin-top:7px}
  .ap-wds-agent-prompts{gap:5px;margin-bottom:7px}
  .ap-wds-agent-prompts>div{padding:7px 8px;gap:7px}
  .ap-work-device .ap-wds-jeff-composer{padding-top:10px}
  .ap-work-device .ap-wds-jeff-composer>div{padding:8px 9px}
  .ap-work-device .ap-wds-home-indicator{margin:8px auto 7px}
}
@media(max-width:680px){
  .ap-work-device{--frame-radius:36px}
  .ap-work-device.ap-work-device--phone{width:min(100%,310px)}
  .ap-work-device.ap-work-device--duo{max-width:310px;padding:0}
  .ap-wds-duo-grid{display:block}
  .ap-work-device .ap-wds-duo-phone{width:100%;padding:3px}
  .ap-wds-duo-phone--detail{display:none}
  .ap-case-page .ap-work-device.ap-work-device--foldable{width:min(100%,310px);max-width:310px;aspect-ratio:auto;padding:3px;border-radius:var(--frame-radius)}
  .ap-case-page .ap-work-device--foldable .ap-wds-panels{display:block;height:auto;border-radius:calc(var(--frame-radius) - 4px)}
  .ap-case-page .ap-work-device--foldable .ap-wds-panel--master{height:auto;aspect-ratio:9/18.9;border-radius:calc(var(--frame-radius) - 4px)}
  .ap-case-page .ap-work-device--foldable .ap-wds-panel--detail,
  .ap-case-page .ap-work-device--foldable .ap-wds-hinge{display:none}
  .ap-showcase-device{padding:23px 12px 42px}
  .ap-work-device .ap-wds-outer-badge{font-size:8px}
}
.ap-showcase-agent-team{background:transparent;padding:clamp(22px,4vw,56px);border-color:var(--ap-line);box-shadow:0 18px 46px #11182708}
.ap-skolr-character-stage{padding:18px 0 12px;color:var(--ap-ink);text-align:center}
.ap-skolr-character-kicker{font:500 9px/1.5 "Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ap-muted)}
.ap-skolr-character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,3vw,40px);margin:28px auto 38px;max-width:900px}
.ap-skolr-character-image{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;height:clamp(150px,20vw,260px)}
.ap-skolr-character-image:after{content:"";position:absolute;z-index:-1;bottom:9%;left:25%;width:50%;height:12%;background:radial-gradient(ellipse,#17243320,transparent 70%)}
.ap-skolr-character-image>img{display:block;width:130%;height:130%;max-width:none;object-fit:contain;animation:ap-skolr-character-float 6s ease-in-out infinite;animation-play-state:paused;filter:drop-shadow(0 10px 12px #1025350d)}
.ap-skolr-character:nth-child(2) img{animation-delay:-2s}.ap-skolr-character:nth-child(3) img{animation-delay:-4s}
[data-avatar-motion="running"] .ap-skolr-character-image>img{animation-play-state:running}
.ap-skolr-character h3{margin:6px 0 8px;font-size:clamp(15px,1.9vw,24px);font-weight:550;line-height:1.15;letter-spacing:-.03em;color:var(--ap-ink)}
.ap-skolr-character p{max-width:23ch;margin:0 auto;color:var(--ap-muted);font-size:clamp(10px,1vw,13px);line-height:1.55}
.ap-skolr-character-note{display:flex;align-items:center;justify-content:center;gap:8px;padding-top:24px;border-top:1px solid var(--ap-line);color:var(--ap-muted);font-size:clamp(10px,1vw,13px)}
.ap-skolr-character-note>span{width:6px;height:6px;border-radius:50%;background:#55a999}
@keyframes ap-skolr-character-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@media(max-width:680px){
  .ap-showcase-agent-team{padding:22px 16px}
  .ap-skolr-character-grid{gap:9px;margin:14px 0 25px}
  .ap-skolr-character-image{height:120px}
  .ap-skolr-character h3{font-size:15px;min-height:35px;margin:0 0 7px}
  .ap-skolr-character p{font-size:10px;line-height:1.4}
  .ap-skolr-character-kicker{font-size:8px}
  .ap-skolr-character-note{padding-top:18px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.ap-work-device *{animation:none!important;transition:none!important}.ap-skolr-character-image>img{animation:none}}
