*{box-sizing:border-box}body{margin:0;background:#06121e;color:#eef8ff;font:16px/1.6 system-ui,sans-serif}header,main{max-width:1280px;margin:auto;padding:22px}header{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}a{color:#dbff85}h1{font-size:clamp(28px,5vw,48px);line-height:1.15;margin:8px 0}.eyebrow{color:#dbff85;text-transform:uppercase;letter-spacing:.12em;font-size:12px}.heading p{color:#a6c4d6}.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:20px 0}button,select,.button{background:#102c3c;color:#eef8ff;border:1px solid #416072;border-radius:8px;padding:10px 14px;font:inherit}select{max-width:100%;min-width:230px}label{display:flex;gap:10px;align-items:center;max-width:100%}button{cursor:pointer}button[aria-pressed=true]{border-color:#dbff85}.button{background:#dbff85;color:#09221b;text-decoration:none;font-weight:700}#viewport{position:relative;height:65vh;min-height:360px;max-height:720px;border:1px solid #284557;border-radius:14px;overflow:hidden;touch-action:none}canvas{display:block;width:100%;height:100%}#status{position:absolute;top:12px;left:16px;margin:0;z-index:2;background:#06121ecc;padding:8px 12px;border-radius:8px;max-width:90%}#status[hidden]{display:none}#caption{position:absolute;bottom:12px;left:16px;right:16px;pointer-events:none;color:white;text-shadow:0 2px 4px black}.note{font-size:13px;color:#a6c4d6}video{width:100%;max-width:1000px;border-radius:12px}@media(max-width:600px){header,main{padding:16px}#viewport{height:55vh;min-height:320px}select{min-width:0;width:100%}label{width:100%}.controls .button{font-size:14px}}