/* Graphic Novel Creator. Uses Play Lab's own colours and fonts (variables from playlab.html).
   The comic page itself is always white paper with thick dark outlines; sizes inside it are in cqw (percent of the page
   width) so a page looks the same in the editor, the preview, a thumbnail and on paper. */
#comic.on{width:min(1440px,calc(100vw - 32px));margin-left:calc(50% - min(720px,calc(50vw - 16px)))}
#comic .cn{padding:8px 0 30px}
.cn-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cn-back{padding:10px 18px;font-size:1rem}
.cn-title{font-size:clamp(1.6rem,3.4vw,2.4rem);margin:0}
#comic .cn-title:focus,#comic .cn-title:focus-visible{outline:none}
.cn-btn{border:0;border-radius:999px;padding:9px 15px;min-height:42px;font:800 .95rem Nunito,sans-serif;background:var(--card);color:var(--ink);cursor:pointer;box-shadow:0 4px 0 rgba(38,36,79,.14);white-space:nowrap}
.cn-btn:disabled{opacity:.42;cursor:default}
.cn-btn.go{background:var(--sun);color:#26244F}
.cn-btn.seg.on{background:var(--pink);color:#fff}
.cn-btn.icon{min-width:44px;font-size:1.15rem}
.cn-btn sup{font-size:.6em;margin-left:1px}
.cn-btn:active{transform:translateY(2px)}
.cn-iconbtn{border:0;background:var(--card);border-radius:14px;width:44px;height:44px;cursor:pointer;font-size:1.1rem;box-shadow:0 4px 0 rgba(38,36,79,.14)}
#comic button:focus-visible,#comic input:focus-visible,#comic textarea:focus-visible,#comic [tabindex]:focus-visible{outline:4px solid var(--sky);outline-offset:3px}
.cn-input{width:100%;border:3px solid #16111F;border-radius:14px;padding:10px 14px;font:800 1.05rem Nunito,sans-serif;color:#26244F;background:#fff}
.cn-textarea{resize:vertical;min-height:84px;line-height:1.3}
.cn-lab{display:block;font:800 1.15rem "Baloo 2",Nunito,sans-serif;margin:14px 0 8px}
.cn-lab.small{font-size:.95rem;margin:10px 0 6px}
.cn-count{font-size:.75rem;color:var(--mute);text-align:right;margin-top:2px}
.cn-empty{color:var(--mute);font-weight:700;text-align:center;padding:16px}
.cn-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.cn-row.end{justify-content:flex-end}

/* start screen: a bright board with the demo comic */
.cn-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;background:#CFF3EA;border:4px solid #16111F;border-radius:32px;padding:28px;position:relative;overflow:hidden}
.cn-hero::before,.cn-hero::after{content:"";position:absolute;border:4px solid #16111F;border-radius:50%}
.cn-hero::before{width:120px;height:120px;background:var(--sun);left:-40px;bottom:-50px}
.cn-hero::after{width:70px;height:70px;background:var(--pink);right:38%;top:-30px}
.cn-herotext{position:relative;z-index:1}
.cn-herotext h2{margin:0 0 8px;font-size:clamp(1.8rem,4vw,2.8rem);color:#26244F}
.cn-herotext p{color:#4a486f;font-size:1.1rem}
.cn-big{font-size:1.3rem;padding:16px 30px;margin-top:6px}
.cn-who{margin-top:12px;color:#4a486f}
.cn-demo{position:relative;z-index:1;max-width:340px;width:100%;justify-self:center;transform:rotate(2deg)}
.cn-demo .cn-page{box-shadow:0 8px 0 rgba(22,17,31,.25)}
.cn-h2{margin:28px 0 12px}
.cn-projects{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.cn-proj{position:relative}
.cn-projopen{width:100%;border:0;background:var(--card);border-radius:24px;padding:12px;box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;gap:10px;text-align:left;color:var(--ink);font:inherit}
.cn-projopen:hover{transform:translateY(-3px) rotate(-.5deg)}
.cn-thumb{display:block;background:#FFE9A8;border-radius:16px;padding:10px}
.cn-thumb .cn-page{max-width:150px;margin:0 auto}
.cn-projinfo b{display:block;font:800 1.15rem "Baloo 2",Nunito,sans-serif;overflow-wrap:anywhere}
.cn-projinfo small{color:var(--mute);font-weight:700}
.cn-projdel{position:absolute;top:18px;right:18px}

/* new project */
.cn-newcard{background:var(--card);border-radius:28px;padding:22px 26px 26px;box-shadow:var(--shadow);max-width:760px}
.cn-newcard .cn-lab:first-child{margin-top:0}
.cn-layouts{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.cn-lay{border:0;background:var(--bg);border-radius:16px;padding:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font:800 .85rem Nunito,sans-serif;color:var(--ink);box-shadow:0 4px 0 rgba(38,36,79,.14)}
.cn-lay svg{width:100%;max-width:70px;height:auto;display:block}
.cn-lay.on{background:var(--pink);color:#fff}
.cn-lay.mini{padding:4px;width:38px;border-radius:10px}
.cn-tip{margin:12px 0 16px}
@media (max-width:620px){.cn-layouts{grid-template-columns:repeat(3,1fr)}.cn-hero{grid-template-columns:1fr}}

/* editor */
.cn-editor{display:grid;gap:12px;grid-template-columns:260px minmax(0,1fr);grid-template-areas:"bar bar" "lib tools" "lib desk";align-items:start}
.cn-bar{grid-area:bar;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cn-titlein{flex:1 1 220px;max-width:420px;font:800 1.3rem "Baloo 2",Nunito,sans-serif;padding:6px 14px}
.cn-barbtns{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
.cn-save{font-size:.85rem;font-weight:800;color:var(--mute);min-width:96px;text-align:center}
.cn-save.error{color:#C0392B}
.cn-lib{grid-area:lib;background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:10px;position:sticky;top:8px;max-height:calc(100vh - 16px);overflow:auto}
.cn-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.cn-tab{flex:1 1 auto;border:0;border-radius:999px;padding:8px 10px;font:800 .85rem Nunito,sans-serif;background:var(--bg);color:var(--ink);cursor:pointer}
.cn-tab.on{background:var(--sky);color:#fff}
.cn-libh{font:800 .95rem "Baloo 2",Nunito,sans-serif;margin:10px 2px 6px}
.cn-libnote{font-size:.85rem;margin:4px 2px 6px}
.cn-libnote.warn{background:#FFF0B8;color:#5b4a00;border-radius:12px;padding:8px 10px}
.cn-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cn-item{border:0;background:var(--bg);border-radius:14px;padding:5px 5px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;font:800 .75rem Nunito,sans-serif;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 rgba(38,36,79,.14);text-align:center;line-height:1.1}
.cn-item:hover{transform:translateY(-2px)}
.cn-item.on{outline:4px solid var(--pink);outline-offset:1px}
.cn-itemart{display:block;width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#fff;border:2.5px solid #16111F;position:relative}
.cn-itemart>svg{width:100%;height:100%;display:block}
[data-v] .cn-itemart>svg[viewBox="0 0 100 100"],[data-v] .cn-itemart>svg[viewBox="0 0 48 48"]{padding:8%}
.cn-items.wide{grid-template-columns:1fr}
.cn-items.wide .cn-item{flex-direction:row;text-align:left;gap:10px;font-size:.95rem;padding:6px 10px 6px 6px}
.cn-items.wide .cn-item small{display:block;font-weight:600;color:var(--mute);font-size:.78rem}
.cn-bubart{width:64px;flex:0 0 64px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:#D5E8FF}
.cn-bubart svg{padding:4px}
.cn-capicon{background:#FFF0B8;border:2.5px solid #16111F;border-radius:4px;font:800 .7rem Nunito,sans-serif;padding:3px 6px;color:#16111F}
.cn-mini{position:absolute;inset:14% 18% 6%;display:block}
.cn-sfxlist{display:flex;flex-wrap:wrap;gap:6px}
.cn-sfxbtn{border:3px solid #16111F;border-radius:12px;background:#FFD84D;padding:4px 10px;font:800 .95rem "Baloo 2",Nunito,sans-serif;color:#16111F;cursor:pointer;transform:rotate(-2deg)}
.cn-sfxbtn:nth-child(3n+2){background:#FF8FB1;transform:rotate(2deg)}
.cn-sfxbtn:nth-child(3n){background:#9CCBFF}
.cn-sfxbtn.own{background:#fff;transform:none}
.cn-tools{grid-area:tools;background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:12px 14px}
.cn-toolhead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.cn-toolhead b{font:800 1.15rem "Baloo 2",Nunito,sans-serif}
.cn-toolsub{color:var(--mute);font-size:.85rem;font-weight:700}
.cn-toolnote{font-size:.9rem;margin:4px 0 0}
.cn-pagerow{border-top:2px dashed rgba(107,105,143,.35);padding-top:8px;margin-top:10px}
.cn-chip{display:inline-flex;align-items:center;gap:6px;background:#FFF0B8;color:#26244F;border-radius:999px;padding:6px 6px 6px 12px;font-weight:800;font-size:.9rem}
.cn-chip button{border:0;background:#fff;border-radius:50%;width:28px;height:28px;cursor:pointer;font-weight:800}
.cn-swatch{width:40px;height:40px;border-radius:50%;border:3px solid #16111F;background:var(--c);cursor:pointer}
.cn-swatch.on{outline:4px solid var(--pink);outline-offset:2px}
.cn-desk{grid-area:desk;min-width:0}
.cn-pagebar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
.cn-pagetabs{display:flex;flex-wrap:wrap;gap:6px}
.cn-ptab{border:0;border-radius:999px;padding:8px 14px;font:800 .9rem Nunito,sans-serif;background:var(--card);color:var(--ink);cursor:pointer;box-shadow:0 3px 0 rgba(38,36,79,.14)}
.cn-ptab.on{background:#26244F;color:#fff}
.cn-ptab.add{background:var(--mint);color:#26244F}
.cn-laypick{display:flex;gap:6px;flex-wrap:wrap}
.cn-board{background:#FFE9A8;border:4px solid #16111F;border-radius:28px;padding:18px}
.cn-editpage{width:min(100%,calc((100vh - 210px) * .75));min-width:280px;margin:0 auto}
/* desktop and landscape tablet: library | page | tools */
@media (min-width:1000px){
  .cn-editor{grid-template-columns:220px minmax(0,1fr) 260px;grid-template-areas:"bar bar bar" "lib desk tools"}
  .cn-tools{position:sticky;top:8px;max-height:calc(100vh - 16px);overflow:auto}
  .cn-editpage{width:min(100%,calc((100vh - 170px) * .75))}
  .cn-board{padding:14px}
}
@media (min-width:1280px){.cn-editor{grid-template-columns:250px minmax(0,1fr) 300px}.cn-board{padding:18px}}
/* portrait tablet and phone: library strip on top, the page, then the tools stuck to the bottom of the screen */
@media (max-width:999px){
  .cn-editor{grid-template-columns:minmax(0,1fr);grid-template-areas:"bar" "lib" "desk" "tools"}
  .cn-lib{position:static;max-height:none}
  .cn-items,.cn-sfxlist{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x proximity}
  .cn-items>.cn-item{flex:0 0 84px;scroll-snap-align:start}
  .cn-items.wide>.cn-item{flex:0 0 220px}
  .cn-sfxbtn{flex:0 0 auto}
  .cn-libh{margin-top:4px}
  .cn-tools{position:sticky;bottom:8px;z-index:20;max-height:42vh;overflow:auto;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;border:3px solid #16111F}
  .cn-tools>*{margin:0}
  .cn-toolhead,.cn-tools>.cn-lab,.cn-tools>.cn-input,.cn-tools>.cn-count,.cn-toolnote{flex:1 0 100%}
  .cn-tools .cn-lab.small{margin:0}
  .cn-tools .cn-textarea{min-height:56px}
  .cn-tools .cn-count{display:none}
  .cn-pagerow{border:0;padding:0}
  .cn-board{padding:10px;border-radius:22px}
  .cn-editpage{width:min(100%,calc((100vh - 120px) * .75))}
}

/* the comic page */
.cn-page{position:relative;aspect-ratio:3/4;background:#fff;container-type:inline-size;border-radius:1.6cqw;user-select:none;-webkit-user-select:none}
.cn-panel{position:absolute;overflow:hidden;border:.6cqw solid #16111F;border-radius:1.1cqw;background:#fff}
.cn-bgart{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.cn-el{position:absolute;transform:translate(-50%,-50%);touch-action:none}
.cn-fig{aspect-ratio:1/1}
.cn-art,.cn-art>svg,.cn-fx{position:absolute;inset:0;width:100%;height:100%;display:block}
.cn-art.flip{transform:scaleX(-1)}
.cn-fx{overflow:visible;pointer-events:none}
.cn-txt{--fsz:2.9cqw;font:800 calc(var(--fsz) * var(--fit,1))/1.22 Nunito,system-ui,sans-serif;color:#16111F;text-align:center;box-sizing:border-box}
.cn-txt.fs-S{--fsz:2.3cqw}.cn-txt.fs-L{--fsz:3.7cqw}
.cn-words{position:relative;z-index:1;white-space:pre-wrap;overflow-wrap:anywhere;min-height:1.22em}
.cn-ph{color:#9A98B8;font-style:italic}
.cn-bub,.cn-cap{transform:translate(-50%,0)}
.cn-bub{background:#fff;border:.14em solid #16111F;border-radius:1.3em;padding:.5em .8em}
.cn-bub.k-whisper{border-style:dashed}
.cn-bub.k-thought,.cn-bub.k-shout{background:transparent;border-color:transparent}
.cn-bub.k-thought{padding:.9em 1.1em}
.cn-bub.k-shout{padding:1.2em 1.4em}
.cn-shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cn-shape path{fill:#fff;stroke:#16111F;stroke-width:.14em;stroke-linejoin:round}
.cn-tail{position:absolute;width:1.3em;height:1.13em;top:calc(100% - .14em);left:16%;overflow:visible;z-index:1}
.cn-tail path,.cn-tail circle{fill:#fff;stroke:#16111F;stroke-width:3;stroke-linejoin:round}
.cn-tailcover{fill:#fff}
.t-br .cn-tail{left:auto;right:16%;transform:scaleX(-1)}
.t-tl .cn-tail{top:auto;bottom:calc(100% - .14em);transform:scaleY(-1)}
.t-tr .cn-tail{top:auto;bottom:calc(100% - .14em);left:auto;right:16%;transform:scale(-1,-1)}
.k-whisper .cn-tail path{stroke-dasharray:4 3}
.k-thought .cn-tail{top:calc(100% - .35em)}
.k-thought.t-tl .cn-tail,.k-thought.t-tr .cn-tail{top:auto;bottom:calc(100% - .35em)}
.k-shout .cn-tailcover{display:none}
.k-shout .cn-tail{top:calc(100% - .9em)}
.k-shout.t-tl .cn-tail,.k-shout.t-tr .cn-tail{top:auto;bottom:calc(100% - .9em)}
.cn-cap{background:var(--c,#FFF0B8);border:.14em solid #16111F;border-radius:.35em;padding:.4em .7em;text-align:left}
.cn-sfx{--fsz:8.5cqw;font-family:"Baloo 2",Nunito,sans-serif;line-height:1;color:var(--c,#FFD84D);-webkit-text-stroke:.12em #16111F;paint-order:stroke fill;white-space:nowrap;letter-spacing:.02em;transform:translate(-50%,-50%) rotate(var(--rot,-8deg));padding:.05em .1em}
.cn-sfx.fs-S{--fsz:6cqw}.cn-sfx.fs-L{--fsz:11cqw}
.cn-sfx .cn-words{min-height:0;white-space:pre}
.cn-sfx .cn-ph{color:#fff;font-style:normal;opacity:.7}

/* editing marks (only in the editor) */
.cn-editpage .cn-panel{cursor:pointer;touch-action:manipulation}
.cn-editpage .cn-panel:focus{outline:none}
.cn-editpage .cn-panel.sel{outline:.7cqw solid var(--pink);outline-offset:.35cqw}
.cn-editpage .cn-panel:focus-visible{outline:.7cqw solid var(--sky);outline-offset:.35cqw}
.cn-editpage .cn-panel.dragging{opacity:.45}
.cn-editpage .cn-panel.drop{outline:.8cqw dashed var(--mint);outline-offset:.35cqw}
.cn-editpage .cn-el{cursor:grab}
.cn-editpage .cn-el:focus{outline:none}
.cn-editpage .cn-el.sel{outline:3px dashed var(--sky);outline-offset:3px}
.cn-editpage .cn-el:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.cn-handle{display:none;position:absolute;right:-6px;bottom:-6px;width:28px;height:28px;border-radius:50%;background:#fff;border:4px solid var(--sky);cursor:nwse-resize;touch-action:none;z-index:3}
.cn-txt .cn-handle{bottom:auto;top:50%;margin-top:-14px;cursor:ew-resize}
.cn-el.sel>.cn-handle{display:block}
.cn-num{position:absolute;left:.8cqw;top:.8cqw;z-index:5;background:#16111F;color:#fff;border-radius:999px;font:800 max(11px,2cqw)/1 Nunito,sans-serif;padding:.5cqw 1.1cqw;pointer-events:none}
.cn-grip{display:none;position:absolute;right:.8cqw;top:.8cqw;z-index:6;width:max(32px,4.4cqw);height:max(32px,4.4cqw);align-items:center;justify-content:center;background:#fff;border:3px solid #16111F;border-radius:10px;font-size:max(16px,2.4cqw);color:#16111F;cursor:grab;touch-action:none}
.cn-panel.sel .cn-grip{display:flex}
.cn-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:12%;color:#6B698F;font:800 max(11px,2.3cqw)/1.25 Nunito,sans-serif;pointer-events:none}
.cn-slot{position:absolute;border:.5cqw dashed #9A98B8;border-radius:1.1cqw;background:rgba(255,255,255,.5);color:#6B698F;font:800 max(12px,2.6cqw) Nunito,sans-serif;cursor:pointer}
.cn-slot:hover{border-color:var(--pink);color:var(--pink)}

/* preview */
.cn-preview{position:fixed;inset:0;z-index:1000;background:var(--bg);overflow:auto;padding:0 16px 40px}
.cn-pvbar{position:sticky;top:0;z-index:2;display:flex;gap:10px;align-items:center;padding:12px 0;background:var(--bg);max-width:760px;margin:0 auto;font:800 1.2rem "Baloo 2",Nunito,sans-serif}
.cn-pvpages{max-width:760px;margin:0 auto}
.cn-pvpage{position:relative;margin:0 0 28px}
.cn-pvpage .cn-page{box-shadow:var(--shadow)}
.cn-pvnum{position:absolute;bottom:-22px;left:0;right:0;text-align:center;color:var(--mute);font-weight:800;font-size:.85rem}
.cn-cover{text-align:center;padding:10px 0 16px}
.cn-cover h2{margin:0;font-size:clamp(2rem,5vw,3rem)}
.cn-cover p{margin:4px 0 0;font-size:1.1rem}

/* confirm box */
.cn-modal{position:fixed;inset:0;z-index:1100;background:rgba(22,17,31,.5);display:flex;align-items:center;justify-content:center;padding:16px}
.cn-dialog{background:var(--card);border-radius:28px;padding:24px;max-width:440px;width:100%;border:4px solid #16111F}
.cn-dialog h2{margin:0 0 8px;font-size:1.6rem;overflow-wrap:anywhere}

/* start screen: the two "made for you" ways in */
.cn-makers{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:16px}
.cn-maker{border-radius:28px;padding:20px 22px;border:4px solid #16111F;color:#26244F}
.cn-maker h3{font:800 1.5rem "Baloo 2",Nunito,sans-serif;margin:0 0 4px}
.cn-maker p{color:#4a486f;margin:0}
.cn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* choosing options (generator) */
.cn-chips{display:flex;flex-wrap:wrap;gap:8px}
.cn-chip2{border:3px solid #16111F;border-radius:999px;padding:8px 16px;font:800 1rem Nunito,sans-serif;background:var(--card);color:var(--ink);cursor:pointer;min-height:44px}
.cn-chip2.on{background:var(--pink);color:#fff}
.cn-modes{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.cn-mode{border:3px solid #16111F;border-radius:20px;padding:12px 14px;background:var(--card);color:var(--ink);cursor:pointer;text-align:left;font:inherit;display:flex;flex-direction:column;gap:2px}
.cn-mode b{font:800 1.1rem "Baloo 2",Nunito,sans-serif}
.cn-mode small{color:var(--mute);font-weight:700;font-size:.85rem}
.cn-mode.on{background:#FFF0B8;color:#26244F;outline:4px solid var(--pink);outline-offset:2px}
.cn-mode.on small{color:#4a486f}
.cn-castpick{max-width:520px;grid-template-columns:repeat(5,minmax(0,1fr))}
.cn-genrow{margin-top:20px}
.cn-gen .cn-newcard,.cn-ml .cn-newcard{margin-bottom:16px}

/* generated result */
.cn-genactions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:8px}
.cn-genactions .btn{font-size:1.05rem;padding:12px 20px}
.cn-genres .cn-tip{text-align:center}
.cn-genpages .cn-pvpage{margin-bottom:34px}
.cn-genbar{position:absolute;left:.8cqw;right:.8cqw;bottom:.8cqw;z-index:7;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
.cn-genbar>*{pointer-events:auto}
.cn-role{display:inline-block;background:#26244F;color:#fff;border-radius:999px;padding:.4cqw 1.4cqw;font:800 max(11px,1.8cqw) Nunito,sans-serif}
.cn-toolnote .cn-role{font-size:.75rem;padding:2px 8px;margin-right:4px}
.cn-regen{width:max(40px,5.4cqw);height:max(40px,5.4cqw);border-radius:50%;border:3px solid #16111F;background:#fff;font-size:max(18px,2.6cqw);cursor:pointer}
.cn-regen:hover{background:var(--sun)}

/* story to comic */
.cn-mltext{min-height:220px;line-height:1.45;font-weight:700}
.cn-err{color:#C0392B;font-weight:800;min-height:1.2em;margin:6px 0}
.cn-storylist{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.cn-storybtn{border:3px solid #16111F;border-radius:18px;background:#FFF0B8;color:#26244F;padding:10px 12px;text-align:left;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:2px}
.cn-storybtn small{font-weight:600;color:#4a486f;font-size:.8rem}
.cn-mlgrid{display:grid;gap:16px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
.cn-mlpreview{position:sticky;top:8px;max-height:calc(100vh - 16px);overflow:auto;background:#FFE9A8;border:4px solid #16111F;border-radius:24px;padding:14px}
.cn-mlpreview .cn-pvpage{max-width:440px;margin:0 auto 14px}
@media (max-width:860px){.cn-mlgrid{grid-template-columns:1fr}.cn-mlpreview{position:static;max-height:none}}
.cn-check{font-weight:800;border-radius:12px;padding:8px 12px;margin:12px 0 4px}
.cn-check.ok{background:#CFF3EA;color:#0F5E4C}.cn-check.bad{background:#FFD3DA;color:#B0213A}
.cn-plan{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:10px}
.cn-plancard{border:3px solid #16111F;border-radius:18px;padding:10px 12px;background:var(--bg)}
.cn-planhead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.cn-planhead b{font:800 1.05rem "Baloo 2",Nunito,sans-serif}
.cn-unit{margin:4px 0;color:var(--ink);font-weight:700;line-height:1.45}
.cn-saychip{background:#D5E8FF;color:#26244F;border-radius:10px;padding:1px 6px}
.cn-split{display:block;border:2px dashed #9A98B8;background:transparent;color:var(--mute);border-radius:10px;padding:3px 10px;font:800 .8rem Nunito,sans-serif;cursor:pointer;margin:4px 0}
.cn-split:hover{border-color:var(--pink);color:var(--pink)}
#comic mark{background:#FFD84D;color:#16111F;border-radius:4px;padding:0 2px}
.cn-mlgo{margin-top:16px;justify-content:center}
.cn-dialog.wide{max-width:640px}
.cn-dlgbody{max-height:60vh;overflow:auto}
.cn-orig{white-space:pre-wrap;background:var(--bg);border-radius:14px;padding:12px 14px;font-weight:700;line-height:1.5;color:var(--ink)}

/* print: one comic page per sheet, built by comic-ui.js (buildPrint) */
#cnPrint{position:fixed;left:-20000px;top:0;width:7.2in}
.cn-printpage .cn-cover{padding:0 0 .12in}
.cn-printpage .cn-cover h2{font-size:24pt;color:#16111F}
.cn-printpage .cn-cover p{font-size:12pt;color:#4a486f}
@media print{
  @page{size:letter portrait;margin:.4in}
  body.cn-printing{background:#fff!important;padding:0!important}
  body.cn-printing>*:not(#cnPrint):not(#cnSprite){display:none!important}
  body.cn-printing #cnPrint{position:static;left:auto;width:7.2in;margin:0 auto}
  .cn-printpage{break-after:page;page-break-after:always;break-inside:avoid}
  .cn-printpage:last-child{break-after:auto;page-break-after:auto}
  #cnPrint,#cnPrint *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}