:root{--olive: #6b7d3a;--olive-hover: #5c6c31;--olive-active: #4f5d2a;--sage: #8fa34e;--surface: #f4f5f0;--surface-card: #ffffff;--surface-input: #fafbf8;--surface-hover: #f0f2eb;--text-primary: #1c1f17;--text-body: #3a3e32;--text-secondary: #4d5145;--text-label: #6b7068;--text-muted: #7a7e71;--text-neutral: #9a9e90;--text-disabled: #b0b4a8;--border-card: #d8dcd0;--border-divider: #dce0d2;--border-input: #ccd1c3;--border-input-hover: #b8bdaf;--border-focus: #6b7d3a;--canvas-bg: #0a0a12;--shadow-card: 0 1px 3px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04);--shadow-card-hover: 0 3px 12px rgba(0, 0, 0, .08);--shadow-btn-primary: 0 1px 2px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .12);--shadow-btn-secondary: 0 1px 2px rgba(0, 0, 0, .06);--shadow-input: inset 0 1px 2px rgba(0, 0, 0, .04);--shadow-focus: 0 0 0 4px rgba(107, 125, 58, .15);--radius-card: 16px;--radius-btn: 12px;--radius-input: 12px;--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-display: "Space Mono", monospace}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-ui);background:var(--surface);color:var(--text-primary);overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,a,[role=button]{cursor:pointer}.grain-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-repeat:repeat;background-size:200px 200px}.app{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:16px 24px}.app-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.header-left{min-width:0}.app-title{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--text-primary);letter-spacing:-.03em;line-height:1.1}.app-subtitle{color:var(--text-muted);margin-top:2px;font-size:14px;line-height:1.4}.language-switch{flex-shrink:0;display:flex;align-items:center;gap:4px;background:var(--surface-input);border:1px solid var(--border-input);border-radius:var(--radius-btn);padding:6px 12px;font-size:13px;font-family:var(--font-ui);font-weight:500;color:var(--text-neutral);transition:all .15s ease;box-shadow:var(--shadow-btn-secondary)}.language-switch:hover{border-color:var(--border-input-hover);background:var(--surface-hover)}.language-switch .active{color:var(--olive);font-weight:600}.language-switch .divider{color:var(--border-input)}.workspace{display:flex;gap:20px;flex:1;min-height:0}.sidebar{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:12px;overflow-y:auto}.sidebar-header-mobile{display:none}.upload-zone{background:var(--surface-card);border:1px dashed var(--border-input);border-radius:var(--radius-card);padding:28px 16px;text-align:center;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-card)}.upload-zone:hover{border-color:var(--olive);border-style:solid;box-shadow:var(--shadow-card-hover)}.upload-icon{color:var(--text-neutral);margin-bottom:12px;transition:color .2s ease}.upload-zone:hover .upload-icon{color:var(--olive)}.upload-title{font-size:14px;font-weight:500;color:var(--text-body);margin-bottom:4px}.upload-subtitle{font-size:13px;color:var(--text-muted);margin-bottom:8px}.upload-formats{font-size:11px;color:var(--text-neutral)}.upload-compact{padding:12px 16px;border-style:solid;border-color:var(--border-card)}.upload-compact-text{font-size:13px;font-weight:500;color:var(--olive)}.upload-hero{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--surface-card);border:2px dashed var(--border-input);border-radius:var(--radius-card);box-shadow:var(--shadow-card);cursor:pointer;transition:all .2s ease;padding:40px}.upload-hero:hover{border-color:var(--olive);border-style:solid;box-shadow:var(--shadow-card-hover)}.upload-hero:hover .upload-hero-icon{color:var(--olive)}.upload-hero-icon{color:var(--text-neutral);margin-bottom:20px;transition:color .2s ease}.upload-hero-title{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--text-body);margin-bottom:8px}.upload-hero-subtitle{font-size:14px;color:var(--text-muted);margin-bottom:16px;text-align:center;max-width:320px}.upload-hero-formats{font-size:12px;color:var(--text-neutral)}.controls{background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-card);padding:16px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:12px}.control-group{display:flex;flex-direction:column;gap:4px}.control-group label{font-size:13px;font-weight:500;color:var(--text-muted)}.control-group select{width:100%;background:var(--surface-input);color:var(--text-primary);border:1px solid var(--border-input);border-radius:var(--radius-input);padding:8px 32px 8px 12px;font-size:14px;font-family:var(--font-ui);box-shadow:var(--shadow-input);transition:all .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%236b7068' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.control-group select:hover{border-color:var(--border-input-hover)}.control-group select:focus{border-color:var(--border-focus);box-shadow:var(--shadow-focus);outline:none}.control-group input[type=range]{width:100%;accent-color:var(--olive);height:6px}.control-group input[type=color]{width:100%;height:36px;border:1px solid var(--border-input);border-radius:var(--radius-input);background:var(--surface-input);cursor:pointer;padding:4px;box-shadow:var(--shadow-input);transition:border-color .15s ease}.control-group input[type=color]:hover{border-color:var(--border-input-hover)}.control-group input[type=color]:focus{border-color:var(--border-focus);box-shadow:var(--shadow-focus);outline:none}.control-checkbox{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text-muted);cursor:pointer}.control-checkbox input[type=checkbox]{width:16px;height:16px;accent-color:var(--olive);cursor:pointer}.control-divider{height:1px;background:var(--border-divider);margin:4px 0}.control-section-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;opacity:.6;margin:2px 0 4px}.control-actions{display:flex;gap:8px}.control-actions>*{flex:1}.btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius-btn);padding:10px 16px;font-size:13px;font-weight:500;font-family:var(--font-ui);cursor:pointer;transition:all .15s ease;white-space:nowrap}.btn-primary{background:var(--olive);color:#fff;box-shadow:var(--shadow-btn-primary)}.btn-primary:hover{background:var(--olive-hover)}.btn-primary:active{background:var(--olive-active)}.btn-primary:disabled{background:#c5ccb8;color:#ffffffb3;box-shadow:none;cursor:not-allowed}.btn-secondary{background:var(--surface-input);color:var(--text-body);border:1px solid var(--border-input);box-shadow:var(--shadow-btn-secondary)}.btn-secondary:hover{background:var(--surface-hover);border-color:var(--border-input-hover)}.btn-sm{padding:7px 12px;font-size:13px}.preview{flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}.canvas-container{width:100%;height:100%;background:var(--canvas-bg);border:1px solid var(--border-card);border-radius:var(--radius-card);overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-card)}.canvas-container canvas{display:block;max-width:100%;max-height:100%;object-fit:contain}.comparison-frame{position:relative;overflow:hidden;border-radius:calc(var(--radius-card) - 1px);background:var(--canvas-bg);user-select:none;-webkit-user-select:none;touch-action:pan-y}.comparison-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;display:block}.comparison-source{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;transition:clip-path 60ms linear,-webkit-clip-path 60ms linear}.comparison-source>video,.comparison-source>img{display:block}.comparison-divider{position:absolute;top:0;bottom:0;width:44px;margin-left:-22px;cursor:ew-resize;z-index:4;touch-action:none}.comparison-divider-line{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:#ffffffd9;box-shadow:0 0 12px #00000080;pointer-events:none}.comparison-divider-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fffffff5;box-shadow:0 2px 14px #0000004d;display:flex;align-items:center;justify-content:center;color:#2a2e22;pointer-events:none;transition:transform .12s ease}.comparison-divider:hover .comparison-divider-handle,.comparison-divider:active .comparison-divider-handle{transform:translate(-50%,-50%) scale(1.08)}.comparison-label{position:absolute;top:12px;padding:5px 11px;background:#0000008c;color:#fff;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;pointer-events:none;z-index:3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.comparison-label-left{left:12px}.comparison-label-right{right:12px}.landing-layout{flex:1;display:flex;flex-direction:column;gap:18px;width:100%;height:100%;min-height:0}.landing-demo{position:relative;flex:1;min-height:0;display:flex}.landing-demo .canvas-container{flex:1}.landing-tagline{position:absolute;bottom:14px;left:50%;transform:translate(-50%);padding:6px 14px;background:#0000008c;color:#ffffffe6;font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.06em;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;z-index:5;white-space:nowrap}.upload-cta{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0 8px}.upload-cta-button{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;font-size:15px;font-weight:600;border-radius:var(--radius-btn);box-shadow:0 4px 14px #6b7d3a47,inset 0 1px #ffffff24;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.upload-cta-button:hover{transform:translateY(-1px);box-shadow:0 6px 18px #6b7d3a57,inset 0 1px #ffffff24}.upload-cta-button:active{transform:translateY(0)}.upload-cta-hint{font-size:12px;color:var(--text-muted);letter-spacing:.02em}.demo-loading{opacity:.6}.export-dropdown{position:relative}.export-dropdown>.btn{width:100%}.export-menu{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-btn);overflow:hidden;z-index:30;box-shadow:var(--shadow-card);animation:menuIn .15s ease-out}.export-menu button{width:100%;background:none;border:none;color:var(--text-body);padding:10px 14px;font-size:13px;font-family:var(--font-ui);cursor:pointer;text-align:left;transition:all .15s ease}.export-menu button:hover{background:var(--olive);color:#fff}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:#0000004d;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease-out}.modal-panel{background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-card);box-shadow:0 1px 3px #0000000f,0 2px 8px #0000000a,0 8px 24px #00000014;padding:32px 40px;max-width:360px;width:90%;display:flex;flex-direction:column;align-items:center;text-align:center;animation:modalIn .25s ease-out}.modal-spinner{margin-bottom:20px}.modal-spinner-ring{transform-origin:center;animation:spin 1s linear infinite}.modal-title{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--text-primary);margin-bottom:6px}.modal-text{font-size:14px;color:var(--text-body);margin-bottom:4px}.modal-hint{font-size:13px;color:var(--text-neutral)}.modal-stop-btn{margin-top:20px;min-width:100px}.mobile-bar,.mobile-backdrop{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes menuIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes modalIn{0%{opacity:0;transform:scale(.95) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:768px){.app{padding:12px 16px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:0}.app-header{margin-bottom:12px}.app-title{font-size:20px}.app-subtitle{display:none}.workspace{flex-direction:column;gap:0}.sidebar{position:fixed;bottom:0;left:0;right:0;width:100%;max-height:70dvh;z-index:40;background:var(--surface);border-top-left-radius:var(--radius-card);border-top-right-radius:var(--radius-card);border-top:1px solid var(--border-card);box-shadow:0 -4px 20px #0000001a;padding:0 16px;padding-bottom:max(24px,env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .3s ease-out;overflow-y:auto}.sidebar-open{transform:translateY(0)}.sidebar-header-mobile{display:flex;align-items:center;justify-content:space-between;padding:16px 0 12px;position:sticky;top:0;background:var(--surface);z-index:1;font-size:15px;font-weight:600;color:var(--text-primary)}.preview{flex:1}.app:has(.mobile-bar) .preview{margin-bottom:calc(56px + env(safe-area-inset-bottom))}.mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;padding:10px 16px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:var(--surface-card);border-top:1px solid var(--border-card);gap:8px;z-index:30}.mobile-bar .btn{flex:1}.mobile-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:35;animation:fadeIn .2s ease-out}.upload-hero{padding:32px 20px}.upload-hero-title{font-size:18px}.upload-hero-subtitle{font-size:13px}.landing-layout{gap:12px}.landing-tagline{font-size:10px;bottom:10px;padding:5px 11px}.upload-cta-button{padding:12px 22px;font-size:14px}.upload-cta-hint{font-size:11px}.comparison-label{font-size:9px;padding:4px 9px;top:8px}.comparison-label-left{left:8px}.comparison-label-right{right:8px}.comparison-divider-handle{width:36px;height:36px}body{overflow:auto}}