:root{--paper:#fff8ec;--ink:#3a2e2a;--sky:#bfe0ec;--card:#fff;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{height:100%}body{color:var(--ink);background:var(--paper);justify-content:center;min-height:100dvh;margin:0;font-family:ui-rounded,system-ui,sans-serif;display:flex}#app{flex-direction:column;gap:12px;width:min(1100px,100%);min-height:100dvh;padding:16px 16px 20px;display:flex}.topbar{justify-content:space-between;align-items:center;gap:12px;display:flex}h1{margin:0;font-size:clamp(1.2rem,3.5vw,1.6rem)}.btn{color:#fff;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);white-space:nowrap;background:#e23b2e;border-radius:999px;align-items:center;gap:8px;padding:10px 22px;font-size:1rem;font-weight:800;text-decoration:none;transition:transform 80ms,box-shadow 80ms;display:inline-flex}.btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.btn svg{width:20px;height:20px}.frame-wrap{flex:1;min-height:0;display:flex}.frame{background:var(--sky);border:3px solid var(--ink);border-radius:22px;flex:1;min-height:0;padding:12px;display:flex}.viewer{background:var(--card);border:3px solid var(--ink);border-radius:14px;flex:1;width:100%;min-height:calc(100dvh - 130px);display:block}.fallback{text-align:center;padding:40px 20px}@media (width<=560px){#app{padding:12px 10px 14px}.frame{border-radius:18px;padding:8px}.viewer{border-radius:10px;min-height:calc(100dvh - 120px)}}