.web-preview-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:#0d1119;color:#d8d7d2;font:12px/1.4 system-ui,sans-serif;border-bottom:1px solid #d9af5033;position:relative;z-index:10}.web-preview-nav a{color:#f5d98c;text-decoration:none;min-height:24px;display:flex;align-items:center}.web-preview-nav a:hover{text-decoration:underline}.web-preview-nav a:focus-visible{outline:2px solid #f5d98c;outline-offset:4px}.web-preview-nav span{text-align:right}.layout{height:calc(100dvh - 198px)}@media(max-width:640px){.web-preview-nav{padding:8px 12px;font-size:12px}.web-preview-nav span{max-width:140px}.layout{height:calc(100dvh - 164px)}}
/* Reserve space for the website navigation above the existing fixed-height studio. */
body:has(.editor)>main{height:calc(100dvh - 114px);min-height:0}
@media(max-width:1100px){body:has(.editor)>main{height:calc(100dvh - 104px);min-height:0}}
/* Keep progress visible on the card even when the background controls scroll away. */
.cutout-progress{position:absolute;z-index:5;left:12px;right:12px;bottom:18px;display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #d9af5080;border-radius:12px;background:#18131bf2;color:#fff3d6;box-shadow:0 6px 24px #0005;pointer-events:none;text-align:left;font:13px/1.4 system-ui,sans-serif}
.cutout-progress[hidden]{display:none}
.cutout-progress strong{display:block;font-size:14px;margin-bottom:3px}
.cutout-progress small{display:block;color:#e5d9c1;font-size:12px}
.cutout-spinner,#autoMask[aria-busy="true"]::before{content:"";display:inline-block;flex-shrink:0;width:20px;height:20px;box-sizing:border-box;border:3px solid #d9af5040;border-top-color:#f5d98c;border-radius:50%;animation:cutout-spin .8s linear infinite}
#autoMask[aria-busy="true"]{display:inline-flex;align-items:center;gap:9px;opacity:1}
#autoMask[aria-busy="true"]::before{width:16px;height:16px;border-width:2px;border-color:currentColor;border-right-color:transparent}
@keyframes cutout-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.cutout-spinner,#autoMask[aria-busy="true"]::before{animation:none}}
.preview .card-wrap:has(#storyboundProgress){position:relative}
.storybound-progress{position:absolute;z-index:20;bottom:12px;left:12px;right:12px;max-width:340px;margin-inline:auto;display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid #d9af5070;border-radius:12px;background:#121d2af5;color:#f5e7c8;box-shadow:0 6px 24px #0005;pointer-events:none;text-align:left;font:13px/1.4 system-ui,sans-serif}
.storybound-progress[hidden]{display:none}
.storybound-progress strong{display:block;font-size:14px;margin-bottom:3px}
.storybound-progress small{display:block;color:#c5d0de;font-size:12px}
.library-panel[aria-busy="true"] #libraryStatus::before{content:"";display:inline-block;vertical-align:middle;margin-right:8px;width:14px;height:14px;box-sizing:border-box;border:2px solid #d9af5040;border-top-color:#f5d98c;border-radius:50%;animation:cutout-spin .8s linear infinite}
@media(prefers-reduced-motion:reduce){.library-panel[aria-busy="true"] #libraryStatus::before{animation:none}}