:root{color:#e9eef2;background:#050606;--brand-blue: #075bff;--brand-violet: #5f2bd8;--brand-magenta: #cf168f;--brand-cyan: #55dfff;--brand-red: #d64545;--ink: #171921;--muted: #5f6d82;--panel: #0d1117;--line: #d9e1ef;--brand-gradient: linear-gradient(135deg, var(--brand-magenta), var(--brand-violet) 46%, var(--brand-blue));font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:geometricPrecision}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#050606}button,input{font:inherit}.app-shell{display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:100vh}.stage-area{position:relative;display:grid;place-items:center;padding:32px;background:radial-gradient(circle at 18% 12%,rgba(207,22,143,.13),transparent 22rem),radial-gradient(circle at 72% 30%,rgba(7,91,255,.12),transparent 28rem),linear-gradient(135deg,#030404,#101318 48%,#050607)}.stage-logo{position:absolute;top:6px;left:14px;width:clamp(180px,18vw,300px);height:auto;z-index:2;filter:drop-shadow(0 0 18px rgba(85,223,255,.2))}.stage-frame{position:relative;width:min(74vh,calc(100vw - 440px),1080px);aspect-ratio:1;min-width:360px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.08);box-shadow:0 28px 90px #00000085}canvas{display:block;width:100%;height:100%}.safe-circle{position:absolute;top:7%;right:7%;bottom:7%;left:7%;border:1px solid rgba(85,223,255,.34);border-radius:50%;pointer-events:none}.control-panel{display:flex;flex-direction:column;gap:14px;min-height:100vh;padding:22px 24px;border-left:1px solid rgba(7,91,255,.16);background:radial-gradient(circle at 90% 10%,rgba(7,91,255,.16),transparent 16rem),var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.brand-row{display:flex;align-items:center}h1{margin:0 0 4px;font-size:23px;line-height:1.05}p{margin:0;color:#d8e4e7b8;font-size:13px;line-height:1.45}.upload-box{display:grid;gap:6px;padding:14px;border:1px dashed rgba(85,223,255,.58);background:#ffffff09;cursor:pointer}.upload-box input{position:absolute;inline-size:1px;block-size:1px;opacity:0}.upload-box span{font-weight:720}.upload-box small{color:#d2dee194}.upload-box output{min-height:18px;color:#e2eef0a8;font-size:12px}.upload-progress{height:6px;overflow:hidden;background:#ffffff1f}.upload-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--brand-cyan),#ffffff)}.control-grid{display:grid;gap:12px}.control-grid label{display:grid;gap:6px;color:#eef6f8db;font-size:14px}input[type=range]{accent-color:var(--brand-cyan)}input[type=range]:disabled{cursor:not-allowed;opacity:.34}label:has(input:disabled){color:#eef6f86b}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.client-code-field{display:grid;gap:6px;color:#eef6f8db;font-size:14px}.client-code-field input{min-height:40px;width:100%;border:1px solid rgba(85,223,255,.36);border-radius:0;padding:0 12px;color:#fff;background:#ffffff12;outline:none}.client-code-field input:focus{border-color:#55dfffdb;box-shadow:0 0 0 2px #55dfff2e}button{min-height:40px;border:0;color:#fff;background:var(--brand-gradient);font-weight:760;cursor:pointer}button.secondary{color:#eef8fa;background:#ffffff1a}.toggle-button{color:#dff9ff;border:1px solid rgba(85,223,255,.35)}.toggle-button.is-active{color:#050606;background:linear-gradient(135deg,var(--brand-cyan),#ffffff)}button:disabled{cursor:progress;opacity:.7}.download-button{color:#fff;background:linear-gradient(135deg,var(--brand-red),var(--brand-magenta) 48%,var(--brand-blue))}.timeline{display:grid;gap:8px;margin-top:auto}.timeline-track{height:8px;overflow:hidden;background:#ffffff1f}.timeline-track span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--brand-cyan),#ffffff)}output{color:#e2eef0a8;font-size:13px}.is-dragging .stage-frame{border-color:#075bffbf}@media (max-width: 900px){.app-shell{grid-template-columns:1fr}.stage-area{min-height:56vh;padding:82px 18px 18px}.stage-logo{top:6px;left:8px;width:162px}.stage-frame{width:min(100%,76vh);min-width:0}.control-panel{min-height:auto;border-left:0;border-top:1px solid rgba(255,255,255,.09)}}