:root{--ink:#26213d;--muted:#746f83;--paper:#fffdf8;--accent:#7657ff;--accent2:#ff8da1;--soft:#f1edff;--line:#e8e2f1;--shadow:0 18px 60px rgba(63,49,96,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:ui-rounded,"SF Pro Rounded","Avenir Next",system-ui,-apple-system,sans-serif;color:var(--ink);background:linear-gradient(180deg,#fff8f3,#f7f4ff 48%,#f4fbff)}
body[data-age="7-8"]{--accent:#008f83;--accent2:#ffb84d;--soft:#e8faf7}body[data-age="10-11"]{--accent:#3370cc;--accent2:#ff8b5e;--soft:#eaf2ff}body[data-age="14-16"]{--accent:#383a61;--accent2:#be7a9f;--soft:#ececf5}
button,input,select,textarea{font:inherit}.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:14px max(20px,calc((100vw - 1100px)/2));background:rgba(255,253,248,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(50,40,70,.08)}
.brand{display:flex;gap:9px;align-items:center;text-decoration:none;color:var(--ink);font-weight:900;letter-spacing:.06em}.brand-mark{font-size:1.55rem}.topbar nav{display:flex;gap:18px}.topbar nav a{color:var(--ink);text-decoration:none;font-weight:700}
main{max-width:1100px;margin:auto;padding:34px 20px 80px}.hero{min-height:430px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px}.hero h1{font-size:clamp(2.8rem,7vw,6.4rem);line-height:.92;margin:8px 0 22px;letter-spacing:-.055em;max-width:780px}.hero-copy{font-size:1.18rem;line-height:1.7;max-width:670px;color:var(--muted)}
.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-weight:900;font-size:.78rem;color:var(--accent);margin:0 0 5px}.primary-link,.primary,.secondary,.danger{border:0;border-radius:999px;padding:13px 18px;font-weight:850;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}.primary-link,.primary{background:var(--accent);color:white;box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 30%,transparent)}.secondary{background:var(--soft);color:var(--accent)}.danger{background:#fff0f0;color:#b52e3e}.hero-books{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:12px;transform:rotate(-3deg)}.hero-books span{display:grid;place-items:center;aspect-ratio:.72;border-radius:14px 20px 20px 14px;font-size:4rem;background:white;box-shadow:var(--shadow);border-left:8px solid var(--accent)}.hero-books span:nth-child(2){height:90%;background:#fff3d4}.hero-books span:nth-child(3){height:112%;background:#e9f7ff}
.panel{background:rgba(255,255,255,.9);border:1px solid rgba(66,53,91,.08);border-radius:28px;padding:clamp(20px,4vw,42px);box-shadow:var(--shadow);margin:24px 0 64px}.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.section-heading h2{margin:4px 0 24px;font-size:clamp(1.8rem,4vw,2.8rem)}.status-badge{padding:8px 12px;background:var(--soft);color:var(--accent);border-radius:999px;font-size:.82rem;font-weight:850;white-space:nowrap}
.mode-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}.mode{border:1px solid var(--line);background:white;padding:10px 14px;border-radius:999px;cursor:pointer;font-weight:800;color:var(--ink)}.mode.active{background:var(--ink);color:white;border-color:var(--ink)}
fieldset{border:0;padding:0;margin:0 0 28px}legend{font-weight:900;margin-bottom:12px}.choice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.choice-grid.compact{grid-template-columns:repeat(3,1fr)}.choice-grid input{position:absolute;opacity:0}.choice-grid span{display:block;text-align:center;border:2px solid var(--line);border-radius:18px;padding:15px 10px;background:white;font-weight:850;cursor:pointer;transition:.18s}.choice-grid small{font-weight:600;color:var(--muted)}.choice-grid input:checked+span{border-color:var(--accent);background:var(--soft);color:var(--accent);transform:translateY(-2px)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:26px}.field{display:flex;flex-direction:column;gap:7px;font-weight:800}.field input,.field select,.field textarea{border:1.5px solid var(--line);border-radius:14px;padding:13px;background:white;color:var(--ink);outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}details{background:#fbfaff;border-radius:18px;padding:15px 17px;margin-bottom:24px}details summary{font-weight:900;cursor:pointer;margin-bottom:14px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.actions button{min-height:46px}
.story-text{font-family:Georgia,"Times New Roman",serif;font-size:1.16rem;line-height:1.9;max-width:760px;margin:8px auto}.story-text p{margin:0 0 1.15em}.muted{color:var(--muted)}.hidden{display:none!important}.library-section{padding-top:22px}.bookshelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:24px;padding:20px 10px 34px;border-bottom:18px solid #a56f43}.book-card{border:0;cursor:pointer;text-align:left;background:transparent;transition:.2s}.book-card:hover,.book-card:focus{transform:translateY(-9px) rotate(-1deg)}.book-cover{aspect-ratio:.72;border-radius:10px 18px 18px 10px;padding:18px 13px;color:white;background:linear-gradient(150deg,var(--accent),var(--accent2));box-shadow:0 12px 24px rgba(42,34,72,.22);display:flex;flex-direction:column;justify-content:space-between;border-left:8px solid rgba(0,0,0,.16)}.book-cover strong{font-size:1rem;line-height:1.15}.book-cover .emoji{font-size:2.3rem}.empty{text-align:center;color:var(--muted);padding:30px}
dialog{border:0;border-radius:28px;padding:30px;max-width:min(900px,94vw);width:100%;box-shadow:0 25px 100px rgba(15,10,30,.4)}dialog::backdrop{background:rgba(25,20,42,.55);backdrop-filter:blur(6px)}.dialog-close{position:absolute;right:16px;top:12px;border:0;background:transparent;font-size:2rem;cursor:pointer}.book-detail{display:grid;grid-template-columns:200px 1fr;gap:30px;align-items:start}.dialog-cover{aspect-ratio:.72;border-radius:12px 22px 22px 12px;display:grid;place-items:center;font-size:4rem;background:linear-gradient(150deg,var(--accent),var(--accent2));box-shadow:var(--shadow)}.reader{border-top:1px solid var(--line);margin-top:28px;padding-top:24px}
footer{text-align:center;padding:40px;color:var(--muted)}
@media(max-width:740px){.topbar nav{display:none}.hero{grid-template-columns:1fr;min-height:auto;padding:50px 0}.hero-books{max-width:410px}.hero-books span{font-size:2.4rem}.choice-grid{grid-template-columns:repeat(2,1fr)}.choice-grid.compact,.form-grid{grid-template-columns:1fr}.panel{border-radius:22px;margin-bottom:38px}.book-detail{grid-template-columns:1fr}.dialog-cover{max-width:180px}.story-text{font-size:1.08rem}.section-heading{align-items:flex-start}}
@media print{.topbar,.hero,.creator,.library-section,footer,.dialog-close,.book-detail .actions{display:none!important}body{background:white}dialog{position:static;display:block!important;box-shadow:none;max-width:none;padding:0}.reader{display:block!important;border:0}.story-text{font-size:12pt;max-width:none}}

/* V0.2 — creazione rapida */
.quick-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 30px}
.preset-card{border:2px solid var(--line);background:white;border-radius:22px;padding:16px;text-align:left;cursor:pointer;transition:.2s;min-height:142px;display:flex;flex-direction:column;gap:5px;box-shadow:0 6px 18px rgba(50,40,80,.05)}
.preset-card:hover,.preset-card:focus{transform:translateY(-4px);border-color:var(--accent)}
.preset-card.active{border-color:var(--accent);background:var(--soft);box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 14%,transparent)}
.preset-art{font-size:2.3rem;display:block;margin-bottom:auto}.preset-card strong{font-size:1rem}.preset-card small{color:var(--muted);font-weight:650}
.age-grid span{display:flex;flex-direction:column;gap:3px}.age-grid b{font-size:1.18rem}.quick-name{max-width:520px;margin:0 0 24px}.quick-name .field small{font-weight:600;color:var(--muted)}
.quick-tune{margin-bottom:26px}.quick-tune summary,.quick-tune summary span,#customBox summary span{display:flex;align-items:center}.quick-tune summary{justify-content:space-between;gap:12px}.quick-tune summary span,#customBox summary span{display:inline;color:var(--muted);font-size:.78rem;font-weight:650;margin-left:6px}
.field-hint{margin:-5px 0 12px;color:var(--muted);font-size:.9rem}
.choice-grid.compact span{display:flex;align-items:center;justify-content:center;gap:7px}
.selection-summary{margin-top:24px;padding:14px 16px;background:linear-gradient(135deg,var(--soft),white);border:1px solid var(--line);border-radius:18px;font-size:.92rem;line-height:1.5}
.selection-summary strong{color:var(--accent)}
.creator-actions{justify-content:flex-end;align-items:center}.big-cta{padding:15px 24px;font-size:1.04rem}
@media(max-width:900px){.quick-presets{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.quick-presets{grid-template-columns:1fr 1fr;gap:8px}.preset-card{min-height:122px;padding:12px;border-radius:18px}.preset-art{font-size:1.8rem}.preset-card strong{font-size:.9rem}.preset-card small{font-size:.72rem}.creator-actions{justify-content:stretch}.creator-actions button{flex:1}.big-cta{flex:2!important}}

/* V0.3 — ingresso pulito + 6 carte */
.story-picker{margin-top:6px}
.picker-title{font-size:1.05rem;font-weight:900;margin:0 0 14px}
.story-setup{animation:revealSetup .35s ease both}
@keyframes revealSetup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.quick-presets{grid-template-columns:repeat(3,1fr)}
.special-card{background:linear-gradient(145deg,#fff,var(--soft))}
.special-card strong{color:var(--accent)}
#storySetup{margin-top:28px;padding-top:26px;border-top:1px solid var(--line)}
#startCreate{font-size:1.06rem;padding:15px 22px}
@media(max-width:900px){.quick-presets{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.quick-presets{grid-template-columns:1fr 1fr}.preset-card{min-height:132px}}

/* V0.4 — prova ChatGPT senza API */
.chat-test{border:2px solid color-mix(in srgb,var(--accent) 28%,white)}
.prompt-box{min-height:260px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88rem;line-height:1.55;background:#faf9ff!important}
.import-field{margin-top:28px}.link-button{display:inline-flex}
#chatTestMessage{margin-top:12px}.chat-test .actions{align-items:center}
@media(max-width:620px){.chat-test .actions>*{width:100%}.prompt-box{min-height:220px}}


/* V0.5 — atmosfera, welcome, area personale, lettore */
body{position:relative;overflow-x:hidden}
body>header,body>main,body>footer{position:relative;z-index:2}
.ambient-world{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.28;filter:saturate(.8)}
.ambient-item{position:absolute;font-size:clamp(2rem,4vw,4.8rem);opacity:0;filter:blur(.2px);animation:ambientFloat 22s ease-in-out infinite}
.ambient-item.castle{left:6%;top:18%;animation-delay:0s}
.ambient-item.cloud-one{left:18%;top:9%;animation-delay:3s;font-size:4rem}
.ambient-item.cloud-two{right:12%;top:28%;animation-delay:10s;font-size:3.2rem}
.ambient-item.dragon{right:8%;top:14%;animation-delay:6s}
.ambient-item.knight{left:12%;bottom:16%;animation-delay:12s}
.ambient-item.sword{right:18%;bottom:13%;animation-delay:16s}
@keyframes ambientFloat{
  0%,100%{opacity:0;transform:translate(-18px,8px) scale(.94)}
  18%,52%{opacity:.42}
  38%{transform:translate(18px,-8px) scale(1)}
  72%{opacity:.12;transform:translate(42px,-16px) scale(1.04)}
}
@media(prefers-reduced-motion:reduce){.ambient-item{animation:none;opacity:.12}.parchment-smoke{display:none}}

.welcome-gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at top,#fff7e8 0,#f6f0ff 52%,#eef7ff 100%)}
.welcome-card{width:min(760px,96vw);background:rgba(255,255,255,.94);border:1px solid rgba(60,45,90,.08);border-radius:32px;padding:clamp(24px,5vw,48px);box-shadow:0 30px 100px rgba(45,35,70,.2);text-align:center}
.welcome-card h1{font-size:clamp(2rem,5vw,3.8rem);line-height:1.02;margin:10px auto 14px;max-width:650px}
.welcome-logo{font-size:3rem}.welcome-languages{display:flex;justify-content:center;gap:8px;margin:22px 0 16px}
.lang-chip,.nav-age{border:1px solid var(--line);background:white;border-radius:999px;padding:8px 12px;font-weight:850;cursor:pointer;color:var(--ink)}
.lang-chip.active{background:var(--ink);color:white;border-color:var(--ink)}
.welcome-ages{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 24px}
.welcome-age{border:2px solid var(--line);border-radius:20px;background:white;padding:18px 10px;cursor:pointer;display:flex;flex-direction:column;gap:2px;color:var(--ink)}
.welcome-age strong{font-size:1.3rem}.welcome-age small{color:var(--muted)}
.welcome-age.active{border-color:var(--accent);background:var(--soft);color:var(--accent);transform:translateY(-2px)}
.welcome-enter{min-width:220px;font-size:1.03rem}
.nav-age{padding:7px 10px;font-size:.82rem}
@media(max-width:600px){.welcome-ages{grid-template-columns:repeat(2,1fr)}.welcome-card{border-radius:24px}.topbar{padding-inline:14px}}

.personal-area{padding:30px 0 70px}
.personal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.personal-card{background:rgba(255,255,255,.9);border:1px solid rgba(60,45,90,.08);border-radius:24px;padding:20px;box-shadow:0 12px 34px rgba(50,40,80,.08)}
.personal-card h3{margin:8px 0 8px;font-size:1.1rem}.personal-icon{font-size:2rem}.big-number{display:block;font-size:2.4rem;line-height:1;color:var(--accent);margin:6px 0}
.compact-field{font-size:.9rem}.compact-field input{margin-top:3px}.coming-soon{display:inline-block;padding:7px 10px;border-radius:999px;background:var(--soft);color:var(--accent);font-size:.78rem;font-weight:850}
.recent-books{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.recent-mini{background:white;border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;gap:12px;align-items:center}
.recent-mini .mini-cover{width:44px;aspect-ratio:.72;border-radius:6px 9px 9px 6px;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent),var(--accent2));color:white}
@media(max-width:900px){.personal-grid{grid-template-columns:repeat(2,1fr)}} 
@media(max-width:560px){.personal-grid{grid-template-columns:1fr}}

.illustration-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:4px 0 28px}
.illustration-card{min-height:180px;border-radius:22px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;border:1px solid rgba(50,40,70,.08);box-shadow:0 12px 28px rgba(50,40,70,.09)}
.illustration-card.color{background:linear-gradient(145deg,#ffecc7,#dff6ff 48%,#eee7ff)}
.illustration-card.bw{background:linear-gradient(145deg,#fafafa,#e8e8e8);filter:grayscale(1)}
.illustration-card .scene-emoji{font-size:3.2rem;letter-spacing:.06em}.illustration-card small{background:rgba(255,255,255,.76);border-radius:999px;padding:6px 9px;width:max-content;max-width:100%;font-weight:750}
.illustration-note{grid-column:1/-1;color:var(--muted);font-size:.82rem;margin:0}
@media(max-width:650px){.illustration-gallery{grid-template-columns:1fr}.illustration-card{min-height:140px}}

.book-dialog{background:transparent;box-shadow:none;padding:0;max-width:min(980px,96vw);overflow:visible}
.book-dialog::backdrop{background:rgba(20,16,30,.66);backdrop-filter:blur(7px)}
.book-dialog>.dialog-close{z-index:5;right:8px;top:6px;background:rgba(255,255,255,.88);width:42px;height:42px;border-radius:50%}
.book-detail{background:white;border-radius:28px;padding:30px;box-shadow:0 25px 100px rgba(15,10,30,.4)}
.reader-pane{padding:12px 0 0}
.parchment-shell{position:relative;max-width:800px;margin:auto}
.parchment-reader{position:relative;min-height:72vh;padding:clamp(26px,5vw,58px);border-radius:24px;color:#3f2a1d;background:
  radial-gradient(circle at 18% 12%,rgba(255,255,255,.55),transparent 28%),
  radial-gradient(circle at 84% 88%,rgba(118,63,30,.10),transparent 26%),
  linear-gradient(95deg,#f6e2b4,#efd39b 45%,#f8e8be);
box-shadow:inset 0 0 0 1px rgba(92,51,24,.15),inset 0 0 45px rgba(92,51,24,.18),0 28px 90px rgba(0,0,0,.35)}
.parchment-reader:before{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;background:
  radial-gradient(circle at 4% 8%,rgba(92,45,20,.24),transparent 8%),
  radial-gradient(circle at 96% 86%,rgba(92,45,20,.23),transparent 9%),
  linear-gradient(90deg,rgba(75,37,15,.16),transparent 7%,transparent 93%,rgba(75,37,15,.14));
mix-blend-mode:multiply}
.parchment-reader h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.8rem,4vw,3rem);text-align:center;margin:12px 0 28px}
.reader-page{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.05rem,2vw,1.28rem);line-height:1.95;position:relative;z-index:1}
.reader-page p{margin:0 0 1.2em}.reader-header,.reader-controls{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px}
.reader-header{font-size:.82rem;color:#70533c}.reader-mini{border:0;background:rgba(255,255,255,.45);border-radius:999px;padding:7px 10px;cursor:pointer}
.reader-controls{margin-top:28px;padding-top:18px;border-top:1px solid rgba(80,48,26,.18)}
.reader-controls .primary{background:#6f4d2e}.reader-controls .secondary{background:rgba(255,255,255,.55);color:#5a3c25}
.reader-tip{text-align:center;color:white;font-size:.82rem;margin:10px 0 0}
.parchment-smoke{position:absolute;width:55px;height:55px;border-radius:50%;filter:blur(12px);background:rgba(255,255,255,.24);pointer-events:none;animation:smokeDrift 7s ease-in-out infinite}
.smoke-a{left:-8px;bottom:30px}.smoke-b{right:-8px;top:60px;animation-delay:3.5s}
@keyframes smokeDrift{0%,100%{opacity:0;transform:translateY(12px) scale(.8)}35%{opacity:.42}70%{opacity:.08;transform:translateY(-38px) scale(1.35)}}
@media(max-width:620px){.parchment-reader{min-height:78vh;border-radius:18px;padding:24px 18px}.reader-controls{gap:7px}.reader-controls button{padding:10px 12px}}

@media print{.ambient-world,.welcome-gate,.personal-area{display:none!important}}


/* V0.6 — pergamena evoluta + layout tavole per età */
.parchment-shell:before,
.parchment-shell:after{
  content:"";
  position:absolute;
  left:2.5%;
  right:2.5%;
  height:20px;
  border-radius:50%;
  background:rgba(20,10,4,.16);
  filter:blur(14px);
  z-index:-1
}
.parchment-shell:before{top:5px}
.parchment-shell:after{bottom:5px}

.parchment-reader{
  isolation:isolate;
  overflow:hidden;
  clip-path:polygon(
    0.8% 2.2%, 3.1% 1.2%, 5.2% 2%, 8.1% 1.3%, 11.8% 2%,
    15.1% 1.1%, 19.2% 1.8%, 23.1% 1.2%, 27.4% 1.9%, 31.8% 1.1%,
    36.5% 1.7%, 41.1% 1.2%, 45.6% 1.9%, 50.2% 1.1%, 55.1% 1.8%,
    60% 1.1%, 64.8% 1.7%, 69.4% 1.1%, 74.2% 1.9%, 79% 1.1%,
    84.2% 1.8%, 89.1% 1.2%, 94.2% 1.9%, 98.8% 1.1%,
    99.2% 4.5%, 98.7% 9.8%, 99.3% 14.7%, 98.7% 20.2%, 99.2% 25%,
    98.6% 30.7%, 99.2% 36.1%, 98.8% 42%, 99.4% 48%, 98.8% 54.1%,
    99.3% 60%, 98.8% 66.2%, 99.2% 72%, 98.7% 78%, 99.3% 84%,
    98.7% 90%, 99.2% 95.5%, 98.6% 98.8%,
    95% 98%, 90.2% 98.9%, 85.1% 98.2%, 80.1% 98.9%, 75% 98.1%,
    70% 98.8%, 65.1% 98.1%, 60.2% 98.9%, 55% 98.1%, 50% 98.8%,
    45% 98.1%, 40% 98.9%, 35% 98.1%, 30% 98.8%, 25% 98.1%,
    20% 98.9%, 15% 98.1%, 10% 98.8%, 5% 98.1%, 1.1% 98.8%,
    1.7% 94%, .9% 88%, 1.5% 82%, .8% 76%, 1.4% 70%, .8% 64%,
    1.5% 58%, .9% 52%, 1.5% 46%, .8% 40%, 1.4% 34%, .9% 28%,
    1.5% 22%, .8% 16%, 1.4% 10%, .8% 5%
  )
}
.parchment-reader:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 2% 2%,rgba(54,24,8,.38),transparent 4.5%),
    radial-gradient(circle at 98% 4%,rgba(54,24,8,.32),transparent 5%),
    radial-gradient(circle at 3% 97%,rgba(54,24,8,.31),transparent 5%),
    radial-gradient(circle at 98% 96%,rgba(54,24,8,.36),transparent 4.5%),
    repeating-linear-gradient(0deg,rgba(92,58,28,.018) 0 1px,transparent 1px 4px);
  mix-blend-mode:multiply
}
.reader-header,.reader-page,.reader-controls,.reader-progress,.parchment-reader h2{position:relative;z-index:2}
.reader-header{gap:10px;flex-wrap:wrap}
.reader-tools{display:flex;gap:6px;align-items:center;margin-left:auto}
.reader-progress{
  height:5px;
  overflow:hidden;
  margin:0 auto 24px;
  border-radius:999px;
  background:rgba(93,56,31,.13)
}
.reader-progress span{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:#81562f;
  transition:width .28s ease
}
.reader-page{
  transition:opacity .18s ease,transform .18s ease;
  min-height:320px
}
.reader-page.page-changing{opacity:.08;transform:translateX(12px)}
.parchment-reader.scroll-mode .reader-page{
  max-height:58vh;
  overflow-y:auto;
  padding-right:10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(91,55,31,.38) transparent
}
.parchment-reader.scroll-mode .reader-controls{display:none}
.parchment-reader.scroll-mode .reader-progress{display:none}
.reader-font-small .reader-page{font-size:.95rem}
.reader-font-normal .reader-page{font-size:clamp(1.05rem,2vw,1.28rem)}
.reader-font-large .reader-page{font-size:clamp(1.2rem,2.2vw,1.48rem)}
.reader-font-xlarge .reader-page{font-size:clamp(1.34rem,2.4vw,1.64rem)}

.reader-illustration{
  border:1px solid rgba(86,48,24,.16);
  overflow:hidden;
  position:relative;
  background:rgba(255,249,229,.5);
  box-shadow:0 12px 24px rgba(71,40,20,.12);
  margin:4px 0 22px;
  page-break-inside:avoid
}
.reader-illustration:after{
  content:"Tavola demo";
  position:absolute;
  right:9px;
  top:9px;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#68462d;
  font:700 .68rem/1 system-ui,sans-serif
}
.reader-illustration .reader-scene-art{
  min-height:145px;
  display:grid;
  place-items:center;
  padding:20px;
  font-size:clamp(2.6rem,7vw,5.8rem);
  letter-spacing:.08em;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.65),transparent 24%),
    linear-gradient(145deg,#f8d99a,#d9edf0 55%,#d9c7ec)
}
.reader-illustration.bw .reader-scene-art{
  filter:grayscale(1);
  background:linear-gradient(145deg,#f4f0e6,#ddd8cc)
}
.reader-illustration figcaption{
  padding:11px 14px 13px;
  font:600 .82rem/1.35 system-ui,sans-serif;
  color:#674a35;
  background:rgba(255,249,229,.74)
}

/* 5–6: tavole grandi e frequenti */
.reader-illustration.age-5-6{
  width:100%;
  border-radius:20px;
  margin-bottom:24px
}
.reader-illustration.age-5-6 .reader-scene-art{min-height:230px}

/* 7–8: immagini ampie ma con più testo */
.reader-illustration.age-7-8{
  width:min(86%,620px);
  margin:6px auto 24px;
  border-radius:18px
}
.reader-illustration.age-7-8 .reader-scene-art{min-height:190px}

/* 10–11: tavole più piccole, editoriali */
.reader-illustration.age-10-11{
  width:42%;
  min-width:210px;
  float:right;
  margin:4px 0 18px 22px;
  border-radius:14px
}
.reader-illustration.age-10-11:nth-child(even){
  float:left;
  margin:4px 22px 18px 0
}
.reader-illustration.age-10-11 .reader-scene-art{min-height:150px;font-size:3rem}

/* 14–16: una tavola discreta, tipo apertura capitolo */
.reader-illustration.age-14-16{
  width:68%;
  margin:6px auto 30px;
  border-radius:8px;
  box-shadow:none;
  border-color:rgba(86,48,24,.12)
}
.reader-illustration.age-14-16 .reader-scene-art{
  min-height:120px;
  font-size:2.4rem;
  filter:saturate(.5)
}

.reader-page:after{content:"";display:block;clear:both}
.reader-tip{opacity:.9}
.reader-tip strong{font-weight:850}

@media(max-width:620px){
  .reader-header{align-items:flex-start}
  .reader-tools{width:100%;order:3;justify-content:center;margin:4px 0 0}
  .reader-header>span{margin-left:auto}
  .reader-illustration.age-10-11,
  .reader-illustration.age-14-16{float:none;width:100%;min-width:0;margin:6px 0 20px}
  .parchment-reader.scroll-mode .reader-page{max-height:62vh}
}

@media print{
  .reader-tools,.reader-progress,.reader-tip{display:none!important}
  .reader-illustration:after{display:none}
}


/* V0.7 — maschere realmente diverse per fascia d'età */
body[data-age="5-6"]{
  --accent:#7657ff;--accent2:#ff8da1;--soft:#f1edff;
  background:
    radial-gradient(circle at 18% 10%,rgba(255,222,181,.55),transparent 28%),
    linear-gradient(180deg,#fff8f3,#f7f4ff 48%,#f4fbff)
}
body[data-age="5-6"] .panel,
body[data-age="5-6"] .personal-card{border-radius:30px}
body[data-age="5-6"] .preset-card{border-radius:24px}
body[data-age="5-6"] .hero-books{transform:rotate(-3deg)}
body[data-age="5-6"] .ambient-world{opacity:.28}

body[data-age="7-8"]{
  --accent:#008f83;--accent2:#ffb84d;--soft:#e8faf7;
  background:
    radial-gradient(circle at 82% 8%,rgba(255,219,155,.36),transparent 26%),
    linear-gradient(180deg,#f5fffc,#eef9f8 48%,#f7fbff)
}
body[data-age="7-8"] .hero h1{letter-spacing:-.045em}
body[data-age="7-8"] .hero-books{transform:rotate(-1deg)}
body[data-age="7-8"] .ambient-world{opacity:.22}
body[data-age="7-8"] .preset-card{border-radius:20px}

body[data-age="10-11"]{
  --ink:#1f2937;--muted:#64748b;--accent:#315b8c;--accent2:#a86f42;--soft:#e8eef5;--line:#d8e0ea;
  background:
    radial-gradient(circle at 85% 0,rgba(100,116,139,.12),transparent 32%),
    linear-gradient(180deg,#f4f7fa,#eaf0f5 52%,#f6f8fa);
  font-family:"Avenir Next",Inter,system-ui,-apple-system,sans-serif
}
body[data-age="10-11"] .hero{min-height:390px}
body[data-age="10-11"] .hero h1{
  font-size:clamp(2.8rem,6vw,5.2rem);
  line-height:.96;
  letter-spacing:-.045em
}
body[data-age="10-11"] .panel,
body[data-age="10-11"] .personal-card{
  border-radius:18px;
  background:rgba(255,255,255,.86)
}
body[data-age="10-11"] .preset-card{
  border-radius:14px;
  min-height:150px;
  box-shadow:0 8px 24px rgba(28,45,66,.07)
}
body[data-age="10-11"] .preset-art{
  font-size:.78rem;
  letter-spacing:.14em;
  font-weight:900;
  color:var(--accent);
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  width:max-content;
  background:#f8fafc
}
body[data-age="10-11"] .hero-books{
  transform:none;
  gap:10px
}
body[data-age="10-11"] .hero-books span{
  aspect-ratio:1;
  border-radius:18px;
  border-left:0;
  font-size:.76rem;
  letter-spacing:.08em;
  font-weight:900;
  color:#334155;
  background:linear-gradient(145deg,#f8fafc,#dde6ef)
}
body[data-age="10-11"] .ambient-world{opacity:.13;filter:grayscale(.7)}
body[data-age="10-11"] .ambient-item{font-size:2.1rem}
body[data-age="10-11"] .welcome-gate{
  background:linear-gradient(160deg,#edf2f7,#dfe8f0 58%,#f7f8fa)
}
body[data-age="10-11"] .welcome-card{border-radius:20px}
body[data-age="10-11"] .welcome-age{border-radius:14px}

body[data-age="14-16"]{
  --ink:#20232b;--muted:#6b7280;--accent:#3e435f;--accent2:#8e7187;--soft:#ececf2;--line:#d9d9e1;
  background:linear-gradient(180deg,#f5f5f7,#ececf0 52%,#f7f7f8);
  font-family:Inter,"Helvetica Neue",Arial,system-ui,sans-serif
}
body[data-age="14-16"] .topbar{
  background:rgba(247,247,248,.9);
  border-bottom-color:rgba(30,30,40,.12)
}
body[data-age="14-16"] .hero{
  min-height:360px;
  grid-template-columns:1.25fr .75fr
}
body[data-age="14-16"] .hero h1{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:600;
  font-size:clamp(2.7rem,5.5vw,5rem);
  line-height:1;
  letter-spacing:-.035em
}
body[data-age="14-16"] .hero-copy{max-width:620px}
body[data-age="14-16"] .panel,
body[data-age="14-16"] .personal-card{
  border-radius:10px;
  box-shadow:0 10px 34px rgba(25,25,35,.07)
}
body[data-age="14-16"] .preset-card{
  border-radius:8px;
  min-height:142px;
  box-shadow:none
}
body[data-age="14-16"] .preset-art{
  font-size:.72rem;
  letter-spacing:.17em;
  font-weight:800;
  color:var(--muted)
}
body[data-age="14-16"] .hero-books{
  transform:none;
  grid-template-columns:1fr;
  gap:8px;
  max-width:260px;
  justify-self:end
}
body[data-age="14-16"] .hero-books span{
  aspect-ratio:auto;
  min-height:58px;
  height:auto!important;
  border-radius:4px;
  border-left:0;
  font-size:.72rem;
  letter-spacing:.18em;
  font-weight:800;
  color:#343746;
  background:rgba(255,255,255,.7);
  box-shadow:0 8px 22px rgba(25,25,35,.06)
}
body[data-age="14-16"] .ambient-world{opacity:.045;filter:grayscale(1)}
body[data-age="14-16"] .welcome-gate{
  background:linear-gradient(160deg,#eeeeF2,#dedee5 55%,#f6f6f7)
}
body[data-age="14-16"] .welcome-card{
  border-radius:8px;
  box-shadow:0 20px 70px rgba(25,25,35,.14)
}
body[data-age="14-16"] .welcome-age{border-radius:6px}
body[data-age="14-16"] .primary-link,
body[data-age="14-16"] .primary,
body[data-age="14-16"] .secondary{border-radius:6px}
body[data-age="14-16"] details{border-radius:8px}

body[data-age="10-11"] .illustration-card,
body[data-age="14-16"] .illustration-card{
  border-radius:10px;
  padding:15px;
  background:linear-gradient(145deg,#edf1f4,#dbe2e8)
}
body[data-age="10-11"] .illustration-card .scene-emoji,
body[data-age="14-16"] .illustration-card .scene-emoji{
  font-size:.78rem;
  letter-spacing:.12em;
  font-weight:900;
  color:#455466
}
body[data-age="10-11"] .reader-scene-art,
body[data-age="14-16"] .reader-scene-art{
  font-family:Inter,system-ui,sans-serif;
  font-size:.82rem!important;
  font-weight:850;
  letter-spacing:.12em;
  color:#4a5564;
  text-align:center
}

@media(max-width:740px){
  body[data-age="14-16"] .hero{grid-template-columns:1fr}
  body[data-age="14-16"] .hero-books{display:none}
}