/* Shared reset + style switcher for the direction previews */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100dvh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0b0c0b;color:#f4f5f3;font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:0 14px;height:36px;position:relative;z-index:50}
.sw a{opacity:.7;padding:8px 6px}.sw a:hover{opacity:1}
.sw b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw span{display:flex;gap:6px;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .in{animation:in .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*90ms)}
  @keyframes in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}