/* Versioned separately so a cached /hoops stylesheet cannot unstyle the Reel button. */
#reelBtn {
  appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:36px; padding:7px 12px; border:1px solid var(--accent-dim); border-radius:4px;
  color:var(--ink); background:var(--bg-2); font:500 var(--text-xs)/1.2 var(--font-mono); cursor:pointer;
}
#reelBtn:hover { border-color:var(--accent);color:var(--accent); }
#reelBtn:focus-visible,.reel-card :focus-visible { outline:2px solid #8fd18a;outline-offset:3px; }
#reelBtn svg { flex-shrink:0; }
.reel-modal { position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:16px; }
.reel-scrim { position:absolute;inset:0;background:rgba(0,0,0,.78); }
.reel-card { position:relative;box-sizing:border-box;width:min(580px,100%);max-height:calc(100dvh - 32px);
  overflow:auto;background:#0c100d;color:#e8ece6;border:1px solid #364238;border-radius:4px;padding:20px;
  font-family:var(--font-body);box-shadow:0 20px 80px #0008; }
.reel-head { display:flex;align-items:flex-start;justify-content:space-between;gap:16px; }
.reel-eyebrow { margin:0 0 6px;color:#9aa598;font:500 12px/1.4 var(--font-mono);letter-spacing:.05em; }
.reel-head h2 { margin:0;font:700 22px/1.25 var(--font-body); }
.reel-close { appearance:none;background:transparent;color:#e8ece6;border:1px solid #364238;border-radius:4px;
  width:36px;height:36px;font:400 24px/1 var(--font-body);cursor:pointer; }
.reel-session { margin:8px 0 12px;font:400 13px/1.4 var(--font-mono);color:#9aa598; }
.reel-preview { margin:auto;aspect-ratio:1;width:min(100%,48dvh);background:#0c100d;border:1px solid #28342c; }
.reel-preview canvas,.reel-preview video { display:block;width:100%;height:100%;object-fit:contain; }
.reel-card [hidden] { display:none!important; }
.reel-status { margin:12px 0 8px;font:400 12px/1.45 var(--font-mono);color:#c6d1c3; }
.reel-progress { height:3px;background:#28342c;margin-bottom:12px; }
.reel-progress span { display:block;width:0;height:100%;background:#8fd18a; }
.reel-actions { display:flex;flex-wrap:wrap;gap:8px; }
.reel-actions button,.reel-actions a { appearance:none;display:flex;align-items:center;justify-content:center;flex:1;
  box-sizing:border-box;padding:12px;min-height:44px;border:1px solid #527950;border-radius:4px;
  background:#8fd18a;color:#0c100d;font:700 14px/1.3 var(--font-body);text-decoration:none;cursor:pointer; }
.reel-actions .reel-share { background:transparent;color:#e8ece6; }
.reel-actions button:disabled { opacity:.5;cursor:wait; }
.reel-note { margin:12px 0 0;font:400 12px/1.5 var(--font-body);color:#9aa598; }
@media(max-width:640px) {
  #reelBtn { min-width:42px;min-height:42px;padding:8px; }
  #reelBtn span { display:inline; }
  .reel-modal { padding:10px; }
  .reel-card { max-height:calc(100dvh - 20px);padding:16px; }
  .reel-preview { width:min(100%,43dvh); }
}