:root{color-scheme:dark;--blue:#00adef;--navy:#101e33;--white:#f8fbff;--muted:#aab9ca;font-family:Arial,Helvetica,sans-serif;background:var(--navy);color:var(--white)}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 25%,#1b314e 0%,#101e33 70%)}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select{cursor:pointer}button{border:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.player:focus-visible{outline:3px solid var(--blue);outline-offset:4px}a{color:inherit}main{max-width:1392px;margin:auto;padding:36px 40px 22px}.heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:25px}.eyebrow{font-size:14px;font-weight:700;letter-spacing:.06em;margin:0 0 9px}.eyebrow span{color:var(--muted);font-weight:400;letter-spacing:.03em}h1{font-size:clamp(25px,3vw,38px);letter-spacing:-.045em;line-height:1.15;margin:0;font-weight:700}.year{display:inline-block;font-size:14px;letter-spacing:.04em;font-weight:500;color:var(--muted);margin-left:14px;vertical-align:middle}.profile-link{text-decoration:none;font-size:14px;display:flex;gap:16px;align-items:center;min-height:44px;color:#c7d3e2}.profile-link:hover{color:#fff}.profile-link span{color:var(--blue);font-size:22px}.player{position:relative;background:#050a12;border-radius:10px;box-shadow:0 25px 65px #03091466;overflow:hidden;width:min(100%,calc((100svh - 210px)*16/9));margin:0 auto}.screen{position:relative;aspect-ratio:16/9;background:#050a12}video{display:block;width:100%;height:100%;object-fit:contain}.controls{position:absolute;left:18px;right:18px;bottom:16px;display:flex;align-items:center;gap:14px;padding:10px;background:#101e3bef;box-shadow:0 5px 20px #0003;border:1px solid #ffffff0c;border-radius:7px}.controls button,.top-actions button,.center-play{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;color:#fff;min-width:44px;min-height:44px;border-radius:5px;padding:0}.controls button:hover{color:var(--blue)}svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}.controls .play-toggle{background:var(--blue);width:52px;color:#fff}.controls .play-toggle:hover,.center-play:hover,.copy-link:hover{background:#0797cb;color:white}.seek-wrap{min-width:40px;flex:1;display:flex;align-items:center}input[type=range]{width:100%;margin:0;height:28px;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;--value:0%;accent-color:var(--blue)}input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(to right,var(--blue) var(--value),#748092 var(--value))}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-3.5px;border-radius:50%;background:white;box-shadow:0 1px 3px #0005}input[type=range]::-moz-range-track{height:5px;border-radius:5px;background:#748092}input[type=range]::-moz-range-progress{height:5px;background:var(--blue)}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:white}input:disabled{opacity:.5;cursor:wait}.time{white-space:nowrap;font-size:14px;font-variant-numeric:tabular-nums;color:#fff}.volume-wrap{display:flex;align-items:center;gap:3px}.volume{max-width:65px}.speed{font-size:14px;padding:0 8px;height:44px;width:63px;border:0;border-radius:5px;background:#1e314b;color:#fff}.top-actions{position:absolute;top:18px;right:18px;left:18px;display:flex;justify-content:space-between;pointer-events:none}.top-actions button{pointer-events:auto;background:#101e3bef;gap:8px;font-size:14px;font-weight:600;padding:0 13px;border:1px solid #ffffff12}.top-actions .share{margin-left:auto;background:var(--blue)}.top-actions .share:hover{background:#0797cb}.sound-prompt svg{color:var(--blue)}.center-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:62px;background:var(--blue);border-radius:8px;box-shadow:0 6px 25px #0004}.center-play svg{width:29px;height:29px}.notice{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:80%;padding:10px 16px;border-radius:6px;background:#101e3bef;font-size:14px;text-align:center;pointer-events:none;margin:0}.notice:not(:empty)+.center-play{display:none}footer{display:flex;justify-content:space-between;gap:20px;max-width:100%;font-size:14px;color:var(--muted);margin-top:20px}footer p{margin:0;line-height:1.6}footer span{padding:0 5px;color:#73869e}footer .loop-label{padding:0;color:inherit}.quality{white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.share-dialog{color-scheme:light;width:min(440px,calc(100% - 32px));border:1px solid #d8e0eb;background:#fff;color:#14243c;border-radius:15px;padding:30px;box-shadow:0 20px 70px #0007}.share-dialog::backdrop{background:#071428c9;backdrop-filter:blur(5px)}.share-dialog h2{font-size:23px;letter-spacing:-.03em;margin:5px 0 10px}.share-dialog p{font-size:15px;color:#596b82;line-height:1.5}.share-dialog label{display:block;font-size:14px;font-weight:600;margin-top:22px;margin-bottom:8px}.share-dialog input{width:100%;font-size:14px;background:#f3f6fa;color:#14243c;border:1px solid #bec9d8;padding:12px;border-radius:5px}.close-dialog{position:absolute;top:6px;right:8px;min-width:44px;min-height:44px;border:0;background:none;color:#53657b;font-size:28px}.copy-link{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:46px;margin-top:14px;background:var(--blue);color:#fff;border-radius:5px;font-weight:700}.share-dialog .share-status{margin:12px 0 0;min-height:22px;font-size:14px}.player:fullscreen{width:100vw;max-width:none;height:100dvh;margin:0;border-radius:0;background:#050a12;display:flex;align-items:center;justify-content:center}.player:fullscreen .screen{width:100%;height:100%;aspect-ratio:auto}.player:fullscreen .controls{bottom:max(16px,env(safe-area-inset-bottom));left:18px;right:18px}.fallback{font-size:14px;color:var(--muted)}
@media(min-width:801px){.player.playing.idle:not(:focus-within) .controls,.player.playing.idle:not(:focus-within) .top-actions{opacity:0;pointer-events:none}.controls,.top-actions{transition:opacity .18s ease}}
@media(max-width:800px){main{padding:24px 20px}.heading{align-items:flex-start;margin-bottom:22px;gap:16px}.eyebrow{font-size:13px}.eyebrow span{display:block;margin-top:7px;font-size:12px}.profile-link{font-size:13px;gap:7px}.player{width:100%;overflow:visible}.controls{position:relative;left:auto;right:auto;bottom:auto;border-radius:0 0 10px 10px;display:grid;grid-template-columns:48px 1fr auto auto auto;gap:5px 8px;padding:7px 10px 10px}.screen,video{border-radius:10px 10px 0 0}.seek-wrap{grid-column:1/-1;grid-row:1}.play-toggle{grid-column:1;grid-row:2}.controls .play-toggle{width:44px}.time{grid-column:2;grid-row:2}.volume-wrap{grid-column:3;grid-row:2}.volume-wrap .volume{display:none}.speed{grid-column:4;grid-row:2}.fullscreen{grid-column:5;grid-row:2}.top-actions{top:12px;left:12px;right:12px}.top-actions button{min-height:44px;padding:0 10px}.top-actions svg{width:20px;height:20px}footer{flex-direction:column;gap:6px;font-size:13px;margin-top:19px}.player:fullscreen .controls{position:absolute}.player:fullscreen video{border-radius:0}}
@media(max-width:420px){main{padding:24px 12px}.heading{padding:0 5px}h1{font-size:26px;max-width:245px}.year{font-size:13px;margin-left:9px}.profile-link{max-width:85px;line-height:1.5}.share-word{display:none}.top-actions .share{width:44px;padding:0}.sound-prompt{font-size:13px!important}.controls{gap:4px}.time{font-size:12px}.speed{width:59px}.eyebrow{font-size:12px}.eyebrow span{font-size:11px}.center-play{width:74px;height:54px}footer{padding:0 5px}}
@media(prefers-reduced-motion:reduce){.controls,.top-actions{transition:none}}

.silent-label{font:600 12px/1.2 system-ui,sans-serif;padding:10px 12px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff}

.hudl-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 18px 20px; border: 1px solid #34435a; border-radius: 14px; background: #132238; }
.hudl-action p { margin: 0; color: #c3cfdf; font-size: 14px; }
.hudl-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 20px; border-radius: 9px; background: #ff641e; color: #fff; font-weight: 700; text-decoration: none; }
.hudl-button:hover { background: #df4b0b; }
.hudl-button:focus-visible { outline: 3px solid white; outline-offset: 4px; }
@media (max-width: 600px) { .hudl-button { width: 100%; } }

.end-card{position:absolute;inset:0;overflow:hidden;background:#1a232a;z-index:3;display:grid;place-items:center;container-type:inline-size;animation:card-in .25s ease-out both}
.end-band{position:absolute;width:1.7%;height:85%;background:#25303a;transform:skewX(-31deg);left:27%;top:-30%;animation:band-in .85s ease-out both}
.band-two{width:.18%;left:7%;top:5%;height:38%;opacity:.7;animation-delay:.1s}
.end-stripes{position:absolute;height:6%;width:23%;background:repeating-linear-gradient(120deg,#ff351c 0 12px,transparent 12px 24px);animation:stripes-in .65s cubic-bezier(.2,.7,.2,1) both}
.stripes-top{top:0;left:43%}.stripes-bottom{bottom:0;left:1%;animation-delay:.12s}.stripes-corner{bottom:-8%;right:-5%;height:29%;width:18%;background:repeating-linear-gradient(135deg,#ff351c 0 24px,transparent 24px 40px);animation-delay:.22s}
.end-content{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;animation:zero-in .7s .15s both}
.end-number{font:900 clamp(62px,15cqw,210px)/.92 Arial,Helvetica,sans-serif;color:#e7f0ff;letter-spacing:-.06em;padding-right:.06em}
.end-hudl{font-size:clamp(16px,2.4cqw,32px);font-weight:600;text-decoration:none;padding:10px 16px;min-height:44px;display:flex;align-items:center;gap:12px;animation:link-in .5s .55s both}.end-hudl:hover{text-decoration:underline;color:#fff}
.end-replay{background:none;color:#aab9ca;font-size:clamp(12px,1.2cqw,16px);min-height:44px;padding:6px 16px;animation:link-in .5s .7s both}.end-replay:hover{color:white}
.player.ended .top-actions,.player.ended .center-play{display:none}.player.ended .controls{z-index:4}
@keyframes card-in{from{opacity:0}to{opacity:1}}@keyframes stripes-in{from{transform:translateX(70%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes band-in{from{translate:50px -30px;opacity:0}to{translate:0 0;opacity:1}}@keyframes zero-in{from{transform:scale(.8) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}@keyframes link-in{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:600px){.end-content{gap:0}.end-hudl{padding:4px 10px}.end-replay{min-height:32px}.end-number{font-size:20cqw}}
@media(prefers-reduced-motion:reduce){.end-card,.end-card *{animation:none!important}}

/* Mouse controls follow hover; keyboard and touch controls stay accessible. */
@media (hover:hover) and (pointer:fine) {
  .player .controls,.player .top-actions { opacity:0!important; pointer-events:none!important; transition:opacity .18s ease; }
  .player:hover .controls,.player:hover .top-actions,
  .player:has(:focus-visible) .controls,.player:has(:focus-visible) .top-actions,
  .player:focus-visible .controls { opacity:1!important; pointer-events:auto!important; }
}

.eyebrow{font-size:clamp(14px,1.5vw,19px);font-weight:800;line-height:1.6}.eyebrow span{font-weight:700;color:#e5edf7}.bio-button{background:var(--blue);color:#071c2b}.bio-button:hover{background:#39caff;color:#071c2b}
@media(max-width:800px){.eyebrow{font-size:15px}.eyebrow span{font-size:13px;line-height:1.7}}

footer{align-items:center;flex-wrap:wrap}.contact-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 20px}.contact-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:#d9e5f3;font-size:13px;white-space:nowrap}.contact-links svg{width:18px;height:18px;color:var(--blue)}.contact-links a:hover{color:#fff;text-decoration:underline}@media(max-width:800px){footer{align-items:flex-start}.contact-links{justify-content:flex-start;gap:0 16px}}

/* Lower-right accents enter diagonally from below-left, along their slant. */
.stripes-corner{background:none;animation:corner-rise 1.1s cubic-bezier(.16,.7,.22,1) .12s both}
.stripes-corner::before,.stripes-corner::after{content:"";position:absolute;bottom:-15%;height:145%;background:#ff351c;transform:skewX(-31deg)}
.stripes-corner::before{left:58%;width:24%}.stripes-corner::after{left:38%;width:8%}
@keyframes corner-rise{from{transform:translate(-65%,100%);opacity:0}15%{opacity:1}to{transform:translate(0,0);opacity:1}}
@media(prefers-reduced-motion:reduce){.stripes-corner{animation:none!important}}
