/* Voryai fun tools: stickers, coloring books, Halloween */
.fn-wrap{padding-bottom:30px}
.fn-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 auto 16px;max-width:640px}
.fn-tabs a{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 8px;border-radius:14px;border:1px solid var(--line2);background:var(--card);color:var(--tx);text-decoration:none;font-size:.95rem}
.fn-tabs a span{font-size:1.2rem}
.fn-tabs-2{grid-template-columns:repeat(2,1fr);max-width:460px}
.fn-tabs a[aria-current]{border:2px solid #6E83FF;background:rgba(110,131,255,.14)}
.fn-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:18px;align-items:start}
.fn-form{padding:16px;display:flex;flex-direction:column;gap:14px}
.fn-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:10px}
.fn-ideas button{font-size:.78rem}
.fn-go{width:100%}
.fn-sample{align-self:center}
.fn-side{display:flex;flex-direction:column;gap:12px;position:sticky;top:76px;min-width:0}
.fn-stage{min-height:360px;display:grid;place-items:center;padding:16px;overflow:hidden}
.fn-stage img{max-width:100%;max-height:70vh;display:block;border-radius:10px}
.fn-checker{background:repeating-conic-gradient(#1B1E26 0 25%,#14161C 0 50%) 0 0/22px 22px}
.fn-big{font-size:2.6rem}
.fn-tip{margin:0;color:var(--mu);font-size:.82rem;text-align:center}
.fn-legal{margin:18px 0 0;color:var(--mu);font-size:.8rem;text-align:center}
.fn-legal a{color:#8FA3FF}
.fn-more{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:.9rem}
.fn-more a{color:#8FA3FF}
.fn-sheet{padding:14px;display:flex;flex-direction:column;gap:10px}
.fn-sheet-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.fn-sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.fn-sh-it{position:relative;aspect-ratio:1;border-radius:10px;background:repeating-conic-gradient(#1B1E26 0 25%,#14161C 0 50%) 0 0/14px 14px;display:grid;place-items:center;padding:4px}
.fn-sh-it img{max-width:100%;max-height:100%}
.fn-sh-it button{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;cursor:pointer}
/* coloring book preview */
.fn-book{padding:14px;min-height:360px}
.fn-book > .vp-empty{margin:60px auto}
.fn-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.fn-tile{display:flex;flex-direction:column;gap:6px;min-width:0}
.fn-tile small{color:var(--mu);font-size:.74rem;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fn-tile-pg,.fn-tile .fn-cover,.fn-tile .fn-own{aspect-ratio:210/297;border-radius:8px;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
.fn-tile-pg img{width:100%;height:100%;object-fit:contain}
.fn-tile.is-err .fn-tile-pg{background:#2A1A1E}
.fn-wait{color:#9AA1AE;font-size:1.4rem}
.fn-tile .vp-orb{width:34px;height:34px}
.fn-redo{align-self:flex-start;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--tx);border-radius:999px;padding:4px 10px;font:600 .72rem var(--f-body);cursor:pointer}
/* the cover, the "belongs to" page and the coloring pages: scale with their box (container units) */
.fn-cover,.fn-own,.fn-cpage{container-type:inline-size;width:100%;aspect-ratio:210/297;background:#fff;color:#1E2430;position:relative;overflow:hidden}
.fn-cover{background:radial-gradient(circle at 20% 15%,#FFE8A3 0 14%,transparent 15%),radial-gradient(circle at 85% 80%,#BDE7FF 0 16%,transparent 17%),radial-gradient(circle at 88% 12%,#FFC6D9 0 9%,transparent 10%),#FFFDF6}
.fn-cover-in{position:absolute;inset:4cqw;border:1.2cqw dashed #FFB400;border-radius:5cqw;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:7cqw 5cqw 4cqw;text-align:center}
.fn-cover-name{margin:0;font:700 15cqw/1 Fredoka,"Baloo Bhaijaan 2",system-ui,sans-serif;letter-spacing:.01em;-webkit-text-stroke:.5cqw #1E2430;paint-order:stroke fill;word-break:break-word;background:none!important;-webkit-text-fill-color:currentColor!important}
.fn-cover-t{margin:3cqw 0 0;font:600 5.4cqw/1.2 Fredoka,"Baloo Bhaijaan 2",system-ui,sans-serif;color:#1E2430}
.fn-cover-art{flex:1;width:100%;margin-top:4cqw;border-radius:4cqw;background:#fff;border:.8cqw solid #1E2430;overflow:hidden;display:grid;place-items:center;min-height:0}
.fn-cover-art img{width:100%;height:100%;object-fit:contain}
.fn-cover-s{margin:3cqw 0 0;font-size:6cqw;line-height:1}
.fn-cover[dir="rtl"] .fn-cover-name,.fn-cover[dir="rtl"] .fn-cover-t,.fn-own[dir="rtl"] h3,.fn-own[dir="rtl"] p{font-family:"Baloo Bhaijaan 2",Fredoka,system-ui,sans-serif}
.fn-own-in{position:absolute;inset:6cqw;border:1cqw solid #1E2430;border-radius:5cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6cqw}
.fn-own p{margin:0;font:600 6cqw/1.2 Fredoka,system-ui,sans-serif}
.fn-own h3{margin:4cqw 0 8cqw;font:700 13cqw/1 Fredoka,system-ui,sans-serif;color:#1E2430;background:none!important;-webkit-text-fill-color:currentColor!important;word-break:break-word}
.fn-lines{display:grid;grid-template-columns:auto 1fr;gap:4cqw 3cqw;width:80%;align-items:end;font:600 4.4cqw Fredoka,system-ui,sans-serif}
.fn-lines i{border-bottom:.5cqw solid #1E2430;height:5cqw}
.fn-star{margin-top:8cqw;font-size:14cqw;color:transparent;-webkit-text-stroke:.6cqw #1E2430}
.fn-cpage{display:flex;flex-direction:column;padding:5cqw}
.fn-cpage-art{flex:1;display:grid;place-items:center;min-height:0}
.fn-cpage-art img{width:100%;height:100%;object-fit:contain}
.fn-cpage-f{margin:2cqw 0 0;text-align:center;font:600 3.6cqw Fredoka,"Baloo Bhaijaan 2",system-ui,sans-serif;color:#555}
/* Halloween tint */
.fun-hw .vp-aurora i:nth-child(1){background:radial-gradient(circle,#FF7A00 0,transparent 60%)}
.fun-hw .vp-aurora i:nth-child(2){background:radial-gradient(circle,#7C3AED 0,transparent 60%)}
/* phone */
@media (max-width:980px){ .fn-grid{grid-template-columns:minmax(0,1fr)} .fn-side{position:static} }
.fn-grid > *{min-width:0}
@media (max-width:420px){ .fn-cols{grid-template-columns:1fr} .fn-tabs a{flex-direction:column;gap:2px;font-size:.82rem} .fn-pages{grid-template-columns:1fr 1fr} }
/* print: only the sheet or the book, one A4 page each */
#fnPrint{display:none}
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff!important;margin:0!important;padding:0!important}
  body.fn-printing > :not(#fnPrint){display:none!important}
  body.fn-printing #fnPrint{display:block!important}
  #fnPrint *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #fnPrint .fn-pg{width:210mm;height:297mm;page-break-after:always;break-after:page;overflow:hidden;position:relative;background:#fff}
  #fnPrint .fn-pg:last-child{page-break-after:auto;break-after:auto}
  #fnPrint .fn-pg > .fn-cover,#fnPrint .fn-pg > .fn-own,#fnPrint .fn-pg > .fn-cpage{width:210mm;height:297mm;aspect-ratio:auto}
  #fnPrint .fn-sheet-pg{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6mm;padding:10mm;box-sizing:border-box;height:auto;min-height:297mm}
  #fnPrint .fn-sheet-pg img{width:var(--s);height:var(--s);object-fit:contain}
}
.fn-sub{color:var(--mu);font-size:.76rem;font-weight:600;margin:2px 0 -2px}
.fn-who button{font-size:.8rem}
.fn-video{width:100%;max-height:70vh;border-radius:14px;background:#000;display:block}
/* ---------- storybook ---------- */
#sbOut{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.sb-cover,.sb-page{background:#fff;color:#1E2430;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 22px -10px rgba(0,0,0,.6)}
.sb-cover{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px;padding:12px;background:linear-gradient(135deg,#FFF6D8,#E3F1FF)}
.sb-cover-art{width:120px;aspect-ratio:3/4;flex:none;border-radius:10px;background:#fff;display:grid;place-items:center;overflow:hidden}
.sb-cover-art img{width:100%;height:100%;object-fit:cover}
.sb-title{flex:1;min-width:0;border:0;background:transparent;resize:none;line-height:1.25;overflow-wrap:anywhere;font:700 1.3rem Fredoka,"Baloo Bhaijaan 2",system-ui,sans-serif;color:#1E2430;padding:6px;border-radius:8px}
.sb-title:focus{outline:2px solid #6E83FF;background:#fff}
.sb-art{aspect-ratio:4/3;background:#F1F3F8;display:grid;place-items:center;color:#9AA1AE}
.sb-art img{width:100%;height:100%;object-fit:cover}
.sb-text{border:0;resize:vertical;min-height:70px;padding:10px 12px;font:500 .92rem/1.5 Andika,"Noto Naskh Arabic",system-ui,sans-serif;color:#1E2430;background:#fff}
.sb-text:focus{outline:2px solid #6E83FF}
.sb-pfoot{display:flex;justify-content:space-between;align-items:center;padding:0 10px 10px}
.sb-pfoot small{color:#9AA1AE}
.sb-pfoot .fn-redo{color:#1E2430;border-color:#C7CCD6;background:#F6F7FA}
/* storybook print */
.sbp-cover{width:210mm;height:297mm;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10mm;padding:18mm;box-sizing:border-box;background:linear-gradient(160deg,#FFF6D8,#E3F1FF 60%,#FDE2F3);text-align:center}
.sbp-title{margin:0;font:700 34pt/1.15 Fredoka,"Baloo Bhaijaan 2",sans-serif;color:#1E2430!important;background:none!important;-webkit-text-fill-color:currentColor!important}
.sbp-cart{width:120mm;height:150mm;border-radius:8mm;overflow:hidden;border:2mm solid #fff;box-shadow:0 4mm 10mm rgba(0,0,0,.15)}
.sbp-cart img{width:100%;height:100%;object-fit:cover}
.sbp-for{margin:0;font:600 20pt Fredoka,"Baloo Bhaijaan 2",sans-serif;color:#E85D75}
.sbp-the{margin:0;font:700 44pt Fredoka,"Baloo Bhaijaan 2",sans-serif;color:#1E2430}
.sbp-page{width:210mm;height:297mm;display:flex;flex-direction:column;padding:14mm;box-sizing:border-box;gap:10mm;position:relative;background:#FFFDF8}
.sbp-art{height:150mm;border-radius:6mm;overflow:hidden}
.sbp-art img{width:100%;height:100%;object-fit:cover}
.sbp-text{margin:0;font:500 19pt/1.6 Andika,"Noto Naskh Arabic",sans-serif;color:#1E2430}
.sbp-n{position:absolute;bottom:9mm;left:0;right:0;text-align:center;font:600 11pt Fredoka,sans-serif;color:#9AA1AE}
/* ---------- name tracing ---------- */
.fn-trpages{display:flex;flex-direction:column;gap:14px}
.tr-wrap{container-type:inline-size;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 8px 22px -10px rgba(0,0,0,.6)}
.tr-page{width:100%;aspect-ratio:210/297;box-sizing:border-box;padding:6cqw 7cqw 5cqw;display:flex;flex-direction:column;background:#fff;color:#1E2430;position:relative}
.fn-pg > .tr-page{width:210mm;height:297mm;aspect-ratio:auto;padding:14mm 15mm 12mm}
.tr-head{display:flex;justify-content:space-between;font:600 2.4cqw Andika,"Noto Naskh Arabic",sans-serif;color:#4B5565}
.fn-pg .tr-head{font-size:11pt}
.tr-title{margin:3cqw 0 2cqw;text-align:center;font:700 5cqw Fredoka,"Baloo Bhaijaan 2",sans-serif;color:#1E2430!important;background:none!important;-webkit-text-fill-color:currentColor!important}
.fn-pg .tr-title{font-size:24pt;margin:6mm 0 4mm}
.tr-title b{color:#3A86FF}
.tr-rows{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-height:0}
.tr-row{width:100%;height:auto;display:block}
.tr-mark{position:absolute;bottom:1.8cqw;left:0;right:0;margin:0;text-align:center;font:600 1.8cqw Figtree,sans-serif;color:#9AA1AE}
.fn-pg .tr-mark{bottom:5mm;font-size:8pt}
.fn-tip-l{text-align:left;margin:-6px 0 0}
/* headshots */
.hs-drops{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px}
.hs-drops .vp-drop{min-height:120px}
.hs-drops .vp-drop img{max-height:150px;object-fit:cover}
.hs-drops .vp-drop-empty{padding:8px}
.hs-drops small{font-size:.7rem}
.hs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.hs-it{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#1B1E26;display:grid;place-items:center}
.hs-it img{width:100%;height:100%;object-fit:cover}
.hs-acts{position:absolute;left:6px;right:6px;bottom:6px;display:flex;gap:6px;justify-content:center}
.hs-acts .vp-btn{padding:6px 10px;font-size:.75rem;backdrop-filter:blur(6px)}
@media (max-width:420px){ .hs-grid{grid-template-columns:1fr 1fr} }
.fn-go{flex-wrap:wrap;row-gap:4px}
/* image generator */
.im-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.im-it{aspect-ratio:auto;min-height:200px}
.im-it img{height:auto}
/* restore: before / after */
.rs-cmp{position:relative;width:100%;border-radius:12px;overflow:hidden;line-height:0;background:#000}
.rs-cmp img{width:100%;display:block}
.rs-before{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.rs-before img{width:100%;height:100%;object-fit:cover}
.rs-cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.rs-tag{position:absolute;top:10px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:600 .75rem/1.4 var(--f-body);pointer-events:none}
.rs-tag-b{left:10px}.rs-tag-a{right:10px}