:root{--background: #f1f3f5;--foreground: #15171a;--primary: #e52521;--primary-foreground: #ffffff;--secondary: #e8ebee;--secondary-foreground: #1c2025;--muted: #edf0f2;--muted-foreground: #697078;--destructive: #c71919;--border: #d8dde1;--input: #cfd5da;--ring: #e52521;--radius: .75rem;--font-geist-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-geist-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace}*{box-sizing:border-box}html{min-width:320px;font-family:var(--font-geist-sans),Arial,sans-serif}body{margin:0;background:var(--background);color:var(--foreground)}.mode-page{min-width:0;flex:1}.mode-sidebar [data-sidebar=sidebar],.mode-sidebar-header,.mode-sidebar-content{background:#17191c!important;color:#f5f6f7!important}.mode-sidebar-header{min-height:76px;flex-direction:row;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.12);padding:12px}.mode-sidebar-brand{display:flex;min-width:0;flex:1;align-items:center;gap:10px;overflow:hidden}.mode-sidebar-brand>span{display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;border-radius:10px;background:#e52521;color:#fff}.mode-sidebar-brand svg{width:18px;height:18px}.mode-sidebar-brand strong{color:#fff;white-space:nowrap;font-size:15px;letter-spacing:-.02em}.mode-sidebar-close{flex:0 0 auto;color:#aeb4ba}.mode-sidebar-close:hover{background:#ffffff17;color:#fff}.mode-sidebar-content{padding:18px 10px}.mode-sidebar-label{margin:0 10px 9px;color:#aeb5bb;font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}.mode-link{display:flex;min-height:48px;align-items:center;gap:11px;margin-bottom:5px;border-radius:10px;padding:0 11px;color:#e0e4e7;font-size:15px;font-weight:680;text-decoration:none;transition:background .15s ease,color .15s ease}.mode-link:hover{background:#ffffff12;color:#fff}.mode-link.is-active{background:#e52521;color:#fff;box-shadow:0 7px 20px #e5252138}.mode-link svg{width:19px;height:19px;flex:0 0 19px}.mode-link span{white-space:nowrap}.mode-swipe-hint{display:none;margin:auto 10px 4px;color:#9ba2a8;font-size:13px}.mode-edge-hint{position:fixed;z-index:8;top:42%;left:0;width:4px;height:58px;border-radius:0 5px 5px 0;background:#e52521;box-shadow:0 3px 12px #e525214d}.mode-menu-button{display:none;flex:0 0 auto;color:#34393e}.group\/sidebar-wrapper:has([data-collapsible=icon]) .mode-sidebar-brand strong,.group\/sidebar-wrapper:has([data-collapsible=icon]) .mode-sidebar-label,.group\/sidebar-wrapper:has([data-collapsible=icon]) .mode-link span,.group\/sidebar-wrapper:has([data-collapsible=icon]) .mode-sidebar-close{display:none}.group\/sidebar-wrapper:has([data-collapsible=icon]) .mode-sidebar-header{justify-content:center;padding-inline:7px}.group\/sidebar-wrapper:has([data-collapsible=icon]) .mode-sidebar-content{padding-inline:5px}.group\/sidebar-wrapper:has([data-collapsible=icon]) .mode-link{justify-content:center;padding-inline:0}button,input,textarea,select{font:inherit}.ui-input,.ui-textarea{width:100%;border:1px solid #cfd5da;border-radius:8px;background:#fff;color:#15171a;padding:0 12px;outline:none}.ui-input:focus,.ui-textarea:focus{border-color:#e52521;box-shadow:0 0 0 3px #e525211f}.ui-button{display:inline-flex;min-height:36px;align-items:center;justify-content:center;gap:7px;border:0;border-radius:9px;padding:0 12px;background:transparent;color:#30353a;font-size:14px;font-weight:680;cursor:pointer}.ui-button svg{width:16px;height:16px}.ui-button.primary{background:#e52521;color:#fff}.ui-button.outline{border:1px solid #d8dde1;background:#fff}.ui-button.ghost:hover{background:#eef0f2}.ui-button:disabled{cursor:not-allowed;opacity:.55}.ui-switch{width:42px;height:24px;accent-color:#e52521;cursor:pointer}.vue-shell{display:flex;min-height:100dvh}.vue-sidebar{position:sticky;z-index:30;top:0;width:256px;height:100dvh;flex:0 0 256px;overflow:hidden;background:#17191c;color:#f5f6f7;transition:width .2s ease,flex-basis .2s ease,transform .2s ease}.sidebar-collapsed .vue-sidebar{width:48px;flex-basis:48px}.sidebar-collapsed .mode-sidebar-brand strong,.sidebar-collapsed .mode-sidebar-label,.sidebar-collapsed .mode-link span,.sidebar-collapsed .sidebar-icon-button{display:none}.sidebar-collapsed .mode-sidebar-header{justify-content:center;padding-inline:7px}.sidebar-collapsed .mode-sidebar-content{padding-inline:5px}.sidebar-collapsed .mode-link{justify-content:center;padding-inline:0}.sidebar-icon-button{display:grid;width:34px;height:34px;place-items:center;border:0;border-radius:8px;background:transparent;color:#aeb4ba;cursor:pointer}.sidebar-icon-button:hover{background:#ffffff17;color:#fff}.sidebar-icon-button svg{width:18px}.sidebar-backdrop,.mobile-menu-fab{display:none}.app-shell{min-height:100dvh}.topbar{display:flex;height:76px;align-items:center;gap:13px;padding:0 clamp(18px,4vw,58px);border-bottom:1px solid #dfe3e6;background:#ffffffe6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.brand-mark{display:grid;width:40px;height:40px;place-items:center;border-radius:12px;background:#e52521;color:#fff;font-size:21px;font-weight:850;transform:rotate(-3deg);box-shadow:0 5px 14px #e5252140}.topbar h1{margin:0;font-size:17px;font-weight:760;letter-spacing:-.02em}.topbar p{margin:2px 0 0;color:#747b82;font-size:13px}.save-status{display:flex;align-items:center;gap:5px;margin-left:auto;color:#6f777e;font-size:13px;opacity:0;transition:opacity .16s ease}.save-status.is-visible{opacity:1}.save-status svg{width:14px;height:14px;color:#178c50}.topbar-link{display:inline-flex;min-height:38px;align-items:center;gap:7px;border:1px solid #d8dde1;border-radius:10px;padding:0 12px;background:#fff;color:#30353a;font-size:13px;font-weight:680;text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.topbar-link:hover{border-color:#b9c0c6;box-shadow:0 4px 12px #14181c14;transform:translateY(-1px)}.topbar-link svg{width:16px;height:16px}.workspace{display:grid;grid-template-columns:minmax(340px,.86fr) minmax(480px,1.14fr);min-height:calc(100dvh - 76px)}.editor-panel{padding:clamp(24px,4vw,52px);border-right:1px solid #d9dee2;background:#fff}.section-heading{display:flex;align-items:flex-start;gap:13px}.section-heading>span{display:grid;width:32px;height:32px;flex:0 0 auto;place-items:center;border-radius:9px;background:#17191c;color:#fff;font:700 12px/1 var(--font-geist-mono),monospace}.section-heading h2{margin:-2px 0 0;font-size:20px;font-weight:720;letter-spacing:-.025em}.section-heading p{margin:3px 0 0;color:#737a81;font-size:14px;line-height:1.4}.section-heading.compact{margin:0}.word-input{min-height:220px;margin-top:20px;resize:vertical;border-color:#ccd2d7;border-radius:13px;background:#fafbfb;padding:15px 16px;font:500 16px/1.75 var(--font-geist-mono),monospace}.options-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:36px}.reset-button{color:#656c73}.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:20px}.control-field{min-width:0;padding:14px;border:1px solid #e0e4e7;border-radius:12px;background:#fafbfb}.control-field label{margin-bottom:10px;color:#33383d;font-size:14px}.control-field [data-slot=native-select-wrapper]{width:100%}.control-field input,.control-field select{height:40px;background:#fff}.control-field-wide{grid-column:1 / -1}.font-select{font-weight:650}.number-control{position:relative}.number-control input{padding-right:40px}.number-control span{position:absolute;right:11px;top:10px;color:#858b91;font-size:13px;pointer-events:none}.switch-field{display:flex;align-items:center;justify-content:space-between;gap:20px}.switch-field label{margin-bottom:0}.switch-field p{margin:5px 0 0;color:#858b91;font-size:12px}.switch-field [data-slot=switch]{transform:scale(1.15)}.css-editor{margin-top:15px;overflow:hidden;border:1px solid #e0e4e7;border-radius:12px;background:#fafbfb}.css-editor summary{display:flex;min-height:54px;align-items:center;justify-content:space-between;gap:10px;padding:0 15px;cursor:pointer;list-style:none}.css-editor summary::-webkit-details-marker{display:none}.css-editor summary>span{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650}.css-editor summary svg{width:17px;height:17px}.css-editor summary small{color:#81888e;font:500 11px/1.2 var(--font-geist-mono),monospace}.css-input{min-height:360px;resize:vertical;border:0;border-top:1px solid #e0e4e7;border-radius:0;background:#17191d;color:#f4f5f6;padding:14px 16px;font:500 13px/1.65 var(--font-geist-mono),monospace}.preview-panel{display:flex;min-width:0;min-height:calc(100dvh - 76px);flex-direction:column;padding:clamp(24px,4vw,52px);background:#f1f3f5}.preview-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}.eyebrow{color:#e52521;font-size:12px;font-weight:750;letter-spacing:.11em;text-transform:uppercase}.preview-toolbar h2{margin:2px 0 0;font-size:23px;font-weight:730;letter-spacing:-.03em}.row-count{padding:6px 10px;border-radius:999px;background:#fff;color:#686f75;font-size:12px;box-shadow:0 1px #00000014}.preview-stage{position:relative;display:grid;min-height:460px;flex:1;place-items:center;overflow:hidden;border:1px solid #d7dcdf;border-radius:18px;background:#e8ebed;box-shadow:inset 0 1px 2px #14181c0f}.preview-stage.is-checkered{background-color:#fff;background-image:linear-gradient(45deg,#e9ecef 25%,transparent 25%),linear-gradient(-45deg,#e9ecef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9ecef 75%),linear-gradient(-45deg,transparent 75%,#e9ecef 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px}.preview-scroll{position:relative;display:block;width:100%;min-height:120px;max-height:100%;overflow:auto;padding:clamp(20px,5vw,48px)}.html-preview{display:grid;width:max-content;min-width:100%;min-height:100%;place-items:center}.empty-preview{display:grid;justify-items:center;gap:10px;color:#7a8187}.empty-preview svg{width:34px;height:34px;stroke-width:1.4}.empty-preview p{margin:0;font-size:14px}.download-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:18px}.download-row p{margin:0;color:#70777d;font-size:13px}.download-button{min-width:168px;height:46px;border-radius:12px;box-shadow:0 8px 22px #e5252138}.export-error{margin:10px 0 0;color:#b31e1e;font-size:13px;text-align:right}.motion-shell{min-height:100dvh;background:#f1f3f5}.motion-brand{background:#17191c;transform:none;box-shadow:0 5px 14px #14161933}.motion-brand svg{width:21px;height:21px}.motion-workspace{display:grid;grid-template-columns:minmax(360px,.82fr) minmax(520px,1.18fr);min-height:calc(100dvh - 76px)}.motion-controls{padding:clamp(24px,3.5vw,46px);border-right:1px solid #d9dee2;background:#fff}.motion-fieldset{min-width:0;margin:24px 0 0;border:0;padding:0}.motion-fieldset:disabled{opacity:.72}.motion-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.motion-field{min-width:0;padding:13px;border:1px solid #e0e4e7;border-radius:12px;background:#fafbfb}.motion-field-wide{grid-column:1 / -1}.motion-field label{margin-bottom:9px;color:#33383d;font-size:14px}.motion-field input,.motion-field select{height:40px;background:#fff}.motion-field [data-slot=native-select-wrapper]{width:100%}.color-control{display:flex;height:40px;align-items:center;gap:10px}.color-control input[type=color]{width:46px;min-width:46px;border:1px solid #d7dce0;border-radius:8px;padding:3px;cursor:pointer}.color-control span{color:#596168;font:600 12px/1 var(--font-geist-mono),monospace}.motion-code-editor{margin-top:13px;overflow:hidden;border:1px solid #e0e4e7;border-radius:12px;background:#fafbfb}.motion-code-editor summary{display:flex;min-height:52px;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;cursor:pointer;list-style:none}.motion-code-editor summary::-webkit-details-marker{display:none}.motion-code-editor summary span{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:680}.motion-code-editor summary svg{width:17px;height:17px}.motion-code-editor summary small{color:#858b91;font:500 11px/1.2 var(--font-geist-mono),monospace}.motion-code-editor textarea{min-height:250px;resize:vertical;border:0;border-top:1px solid #e0e4e7;border-radius:0;background:#17191d;color:#f5f6f7;padding:14px 15px;font:500 13px/1.6 var(--font-geist-mono),monospace}.motion-control-actions{display:flex;justify-content:flex-end;padding-top:10px}.motion-preview-panel{min-width:0;padding:clamp(24px,3.5vw,46px)}.motion-preview-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}.motion-preview-toolbar h2{margin:2px 0 0;font-size:23px;font-weight:730;letter-spacing:-.03em}.motion-preview-window{display:grid;min-height:480px;place-items:center;overflow:auto;border:1px solid #d7dcdf;border-radius:18px;padding:28px;background:#e8ebed;box-shadow:inset 0 1px 2px #14181c0f}.motion-preview-window.is-checkered{background-color:#fff;background-image:linear-gradient(45deg,#e9ecef 25%,transparent 25%),linear-gradient(-45deg,#e9ecef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9ecef 75%),linear-gradient(-45deg,transparent 75%,#e9ecef 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px}.motion-preview-spacer{width:max-content;min-width:100%;margin:auto;text-align:center}.motion-preview-spacer iframe{display:block;flex:0 0 auto;margin:auto;border:0;background:transparent}.render-panel{margin-top:16px;border:1px solid #d7dcdf;border-radius:15px;padding:16px;background:#fff}.render-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#747b82;font-size:13px}.render-summary strong{color:#272b30;font-size:13px}.render-progress-track{height:7px;margin-top:13px;overflow:hidden;border-radius:99px;background:#e8ebee}.render-progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e52521,#ff635d);transition:width .12s ease}.render-action-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px}.render-action-row p{margin:0;color:#616970;font-size:14px}.render-action-row p.is-error{color:#b31e1e}.render-video-button{min-width:158px;height:44px;border-radius:11px;box-shadow:0 8px 22px #e5252133}.render-privacy-note{margin:11px 0 0;color:#92989d;font-size:12px}.render-result{margin-top:16px;border:1px solid #cfe6d8;border-radius:15px;padding:16px;background:#f8fcfa}.render-result>div{display:flex;align-items:center;gap:11px}.result-check{display:grid;width:34px;height:34px;place-items:center;border-radius:50%;background:#18864e;color:#fff}.result-check svg{width:18px;height:18px}.render-result h3{margin:0;font-size:16px}.render-result p{margin:2px 0 0;color:#6e767c;font-size:13px}.render-result video{display:block;width:min(100%,420px);margin:15px auto 0;border-radius:12px;background-color:#fff;background-image:linear-gradient(45deg,#e9ecef 25%,transparent 25%),linear-gradient(-45deg,#e9ecef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9ecef 75%),linear-gradient(-45deg,transparent 75%,#e9ecef 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.mov-result-preview{display:flex;min-height:110px;align-items:center;justify-content:center;gap:12px;margin-top:15px;border:1px dashed #cbd7d0;border-radius:12px;padding:18px;background:#fff;color:#67706b;font-size:13px;text-align:center}.mov-result-preview svg{width:28px;height:28px;flex:0 0 auto;color:#18864e}.result-download{display:inline-flex;min-height:42px;align-items:center;justify-content:center;gap:8px;margin-top:14px;border-radius:10px;padding:0 15px;background:#17191c;color:#fff;font-size:14px;font-weight:700;text-decoration:none}.result-download svg{width:17px;height:17px}@media(max-width:900px){.workspace{grid-template-columns:1fr}.editor-panel{border-right:0;border-bottom:1px solid #d9dee2}.preview-panel{min-height:680px}.preview-stage{min-height:480px}.motion-workspace{grid-template-columns:1fr}.motion-controls{border-right:0;border-bottom:1px solid #d9dee2}}@media(max-width:767px){.vue-sidebar{position:fixed;left:0;transform:translate(-100%);width:min(82vw,288px);flex-basis:auto;box-shadow:12px 0 36px #00000040}.sidebar-open .vue-sidebar{transform:translate(0)}.sidebar-collapsed .vue-sidebar{width:min(82vw,288px)}.sidebar-collapsed .mode-sidebar-brand strong,.sidebar-collapsed .mode-sidebar-label,.sidebar-collapsed .mode-link span,.sidebar-collapsed .sidebar-icon-button{display:initial}.sidebar-open .sidebar-backdrop{position:fixed;z-index:29;top:0;right:0;bottom:0;left:0;display:block;background:#0f11137a}.mobile-menu-fab{position:fixed;z-index:20;top:16px;left:12px;display:grid;width:36px;height:36px;place-items:center;border:1px solid #d8dde1;border-radius:9px;background:#fff;color:#34393e;box-shadow:0 4px 12px #00000014}.mobile-menu-fab svg{width:19px}.topbar{padding-left:58px!important}.mode-sidebar-header{min-height:68px}.mode-sidebar-content{min-height:0;padding:18px 12px 24px}.mode-swipe-hint{display:block}}@media(max-width:560px){.topbar{height:68px}.topbar p{display:none}.workspace{min-height:calc(100dvh - 68px)}.editor-panel,.preview-panel{padding:22px 16px}.option-grid{grid-template-columns:1fr}.word-input{min-height:250px}.css-editor summary{align-items:flex-start;flex-direction:column;justify-content:center;padding-block:10px}.preview-panel{min-height:600px}.preview-stage{min-height:390px;border-radius:14px}.preview-scroll{padding:16px}.download-row{align-items:stretch;flex-direction:column}.download-row p{text-align:center}.download-button{width:100%}.topbar-link{padding:0 9px}.topbar-link svg{display:none}.save-status{display:none}.motion-controls,.motion-preview-panel{padding:22px 16px}.motion-form-grid{grid-template-columns:1fr}.motion-field-wide{grid-column:auto}.motion-preview-window{min-height:390px;justify-items:start;padding:16px}.motion-preview-spacer{min-width:0}.render-summary,.render-action-row{align-items:stretch;flex-direction:column}.render-video-button,.result-download{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}