@import "https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@600&family=Zen+Maru+Gothic:wght@500;700&display=swap";:root{--font-ui:"Zen Maru Gothic", system-ui, sans-serif;--font-quote:"Shippori Mincho", serif;--text-xl:clamp(2.25rem, 1.6rem + 3vw, 3.25rem);--text-lg:1.25rem;--text-md:.9375rem;--bg:#f7f1e8;--surface:#fffdf9;--surface-muted:#f1e7da;--ink:#3b322c;--ink-muted:#7c6e63;--accent:#b5654a;--accent-strong:#9a5039;--on-accent:#fffaf4;--line:#5c402e24;--shadow:0 1px 2px #4c34240f, 0 18px 40px -12px #4c34242e;--radius:24px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#1e1a17;--surface:#2a2420;--surface-muted:#342d28;--ink:#f1e8de;--ink-muted:#b3a597;--accent:#e0896b;--accent-strong:#eb9b7e;--on-accent:#23140e;--line:#f1e8de1f;--shadow:0 1px 2px #0000004d, 0 18px 40px -12px #00000080;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}body{background:var(--bg);min-width:320px;color:var(--ink);font:500 var(--text-md)/1.8 var(--font-ui);font-synthesis:none;-webkit-font-smoothing:antialiased;margin:0}h1,h2,p,figure,blockquote{margin:0}button{font:inherit}a{color:inherit;text-underline-offset:3px}a:hover{color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.page{flex-direction:column;gap:32px;min-height:100vh;padding:56px 16px 32px;display:flex}.masthead{text-align:center}.label{color:var(--accent);letter-spacing:.16em;font-weight:700}h1{font-size:var(--text-xl);letter-spacing:.06em;margin:4px 0 8px;font-weight:700;line-height:1.3}.lead{color:var(--ink-muted);text-wrap:balance;word-break:auto-phrase}main{width:min(920px,100%);margin:0 auto}.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid;overflow:hidden}.photo{aspect-ratio:1;background:var(--surface-muted);position:relative}.photo img{object-fit:cover;width:100%;height:100%;animation:.5s fade-in;display:block}.photo.is-loading:after{content:"";background:linear-gradient(100deg, transparent 30%, #ffffff59 50%, transparent 70%) var(--surface-muted);opacity:.85;background-size:200% 100%;animation:1.2s linear infinite shimmer;position:absolute;inset:0}.placeholder{place-items:center;height:100%;display:grid}.illustration{fill:none;width:52%;stroke:var(--ink-muted);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;opacity:.7}.illustration .ground{stroke:var(--line);stroke-width:4px}.illustration .zzz{stroke:var(--accent);stroke-width:2.5px}.words{flex-direction:column;justify-content:center;gap:20px;padding:48px;display:flex}.intro h2{font-size:var(--text-lg);margin-bottom:8px;font-weight:700}.intro p{color:var(--ink-muted)}blockquote{animation:.5s fade-in}blockquote p{font:600 var(--text-lg)/2 var(--font-quote);letter-spacing:.04em;text-wrap:pretty;word-break:auto-phrase}blockquote footer{border-top:1px solid var(--line);flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:24px;padding-top:16px;display:flex}blockquote cite{font:600 var(--text-lg)/1.5 var(--font-quote);letter-spacing:.06em;font-style:normal}blockquote footer span{color:var(--ink-muted)}.actions{flex-direction:column;align-items:center;gap:12px;margin-top:32px;display:flex}.draw-button{background:var(--accent);min-width:240px;color:var(--on-accent);letter-spacing:.08em;cursor:pointer;box-shadow:0 10px 24px -10px var(--accent);border:0;border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:14px 32px;font-weight:700;transition:background .2s,transform .2s;display:inline-flex}.draw-button:hover{background:var(--accent-strong);transform:translateY(-2px)}.draw-button:active{transform:translateY(0)}.draw-button:disabled{cursor:progress;opacity:.75;transform:none}.paw{fill:currentColor;width:20px;height:20px}.draw-button:disabled .paw{animation:.8s ease-in-out infinite alternate bounce}.limit-note{color:var(--ink-muted);opacity:.8;letter-spacing:.04em}.error{color:var(--accent-strong);text-align:center}@keyframes fade-in{0%{opacity:0;transform:translateY(4px)}}@keyframes shimmer{0%{background-position:150% 0}to{background-position:-50% 0}}@keyframes bounce{to{transform:translateY(-3px)rotate(-10deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media (width<=720px){.page{gap:24px;padding-top:40px}.card{grid-template-columns:1fr}.photo{aspect-ratio:4/3}.words{padding:28px 24px 32px}.actions{margin-top:24px}}
