diff --git a/README.md b/README.md
index 640ba33..0fc9b14 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 [![Sito](https://img.shields.io/badge/Sito-rainbowbits.cloud-1d68e1?logo=googlechrome&logoColor=white)](https://www.rainbowbits.cloud/python-doesnt-byte/)
 ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/marcofarina/python-doesnt-byte/.github%2Fworkflows%2Fdeploy.yml?label=deploy)
-![Version](https://img.shields.io/badge/Book%20version-0.6.1-orange)
+![Version](https://img.shields.io/badge/Book%20version-0.7.0-orange)
 ![Docusaurus](https://img.shields.io/badge/Built%20with-Docusaurus%203-3ECC5F?logo=docusaurus&logoColor=white)
 ![Python 3.12](https://img.shields.io/badge/Python-3.12-4584b6?logo=python&labelColor=ffde57)
 [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](code_of_conduct.md)
diff --git a/package-lock.json b/package-lock.json
index ff652cd..c7fc9b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "python-doesnt-byte",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "python-doesnt-byte",
-      "version": "0.6.1",
+      "version": "0.7.0",
       "dependencies": {
         "@codemirror/commands": "^6.10.3",
         "@codemirror/lang-python": "^6.2.1",
diff --git a/package.json b/package.json
index a1b01aa..1dbfc90 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "python-doesnt-byte",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
diff --git a/src/components/Algorithm/styles.module.css b/src/components/Algorithm/styles.module.css
index 312a3bf..4065f8a 100644
--- a/src/components/Algorithm/styles.module.css
+++ b/src/components/Algorithm/styles.module.css
@@ -18,7 +18,7 @@
   --alg-st-sorted: #334155;
   --alg-st-key: #9333ea;
   border: 1px solid var(--at-border);
-  border-radius: 18px;
+  border-radius: var(--radius-lg);
   background: var(--at-bg-panel);
   backdrop-filter: blur(8px);
   margin: 1.4em 0;
@@ -62,7 +62,7 @@
 .tlDot {
   width: 12px;
   height: 12px;
-  border-radius: 50%;
+  border-radius: var(--radius-circle);
   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2);
 }
 .tlClose {
@@ -102,7 +102,7 @@
   font-size: 0.72rem;
   color: var(--at-muted-soft);
   padding: 0 11px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   background: var(--at-bg-chip);
   border: 1px solid var(--at-border);
 }
@@ -114,7 +114,7 @@
   gap: 2px;
   margin-left: 10px;
   padding: 3px;
-  border-radius: 9px;
+  border-radius: var(--radius-sm);
   background: var(--at-bg-chip);
   border: 1px solid var(--at-border);
 }
@@ -126,7 +126,7 @@
   height: 24px;
   padding: 0 10px;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-xs);
   background: transparent;
   color: var(--at-muted);
   font-family: var(--font-mono-ui);
@@ -134,12 +134,17 @@
   font-weight: 600;
   cursor: pointer;
   transition:
-    background 0.15s ease,
-    color 0.15s ease;
+    background 0.15s var(--ease-smooth),
+    color 0.15s var(--ease-smooth),
+    transform 0.15s var(--ease-smooth);
 }
 .segBtn:hover {
   color: var(--at-fg);
 }
+.segBtn:active {
+  transform: scale(0.98);
+  transition-duration: var(--dur-fast);
+}
 .segBtnOn {
   background: var(--at-bg-panel);
   color: var(--at-accent);
@@ -161,21 +166,26 @@
   justify-content: center;
   width: 30px;
   height: 30px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   background: var(--at-bg-chip);
   border: 1px solid var(--at-border-strong);
   color: var(--at-muted);
   font-size: 0.92rem;
   cursor: pointer;
   transition:
-    background 0.15s ease,
-    border-color 0.15s ease,
-    color 0.15s ease;
+    background 0.15s var(--ease-smooth),
+    border-color 0.15s var(--ease-smooth),
+    color 0.15s var(--ease-smooth),
+    transform 0.15s var(--ease-smooth);
 }
 .toggleBtn:hover {
   color: var(--at-fg);
   border-color: var(--at-accent-chip-border);
 }
+.toggleBtn:active {
+  transform: scale(0.98);
+  transition-duration: var(--dur-fast);
+}
 .toggleBtnOn {
   background: var(--at-accent-chip);
   border-color: var(--at-accent-chip-border);
@@ -274,8 +284,8 @@
   transition:
     transform var(--alg-dur) cubic-bezier(0.34, 1.1, 0.38, 1),
     height var(--alg-dur) cubic-bezier(0.34, 1.1, 0.38, 1),
-    box-shadow 0.25s ease,
-    opacity var(--alg-dur) ease;
+    box-shadow 0.25s var(--ease-smooth),
+    opacity var(--alg-dur) var(--ease-smooth);
 }
 
 .barValue {
@@ -312,14 +322,14 @@
   font-family: var(--font-mono-ui);
   font-size: 0.8rem;
   padding: 3px 10px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   background: var(--at-accent-chip);
   border: 1px solid var(--at-accent-chip-border);
   color: var(--at-fg);
   white-space: nowrap;
   transition:
-    border-color var(--alg-dur) ease,
-    box-shadow var(--alg-dur) ease;
+    border-color var(--alg-dur) var(--ease-smooth),
+    box-shadow var(--alg-dur) var(--ease-smooth);
 }
 .targetChipActive {
   border-color: var(--at-accent);
@@ -337,11 +347,11 @@
   font-family: var(--font-mono);
   font-size: 0.72rem;
   font-weight: 600;
-  border-radius: 6px;
+  border-radius: var(--radius-xs);
   background: var(--at-bg-chip);
   border: 1px solid var(--at-border);
   color: var(--at-fg);
-  transition: left var(--alg-dur) ease;
+  transition: left var(--alg-dur) var(--ease-smooth);
 }
 
 /* Indicatore di posizione corrente (cursore di scansione) */
@@ -371,7 +381,7 @@
   line-height: 1.3;
   color: #fff;
   background: var(--at-accent);
-  border-radius: 5px;
+  border-radius: var(--radius-xs);
   padding: 0 6px;
 }
 
@@ -385,8 +395,8 @@
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   transition:
-    left var(--alg-dur) ease,
-    width var(--alg-dur) ease;
+    left var(--alg-dur) var(--ease-smooth),
+    width var(--alg-dur) var(--ease-smooth);
 }
 
 .rangeLabel {
@@ -427,7 +437,7 @@
   font-size: 0.66rem;
   color: var(--at-muted);
   padding: 3px 7px;
-  border-radius: 6px;
+  border-radius: var(--radius-xs);
   background: var(--at-bg-chip);
   margin-right: 8px;
   vertical-align: middle;
@@ -461,7 +471,7 @@
 .legendSwatch {
   width: 11px;
   height: 11px;
-  border-radius: 50%;
+  border-radius: var(--radius-circle);
   flex-shrink: 0;
   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25);
 }
@@ -504,15 +514,15 @@
   width: 30px;
   height: 30px;
   border: 1px solid var(--at-border-strong);
-  border-radius: 50%;
+  border-radius: var(--radius-circle);
   background: transparent;
   color: var(--at-muted);
   font-size: 0.82rem;
   cursor: pointer;
   transition:
-    background 0.15s ease,
-    border-color 0.15s ease,
-    color 0.15s ease;
+    background 0.15s var(--ease-smooth),
+    border-color 0.15s var(--ease-smooth),
+    color 0.15s var(--ease-smooth);
 }
 .copyBtn:hover {
   background: var(--at-accent-chip);
@@ -538,7 +548,7 @@
   position: absolute;
   inset: 0;
   transition:
-    opacity 0.2s ease,
+    opacity 0.2s var(--ease-smooth),
     transform 0.2s cubic-bezier(0.34, 1.4, 0.5, 1);
 }
 .copyBtnCheck {
@@ -568,8 +578,8 @@
   line-height: 1.8;
   border-left: 2px solid transparent;
   transition:
-    background 0.25s ease,
-    border-color 0.25s ease;
+    background 0.25s var(--ease-smooth),
+    border-color 0.25s var(--ease-smooth);
 }
 .codeLineOn {
   background: var(--at-accent-chip);
@@ -665,7 +675,7 @@
 .statusDot {
   width: 8px;
   height: 8px;
-  border-radius: 50%;
+  border-radius: var(--radius-circle);
 }
 .dotDone {
   background: #34d399;
@@ -711,16 +721,16 @@
   left: 0;
   right: 0;
   height: 5px;
-  border-radius: 99px;
+  border-radius: var(--radius-pill);
   background: var(--at-bg-chip);
   overflow: hidden;
 }
 
 .scrubFill {
   height: 100%;
-  border-radius: 99px;
+  border-radius: var(--radius-pill);
   background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc);
-  transition: width 0.25s ease;
+  transition: width 0.25s var(--ease-smooth);
 }
 
 .scrubInput {
@@ -737,7 +747,7 @@
   -webkit-appearance: none;
   width: 15px;
   height: 15px;
-  border-radius: 50%;
+  border-radius: var(--radius-circle);
   background: #fff;
   border: 2px solid var(--at-accent);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
@@ -746,7 +756,7 @@
 .scrubInput::-moz-range-thumb {
   width: 14px;
   height: 14px;
-  border-radius: 50%;
+  border-radius: var(--radius-circle);
   background: #fff;
   border: 2px solid var(--at-accent);
   cursor: pointer;
@@ -754,7 +764,7 @@
 .scrubInput:focus-visible {
   outline: 2px solid var(--at-accent);
   outline-offset: 4px;
-  border-radius: 99px;
+  border-radius: var(--radius-pill);
 }
 
 .transport {
@@ -777,7 +787,7 @@
   height: 38px;
   min-width: 38px;
   padding: 0 13px;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   background: var(--at-bg-chip);
   border: 1px solid var(--at-border-strong);
   color: var(--at-fg);
@@ -786,19 +796,20 @@
   font-weight: 600;
   cursor: pointer;
   transition:
-    background 0.15s ease,
-    border-color 0.15s ease,
-    color 0.15s ease,
-    box-shadow 0.18s ease,
-    filter 0.18s ease,
-    transform 0.12s ease;
+    background 0.15s var(--ease-smooth),
+    border-color 0.15s var(--ease-smooth),
+    color 0.15s var(--ease-smooth),
+    box-shadow 0.18s var(--ease-smooth),
+    filter 0.18s var(--ease-smooth),
+    transform 0.12s var(--ease-smooth);
 }
 .btn:hover:not(:disabled) {
   background: var(--at-accent-chip);
   border-color: var(--at-accent-chip-border);
 }
 .btn:active:not(:disabled) {
-  transform: translateY(1px);
+  transform: scale(0.98);
+  transition-duration: var(--dur-fast);
 }
 .btn:disabled {
   opacity: 0.4;
@@ -841,7 +852,7 @@
   align-items: center;
   height: 38px;
   padding: 4px;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   background: var(--at-bg-chip);
   border: 1px solid var(--at-border-strong);
 }
@@ -853,7 +864,7 @@
   bottom: 4px;
   left: 4px;
   width: 42px;
-  border-radius: 7px;
+  border-radius: var(--radius-xs);
   background: var(--at-accent);
   transform: translateX(calc(var(--spd-idx) * 100%));
   transition: transform 0.22s cubic-bezier(0.34, 1.1, 0.38, 1);
@@ -875,7 +886,7 @@
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   cursor: pointer;
-  transition: color 0.18s ease;
+  transition: color 0.18s var(--ease-smooth);
 }
 .speedPill:hover {
   color: var(--at-fg);
@@ -896,7 +907,7 @@
 
 .errorBox {
   border: 1px solid #dc2626;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   background: rgba(220, 38, 38, 0.06);
   color: #dc2626;
   padding: 12px 16px;
diff --git a/src/components/BentoFeatures/styles.module.css b/src/components/BentoFeatures/styles.module.css
index 562a2a0..105bfc1 100644
--- a/src/components/BentoFeatures/styles.module.css
+++ b/src/components/BentoFeatures/styles.module.css
@@ -43,7 +43,7 @@
 .card {
   position: relative;
   overflow: hidden;
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   background: var(--at-bg-subtle);
   border: 1px solid var(--at-border);
   padding: 28px 24px;
@@ -53,9 +53,9 @@
   font: inherit;
   cursor: pointer;
   transition:
-    border-color 200ms ease,
-    transform 200ms ease,
-    box-shadow 200ms ease;
+    border-color 200ms var(--ease-smooth),
+    transform 200ms var(--ease-smooth),
+    box-shadow 200ms var(--ease-smooth);
 }
 
 .card:focus-visible {
@@ -97,7 +97,7 @@
   font-size: 14px;
   color: var(--at-muted);
   z-index: 2;
-  transition: color 200ms ease;
+  transition: color 200ms var(--ease-smooth);
 }
 .cardActive .cardArrow {
   color: var(--at-accent);
@@ -106,7 +106,7 @@
 .iconBox {
   width: 44px;
   height: 44px;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   background: var(--at-bg-chip);
   border: 1px solid var(--at-border);
   display: flex;
@@ -181,7 +181,7 @@
 
 .comingWrap {
   position: relative;
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   border: 1px dashed var(--at-border);
   background: var(--at-bg-subtle);
   padding: 36px 28px 28px;
@@ -194,7 +194,7 @@
 .comingIcon {
   width: 48px;
   height: 48px;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   background: var(--at-bg-chip);
   border: 1px solid var(--at-border);
   display: inline-flex;
@@ -226,7 +226,7 @@
   letter-spacing: 0.14em;
   text-transform: uppercase;
   padding: 4px 8px;
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: var(--at-bg-chip);
   border: 1px solid var(--at-border);
   color: var(--at-muted);
@@ -237,7 +237,7 @@
   align-items: center;
   gap: 10px;
   padding: 10px 14px;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   border: 1px solid var(--at-border);
   background: var(--at-bg);
   max-width: 420px;
@@ -265,7 +265,7 @@
   font-family: var(--font-mono-ui);
   font-size: 11px;
   padding: 2px 6px;
-  border-radius: 6px;
+  border-radius: var(--radius-xs);
   background: var(--at-bg-chip);
   border: 1px solid var(--at-border);
   color: var(--at-muted);
diff --git a/src/components/ChapterIndex/styles.module.css b/src/components/ChapterIndex/styles.module.css
index 0def97e..7e1c570 100644
--- a/src/components/ChapterIndex/styles.module.css
+++ b/src/components/ChapterIndex/styles.module.css
@@ -33,7 +33,7 @@
   display: flex;
   flex-direction: column;
   gap: 1px;
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   overflow: hidden;
   border: 1px solid var(--at-border);
 }
@@ -123,7 +123,7 @@
   position: relative;
   flex-shrink: 0;
   padding: 8px 14px;
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   border: 1px solid var(--at-border);
   background: var(--at-bg-subtle);
   color: var(--at-muted);
@@ -132,10 +132,10 @@
   font-weight: 500;
   cursor: pointer;
   transition:
-    color 200ms ease,
-    background 200ms ease,
-    border-color 200ms ease,
-    transform 200ms ease;
+    color 200ms var(--ease-smooth),
+    background 200ms var(--ease-smooth),
+    border-color 200ms var(--ease-smooth),
+    transform 200ms var(--ease-smooth);
 }
 
 .tab:hover {
@@ -143,6 +143,11 @@
   transform: translateY(-1px);
 }
 
+.tab:active {
+  transform: scale(0.98);
+  transition-duration: var(--dur-fast);
+}
+
 .tab:focus-visible {
   outline: 2px solid var(--at-accent);
   outline-offset: 2px;
@@ -155,15 +160,31 @@
   background: var(--at-bg);
 }
 
-.accent_blue   { --vol-accent: #1d68e1; }
-.accent_pink   { --vol-accent: #d946a0; }
-.accent_amber  { --vol-accent: #d97706; }
-.accent_green  { --vol-accent: #16a34a; }
+.accent_blue {
+  --vol-accent: #1d68e1;
+}
+.accent_pink {
+  --vol-accent: #d946a0;
+}
+.accent_amber {
+  --vol-accent: #d97706;
+}
+.accent_green {
+  --vol-accent: #16a34a;
+}
 
-html[data-theme='dark'] .accent_blue   { --vol-accent: #75a3ed; }
-html[data-theme='dark'] .accent_pink   { --vol-accent: #f0a8d4; }
-html[data-theme='dark'] .accent_amber  { --vol-accent: #f5b860; }
-html[data-theme='dark'] .accent_green  { --vol-accent: #6ed699; }
+html[data-theme='dark'] .accent_blue {
+  --vol-accent: #75a3ed;
+}
+html[data-theme='dark'] .accent_pink {
+  --vol-accent: #f0a8d4;
+}
+html[data-theme='dark'] .accent_amber {
+  --vol-accent: #f5b860;
+}
+html[data-theme='dark'] .accent_green {
+  --vol-accent: #6ed699;
+}
 
 .panel {
   position: relative;
diff --git a/src/components/Epigraph/styles.module.css b/src/components/Epigraph/styles.module.css
index fe1ccaf..3a9f1a8 100644
--- a/src/components/Epigraph/styles.module.css
+++ b/src/components/Epigraph/styles.module.css
@@ -18,7 +18,7 @@
 .figure {
   position: relative;
   isolation: isolate;
-  border-radius: 18px;
+  border-radius: var(--radius-lg);
   margin: 0 0 40px;
   padding: 1.5px; /* spessore del fascio */
   background: var(--at-bg-subtle);
@@ -57,7 +57,7 @@
 .inner {
   position: relative;
   overflow: hidden;
-  border-radius: 17px;
+  border-radius: calc(var(--radius-lg) - 1px);
   padding: 34px 40px 32px;
   background: linear-gradient(
     135deg,
@@ -119,7 +119,7 @@
   gap: 9px;
   margin-top: 24px;
   padding: 6px 14px 6px 12px;
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: var(--at-accent-chip);
   border: 1px solid var(--at-accent-chip-border);
   font-family: var(--font-mono-ui);
diff --git a/src/components/InlineCode/styles.module.css b/src/components/InlineCode/styles.module.css
index 9447de7..f043c06 100644
--- a/src/components/InlineCode/styles.module.css
+++ b/src/components/InlineCode/styles.module.css
@@ -2,7 +2,7 @@
   font-family: var(--font-mono);
   font-size: 0.86em;
   padding: 1.5px 7px;
-  border-radius: 5px;
+  border-radius: var(--radius-xs);
   background: var(--ic-bg);
   border: 1px solid var(--at-border);
   border-bottom: 1px solid var(--ic-accent-line);
diff --git a/src/components/NavbarIconButton/styles.module.css b/src/components/NavbarIconButton/styles.module.css
index ba729f8..208a84a 100644
--- a/src/components/NavbarIconButton/styles.module.css
+++ b/src/components/NavbarIconButton/styles.module.css
@@ -13,14 +13,15 @@
   width: 2rem;
   height: 2rem;
   margin: 0 2px;
-  border-radius: 50%;
+  border-radius: var(--radius-circle);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--at-muted);
   transition:
     background var(--ifm-transition-fast),
-    color 0.15s ease;
+    color 0.15s var(--ease-smooth),
+    transform 0.15s var(--ease-smooth);
 }
 
 .btn:hover {
@@ -28,6 +29,11 @@
   text-decoration: none;
 }
 
+.btn:active {
+  transform: scale(0.98);
+  transition-duration: var(--dur-fast);
+}
+
 .icon {
   display: inline-flex;
   align-items: center;
@@ -64,7 +70,7 @@
   right: 0;
   transform: translate(0, 4px);
   padding: 6px 12px;
-  border-radius: 6px;
+  border-radius: var(--radius-xs);
   background: rgba(7, 9, 13, 0.92);
   border: 1px solid;
   font-family: var(--font-mono-ui);
@@ -75,8 +81,8 @@
   pointer-events: none;
   opacity: 0;
   transition:
-    opacity 0.18s ease,
-    transform 0.18s ease;
+    opacity 0.18s var(--ease-smooth),
+    transform 0.18s var(--ease-smooth);
   z-index: 100;
 }
 
@@ -104,7 +110,7 @@
 .tooltipGlow {
   position: absolute;
   inset: -4px;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   filter: blur(8px);
   z-index: -1;
   animation: navIconPopupPulse 2.2s ease-in-out infinite;
diff --git a/src/components/OffPathBanner/styles.module.css b/src/components/OffPathBanner/styles.module.css
index ebffdd6..b3d4c2a 100644
--- a/src/components/OffPathBanner/styles.module.css
+++ b/src/components/OffPathBanner/styles.module.css
@@ -4,7 +4,7 @@
   gap: 10px;
   padding: 10px 14px;
   margin: 0 0 24px;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: rgba(245, 158, 11, 0.06);
   border: 1px solid rgba(245, 158, 11, 0.28);
   border-left-width: 3px;
@@ -43,7 +43,7 @@ html[data-theme='dark'] .icon {
   font-weight: 600;
   letter-spacing: 0.04em;
   padding: 1px 7px;
-  border-radius: 4px;
+  border-radius: var(--radius-xs);
   background: rgba(245, 158, 11, 0.14);
   color: #b45309;
 }
diff --git a/src/components/PathSelector/styles.module.css b/src/components/PathSelector/styles.module.css
index 37829ea..95e13bb 100644
--- a/src/components/PathSelector/styles.module.css
+++ b/src/components/PathSelector/styles.module.css
@@ -5,7 +5,7 @@
   padding: 2px;
   background: var(--at-bg-subtle);
   border: 1px solid var(--at-border);
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   margin: 0 8px;
 }
 
@@ -13,7 +13,7 @@
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   cursor: pointer;
   font-family: var(--font-mono-ui);
   font-size: 12px;
diff --git a/src/components/Quiz/styles.module.css b/src/components/Quiz/styles.module.css
index 7696551..4ae0f2c 100644
--- a/src/components/Quiz/styles.module.css
+++ b/src/components/Quiz/styles.module.css
@@ -1,7 +1,7 @@
 .quiz {
   margin: 1.75rem 0;
   padding: 1.1rem 1.3rem;
-  border-radius: 11px;
+  border-radius: var(--radius-md);
   border: 1px solid var(--at-border);
   background: var(--at-bg-panel);
   backdrop-filter: blur(20px);
@@ -13,7 +13,7 @@
   content: '';
   position: absolute;
   inset: 0;
-  border-radius: 12px;
+  border-radius: inherit;
   padding: 1px;
   background: linear-gradient(
     180deg,
@@ -91,16 +91,16 @@
   width: 100%;
   text-align: left;
   padding: 0.6rem 0.8rem;
-  border-radius: 9px;
+  border-radius: var(--radius-sm);
   border: 1px solid var(--at-border);
   background: var(--at-bg-subtle);
   color: var(--at-fg-body);
   font: inherit;
   cursor: pointer;
   transition:
-    border-color 160ms ease,
-    background 160ms ease,
-    transform 160ms ease;
+    border-color 160ms var(--ease-smooth),
+    background 160ms var(--ease-smooth),
+    transform 160ms var(--ease-smooth);
 }
 
 .option:hover:not(:disabled) {
@@ -108,6 +108,11 @@
   background: var(--at-accent-chip);
 }
 
+.option:active:not(:disabled) {
+  transform: scale(0.98);
+  transition-duration: var(--dur-fast);
+}
+
 .option:focus-visible {
   outline: 2px solid var(--at-accent);
   outline-offset: 2px;
@@ -133,7 +138,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
+  border-radius: var(--radius-circle);
   background: var(--at-bg-chip);
   border: 1px solid var(--at-border);
   font-family: var(--font-mono-ui);
@@ -188,7 +193,7 @@
 .feedback {
   margin: 0.4rem 0 0.2rem;
   padding: 0.6rem 0.85rem;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   border-left: 3px solid;
   font-size: 0.9em;
   line-height: 1.55;
@@ -232,14 +237,15 @@
   font: inherit;
   font-size: 0.8rem;
   padding: 0.35rem 0.8rem;
-  border-radius: 6px;
+  border-radius: var(--radius-xs);
   border: 1px solid var(--at-border);
   background: transparent;
   color: var(--at-fg-body);
   cursor: pointer;
   transition:
-    border-color 160ms ease,
-    background 160ms ease;
+    border-color 160ms var(--ease-smooth),
+    background 160ms var(--ease-smooth),
+    transform 160ms var(--ease-smooth);
 }
 
 .resetIcon {
@@ -253,6 +259,11 @@
   color: var(--at-accent);
 }
 
+.reset:active {
+  transform: scale(0.98);
+  transition-duration: var(--dur-fast);
+}
+
 /* Dark mode */
 html[data-theme='dark'] .correct {
   border-color: rgba(134, 239, 172, 0.35);
@@ -303,7 +314,7 @@ html[data-theme='dark'] .feedbackWrong {
 .deck {
   margin: 1.75rem 0;
   padding: 1.1rem 1.3rem;
-  border-radius: 11px;
+  border-radius: var(--radius-md);
   border: 1px solid var(--at-border);
   background: var(--at-bg-panel);
   backdrop-filter: blur(20px);
@@ -315,7 +326,7 @@ html[data-theme='dark'] .feedbackWrong {
   content: '';
   position: absolute;
   inset: 0;
-  border-radius: 12px;
+  border-radius: inherit;
   padding: 1px;
   background: linear-gradient(
     180deg,
@@ -354,7 +365,7 @@ html[data-theme='dark'] .feedbackWrong {
 
 .progress {
   height: 6px;
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: var(--at-bg-chip);
   border: 1px solid var(--at-border);
   overflow: hidden;
@@ -362,7 +373,7 @@ html[data-theme='dark'] .feedbackWrong {
 
 .progressBar {
   height: 100%;
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: linear-gradient(90deg, var(--at-accent), #0ea5e9);
   transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
 }
@@ -385,7 +396,7 @@ html[data-theme='dark'] .feedbackWrong {
   justify-content: center;
   width: 2.6rem;
   height: 2.6rem;
-  border-radius: 50%;
+  border-radius: var(--radius-circle);
   background: rgba(21, 128, 61, 0.1);
   color: #15803d;
   font-size: 1.15rem;
@@ -421,15 +432,16 @@ html[data-theme='dark'] .feedbackWrong {
   font: inherit;
   font-size: 0.9rem;
   padding: 0.4rem 0.9rem;
-  border-radius: 6px;
+  border-radius: var(--radius-xs);
   border: 1px solid var(--at-border);
   background: transparent;
   color: var(--at-fg-body);
   cursor: pointer;
   transition:
-    border-color 160ms ease,
-    background 160ms ease,
-    opacity 160ms ease;
+    border-color 160ms var(--ease-smooth),
+    background 160ms var(--ease-smooth),
+    opacity 160ms var(--ease-smooth),
+    transform 160ms var(--ease-smooth);
 }
 
 .navBtnLabel {
@@ -446,6 +458,11 @@ html[data-theme='dark'] .feedbackWrong {
   color: var(--at-accent);
 }
 
+.navBtn:active:not(:disabled) {
+  transform: scale(0.98);
+  transition-duration: var(--dur-fast);
+}
+
 .navBtn:disabled {
   opacity: 0.35;
   cursor: default;
@@ -453,8 +470,12 @@ html[data-theme='dark'] .feedbackWrong {
 
 /* Fill animation sul pulsante Avanti durante il countdown automatico */
 @keyframes navFill {
-  from { transform: scaleX(0); }
-  to { transform: scaleX(1); }
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
 }
 
 .navBtnFill {
@@ -487,14 +508,14 @@ html[data-theme='dark'] .feedbackWrong {
   font: inherit;
   font-size: 0.8rem;
   padding: 0.35rem 0.9rem;
-  border-radius: 6px;
+  border-radius: var(--radius-xs);
   border: 1px solid var(--at-accent-chip-border);
   background: var(--at-accent-chip);
   color: var(--at-accent);
   cursor: pointer;
   transition:
-    border-color 160ms ease,
-    background 160ms ease;
+    border-color 160ms var(--ease-smooth),
+    background 160ms var(--ease-smooth);
 }
 
 .restart:hover {
diff --git a/src/components/Tooltip/styles.module.css b/src/components/Tooltip/styles.module.css
index 153a8a5..b4cc14e 100644
--- a/src/components/Tooltip/styles.module.css
+++ b/src/components/Tooltip/styles.module.css
@@ -32,7 +32,7 @@
   z-index: 100;
   width: 240px;
   padding: 10px 14px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   font-family: var(--font-body);
   font-size: 13px;
   font-weight: 400;
diff --git a/src/components/VolumeCard/styles.module.css b/src/components/VolumeCard/styles.module.css
index c5a9524..8ce1411 100644
--- a/src/components/VolumeCard/styles.module.css
+++ b/src/components/VolumeCard/styles.module.css
@@ -1,7 +1,7 @@
 .card {
   position: relative;
   display: block;
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   background: var(--at-bg-panel);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
@@ -60,7 +60,7 @@
 .iconBox {
   width: 48px;
   height: 48px;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   flex-shrink: 0;
   background: var(--vol-icon-bg);
   border: 1px solid var(--vol-icon-border);
diff --git a/src/css/custom.css b/src/css/custom.css
index 4462e5c..c3d6447 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -15,6 +15,34 @@
     'Monaspace Radon', 'Monaspace Neon', ui-monospace, monospace;
   --font-mono-ui:
     'Monaspace Argon', 'Monaspace Neon', ui-monospace, SFMono-Regular, monospace;
+
+  /* Motion — curve di casa (consolidano i cubic-bezier già in uso) */
+  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); /* default quasi-universale */
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* entrate/hover */
+  --ease-spring: cubic-bezier(0.34, 1.1, 0.38, 1); /* overshoot */
+  --ease-elastic: cubic-bezier(0.34, 1.4, 0.5, 1); /* pop icone */
+
+  /* Durate */
+  --dur-fast: 150ms;
+  --dur-normal: 200ms;
+  --dur-slow: 280ms;
+
+  /* Corner radius — scala a step 4px (lo step == padding tipico → nesting concentrico).
+     xs chip/badge · sm controlli/iconBox · md contenitori medi · lg card. */
+  --radius-xs: 6px;
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius-lg: 18px;
+  --radius-pill: 999px;
+  --radius-circle: 50%;
+
+  /* Shadow stack stratificato con hairline ring (light) */
+  --shadow-card:
+    0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.02),
+    0 0 0 0.5px rgba(0, 0, 0, 0.08);
+  --shadow-elevated:
+    0 4px 8px rgba(0, 0, 0, 0.02), 0 8px 12px rgba(0, 0, 0, 0.02),
+    0 2px 4px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
 }
 
 :root,
@@ -117,6 +145,13 @@ html[data-theme='dark'] {
   --at-spot-bg: rgba(56, 189, 248, 0.15);
   --at-bg-glass: rgba(9, 9, 11, 0.6);
 
+  /* Shadow stack stratificato con hairline ring (dark) */
+  --shadow-card:
+    0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
+  --shadow-elevated:
+    0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3),
+    0 0 0 0.5px rgba(255, 255, 255, 0.08);
+
   /* Python syntax palette — match Prism Dracula (dark) */
   --py-kw: #bd93f9;
   --py-str: #ff79c6;
@@ -285,7 +320,7 @@ html[data-theme='dark'] .hero {
     'calt' 1;
   font-size: 0.78em;
   padding: 1.5px 7px;
-  border-radius: 5px;
+  border-radius: var(--radius-xs);
   background: rgba(0, 0, 0, 0.045);
   border: 1px solid var(--at-border);
   border-bottom: 1px solid rgba(2, 132, 199, 0.45);
@@ -367,7 +402,7 @@ html[data-theme='dark'] .markdown :not(pre) > code {
 
 .footer__link-item {
   color: var(--at-muted-soft);
-  transition: color 0.2s ease;
+  transition: color var(--dur-normal) var(--ease-smooth);
 }
 
 .footer__link-item:hover {
@@ -514,8 +549,8 @@ html[data-theme='light'] .footer__logo {
   text-decoration: none;
   border-bottom: 1px solid var(--at-accent-chip-border);
   transition:
-    color 0.15s ease,
-    border-color 0.15s ease;
+    color 0.15s var(--ease-smooth),
+    border-color 0.15s var(--ease-smooth);
 }
 
 .theme-doc-markdown a:not(.button):hover {
@@ -590,8 +625,8 @@ html[data-theme='light'] .footer__logo {
   text-decoration: none;
   border-bottom: 1px solid var(--at-accent-chip-border);
   transition:
-    color 0.15s ease,
-    border-color 0.15s ease;
+    color 0.15s var(--ease-smooth),
+    border-color 0.15s var(--ease-smooth);
 }
 
 [class*='mdxPageWrapper'] article a:not(.button):hover {
@@ -711,9 +746,9 @@ body:has(.theme-doc-sidebar-container)::before {
   background: transparent;
   align-items: baseline;
   transition:
-    color 0.15s ease,
-    background 0.15s ease,
-    border-color 0.15s ease;
+    color 0.15s var(--ease-smooth),
+    background 0.15s var(--ease-smooth),
+    border-color 0.15s var(--ease-smooth);
 }
 
 .theme-doc-sidebar-menu .menu__list-item-collapsible {
@@ -804,7 +839,7 @@ body:has(.theme-doc-sidebar-container)::before {
   padding: 0 14px;
   background: transparent;
   border-radius: 0;
-  transition: opacity 0.15s ease;
+  transition: opacity 0.15s var(--ease-smooth);
   opacity: 0.5;
 }
 
@@ -981,7 +1016,7 @@ html[data-theme='dark'] {
 }
 
 .callout {
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   padding: 16px 20px;
   margin: 1.25rem 0;
   display: flex;
@@ -1137,7 +1172,7 @@ html[data-theme='dark'] {
   --pagefind-ui-border: var(--ifm-color-emphasis-200);
   --pagefind-ui-tag: var(--ifm-color-emphasis-100);
   --pagefind-ui-border-width: 1px;
-  --pagefind-ui-border-radius: 12px;
+  --pagefind-ui-border-radius: var(--radius-sm);
   --pagefind-ui-font: var(--font-body);
 }
 
@@ -1201,12 +1236,12 @@ html[data-theme='dark'] {
   font-weight: 500;
   background: var(--ifm-color-emphasis-100);
   border: 1px solid var(--ifm-color-emphasis-200);
-  border-radius: 18px;
+  border-radius: var(--radius-lg);
   color: var(--ifm-font-color-base);
   transition:
-    border-color 0.18s ease,
-    box-shadow 0.18s ease,
-    background 0.18s ease;
+    border-color 0.18s var(--ease-smooth),
+    box-shadow 0.18s var(--ease-smooth),
+    background 0.18s var(--ease-smooth);
 }
 
 .pagefind-ui__search-input::placeholder {
@@ -1235,11 +1270,11 @@ html[data-theme='dark'] {
   color: transparent;
   border: none !important;
   background: var(--ifm-color-emphasis-200) !important;
-  border-radius: 999px !important;
+  border-radius: var(--radius-pill) !important;
   opacity: 0.85;
   transition:
-    background 0.18s ease,
-    opacity 0.18s ease;
+    background 0.18s var(--ease-smooth),
+    opacity 0.18s var(--ease-smooth);
 }
 
 .pagefind-ui__search-clear:hover {
@@ -1314,7 +1349,7 @@ html[data-theme='dark'] {
 .pagefind-ui mark {
   background: color-mix(in srgb, var(--ifm-color-primary) 16%, transparent);
   color: var(--ifm-font-color-base);
-  border-radius: 3px;
+  border-radius: var(--radius-xs);
   padding: 0 0.12em;
 }
 
@@ -1341,13 +1376,13 @@ html[data-theme='dark'] {
   color: var(--ifm-color-primary);
   background: transparent;
   border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   padding: 0.5rem 1rem;
   margin-top: 0.8rem;
   cursor: pointer;
   transition:
-    background 0.18s ease,
-    border-color 0.18s ease;
+    background 0.18s var(--ease-smooth),
+    border-color 0.18s var(--ease-smooth);
 }
 
 .pagefind-ui__button:hover {
@@ -1442,11 +1477,11 @@ html[data-theme='dark'] {
 
 .v4v-press {
   transition:
-    transform 0.12s ease,
-    box-shadow 0.25s ease,
-    background 0.2s ease,
-    border-color 0.2s ease,
-    color 0.2s ease;
+    transform 0.12s var(--ease-smooth),
+    box-shadow 0.25s var(--ease-smooth),
+    background 0.2s var(--ease-smooth),
+    border-color 0.2s var(--ease-smooth),
+    color 0.2s var(--ease-smooth);
 }
 .v4v-press:hover {
   transform: translateY(-1px);
@@ -1456,8 +1491,8 @@ html[data-theme='dark'] {
 }
 .v4v-link {
   transition:
-    color 0.15s ease,
-    border-color 0.15s ease;
+    color 0.15s var(--ease-smooth),
+    border-color 0.15s var(--ease-smooth);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1467,3 +1502,17 @@ html[data-theme='dark'] {
     animation: none;
   }
 }
+
+/* Guardia globale: chi preferisce meno movimento vede tutto istantaneo.
+   Copre ogni animazione/transizione del sito (anche quelle dei componenti
+   senza blocco dedicato), rendendo ridondanti — ma innocui — quelli locali. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 3f5d2ab..db9680e 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -35,8 +35,7 @@
 }
 
 html[data-theme='dark'] .logo {
-  filter:
-    drop-shadow(0 0 40px rgba(56, 189, 248, 0.4))
+  filter: drop-shadow(0 0 40px rgba(56, 189, 248, 0.4))
     drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5));
 }
 
@@ -94,4 +93,3 @@ html[data-theme='dark'] .logo {
     padding: 56px 20px 40px;
   }
 }
-
diff --git a/src/pages/perche-python.mdx b/src/pages/perche-python.mdx
index bf26d04..7941a35 100644
--- a/src/pages/perche-python.mdx
+++ b/src/pages/perche-python.mdx
@@ -9,13 +9,13 @@ description: I pregiudizi più comuni su Python — lentezza, semplicità, “no
   Il codice viene **letto molto più spesso** di quanto venga scritto.
 </Epigraph>
 
-Quando si dice che si sta imparando a programmare in Python, prima o poi arriva qualcuno con la frase pronta: *“È lento”, “è un linguaggio per principianti”, “non è abbastanza serio per il lavoro vero”*. Sono giudizi che girano da anni, ripetuti con sicurezza. Eppure, appena si inizia a programmare sul serio, ci si accorge che la maggior parte di queste idee sono più **miti** che realtà.
+Quando si dice che si sta imparando a programmare in Python, prima o poi arriva qualcuno con la frase pronta: _“È lento”, “è un linguaggio per principianti”, “non è abbastanza serio per il lavoro vero”_. Sono giudizi che girano da anni, ripetuti con sicurezza. Eppure, appena si inizia a programmare sul serio, ci si accorge che la maggior parte di queste idee sono più **miti** che realtà.
 
-Vale la pena smontarli uno per uno — anche perché capire *perché* uno strumento è fatto in un certo modo è già un pezzo di educazione informatica.
+Vale la pena smontarli uno per uno — anche perché capire _perché_ uno strumento è fatto in un certo modo è già un pezzo di educazione informatica.
 
 ## “È lento” {#mito-velocita}
 
-È vero: nell’esecuzione pura, Python non è il linguaggio più rapido del mondo. Ma “velocità” non vuol dire una cosa sola. Esiste la velocità con cui un programma *gira*, e quella con cui un programma viene *scritto, capito e corretto*. Python eccelle nella seconda: meno codice, più chiaro, in meno tempo.
+È vero: nell’esecuzione pura, Python non è il linguaggio più rapido del mondo. Ma “velocità” non vuol dire una cosa sola. Esiste la velocità con cui un programma _gira_, e quella con cui un programma viene _scritto, capito e corretto_. Python eccelle nella seconda: meno codice, più chiaro, in meno tempo.
 
 E quasi sempre è la seconda quella che conta. Un programma che impiega qualche frazione di secondo in più a girare, ma che ti fa risparmiare giorni di sviluppo e di debugging, resta un affare enorme. Il tempo di una persona costa molto più di qualche ciclo di CPU.
 
@@ -23,7 +23,7 @@ E quasi sempre è la seconda quella che conta. Un programma che impiega qualche
 
 Che Python sia un linguaggio interpretato viene spesso citato come un difetto. In realtà è spesso il contrario: puoi scrivere una riga, eseguirla e vedere subito il risultato, senza aspettare lunghe compilazioni. Provi, sbagli, correggi, riprovi — in pochi secondi.
 
-Questa immediatezza è esattamente lo spirito di *Python doesn’t byte*: ogni blocco di codice che incontri lo puoi **eseguire e modificare direttamente nella pagina**, senza installare nulla. Non è una scorciatoia da principianti, è lo stesso modo di lavorare che si usa quando si costruisce un prototipo o un prodotto da far evolvere in fretta. Sperimentare senza attrito è un valore, non una mancanza. Non ci credi? Eccone
+Questa immediatezza è esattamente lo spirito di _Python doesn’t byte_: ogni blocco di codice che incontri lo puoi **eseguire e modificare direttamente nella pagina**, senza installare nulla. Non è una scorciatoia da principianti, è lo stesso modo di lavorare che si usa quando si costruisce un prototipo o un prodotto da far evolvere in fretta. Sperimentare senza attrito è un valore, non una mancanza. Non ci credi? Eccone
 la prova: cambia il messaggio qui sotto e premi **Esegui**.
 
 <PyRunner
@@ -35,7 +35,7 @@ print(messaggio)`}
 
 ## “È troppo semplice” {#mito-semplice}
 
-C’è chi confonde la semplicità con il limite. Ma un linguaggio leggibile ti lascia concentrare sul **problema** invece che sui dettagli del linguaggio. La sintassi di Python somiglia tanto allo pseudocodice che si usa per ragionare su un algoritmo: questo significa che, mentre impari, stai imparando *i concetti* della programmazione — variabili, cicli, funzioni, oggetti — e non un mucchio di simboli da memorizzare.
+C’è chi confonde la semplicità con il limite. Ma un linguaggio leggibile ti lascia concentrare sul **problema** invece che sui dettagli del linguaggio. La sintassi di Python somiglia tanto allo pseudocodice che si usa per ragionare su un algoritmo: questo significa che, mentre impari, stai imparando _i concetti_ della programmazione — variabili, cicli, funzioni, oggetti — e non un mucchio di simboli da memorizzare.
 
 È un vantaggio doppio. Per chi inizia, perché l’attenzione resta sulla logica. E per chiunque, perché un codice leggibile contiene meno errori, è più facile da mantenere e si lascia leggere dai colleghi: programmare in gruppo diventa possibile. Quello che impari qui, poi, non resta chiuso in Python — i concetti si trasferiscono a qualsiasi altro linguaggio incontrerai dopo.
 
@@ -43,15 +43,15 @@ C’è chi confonde la semplicità con il limite. Ma un linguaggio leggibile ti
 
 È forse il paradosso più interessante. Come può un linguaggio “lento” essere così centrale nel campo che richiede i calcoli più pesanti al mondo?
 
-La risposta è che Python, in quei casi, quei calcoli non li fa quasi mai *direttamente*. Fa da **collante**: un’interfaccia comoda e leggibile verso librerie potentissime scritte in linguaggi molto più veloci (C, C++, Fortran). Tu scrivi poche righe chiare, e sotto il cofano girano motori ottimizzati al massimo. Python unisce la facilità d’uso in superficie e le alte prestazioni in profondità — ed è proprio questa combinazione a renderlo lo standard di fatto per dati e IA.
+La risposta è che Python, in quei casi, quei calcoli non li fa quasi mai _direttamente_. Fa da **collante**: un’interfaccia comoda e leggibile verso librerie potentissime scritte in linguaggi molto più veloci (C, C++, Fortran). Tu scrivi poche righe chiare, e sotto il cofano girano motori ottimizzati al massimo. Python unisce la facilità d’uso in superficie e le alte prestazioni in profondità — ed è proprio questa combinazione a renderlo lo standard di fatto per dati e IA.
 
 ## “Non regge le grandi applicazioni” {#mito-scala}
 
-Anche questa non sta in piedi. Quando un software diventa grande, il fattore decisivo non è tanto *quale linguaggio* hai scelto, ma *come* lo hai progettato. I sistemi moderni non sono un unico blocco monolitico: sono fatti di tanti servizi che collaborano, ciascuno con un compito preciso. In un’architettura del genere Python svolge benissimo il ruolo di coordinamento e di colla tra i pezzi — e infatti lo fa, dentro aziende che servono milioni di persone.
+Anche questa non sta in piedi. Quando un software diventa grande, il fattore decisivo non è tanto _quale linguaggio_ hai scelto, ma _come_ lo hai progettato. I sistemi moderni non sono un unico blocco monolitico: sono fatti di tanti servizi che collaborano, ciascuno con un compito preciso. In un’architettura del genere Python svolge benissimo il ruolo di coordinamento e di colla tra i pezzi — e infatti lo fa, dentro aziende che servono milioni di persone.
 
 ## “La sintassi facile nasconde la vera programmazione” {#mito-astrazione}
 
-L’ultima obiezione è quasi filosofica: nascondere la complessità non sarebbe “barare”? No. C’è una differenza tra complessità *essenziale* — quella del problema che stai risolvendo — e complessità *accidentale*, quella imposta dallo strumento. Togliere di mezzo la seconda non impoverisce il lavoro: lo rende più accessibile e ti permette di trasformare un’idea in qualcosa di concreto con meno ostacoli in mezzo. Che, alla fine, è il punto di tutta la programmazione.
+L’ultima obiezione è quasi filosofica: nascondere la complessità non sarebbe “barare”? No. C’è una differenza tra complessità _essenziale_ — quella del problema che stai risolvendo — e complessità _accidentale_, quella imposta dallo strumento. Togliere di mezzo la seconda non impoverisce il lavoro: lo rende più accessibile e ti permette di trasformare un’idea in qualcosa di concreto con meno ostacoli in mezzo. Che, alla fine, è il punto di tutta la programmazione.
 
 ## E poi è libero {#libero}
 
@@ -59,6 +59,6 @@ C’è un ultimo motivo, che con questo libro condividiamo nel profondo: Python
 
 ## Il vero valore {#valore}
 
-Il valore di Python, allora, non sta nell’essere il linguaggio più veloce o il più complicato. Sta nell’essere uno strumento **efficace, leggibile e versatile**: facile abbastanza da non spaventare chi inizia, potente abbastanza da costruirci cose reali. È per questo che resta, nonostante i pregiudizi, uno dei modi migliori per *imparare, sperimentare e costruire*.
+Il valore di Python, allora, non sta nell’essere il linguaggio più veloce o il più complicato. Sta nell’essere uno strumento **efficace, leggibile e versatile**: facile abbastanza da non spaventare chi inizia, potente abbastanza da costruirci cose reali. È per questo che resta, nonostante i pregiudizi, uno dei modi migliori per _imparare, sperimentare e costruire_.
 
 E imparare, sperimentare e costruire è esattamente quello che faremo qui. Il posto da cui partire è il [Manuale del Programmatore](/programmatore/): si comincia dal primo `print`.
diff --git a/src/pages/support/index.tsx b/src/pages/support/index.tsx
index cce3632..4839841 100644
--- a/src/pages/support/index.tsx
+++ b/src/pages/support/index.tsx
@@ -54,7 +54,7 @@ function Pill({ T, children }: { T: V4VTheme; children: ReactNode }) {
         alignItems: 'center',
         gap: 8,
         padding: '6px 13px 6px 11px',
-        borderRadius: 999,
+        borderRadius: 'var(--radius-pill)',
         background: T.accentChip,
         border: `1px solid ${T.accentChipBorder}`,
         fontFamily: T.mono,
@@ -91,7 +91,7 @@ function WayCard({
       style={{
         background: T.bgSubtle,
         border: `1px solid ${T.border}`,
-        borderRadius: 16,
+        borderRadius: 'var(--radius-lg)',
         padding: '24px 24px 26px',
         position: 'relative',
         ...style,
@@ -101,7 +101,7 @@ function WayCard({
         style={{
           width: 46,
           height: 46,
-          borderRadius: 12,
+          borderRadius: 'var(--radius-sm)',
           background: T.bgChip,
           border: `1px solid ${T.border}`,
           display: 'flex',
@@ -162,7 +162,7 @@ function QRTile({
     <div
       style={{
         background: '#ffffff',
-        borderRadius: 12,
+        borderRadius: 'var(--radius-sm)',
         padding: pad,
         display: 'flex',
         lineHeight: 0,
@@ -232,7 +232,7 @@ function QRThumb({
         position: 'relative',
         padding: 0,
         border: `1px solid ${T.border}`,
-        borderRadius: 13,
+        borderRadius: 'var(--radius-md)',
         background: T.bgChip,
         cursor: 'pointer',
         flexShrink: 0,
@@ -250,7 +250,7 @@ function QRThumb({
           bottom: -7,
           width: 24,
           height: 24,
-          borderRadius: 8,
+          borderRadius: 'var(--radius-xs)',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
@@ -328,7 +328,7 @@ function QRModal({
           width: 'min(360px, 100%)',
           background: T.dark ? '#161619' : '#ffffff',
           border: `1px solid ${T.border}`,
-          borderRadius: 20,
+          borderRadius: 'var(--radius-lg)',
           padding: '30px 26px 26px',
           textAlign: 'center',
           boxShadow: '0 24px 60px rgba(0,0,0,0.4)',
@@ -345,7 +345,7 @@ function QRModal({
             right: 12,
             width: 32,
             height: 32,
-            borderRadius: 9,
+            borderRadius: 'var(--radius-sm)',
             border: `1px solid ${T.border}`,
             background: T.bgChip,
             color: T.muted,
@@ -361,7 +361,7 @@ function QRModal({
           <div
             style={{
               padding: 8,
-              borderRadius: 16,
+              borderRadius: 'var(--radius-lg)',
               border: `1px solid ${T[`${tone}Border`]}`,
               background: T[`${tone}Bg`],
             }}
@@ -445,7 +445,7 @@ function LinkRow({
         letterSpacing: '0.03em',
         color: color || T.accentSoft,
         border: `1px solid ${T.border}`,
-        borderRadius: 9,
+        borderRadius: 'var(--radius-sm)',
         padding: '9px 14px',
         background: T.bgChip,
       }}
@@ -498,7 +498,7 @@ function CopyRow({
         letterSpacing: '0.03em',
         color: c,
         border: `1px solid ${T.border}`,
-        borderRadius: 9,
+        borderRadius: 'var(--radius-sm)',
         padding: '9px 14px',
         background: T.bgChip,
       }}
@@ -561,7 +561,7 @@ function PayRow({
         display: 'flex',
         gap: 14,
         padding: 14,
-        borderRadius: 13,
+        borderRadius: 'var(--radius-md)',
         background: bg,
         border: `1px solid ${bd}`,
       }}
@@ -630,7 +630,7 @@ function DonationPanel({ T, ring }: { T: V4VTheme; ring?: boolean }) {
     <div
       className={ring ? 'v4v-ring' : 'v4v-beam'}
       style={{
-        borderRadius: 18,
+        borderRadius: 'var(--radius-lg)',
         padding: ring ? 1.6 : 1.4,
         background: T.bgSubtle,
         ...(ring
@@ -640,7 +640,7 @@ function DonationPanel({ T, ring }: { T: V4VTheme; ring?: boolean }) {
     >
       <div
         style={{
-          borderRadius: 16.6,
+          borderRadius: 'calc(var(--radius-lg) - 1.4px)',
           background: T.bgPanel,
           backdropFilter: 'blur(14px)',
           WebkitBackdropFilter: 'blur(14px)',
@@ -651,7 +651,7 @@ function DonationPanel({ T, ring }: { T: V4VTheme; ring?: boolean }) {
           style={{
             width: 46,
             height: 46,
-            borderRadius: 12,
+            borderRadius: 'var(--radius-sm)',
             background: T.bgChip,
             border: `1px solid ${T.border}`,
             display: 'flex',
@@ -748,7 +748,7 @@ function GoalBar({
         style={{
           position: 'relative',
           height,
-          borderRadius: 999,
+          borderRadius: 'var(--radius-pill)',
           background: T.track,
           overflow: 'visible',
         }}
@@ -761,7 +761,7 @@ function GoalBar({
             top: 0,
             bottom: 0,
             width: `${pct}%`,
-            borderRadius: 999,
+            borderRadius: 'var(--radius-pill)',
             background: `linear-gradient(90deg, ${T.accent}, #818cf8, ${T.accent})`,
           }}
         />
@@ -778,7 +778,7 @@ function GoalBar({
                 transform: 'translate(-50%,-50%)',
                 width: height + 6,
                 height: height + 6,
-                borderRadius: 999,
+                borderRadius: 'var(--radius-pill)',
                 background: hit ? T.accent : T.bg,
                 border: `2px solid ${hit ? T.accent : T.borderStrong}`,
                 boxShadow: hit ? `0 0 0 3px ${T.accentChip}` : 'none',
@@ -843,7 +843,7 @@ function DonorChip({
         alignItems: 'center',
         gap: 8,
         padding: '4px 13px 4px 4px',
-        borderRadius: 999,
+        borderRadius: 'var(--radius-pill)',
         background: T.bgChip,
         border: `1px solid ${T.border}`,
         fontFamily: T.body,
@@ -856,7 +856,7 @@ function DonorChip({
           flexShrink: 0,
           width: 25,
           height: 25,
-          borderRadius: 999,
+          borderRadius: 'var(--radius-pill)',
           display: 'inline-flex',
           alignItems: 'center',
           justifyContent: 'center',
@@ -897,7 +897,7 @@ function GoalsBlock({
         backdropFilter: 'blur(12px)',
         WebkitBackdropFilter: 'blur(12px)',
         border: `1px solid ${T.border}`,
-        borderRadius: 18,
+        borderRadius: 'var(--radius-lg)',
         padding: mobile ? '22px 20px 24px' : '28px 30px 30px',
       }}
     >
@@ -972,7 +972,7 @@ function GoalsBlock({
                 gap: 14,
                 alignItems: 'flex-start',
                 padding: '14px 16px',
-                borderRadius: 12,
+                borderRadius: 'var(--radius-md)',
                 background: hit ? T.accentBg : T.bgSubtle,
                 border: `1px solid ${hit ? T.accentBorder : T.border}`,
                 flexDirection: 'column',
@@ -983,7 +983,7 @@ function GoalsBlock({
                   flexShrink: 0,
                   width: 34,
                   height: 34,
-                  borderRadius: 9,
+                  borderRadius: 'var(--radius-sm)',
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
@@ -1100,7 +1100,7 @@ function GoalsBlock({
                 alignItems: 'center',
                 gap: 7,
                 padding: '5px 15px',
-                borderRadius: 999,
+                borderRadius: 'var(--radius-pill)',
                 background: T.accentChip,
                 border: `1px solid ${T.accentChipBorder}`,
                 fontFamily: T.body,
@@ -1349,7 +1349,7 @@ function V4VPage({ T, mobile }: { T: V4VTheme; mobile: boolean }) {
         <div
           style={{
             margin: '44px 0 0',
-            borderRadius: 16,
+            borderRadius: 'var(--radius-lg)',
             border: `1px solid ${T.border}`,
             background: T.bgSubtle,
             padding: '26px 30px 28px',
@@ -1368,7 +1368,7 @@ function V4VPage({ T, mobile }: { T: V4VTheme; mobile: boolean }) {
                 flexShrink: 0,
                 width: 40,
                 height: 40,
-                borderRadius: 11,
+                borderRadius: 'var(--radius-sm)',
                 background: T.bgChip,
                 border: `1px solid ${T.border}`,
                 display: 'flex',
diff --git a/src/theme/ColorModeToggle/styles.module.css b/src/theme/ColorModeToggle/styles.module.css
index 355ddf0..6bb9a84 100644
--- a/src/theme/ColorModeToggle/styles.module.css
+++ b/src/theme/ColorModeToggle/styles.module.css
@@ -11,7 +11,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  border-radius: 50%;
+  border-radius: var(--radius-circle);
   transition:
     background var(--ifm-transition-fast),
     color 0.15s ease;
@@ -74,7 +74,7 @@ svg.toggleIcon {
   right: 0;
   transform: translate(0, 4px);
   padding: 6px 12px;
-  border-radius: 6px;
+  border-radius: var(--radius-xs);
   background: rgba(7, 9, 13, 0.92);
   border: 1px solid var(--at-accent);
   color: var(--at-accent-soft);
@@ -125,7 +125,7 @@ svg.toggleIcon {
 .spellGlow {
   position: absolute;
   inset: -4px;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   background: radial-gradient(
     closest-side,
     rgba(56, 189, 248, 0.35),
diff --git a/src/theme/Footer/index.tsx b/src/theme/Footer/index.tsx
index 1ddb150..1c84b64 100644
--- a/src/theme/Footer/index.tsx
+++ b/src/theme/Footer/index.tsx
@@ -157,7 +157,7 @@ function SocialBtn({
   const style: React.CSSProperties = {
     width: 38,
     height: 38,
-    borderRadius: 10,
+    borderRadius: 'var(--radius-sm)',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -266,7 +266,7 @@ function PayLogo({
     height: 40,
     minWidth: 66,
     padding: '0 14px',
-    borderRadius: 9,
+    borderRadius: 'var(--radius-sm)',
     background: bgIdle,
     border: `1px solid ${bdIdle}`,
     fontFamily: T.mono,
@@ -504,7 +504,7 @@ function FooterInner({ T, mobile }: { T: V4VTheme; mobile: boolean }) {
                 color: T.muted,
                 textDecoration: 'none',
                 padding: '5px 11px',
-                borderRadius: 999,
+                borderRadius: 'var(--radius-pill)',
                 border: `1px solid ${T.border}`,
                 background: T.bgChip,
               }}
diff --git a/src/theme/PyRunner/styles.module.css b/src/theme/PyRunner/styles.module.css
index 3637c54..20f509e 100644
--- a/src/theme/PyRunner/styles.module.css
+++ b/src/theme/PyRunner/styles.module.css
@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   border: 1px solid var(--at-border);
-  border-radius: 14px;
+  border-radius: var(--radius-lg);
   background: var(--at-bg-panel);
   backdrop-filter: blur(8px);
   overflow: hidden;
@@ -43,7 +43,7 @@
 .tlDot {
   width: 11px;
   height: 11px;
-  border-radius: 50%;
+  border-radius: var(--radius-circle);
   display: inline-block;
   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2);
 }
@@ -82,14 +82,18 @@
   gap: 6px;
   height: 30px;
   padding: 0 10px;
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   border: 1px solid var(--at-border-strong);
   background: var(--at-bg-chip);
   color: var(--at-fg);
   font-family: 'Monaspace Argon', ui-monospace, monospace;
   font-size: 0.78rem;
   cursor: pointer;
-  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
+  transition:
+    background 120ms var(--ease-smooth),
+    color 120ms var(--ease-smooth),
+    border-color 120ms var(--ease-smooth),
+    transform 120ms var(--ease-smooth);
 }
 
 .iconBtn:hover:not(:disabled) {
@@ -98,6 +102,11 @@
   color: var(--at-fg-strong);
 }
 
+.iconBtn:active:not(:disabled) {
+  transform: scale(0.98);
+  transition-duration: var(--dur-fast);
+}
+
 .iconBtn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
@@ -174,7 +183,7 @@
   width: 100%;
   height: 100%;
   fill: currentColor;
-  transition: all var(--ifm-transition-fast) ease;
+  transition: all var(--ifm-transition-fast) var(--ease-smooth);
 }
 
 .copyBtnSuccess {
@@ -237,7 +246,7 @@
 .statusDot {
   width: 9px;
   height: 9px;
-  border-radius: 50%;
+  border-radius: var(--radius-circle);
   background: var(--at-faint);
   flex-shrink: 0;
   display: inline-block;
@@ -265,8 +274,13 @@
 }
 
 @keyframes pyrPulse {
-  0%, 100% { opacity: 0.55; }
-  50% { opacity: 1; }
+  0%,
+  100% {
+    opacity: 0.55;
+  }
+  50% {
+    opacity: 1;
+  }
 }
 
 .statusLabel {
@@ -310,7 +324,7 @@
   font-size: 0.78rem;
   height: 22px;
   padding: 0 9px;
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: var(--at-accent-chip);
   border: 1px solid var(--at-accent-chip-border);
   color: var(--at-accent);
@@ -333,7 +347,7 @@
   right: 12px;
   z-index: 5;
   padding: 6px 12px;
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: var(--at-accent-bg);
   border: 1px solid var(--at-accent-chip-border);
   color: var(--at-accent-soft);
@@ -346,8 +360,14 @@
 }
 
 @keyframes pyrToast {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .runner {
@@ -381,7 +401,7 @@
 .fallback {
   background: var(--at-bg-subtle);
   border: 1px solid var(--at-border);
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   padding: 14px;
   font-family: 'Monaspace Neon', ui-monospace, monospace;
   font-size: 0.9rem;
@@ -390,7 +410,7 @@
 
 .error {
   border: 1px solid #ef4444;
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   padding: 12px;
   background: rgba(239, 68, 68, 0.08);
   color: #fca5a5;
diff --git a/src/theme/SQLRunner/styles.module.css b/src/theme/SQLRunner/styles.module.css
index 23e9855..3bd5157 100644
--- a/src/theme/SQLRunner/styles.module.css
+++ b/src/theme/SQLRunner/styles.module.css
@@ -19,7 +19,7 @@
 .tableScroll {
   overflow-x: auto;
   border: 1px solid var(--at-border);
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   background: var(--at-bg-panel);
 }
 
@@ -85,7 +85,7 @@
   padding: 8px 12px;
   background: rgba(239, 68, 68, 0.08);
   border: 1px solid rgba(239, 68, 68, 0.35);
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   color: #f87171;
   font-family: 'Monaspace Argon', ui-monospace, monospace;
   font-size: 0.84rem;
@@ -101,7 +101,7 @@
   gap: 8px;
   margin: 4px 0 8px;
   padding: 6px 12px;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   background: var(--at-accent-chip);
   border: 1px solid var(--at-accent-chip-border);
   color: var(--at-accent-soft);
diff --git a/src/theme/SearchBar/styles.module.css b/src/theme/SearchBar/styles.module.css
index 396122f..27e495c 100644
--- a/src/theme/SearchBar/styles.module.css
+++ b/src/theme/SearchBar/styles.module.css
@@ -9,7 +9,7 @@
   padding: 0 0.7rem;
   margin: 0 0.25rem;
   border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: var(--ifm-background-surface-color);
   color: var(--ifm-color-emphasis-700);
   font-family: var(--font-mono-ui);
@@ -45,7 +45,7 @@
   line-height: 1;
   padding: 0.22rem 0.36rem;
   border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: 6px;
+  border-radius: var(--radius-xs);
   background: var(--ifm-color-emphasis-100);
   color: var(--ifm-color-emphasis-600);
 }
@@ -104,7 +104,7 @@
   overflow: hidden;
   background: var(--ifm-background-surface-color);
   border: 1px solid var(--ifm-color-emphasis-200);
-  border-radius: 18px;
+  border-radius: var(--radius-lg);
   box-shadow:
     0 1px 0 0 color-mix(in srgb, white 6%, transparent) inset,
     0 30px 70px -20px rgba(0, 0, 0, 0.5),
@@ -179,7 +179,7 @@
   line-height: 1;
   padding: 0.2rem 0.34rem;
   border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: 5px;
+  border-radius: var(--radius-xs);
   color: inherit;
 }