/* Scoped previews only. Original V1.9 does not load this file. */
#principle-entrances { scroll-margin-top:110px; }
.principles[data-effect] .principle { position:relative; isolation:isolate; }
.principles[data-effect] .principle .principle-action { min-height:38px; }
.principles[data-effect] .principle .principle-action > span { display:inline-grid; place-items:center; width:38px; height:38px; flex:0 0 38px; }
.principles[data-effect] .principle:active { background:var(--tint); }
.principles[data-effect="glass"] .principle { padding:0; border:0; background:transparent; box-shadow:none; }
.principles[data-effect="glass"] .principle .principle-surface { position:relative; display:flex; flex-direction:column; box-sizing:border-box; width:100%; padding:22px; border:1px solid #e0e7ef; border-top:3px solid var(--accent); border-radius:6px; background:linear-gradient(135deg,#fff 55%,#f8fbff); color:#344054; transform-origin:center; transition:transform 220ms cubic-bezier(.22,1,.36,1); }
.principles[data-effect="glass"] .principle-surface > span:not(.principle-action) { flex:1; }
.principles[data-effect="glass"] .principle-surface::before { content:''; position:absolute; pointer-events:none; inset:0; border-radius:inherit; border:1px solid var(--accent); box-shadow:0 10px 20px #0b1b3514,0 3px 0 #dce5ef,inset 0 0 0 1px #fff; opacity:0; transition:opacity 150ms ease; }
.principles[data-effect="glass"] .principle.is-tracking .principle-surface { transition:none; }
.principles[data-effect="glass"] .principle.is-tracking .principle-surface::before { opacity:1; }
.principles[data-effect="glass"] .principle:active .principle-surface { transform:translateY(-1px) scale(.99) !important; background:var(--tint); transition:transform 100ms ease; }
.principles[data-effect="scan"] .principle { overflow:hidden; }
.principles[data-effect="scan"] .principle::after { content:''; position:absolute; pointer-events:none; z-index:-1; width:42%; height:180%; left:-60%; top:-40%; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 15%,transparent) 46%,#ffffffeb 50%,color-mix(in srgb,var(--accent) 20%,transparent) 53%,transparent); opacity:0; transform:translateX(0) skewX(-18deg); transition:transform 240ms cubic-bezier(.25,1,.5,1),opacity 120ms ease; }
.principles[data-effect="scan"] .principle .principle-action > span { transition:transform 160ms cubic-bezier(.22,1,.36,1); }
.principles[data-effect="magnet"] .principle .principle-action > span { color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 40%,#fff); border-radius:50%; background:var(--tint); transition:transform 220ms cubic-bezier(.22,1,.36,1),background-color 120ms ease; }
.principles[data-effect="magnet"] .principle.is-tracking .principle-action > span { transition:none; }
.principles[data-effect="magnet"] .principle.is-tracking .principle-action > span { background:var(--accent); color:#0B1B35; }
.principles[data-effect="magnet"] .principle:active .principle-action > span { transform:scale(.96) !important; }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .principles[data-effect="scan"] .principle:hover::after { opacity:1; transform:translateX(420%) skewX(-18deg); transition:transform 650ms cubic-bezier(.25,1,.5,1),opacity 120ms ease; }
  .principles[data-effect="scan"] .principle:hover .principle-action > span { transform:translateX(5px); }
}
.principles[data-effect] .principle:focus-visible { outline:3px solid #0B66C3; outline-offset:4px; }
.principles[data-effect] .principle:focus-visible::after { opacity:0; transition:none; }
.principles[data-effect] .principle:focus-visible :is(.principle-surface,.principle-action > span) { transform:none !important; transition:none !important; }
.principles[data-effect="glass"] .principle:focus-visible .principle-surface { border-color:var(--accent); background:var(--tint); }
@media(max-width:600px) { .principles[data-effect="glass"] .principle .principle-surface { padding:18px 14px; } }
@media(prefers-reduced-motion:reduce) {
  .principles[data-effect] .principle,.principles[data-effect] .principle::after,.principles[data-effect] .principle-surface,.principles[data-effect] .principle-surface::before,.principles[data-effect] .principle .principle-action > span { transform:none !important; transition:none !important; animation:none !important; }
}