@font-face{font-family:StoryForkDialogue;src:url('/assets/fonts/ShipporiAntiqueB1-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:StoryForkImpact;src:url('/assets/fonts/DelaGothicOne-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:StoryForkBrush;src:url('/assets/fonts/YujiBoku-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
.comic-artboard{position:relative;container-type:inline-size;isolation:isolate;background:#fff}
.comic-artboard>.comic-page{display:block;width:100%;height:auto}
.comic-letter{position:absolute;transform:translate(-50%,-50%) rotate(var(--letter-rotation,0deg));font-size:calc(var(--letter-size)*1cqw);font-family:StoryForkDialogue,'Hiragino Kaku Gothic ProN',sans-serif;font-weight:400;font-style:normal;line-height:1.4;text-align:center;color:#111;padding:0;z-index:1;border:0;background:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;writing-mode:horizontal-tb}
.letter-ink{position:relative;z-index:1;display:block;white-space:pre-wrap;overflow-wrap:anywhere;letter-spacing:.03em}
.comic-letter.is-vertical{width:auto!important;max-width:80%;max-height:85cqw}
.comic-letter.is-vertical .letter-ink{writing-mode:vertical-rl;text-orientation:upright;white-space:pre;overflow-wrap:normal}
.comic-letter.kind-sfx{font-family:StoryForkImpact,sans-serif;line-height:1.05}
.kind-sfx .letter-ink{white-space:pre;overflow-wrap:normal}
.letter-glyph{display:inline-block}
.style-impact .letter-ink{transform:skewX(-9deg);-webkit-text-stroke:.12cqw #fff;paint-order:stroke fill;text-shadow:.14cqw .18cqw 0 #111}
.style-impact .glyph-0{transform:scale(1.08,1.12) rotate(-4deg)}
.style-impact .glyph-1{transform:translateY(.09em) rotate(3deg)}
.style-impact .glyph-2{transform:scale(.9,1.1)}
.style-rush .letter-ink{font-family:StoryForkImpact,sans-serif;transform:skewX(-19deg) scaleX(.92);-webkit-text-stroke:.1cqw #fff;paint-order:stroke fill;text-shadow:-.17cqw .07cqw 0 #111}
.style-rush .glyph-0{transform:scaleY(1.12)}
.style-rush .glyph-2{transform:translateY(-.1em) scale(.92)}
.style-soft .letter-ink{font-family:StoryForkBrush,serif;letter-spacing:.02em;-webkit-text-stroke:.04cqw #fff;paint-order:stroke fill;text-shadow:none}
.style-soft .glyph-0{transform:rotate(-8deg) scale(1.06)}
.style-soft .glyph-1{transform:translateY(.09em) rotate(5deg)}
.style-soft .glyph-2{transform:translateY(-.06em) rotate(-3deg) scale(.95)}
.style-shout .letter-ink{font-family:StoryForkImpact,sans-serif;line-height:1.5;letter-spacing:.04em}
.style-whisper .letter-ink{font-size:.9em;letter-spacing:.1em}
.style-thought .letter-ink{line-height:1.65}
.style-narration .letter-ink{line-height:1.65;letter-spacing:.07em}
.comic-letter.surface-bubble{background:#fff;border:.12cqw solid #252525;border-radius:50%;padding:1.5cqw 1.8cqw}
.surface-bubble::after{content:'';position:absolute;width:1.6cqw;height:1.6cqw;bottom:-.5cqw;left:22%;background:inherit;border-left:.12cqw solid #252525;border-bottom:.12cqw solid #252525;transform:rotate(-35deg) skew(-15deg,-15deg);z-index:0}
.comic-letter.surface-box{background:#fff;border:.12cqw solid #252525;padding:1.2cqw}
.comic-letter.surface-burst,.comic-letter.surface-cloud{padding:2.4cqw 2.8cqw}
.letter-balloon{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:#fff;stroke:#252525;stroke-width:1.3;vector-effect:non-scaling-stroke}
.comic-letter.tone-paper{color:#fff}
.tone-paper.surface-plain .letter-ink{-webkit-text-stroke:.08cqw #171717;paint-order:stroke fill;text-shadow:.09cqw .09cqw .04cqw #171717}
.tone-paper.surface-plain.style-impact .letter-ink,.tone-paper.surface-plain.style-rush .letter-ink{-webkit-text-stroke:.12cqw #171717;text-shadow:.17cqw .18cqw 0 #171717}
.tone-paper.surface-bubble,.tone-paper.surface-box{background:#222}
.tone-paper .letter-balloon{fill:#222}
.comic-artboard.is-editable .comic-letter{cursor:grab;touch-action:none;outline-offset:5px}
.comic-artboard.is-editable .comic-letter:hover{outline:1px dashed #7186a9}
.comic-artboard.is-editable .comic-letter[aria-pressed=true]{outline:1px solid var(--blue)}
.comic-artboard.is-editable .comic-letter:active{cursor:grabbing}
.lettering-page{padding-block:28px 60px}.lettering-heading{display:flex;align-items:start;justify-content:space-between;gap:20px;margin:25px 0}.lettering-heading h1{font-size:36px;margin:12px 0}.lettering-heading h2{font-size:25px;margin:8px 0}.lettering-heading small{font-size:10px;letter-spacing:.15em;color:#697887}.lettering-heading p,.lettering-note{font-size:13px;line-height:1.8;color:var(--ink-soft)}.lettering-note{background:var(--surface-soft);padding:16px 20px;border-radius:8px}.lettering-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:28px;align-items:start;margin:22px 0}.lettering-canvas{min-width:0}.lettering-canvas>p{font-size:12px;color:var(--ink-soft);line-height:1.8;margin:14px 0}.lettering-canvas .comic-artboard{box-shadow:0 8px 32px #19212e15}.lettering-tools{position:sticky;top:24px;background:#fff;border:1px solid var(--line-strong);border-radius:8px;padding:20px;font-size:12px}.lettering-add{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.lettering-add button{padding:10px 12px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface-soft);color:var(--ink);font-size:12px;min-height:42px}.lettering-tools label,.lettering-page-select{display:grid;gap:8px;margin:14px 0;color:var(--ink-soft)}.lettering-tools select,.lettering-tools input,.lettering-tools textarea,.lettering-page-select select{width:100%;padding:10px;border:1px solid var(--line-strong);border-radius:5px;font:13px/1.5 inherit;background:var(--surface);min-width:0}.lettering-tools textarea{font-size:16px;font-family:inherit}.lettering-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lettering-tools [data-letter-remove]{padding:10px 0;min-height:44px;color:#89615a;background:none;font-size:12px}.lettering-empty,.lettering-tools [role=status]{font-size:12px;line-height:1.8;color:var(--ink-soft)}.lettering-footer{display:flex;justify-content:flex-end;align-items:center;gap:15px;flex-wrap:wrap;border-top:1px solid var(--line-strong);padding-top:23px}.lettering-footer>span{margin-right:auto;font-size:12px;color:var(--ink-soft)}.lettering-page-select{max-width:220px;font-size:12px}.lettering-dialog{width:min(1200px,96vw);max-height:94dvh;overscroll-behavior:contain;border:0;border-radius:8px;padding:24px;background:var(--paper);color:var(--ink)}.lettering-dialog::backdrop{background:var(--dialog-backdrop)}.lettering-dialog>.lettering-heading{margin:0 0 20px}.lettering-dialog .lettering-tools{top:0}.lettering-open-button{margin-top:12px;min-height:44px;font-size:12px}.lettering-transcript{white-space:pre-wrap}.lettering-page:focus-visible,.lettering-dialog :focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(max-width:720px){.lettering-layout{grid-template-columns:1fr;gap:16px}.lettering-tools{position:static}.lettering-heading h1{font-size:27px}.lettering-heading h2{font-size:22px}.lettering-dialog{padding:16px}.lettering-tools input,.lettering-tools select,.lettering-page-select select{font-size:16px}.lettering-page{padding-top:20px}.lettering-footer .btn{flex:1;font-size:12px;min-width:130px}.lettering-footer>span{flex-basis:100%}}
.lettering-scene{display:grid;gap:8px;font-size:12px;color:var(--ink-soft);margin-top:24px}.lettering-scene textarea{padding:12px;border:1px solid var(--line-strong);border-radius:7px;font:14px/1.8 inherit;width:100%;resize:vertical}.comic-draft-page .comic-artboard .comic-page{width:100%;max-height:none}@media(max-width:720px){.lettering-scene textarea{font-size:16px}}
@media(max-width:720px){.lettering-tools{grid-row:1;position:sticky;top:0;z-index:3;max-height:42dvh;overflow:auto;padding:15px;box-shadow:0 6px 24px #19212e10}.lettering-tools label{margin:10px 0}.lettering-add{margin-bottom:12px}.lettering-canvas{grid-row:2}.lettering-canvas>p{font-size:12px}}


.lettering-presets{border:0;padding:0;margin:20px 0}
.lettering-presets legend{font-size:12px;color:var(--ink-soft);margin-bottom:10px}
.lettering-presets>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lettering-presets button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:84px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);padding:12px 4px;color:var(--ink)}
.lettering-presets button[aria-pressed=true]{border-color:var(--blue);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--blue)}
.lettering-presets button>span{font:21px/1.5 StoryForkDialogue,sans-serif;letter-spacing:.04em}
.lettering-presets button>small{font:11px/1.5 inherit;color:var(--ink-soft)}
.lettering-presets .preset-impact>span,.lettering-presets .preset-shout>span{font-family:StoryForkImpact,sans-serif;transform:rotate(-5deg)}
.lettering-presets .preset-rush>span{font-family:StoryForkImpact,sans-serif;transform:skewX(-16deg)}
.lettering-presets .preset-soft>span{font-family:StoryForkBrush,serif;font-size:26px}
.lettering-presets .preset-whisper>span{font-size:18px;letter-spacing:.15em}
.lettering-adjustments{border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);margin:16px 0}
.lettering-adjustments>summary{padding:15px 0;cursor:pointer;font-size:12px;color:var(--ink-soft);min-height:44px}

.lettering-presets .preset-thought>span{font-size:17px;white-space:nowrap}
@media(max-width:720px){
  .lettering-tools label{gap:4px;margin:8px 0}
  .lettering-tools textarea[data-letter-field=text]{height:54px;min-height:54px;padding:8px}
  .lettering-presets{margin:12px 0}
  .lettering-presets>div{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 16px)/3);overflow-x:auto;padding:2px 0 5px}
  .lettering-presets button{min-height:70px;padding:8px 3px;gap:6px}
  .lettering-presets button>span{font-size:16px}
  .lettering-presets .preset-thought>span{font-size:12px}
  .lettering-presets .preset-soft>span{font-size:24px}
}
/* More expressions share the same installed fonts, with distinct weight and rhythm. */
.style-explosion .letter-ink{font-family:StoryForkImpact,sans-serif;letter-spacing:-.04em;-webkit-text-stroke:.14cqw #fff;paint-order:stroke fill;text-shadow:.16cqw .22cqw 0 #111}
.style-explosion .glyph-0{transform:rotate(-12deg) scale(1.18,1.25)}
.style-explosion .glyph-1{transform:translateY(.1em) rotate(9deg) scale(1.08)}
.style-explosion .glyph-2{transform:translateY(-.08em) rotate(-6deg) scale(1.15)}
.style-heavy .letter-ink{font-family:StoryForkImpact,sans-serif;letter-spacing:-.03em;transform:scaleY(1.12);-webkit-text-stroke:.1cqw #fff;paint-order:stroke fill;text-shadow:0 .14cqw 0 #111,0 .3cqw 0 #111}
.style-quiet .letter-ink{font-family:StoryForkBrush,serif;letter-spacing:.24em;font-size:.85em;line-height:1.6;opacity:.85}
.style-ominous .letter-ink{font-family:StoryForkImpact,sans-serif;letter-spacing:.12em;-webkit-text-stroke:.07cqw #fff;paint-order:stroke fill;text-shadow:.1cqw .16cqw 0 #111}
.style-ominous .glyph-0,.style-ominous .glyph-2{transform:scale(.9,1.3) rotate(-7deg)}
.style-ominous .glyph-1,.style-ominous .glyph-3{transform:translateY(.08em) scale(.9,1.15) rotate(5deg)}
.style-sparkle .letter-ink{font-family:StoryForkDialogue,sans-serif;letter-spacing:.15em;font-size:.94em;-webkit-text-stroke:.05cqw #fff;paint-order:stroke fill}
.style-sparkle .letter-ink::before,.style-sparkle .letter-ink::after{content:'✦';position:absolute;font-size:.65em;line-height:1;left:-.8em;top:-.35em}
.style-sparkle .letter-ink::after{left:auto;right:-.7em;top:auto;bottom:-.25em;font-size:.45em}
.style-pop .letter-ink{font-family:StoryForkDialogue,sans-serif;font-weight:900;letter-spacing:.08em;-webkit-text-stroke:.08cqw currentColor;paint-order:stroke fill}
.style-pop .glyph-0{transform:rotate(-6deg) scale(1.08)}
.style-pop .glyph-1{transform:translateY(-.12em) rotate(8deg)}
.style-pop .glyph-2{transform:rotate(-5deg) scale(.9)}
.style-surprise .letter-ink{font-family:StoryForkImpact,sans-serif;line-height:1.55;letter-spacing:.07em}
.style-tremble .letter-ink{font-family:StoryForkBrush,serif;letter-spacing:.12em;text-shadow:.035cqw 0 0 currentColor,-.035cqw .035cqw 0 currentColor}
.style-calm .letter-ink{font-family:StoryForkDialogue,sans-serif;letter-spacing:.15em;line-height:1.8}
.style-broadcast .letter-ink{font-family:'Hiragino Kaku Gothic ProN',sans-serif;font-weight:700;letter-spacing:.1em;line-height:1.6}
.style-memory .letter-ink{font-family:StoryForkBrush,serif;line-height:1.8;letter-spacing:.08em}
.style-note .letter-ink{font-family:'Hiragino Kaku Gothic ProN',sans-serif;font-size:.9em;letter-spacing:.15em;line-height:1.7}
.style-title .letter-ink{font-family:StoryForkImpact,sans-serif;letter-spacing:.05em;line-height:1.5}
.comic-letter.surface-flash,.comic-letter.surface-wavy{padding:2.5cqw 2.8cqw}
.comic-letter.surface-double{background:#fff;border:.4cqw double #252525;border-radius:1.2cqw;padding:1.4cqw 1.6cqw}
.tone-paper.surface-double{background:#222;border-color:#fff}
.tone-paper.surface-plain.style-explosion .letter-ink,.tone-paper.surface-plain.style-heavy .letter-ink{-webkit-text-stroke:.12cqw #171717;text-shadow:0 .15cqw 0 #171717,0 .3cqw 0 #171717}
.lettering-presets legend{width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px}
.lettering-presets .lettering-library-open{display:inline-block;min-height:32px;border:0;box-shadow:none;border-radius:0;padding:5px 0;background:none;font:11px/1.5 inherit;color:var(--blue);white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.lettering-palette{width:min(560px,calc(100vw - 32px));max-height:85dvh;padding:24px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);overscroll-behavior:contain}
.lettering-palette::backdrop{background:var(--dialog-backdrop);backdrop-filter:blur(3px)}
.lettering-palette-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lettering-palette-heading h2{font-size:23px;margin:8px 0}
.lettering-palette-heading small{font-size:10px;letter-spacing:.15em;color:var(--ink-soft)}
.lettering-palette-heading>.btn{font-size:11px;min-height:42px;padding:10px 12px}
.lettering-palette>p{font-size:12px;color:var(--ink-soft);line-height:1.8}
.lettering-palette .lettering-presets>div{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;padding:2px;gap:12px}
.lettering-palette .lettering-presets button{min-height:100px}
.lettering-palette:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.lettering-presets .preset-explosion>span{font-family:StoryForkImpact,sans-serif;transform:rotate(-10deg) scale(1.08);text-shadow:1px 2px 0 #fff,2px 3px 0 #111;letter-spacing:-.03em}
.lettering-presets .preset-heavy>span{font-family:StoryForkImpact,sans-serif;transform:scaleY(1.16);text-shadow:0 2px 0 #111}
.lettering-presets .preset-quiet>span{font-family:StoryForkBrush,serif;font-size:19px;letter-spacing:.2em;opacity:.75}
.lettering-presets .preset-ominous>span{font-family:StoryForkImpact,sans-serif;transform:skewY(-5deg) scaleY(1.2);letter-spacing:.12em}
.lettering-presets .preset-sparkle>span{letter-spacing:.15em;font-size:18px}
.lettering-presets .preset-sparkle>span::after{content:'✦';font-size:12px;vertical-align:super;margin-left:3px}
.lettering-presets .preset-pop>span{font-weight:900;transform:rotate(-5deg);letter-spacing:.1em}
.lettering-presets .preset-surprise>span{font-family:StoryForkImpact,sans-serif;transform:rotate(-4deg)}
.lettering-presets .preset-tremble>span,.lettering-presets .preset-memory>span{font-family:StoryForkBrush,serif;font-size:23px;letter-spacing:.08em}
.lettering-presets .preset-calm>span{font-size:18px;letter-spacing:.12em}
.lettering-presets .preset-broadcast>span,.lettering-presets .preset-note>span{font-family:'Hiragino Kaku Gothic ProN',sans-serif;font-size:17px;letter-spacing:.1em}
.lettering-presets .preset-title>span{font-family:StoryForkImpact,sans-serif;font-size:24px}
@media(max-width:720px){
  .lettering-palette{padding:18px}
  .lettering-palette .lettering-presets>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .lettering-palette .lettering-presets button{min-height:86px}
  .lettering-palette .lettering-presets button>span{font-size:21px}
  .lettering-palette .lettering-presets .preset-thought>span{font-size:15px}
  .lettering-presets .lettering-library-open{min-height:32px;padding:5px 0}
}

/* Reading stays scrollable; deliberate edit mode enables pointer dragging. */
.is-reader-lettering .comic-letter{touch-action:auto;cursor:pointer}
.is-reader-lettering .comic-letter:hover{outline:none}
.is-moving-letters .is-reader-lettering .comic-letter{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.is-moving-letters .is-reader-lettering .comic-letter:hover{outline:1px dashed var(--blue)}
.is-moving-letters .is-reader-lettering .comic-letter:active{cursor:grabbing}
.is-moving-letters .is-reader-lettering .comic-letter[aria-pressed=true]{outline:2px solid var(--blue);outline-offset:4px}
.reader-lettering-bar{position:sticky;top:64px;z-index:4;padding:8px 16px 10px;background:var(--paper-overlay);backdrop-filter:blur(10px);border-block:1px solid var(--line);font-size:11px;color:var(--ink-soft)}
.reader-lettering-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.reader-lettering-actions>div{display:flex;gap:6px;flex-wrap:wrap}
.reader-lettering-actions button{min-height:40px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);font:inherit;font-size:12px;line-height:1.4;color:var(--ink);cursor:pointer}
.reader-lettering-actions button:disabled{opacity:.4;cursor:default}
.reader-lettering-actions [data-reader-letter-mode][aria-pressed=true]{border-color:var(--blue);background:var(--accent-soft);color:var(--blue)}
.reader-lettering-actions .reader-letter-save{background:var(--blue);color:#fff;border-color:var(--blue)}
.reader-lettering-bar [role=status]{display:block;line-height:1.7;margin-top:5px}
.reader-lettering-bar [data-reader-letter-more]{display:inline-flex;min-height:32px;align-items:center;color:var(--blue)}
.reader-lettering-bar [hidden]{display:none!important}
@media(max-width:720px){.reader-lettering-bar{top:58px;padding:7px 14px 9px}.reader-lettering-actions{gap:6px}.reader-lettering-actions button{min-height:44px;font-size:12px;padding:8px 10px}}