.rc-widget {
  --rc-paper: var(--color-surface, #fbfaf7);
  --rc-paper-soft: var(--color-surface-raised, #f4f2ec);
  --rc-ink: var(--color-text, #16161a);
  --rc-muted: var(--color-text-muted, #6b6b76);
  --rc-line: var(--color-border, #d9d5cc);
  --rc-accent: var(--color-accent, #a6431e);
  --rc-secondary: var(--color-accent-secondary, #1c6b66);
  --rc-link: var(--color-link, #8a3717);
  margin: 2.5rem 0;
  border-block: 1px solid var(--rc-line);
  padding: 1.5rem 0 1.25rem;
  color: var(--rc-ink);
  font-family: "Instrument Sans", system-ui, sans-serif;
  container: rc-widget / inline-size;
}

.rc-widget * { box-sizing: border-box; }
.rc-widget__eyebrow { margin: 0 0 .35rem; color: var(--rc-accent); font: 600 .72rem/1.2 "JetBrains Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.rc-widget h3 { margin: 0; font: 600 clamp(1.45rem, 4vw, 2rem)/1.08 "Fraunces", Georgia, serif; letter-spacing: -.025em; }
.rc-widget__intro { max-width: 62ch; margin: .55rem 0 1.15rem; color: var(--rc-muted); line-height: 1.55; }
.rc-widget__stage { position: relative; overflow: hidden; border: 1px solid var(--rc-line); border-radius: 6px; background: var(--rc-paper); }
.rc-widget__controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.rc-widget button { min-height: 44px; border: 1px solid var(--rc-line); border-radius: 999px; padding: .62rem .9rem; background: var(--rc-paper); color: var(--rc-ink); font: 600 .88rem/1 system-ui, sans-serif; cursor: pointer; }
.rc-widget button:hover { border-color: var(--rc-ink); }
.rc-widget button:focus-visible { outline: 3px solid color-mix(in srgb, var(--rc-link) 30%, transparent); outline-offset: 2px; }
.rc-widget button[aria-pressed="true"], .rc-widget .rc-widget__action { border-color: var(--rc-ink); background: var(--rc-ink); color: var(--rc-paper); }
.rc-widget__result { min-height: 2.8em; margin: .85rem 0 0; color: var(--rc-ink); line-height: 1.45; }
.rc-widget__note { display: flex; justify-content: space-between; gap: 1rem; margin: .85rem 0 0; color: var(--rc-muted); font-size: .76rem; line-height: 1.4; }
.rc-widget__note a { color: var(--rc-link); text-underline-offset: 3px; }

.cp-stage { display: grid; grid-template-columns: minmax(0,1fr) minmax(8rem,.72fr) minmax(0,1fr); min-height: 250px; }
.cp-view, .cp-common { display: grid; place-items: center; min-width: 0; padding: 1rem; text-align: center; }
.cp-view:first-child { border-right: 1px solid var(--rc-line); }
.cp-view:last-child { border-left: 1px solid var(--rc-line); }
.cp-view__label, .cp-common__label { align-self: start; margin: 0; color: var(--rc-muted); font: 600 .67rem/1.2 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.cp-view__content { display: grid; place-items: center; width: 100%; min-height: 130px; font: 600 1rem/1.45 "Fraunces", Georgia, serif; }
.cp-view__content svg { width: 100%; max-width: 190px; height: auto; }
.cp-common { background: var(--rc-paper-soft); }
.cp-common__mark { display: grid; place-items: center; width: 7.2rem; aspect-ratio: 1; border: 1px solid var(--rc-accent); border-radius: 50%; padding: .75rem; color: var(--rc-accent); font: 600 .88rem/1.2 "Fraunces", Georgia, serif; }
.cp-common__mark::before { content: ""; position: absolute; }
.cp-common[data-strength="low"] .cp-common__mark { border-style: dashed; color: var(--rc-muted); border-color: var(--rc-muted); }

.ro-stage, .tr-stage { padding: .5rem; }
.ro-stage svg, .tr-stage svg { display: block; width: 100%; height: auto; }
.ro-grid { stroke: var(--rc-line); stroke-width: 1; }
.ro-shape-a { fill: var(--rc-ink); }
.ro-shape-b { fill: var(--rc-paper); stroke: var(--rc-secondary); stroke-width: 3; }
.ro-shape-focus { fill: var(--rc-accent); }
.ro-constellation-b { transform: translate(540px, 165px) rotate(38deg); transform-origin: 0 0; transition: transform 480ms cubic-bezier(.2,.75,.25,1); }
.ro-stage[data-aligned="true"] .ro-constellation-b { transform: translate(180px, 165px) rotate(0deg); }
.ro-match { stroke: var(--rc-secondary); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: 0; transition: opacity 180ms ease 300ms; }
.ro-stage[data-aligned="true"] .ro-match { opacity: .58; }
.ro-axis-label { fill: var(--rc-muted); font: 13px "JetBrains Mono", monospace; }

.tr-room { fill: var(--rc-paper-soft); stroke: var(--rc-line); stroke-width: 2; }
.tr-wall { stroke: var(--rc-ink); stroke-width: 8; }
.tr-direct { fill: none; stroke: var(--rc-muted); stroke-width: 3; stroke-dasharray: 8 8; }
.tr-plan { fill: none; stroke: var(--rc-accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 720; stroke-dashoffset: 720; }
.tr-stage[data-running="true"] .tr-plan, .tr-stage[data-running="done"] .tr-plan { animation: tr-draw 1.25s ease forwards; }
.tr-collision { fill: var(--rc-accent); opacity: 0; }
.tr-stage[data-running="true"] .tr-collision, .tr-stage[data-running="done"] .tr-collision { animation: tr-show .2s ease .35s forwards; }
.tr-label { fill: var(--rc-muted); font: 13px "JetBrains Mono", monospace; }
.tr-start { fill: var(--rc-ink); }
.tr-goal { fill: var(--rc-secondary); }
@keyframes tr-draw { to { stroke-dashoffset: 0; } }
@keyframes tr-show { to { opacity: 1; } }

/* P2 · dalla lettura all'intervento */
.rc-proof-scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.25rem 0 2rem; border-block: 1px solid var(--rc-line); }
.rc-proof-scale__step { position: relative; min-width: 0; padding: 1rem 1.1rem 1rem 2.1rem; }
.rc-proof-scale__step + .rc-proof-scale__step { border-left: 1px solid var(--rc-line); }
.rc-proof-scale__number { position: absolute; top: 1.05rem; left: .75rem; color: var(--rc-accent); font: 600 .68rem/1 "JetBrains Mono", monospace; }
.rc-proof-scale__step strong { display: block; margin-bottom: .2rem; font-family: "Instrument Sans", system-ui, sans-serif; }
.rc-proof-scale__step span:last-child { display: block; color: var(--rc-muted); font-size: .8rem; line-height: 1.35; }

.js-stage { padding: clamp(1rem, 3vw, 1.5rem); }
.js-prompt { max-width: 38rem; margin: 0 auto 1.25rem; color: var(--rc-muted); font: 500 clamp(.9rem, 2.2vw, 1.05rem)/1.5 "Fraunces", Georgia, serif; text-align: center; }
.js-prompt strong { color: var(--rc-ink); }
.js-layers { display: grid; grid-template-columns: repeat(5, minmax(3.2rem, 1fr)); align-items: end; gap: clamp(.35rem, 1.5vw, .8rem); max-width: 42rem; margin: 0 auto; }
.js-layer { position: relative; min-width: 0; text-align: center; }
.js-layer:not(:last-child)::after { content: ""; position: absolute; top: 2.05rem; left: calc(50% + 1.65rem); width: calc(100% - 2.45rem); border-top: 1px solid var(--rc-line); }
.js-layer__index { display: block; margin-bottom: .35rem; color: var(--rc-muted); font: 600 .65rem/1 "JetBrains Mono", monospace; letter-spacing: .05em; text-transform: uppercase; }
.js-layer__token { position: relative; z-index: 1; display: grid; place-items: center; min-height: 4rem; border: 1px solid var(--rc-line); border-radius: 50%; background: var(--rc-paper); color: var(--rc-muted); font: 600 clamp(.64rem, 1.8vw, .82rem)/1 "JetBrains Mono", monospace; transition: border-color 320ms ease, color 320ms ease, background 320ms ease, transform 320ms ease; }
.js-layer:nth-child(3) .js-layer__token,
.js-layer:nth-child(4) .js-layer__token { border-color: var(--rc-secondary); color: var(--rc-secondary); background: color-mix(in srgb, var(--rc-secondary) 8%, var(--rc-paper)); }
.js-stage[data-phase="input"] .js-layer__token { border-style: dashed; color: var(--rc-muted); background: var(--rc-paper); transform: scale(.9); }
.js-stage[data-phase="input"] .js-layer__token span { opacity: .18; }
.js-stage[data-phase="swap"] .js-layer:nth-child(3) .js-layer__token,
.js-stage[data-phase="swap"] .js-layer:nth-child(4) .js-layer__token { border-color: var(--rc-accent); color: var(--rc-accent); background: color-mix(in srgb, var(--rc-accent) 9%, var(--rc-paper)); transform: scale(1.06); }
.js-output { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 1.25rem auto 0; color: var(--rc-muted); font-size: .8rem; }
.js-output__value { display: grid; place-items: center; min-width: 3rem; min-height: 3rem; border: 1px solid var(--rc-ink); border-radius: 6px; color: var(--rc-ink); font: 600 1.45rem/1 "JetBrains Mono", monospace; transition: border-color 320ms ease, color 320ms ease, transform 320ms ease; }
.js-stage[data-phase="swap"] .js-output__value { border-color: var(--rc-accent); color: var(--rc-accent); transform: translateY(-2px); }

.ct-stage { padding: clamp(1rem, 3vw, 1.5rem); }
.ct-graph { display: grid; grid-template-columns: repeat(7, auto); align-items: center; justify-content: center; gap: clamp(.35rem, 1.2vw, .7rem); min-height: 9rem; }
.ct-node { display: grid; place-items: center; min-width: clamp(4.2rem, 13vw, 6.6rem); min-height: 4.4rem; border: 1px solid var(--rc-ink); border-radius: 6px; padding: .55rem; background: var(--rc-paper); text-align: center; transition: opacity 260ms ease, border-color 260ms ease, background 260ms ease, transform 260ms ease; }
.ct-node small { display: block; margin-bottom: .25rem; color: var(--rc-muted); font: 600 .59rem/1.1 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.ct-node strong { font-size: clamp(.78rem, 2vw, .94rem); }
.ct-node--output { border-color: var(--rc-accent); color: var(--rc-accent); background: color-mix(in srgb, var(--rc-accent) 8%, var(--rc-paper)); }
.ct-arrow { width: clamp(1.1rem, 3vw, 2.1rem); height: 1px; background: var(--rc-muted); position: relative; }
.ct-arrow::after { content: ""; position: absolute; top: -3px; right: 0; width: 7px; height: 7px; border-top: 1px solid var(--rc-muted); border-right: 1px solid var(--rc-muted); transform: rotate(45deg); }
.ct-stage[data-state="capital"] [data-ct-node="capital"],
.ct-stage[data-state="texas"] [data-ct-node="texas"] { border-style: dashed; border-color: var(--rc-muted); background: var(--rc-paper-soft); opacity: .38; transform: scale(.92); }
.ct-stage[data-state="capital"] .ct-node--output strong::after { content: "Texas"; }
.ct-stage[data-state="texas"] .ct-node--output strong::after { content: "Albany"; }
.ct-stage[data-state="intact"] .ct-node--output strong::after { content: "Austin"; }
.ct-node--output strong { font-size: 0; }
.ct-node--output strong::after { font-size: clamp(.78rem, 2vw, .94rem); }
.ct-remainder { max-width: 42rem; margin: .8rem auto 0; border: 1px dashed var(--rc-line); border-radius: 6px; padding: .55rem .8rem; color: var(--rc-muted); font: 500 .7rem/1.35 "JetBrains Mono", monospace; text-align: center; }
.ct-controls button[aria-pressed="true"] { border-color: var(--rc-ink); background: var(--rc-ink); color: var(--rc-paper); }

@container rc-widget (max-width: 40rem) {
  .ct-graph { grid-template-columns: 1fr; gap: .35rem; }
  .ct-node { width: min(100%, 13rem); min-height: 3.6rem; margin: 0 auto; }
  .ct-arrow { width: 1px; height: 1.2rem; margin: 0 auto; }
  .ct-arrow::after { top: auto; right: -3px; bottom: 0; transform: rotate(135deg); }
}

@media (max-width: 560px) {
  .rc-widget { padding-top: 1.25rem; }
  .cp-stage { grid-template-columns: 1fr 1fr; min-height: 310px; }
  .cp-common { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--rc-line); }
  .cp-view:first-child { border-right: 1px solid var(--rc-line); }
  .cp-view:last-child { border-left: 0; }
  .cp-view__content { min-height: 100px; font-size: .9rem; }
  .cp-common__mark { width: auto; min-height: 3.5rem; aspect-ratio: auto; border-radius: 999px; }
  .rc-widget__note { display: block; }
  .rc-widget__note span { display: block; margin-bottom: .3rem; }
  .ro-stage svg, .tr-stage svg { min-width: 0; }
  .rc-proof-scale { grid-template-columns: 1fr; }
  .rc-proof-scale__step + .rc-proof-scale__step { border-top: 1px solid var(--rc-line); border-left: 0; }
  .js-layers { gap: .25rem; }
  .js-layer:not(:last-child)::after { left: calc(50% + 1.35rem); width: calc(100% - 1.7rem); }
  .js-layer__token { min-height: 3rem; }
  .ct-graph { grid-template-columns: 1fr; gap: .35rem; }
  .ct-node { width: min(100%, 13rem); min-height: 3.6rem; margin: 0 auto; }
  .ct-arrow { width: 1px; height: 1.2rem; margin: 0 auto; }
  .ct-arrow::after { top: auto; right: -3px; bottom: 0; transform: rotate(135deg); }
}

@media (prefers-color-scheme: dark) {
  .rc-widget { --rc-paper: var(--color-surface, #16161a); --rc-paper-soft: var(--color-surface-raised, #24242a); --rc-ink: var(--color-text, #e8e6e1); --rc-muted: var(--color-text-muted, #a3a3ad); --rc-line: var(--color-border, #757581); --rc-accent: var(--color-accent, #e0713f); --rc-secondary: var(--color-accent-secondary, #5fb0a8); --rc-link: var(--color-link, #e0713f); }
}

@media (prefers-reduced-motion: reduce) {
  .rc-widget *, .rc-widget *::before, .rc-widget *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0ms !important; }
}