:root{--bg:#f4f7fb;--bg-accent:#e8eefb;--panel:hsla(0,0%,100%,.82);--panel-strong:#fff;--border:rgba(14,32,66,.12);--text:#132238;--muted:#55657d;--primary:#1058ff;--primary-deep:#0a3bc2;--shadow:0 24px 80px rgba(17,37,73,.14);--radius-lg:28px;--radius-md:18px;--radius-sm:12px;--font-sans:"Sora","Segoe UI",sans-serif}*{box-sizing:border-box}html{min-height:100%;background:radial-gradient(circle at top left,rgba(16,88,255,.14),transparent 35%),radial-gradient(circle at top right,rgba(0,186,124,.11),transparent 30%),linear-gradient(180deg,#f9fbff 0,var(--bg) 100%)}body{margin:0;min-height:100vh;color:var(--text);font-family:var(--font-sans)}button,input{font:inherit}button{cursor:pointer}.app-shell{width:min(1400px,calc(100% - 32px));margin:0 auto;padding:32px 0 56px}.floating-toolbar,.hero-card,.output-panel,.splitter-actions,.tool-description,.tool-shell,.upload-card{border:1px solid var(--border);background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow)}.hero-card{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);grid-gap:24px;gap:24px;padding:32px;border-radius:var(--radius-lg)}.hero-copy h1{margin:12px 0;font-size:clamp(2.5rem,5vw,4.8rem);line-height:.95;letter-spacing:-.05em}.hero-copy p,.support-text,.tool-description p{margin:0;color:var(--muted);line-height:1.7}.eyebrow{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(16,88,255,.09);color:var(--primary-deep);font-size:.85rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.hero-meta{display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start;justify-content:flex-end}.meta-pill{padding:14px 16px;border-radius:999px;background:var(--panel-strong);border:1px solid rgba(16,88,255,.12);font-weight:600}.tool-shell{margin-top:28px;padding:18px;border-radius:var(--radius-lg)}.tab-bar{display:flex;gap:12px;flex-wrap:wrap}.process-button,.secondary-button,.tab-button,.toolbar-button{border:0;border-radius:999px;padding:12px 18px;transition:transform .16s ease,background-color .16s ease,color .16s ease,opacity .16s ease}.secondary-button,.tab-button,.toolbar-button{background:rgba(19,34,56,.06);color:var(--text)}.process-button,.tab-button.active,.toolbar-button.active,.toolbar-button.primary{background:linear-gradient(135deg,var(--primary) 0,var(--primary-deep) 100%);color:#fff}.process-button:hover,.secondary-button:hover,.tab-button:hover,.toolbar-button:hover{transform:translateY(-1px)}.tab-button[aria-selected=true]{box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.28)}.tool-description{margin-top:16px;padding:18px 20px;border-radius:var(--radius-md)}.tool-panel{margin-top:18px}.editor-tool,.splitter-tool{display:grid;grid-gap:20px;gap:20px}.splitter-actions,.upload-card{padding:18px;border-radius:var(--radius-md)}.splitter-actions{display:flex;gap:14px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}.upload-field{display:grid;grid-gap:10px;gap:10px;font-weight:700}.upload-field input[type=file]{padding:12px;min-width:min(100%,360px);border-radius:var(--radius-sm);border:1px solid rgba(19,34,56,.12);background:hsla(0,0%,100%,.88)}.preview-stage{min-height:65vh;padding:12px;border-radius:calc(var(--radius-lg) + 8px);background:linear-gradient(180deg,hsla(0,0%,100%,.92),rgba(233,239,252,.82)),repeating-linear-gradient(90deg,rgba(16,88,255,.05),rgba(16,88,255,.05) 1px,transparent 0,transparent 22px);border:1px solid rgba(14,32,66,.1)}.device-frame{width:100%;margin:0 auto;min-height:calc(65vh - 24px);border-radius:24px;overflow:hidden;border:1px solid rgba(14,32,66,.12);background:#fff;transition:width .22s ease;box-shadow:0 24px 64px rgba(17,37,73,.12)}.device-frame.tablet{width:min(768px,100%)}.device-frame.mobile{width:min(375px,100%)}.preview-iframe{display:block;width:100%;min-height:calc(65vh - 24px);border:0;background:#fff}.empty-state{min-height:calc(65vh - 24px);display:grid;place-items:center;text-align:center;padding:32px;color:var(--muted)}.empty-state h2{margin-bottom:12px;color:var(--text)}.floating-toolbar{position:-webkit-sticky;position:sticky;bottom:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px;border-radius:999px}.device-switcher{display:flex;flex-wrap:wrap;gap:10px}.secondary-button:disabled,.toolbar-button:disabled{opacity:.45;cursor:not-allowed;transform:none}.output-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:18px;gap:18px}.output-panel{padding:18px;border-radius:var(--radius-md)}.output-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.output-panel h3{margin:0;font-size:1rem}.output-panel pre{margin:0;padding:16px;min-height:240px;overflow:auto;white-space:pre-wrap;word-break:break-word;border-radius:var(--radius-sm);background:#0f1728;color:#dbe7ff;font-family:Consolas,SFMono-Regular,monospace;font-size:.93rem;line-height:1.6}.section-list{display:grid;grid-gap:14px;gap:14px}.section-card{border:1px solid rgba(19,34,56,.1);border-radius:var(--radius-sm);overflow:hidden;background:hsla(0,0%,100%,.62)}.section-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(19,34,56,.08)}.section-card-header h4{margin:0;font-size:.96rem}.section-card pre{min-height:180px;border-radius:0}@media (max-width:980px){.hero-card{grid-template-columns:1fr}.hero-meta{justify-content:flex-start}.output-grid{grid-template-columns:1fr}}@media (max-width:720px){.app-shell{width:min(100% - 20px,1400px);padding-top:20px}.hero-card,.tool-shell{padding:16px}.hero-copy h1{font-size:2.4rem}.floating-toolbar{border-radius:24px;bottom:12px}.process-button,.secondary-button,.tab-button,.toolbar-button{width:100%;justify-content:center}.device-switcher{width:100%}}