/* Libreria grafica v1.3.0 · base: variabili del tema (giorno/notte, accento) e regole generali. Si installa una volta per progetto; le grafiche aggiungono solo le loro regole. */
:root { --accent: #6A5BF2; --accent-rgb: 106 91 242; --accent-2: #AD3AEF; --accent-2-rgb: 173 58 239; --accent-3-rgb: 91 214 242; --on-accent: #FFFFFF; --accent-text-l: #5543F0; --accent-text-d: #9E94F6; --accent-2-text-l: #9712E4; --accent-2-text-d: #CA81F5; --accent-ui-l: #6A5BF2; --accent-ui-d: #6A5BF2; --glow: 1; --blur: 22; --rs: 1; --lite: 0; --motion: 1; --blur-px: calc(var(--blur) * 1px); --bf: blur(var(--blur-px)) saturate(1.55); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --t-cap: 12px; --t-meta: 13px; --t-sm: 15px; --t-body: 16px; --t-lg: 18px; --t-title: 22px; --t-xl: 28px; --t-hero: 34px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px; --r-xs: calc(6px * var(--rs)); --r-s: calc(10px * var(--rs)); --r-m: calc(14px * var(--rs)); --r-l: calc(20px * var(--rs)); --r-xl: calc(28px * var(--rs)); --r-btn: calc(26px * var(--rs)); --r-chip: calc(18px * var(--rs)); --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --d1: 140ms; --d2: 240ms; --d3: 420ms; --sat: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)); --sab: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)); --sal: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px)); --sar: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px)); }
html.fullscreen { --sat: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px)); }
html[data-fx="lite"] { --lite: 1; --bf: none; --glow: .3; }
html[data-motion="off"] { --motion: 0; }
:root, [data-theme="light"] { color-scheme: light; --bg: #F4F5FA; --bg-2: #E9ECF6; --surface: #FFFFFF; --surface-2: #F0F2F9; --surface-3: #E4E8F4; --text: #12131C; --muted: #575B72; --faint: #666A85; --line: rgba(18, 19, 28, .08); --line-2: rgba(18, 19, 28, .14); --border: #8E92A8; --glass-rgb: 255 255 255; --glass-alpha: .64; --glass-solid: #FFFFFF; --glass-line: rgba(255, 255, 255, .8); --glass-hi: rgba(255, 255, 255, .95); --glass-edge: rgba(18, 19, 28, .07); --scrim: rgba(22, 24, 44, .36); --shadow-1: 0 1px 2px rgba(30, 34, 80, .05), 0 5px 16px rgba(30, 34, 80, .07); --shadow-2: 0 2px 6px rgba(30, 34, 80, .06), 0 16px 38px rgba(30, 34, 80, .13); --shadow-3: 0 4px 12px rgba(30, 34, 80, .08), 0 30px 70px rgba(30, 34, 80, .22); --glow-a: .36; --glow-c: rgb(var(--accent-rgb) / calc(var(--glow-a) * var(--glow))); --ok: #08795A; --ok-soft: rgba(16, 185, 129, .15); --warn: #965200; --warn-soft: rgba(245, 165, 36, .22); --err: #C42B1C; --err-soft: rgba(239, 68, 68, .13); --info: #1D5FD0; --info-soft: rgba(47, 123, 246, .14); --ok-f: #10B981; --warn-f: #F5A524; --err-f: #EF4444; --info-f: #2F7BF6; --stage: #EDEFFA; --stage-a: .30; --accent-ui: var(--accent-ui-l); --accent-text: var(--accent-text-l); --accent-2-text: var(--accent-2-text-l); --soft: rgb(var(--accent-rgb) / .12); --soft-2: rgb(var(--accent-rgb) / .20); --inv-bg: #12131C; --inv-text: #F4F5FA; --viz-1: #2A78D6; --viz-2: #EB6834; --viz-3: #1BAF7A; --viz-4: #EDA100; --viz-5: #E87BA4; --viz-6: #008300; --viz-7: #4A3AA7; --viz-8: #E34948; --viz-mute: #9EA3BA; --heat-0: var(--surface-2); --heat-1: color-mix(in oklab, var(--accent-ui) 34%, var(--surface)); --heat-2: color-mix(in oklab, var(--accent-ui) 56%, var(--surface)); --heat-3: color-mix(in oklab, var(--accent-ui) 78%, var(--surface)); --heat-4: var(--accent-ui); --ord-1: var(--accent-ui); --ord-2: color-mix(in oklab, var(--accent-ui) 80%, var(--text)); --ord-3: color-mix(in oklab, var(--accent-ui) 62%, var(--text)); --ord-4: color-mix(in oklab, var(--accent-ui) 46%, var(--text)); }
[data-theme="dark"] { color-scheme: dark; --bg: #0B0C14; --bg-2: #10111B; --surface: #161824; --surface-2: #1D2030; --surface-3: #272B40; --text: #F2F3FA; --muted: #A4A8C0; --faint: #8A8EAA; --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16); --border: #7A7F9C; --glass-rgb: 30 33 54; --glass-alpha: .56; --glass-solid: #1B1E2E; --glass-line: rgba(255, 255, 255, .13); --glass-hi: rgba(255, 255, 255, .17); --glass-edge: rgba(0, 0, 0, .35); --scrim: rgba(3, 4, 10, .62); --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35); --shadow-2: 0 2px 6px rgba(0, 0, 0, .45), 0 18px 42px rgba(0, 0, 0, .5); --shadow-3: 0 4px 12px rgba(0, 0, 0, .5), 0 32px 74px rgba(0, 0, 0, .66); --glow-a: .6; --glow-c: rgb(var(--accent-rgb) / calc(var(--glow-a) * var(--glow))); --ok: #34D399; --ok-soft: rgba(52, 211, 153, .16); --warn: #FBBF24; --warn-soft: rgba(251, 191, 36, .16); --err: #F87171; --err-soft: rgba(248, 113, 113, .16); --info: #7DB2FF; --info-soft: rgba(96, 165, 250, .16); --ok-f: #10B981; --warn-f: #F5A524; --err-f: #EF4444; --info-f: #3B82F6; --stage: #0D0E19; --stage-a: .46; --accent-ui: var(--accent-ui-d); --accent-text: var(--accent-text-d); --accent-2-text: var(--accent-2-text-d); --soft: rgb(var(--accent-rgb) / .20); --soft-2: rgb(var(--accent-rgb) / .32); --inv-bg: #F2F3FA; --inv-text: #12131C; --viz-1: #3987E5; --viz-2: #D95926; --viz-3: #199E70; --viz-4: #C98500; --viz-5: #D55181; --viz-6: #008300; --viz-7: #9085E9; --viz-8: #E66767; --viz-mute: #5C6283; --heat-0: var(--surface-2); --heat-1: color-mix(in oklab, var(--accent-ui) 36%, var(--surface)); --heat-2: color-mix(in oklab, var(--accent-ui) 58%, var(--surface)); --heat-3: color-mix(in oklab, var(--accent-ui) 80%, var(--surface)); --heat-4: var(--accent-ui); --ord-1: var(--accent-ui); --ord-2: color-mix(in oklab, var(--accent-ui) 80%, var(--text)); --ord-3: color-mix(in oklab, var(--accent-ui) 62%, var(--text)); --ord-4: color-mix(in oklab, var(--accent-ui) 46%, var(--text)); }
*, *::before, *::after { box-sizing: border-box; }
.ds-i { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ds-i--sm { width: 1em; height: 1em; }
.ds-i--lg { width: 1.6em; height: 1.6em; }
.ds-i--xl { width: 2.2em; height: 2.2em; }
.ds-i--fill { fill: currentColor; }
.ds-i--thin { stroke-width: 1.4; }
.ds-i--bold { stroke-width: 2.3; }
.ds-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ds-focus:focus-visible, .ds-btn:focus-visible, .ds-ibtn:focus-visible, .ds-pill:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 2px; }
:where([class^="ds-"], [class*=" ds-"]):where(button, input, select, textarea), :where([class^="ds-"], [class*=" ds-"]) :where(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; }
:where([class^="ds-"], [class*=" ds-"]):where(button), :where([class^="ds-"], [class*=" ds-"]) :where(button) { padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
:where([class^="ds-"], [class*=" ds-"])[hidden], :where([class^="ds-"], [class*=" ds-"]) [hidden] { display: none !important; }
:where([class^="ds-"], [class*=" ds-"]):where(p, h1, h2, h3, h4, h5, h6), :where([class^="ds-"], [class*=" ds-"]) :where(p, h1, h2, h3) { margin: 0; }
.ds-row { display: flex; align-items: center; gap: var(--s3); }
.ds-col { display: flex; flex-direction: column; gap: var(--s3); }
.ds-wrap { flex-wrap: wrap; }
.ds-grow { flex: 1; min-width: 0; }
.ds-center { justify-content: center; text-align: center; }
.ds-between { justify-content: space-between; }
.ds-end { justify-content: flex-end; }
.ds-start { align-items: flex-start; }
.ds-stretch { align-items: stretch; }
.ds-gap-1 { gap: var(--s1); }
.ds-gap-2 { gap: var(--s2); }
.ds-gap-3 { gap: var(--s3); }
.ds-gap-4 { gap: var(--s4); }
.ds-gap-5 { gap: var(--s5); }
.ds-w-full { width: 100%; }
.ds-hide { display: none !important; }
.ds-clip { overflow: hidden; }
.ds-rel { position: relative; }
.ds-scroll-x { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.ds-scroll-x::-webkit-scrollbar { display: none; }
.ds-scroll-x > * { scroll-snap-align: start; flex: none; }
.ds-media { position: relative; overflow: hidden; background: var(--surface-2); aspect-ratio: var(--ar, 4 / 3); }
.ds-media > img, .ds-media > .ds-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-ar-1 { --ar: 1 / 1; }
.ds-ar-43 { --ar: 4 / 3; }
.ds-ar-32 { --ar: 3 / 2; }
.ds-ar-169 { --ar: 16 / 9; }
.ds-ar-45 { --ar: 4 / 5; }
.ds-ar-34 { --ar: 3 / 4; }
.ds-round { border-radius: 50%; }
.ds-r-m { border-radius: var(--r-m); }
.ds-r-l { border-radius: var(--r-l); }
.ds-r-xl { border-radius: var(--r-xl); }
.ds-divider { height: 1px; border: 0; margin: 0; background: var(--line); flex: none; }
.ds-divider--grad { height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / .7), transparent); }
.ds-divider--v { width: 1px; height: auto; align-self: stretch; }
.ds-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.ds-dot--live { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .6); animation: ds-ping calc(1.8s / max(var(--motion), .001)) ease-out infinite; }
@keyframes ds-ping { 0% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .55); } 80%, 100% { box-shadow: 0 0 0 10px rgb(var(--accent-rgb) / 0); } }
@media (prefers-reduced-motion: reduce) {
  .ds-dot--live { animation: none; }
}
[data-ds-dismissible][hidden], .ds-sr-only[hidden] { display: none !important; }
.ds-tone-blue { --c1: #2563EB; --c2: #1D4ED8; }
.ds-tone-green { --c1: #107C41; --c2: #0B5E31; }
.ds-tone-orange { --c1: #C2410C; --c2: #9A3412; }
.ds-tone-red { --c1: #DC2626; --c2: #B91C1C; }
.ds-tone-pink { --c1: #DB2777; --c2: #BE185D; }
.ds-tone-teal { --c1: #0F766E; --c2: #115E59; }
.ds-tone-slate { --c1: #64748B; --c2: #475569; }
.ds-tone-violet { --c1: #7C3AED; --c2: #6D28D9; }
.ds-tone-cyan { --c1: #0E7490; --c2: #155E75; }
.ds-tone-amber { --c1: #FBBF24; --c2: #F59E0B; --ink: #3B2600; }
.ds-done { width: 84px; height: 84px; overflow: visible; filter: drop-shadow(0 0 calc(10px * var(--glow)) rgb(16 185 129 / .55)); }
.ds-done circle { fill: none; stroke: #14B07E; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 151; stroke-dashoffset: 151; transform-origin: center; transform: rotate(-90deg); }
.ds-done path { fill: none; stroke: #14B07E; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.is-in .ds-done circle, .ds-done.is-in circle { animation: ds-draw calc(.7s * var(--motion)) var(--ease) forwards; }
.is-in .ds-done path, .ds-done.is-in path { animation: ds-draw calc(.45s * var(--motion)) var(--ease) .55s forwards; }
@keyframes ds-draw { to { stroke-dashoffset: 0; } }
html[data-motion="off"] .ds-done circle, html[data-motion="off"] .ds-done path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .ds-done circle, .ds-done path { stroke-dashoffset: 0; }
}