:root { font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#202538; background:#f7f6fb; --surface:#fff; --text:#202538; --muted:#615e70; --purple:#7156d7; --border:#e9e6f1; --background:#f7f6fb; }
* { box-sizing:border-box; }
body { margin:0; background:var(--background); color:var(--text); }
button,select { font:inherit; cursor:pointer; }
button:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid #df7d28; outline-offset:3px; }
[hidden] { display:none!important; }
h1,h2,h3,p { margin:0; }
.site-header { background:var(--surface); border-bottom:1px solid var(--border); }
.header-inner { max-width:1500px; margin:auto; padding:18px 28px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.brand { display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--text); font-size:20px; font-weight:900; line-height:1; letter-spacing:-1px; }
.brand-icon { background:var(--purple); color:white; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; font-size:19px; }
.brand small { display:block; margin-top:5px; color:var(--muted); font-size:8px; letter-spacing:1.4px; }
.accent,h1 em { color:var(--purple); }
.mode-switch { display:flex; padding:4px; gap:4px; background:#f3f1f8; border-radius:11px; }
.mode-switch button { border:0; background:transparent; color:#5d596c; border-radius:8px; padding:10px 18px; font-size:13px; font-weight:700; }
.mode-switch button.active { background:white; color:#513aa9; box-shadow:0 2px 8px #28203512; }
.theme-button,.secondary { border:1px solid #ded9ec; border-radius:10px; background:var(--surface); color:var(--text); padding:10px 16px; font-weight:700; }
.container { max-width:1400px; margin:auto; padding:0 28px; }
.hero { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:46px 6px 32px; }
.eyebrow { color:#654cc4; font-size:11px; letter-spacing:1.5px; font-weight:850; }
h1 { max-width:760px; font-size:clamp(38px,5vw,62px); line-height:1.06; letter-spacing:-2.5px; margin:14px 0; }
h1 em { font-style:normal; }
.hero p:not(.eyebrow) { max-width:600px; color:var(--muted); line-height:1.6; }
.hero-art { display:flex; align-items:center; gap:12px; padding:20px; border:2px solid #f6cf70; border-radius:22px; background:#fff8dc; transform:rotate(-4deg); color:#765bd8; font-size:26px; }
.hero-art span:not(:last-child) { opacity:.4; }
.workspace { padding:30px; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:0 14px 35px #29204509; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
h2 { font-size:clamp(23px,2.2vw,30px); letter-spacing:-.8px; margin:8px 0; }
.section-heading p:not(.eyebrow),.info-card p:not(.eyebrow),.frame-note { color:var(--muted); line-height:1.6; }
.pill { padding:9px 13px; background:#fff5cf; border-radius:50px; color:#725b1c; font-size:10px; font-weight:800; letter-spacing:.6px; white-space:nowrap; }
.comparison { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.preview-card { border:1px solid var(--border); border-radius:16px; padding:16px; min-width:0; }
.card-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.card-header h3 { font-size:16px; }
.card-header label { color:var(--muted); font-size:12px; font-weight:700; display:flex; align-items:center; gap:8px; }
select { color:#4b359e; background:#f1edff; border:1px solid #d7cff6; border-radius:8px; padding:8px; font-weight:800; }
.card-caption { display:flex; gap:8px; align-items:baseline; margin:14px 0 0; color:var(--muted); font-size:12px; }.card-caption strong { color:var(--purple); font-size:20px; }
.controls { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-top:22px; }.controls p { color:var(--muted); font-size:13px; }.controls>div,.frame-controls { display:flex; gap:9px; flex-wrap:wrap; }
.primary { border:1px solid #654acb; background:#7053d2; color:#fff; padding:10px 20px; border-radius:10px; font-weight:750; }
.learn-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }.info-card { border-radius:18px; padding:27px; border:1px solid; }.info-card.yellow { background:#fff8df; border-color:#f3df9c; }.info-card.lavender { background:#f0edff; border-color:#ddd6fa; }.info-card h2 { color:#29213f; }.info-card p:not(.eyebrow) { color:#554f62; }
.strip { display:flex; gap:7px; margin:14px 0; }.strip span { height:38px; flex:1; background:white; border-radius:6px; color:#765bd8; padding:5px; }.strip span:nth-child(2) { text-align:center; }.strip span:nth-child(3) { text-align:right; }.strip span:nth-child(4) { text-align:right; color:#e96d94; }
.footnote { color:var(--muted); font-size:13px; line-height:1.5; margin:20px 5px; }
.frame-view { max-width:820px; margin:auto; text-align:center; }.frame-count { margin:18px 0; font-weight:800; color:var(--purple); }.frame-controls { justify-content:center; }.thumbnails { display:grid; grid-template-columns:repeat(12,minmax(34px,1fr)); overflow:auto; gap:6px; margin:25px 0; padding:4px; }.thumbnail { padding:0; border:2px solid transparent; border-radius:7px; background:#eee9ff; overflow:hidden; aspect-ratio:16/9; }.thumbnail img { display:block; width:100%; height:100%; object-fit:cover; }.thumbnail.selected { border-color:#765bd8; }.frame-note { margin-bottom:10px; }
footer { max-width:1400px; margin:35px auto 0; padding:25px 28px; display:flex; justify-content:space-between; gap:15px; color:var(--muted); border-top:1px solid var(--border); font-size:12px; }
[data-theme='cyber'] { --surface:#24213a; --text:#f7f4ff; --muted:#d0cbe0; --purple:#b7a5ff; --border:#46405b; --background:#151326; }.cyber {} [data-theme='cyber'] .eyebrow { color:#c1b0ff; } [data-theme='cyber'] .info-card .eyebrow { color:#654cc4; } [data-theme='cyber'] .secondary,[data-theme='cyber'] .theme-button { border-color:#655d7a; } [data-theme='cyber'] .mode-switch { background:#343049; }
@media(max-width:760px) { .header-inner { flex-wrap:wrap; padding:14px 16px; }.mode-switch { order:3; width:100%; }.mode-switch button { flex:1; }.container { padding:0 16px; }.hero { padding:35px 0 24px; }.hero-art { display:none; }.workspace { padding:18px; }.section-heading { align-items:flex-start; flex-direction:column; }.comparison,.learn-grid { grid-template-columns:1fr; }.controls { align-items:flex-start; flex-direction:column; }.workspace-options { flex-wrap:wrap; }.card-header { flex-wrap:wrap; } footer { padding:20px 16px; flex-wrap:wrap; } }

/* Pixel Resolution Lab's Standard and Cyber design language. */
html:not([data-theme="cyber"]) {
  color-scheme:light;
  --surface:#fffdf9; --text:#2b1a3d; --muted:#4b315c; --purple:#5a189a; --border:#d2b8eb;
  background-color:#fffdf9;
  background-image:radial-gradient(circle,#5a189a20 1.5px,transparent 2px),radial-gradient(circle,#ff8fab66 2px,transparent 2.5px),linear-gradient(125deg,#fff1c9,#ffe0ec 52%,#dcf1ff);
  background-size:76px 76px,113px 113px,cover;
  background-position:0 0,34px 45px,0 0;
  font-family:ui-rounded,"Trebuchet MS",ui-sans-serif,system-ui,sans-serif;
}
html:not([data-theme="cyber"]) body { background:transparent; }
html:not([data-theme="cyber"]) :is(.site-header,.workspace) { background:#fffdf9; border-color:#ffd23f; box-shadow:6px 7px 0 #5a189a24; }
html:not([data-theme="cyber"]) .site-header { border-bottom-width:3px; }
html:not([data-theme="cyber"]) .workspace { border-width:2px; border-radius:22px; }
html:not([data-theme="cyber"]) .brand-icon { background:#5a189a; border-radius:14px; }
html:not([data-theme="cyber"]) .mode-switch { background:#f1eaff; border:1px solid #d2b8eb; border-radius:14px; }
html:not([data-theme="cyber"]) .mode-switch button { color:#4b315c; border-radius:10px; }
html:not([data-theme="cyber"]) .mode-switch button.active { background:#5a189a; color:#fffdf9; box-shadow:2px 3px 0 #2b1a3d55; }
html:not([data-theme="cyber"]) :is(.theme-button,.primary) { background:#ffd23f; color:#2b1a3d; border:2px solid #5a189a; border-radius:12px; font-weight:800; }
html:not([data-theme="cyber"]) :is(.theme-button,.primary):hover { background:#ffec99; }
html:not([data-theme="cyber"]) :is(.preview-card,select,.secondary) { background:#fffdf9; color:#2b1a3d; border-color:#d2b8eb; border-radius:12px; }
html:not([data-theme="cyber"]) :is(.eyebrow,.accent,h1 em) { color:#5a189a; }
html:not([data-theme="cyber"]) :is(button,select,a):focus-visible { outline:3px solid #5a189a; outline-offset:3px; }
html[data-theme="cyber"] {
  color-scheme:dark; --surface:#071216; --text:#e6f4f5; --muted:#b1cbd0; --purple:#e8ff00; --border:#28515a; --background:#03090b;
  background:#03090b; font-family:"Rajdhani","Arial Narrow",ui-sans-serif,system-ui,sans-serif;
}
html[data-theme="cyber"] :is(.site-header,.workspace) { background:#071216; border-color:#28515a; box-shadow:0 10px 32px #0008; }
html[data-theme="cyber"] .brand-icon { background:#e8ff00; color:#03090b; }
html[data-theme="cyber"] :is(.eyebrow,.accent,h1 em,.card-caption strong) { color:#e8ff00; }
html[data-theme="cyber"] .mode-switch { background:#10242a; }
html[data-theme="cyber"] .mode-switch button { color:#b1cbd0; }
html[data-theme="cyber"] .mode-switch button.active { background:#26505a; color:#e8ff00; box-shadow:none; }
html[data-theme="cyber"] :is(.preview-card,select,.secondary,.theme-button) { background:#0d1d23; border-color:#38616a; color:#e6f4f5; }
html[data-theme="cyber"] .theme-button { border-color:#e8ff00; color:#e8ff00; }
html[data-theme="cyber"] .theme-button:hover { background:#c6dc00; color:#03090b; }
html[data-theme="cyber"] .primary { background:#e8ff00; border-color:#e8ff00; color:#03090b; }
html[data-theme="cyber"] :is(.info-card.yellow,.info-card.lavender,.pill) { background:#10242a; border-color:#38616a; color:#e6f4f5; }
html[data-theme="cyber"] :is(.info-card h2,.info-card p:not(.eyebrow)) { color:#e6f4f5; }
html[data-theme="cyber"] .info-card .eyebrow { color:#00d9f5; }
html[data-theme="cyber"] :is(.strip span,.thumbnail) { background:#0d1d23; color:#e8ff00; }
html[data-theme="cyber"] .thumbnail.selected { border-color:#e8ff00; }
html[data-theme="cyber"] :is(button,select,a):focus-visible { outline:3px solid #e8ff00; outline-offset:3px; }
@media (max-width:480px) { html:not([data-theme="cyber"]) .workspace { box-shadow:3px 4px 0 #5a189a24; } }
/* One rendered source feeds the selected video views. */
.workspace-options { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.scene-control { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:var(--text); font-size:13px; font-weight:800; }
.view-switch { display:flex; gap:4px; padding:4px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.view-switch button { border:0; border-radius:8px; background:transparent; color:var(--text); padding:9px 14px; font-weight:700; }
html:not([data-theme="cyber"]) .view-switch button[aria-pressed="true"] { background:#5a189a; color:#fffdf9; }
html[data-theme="cyber"] .view-switch { background:#10242a; }
html[data-theme="cyber"] .view-switch button[aria-pressed="true"] { background:#26505a; color:#e8ff00; }
.original-view .card-header h3 { font-size:16px; }
#source { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.video-view,.frame-stage img { display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:12px; background:#2b1a3d; }
.frame-stage img { object-fit:cover; }
html[data-theme="cyber"] :is(.video-view,.frame-stage img) { background:#10242a; outline:1px solid #28515a; }
.playback-options label { color:var(--muted); font-size:12px; font-weight:700; display:flex; align-items:center; gap:8px; }
footer a { color:inherit; }