.kin-connection-scene{--scene-accent:var(--kin-thread-soft);--scene-ease:cubic-bezier(.16, 1, .3, 1);border:1px solid var(--kin-line);background:var(--kin-bg);width:100%;min-width:0;color:var(--kin-text);font-family:var(--sans);isolation:isolate;border-radius:.75rem;padding:0 clamp(.75rem,2vw,1.5rem) 1.25rem}.kin-scene-caption{align-items:center;gap:.75rem;min-height:3.75rem;font-size:.8125rem;font-weight:550;display:flex}.kin-scene-example{color:var(--kin-muted);margin-left:auto;font-size:.6875rem;font-weight:400}.kin-connection-scene button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.kin-connection-scene .kin-scene-play{width:2.75rem;height:2.75rem;color:var(--kin-muted);cursor:pointer;background:0 0;border:0;border-radius:50%;flex:0 0 2.75rem;place-items:center;margin-right:-.5rem;padding:.75rem;display:grid}.kin-scene-play svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:1.125rem;height:1.125rem}.kin-connection-scene .kin-scene-play:hover{color:var(--kin-text);background:var(--kin-panel)}.kin-connection-scene :is(button,[role=tabpanel]):focus-visible{outline:2px solid var(--scene-accent);outline-offset:3px}.kin-scene-people{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.kin-scene-person{border:1px solid var(--kin-line);background:var(--kin-panel);border-radius:.5rem;min-width:0;padding:1.125rem .875rem .75rem}.kin-scene-person-heading{align-items:center;gap:.625rem;display:flex}.kin-scene-person-heading strong{letter-spacing:-.025em;font-size:1.125rem;font-weight:550;line-height:1.25}.kin-scene-signature{width:1.25rem;height:1.25rem;color:var(--kin-muted);align-items:center;gap:3px;display:flex}.kin-scene-signature i{background:currentColor;border-radius:1px;width:2px;height:65%}.kin-scene-signature i:nth-child(2){height:100%}.kin-scene-signature.is-1{gap:3px}.kin-scene-signature.is-1 i{border-radius:50%;width:4px;height:4px}.kin-scene-signature.is-1 i:nth-child(2){width:5px;height:5px}.kin-scene-approach{min-height:2.6em;color:var(--kin-muted);margin-top:.375rem;font-size:.75rem;line-height:1.3;display:block}.kin-scene-traits{transition:clip-path .8s var(--scene-ease), opacity .6s ease;gap:.125rem;margin:.625rem 0 0;padding:0;list-style:none;display:grid}.kin-scene-traits li{min-height:2rem;color:var(--kin-muted);border-radius:.25rem;align-items:center;gap:.5rem;margin:0 -.25rem;padding:.375rem .25rem;font-size:.75rem;line-height:1.35;transition:color .5s,background-color .5s;display:flex}.kin-scene-trait-mark{background:var(--kin-line-strong);border-radius:50%;flex:0 0 .25rem;width:.25rem;height:.25rem}.kin-scene-traits li[data-active=true]{color:var(--kin-text);background:color-mix(in srgb, var(--scene-accent) 9%, transparent)}.kin-scene-traits li[data-active=true] .kin-scene-trait-mark{background:var(--scene-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--scene-accent) 12%, transparent)}.kin-scene-exchange{height:7rem;position:relative}.kin-scene-exchange>svg{width:100%;height:100%;display:block;overflow:visible}.kin-scene-exchange path{fill:none;vector-effect:non-scaling-stroke}.kin-scene-wire{stroke:var(--kin-line-strong);stroke-width:1px;stroke-dasharray:2 5;opacity:.65}.kin-scene-pulse{stroke:var(--scene-accent);stroke-width:1.75px;stroke-linecap:round;stroke-dasharray:.11 .89;stroke-dashoffset:.11px;opacity:0}.kin-scene-knot{border:1px solid var(--kin-line-strong);background:var(--kin-bg);letter-spacing:.08em;border-radius:50%;place-items:center;width:2.75rem;height:2.75rem;font-size:.625rem;font-weight:550;display:grid;position:absolute;top:2.125rem;left:50%;transform:translate(-50%)}.kin-scene-direction{width:40%;transition:opacity .5s ease, transform .7s var(--scene-ease);gap:.25rem;display:grid;position:absolute;top:3.875rem}.kin-scene-direction.is-forward{left:0}.kin-scene-direction.is-reverse{text-align:right;right:0}.kin-scene-direction span{color:var(--kin-muted);font-size:.6875rem}.kin-scene-direction strong{color:var(--kin-text);font-size:.6875rem;font-weight:500;line-height:1.3}.kin-scene-result{border:1px solid var(--kin-line);background:var(--kin-panel);border-radius:.5rem;overflow:hidden}.kin-scene-tabs{border-bottom:1px solid var(--kin-line);grid-template-columns:repeat(4,minmax(0,1fr));padding:0 .625rem;display:grid}.kin-connection-scene .kin-scene-tabs button{min-width:0;min-height:2.75rem;color:var(--kin-muted);cursor:pointer;background:0 0;border:0;border-radius:0;padding:.5rem .125rem;font-family:inherit;font-size:.75rem;font-weight:450;transition:color .3s;position:relative}.kin-scene-tabs button:after{background:var(--scene-accent);content:"";height:2px;transition:transform .4s var(--scene-ease);position:absolute;bottom:0;left:.5rem;right:.5rem;transform:scaleX(0)}.kin-connection-scene .kin-scene-tabs button[aria-selected=true]{color:var(--kin-text)}.kin-scene-tabs button[aria-selected=true]:after{transform:scaleX(1)}.kin-connection-scene .kin-scene-tabs button:hover{color:var(--kin-text)}.kin-connection-scene .kin-scene-tabs button:focus-visible{outline-offset:-4px}.kin-scene-reading{min-height:12.5rem;padding:1.25rem}.kin-scene-reading-content{transition:opacity .5s ease, clip-path .7s var(--scene-ease);clip-path:inset(0);animation:kin-scene-reading-in .7s var(--scene-ease) both}.kin-connection-scene .kin-scene-reading h2{color:var(--kin-text);font-family:var(--sans);letter-spacing:-.025em;margin:0 0 .625rem;font-size:1.25rem;font-weight:550;line-height:1.3}.kin-connection-scene .kin-scene-reading p{color:var(--kin-muted);font-family:var(--sans);margin:0;font-size:.875rem;line-height:1.5}.kin-scene-help{border-top:1px solid var(--kin-line);margin-top:1rem;padding-top:.75rem}.kin-scene-help>span{color:var(--scene-accent);margin-bottom:.375rem;font-size:.6875rem;font-weight:550;display:block}.kin-connection-scene .kin-scene-help p{color:var(--kin-text);font-size:.8125rem}.kin-connection-scene[data-phase="0"] .kin-scene-person{animation:kin-scene-profile-in 1s var(--scene-ease) both}.kin-connection-scene[data-phase="0"] .kin-scene-person:nth-child(2){animation-delay:.2s}.kin-connection-scene[data-phase="0"] .kin-scene-traits{clip-path:inset(0 0 100%);opacity:0}.kin-connection-scene:is([data-phase="0"],[data-phase="1"]) .kin-scene-exchange{opacity:.3}.kin-connection-scene:is([data-phase="0"],[data-phase="1"]) .kin-scene-direction,.kin-connection-scene[data-phase="2"] .kin-scene-direction.is-reverse{opacity:0;transform:translateY(4px)}.kin-connection-scene[data-phase="2"] .kin-scene-pulse.is-forward,.kin-connection-scene[data-phase="3"] .kin-scene-pulse.is-reverse{animation:1.1s ease-in-out both kin-scene-travel}.kin-connection-scene[data-phase="4"] .kin-scene-pulse.is-output{animation:.7s ease-in-out both kin-scene-travel}.kin-scene-reading-content[data-visible=false]{opacity:0;clip-path:inset(0 0 100%)}.kin-connection-scene[data-running=false] *,.kin-connection-scene[data-running=false] :after{animation-play-state:paused!important}.kin-connection-scene[data-running=false] .kin-scene-reading-content{animation:none}@keyframes kin-scene-profile-in{0%{opacity:.25;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes kin-scene-travel{0%{stroke-dashoffset:.11px;opacity:0}12%,85%{opacity:1}to{stroke-dashoffset:-1px;opacity:0}}@keyframes kin-scene-reading-in{0%{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media (width<=880px){.kin-connection-scene{max-width:40rem;margin-inline:auto}}@media (width<=480px){.kin-connection-scene{padding-inline:.75rem;padding-bottom:.75rem}.kin-scene-caption{gap:.5rem;min-height:3.25rem;font-size:.75rem}.kin-scene-example{font-size:.625rem}.kin-scene-people{gap:.5rem}.kin-scene-person{padding:.875rem .625rem .5rem}.kin-scene-person-heading{gap:.375rem}.kin-scene-person-heading strong{font-size:1rem}.kin-scene-approach{min-height:2.6em;font-size:.6875rem}.kin-scene-traits li{gap:.375rem;min-height:2.5rem;font-size:.6875rem}.kin-scene-tabs{padding-inline:.25rem}.kin-connection-scene .kin-scene-tabs button{font-size:.6875rem}.kin-scene-reading{min-height:15rem;padding:1rem .875rem}.kin-connection-scene .kin-scene-reading h2{font-size:1.0625rem}}@media (prefers-reduced-motion:reduce){.kin-connection-scene *,.kin-connection-scene :after{transition:none!important;animation:none!important}.kin-connection-scene .kin-scene-traits,.kin-connection-scene .kin-scene-reading-content{clip-path:none!important;opacity:1!important}.kin-connection-scene .kin-scene-exchange,.kin-connection-scene .kin-scene-direction{opacity:1!important;transform:none!important}.kin-connection-scene .kin-scene-pulse{display:none}}
