.privacy-cycle { overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: var(--paper); box-shadow: 0 18px 55px color-mix(in srgb,var(--ink) 4%,transparent); }
.cycle-consent-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 28px; border-bottom: 1px solid var(--line); }
.cycle-consent-bar span { color: var(--muted); font-size: 14px; }
.cycle-consent-bar button { min-height: 44px; padding: 10px 18px; border: 1px solid var(--red); border-radius: 999px; background: var(--red); color: var(--red-ink); font-size: 13px; font-weight: 600; }
.cycle-consent-bar button[aria-pressed=true] { background: var(--paper); color: var(--red); }
.cycle-toolbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 27px 30px; border-bottom: 1px solid var(--line); }
.cycle-diagram { position: relative; }
.cycle-info { position: absolute; z-index: 3; left: 91.1%; top: 25.7%; transform: translate(-50%, -50%); }
.cycle-info summary { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--red); background: var(--cream); font: 600 20px Fraunces,serif; cursor: pointer; list-style: none; }
.cycle-info summary::-webkit-details-marker { display: none; }
.cycle-info-bubble { position: absolute; right: 0; top: calc(100% + 10px); width: min(340px, calc(100vw - 72px)); padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 14px 35px #0003; }
.cycle-info-bubble strong { font: 400 21px Fraunces,serif; }
.cycle-info-bubble p { min-height: 0; margin: 10px 0 12px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.cycle-info-bubble a { color: var(--red); font-size: 13px; font-weight: 600; }
.cycle-toolbar .eyebrow { margin-bottom: 9px; }
.cycle-toolbar p { min-height: 26px; color: var(--ink); font-size: 15px; }
.cycle-controls { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.cycle-modes { display: flex; border: 1px solid var(--line); padding: 4px; border-radius: 999px; background: var(--cream); }
.cycle-controls button { min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; }
.cycle-controls button[aria-pressed=true] { background: var(--red); color: var(--red-ink); }
#cycle-pause { border-color: var(--line); color: var(--red); }
#cycle-pause:disabled { opacity: .6; cursor: default; }
.privacy-cycle-svg { display: block; width: 100%; height: auto; overflow: visible; color: var(--red); }
.privacy-cycle-svg text { fill: var(--ink); font-family: Outfit,sans-serif; }
.privacy-cycle-svg .cycle-node-title { font: 400 26px Fraunces,serif; }
.cycle-phone-body { fill: var(--ink); }
.cycle-phone-screen { fill: var(--cream); }
.cycle-camera { fill: var(--ink); }
.privacy-cycle-svg .cycle-small { font-size: 16px; fill: var(--muted); }
.privacy-cycle-svg .cycle-tiny { font-size: 13px; fill: var(--muted); }
.privacy-cycle-svg .cycle-caption { font-size: 15px; fill: var(--muted); }
.cycle-wave { fill: var(--red); }
.cycle-wave rect { transform-box: fill-box; transform-origin: center; }
.privacy-cycle.is-recording .cycle-wave rect { animation: cycle-wave .7s ease-in-out infinite alternate; }
.cycle-wave rect:nth-child(2n) { animation-delay: -.4s !important; }
.cycle-transcript { opacity: .12; transform: translateY(12px); transition: opacity .6s,transform .6s; }
.privacy-cycle.has-transcript .cycle-transcript { opacity: 1; transform: translateY(0); }
.cycle-sheet { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.privacy-cycle-svg .cycle-sheet-title { font-size: 16px; fill: var(--red); font-weight: 600; }
.cycle-text-line { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 110; stroke-dashoffset: 110; transition: stroke-dashoffset 1.5s; }
.has-transcript .cycle-text-line { stroke-dashoffset: 0; }
.cycle-result-tick,.cycle-result-check { opacity: 0; }
.has-result .cycle-result-tick,.has-result .cycle-result-check { opacity: 1; }
.cycle-result-tick { fill: var(--red); }
.cycle-result-check { fill: none; stroke: var(--red-ink); stroke-width: 2; }
.cycle-route { stroke: var(--line); stroke-width: 2; fill: none; }
.cycle-out-route { stroke-dasharray: 6 7; }
.privacy-cycle[data-consent=true] .cycle-route { stroke: var(--red); }
.privacy-cycle-svg .cycle-route-label { font-size: 16px; fill: var(--muted); }
.cycle-gate-circle { fill: var(--soft); stroke: var(--red); stroke-width: 1.5; }
.cycle-lock,.cycle-unlocked { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cycle-unlocked { display: none; }
[data-consent=true] .cycle-lock { display: none; }
[data-consent=true] .cycle-unlocked { display: block; }
.privacy-cycle-svg .cycle-gate-label { font-size: 15px; fill: var(--red); font-weight: 600; }
.cycle-cloud-boundary { fill: var(--cream); stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 6 6; }
.cycle-swiss { fill: var(--red); }
.cycle-cross { stroke: var(--red-ink); stroke-width: 5; }
.privacy-cycle-svg .cycle-location { font-size: 16px; font-weight: 600; }
.cycle-cloud-symbol { fill: var(--soft); stroke: var(--red); stroke-width: 2; }
.cycle-server rect { fill: var(--paper); stroke: var(--line); }
.cycle-server circle { fill: var(--red); }
.privacy-cycle-svg .cycle-server text { font-size: 14px; }
.is-processing .cycle-server circle { animation: cycle-server-pulse .6s ease-in-out infinite alternate; }
.cycle-packet rect { fill: var(--red); stroke: var(--paper); stroke-width: 2; }
.cycle-packet path { stroke: var(--red-ink); stroke-width: 2; fill: none; stroke-linecap: round; }
.cycle-explanations { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; border-top: 1px solid var(--line); padding: 25px 30px 30px; }
.cycle-explanations span { display: block; margin-bottom: 8px; color: var(--red); font-size: 14px; font-weight: 600; }
.cycle-explanations p { color: var(--muted); font-size: 13px; }
.privacy-cycle.is-paused * { animation-play-state: paused !important; }
@keyframes cycle-wave { to { transform: scaleY(.45); } }
@keyframes cycle-server-pulse { to { opacity: .25; } }
@media(max-width:980px) {
  .cycle-diagram { max-width: 520px; margin-inline: auto; }
  .cycle-info { left: 80%; top: 67.5%; }
  .cycle-toolbar { align-items: flex-start; }
  .privacy-cycle-svg { max-width: 520px; margin-inline: auto; }
  .cycle-explanations { grid-template-columns: 1fr; gap: 22px; }
  .cycle-explanations p { font-size: 15px; }
}
@media(max-width:600px) {
  .privacy-cycle { border-radius: 22px; }
  .cycle-toolbar,.cycle-explanations { padding: 23px 18px; }
  .cycle-controls { gap: 8px; }
  .cycle-controls button { padding: 9px 11px; }
  .cycle-toolbar p { min-height: 52px; }
}
@media(prefers-reduced-motion:reduce) {
  .privacy-cycle * { animation: none !important; transition: none !important; }
}