/* Pagine informative del sito (privacy, cookie): stesso tema "quaderno" della home e dell'app. */
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/quicksand-latin.woff2) format('woff2'); }
@font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/permanent-marker-latin.woff2) format('woff2'); }
:root { color-scheme: light;
  --bg: #fdfcf8; --bg-line: #e6e2d2; --panel: #ffffff; --ink: #201c17; --ink-2: #413a2f; --ink-3: #6d6250;
  --soft: #f4f2ea; --line: #d3cdb4; --brand: #c8544a; --brand-soft: #fbeae5; --ok: #1f7a3d; --on-brand: #ffffff; --shadow: 0 2px 0 rgba(32,28,23,.12); }
:root[data-theme="dark"] { color-scheme: dark;
  --bg: #201c17; --bg-line: #3c3526; --panel: #2b2720; --ink: #f4f0e6; --ink-2: #d8cfb9; --ink-3: #a89a7e;
  --soft: #26221a; --line: #4a4231; --brand: #e08379; --brand-soft: #2e2019; --ok: #6fd08c; --on-brand: #201c17; --shadow: 0 2px 0 rgba(0,0,0,.35); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4rem; }
body { margin: 0; font-family: 'Quicksand', system-ui, sans-serif; font-weight: 500; color: var(--ink); background-color: var(--bg);
  background-image: repeating-linear-gradient(var(--bg) 0 34px, var(--bg-line) 34px 35px); line-height: 1.6; overflow-x: clip; }
::selection { background: var(--brand-soft); color: var(--ink); }
a { color: inherit; }
h1, h2, h3, .marker { font-family: 'Permanent Marker', cursive; font-weight: 400; letter-spacing: 0; }
.wrap { width: min(820px, 100% - 2rem); margin-inline: auto; }

@media (hover: hover) and (pointer: fine) {
  :root { --cur: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23201c17' stroke-width='1.8' stroke-linejoin='round'><path d='M2 2 13 13'/><path d='M2 2 9 22 13 13 22 9 2 2Z' fill='%23ffffff'/></svg>") 2 2, pointer; }
  :root[data-theme="dark"] { --cur: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23f4f0e6' stroke-width='1.8' stroke-linejoin='round'><path d='M2 2 13 13'/><path d='M2 2 9 22 13 13 22 9 2 2Z' fill='%23201c17'/></svg>") 2 2, pointer; }
  body, a, button, summary { cursor: var(--cur) !important; }
}

.top { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 3.4rem; width: min(1080px, 100% - 2rem); }
.brand { font-family: 'Permanent Marker', cursive; font-size: 1.5rem; text-decoration: none; display: inline-block; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
@media (hover: hover) { .brand:hover { transform: rotate(-3deg) scale(1.06); } }
.top nav { display: flex; align-items: center; gap: 1rem; font-weight: 700; font-size: .92rem; }
.top nav a { text-decoration: none; color: var(--ink-2); padding: .7rem .35rem; }
.top nav a:hover { color: var(--ink); text-decoration: underline wavy var(--brand); text-underline-offset: 5px; }
.theme-btn { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--panel); color: var(--ink); display: grid; place-items: center; padding: 0; cursor: pointer; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
@media (hover: hover) { .theme-btn:hover { transform: rotate(40deg) scale(1.08); } }
.theme-btn svg { width: 1.1rem; height: 1.1rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* stessa entrata della pagina di accesso dell'app: titolo scritto, poi la pagina si volta */
.head { padding: 3rem 0 1.4rem; text-align: center; }
.head h1 { margin: 0; font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1.1; text-wrap: balance; }
.head p { margin: .6rem auto 0; color: var(--ink-2); max-width: 36rem; }
.updated { font-size: .85rem; color: var(--ink-3); font-weight: 600; margin-top: .4rem; }
.js .head h1 { animation: qb-write 1.1s cubic-bezier(.65,.05,.36,1) .15s backwards; }
.js .head p { animation: qb-fade-up .5s ease .9s backwards; }
.js .doc { animation: qb-page-turn .7s cubic-bezier(.22,.85,.32,1) .8s backwards; transform-origin: top center; }
@keyframes qb-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-.2em -.2em -.2em 0); } }
@keyframes qb-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes qb-page-turn { 0% { opacity: 0; transform: perspective(1300px) rotateX(-75deg) translateY(22px); } 60% { opacity: 1; } 100% { opacity: 1; transform: perspective(1300px) rotateX(0deg) translateY(0); } }

.paper { position: relative; background: var(--panel); border: 2px solid var(--ink); border-radius: 4px 14px 4px 14px; padding: 1.6rem 1.5rem; box-shadow: var(--shadow); }
.paper::before { content: ''; position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); border-radius: 0 6px 0 8px;
  background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, black 16%, var(--panel)) 50%); }
.doc { margin-bottom: 3rem; }
.doc h2 { font-size: 1.45rem; line-height: 1.2; margin: 2rem 0 .5rem; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 1.1rem; margin: 1.2rem 0 .3rem; }
.doc p, .doc li { color: var(--ink-2); }
.doc p { margin: .5rem 0; text-wrap: pretty; }
.doc ul { padding-left: 1.2rem; margin: .5rem 0; }
.doc li { margin: .25rem 0; }
.doc b, .doc strong { color: var(--ink); }
.toc { background: var(--soft); border: 2px dashed var(--line); border-radius: 4px 12px 4px 12px; padding: .8rem 1rem; margin: 0 0 1.4rem; font-size: .92rem; }
.toc b { font-family: 'Permanent Marker', cursive; font-weight: 400; display: block; margin-bottom: .2rem; }
.toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 1.6rem; }
.toc a { text-decoration: none; font-weight: 600; } .toc a:hover { text-decoration: underline wavy var(--brand); text-underline-offset: 3px; }
@media (max-width: 600px) { .toc ol { columns: 1; } .paper { padding: 1.3rem 1.1rem; } }
.tbl { overflow-x: auto; margin: .8rem 0; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 34rem; }
th, td { text-align: left; vertical-align: top; padding: .55rem .6rem; border-bottom: 1.5px dashed var(--line); }
th { font-family: 'Permanent Marker', cursive; font-weight: 400; font-size: .95rem; color: var(--ink); border-bottom: 2px solid var(--ink); }
td { color: var(--ink-2); } td:first-child { color: var(--ink); font-weight: 700; white-space: nowrap; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .86em; background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: .05rem .3rem; }
.todo { background: color-mix(in srgb, #e5a83d 30%, transparent); border-radius: 3px; padding: 0 .2em; font-weight: 700; color: var(--ink); }
.note { border-left: 4px solid var(--brand); padding: .2rem .9rem; margin: 1rem 0; background: var(--brand-soft); border-radius: 0 8px 8px 0; }
.back { display: inline-block; margin: 0 0 1rem; font-weight: 700; text-decoration: none; color: var(--ink-2); padding: .5rem 0; }
.back:hover { color: var(--ink); text-decoration: underline wavy var(--brand); text-underline-offset: 4px; }

footer { border-top: 1px solid var(--line); padding: 1.4rem 0 2.2rem; color: var(--ink-3); font-size: .86rem; background: var(--bg); }
footer .wrap { width: min(1080px, 100% - 2rem); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem; }
footer a { color: var(--ink-2); display: inline-block; padding: .55rem .3rem; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }
@media print { .top, footer, .toc, .back { display: none; } body { background: #fff; color: #000; } .paper { border: 0; box-shadow: none; padding: 0; } .paper::before { display: none; } .doc * { color: #000 !important; } .js .head h1, .js .head p, .js .doc { animation: none !important; } }