/* Shared controls, readable at touch sizes, with a distinct active state. */
.steel-studio .live-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding-bottom:4px}
.steel-studio .live-toolbar>span{grid-column:1/-1;font:400 14px/1.5 var(--reading);text-transform:none;letter-spacing:0}
.steel-studio .preview-formats{display:inline-flex;justify-self:start;border:1px solid #d4d9dd;border-radius:999px;padding:3px;gap:2px;background:#f5f6f7;max-width:100%}
.steel-studio .live-toolbar .preview-formats button{border:0;border-radius:999px;background:transparent;color:#55595e;font:500 13px/1.3 var(--reading);letter-spacing:0;text-transform:none;min-height:40px;padding:8px 13px;white-space:nowrap}
.steel-studio .live-toolbar .preview-formats button[aria-pressed=true]{background:#55595e;color:white}
.steel-studio .live-toolbar>[data-demo-toggle]{font:500 13px/1.3 var(--reading);padding:11px 16px;min-height:48px;white-space:nowrap;transition:background .25s,border-color .25s,color .25s}
.steel-studio .live-toolbar>[data-demo-toggle][aria-pressed=true]{background:#456b8c;border-color:#456b8c;color:#fff}
.steel-studio .live-toolbar button:focus-visible{outline:2px solid #456b8c;outline-offset:3px}
.steel-studio .live-project .desktop-device,.steel-studio .live-project .phone-device{transition:border-color .35s,box-shadow .35s}
.steel-studio .live-project.demo-active .desktop-device,.steel-studio .live-project.demo-active .phone-device{border-color:#456b8c;box-shadow:0 0 0 2px #456b8c55,0 20px 42px -22px #39434f40}
.steel-studio .live-project[data-preview-mode=mobile] .desktop-device{width:min(100%,300px);margin-inline:auto;padding:5px;border-radius:26px}
.steel-studio .live-project[data-preview-mode=mobile] .desktop-device .device-viewport{border-radius:20px}
.steel-studio .pli-live[data-preview-mode]:not([data-preview-mode=duo]) .device-pair{padding:0}
.steel-studio .pli-live[data-preview-mode]:not([data-preview-mode=duo]) .phone-device{display:none}
.steel-studio .pli-live[data-preview-mode=duo] .phone-device{display:block}
.steel-studio .pli-live[data-preview-mode=duo] .device-pair{padding:0 12% 44px 0}
.steel-studio .nav nav>a:not(.pill){position:relative}
.steel-studio .nav nav>a:not(.pill)::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;background:#55595e;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--motion-ease,cubic-bezier(.22,1,.36,1))}
.steel-studio .nav nav>a:not(.pill)[aria-current=location]::after,.steel-studio .nav nav>a:not(.pill):hover::after,.steel-studio .nav nav>a:not(.pill):focus-visible::after{transform:scaleX(1)}
@media(max-width:760px){
 .steel-studio .live-toolbar{gap:10px;top:72px;padding:10px 0}
 .steel-studio .live-toolbar .preview-formats button{font-size:12px;padding:8px 10px;min-height:40px}
 .steel-studio .pli-live .live-toolbar .preview-formats button{padding-inline:8px}
 .steel-studio .live-toolbar>[data-demo-toggle]{font-size:12px;padding-inline:12px;min-height:48px;white-space:normal;max-width:126px}
 .steel-studio .pli-live[data-preview-mode=duo] .device-pair{padding:0 13% 30px 0}
 .steel-studio .nav nav>a:not(.pill)::after{bottom:0}
}
@media(max-width:360px){.steel-studio .live-toolbar{grid-template-columns:1fr}.steel-studio .live-toolbar>[data-demo-toggle]{justify-self:end;max-width:none}.steel-studio .preview-formats{justify-self:start}}
@media(prefers-reduced-motion:reduce){.steel-studio .live-toolbar button,.steel-studio .live-project .desktop-device,.steel-studio .live-project .phone-device,.steel-studio .nav nav>a::after{transition:none}}

/* The hero phone is the assistant's shared visual origin on desktop. */
.steel-studio .phone-device.assistant-phone-away{visibility:hidden}
.hero-assistant-entry{position:absolute;bottom:10px;right:9px;left:auto;z-index:3;display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:32px;padding:3px;border:1px solid #a6adb5;border-radius:50%;background:#fff;color:#55595e;cursor:pointer;box-shadow:0 2px 8px #26344226}
.hero-assistant-entry::before{content:'';position:absolute;inset:-6px;border-radius:50%}
.hero-assistant-entry img{display:block;width:24px;height:24px;object-fit:cover;border-radius:50%;flex-shrink:0}
.hero-assistant-entry>span{display:none}
.hero-assistant-entry:hover{border-color:#456b8c}
.hero-assistant-entry:focus-visible{outline:2px solid #456b8c;outline-offset:3px}
.steel-studio .demo-active .hero-assistant-entry{display:none}
@media(max-width:1000px){.hero-assistant-entry{display:none}}