@font-face{font-family:Zen Kaku Gothic New;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/zen-kaku-gothic-new-latin-400-normal-BEdayliK.woff2)format("woff2"),url(/assets/zen-kaku-gothic-new-latin-400-normal-CPSmNJAU.woff)format("woff")}@font-face{font-family:Zen Kaku Gothic New;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/zen-kaku-gothic-new-latin-700-normal-Dgv0FPyh.woff2)format("woff2"),url(/assets/zen-kaku-gothic-new-latin-700-normal-zPVyND5l.woff)format("woff")}@font-face{font-family:Dela Gothic One;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/dela-gothic-one-latin-400-normal-AgyGD05y.woff2)format("woff2"),url(/assets/dela-gothic-one-latin-400-normal-qxqiosUh.woff)format("woff")}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--desk:#cfd3cc;--text:#1b1d1b;--muted:#555a55;--line:#a9aea7;--device:#2c2f31;--device-edge:#46494c;--paper:#dcdcd4;--paper-ink:#3a3a37;--hanko:#b4302a;--hanko-text:#fff8f4;--focus:#1f5fbf;--font-ui:"Zen Kaku Gothic New", system-ui, sans-serif;--font-display:"Dela Gothic One", "Zen Kaku Gothic New", sans-serif;--step--1:.875rem;--step-0:1rem;--step-1:1.25rem;--step-3:clamp(2rem, 1.4rem + 2.6vw, 3.1rem);--page-max:68rem;--gutter-start:max(1rem, env(safe-area-inset-left));--gutter-end:max(1rem, env(safe-area-inset-right))}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--desk:#1d211f;--text:#e4e6e1;--muted:#a3a8a2;--line:#3d433f;--device:#121414;--device-edge:#343839;--hanko:#c9433b;--focus:#7fb0ff}}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--desk);min-height:100dvh;color:var(--text);font-family:var(--font-ui);font-size:var(--step-0);flex-direction:column;margin:0;line-height:1.6;display:flex}.site-header,.layout,.site-footer{inline-size:100%;max-width:var(--page-max);padding-inline:var(--gutter-start) var(--gutter-end);margin-inline:auto}.layout{flex:1;grid-template-areas:"intro""device""status""steps";align-content:start;gap:1.5rem;padding-block:1rem 2.5rem;display:grid}.intro{grid-area:intro}.device-area{grid-area:device}.status{grid-area:status}.steps{grid-area:steps}@media (min-width:48rem){.layout{--device-max:18rem;grid-template-columns:minmax(10rem, min(var(--device-max), calc((100dvh - 6rem) * 69 / 111))) 1fr;grid-template-rows:auto auto 1fr;grid-template-areas:"device intro""device status""device steps";align-items:start;gap:1.75rem clamp(2rem,5vw,5rem);padding-block:clamp(1.5rem,5vh,3.5rem)}}@media (min-width:64rem){.layout{--device-max:22rem}}.site-header{padding-block:max(.75rem, env(safe-area-inset-top)) .75rem;justify-content:space-between;align-items:center;gap:1rem;display:flex}.brand{min-block-size:2.75rem;color:var(--text);font-family:var(--font-display);font-size:var(--step-1);align-items:center;gap:.55rem;line-height:1;text-decoration:none;display:inline-flex}.brand__logo{flex:none;block-size:2.25rem;inline-size:2.25rem}.brand__case{fill:var(--device);stroke:var(--device-edge);stroke-width:1px}.brand__dot{fill:var(--hanko)}.social{gap:.25rem;margin:0;padding:0;list-style:none;display:flex}.social a{block-size:2.75rem;inline-size:2.75rem;color:var(--muted);border-radius:.5rem;place-items:center;transition:color .12s,background-color .12s;display:grid}.social a:hover{color:var(--text);background:color-mix(in srgb, var(--text) 8%, transparent)}.social svg{block-size:1.4rem;inline-size:1.4rem}.brand:focus-visible,.social a:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:.5rem}.site-footer{padding-block:1.25rem max(1.25rem, env(safe-area-inset-bottom));color:var(--muted);font-size:var(--step--1);text-align:center}.site-footer p{border-block-start:1px solid var(--line);margin:0;padding-block-start:1.25rem}@media (min-width:48rem){.site-footer{text-align:start}}h1{font-family:var(--font-display);font-weight:400;font-size:var(--step-3);letter-spacing:-.01em;margin:0 0 .6rem;line-height:1.05}.lead{text-wrap:pretty;max-width:34rem;font-size:var(--step-1);margin:0;line-height:1.5}.muted{color:var(--muted);font-size:var(--step--1);margin:0}.device-area{justify-content:center;display:flex}.device{aspect-ratio:69/111;background:var(--device);inline-size:min(70%,15rem);box-shadow:inset 0 0 0 1px var(--device-edge), 0 1.5rem 3rem -1.5rem #00000073;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:1.6rem;display:block;position:relative}@media (min-width:30rem) and (max-width:47.99rem){.device{inline-size:min(55%,17rem)}}@media (min-width:48rem){.device{inline-size:100%;position:sticky;top:1.5rem}}body[data-state=working] .device{cursor:progress}.device__screen{background:var(--paper);border-radius:.25rem;display:block;position:absolute;inset:4.35% 6.5% 8.1%;overflow:hidden;box-shadow:inset 0 0 0 1px #00000059}.device__screen canvas{object-fit:contain;background:var(--paper);block-size:100%;inline-size:100%;display:block}.device__prompt{text-align:center;color:var(--paper-ink);border:2px dashed #0000;border-radius:.25rem;place-content:center;gap:.25rem;transition:border-color .12s;display:grid;position:absolute;inset:.75rem}.device__prompt[hidden]{display:none}.device__prompt strong{font-size:var(--step-1);padding-inline:1rem;line-height:1.3}.device__hint{font-size:var(--step--1)}.device.is-dragging .device__prompt,.device:hover .device__prompt{border-color:var(--paper-ink)}.device:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.device:has(+input:focus-visible){outline:3px solid var(--focus);outline-offset:4px}.status{max-width:34rem}.panel{justify-items:start;gap:.75rem;display:grid}.panel[hidden]{display:none}.file-name{overflow-wrap:anywhere;margin:0;font-weight:700}.progress{background:var(--line);border-radius:999px;block-size:.5rem;inline-size:100%;overflow:hidden}.progress__bar{background:var(--text);block-size:100%;inline-size:0%;transition:inline-size .2s linear;display:block}.result{overflow-wrap:anywhere;margin:0}.error{border-inline-start:3px solid var(--hanko);margin:0;padding-inline-start:.75rem}.button{min-block-size:2.75rem;font:inherit;cursor:pointer;border:0;border-radius:.5rem;justify-content:center;align-items:center;padding:.6rem 1.2rem;font-weight:700;text-decoration:none;display:inline-flex}.button--primary{background:var(--hanko);color:var(--hanko-text);font-size:var(--step-1);padding-inline:1.5rem}@media (max-width:47.99rem){.panel{justify-items:stretch}.button--quiet{justify-self:start}}.button--primary:hover{filter:brightness(1.08)}.button--quiet{color:var(--text);text-underline-offset:.2em;background:0 0;min-block-size:2.25rem;padding-inline:0;text-decoration:underline}.button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.steps{border-top:1px solid var(--line);counter-reset:paso;gap:.9rem;max-width:34rem;margin:0;padding:1.25rem 0 0;list-style:none;display:grid}.steps li{counter-increment:paso;color:var(--muted);font-size:var(--step--1);padding-inline-start:2rem;position:relative}.steps li:before{content:counter(paso);font-family:var(--font-display);font-size:var(--step-1);color:var(--text);line-height:1.2;position:absolute;inset-block-start:-.1rem;inset-inline-start:0}.steps strong{color:var(--text)}@media (prefers-reduced-motion:reduce){*{transition:none!important}}