:root{color-scheme:dark;background:#151e19;color:#f6f4e6;font-family:system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr)}
.preview-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px 18px;padding:8px clamp(12px,3vw,40px);border-bottom:1px solid #e9efd544}
.preview-title{text-align:center}
.preview-title h1{font-size:16px;line-height:1.2;margin:0}
.preview-title p{color:#d2d9c8;font:10px ui-monospace,monospace;margin:4px 0 0}
.preview-bar a{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:max-content;max-width:100%;min-height:44px;padding:6px 9px;color:inherit;text-decoration:none;font-size:13px;border:1px solid #d2d9c86b;border-radius:4px}
.preview-bar a:hover{background:#d1ff64;color:#141a19}
.preview-bar a:focus-visible{outline:2px solid #d1ff64;outline-offset:3px}
.preview-bar svg{flex:none}
.external{justify-self:end}
main{min-height:0}
iframe{display:block;width:100%;height:100%;border:0;background:#f3f2eb}
@media(max-width:540px){.preview-bar{grid-template-columns:1fr auto;gap:4px 10px;padding:6px 12px}.preview-title{grid-column:1/-1;grid-row:2;text-align:left;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;padding-bottom:3px}.preview-title h1{font-size:13px}.preview-title p{margin:0;font-size:9px}.preview-bar a{font-size:12px}.external{grid-column:2;grid-row:1}}