:root{font-family:IBM Plex Sans,Segoe UI,sans-serif;line-height:1.4;font-weight:400;color:#f5f5f0;background:radial-gradient(circle at top,rgba(247,174,43,.18),transparent 28%),linear-gradient(160deg,#111418,#181c21 45%,#0b0e12);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--panel: rgba(18, 24, 30, .78);--panel-border: rgba(255, 255, 255, .08);--accent: #f7ae2b;--success: #5dd39e;--danger: #ff6b57;--muted: #a7afb8}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;min-width:320px;min-height:100%;margin:0;padding:0;overflow:hidden}body{width:100%;height:100%;overflow:hidden}button,input{font:inherit}.eyebrow{margin:0 0 .45rem;color:var(--accent);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem}.player-shell{position:relative;width:100%;height:100%;min-height:100%;background:#000;overflow:hidden}.player-shell--loading,.player-shell--unregistered{width:100%;height:100%;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;color:var(--muted);background:#050608;font-family:IBM Plex Sans,Segoe UI,sans-serif}.loading-orb{width:4rem;height:4rem;border-radius:999px;border:4px solid rgba(255,255,255,.08);border-top-color:var(--accent);animation:spin 1s linear infinite}.viewport{position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;background:#000}.empty-playback{width:100%;height:100%;min-height:100%;display:grid;place-items:center;padding:2rem;background:linear-gradient(180deg,#0f1318f2,#080b0efa)}.empty-playback--syncing{background:radial-gradient(circle at top,rgba(247,174,43,.18),transparent 30%),linear-gradient(180deg,#0f1318f2,#080b0efa)}.empty-playback--offline{background:radial-gradient(circle at top,rgba(255,107,87,.18),transparent 32%),linear-gradient(180deg,#0f1318f2,#080b0efa)}.empty-playback__panel{max-width:42rem;padding:0;text-align:center;background:transparent;border:none}.empty-playback h1{margin:0 0 1.25rem;font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:700;color:#fff;line-height:1.25;letter-spacing:-.02em;text-align:center}.empty-playback p{margin:0 auto;color:var(--muted);font-size:1.05rem;line-height:1.6;max-width:640px;text-align:center}.viewport--idle{display:grid;place-items:center;padding:3rem;color:var(--muted)}.viewport--idle h2{margin:0;font-size:2.4rem}.media-frame{display:block;width:100%;height:100%;border:0;object-fit:cover;background:#000}.media-frame--image{display:block;width:100%;height:100%;object-fit:cover;background:#050608}.orientation-rotated-portrait,.orientation-rotated-landscape{position:fixed!important;top:50%!important;left:50%!important;transform-origin:center center!important;overflow:hidden!important;background:#000!important;margin:0!important}.orientation-rotated-portrait{transform:translate(-50%,-50%) rotate(90deg)!important}.orientation-rotated-landscape{transform:translate(-50%,-50%) rotate(-90deg)!important}.media-frame--html{background:#fff}.viewport-loading,.viewport-error{position:absolute;z-index:2;left:1rem;right:1rem;top:1rem;padding:.85rem 1rem;border-radius:18px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.viewport-loading{background:#080b0ead;border:1px solid rgba(255,255,255,.08);color:#f7f3ea}.viewport-error{display:grid;gap:.25rem;background:#731408d1;border:1px solid rgba(255,143,121,.4);color:#ffe0d9}.viewport-caption{position:absolute;left:1rem;right:1rem;bottom:1rem;display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border-radius:999px;background:#080b0eb8;border:1px solid rgba(255,255,255,.08);color:#f7f3ea;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.setup-card{max-width:34rem;margin:auto;padding:1.25rem;border-radius:24px;border:1px solid var(--panel-border);background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.setup-card h1{margin:0 0 .75rem;font-size:clamp(2.2rem,4vw,4rem)}.setup-copy{color:var(--muted)}.setup-button{padding:.95rem 1.2rem;border:0;border-radius:18px;background:linear-gradient(135deg,#f7ae2b,#f97316);color:#15120d;font-weight:700;cursor:pointer}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.demo-info-bar{position:absolute;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:8px 16px;background:#080b0fd9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 4px 20px #00000080;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#f1f5f9;font-size:.8125rem;pointer-events:none}.demo-info-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.demo-info-group--center{justify-content:center;flex:1;min-width:240px}.demo-info-group--right{justify-content:flex-end}.demo-info-item{display:flex;align-items:center;gap:6px}.demo-info-icon{color:#94a3b8;flex-shrink:0}.demo-info-label{color:#94a3b8;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.demo-info-value{color:#f8fafc;font-weight:600;display:flex;align-items:center;gap:6px}.demo-code-pill{display:inline-block;font-family:JetBrains Mono,Fira Code,monospace;font-size:.7rem;padding:1px 6px;border-radius:4px;background:#ffffff14;border:1px solid rgba(255,255,255,.12);color:#cbd5e1}.demo-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.demo-badge--portrait{background:#a855f72e;border:1px solid rgba(168,85,247,.4);color:#d8b4fe}.demo-badge--landscape{background:#3b82f62e;border:1px solid rgba(59,130,246,.4);color:#93c5fd}.demo-playing-indicator{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:9999px;max-width:100%}.demo-playing-indicator--live{background:#22c55e1f;border:1px solid rgba(34,197,94,.3)}.demo-playing-indicator--standby{background:#eab3081a;border:1px solid rgba(234,179,8,.25)}.demo-pulse-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e;animation:demo-pulse 1.8s cubic-bezier(.4,0,.6,1) infinite;flex-shrink:0}@keyframes demo-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}.demo-standby-icon{color:#eab308;flex-shrink:0}.demo-playing-label{font-size:.7rem;font-weight:700;letter-spacing:.06em;color:#94a3b8}.demo-playing-name{font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}.demo-creative-subname{font-size:.75rem;color:#94a3b8;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.text-highlight{color:#f7ae2b;font-weight:700}.demo-separator{color:#475569;margin:0 2px}.text-muted-count{color:#94a3b8;font-weight:500}