@font-face{font-family:Oswald;src:url('/assets/oswald.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#eaf1f1;background:#07131b}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:radial-gradient(ellipse at 50% 43%,#133444 0,#0b1d28 45%,#050e15 100%)}
.preview{width:100%;height:100dvh;display:grid;grid-template-rows:64px minmax(0,1fr) 34px;visibility:hidden}
.preview.ready{visibility:visible}.preview-bar{display:flex;justify-content:center;align-items:center;gap:42px;padding:8px 20px;border-bottom:1px solid #c9e5ed12;background:#071720a8}
.preview-title{display:flex;flex-direction:column;text-decoration:none;min-height:44px;justify-content:center;line-height:1.2;gap:3px;font-family:Oswald,sans-serif}
.preview-title span{color:#f5ce78;font-size:12px;letter-spacing:2px}.preview-title strong{color:#dce9ec;font-size:16px;font-weight:500;letter-spacing:1px}
.orientations{display:flex;gap:4px;padding:3px;border:1px solid #2d4652;border-radius:11px;background:#0c202c}
.orientations button{min-height:44px;min-width:80px;border:1px solid transparent;border-radius:7px;background:transparent;color:#b4c9d1;font:500 14px system-ui;cursor:pointer}
.orientations button[aria-pressed=true]{color:#09202b;background:#f4cb74;border-color:#ffe2a0;box-shadow:0 2px 9px #0004}
button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.stage{min-width:0;min-height:0;display:flex;justify-content:center;align-items:center;padding:12px 22px}
.device{flex:none;box-sizing:content-box;padding:6px;border:1px solid #57707a;border-radius:23px;background:linear-gradient(145deg,#536570,#152733 40%,#2a414c);box-shadow:0 20px 50px #0007,0 0 0 2px #01090d;overflow:hidden}
.display{position:relative;width:390px;height:844px;overflow:hidden;border-radius:16px;background:#071923}
iframe{display:block;position:absolute;inset:0;border:0;transform-origin:0 0;width:390px;height:844px;background:#071923}
.preview-caption{display:flex;align-items:center;justify-content:center;gap:16px;color:#90a9b7;font-size:11px;letter-spacing:.2px}
.preview-caption span+span{border-left:1px solid #29434f;padding-left:16px}.fallback{position:fixed;inset:40% 10%;text-align:center;color:#f5ce78}
@media(max-height:600px){.preview{grid-template-rows:58px minmax(0,1fr) 24px}.stage{padding:8px 20px}.preview-bar{padding-block:4px}.preview-caption{font-size:10px}}
@media(prefers-reduced-motion:no-preference){.orientations button{transition:background .15s,color .15s}}