:root {
  --paper: #eeede9;
  --surface: #ffffff;
  --sheet: #fffefa;
  --ink: #30323f;
  --muted: #747682;
  --line: #e5e4eb;
  --accent: #7563d5;
  --accent-hover: #6452c2;
  --accent-soft: #eeebfc;
  --gold: #d2b742;
  --shadow: 0 4px 16px #2e264012;
  font-size: 14px;
}
.voice-label { display: block; margin: 10px 10px 6px; font-size: 12px; font-weight: 500; }
#tts-voice { display: block; width: calc(100% - 20px); min-height: 44px; margin: 0 10px 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--sheet); color: var(--ink); font: inherit; }
/* Scorre il contenuto dei pannelli, mentre la pagina del browser resta ferma. */
html, body { height: 100%; overflow: hidden; overflow: clip; overscroll-behavior: none; }
body { position: fixed; inset: 0; background: var(--paper); }
.home-screen { height: 100%; overflow: auto; overscroll-behavior: contain; }
:focus-visible { outline-color: var(--accent); }
.btn { border-radius: 9px; font-size: 12px; }
.btn-ghost:hover:not(:disabled), .btn-ghost[aria-pressed="true"] { border-color: #c7beef; }
.study-screen { position: fixed; inset: 0; width: 100%; height: 100%; padding-bottom: 0; overflow: hidden; overflow: clip; }
.study-screen .studio-stage, .study-screen .split-workspace,
.study-screen :is(.book-panel, .notes-panel, .map-panel) { overflow: hidden; overflow: clip; }
.top-bar { position: relative; display: flex; flex: 0 0 auto; gap: 16px; height: calc(60px + env(safe-area-inset-top)); min-height: 60px; padding: env(safe-area-inset-top) 22px 0; background: var(--surface); border-bottom: 0; }
.studio-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 36px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); }
.studio-icon img, .studio-tool img, .studio-swatch img, .studio-popover img, .studio-zoom img { display: block; flex: none; max-width: none; }
.studio-icon:hover:not(:disabled), .studio-tool:hover:not(:disabled) { background: var(--accent-soft); }
.studio-document { min-width: 0; max-width: 30%; }
.active-title { text-align: left; font-size: 14px; font-weight: 500; line-height: 22px; }
.studio-saved { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--muted); font-size: 9px; line-height: 14px; }
#studio-save-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.study-tabs { position: absolute; left: 50%; top: calc(13px + env(safe-area-inset-top)); display: flex; justify-content: center; width: 310px; height: 34px; padding: 2px; gap: 0; border-radius: 18px; background: #efeff0; transform: translateX(-50%); }
.study-tabs .tab { flex: 1; min-height: 30px; height: 30px; padding: 0 12px; border: 0; border-radius: 16px; color: #161616; font-size: 12px; font-weight: 400; }
.study-tabs .tab[aria-pressed="true"] { border: 0; background: #fff; box-shadow: 0 1px 4px #302c450c; color: #161616; font-weight: 500; }
.studio-top-actions { display: flex; gap: 16px; margin-left: auto; align-items: center; }
.studio-toolbar { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 10px; min-height: 84px; height: 84px; padding: 11px 16px; border-bottom: 1px solid #efedf2; background: var(--surface); z-index: 12; }
.studio-history { display: flex; gap: 4px; }
.studio-history .studio-icon { height: 36px; }
.studio-separator { width: 1px; height: 28px; background: var(--line); flex: none; }
.studio-writing-tools, .studio-smart-tools { display: flex; align-items: center; gap: 8px; }
.studio-tool { position: relative; display: inline-flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 64px; height: 62px; padding: 8px 2px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 10px; line-height: 16px; }
.studio-tool[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.studio-listen { color: var(--accent); }
.studio-swatch { position: relative; display: grid; flex: none; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 50%; padding: 0; background: transparent; }
.studio-swatch::before { position: absolute; inset: -8px; content: ''; border-radius: 50%; }
.studio-swatch[aria-pressed="true"]::after { position: absolute; inset: -3px; content: ''; border: 1px solid #d8d4e5; border-radius: 50%; }
.studio-stage { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 0; background: var(--sheet); }
.studio-page-meta { display: none; }
#studio-breadcrumb { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#studio-page-tag { flex: none; padding: 3px 9px; border-radius: 5px; background: var(--sheet); color: var(--accent); font-size: 9px; line-height: 14px; }
.split-workspace { position: relative; flex: 1; min-height: 0; padding: 0; overflow: visible; }
.book-panel, .notes-panel, .map-panel { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.book-panel { width: calc(50% - 8px); }
.split-divider { opacity: 0; }
.split-divider:hover { opacity: 1; }
.book-panel > :is(.book-bar, .book-ink-toolbar, .reader-alternative),
.notes-panel > :is(.notes-bar, .ink-toolbar),
.map-panel > .map-bar { display: none; }
#reader-message { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; border: 0; }
.book-content { padding: 0 0 64px; background: var(--sheet); overscroll-behavior: contain; scroll-padding-bottom: 64px; scrollbar-width: none; }
.book-content::-webkit-scrollbar { width: 0; height: 0; }
.pdf-page-container { width: 100%; max-width: none; margin: 0; border-radius: 0; border: 0; background: var(--sheet); box-shadow: none; }
.sample-page { position: relative; display: flex; flex-direction: column; min-height: max(629px, calc(100dvh - 271px)); padding: 42px 48px 26px; background: var(--sheet); }
.studio-chapter { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: var(--muted); font-size: 9px; line-height: 14px; letter-spacing: 1.08px; font-weight: 500; }
.studio-chapter::before { content: ''; width: 32px; height: 1px; flex: none; background: var(--accent); }
.studio-sample-title { margin: 0; color: var(--ink); font-family: Lora, Georgia, serif; font-size: 40px; font-weight: 400; line-height: 1.25; letter-spacing: 0; }
.studio-sample-deck { margin: 0 0 25px; color: var(--muted); font-size: 12px; line-height: 23px; }
.studio-document-body { display: grid; grid-template-columns: minmax(0, 1fr) 216px; gap: 34px; align-items: start; }
.studio-prose { display: flex; flex-direction: column; gap: 16px; font-size: 15px; line-height: 29px; }
.studio-prose p { margin: 0; }
.studio-prose .studio-lead { display: block; line-height: 24px; }
.studio-highlight { display: inline-block; margin-top: 16px; padding-inline: 3px; border-radius: 2px; background: #fcf0a1; line-height: 24px; }
.studio-river-card { min-height: 229px; padding: 20px; background: #f2f4ec; border-radius: 13px; }
.studio-river-card h3 { margin: 0 0 18px; font-size: 12px; font-weight: 500; line-height: 19px; }
.studio-river-row { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.studio-river-row > span { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; color: #6a7957; background: #e3e8d5; font-size: 11px; }
.studio-river-row strong { display: block; font-size: 11px; font-weight: 500; line-height: 18px; }
.studio-river-row small { display: block; color: var(--muted); font-size: 9px; line-height: 14px; }
.studio-handnote { margin: 25px 0 0; color: var(--accent); font: 400 27px/43px Caveat, cursive; transform: rotate(-5deg); }
.studio-paper-footer { display: flex; align-items: center; justify-content: space-between; margin: auto 0 0; min-height: 28px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; line-height: 13px; }
.studio-paper-footer > span:last-child { font-family: Lora, Georgia, serif; font-size: 11px; }
.sample-page > .studio-paper-footer { margin-top: auto; padding-top: 12px; }
.sample-page > .studio-document-body { margin-bottom: 26px; }
.sample-page .sentence-card { padding: 0; }
.sample-page .sentence-text { font-size: 15px; line-height: 29px; letter-spacing: 0; word-spacing: 0; }
.easy-reader-view { max-width: none; padding: 42px 48px; background: var(--sheet); min-height: 629px; box-shadow: var(--shadow); }
.studio-pagination { position: absolute; z-index: 12; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; justify-content: center; height: 44px; margin: 0; padding: 4px 10px; gap: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fffefaeb; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow); color: var(--muted); }
.studio-pagination .page-nav { display: flex; align-items: center; gap: 10px; }
.studio-pagination .page-label { display: flex; align-items: center; gap: 7px; font-size: 10px; }
.studio-pagination .btn-page { display: grid; place-items: center; min-width: 32px; min-height: 28px; width: 32px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; }
.studio-pagination #page-num-input { min-height: 24px; height: 24px; width: 34px; padding: 0 3px; border: 0; border-radius: 5px; background: var(--sheet); color: var(--ink); font-size: 10px; appearance: textfield; -moz-appearance: textfield; }
#page-num-input::-webkit-inner-spin-button, #page-num-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.studio-zoom { display: flex; align-items: center; gap: 9px; min-height: 28px; padding: 0 6px; margin-left: 12px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 10px; }
.notes-content { padding: 0; background: transparent; }
.studio-stage:has(#workspace[data-layout="notes"]) .studio-pagination .page-nav { display: none; }
.notes-sheet { display: flex; flex-direction: column; min-height: max(629px, calc(100dvh - 271px)); padding: 42px 48px 26px; border: 1px solid var(--line); border-radius: 3px; background: #fff; box-shadow: var(--shadow); }
.studio-kicker { margin: 0 0 14px; color: var(--muted); font-size: 9px; line-height: 14px; font-weight: 500; }
.notes-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.notes-sheet > :is(.studio-kicker, .studio-paper-footer, .studio-source, .extend-paper) { display: none; }
.notes-heading h2 { font-family: Lora, Georgia, serif; font-size: 36px; line-height: 1.6; font-weight: 400; }
#notes-status, #notes-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.notes-paper-frame { margin: 0; }
.notes-paper { background: transparent; box-shadow: none; }
.notes-playback, #notes-input { font-size: 22px; }
#notes-input, .notes-playback > div[data-text-start] { padding: 36px; }
.notes-playback.is-empty::after { content: none; }
.notes-panel .extend-paper { align-self: flex-start; margin-block: 18px; font-size: 10px; }
.notes-sheet > .studio-paper-footer { min-height: 24px; margin-top: auto; border: 0; }
.studio-source { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 8px 12px; margin: 18px 0; min-height: 35px; border: 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 12px; }
.book-ink > *, .notes-ink > * { pointer-events: none; }
.map-panel { min-height: 0; height: max(629px, calc(100dvh - 271px)); max-height: 100%; border: 1px solid var(--line); border-radius: 3px; background: var(--sheet); box-shadow: var(--shadow); }
.studio-map-heading { flex: none; padding: 42px 48px 0; }
.studio-map-heading h2 { margin: 0; font: 400 33px/53px Lora, Georgia, serif; }
.studio-map-heading p { margin: 0; font-size: 11px; color: var(--muted); line-height: 18px; }
.map-canvas-viewport { margin: 0 46px 28px 48px; background: transparent; }
.map-canvas { min-height: 420px; }
.map-canvas { transform-origin: 0 0; min-width: 0; }
#studio-map-frame { position: relative; margin-inline: auto; }
.map-node { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 230px; min-height: 68px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); color: var(--ink); padding: 12px 15px; }
.node-title-text { font-size: 14px; font-weight: 500; line-height: 22px; }
.node-detail-text { margin-top: 4px; font-size: 10px; font-weight: 400; line-height: 16px; color: var(--muted); }
.studio-map-asset { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; }
.map-node.selected-node, .map-node.connect-source, .map-node:first-child { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.edge-line { stroke: #a48cf0; stroke-width: 2; }
#arrowhead polygon { fill: #a48cf0; }
.edge-label-pill { min-height: 24px; padding: 2px 4px; border: 0; border-radius: 0; background: var(--sheet); color: var(--muted); font-size: 10px; }
.connect-notice { font-size: 11px; background: var(--accent-soft); }
.studio-selection-menu { position: fixed; z-index: 65; top: 160px; bottom: auto; right: auto; left: 50%; display: flex; align-items: center; flex-wrap: nowrap; width: max-content; max-width: calc(100vw - 16px); gap: 5px; padding: 6px; border: 1px solid #e0dbea; border-radius: 17px; background: #fff; box-shadow: 0 8px 28px #32265d26, 0 2px 6px #32265d0d; animation: selection-menu-in .14s ease-out; }
.studio-selection-menu::before { position: absolute; left: var(--tip-x, 50%); width: 9px; height: 9px; content: ''; background: #fff; transform: translateX(-50%) rotate(45deg); border: solid #e0dbea; border-width: 0 1px 1px 0; }
.studio-selection-menu[data-placement="above"]::before { bottom: -5px; }
.studio-selection-menu[data-placement="below"]::before { top: -5px; transform: translateX(-50%) rotate(225deg); }
.studio-selection-menu:is([data-placement="left"], [data-placement="right"])::before { display: none; }
.studio-selection-menu .btn { min-width: 99px; gap: 9px; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 11px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 500; }
.studio-selection-menu #btn-read-selection { color: var(--accent); background: var(--accent-soft); }
.studio-selection-menu #btn-copy-selection:hover { background: #f5f3f9; }
.studio-selection-menu #btn-copy-selection[data-copied="true"] { color: #367963; background: #eaf5ef; }
.studio-selection-menu img, .studio-selection-menu svg { width: 19px; height: 19px; flex: none; }
.studio-selection-menu.is-offscreen { visibility: hidden; pointer-events: none; }
@keyframes selection-menu-in { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .studio-selection-menu { animation: none; } }
.studio-popover { position: fixed; z-index: 60; top: 56px; right: 22px; width: min(300px, calc(100vw - 24px)); max-height: calc(100dvh - 90px); overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 10px 35px #27213622; color: var(--ink); }
.studio-popover h2 { margin: 0; padding: 9px 10px; font-size: 12px; line-height: 20px; font-weight: 600; }
.studio-popover > button, .studio-original-options button, .studio-palette button { display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: flex-start; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 11px; line-height: 18px; }
.studio-popover > button:hover { background: var(--accent-soft); }
.studio-popover hr { height: 0; margin: 7px 9px; border: 0; border-top: 1px solid var(--line); }
.studio-menu-ink { display: flex; align-items: center; gap: 13px; padding: 8px 10px; font-size: 11px; }
.studio-menu-ink > span { margin-right: auto; color: var(--muted); }
.studio-menu-ink > .btn { min-height: 32px; padding: 4px 7px; font-size: 10px; color: var(--accent); background: var(--accent-soft); }
.studio-menu-history { display: none; gap: 8px; padding: 3px 10px 9px; }
.studio-menu-history button { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: 38px; border: 0; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 11px; }
.map-panel > .node-context-bar { position: absolute; right: 20px; top: 82px; z-index: 20; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.menu-value { margin-left: auto; color: var(--accent); font-size: 10px; }
.studio-popover p { margin: 4px 10px 12px; color: var(--muted); font-size: 12px; line-height: 1.8; }
#studio-original-options .finger-drawing { padding: 6px 10px; font-size: 11px; }
.studio-audio-menu { width: min(350px, calc(100vw - 24px)); }
.studio-audio-menu .native-reading-help { margin: 0; padding: 0; font-size: 11px; }
.studio-audio-menu .native-reading-help[open] { border: 0; max-height: none; }
.studio-audio-menu .native-reading-help > summary { padding: 7px 10px; min-height: 36px; font-size: 11px; }
.studio-audio-menu .reader-alternative { border: 0; }
.studio-audio-menu .reader-tools { padding: 6px 10px; }
.studio-audio-menu > .btn-primary { margin: 5px 0; color: var(--accent); background: var(--accent-soft); }
.studio-palette { width: 210px; }
.studio-palette > button { justify-content: space-between; }
.studio-palette button > span { width: 42px; border-radius: 3px; background: var(--ink); }
#studio-search { width: 310px; }
#studio-search > label { display: block; margin: 8px 7px; font-size: 12px; font-weight: 500; }
#studio-search-input { font-size: 12px; background: #f8f7fb; }
.studio-search-actions { display: flex; align-items: center; gap: 8px; padding: 8px 4px 0; font-size: 11px; color: var(--muted); }
#studio-search-count { flex: 1; }
.studio-search-actions button { width: 32px; height: 32px; border: 0; border-radius: 7px; background: var(--accent-soft); font-size: 18px; color: var(--accent); }
.search-passage { background: #b7d4f790; border-bottom: 2px solid #7563d5; }
.studio-toast, .study-status { position: fixed; z-index: 70; left: 50%; bottom: 55px; transform: translateX(-50%); max-width: min(520px, calc(100vw - 28px)); padding: 11px 16px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12px; box-shadow: 0 5px 20px #302c4520; }
.playback-controls { position: fixed; z-index: 35; bottom: max(66px, calc(env(safe-area-inset-bottom) + 56px)); left: 50%; transform: translateX(-50%); flex-wrap: nowrap; gap: 12px; min-width: 290px; max-width: calc(100vw - 24px); padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 4px 18px #302c4518; }
.studio-playback-wave { flex: none; order: 1; }
#playback-title { min-width: 0; order: 2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; font-weight: 400; color: var(--muted); }
#btn-tts-pause { order: 0; width: auto; min-height: 32px; height: 32px; padding: 4px 6px; border: 0; font-size: 10px; background: transparent; }
#btn-tts-stop { order: 4; min-width: 32px; width: 32px; min-height: 32px; padding: 4px; border: 0; background: transparent; }
.studio-audio-speed { order: 3; min-width: 36px; min-height: 32px; padding: 4px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font-size: 10px; }
.studio-focus .studio-toolbar { height: 60px; min-height: 60px; padding-block: 3px; }
.studio-focus .studio-tool { height: 54px; padding-block: 3px; gap: 2px; }
.studio-reading-guide .studio-stage::after { position: fixed; top: var(--guide-y, 50%); left: 0; right: 0; z-index: 15; height: 32px; border-block: 1px solid #7563d545; background: #7563d50d; content: ''; pointer-events: none; }
[data-layout="notes"] .notes-panel, [data-layout="map"] .map-panel { display: flex; }
[data-layout="notes"] :is(.map-panel, .split-divider), [data-layout="map"] :is(.notes-panel, .split-divider) { display: none; }
[data-layout="notes"] .book-panel, [data-layout="map"] .book-panel { position: fixed; left: -20000px; top: 204px; width: 580px; height: max(400px, calc(100dvh - 270px)); pointer-events: none; }
[data-layout="split"] .sample-page { padding: 42px 48px 26px; }
[data-layout="split"] .studio-sample-title { font-size: 31px; }
[data-layout="split"] .studio-document-body { display: block; }
[data-layout="split"] .studio-document-margin { display: none; }
[data-layout="split"] .studio-prose, [data-layout="split"] .sample-page .sentence-text { font-size: 13px; line-height: 25px; }
[data-layout="split"] .studio-highlight { font-size: 12px; line-height: 19px; }
[data-layout="split"] .notes-heading h2 { font-size: 27px; line-height: 43px; }
[data-layout="split"] .studio-map-heading h2 { font-size: 27px; line-height: 43px; }
.home-header { height: 64px; min-height: 64px; background: #fff; padding-block: 8px; }
.brand { color: var(--ink); font-size: 14px; font-weight: 500; }
.brand-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--accent); font: 500 22px Lora, Georgia, serif; }
.workspaces-container { max-width: 1240px; padding-top: 48px; }
.home-title { font-family: Lora, Georgia, serif; font-size: 42px; line-height: 1.2; letter-spacing: -.025em; font-weight: 400; }
.library-description { font-size: 13px; }
.eyebrow { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.workspaces-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.workspace-card { border-color: #e1dfe7; border-radius: 5px 16px 16px 5px; box-shadow: 0 5px 15px #302c450a; background: var(--sheet); }
.ws-card-cover { --cover-bg: #eeebfc; --cover-ink: #7563d5; min-height: 172px; border-left: 7px solid #7563d544; padding: 22px; }
[data-cover="1"] .ws-card-cover { --cover-bg: #e5eef7; --cover-ink: #5c7898; }
[data-cover="2"] .ws-card-cover { --cover-bg: #f2f4ec; --cover-ink: #6a7957; }
.ws-card-title { font-family: Lora, Georgia, serif; font-size: 20px; line-height: 1.4; font-weight: 400; }
.ws-card-sub { font-size: 11px; }
.book-icon { background: #ffffff80; border-color: #ffffff90; color: inherit; }
.ws-card-cover::before, .ws-card-cover::after { display: none; }
.ws-card-cover.ws-card-cover--preview { align-items: center; justify-content: center; height: 260px; min-height: 260px; padding: 16px; }
.ws-cover-image { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 6px #302c4526); }
.ws-cover-page { width: 160px; height: 226px; flex: none; overflow: hidden; padding: 20px 16px; background: #fffefa; color: var(--ink); box-shadow: 0 3px 8px #302c4520; }
.ws-cover-page strong { display: block; margin-bottom: 14px; font: 400 15px/1.3 Lora, Georgia, serif; }
.ws-cover-page p { margin: 0 0 9px; font-size: 7px; line-height: 1.7; }
#google-tts-status { padding: 10px 12px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 12px; }
#google-tts-status[data-state="setup"] { background: #fff4db; color: #785b1f; }
.google-reader-note { font-size: 10px; color: var(--muted); line-height: 1.6; }
.btn-open-book { font-size: 12px; border: 0; background: var(--accent-soft); }
.btn-text-del { font-size: 11px; }
.modal-overlay { z-index: 90; background: #302c4555; backdrop-filter: blur(3px); }
.modal-card { border-radius: 16px; box-shadow: 0 16px 50px #27213622; background: #fff; }
.modal-card h2 { font: 400 25px/1.4 Lora, Georgia, serif; }
.clean-input { border-color: var(--line); border-radius: 9px; background: #f8f7fb; font-size: 13px; }
.chip { border-color: #d8d2ee; background: var(--accent-soft); color: var(--accent); }

@media (max-width: 1120px) {
  .studio-toolbar { gap: 10px; }
  .studio-writing-tools, .studio-smart-tools { gap: 5px; }
  .studio-tool { width: 58px; }
  .studio-history .studio-icon { width: 32px; padding-inline: 7px; }
  .studio-top-actions { gap: 5px; }
  .sample-page, .notes-sheet { padding-inline: 36px; }
}
@media (max-width: 900px) {
  .top-bar { gap: 8px; padding-inline: 13px; }
  .studio-document { max-width: 28%; }
  .active-title { font-size: 12px; }
  .study-tabs { width: 270px; }
  .studio-top-actions { gap: 0; }
  .studio-top-actions .studio-icon { width: 34px; padding-inline: 8px; }
  .studio-toolbar { gap: 8px; padding-inline: 10px; }
  .studio-tool { width: 49px; font-size: 9px; }
  .studio-writing-tools, .studio-smart-tools { gap: 2px; }
  .studio-history { display: none; }
  .studio-menu-history { display: flex; }
  .studio-toolbar > .studio-separator:first-of-type { display: none; }
  .sample-page, .notes-sheet, [data-layout="split"] .sample-page { padding-inline: 28px; }
  .studio-document-body { grid-template-columns: minmax(0, 1fr) 180px; gap: 24px; }
  .studio-river-card { padding: 17px 14px; }
  .studio-map-heading { padding-inline: 28px; }
  .map-canvas-viewport { margin-inline: 28px; }
}
@media (max-width: 699px) {
  .top-bar { height: auto; min-height: calc(99px + env(safe-area-inset-top)); padding: calc(8px + env(safe-area-inset-top)) 12px 44px; gap: 6px; }
  .studio-document { flex: 1; max-width: none; }
  .studio-top-actions { gap: 0; }
  .top-bar > .studio-icon { width: 32px; padding-inline: 7px; }
  .study-tabs { top: auto; bottom: 7px; left: 12px; right: 12px; width: auto; transform: none; height: 32px; }
  .study-tabs .tab { height: 28px; min-height: 28px; }
  .studio-toolbar { min-height: 74px; height: 74px; justify-content: space-between; gap: 3px; padding: 7px 9px; }
  .studio-tool { min-width: 37px; width: 45px; height: 58px; gap: 4px; font-size: 8px; }
  .studio-writing-tools { gap: 0; flex: 1; justify-content: space-between; }
  .studio-smart-tools { gap: 0; }
  .studio-smart-tools .studio-tool { width: 44px; }
  .studio-toolbar > .studio-separator { display: none; }
  #studio-focus { display: none; }
  .sample-page { padding: 28px 24px 24px; min-height: 629px; }
  .studio-sample-title { font-size: 31px; }
  .studio-document-body { display: block; }
  .studio-document-margin { display: none; }
  .studio-prose, .sample-page .sentence-text { font-size: 14px; line-height: 27px; }
  .studio-sample-deck { font-size: 11px; line-height: 21px; }
  .studio-chapter { font-size: 8px; letter-spacing: .8px; }
  .notes-sheet { padding: 28px 24px 24px; }
  .notes-heading h2 { font-size: 30px; }
  [data-layout="split"] .book-panel { flex: 0 0 34%; }
  .studio-map-heading { padding: 26px 22px 0; }
  .studio-map-heading h2 { font-size: 27px; line-height: 42px; }
  .map-canvas-viewport { margin-inline: 20px; }
  .studio-popover { top: calc(52px + env(safe-area-inset-top)); right: 12px; }
}
@media (max-width: 390px) {
  .studio-tool { width: 35px; font-size: 7px; }
  .studio-smart-tools .studio-tool { width: 37px; }
  .studio-writing-tools { gap: 0; }
  .studio-toolbar { padding-inline: 5px; gap: 1px; }
}

.studio-tool-setting { display: flex; align-items: center; gap: 10px; padding: 10px; font-size: 12px; }
.studio-tool-setting input[type="color"] { margin-left: auto; width: 44px; height: 32px; }
.studio-palette button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }

.library-device-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.library-device-bar > span { flex: 1; min-width: 150px; font-size: 12px; color: var(--muted); }
.backup-card { display: block; max-width: 640px; width: 100%; max-height: 90dvh; overflow-y: auto; }
.backup-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.backup-card h3 { font-size: 15px; margin: 14px 0 8px; }
.backup-card p, #install-help-modal p { font-size: 13px; line-height: 1.7; margin: 12px 0; }
.backup-card hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.backup-card .btn { margin: 4px 4px 4px 0; }
.backup-message { padding: 12px; border-radius: 9px; background: var(--accent-soft); }
.backup-message:empty, #backup-preview:empty { display: none; }
#backup-preview { max-height: 140px; overflow-y: auto; font-size: 13px; padding-left: 20px; }
#backup-folder-stop[hidden] { display: none; }

/* Inserimento veloce e collegamenti direttamente sulle idee. */
.map-insert-menu { position: fixed; z-index: 85; display: flex; gap: 4px; padding: 5px; border: 1px solid #e8e3ef; border-radius: 15px; background: #fff; box-shadow: 0 5px 22px #38304a14; }
.map-insert-menu > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 64px; height: 57px; border: 0; border-radius: 10px; padding: 6px; background: transparent; color: #716184; font: 500 10px/14px Inter, sans-serif; cursor: pointer; }
.map-insert-menu > button > svg { width: 22px; height: 22px; }
.map-insert-menu button:hover, .map-insert-menu button:focus-visible { background: #f4f0fc; color: var(--accent); outline: none; }
.map-insert-menu button:focus-visible { box-shadow: inset 0 0 0 1.5px var(--accent); }
.map-insert-picker { display: grid; grid-template-columns: repeat(4, 1fr); width: min(276px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto; }
.map-insert-picker > button { width: auto; height: 44px; font-size: 24px; }
.map-insert-picker .map-picker-back { grid-column: 1 / -1; align-items: start; height: 28px; font-size: 11px; }
.map-node.map-item-text, .map-node.map-item-icon { background: transparent; border-color: transparent; box-shadow: none; }
.map-node.map-item-text { width: 200px; min-height: 48px; padding: 12px 15px; align-items: flex-start; text-align: left; }
.map-node.map-item-text .node-title-text { white-space: pre-wrap; }
.map-node.map-item-icon { width: 76px; height: 76px; min-height: 76px; padding: 6px; }
span.map-item-icon { font: 48px/1.2 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; }
.map-item-icon + .node-title-text { display: none; }
.map-node.map-item-shape { min-height: 68px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); padding: 12px 15px; isolation: isolate; }
.map-node.map-item-shape.selected-node, .map-node.map-item-shape.connect-source { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.map-item-shape .node-title-text { white-space: pre-wrap; min-height: 22px; }
.map-node.map-item-shape:not([data-shape="idea"]) { min-height: 100px; padding: 25px 45px; border: 0; background: transparent; box-shadow: none; }
.map-item-shape > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.map-inline-editor { position: absolute; z-index: 4; resize: none; overflow: hidden; border: 1px solid var(--accent); border-radius: 12px; padding: 21px 15px; background: #fff; color: var(--ink); text-align: center; font: 500 14px/22px Inter, sans-serif; outline: none; box-shadow: none; user-select: text; -webkit-user-select: text; }
.map-editor-shape { background: var(--accent-soft); color: var(--accent); }
.map-editing .node-title-text { visibility: hidden; }
.map-node { overflow: visible; }
.map-node:has(.map-port):is(.selected-node,.map-editing,:focus-within,:hover) { z-index: 6; }
.map-node.map-editing { z-index: 3; }
.map-port { position: absolute; z-index: 8; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: crosshair; touch-action: none; opacity: 0; pointer-events: none; }
.map-port::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 1.5px solid #a897d0; box-shadow: 0 0 0 3px #fffefa; }
.map-port:hover::after, .map-port[aria-pressed="true"]::after { background: var(--accent); border-color: var(--accent); }
.map-port:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.map-port-top { top: -14px; left: calc(50% - 14px); }
.map-port-bottom { bottom: -14px; left: calc(50% - 14px); }
.map-port-left { left: -14px; top: calc(50% - 14px); }
.map-port-right { right: -14px; top: calc(50% - 14px); }
.map-node:is(.selected-node,:hover,:focus-within) .map-port, .map-connecting .map-port { opacity: 1; pointer-events: auto; }
#map-link-preview { fill: none; stroke: #a897d0; stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }
.map-empty-link { opacity: 0; font-size: 12px; padding: 2px 7px; }
.map-empty-link:hover, .map-empty-link:focus-visible { opacity: 1; }

.studio-zoom-step { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; flex: none; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font: 20px/1 Inter, sans-serif; cursor: pointer; }
.studio-zoom-step:hover { background: var(--accent-soft); color: var(--accent); }
.studio-zoom-step:disabled { opacity: .3; cursor: default; }
.studio-zoom { margin-left: 0; min-width: 64px; justify-content: center; }
.notes-content { padding-bottom: 60px; }

/* Il pinch modifica il foglio, senza ingrandire l’interfaccia di Safari. */
.book-content, .notes-content, .map-canvas-viewport { touch-action: pan-x pan-y; }
.lasso-surface[data-active="true"] { touch-action: none; }

/* Libro aperto: due fogli affiancati solo nella vista Libro in orizzontale. */
#book-spread.is-spread { display: flex; align-items: flex-start; gap: 16px; width: 1312px; padding: 16px 8px; }
#book-spread.is-spread > .pdf-page-container { flex: 0 0 640px; width: 640px; min-width: 0; margin: 0; position: relative; border: 1px solid #e2dfe8; border-radius: 3px; overflow: hidden; box-shadow: 0 3px 14px #38304a0a; }
#book-spread.is-spread > #pdf-page-container { border-color: #c9bde6; }
#book-spread.is-spread .sample-page { min-height: 880px; padding: 34px 34px 24px; }
#book-spread.is-spread .studio-sample-title { font-size: 33px; }
#book-spread.is-spread .studio-document-body { grid-template-columns: 1fr; gap: 22px; }
#book-spread.is-spread .studio-document-margin { display: flex; gap: 18px; align-items: center; }
#book-spread.is-spread .studio-river-card { flex: 1; }
#book-spread.is-spread .studio-handnote { flex: 1; }
#book-companion-page { cursor: pointer; }
#book-companion-page > canvas { display: block; width: 100%; height: auto; }
.book-companion-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#book-companion-page:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#book-spread-range { border: 0; background: transparent; padding: 4px; cursor: pointer; color: var(--accent); font-size: 11px; white-space: nowrap; }
#book-spread-range:not([hidden]) + #page-num-input { display: none; }
.book-double-page .book-content { padding-bottom: 64px; }