.epc{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2;--epc-accent: var(--color-accent, #22c55e);--epc-track: rgba(255, 255, 255, .18);--epc-fg: #fff;font-family:var(--font-ui, "Space Mono", monospace)}.epc-bar{pointer-events:auto;position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:12px}.epc-fs{pointer-events:auto;position:absolute;top:10px;left:10px;width:32px;height:32px;border:0;border-radius:var(--radius, 0);background:transparent;color:var(--epc-fg);cursor:pointer;opacity:.75}.epc-fs:hover{opacity:1}.epc-fs:before{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;background:linear-gradient(currentColor,currentColor) left top / 7px 2px no-repeat,linear-gradient(currentColor,currentColor) left top / 2px 7px no-repeat,linear-gradient(currentColor,currentColor) right top / 7px 2px no-repeat,linear-gradient(currentColor,currentColor) right top / 2px 7px no-repeat,linear-gradient(currentColor,currentColor) left bottom / 7px 2px no-repeat,linear-gradient(currentColor,currentColor) left bottom / 2px 7px no-repeat,linear-gradient(currentColor,currentColor) right bottom / 7px 2px no-repeat,linear-gradient(currentColor,currentColor) right bottom / 2px 7px no-repeat}.epc-fs.is-fs:before{background:linear-gradient(currentColor,currentColor) left top 5px / 7px 2px no-repeat,linear-gradient(currentColor,currentColor) left 5px top / 2px 7px no-repeat,linear-gradient(currentColor,currentColor) right top 5px / 7px 2px no-repeat,linear-gradient(currentColor,currentColor) right 5px top / 2px 7px no-repeat,linear-gradient(currentColor,currentColor) left bottom 5px / 7px 2px no-repeat,linear-gradient(currentColor,currentColor) left 5px bottom / 2px 7px no-repeat,linear-gradient(currentColor,currentColor) right bottom 5px / 7px 2px no-repeat,linear-gradient(currentColor,currentColor) right 5px bottom / 2px 7px no-repeat}.epc-play{flex:0 0 auto;width:36px;height:36px;border:0;border-radius:var(--radius, 0);background:transparent;color:var(--epc-fg);cursor:pointer;position:relative}.epc-play:before{content:"";position:absolute;top:9px;right:10px;bottom:9px;left:12px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}.epc-play.is-playing:before{top:10px;right:11px;bottom:10px;left:11px;clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}.epc-track{position:relative;flex:1;height:8px;border-radius:var(--radius, 0);background:var(--epc-track);overflow:visible;border:1px solid color-mix(in srgb,var(--epc-accent) 35%,transparent)}.epc-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--epc-accent);border-radius:inherit;pointer-events:none}.epc-thumb{position:absolute;top:50%;left:0;width:3px;height:16px;margin-left:-1.5px;transform:translateY(-50%);background:var(--epc-fg);border-radius:1px;box-shadow:0 0 0 1px color-mix(in srgb,var(--epc-accent) 55%,transparent);pointer-events:none;z-index:1}@media(pointer:coarse){.epc-thumb{width:10px;height:18px;margin-left:-5px;border-radius:2px;background:var(--epc-accent)}}.epc-scrub{position:absolute;top:-8px;right:0;bottom:-8px;left:0;width:100%;margin:0;opacity:0;cursor:pointer}.epc-speed-wrap{position:relative;flex:0 0 auto}.epc-speed{min-width:40px;height:32px;border:1px solid var(--epc-accent);border-radius:var(--radius, 0);background:transparent;color:var(--epc-accent);font:700 12px/1 var(--font-ui, "Space Mono", monospace);cursor:pointer}.epc-speed-menu{position:absolute;right:0;bottom:calc(100% + 8px);min-width:72px;padding:6px;border-radius:var(--radius, 0);border:1px solid var(--epc-accent);background:#000000eb;display:grid;gap:2px}.epc-speed-menu[hidden]{display:none}.epc-speed-menu button{border:0;border-radius:var(--radius, 0);padding:8px 10px;background:transparent;color:var(--epc-accent);font:500 12px/1 var(--font-ui, "Space Mono", monospace);text-align:left;cursor:pointer}.epc-speed-menu button:hover{background:color-mix(in srgb,var(--epc-accent) 18%,transparent)}:root,[data-theme=oled]{--color-background: #000000;--color-panel: #000000;--color-panel-elevated: #0a0a0a;--color-foreground: #f8fafc;--color-muted: #94a3b8;--color-border: #475569;--color-accent: #22c55e;--color-terminal: #4ade80;--font-ui: "Space Mono", ui-monospace, monospace;--radius: 0;--control-min: 44px;--transition: .16s ease;--viewport-radius: 16px;--epc-accent: #22c55e;--menu-select-bg: rgba(0, 0, 0, .92)}[data-theme=clay]{--color-background: #ffe4e6;--color-panel: #ffe4e6;--color-panel-elevated: #ffffff;--color-foreground: #3b0764;--color-muted: #7c3aed;--color-border: #e9d5ff;--color-accent: #8b5cf6;--color-terminal: #5b21b6;--font-ui: "DM Sans", system-ui, sans-serif;--radius: 16px;--viewport-radius: 24px;--epc-accent: #8b5cf6;--menu-select-bg: #ffffff}[data-theme=clay] h1{font-family:Nunito,DM Sans,sans-serif;font-weight:900}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;font-family:var(--font-ui);color:var(--color-foreground);background:var(--color-background)}#app{display:grid;grid-template-columns:360px 1fr;gap:0}body.is-embed #app{grid-template-columns:1fr}body.is-embed .panel{display:none}.viewport{position:relative;min-width:0;min-height:0;margin:12px;overflow:hidden;border-radius:var(--viewport-radius);background:var(--color-background)}body.is-embed .viewport{margin:0;border-radius:0}#viewer{width:100%;height:100%;display:block;background:var(--color-background)}#chrome-host{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.viewport-meta{position:absolute;top:12px;right:14px;z-index:3;color:#ffffffbf;font-size:12px;pointer-events:none}.panel{display:flex;flex-direction:column;gap:14px;padding:18px;background:var(--color-panel);border-right:1px solid var(--color-border);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--color-accent) transparent}.panel h1{margin:0;font-size:18px;font-weight:700;letter-spacing:.02em;color:var(--color-accent)}.panel>p{margin:0;color:var(--color-muted);line-height:1.5;font-size:12px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.panel-head-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.about-link{display:inline-flex;align-items:center;min-height:36px;padding:8px 12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted);text-decoration:none}.about-link:hover{color:var(--color-accent)}.seo-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.settings-menu{position:relative;flex:0 0 auto}.settings-menu>summary{list-style:none;cursor:pointer;min-height:36px;padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);-webkit-user-select:none;user-select:none}.settings-menu>summary::-webkit-details-marker{display:none}.settings-body{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:240px;display:grid;gap:10px;padding:12px;background:var(--color-panel-elevated);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:0 12px 32px #00000073}.settings-field{display:grid;gap:4px;font-size:11px;color:var(--color-muted);text-transform:uppercase;letter-spacing:.04em}.menu-select{position:relative}.menu-select-btn{width:100%;min-height:32px;padding:0 10px;border:1px solid var(--color-accent);border-radius:var(--radius);background:transparent;color:var(--color-accent);font:700 12px/1 var(--font-ui);text-align:left;cursor:pointer}.menu-select-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;min-width:100%;padding:6px;border-radius:var(--radius);border:1px solid var(--color-accent);background:var(--menu-select-bg, rgba(0, 0, 0, .92));display:grid;gap:2px;box-shadow:0 8px 24px #0000001f}.menu-select-menu[hidden]{display:none}.menu-select-menu button{border:0;border-radius:var(--radius);padding:8px 10px;background:transparent;color:var(--color-accent);font:500 12px/1 var(--font-ui);text-align:left;cursor:pointer}.menu-select-menu button:hover{background:color-mix(in srgb,var(--color-accent) 18%,transparent)}.viewport-hints{position:absolute;left:0;right:0;bottom:56px;z-index:3;display:flex;flex-wrap:wrap;gap:10px 16px;padding:8px 14px;pointer-events:none;font-size:11px;letter-spacing:.04em;color:var(--color-accent)}.section{display:flex;flex-direction:column;gap:10px}.section-title{margin:0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent)}.file-row{display:grid;grid-template-columns:72px 1fr auto;gap:8px;align-items:center}.file-label{font-size:11px;color:var(--color-muted);text-transform:uppercase;letter-spacing:.04em}.file-path{min-width:0;min-height:var(--control-min);border:1px solid var(--color-border);border-radius:var(--radius);padding:8px 10px;color:var(--color-terminal);background:var(--color-panel-elevated);font-family:var(--font-ui);font-size:11px}.btn-browse,.btn-full,.btn-speed,.btn-icon,.btn-primary-text,.recent-item{min-height:var(--control-min);border:1px solid var(--color-border);border-radius:var(--radius);padding:8px 12px;color:var(--color-accent);background:transparent;font-family:var(--font-ui);font-size:12px;cursor:pointer;transition:background-color var(--transition),color var(--transition)}.btn-browse:hover,.btn-full:hover,.btn-speed:hover,.recent-item:hover{background:color-mix(in srgb,var(--color-accent) 14%,transparent)}.btn-full,.recent-item{width:100%;text-align:left}.btn-primary-text{background:var(--color-accent);color:#000;font-weight:700}label.inline{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--color-foreground);min-height:32px}.btn-speed.is-active{background:var(--color-accent);color:#000;font-weight:700}.recent-section{gap:8px}.recent-summary{cursor:pointer;list-style:none}.recent-summary::-webkit-details-marker{display:none}.recent-summary:before{content:"▾ ";color:var(--color-accent)}.recent-section:not([open]) .recent-summary:before{content:"▸ "}.recent-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:220px;overflow:auto}.recent-item{display:flex;align-items:center;gap:10px}.recent-item img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated;flex:0 0 auto;border:1px solid var(--color-border)}.recent-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-accent)}#status,#emote-json{margin:0;padding:12px;overflow:auto;white-space:pre-wrap;word-break:break-word;color:var(--color-terminal);background:color-mix(in srgb,var(--color-panel-elevated) 90%,#000);border:1px solid var(--color-border);border-radius:var(--radius);font-family:var(--font-ui);font-size:12px;line-height:1.45}#status{min-height:96px}#emote-json-container{margin-top:auto;padding-top:12px;border-top:1px solid var(--color-border)}#emote-json-container.is-empty{display:none}.emote-json-wrap{display:grid;grid-template:1fr / 1fr}.emote-json-wrap>#emote-json,.emote-json-wrap>.emote-json-copy{grid-area:1 / 1}.emote-json-copy{z-index:1;justify-self:end;align-self:start;margin:10px 20px 8px 8px;width:28px;height:28px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius);background:color-mix(in srgb,var(--color-panel-elevated) 92%,transparent);color:var(--color-accent);cursor:pointer;position:relative}.emote-json-copy:before{content:"";position:absolute;left:7px;top:6px;width:10px;height:12px;border:1.5px solid currentColor;border-radius:2px;box-sizing:border-box}.emote-json-copy:after{content:"";position:absolute;left:10px;top:8px;width:10px;height:12px;border:1.5px solid currentColor;border-radius:2px;background:var(--color-panel-elevated);box-sizing:border-box}.emote-json-copy:hover{background:color-mix(in srgb,var(--color-accent) 18%,var(--color-panel-elevated))}.emote-json-copy.is-ok{color:var(--color-terminal)}#emote-json{max-height:200px;padding-right:40px}#emote-image{display:none;max-width:100%;height:auto;margin-top:8px;border:1px solid var(--color-border);-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.emote-image-wrap{display:grid;grid-template:1fr / 1fr;position:relative}.emote-image-wrap>#emote-image,.emote-image-wrap>.emote-image-download{grid-area:1 / 1}.emote-image-wrap>#emote-image{margin-top:8px;justify-self:start;align-self:start}.emote-image-download{z-index:1;justify-self:end;align-self:start;margin:16px 8px 8px;width:28px;height:28px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius);background:color-mix(in srgb,var(--color-panel-elevated) 92%,transparent);color:var(--color-accent);cursor:pointer;position:relative}.emote-image-download:before{content:"";position:absolute;left:11px;top:6px;width:4px;height:9px;background:currentColor;border-radius:1px}.emote-image-download:after{content:"";position:absolute;left:7px;top:12px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid currentColor}.emote-image-download:hover{background:color-mix(in srgb,var(--color-accent) 18%,var(--color-panel-elevated))}.emote-image-download[hidden]{display:none}.modal{border:1px solid var(--color-border);border-radius:var(--radius);padding:0;background:var(--color-panel);color:var(--color-foreground);max-width:420px;width:calc(100% - 32px)}.modal::backdrop{background:#000000b8}.modal-card{display:grid;gap:14px;padding:18px;margin:0}.modal-card h2{margin:0;font-size:14px;color:var(--color-accent);letter-spacing:.08em;text-transform:uppercase}.modal-card label{display:grid;gap:6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted)}.modal-card input[type=text],.modal-card input[type=url]{min-height:var(--control-min);border:1px solid var(--color-border);border-radius:var(--radius);padding:10px 12px;color:var(--color-terminal);background:var(--color-panel-elevated);font-family:var(--font-ui);font-size:13px}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}input:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@media(max-width:768px){#app{grid-template-columns:1fr;grid-template-rows:minmax(50vh,1fr) minmax(0,42vh);grid-template-areas:"viewport" "panel"}.panel{grid-area:panel;max-height:42vh;border-right:none;border-top:1px solid var(--color-border);border-bottom:none}.viewport{grid-area:viewport;min-height:50vh;margin:8px}.file-row{grid-template-columns:1fr auto}.file-label{grid-column:1 / -1}.viewport-hints [data-hint-full]{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}.site-nav{display:flex;flex-wrap:wrap;gap:.5rem .75rem;margin:.35rem 0 .5rem}.site-nav-link{color:var(--color-muted);text-decoration:none;font:700 11px/1 var(--font-ui);text-transform:uppercase;letter-spacing:.04em}.site-nav-link.is-active,.site-nav-link:hover{color:var(--color-accent)}.muted{color:var(--color-muted);font-size:12px}.editor-app .viewport.editor-viewport{display:grid;grid-template-rows:1fr auto}.editor-bottom{display:grid;gap:8px;padding:8px;background:var(--color-panel);border-top:1px solid var(--color-border)}.timeline-tracks{max-height:140px;overflow:auto;display:grid;gap:4px}.tl-row{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:6px}.tl-label{font:10px/1 var(--font-ui);color:var(--color-muted)}.tl-lane{position:relative;height:18px;background:var(--color-panel-elevated);border:1px solid var(--color-border)}.tl-mark{position:absolute;top:2px;width:8px;height:12px;margin:0;padding:0;border:none;background:var(--color-accent);cursor:pointer;transform:translate(-50%)}.graph-canvas{width:100%;height:160px;display:block;border:1px solid var(--color-border);background:#0a0a0a}.video-preview,.video-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:55%;object-fit:contain;background:#000}.video-overlay{pointer-events:none;z-index:1}.video-viewer{position:absolute!important;left:0;right:0;bottom:0;top:55%;height:45%!important}#panel textarea,#panel input[type=text],#panel input[type=number],#panel select{width:100%;min-height:var(--control-min);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-terminal);background:var(--color-panel-elevated);font-family:var(--font-ui);padding:.5rem}#panel textarea{min-height:3.5rem;resize:vertical}
