@import url('../fonts/times-new-bastard/font.css');
@import url('../fonts/noto-serif-sc/index.css');

.project-viewer{position:fixed;inset:0;z-index:10000;width:100%;height:100dvh;background:#fff;color:#333431;font-family:'Times New Bastard','Noto Serif SC Variable',serif;isolation:isolate}
.project-viewer[hidden]{display:none}.project-viewer *{box-sizing:border-box}
.project-viewer-stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:#fff}
.project-viewer-phone .project-viewer-stage{padding:64px 36px 28px}
.project-viewer-composition{position:relative;display:flex;align-items:center;justify-content:center;column-gap:32px;min-width:0;max-width:100%}
.project-viewer-shell{position:relative;flex:none;overflow:hidden;border-radius:0;background:#111214;filter:drop-shadow(0 14px 22px #00000021)}
.project-viewer-fit{position:relative;overflow:hidden;border-radius:0;background:var(--phone-surface,#fff)}
.project-viewer-canvas .project-viewer-shell{background:transparent;filter:none}.project-viewer-canvas .project-viewer-fit{background:transparent}
.project-viewer-frame{position:absolute;display:block;border:0;outline:none;background:var(--phone-surface,#fff);transform-origin:top left}.project-viewer-frame:focus{outline:none}
/* Native Figma component proportions:440×62; transparent over the real app. */
.project-viewer-status{position:absolute;top:0;left:0;z-index:2;display:flex;align-items:center;justify-content:center;width:440px;height:62px;padding:2.333px 9px 0;color:var(--phone-status-ink,#000);background:transparent;transform-origin:top left;pointer-events:none;user-select:none}
.project-viewer-status[hidden]{display:none}
.project-viewer-status-time{display:flex;flex:1 0 0;align-items:center;justify-content:center;min-width:1px;height:13px;padding-right:6px}
.project-viewer-status-time span{font:590 17px/22px -apple-system,BlinkMacSystemFont,'SF Pro',sans-serif;font-variation-settings:'wdth' 100;white-space:nowrap}
.project-viewer-status-island{width:125px;height:37px;flex:none;background:transparent;border-radius:100px}
.project-viewer-status-levels{display:flex;flex:1 0 0;align-items:center;justify-content:center;min-width:1px;height:13px;padding-right:1px}
.project-viewer-status-levels img{display:block;max-width:none;flex:none}.project-viewer-status[data-light-ink=true] img{filter:invert(1)}
.project-viewer-return,.project-viewer-theme{position:absolute;top:16px;z-index:5;display:grid;place-items:center;min-width:42px;height:42px;padding:0;border:0;border-radius:4px;background:#f1f1ef;color:#494949;cursor:pointer;touch-action:manipulation;appearance:none}
.project-viewer-return{left:16px;font:20px/1 Pixel,monospace}.project-viewer-theme{right:16px;padding:0 13px;font:14px/1 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif}
.project-viewer-return:is(:hover,:focus-visible),.project-viewer-theme:is(:hover,:focus-visible){outline:none;background:#494949;color:#fff}.project-viewer-theme[aria-pressed=true]{background:#494949;color:#fff}
.project-viewer-return:active,.project-viewer-theme:active{background:#30312f;color:#fff}.project-viewer-theme:disabled{cursor:wait;opacity:.6}
.project-viewer-state-panel{display:flex;flex:none;flex-direction:column;width:clamp(112px,21vw,240px);min-width:0;overflow:hidden;background:#fff}
.project-viewer[data-state-placement=right] .project-viewer-state-panel{position:absolute;left:calc(100% + var(--viewer-state-gap));top:0}
.project-viewer-state-heading{display:flex;align-items:center;justify-content:space-between;flex:none;height:34px;margin:0;padding:0 10px;color:#797975;font:12px/1.4 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;letter-spacing:.04em}
.project-viewer-state-count{font-variant-numeric:tabular-nums;color:#a2a29c}
.project-viewer-states{height:var(--state-list-height);min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cececa transparent;padding-block:4px;scroll-behavior:auto}
.project-viewer-states button{display:flex;align-items:center;gap:13px;width:100%;min-height:48px;margin:0;padding:11px 10px;border:0;border-radius:4px;background:transparent;color:#9a9a95;text-align:left;font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif;cursor:pointer;touch-action:manipulation}
.project-viewer-state-number{flex:none;color:#b8b8b2;font:11px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif;font-variant-numeric:tabular-nums}
.project-viewer-states button[aria-selected=true]{background:#f1f1ee;color:#242421}.project-viewer-states button[aria-selected=true] .project-viewer-state-number{color:#777771}
.project-viewer-states button:is(:hover,:focus-visible){outline:none;background:#e9e9e6;color:#242421}.project-viewer-states button:is(:hover,:focus-visible) .project-viewer-state-number{color:#777771}
@media(max-width:720px){.project-viewer-phone .project-viewer-stage{padding:64px 16px 24px}.project-viewer-composition{column-gap:18px}.project-viewer-state-panel{width:clamp(108px,28vw,160px)}.project-viewer-states button{gap:8px;padding-inline:7px;font-size:12px}.project-viewer-state-heading{padding-inline:7px;font-size:11px}.project-viewer-return{left:12px;top:12px}.project-viewer-theme{right:12px;top:12px}}
@media(prefers-reduced-motion:reduce){.project-viewer-states{scroll-behavior:auto}}