.project-viewer{display:block;min-width:0;width:100%;overflow:hidden;border:1px solid var(--color-border);border-radius:28px;background:var(--color-background);color:var(--color-foreground)}
.project-viewer__toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px}
.project-viewer__identity{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}
.project-viewer__title{font:500 14px/20px var(--font-body);overflow-wrap:anywhere}
.project-viewer__domain,.project-viewer__hint,.project-viewer__browser-bar{font:400 12px/18px var(--font-body);letter-spacing:.005em;color:var(--color-secondary);overflow-wrap:anywhere}
.project-viewer__actions{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-shrink:0}
.project-viewer__tabs{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--color-soft)}
.project-viewer:not([data-viewer-ready]) .project-viewer__tabs{visibility:hidden}
.project-viewer__tab{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--color-secondary);font:500 14px/20px var(--font-body);white-space:nowrap;cursor:pointer}
.project-viewer__tab[data-viewer-tab=desktop]{width:145px}
.project-viewer__tab[data-viewer-tab=mobile]{width:113px}
.project-viewer__tab[aria-selected=true]{background:var(--color-dark);color:var(--color-dark-text)}
.project-viewer__device-icon{position:relative;display:block;flex:none;width:20px;height:20px}
.project-viewer__device-icon>img{position:absolute;inset:0;display:block}
.project-viewer__icon-active{visibility:hidden}
.project-viewer__tab[aria-selected=true] .project-viewer__icon-active{visibility:visible}
.project-viewer__tab[aria-selected=true] .project-viewer__icon-muted{visibility:hidden}
.project-viewer__external{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:112px;color:inherit;font:500 14px/20px var(--font-body);white-space:nowrap}
.project-viewer__external>img,.project-viewer__hint>img{display:block;flex:none}
.project-viewer__stage{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;height:var(--viewer-height,736px);padding:24px;background:var(--color-soft)}
.project-viewer__panel{grid-area:1/1;min-width:0;max-width:100%}
.project-viewer__panel[hidden]{display:none}
.project-viewer__panel--desktop{width:1240px}
.project-viewer__panel--mobile{width:360px}
.project-viewer__browser{overflow:hidden;border:1px solid var(--color-border);border-radius:12px;background:var(--color-background)}
.project-viewer__browser-bar{display:flex;align-items:center;gap:12px;min-height:42px;padding:12px}
.project-viewer__browser-bar>span:last-child{min-width:0}
.project-viewer__dots{display:flex;align-items:center;gap:6px;flex:none}
.project-viewer__dots>i{width:8px;height:8px;border-radius:50%;background:var(--color-border)}
.project-viewer__phone{padding:8px;border-radius:28px;background:var(--color-dark);overflow:hidden}
.project-viewer__viewport{overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scroll-behavior:auto;scrollbar-width:thin;scrollbar-color:var(--color-secondary) transparent;background:var(--color-background);touch-action:pan-y}
.project-viewer__viewport--desktop{height:min(620px,calc(var(--viewer-height,736px) - 96px))}
.project-viewer__viewport--mobile{height:min(642px,calc(var(--viewer-height,736px) - 64px));border-radius:20px}
.project-viewer .project-viewer__viewport--mobile{scrollbar-width:none}
.project-viewer__viewport--mobile::-webkit-scrollbar{display:none;width:0;height:0}
.project-viewer .project-viewer__capture{display:block;width:100%;max-width:none;height:auto;min-height:0;object-fit:initial;border-radius:0;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.project-viewer__hint{display:flex;align-items:center;gap:8px;padding:16px}
.project-viewer__hint>p{min-width:0}
.project-viewer__hint-mobile{display:none}
.project-viewer :is(.project-viewer__tab,.project-viewer__external,.project-viewer__viewport):focus-visible{outline:2px solid var(--color-foreground);outline-offset:-4px}
.project-viewer:not([data-viewer-ready])[data-initial=desktop] .project-viewer__panel--mobile,.project-viewer:not([data-viewer-ready])[data-initial=auto] .project-viewer__panel--mobile,.project-viewer:not([data-viewer-ready])[data-initial=mobile] .project-viewer__panel--desktop{display:none}
@media(max-width:989px){
 .project-viewer__toolbar{flex-direction:column;align-items:stretch;gap:16px;padding:16px}
 .project-viewer__actions{flex-wrap:wrap;gap:8px 12px}
 .project-viewer__tabs{flex:none}
 .project-viewer__tab[data-viewer-tab=desktop]{width:121px}
 .project-viewer__tab[data-viewer-tab=mobile]{width:91px}
 .project-viewer__external{min-width:74px;font-size:12px;line-height:18px;font-weight:400;margin-left:auto}
 .project-viewer__stage{height:var(--viewer-mobile-height,620px);padding:16px}
 .project-viewer__panel--mobile{width:310px}
 .project-viewer__browser-bar{padding:8px;min-height:34px}
 .project-viewer__dots{gap:4px}
 .project-viewer__dots>i{width:6px;height:6px}
 .project-viewer__viewport--desktop{height:min(220px,calc(var(--viewer-mobile-height,620px) - 80px))}
 .project-viewer__viewport--mobile{height:min(566px,calc(var(--viewer-mobile-height,620px) - 54px))}
 .project-viewer__hint-desktop{display:none}
 .project-viewer__hint-mobile{display:inline}
 .project-viewer:not([data-viewer-ready])[data-initial=auto] .project-viewer__panel--desktop{display:none}
 .project-viewer:not([data-viewer-ready])[data-initial=auto] .project-viewer__panel--mobile{display:block}
}
@media(hover:hover) and (pointer:fine){.project-viewer__tab:not([aria-selected=true]):hover{color:var(--color-foreground)}.project-viewer__external:hover{opacity:.7}.project-viewer[data-viewer-ready] .project-viewer__viewport{cursor:grab}.project-viewer[data-viewer-ready] .project-viewer__viewport[data-viewer-dragging]{cursor:grabbing}}