@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap";:root{color:#201a14;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-synthesis:none;text-rendering:optimizelegibility;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Helvetica Neue,Arial,sans-serif;line-height:1.5}*{box-sizing:border-box}html{background:radial-gradient(circle at 0 0,#c8463cb3,#0000 30%),radial-gradient(circle at 100% 100%,#b4645a99,#0000 32%),linear-gradient(160deg,#4a2a24 0%,#3d1f1a 100%)}body{min-width:320px;margin:0}body,input,button{font-family:inherit}#root{min-height:100svh}.app-shell{--stage-gap:.75rem;--save-space:2.5rem;justify-content:center;align-items:center;min-height:100svh;padding:2rem;display:flex}.stage{gap:var(--stage-gap);width:min(100%, calc((100svh - 4rem - var(--stage-gap) - var(--save-space)) * 594 / 840));flex-direction:column;display:flex}.poster-frame{width:100%;max-height:calc(100svh - 4rem - var(--stage-gap) - var(--save-space));position:relative;container-type:inline-size}.poster{aspect-ratio:594/840;background:#fff;width:100%;position:relative;overflow:hidden;box-shadow:0 28px 80px #21111924;container-type:inline-size}.poster__character,.poster__translation,.poster__footer{margin:0;position:absolute}.poster__character{color:#090909;transform-origin:0 0;font-family:PingFang SC,Hiragino Sans GB,Noto Sans CJK SC,sans-serif;font-size:26cqw;font-weight:700;line-height:.84;top:4.1%;left:5.1%}.poster__translation{color:#867f7f;letter-spacing:-.03em;text-align:right;text-transform:uppercase;font-family:Helvetica Neue,Arial,sans-serif;font-size:3cqw;font-weight:700;line-height:1;top:3%;right:6%}.poster__translation-select{appearance:none;color:inherit;cursor:pointer;font:inherit;letter-spacing:inherit;line-height:inherit;text-align:inherit;text-transform:inherit;background:0 0;border:none;outline:none;margin:0;padding:0}.poster__translation-select:hover{color:red}.poster__art{background:#050505;position:absolute;inset:25.6% 5.2% 6.4% 7.1%;overflow:hidden}.poster__art-bg{z-index:0;filter:brightness(1.44)saturate(.22);pointer-events:none;background-position:50%;background-repeat:no-repeat;background-size:cover;animation:.4s poster__art-bg-fade;position:absolute;inset:0}@keyframes poster__art-bg-fade{0%{opacity:0}to{opacity:1}}.poster__art-credit{z-index:2;writing-mode:vertical-rl;text-orientation:mixed;color:#ffffff8c;letter-spacing:.02em;pointer-events:none;text-overflow:ellipsis;white-space:nowrap;max-height:100%;margin:0;padding:.6cqw .4cqw;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:1.4cqw;font-weight:400;line-height:1;position:absolute;top:0;bottom:0;right:0;overflow:hidden}.poster__canvas{cursor:crosshair;z-index:1;touch-action:none;width:100%;height:100%;display:block;position:relative}.poster__pinyin{color:#000;letter-spacing:.02em;cursor:pointer;text-underline-offset:.2em;background:0 0;border:none;margin:0;padding:0;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-size:2cqw;font-weight:400;text-decoration:underline;position:absolute;bottom:3%;left:7.1%}.poster__pinyin:hover{color:red}.poster__footer{color:#111;letter-spacing:.01em;font-family:Helvetica Neue,Arial,sans-serif;font-size:2cqw;font-weight:400;bottom:3%;right:6%}.poster__save{color:#fff;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;background:#090909d9;border:none;border-radius:999px;align-self:flex-end;padding:.4rem 1.1rem;font-family:Helvetica Neue,Arial,sans-serif;font-size:.7rem;font-weight:700;transition:background .15s,opacity .15s}.poster__save:hover{background:red}.poster__save:disabled{cursor:default;opacity:.5}