@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Noto+Serif+JP:wght@300;400;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap";:root{--color-surround: #ffffff;--color-paper: #ffffff;--color-ink: oklch(21% .005 86);--color-ink-soft: oklch(38% .005 86);--color-muted: oklch(57% .005 86);--color-rule: oklch(86% .006 86);--color-focus: #a7580c;--color-error: #b3452f;--color-success: #497d32;--font-display: "Noto Serif JP", "Hiragino Mincho ProN", serif;--font-body: "IBM Plex Sans", system-ui, sans-serif;--font-vietnamese: "Source Serif 4", Georgia, serif;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--size-touch: 44px;--radius-screen: .1875rem;--dur-state: .1s;--ease-out: cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}html,body{min-height:100%;overflow-x:clip}body{margin:0;background:var(--color-surround);color:var(--color-ink);font-family:var(--font-body)}button{font:inherit}#app{min-height:100vh;display:grid;place-items:center;padding:var(--space-2)}.preview{width:min(50rem,100%,calc((100dvh - var(--space-4) - var(--space-3) - var(--size-touch)) * .7403315))}.screen-button{display:block;width:100%;aspect-ratio:1072 / 1448;padding:0;overflow:hidden;border:0;border-radius:var(--radius-screen);background:var(--color-paper);color:var(--color-ink);cursor:pointer;touch-action:manipulation;transition:opacity var(--dur-state) var(--ease-out)}@media(hover:hover){.screen-button:hover{opacity:.98}}.screen-button:focus-visible{outline:.25rem solid var(--color-focus);outline-offset:.25rem}.screen-button:active{opacity:.96}.screen-button:disabled,.screen-button[aria-disabled=true]{cursor:not-allowed;opacity:.55}.screen-button[data-state=loading]{cursor:progress;opacity:.72}.screen-button[data-state=error]{outline:.25rem double var(--color-error)}.screen-button[data-state=success]{outline:.25rem solid var(--color-success)}.screen-image{display:block;width:100%;height:auto;aspect-ratio:1072 / 1448;object-fit:contain}.preview-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-3)}.preview-nav{min-height:var(--size-touch);padding:var(--space-2) var(--space-3);border:1px solid var(--color-ink-soft);border-radius:999px;background:transparent;color:var(--color-ink);cursor:pointer;white-space:nowrap;transition:background-color var(--dur-state) var(--ease-out),color var(--dur-state) var(--ease-out)}@media(hover:hover)and (pointer:fine){.preview-nav:hover{background:var(--color-ink);color:var(--color-paper)}}.preview-nav:focus-visible{outline:.25rem solid var(--color-focus);outline-offset:.25rem}.preview-nav:active{opacity:.8}.preview-nav:disabled,.preview-nav[aria-disabled=true]{cursor:not-allowed;opacity:.55}.preview-nav[data-state=loading]{cursor:progress;opacity:.72}.preview-nav[data-state=error]{outline:.25rem double var(--color-error)}.preview-nav[data-state=success]{outline:.25rem solid var(--color-success)}.status{max-width:32rem;padding:var(--space-8);border:1px solid var(--color-ink-soft);color:var(--color-ink);line-height:1.6}.status h1{margin:0 0 var(--space-3);font-family:var(--font-vietnamese);font-size:clamp(2rem,8vw,4rem);font-style:normal;overflow-wrap:anywhere}.status p{margin:0}@media(min-width:37.5rem){#app{padding:var(--space-8)}.preview{width:min(50rem,100%,calc((100dvh - var(--space-8) * 2 - var(--space-3) - var(--size-touch)) * .7403315))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}