@font-face{font-family:Fraunces;src:url('./assets/fonts/fraunces-variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{font-family:-apple-system,BlinkMacSystemFont,Arial,sans-serif;--screen-w:min(390px,calc(100vw - 42px),max(280px,calc((100svh - 94px)*390/764)));--screen-bg:#142b24;--screen-ink:#fcf8e9;--preview-scale:1;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#081e18;color:#fcf8e9}body{background:radial-gradient(ellipse at 50% 35%,#214d3a,transparent 72%),#081e18}
body[data-app-theme=night]{--screen-bg:#142b24;--screen-ink:#fcf8e9}body[data-app-page=game]{--screen-bg:#003f30;--screen-ink:#fffaf0}
.preview-stage{min-height:100svh;padding:12px 16px;display:grid;justify-items:center;align-content:center;gap:10px}
.preview-caption{width:calc((var(--screen-w) + 10px)*var(--preview-scale));display:flex;align-items:center;justify-content:space-between;gap:12px;line-height:20px}
.preview-wordmark{font-family:Fraunces,Georgia,serif;font-size:18px;font-weight:850;letter-spacing:-.04em;font-variation-settings:'opsz' 72,'SOFT' 0,'WONK' 0}.preview-wordmark b{color:#ed2c1a;font-family:Georgia,serif;font-size:18px}
.preview-caption>span:last-child{font-size:12px;color:#b0c5b9}
.device-fit{position:relative;width:calc((var(--screen-w) + 10px)*var(--preview-scale));height:calc((var(--screen-w)*764/390 + 10px)*var(--preview-scale))}
.device-frame{width:calc(var(--screen-w) + 10px);padding:4px;border-radius:27px;border:1px solid #c8d9be38;background:#355446;box-shadow:0 8px 30px #0005,0 1px 5px #0004;transform:scale(var(--preview-scale));transform-origin:top left}
.device-screen{width:100%;aspect-ratio:390/764;border-radius:22px;background:var(--screen-bg);color:var(--screen-ink);overflow:hidden;display:flex;flex-direction:column;isolation:isolate}
.status-bar{height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:var(--screen-bg);color:var(--screen-ink)}
.status-time{font-size:14px;font-weight:650;letter-spacing:-.035em}.status-icons{display:flex;align-items:center;gap:5px}.status-icons svg{width:18px;height:17px}.status-icons .battery{width:24px;height:15px}
iframe{display:block;width:100%;flex:1;min-height:0;border:0;background:var(--screen-bg);color-scheme:dark}
.home-area{height:10px;flex-shrink:0;background:var(--screen-bg);display:grid;place-items:center}.home-area>span{height:3px;width:99px;border-radius:10px;background:var(--screen-ink);opacity:.48}
.preview-footer{color:#aac1b2;font-size:11px;line-height:16px;letter-spacing:.03em}noscript{display:block;text-align:center;padding:10px}
@media(max-height:650px){.preview-caption{justify-content:center}.preview-caption>span:last-child{display:none}}
@media(pointer:coarse) and (max-width:600px), (pointer:coarse) and (max-width:1024px) and (max-height:600px){html,body{height:100%;background:var(--screen-bg)}.preview-stage{height:100dvh;min-height:0;display:block;padding:0}.preview-caption,.preview-footer,.status-bar,.home-area{display:none}.device-fit{width:100%;height:100%}.device-frame{width:100%;height:100%;padding:0;border:0;border-radius:0;box-shadow:none;transform:none;background:var(--screen-bg)}.device-screen{height:100%;aspect-ratio:auto;border-radius:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}iframe{height:100%}}
@media(forced-colors:active){.device-frame{border:2px solid CanvasText}.home-area>span{background:CanvasText}}

html[data-original-size=true]{--screen-w:min(390px,calc(100vw - 42px))}html[data-original-size=true] .preview-stage{align-content:start}