@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--panel:#0f181ae0;--panel-border:#cbffe01f;--text:#f9f4e7;--muted:#a9bbb7;--accent:#8cf2ae;--accent-strong:#46d67e;--accent-warm:#ffb85c;--shadow:0 24px 70px #00000059}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:var(--text);background:radial-gradient(circle at 0 0,#8cf2ae24,#0000 24%),radial-gradient(circle at 100% 0,#ffb85c29,#0000 22%),linear-gradient(140deg,#081011 0%,#0f1718 45%,#14191c 100%);font-family:Manrope,sans-serif}button,input{font:inherit}.page-shell{max-width:1240px;margin:0 auto;padding:24px 20px 32px}.service-switcher{flex-wrap:wrap;gap:12px;margin-bottom:20px;display:flex}.service-tab{appearance:none;color:var(--text);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff14;border-radius:999px;padding:12px 18px;transition:transform .12s,background .12s,border-color .12s}.service-tab:hover{transform:translateY(-1px)}.service-tab.active{background:linear-gradient(135deg,#46d67e38,#8cf2ae38);border-color:#8cf2ae57}.panel{border:1px solid var(--panel-border);background:var(--panel);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:28px}.stat-card,.hint-card{background:#ffffff0a;border:1px solid #ffffff0f;border-radius:20px;padding:18px}.stat-card span,.hint-card span,.field span,.uploader span{color:var(--muted);margin-bottom:8px;font-size:14px;display:block}.stat-card strong,.hint-card strong{word-break:break-word;font-size:18px;display:block}.workspace-grid{grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:24px;display:grid}.compact-layout{align-items:start}.panel{padding:24px}.panel-header{margin-bottom:18px}.panel-header.compact{margin-top:24px}.panel-header h2{margin:0 0 8px;font-size:24px}.panel-header p{color:var(--muted);margin:0}.uploader,.field{gap:8px;margin-bottom:18px;display:grid}.checkbox-field{grid-template-columns:1fr auto;align-items:center}.checkbox-field span{margin-bottom:0}.checkbox-field input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent)}.uploader input,.field input[type=range],.color-row,.timeline-block input[type=range]{width:100%}.text-input{width:100%;color:var(--text);background:#ffffff0a;border:1px solid #ffffff1f;border-radius:16px;padding:14px 16px}.text-input::placeholder{color:#a9bbb7b8}.uploader input{color:var(--text);background:#ffffff08;border:1px dashed #ffffff2e;border-radius:16px;padding:14px}.file-label{color:var(--text);word-break:break-word;font-size:15px;font-weight:700}.color-row{background:#ffffff0a;border:1px solid #ffffff0f;border-radius:16px;align-items:center;gap:12px;padding:10px 12px;display:flex}.color-row input[type=color]{background:0 0;border:none;width:56px;height:40px;padding:0}.color-row code{color:var(--accent-warm)}.button-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.primary-button,.ghost-button{appearance:none;cursor:pointer;border:none;border-radius:999px;padding:12px 18px;transition:transform .12s,opacity .12s,background .12s}.primary-button{background:linear-gradient(135deg, var(--accent-strong), var(--accent));color:#061010;font-weight:800}.ghost-button{color:var(--text);background:#ffffff14}.primary-button:hover,.ghost-button:hover{transform:translateY(-1px)}.primary-button:disabled,.ghost-button:disabled{opacity:.45;cursor:not-allowed;transform:none}.render-message{color:var(--accent-warm);margin-top:16px}.preview-panel{gap:18px;display:grid}.download-layout{display:grid}.download-panel{max-width:760px}.preview-stage{background-color:#0000;background-image:linear-gradient(45deg,#ffffff0d 25%,#0000 25%),linear-gradient(-45deg,#ffffff0d 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ffffff0d 75%),linear-gradient(-45deg,#0000 75%,#ffffff0d 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:24px 24px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;border-radius:24px;justify-content:center;padding:16px;display:flex}.preview-frame{aspect-ratio:9/16;background:#0e1314;border-radius:24px;width:min(100%,360px);position:relative;overflow:hidden;box-shadow:0 22px 60px #00000059}.preview-video{object-fit:cover;background:#0e1314;width:100%;height:100%;display:block;position:absolute;inset:0}.overlay-preview{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:#ffffff08;border:2px dashed #f9f4e7cc;border-radius:20px;min-width:32px;min-height:32px;position:absolute;overflow:hidden;box-shadow:0 12px 32px #00000040}.overlay-preview.dragging{cursor:grabbing}.overlay-preview-image{object-fit:contain;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.overlay-preview-image.loaded{opacity:1}.timeline-block{gap:12px;display:grid}.time-readout{color:var(--muted);margin-left:auto}.hint-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.hidden-video{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;top:-9999px;left:-9999px}input[type=range]{accent-color:var(--accent)}@media (width<=960px){.workspace-grid{grid-template-columns:1fr}}@media (width<=640px){.page-shell{padding:20px 14px 28px}.service-switcher{flex-direction:column}.panel{border-radius:22px;padding:18px}.hint-grid{grid-template-columns:1fr}}
