#__next,body,html{height:100%}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;background:#f8fafc;color:#0f172a;margin:0}.container{max-width:900px;margin:36px auto;padding:24px}.card{background:#ffffff;border-radius:12px;padding:18px;box-shadow:0 6px 18px rgba(15,23,42,.06)}.small{color:#6b7280;font-size:14px}.site-title{font-size:1.125rem;font-weight:700;color:#0f172a}.bg-accent{background:#2563eb;color:#fff}.text-white{color:#fff}nav{flex-wrap:wrap;justify-content:flex-end}.football-section{padding:16px}.playbook-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.play-card{border:1px solid #dbeafe;border-radius:12px;padding:12px;background:#f8fbff}.play-card h2{margin:0;font-size:1rem}.field{position:relative;width:100%;aspect-ratio:16/9;background:linear-gradient(180deg,#16a34a,#15803d);border-radius:10px;overflow:hidden;border:0;display:block;padding:0}.field,.play-animation-btn{margin-top:10px;cursor:pointer}.play-animation-btn{border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:8px;padding:6px 10px;font-weight:600}.play-animation-btn:hover{background:#dbeafe}.field:focus-visible{outline:3px solid #bfdbfe;outline-offset:3px}.field.fallback-fullscreen{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;aspect-ratio:auto;border-radius:0;z-index:999}.field:-webkit-full-screen,.field:fullscreen{width:100vw;height:100vh;max-width:none;aspect-ratio:auto;border-radius:0}.yard-line{position:absolute;left:0;right:0;border-top:1px dashed rgba(255,255,255,.45)}.yard-line-1{top:25%}.yard-line-2{top:50%}.yard-line-3{top:75%}.dot{position:absolute;width:22px;height:22px;border-radius:999px;color:#0f172a;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;background:#fef08a;box-shadow:0 0 0 2px rgba(15,23,42,.2);top:78%;left:45%;--route-animation-state:paused;animation-play-state:var(--route-animation-state)}.qb{background:#bfdbfe;left:50%;top:86%;animation:pulse 1.2s ease-in-out infinite;animation-play-state:var(--route-animation-state)}.route-arrow{position:absolute;height:2px;background:rgba(255,255,255,.9);transform-origin:left center}.route-arrow:after{content:"";position:absolute;right:-2px;top:50%;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:9px solid rgba(255,255,255,.9);transform:translateY(-50%)}.football{position:absolute;left:calc(50% + 8px);top:calc(86% + 6px);width:11px;height:7px;border-radius:999px;background:#7c2d12;box-shadow:0 0 0 1px rgba(255,248,235,.75);opacity:0}.football-animated{animation:passRoute 1.1s ease-out forwards}.is-animating{--route-animation-state:running}.route-a{left:56%}.route-b{left:66%}.route-c{left:36%}.route-x{left:28%}.route-y{left:54%}.route-z{left:76%}.route-1{left:60%}.route-2{left:68%}.route-3{left:76%}.route-l{left:24%}.route-c2{left:50%}.route-r{left:74%}.slant-left{animation:slantLeft 2.2s ease-in-out infinite}.slant-right{animation:slantRight 2.2s ease-in-out infinite}.slant-right-short{animation:slantRightShort 2.2s ease-in-out infinite}.cross-right{animation:crossRight 2.2s ease-in-out infinite}.cross-left{animation:crossLeft 2.2s ease-in-out infinite}.corner-up{animation:cornerUp 2.2s ease-in-out infinite}.flat-right{animation:flatRight 2.2s ease-in-out infinite}.out-right{animation:outRight 2.2s ease-in-out infinite}.go-right{animation:goRight 2.2s ease-in-out infinite}.hitch-left{animation:hitchLeft 2.2s ease-in-out infinite}.seam-up{animation:seamUp 2.2s ease-in-out infinite}.comeback-right{animation:comebackRight 2.2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes slantLeft{0%{transform:translate(0)}70%,to{transform:translate(-20px,-44px)}}@keyframes slantRight{0%{transform:translate(0)}70%,to{transform:translate(22px,-50px)}}@keyframes slantRightShort{0%{transform:translate(0)}70%,to{transform:translate(16px,-30px)}}@keyframes crossRight{0%{transform:translate(0)}70%,to{transform:translate(46px,-30px)}}@keyframes crossLeft{0%{transform:translate(0)}70%,to{transform:translate(-40px,-30px)}}@keyframes cornerUp{0%{transform:translate(0)}50%{transform:translateY(-26px)}70%,to{transform:translate(20px,-52px)}}@keyframes flatRight{0%{transform:translate(0)}70%,to{transform:translate(30px,-6px)}}@keyframes outRight{0%{transform:translate(0)}50%{transform:translateY(-28px)}70%,to{transform:translate(24px,-28px)}}@keyframes goRight{0%{transform:translate(0)}70%,to{transform:translate(2px,-56px)}}@keyframes hitchLeft{0%{transform:translate(0)}50%{transform:translate(-8px,-26px)}70%,to{transform:translate(-4px,-14px)}}@keyframes seamUp{0%{transform:translate(0)}70%,to{transform:translateY(-58px)}}@keyframes comebackRight{0%{transform:translate(0)}50%{transform:translate(10px,-38px)}70%,to{transform:translate(2px,-24px)}}@keyframes passRoute{0%{opacity:0;transform:translate(0) rotate(0deg)}8%{opacity:1}to{opacity:1;transform:translate(var(--ball-x),var(--ball-y)) rotate(-18deg)}}@media (max-width:820px){.container{margin:18px auto;padding:14px}.playbook-grid{grid-template-columns:1fr;gap:10px}nav{gap:10px;justify-content:flex-start;margin-top:8px}header{align-items:flex-start;flex-direction:column}.field{aspect-ratio:4/3}.dot{width:20px;height:20px;font-size:9px}}