html,body.preview{height:auto;min-height:100%;overflow:auto;background:#0e0f13!important}
body.preview{color:#eeeaf4}
.showcase-nav{max-width:1200px;margin:auto;padding:24px;display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid #ffffff12;font-size:14px}
.showcase-nav a{color:#b6b4c1;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}.showcase-nav>a{color:#f0edf7;font-weight:700;letter-spacing:4px}.showcase-nav>div{display:flex;gap:24px}.showcase-nav a[aria-current]{color:#e5d2b1}.showcase-nav a:focus-visible{outline:2px solid #dfcca9;outline-offset:4px}
.phone-showcase{max-width:1200px;margin:auto;padding:40px 24px;min-height:calc(100svh -94px);display:grid;grid-template-columns:1fr 410px;gap:60px;align-items:center}
.preview .preview-label{display:block;position:static;max-width:510px;left:auto;top:auto}.preview .preview-label>span{font-size:12px;letter-spacing:2px;color:#d4bd99}.preview .preview-label h1{font-size:clamp(44px,5.2vw,66px);font-weight:600;letter-spacing:-2.6px;margin:24px 0;line-height:1.04}.preview .preview-label p{font-size:17px;line-height:1.7;color:#a7a5b4;max-width:43ch}.preview .preview-label small{display:block;font-size:14px;line-height:1.7;color:#92909f;margin-top:24px}.preview .preview-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.preview-actions button{font-size:14px;min-height:44px;padding:12px 16px;border-radius:10px;background:#202127;border:1px solid #373741;color:#e6e1ef}.preview-actions button:first-child{background:#dac7a7;border-color:#dac7a7;color:#242119}.preview-actions button:hover{filter:brightness(1.15)}
.preview-label .demo-caption{margin-top:16px;font-size:13px;color:#96939f;line-height:1.6}.preview-label .demo-version{margin-top:32px;font-size:12px;color:#716e7c;letter-spacing:.5px}
.phone-stage{position:relative;width:100%;height:var(--stage-height,714px);min-width:0;isolation:isolate}
.preview .phone{position:absolute;left:50%;top:50%;bottom:auto;right:auto;transform:translate(-50%,-50%) scale(var(--phone-scale));transform-origin:center center}
.camera-preview .showcase-nav,.camera-preview .phone-showcase{visibility:hidden}.camera-preview .camera-ui{visibility:visible;background:#151923}.browser-camera-help{position:absolute;top:82px;left:20px;right:20px;z-index:20;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;font-size:16px;line-height:1.6;color:#f1edf6}.browser-camera-help button{padding:12px 20px;border-radius:10px;min-height:44px;background:#e5d2b1;color:#242119;font-size:14px}
.browser-camera-help{pointer-events:auto}
@media(max-width:950px){.phone-showcase{grid-template-columns:1fr;gap:32px;max-width:650px}.preview .preview-label{max-width:none}.preview .preview-label h1{font-size:46px}.preview .preview-label p{max-width:48ch}.phone-stage{max-width:410px;margin:auto}.preview-label .demo-version{margin-top:18px}.showcase-nav{padding:12px 20px}}
@media(max-width:480px){.phone-showcase{padding:30px 16px 20px;gap:24px}.preview .preview-label h1{font-size:42px;letter-spacing:-1.8px}.preview .preview-label p{font-size:16px}.showcase-nav{gap:12px;padding:10px 16px}.showcase-nav>div{gap:16px;font-size:13px}.preview .preview-label small{font-size:13px}.preview .preview-actions{gap:8px}.preview-actions button{font-size:13px;padding:10px 12px}.preview .preview-label .demo-caption{font-size:13px}}
@media(prefers-reduced-motion:reduce){.phone{transition:none}}

.phone-download{margin-top:28px;padding:20px;border:1px solid #dac7a735;border-radius:14px;background:#17181d}
.phone-download h2{margin:0;color:#eeeaf4;font-size:19px;font-weight:600;letter-spacing:-.3px}
.preview .preview-label .phone-download p{margin:8px 0 16px;font-size:14px;line-height:1.6;color:#aaa7b5}
.phone-download-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 16px;max-width:100%;box-sizing:border-box;border:1px solid #dac7a7;border-radius:10px;background:#dac7a7;color:#242119;text-decoration:none;font-size:14px;font-weight:600;line-height:1.4;text-align:center}
.phone-download-button:hover{background:#e8d6b8;border-color:#e8d6b8}
.phone-download-button:focus-visible{outline:2px solid #f5e5c8;outline-offset:4px}
.phone-download-button>span{font-size:22px;line-height:1}
.phone-download-meta{display:block;margin-top:11px;font-size:12px;line-height:1.5;color:#aaa7b5}
@media(max-width:480px){.phone-download{padding:16px}.phone-download-button{width:100%;font-size:13px}}

.device-preview{min-width:0;width:100%}
.device-toolbar{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.device-switch{display:flex;gap:4px;padding:4px;border:1px solid #373741;background:#17181d;border-radius:14px}
.device-switch button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 20px;border-radius:10px;background:transparent;color:#aaa7b5;font-size:14px;cursor:pointer}
.device-switch button[aria-pressed=true]{background:#dac7a7;color:#242119;font-weight:600}
.device-switch button>span{border:1px solid currentColor;border-radius:5px;padding:2px 5px;font-size:9px;letter-spacing:.5px;text-transform:uppercase}
.device-switch button:focus-visible,.ipad-expand:focus-visible{outline:2px solid #dac7a7;outline-offset:3px}
.ipad-expand{display:inline-flex;align-items:center;min-height:44px;color:#dac7a7;font-size:13px;text-underline-offset:4px}
.device-caption{color:#92909f;font-size:13px;line-height:1.6;max-width:64ch;margin:16px auto 0;text-align:center}
.showing-ipad{max-width:1440px;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:40px}
.showing-ipad .preview-label h1{font-size:clamp(44px,4.3vw,60px)}
.showing-ipad .preview-label>p{font-size:16px}
.ipad-stage{width:100%;aspect-ratio:1024/760;position:relative;min-width:0}
.ipad-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;color-scheme:dark}
.ipad-loading{position:absolute;inset:0;display:grid;place-items:center;color:#aaa7b5;font-size:14px;z-index:1;pointer-events:none}
.device-preview [hidden]{display:none!important}
.preview-actions button:disabled{opacity:.45;cursor:wait}
@media(max-width:1100px){.phone-showcase.showing-ipad{grid-template-columns:1fr;max-width:1024px;gap:32px}.showing-ipad .preview-label{max-width:650px;margin:auto;width:100%}.showing-ipad .device-preview{grid-row:1}.showing-ipad .preview-label h1{font-size:46px}}
@media(max-width:480px){.device-toolbar{gap:8px}.device-switch button{padding:10px 16px}.device-caption{font-size:12px}.showing-ipad .preview-label h1{font-size:42px}.showing-ipad{gap:24px}.ipad-stage{margin-top:0}}