@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-dark:#0f172a;--panel-bg:#1e293b;--panel-border:#334155;--panel-hover:#334155;--accent-primary:#3b82f6;--accent-hover:#2563eb;--accent-emerald:#10b981;--accent-purple:#8b5cf6;--accent-amber:#f59e0b;--accent-rose:#ef4444;--text-main:#f8fafc;--text-muted:#94a3b8;--text-dim:#64748b;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--shadow-glow:0 0 25px #3b82f626;--shadow-card:0 4px 20px #00000040;--page-max-width:1240px;--page-gutter:clamp(.875rem, 2vw, 1.5rem);--panel-padding:1rem;--panel-gap:1rem;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.5;overflow-x:hidden}a{color:var(--accent-primary);text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,select,textarea{font-family:inherit;font-size:.95rem}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0f172a}::-webkit-scrollbar-thumb{background:#334155;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#475569}.app-container{flex-direction:column;min-height:100vh;display:flex}.main-content{width:100%;max-width:var(--page-max-width);padding:1.25rem var(--page-gutter) 2rem;flex:1;margin:0 auto}.app-header{border-bottom:1px solid var(--panel-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:50;padding:.75rem var(--page-gutter);background:#0f172ad9;position:sticky;top:0}.header-inner{width:100%;max-width:var(--page-max-width);justify-content:space-between;align-items:center;gap:1rem;margin:0 auto;display:flex}.brand-section{align-items:center;gap:.75rem;display:flex}.digital-opus-tag{color:#fff;text-transform:uppercase;letter-spacing:.08em;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:4px;padding:.25rem .6rem;font-size:.7rem;font-weight:700}.app-title{color:#fff;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:700;display:flex}.privacy-badge{color:var(--accent-emerald);background:#10b9811a;border:1px solid #10b98140;border-radius:20px;align-items:center;gap:.4rem;padding:.3rem .75rem;font-size:.8rem;display:inline-flex}.header-actions{align-items:center;gap:.75rem;display:flex}.btn-header{color:var(--text-muted);border:1px solid var(--panel-border);border-radius:var(--radius-sm);background:#ffffff0d;align-items:center;gap:.4rem;min-height:40px;padding:.45rem .9rem;font-size:.85rem;font-weight:600;transition:all .2s;display:flex}.btn-header:hover{color:#fff;background:#ffffff1a;border-color:#475569}.hero-section{text-align:center;padding:1.25rem 1rem 1.75rem}.hero-title{letter-spacing:-.02em;color:#fff;background:linear-gradient(#fff 0%,#cbd5e1 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.75rem;font-size:clamp(1.9rem,3vw,2.25rem);font-weight:800}.hero-subtitle{color:var(--text-muted);max-width:64ch;margin:0 auto;font-size:1rem}.mode-switcher-bar{justify-content:center;margin-bottom:1.25rem;display:flex}.mode-switcher-container{border-radius:var(--radius-md);border:1px solid var(--panel-border);background:#1e293bcc;padding:.3rem;display:inline-flex}.mode-tab{border-radius:var(--radius-sm);color:var(--text-muted);align-items:center;gap:.5rem;min-height:44px;padding:.5rem 1rem;font-size:.9rem;font-weight:600;transition:all .2s;display:flex}.mode-tab.active{background:var(--accent-primary);color:#fff;box-shadow:0 2px 10px #3b82f64d}.dropzone-card{border-radius:var(--radius-lg);text-align:center;cursor:pointer;background:#1e293b80;border:2px dashed #334155;max-width:700px;margin:0 auto;padding:2.4rem 1.5rem;transition:all .25s}.dropzone-card:hover,.dropzone-card.drag-active{border-color:var(--accent-primary);box-shadow:var(--shadow-glow);background:#3b82f60d}.dropzone-icon-wrapper{width:60px;height:60px;color:var(--accent-primary);background:#3b82f61a;border-radius:50%;justify-content:center;align-items:center;margin:0 auto 1rem;display:flex}.dropzone-heading{color:#fff;margin-bottom:.5rem;font-size:1.2rem;font-weight:700}.dropzone-subtext{color:var(--text-muted);margin-bottom:1rem;font-size:.95rem}.badge-row{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1rem;display:flex}.format-pill{color:var(--text-dim);background:#ffffff0d;border:1px solid #ffffff14;border-radius:4px;padding:.25rem .6rem;font-size:.75rem;font-weight:600}.studio-grid{grid-template-columns:minmax(0,1.65fr) minmax(340px,1fr);gap:1.125rem;margin-top:.75rem;display:grid}@media (width<=1040px){.studio-grid{grid-template-columns:minmax(0,1fr)}}.studio-left-column,.studio-right-column{gap:var(--panel-gap);flex-direction:column;min-width:0;display:flex}.card-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:var(--panel-padding);box-shadow:var(--shadow-card);min-width:0}.panel-header{border-bottom:1px solid var(--panel-border);justify-content:space-between;align-items:center;margin-bottom:.75rem;padding-bottom:.6rem;display:flex}.panel-title{color:#fff;align-items:center;gap:.5rem;font-size:.98rem;font-weight:700;display:flex}.preview-container{border-radius:var(--radius-md);border:1px solid var(--panel-border);background:#020617;flex-direction:column;justify-content:center;align-items:center;min-height:360px;max-height:560px;padding:.75rem;display:flex;position:relative;overflow:hidden}.preview-canvas{object-fit:contain;border-radius:4px;max-width:100%;max-height:470px;box-shadow:0 8px 30px #00000080}.preview-toolbar{border-top:1px solid #ffffff14;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;width:100%;margin-top:.75rem;padding-top:.75rem;display:flex}.btn-icon{border-radius:var(--radius-sm);border:1px solid var(--panel-border);width:40px;height:40px;color:var(--text-main);background:#ffffff0f;justify-content:center;align-items:center;transition:all .2s;display:inline-flex}.btn-icon:hover{color:#fff;background:#ffffff1f}.btn-icon.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.preset-search-input{border:1px solid var(--panel-border);border-radius:var(--radius-sm);color:#fff;background:#0f172ab3;outline:none;width:100%;min-height:42px;margin-bottom:.75rem;padding:.5rem .75rem}.preset-search-input:focus{border-color:var(--accent-primary)}.platform-tabs{gap:.4rem;margin-bottom:.75rem;padding-bottom:.5rem;display:flex;overflow-x:auto}.platform-tab-btn{white-space:nowrap;border:1px solid var(--panel-border);color:var(--text-muted);background:#ffffff0d;border-radius:20px;min-height:36px;padding:.35rem .75rem;font-size:.8rem;font-weight:600;transition:all .2s}.platform-tab-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.presets-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.6rem;max-height:330px;padding-right:.25rem;display:grid;overflow-y:auto}.preset-card{border:1px solid var(--panel-border);border-radius:var(--radius-sm);cursor:pointer;text-align:center;background:#0f172a99;flex-direction:column;align-items:center;padding:.625rem;transition:all .2s;display:flex;position:relative}.preset-card:hover{background:#1e293be6;border-color:#475569}.preset-card.active{border-color:var(--accent-primary);background:#3b82f61f;box-shadow:0 0 12px #3b82f640}.aspect-box-preview{background:#ffffff1a;border:1px solid #fff3;border-radius:3px;justify-content:center;align-items:center;margin-bottom:.5rem;display:flex}.preset-card-title{color:#fff;margin-bottom:.2rem;font-size:.8rem;font-weight:700;line-height:1.2}.preset-card-meta{color:var(--text-muted);font-size:.7rem}.fit-modes-grid{grid-template-columns:repeat(2,1fr);gap:.6rem;display:grid}.fit-mode-btn{border:1px solid var(--panel-border);border-radius:var(--radius-sm);text-align:left;cursor:pointer;background:#0f172ab3;flex-direction:column;gap:.3rem;padding:.7rem;transition:all .2s;display:flex}.fit-mode-btn:hover{border-color:#475569}.fit-mode-btn.active{border-color:var(--accent-primary);background:#3b82f61f}.fit-mode-title{color:#fff;justify-content:space-between;align-items:center;font-size:.9rem;font-weight:700;display:flex}.fit-mode-desc{color:var(--text-muted);font-size:.75rem}.warning-banner{color:#fcd34d;border-radius:var(--radius-sm);background:#f59e0b1a;border:1px solid #f59e0b4d;align-items:center;gap:.5rem;margin-top:.75rem;padding:.5rem .75rem;font-size:.8rem;display:flex}.btn-primary-export{color:#fff;border-radius:var(--radius-md);background:linear-gradient(135deg,#3b82f6,#2563eb);justify-content:center;align-items:center;gap:.6rem;width:100%;min-height:46px;padding:.75rem 1rem;font-size:.98rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 4px 20px #3b82f659}.reference-panel{margin-top:1.5rem}.reference-intro{max-width:70ch;color:var(--text-muted);margin-bottom:.75rem;font-size:.82rem}.reference-search{max-width:560px;margin-bottom:.75rem;position:relative}.reference-search .preset-search-input{margin-bottom:0;padding-left:2.35rem}.reference-search-icon{color:var(--text-dim);pointer-events:none;position:absolute;top:50%;left:.8rem;transform:translateY(-50%)}.reference-table-wrap{border-radius:var(--radius-sm);border:1px solid #ffffff0d;max-height:500px;overflow:auto}.reference-table{border-collapse:collapse;text-align:left;width:100%;min-width:680px;font-size:.8rem;line-height:1.3}.reference-table thead{z-index:1;background:#111c30;position:sticky;top:0}.reference-table th,.reference-table td{border-bottom:1px solid #ffffff0a;padding:.55rem .75rem}.reference-table th{color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;font-size:.72rem}.reference-table tbody tr:nth-child(2n){background:#ffffff05}.reference-platform{color:#fff;width:18%;font-weight:700}.reference-template{width:44%}.reference-ratio{width:16%;color:var(--accent-primary);white-space:nowrap;font-weight:600}.reference-resolution{color:#cbd5e1;white-space:nowrap;width:22%;font-family:monospace}.seo-section{border-top:1px solid var(--panel-border);margin-top:2rem;padding-top:2rem}.section-title{color:#fff;text-align:center;margin-bottom:1.125rem;font-size:1.5rem;font-weight:800}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:.875rem;margin-bottom:1.75rem;display:grid}.feature-card-header{align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.feature-card-title,.privacy-title{color:#fff;font-size:1rem;font-weight:700}.readable-copy{max-width:68ch;color:var(--text-muted);font-size:.84rem;line-height:1.55}.article-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:1.25rem;margin-bottom:1.75rem;display:grid}.info-article{max-width:68ch}.info-heading{color:#fff;margin-bottom:.5rem;font-size:1.08rem;font-weight:700}.privacy-panel{background:#10b9810f;border-color:#10b98140;align-items:center;gap:1rem;display:flex}.privacy-icon{flex-shrink:0}.privacy-title{margin-bottom:.2rem}.btn-primary-export:hover{transform:translateY(-1px);box-shadow:0 6px 25px #3b82f673}.btn-primary-export:disabled{opacity:.6;cursor:not-allowed;transform:none}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#000000bf;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-lg);width:100%;max-width:640px;max-height:90vh;padding:1.5rem;overflow-y:auto;box-shadow:0 20px 50px #00000080}@media (width<=640px){.hero-title{font-size:1.8rem}.fit-modes-grid{grid-template-columns:1fr}.presets-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}@media (width<=768px){:root{--panel-padding:.875rem;--panel-gap:.875rem}.main-content{padding-top:.875rem}.header-inner{flex-wrap:wrap}.brand-section{flex:auto;min-width:0}.privacy-badge{order:3;justify-content:center;width:100%}.hero-section{padding:1rem .5rem 1.35rem}.dropzone-card{padding:1.75rem 1rem}.preview-container{min-height:300px}.feature-grid,.article-grid{grid-template-columns:1fr}.reference-table-wrap{max-height:440px}}@media (width<=480px){.app-header{padding-block:.625rem}.digital-opus-tag{letter-spacing:.04em;padding-inline:.35rem;font-size:.52rem}.app-title{white-space:nowrap;gap:.3rem;font-size:.92rem}.header-inner{grid-template-columns:minmax(0,1fr) auto;gap:.5rem .75rem;display:grid}.brand-section{grid-area:1/1;gap:.45rem}.header-actions{grid-area:1/2;justify-self:end}.privacy-badge{order:initial;grid-area:2/1/auto/-1}.header-actions .btn-header span{display:none}.privacy-badge{font-size:.72rem}.mode-switcher-container{width:100%}.mode-tab{flex:1;justify-content:center;padding-inline:.5rem;font-size:.8rem}.preview-container{min-height:240px}.panel-header{align-items:flex-start;gap:.5rem}.privacy-panel{align-items:flex-start}.privacy-icon{width:32px;height:32px}}