:root{--bg: #121014;--panel: #1b181e;--panel-2: #241f29;--line: #322b38;--text: #e9e2d1;--muted: #9a8fa0;--accent: #f0b0da;--accent-2: #c9f2dc;--danger: #ff7a7a;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--text);background:var(--bg)}*{box-sizing:border-box}html,body,#app{margin:0;height:100%}html{-webkit-text-size-adjust:100%}body{overflow:hidden}button,select,input{touch-action:manipulation}.app{display:grid;grid-template-columns:320px 1fr;grid-template-rows:100%;height:100%}.sidebar{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;display:flex;flex-direction:column}.brand{padding:14px 16px 10px;border-bottom:1px solid var(--line)}.brand h1{margin:0;font-size:15px;letter-spacing:.08em;text-transform:uppercase}.brand p{margin:4px 0 0;color:var(--muted)}.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.tab{min-width:0;padding:8px 10px;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--muted);font:inherit;cursor:pointer;text-align:left}.tab strong{display:block;color:var(--text);font-size:14px}.tab small{display:block;margin-top:2px;line-height:1.3;font-size:11px}.tab.active{border-bottom-color:var(--accent);background:var(--panel-2)}.toolbar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);align-items:center}.toolbar select{flex:1}.controls{padding:8px 12px 24px}.group{margin-top:10px}.group h3{margin:0 0 4px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.param{display:block;padding:5px 0}.param-label{display:flex;justify-content:space-between;color:var(--text);margin-bottom:2px}.param-value{color:var(--muted)}.param input[type=range]{width:100%;accent-color:var(--accent)}.param select,.param input[type=color]{width:100%}.param input[type=color]{height:28px;padding:0;border:1px solid var(--line);background:var(--panel-2)}button,select{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:4px;padding:6px 10px;cursor:pointer}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent);color:#2a1a26;border-color:var(--accent);font-weight:600}button.hold{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}.stage{position:relative;display:flex;flex-direction:column;min-width:0}.viewport{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:24px;min-height:0;background:radial-gradient(ellipse at center,#1a161c 0%,var(--bg) 70%)}.viewport.dragging{outline:2px dashed var(--accent);outline-offset:-12px}.viewport canvas,.viewport img,.viewport video{max-width:100%;max-height:100%;object-fit:contain;image-rendering:auto;box-shadow:0 20px 60px #0009}.ml-badge{position:absolute;top:14px;left:14px;padding:6px 10px;border-radius:4px;background:#121014c7;border:1px solid var(--accent-2);color:var(--accent-2);font-size:12px;letter-spacing:.04em;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.ml-bar{height:3px;background:transparent;overflow:hidden;position:relative}.ml-bar.active{background:var(--panel-2)}.ml-bar>div{height:100%;width:0;background:var(--accent-2);transition:width .2s ease-out}.ml-bar.indeterminate>div{animation:ml-slide 1.2s ease-in-out infinite}@keyframes ml-slide{0%{transform:translate(-100%)}to{transform:translate(400%)}}.empty{text-align:center;color:var(--muted);line-height:1.7}.empty strong{color:var(--text);font-size:16px}.exportbar{display:flex;gap:10px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);background:var(--panel);flex-wrap:wrap}.exportbar .status{color:var(--muted);flex:1;min-width:160px}.exportbar .error{color:var(--danger);flex-basis:100%}.exportbar input[type=range]{width:180px;accent-color:var(--accent-2)}.progress{position:relative;width:160px;height:8px;background:var(--panel-2);border-radius:4px;overflow:hidden}.progress>div{height:100%;background:var(--accent-2)}.offline{margin-top:auto;padding:12px 16px;border-top:1px solid var(--line)}.offline h3{margin:0 0 6px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.offline ul{list-style:none;margin:0 0 8px;padding:0}.offline li{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:3px 0}.offline .muted{color:var(--muted)}.offline .ok{color:var(--accent-2)}.offline button{width:100%}.offline p{margin:8px 0 0;line-height:1.5}.credits{padding:12px 16px;color:var(--muted);border-top:1px solid var(--line);line-height:1.5}.credits a{color:var(--accent-2)}@media(max-width:860px){body{overflow:auto}.app{display:flex;flex-direction:column;height:auto;min-height:100%}.stage{order:0;position:sticky;top:0;z-index:2;height:54vh;height:54dvh;background:var(--bg);border-bottom:1px solid var(--line)}.viewport{padding:10px}.viewport canvas,.viewport img,.viewport video{box-shadow:0 8px 24px #0009}.empty{font-size:14px}.sidebar{order:1;border-right:0;overflow:visible}.credits{padding-bottom:calc(16px + env(safe-area-inset-bottom))}.exportbar{padding:8px 10px;gap:6px}.exportbar .status{flex-basis:100%;order:10;font-size:11px;min-width:0}.exportbar input[type=range],.progress{width:90px}button,select{font-size:16px;min-height:40px}.param select{min-height:40px}.param input[type=range]{height:36px;margin:0}.param input[type=color]{height:40px}.tabs{grid-template-columns:repeat(3,1fr)}.tab{padding:10px 6px;text-align:center}.tab small{display:none}.tab strong{font-size:13px}}