body{display:flex;min-height:100vh;flex-direction:column}main{flex:1}.converter-hero{padding:56px 0 78px}.intro{max-width:920px;margin:0 auto 32px;text-align:center}.intro h1{max-width:920px;margin:18px auto 14px;font-size:clamp(2.65rem,7vw,4.8rem)}.intro code{padding:2px 6px;border-radius:6px;color:#5142c7;background:#efedff;font-size:.88em}.crumbs{margin-bottom:18px;color:var(--muted);font-size:.82rem}.crumbs a{color:var(--primary);font-weight:750}.trust-row{display:flex;justify-content:center;gap:9px;margin-top:22px}.trust-row span{padding:7px 11px;border:1px solid var(--border);border-radius:999px;color:#666980;background:#ffffffa8;font-size:.72rem;font-weight:800}.trust-row span:before{content:"✓";margin-right:6px;color:#009f8a}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.converter-studio{max-width:1180px;margin:auto;border:1px solid var(--border);border-radius:30px;background:#fff;box-shadow:0 30px 90px #372f7e24;overflow:hidden}.studio-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:68px;padding:12px 16px;border-bottom:1px solid var(--border);background:#fbfaff}.sample-list,.toolbar-actions{display:flex;align-items:center;gap:8px}.sample-list{overflow-x:auto}.toolbar-label{margin-right:3px;color:var(--muted);font-size:.69rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}.sample-button,.quiet-button,.upload-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 13px;border:1px solid var(--border);border-radius:11px;color:#5d6078;background:#fff;font-size:.76rem;font-weight:850;white-space:nowrap;transition:.2s}.sample-button:hover,.sample-button.active{color:var(--primary);border-color:#aca3ec;background:#f3f1ff}.sample-dot{display:block;width:17px;height:17px;border-radius:6px}.sample-dot.orbit{background:radial-gradient(circle at 50% 50%,#fff 0 18%,#00c2a8 19% 34%,transparent 35%),linear-gradient(135deg,#6c5ce7,#a291ff)}.sample-dot.wave{background:repeating-linear-gradient(135deg,#6c5ce7 0 3px,#00c2a8 3px 6px)}.sample-dot.confetti{background:radial-gradient(circle at 25% 25%,#ff7e67 0 15%,transparent 16%),radial-gradient(circle at 70% 35%,#6c5ce7 0 14%,transparent 15%),radial-gradient(circle at 45% 75%,#00c2a8 0 14%,transparent 15%),#f1efff}.quiet-button:hover{color:var(--primary)}.upload-button{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--primary),#8977f4);box-shadow:0 9px 22px #6c5ce733;cursor:pointer}.workbench{display:grid;grid-template-columns:minmax(360px,.88fr) minmax(0,1.12fr)}.input-panel{padding:20px;border-right:1px solid var(--border);background:#fcfcff}.result-panel{position:relative;display:grid;grid-template-rows:auto minmax(410px,1fr) auto;min-width:0;background:#fff}
.panel-heading,.panel-heading>div,.settings-heading,.settings-heading>div{display:flex;align-items:center}.panel-heading{justify-content:space-between;gap:12px;margin-bottom:14px}.panel-heading>div,.settings-heading{gap:10px}.panel-heading h2,.settings-heading h2{margin:0;font-size:1rem}.panel-heading p,.settings-heading p{margin:3px 0 0;color:var(--muted);font-size:.68rem}.step-badge{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:9px;color:var(--primary);background:#efedff;font-size:.68rem;font-weight:900}.status-chip{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;color:#087b6c;background:#e7faf6;font-size:.64rem;font-weight:900}.status-chip span{width:7px;height:7px;border-radius:50%;background:#00b99f;box-shadow:0 0 0 4px #00b99f17}.status-chip.invalid{color:#b14343;background:#fff0f0}.status-chip.invalid span{background:#e05252;box-shadow:0 0 0 4px #e0525217}
.editor-wrap{position:relative;border:1px solid #292b40;border-radius:15px;background:#171824;box-shadow:0 13px 32px #25213f1b;overflow:hidden}.editor-wrap.dragging{border-color:#8b79f2;box-shadow:0 0 0 4px #6c5ce71c,0 13px 32px #25213f24}.editor-top{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;color:#999db4;border-bottom:1px solid #2b2d42;background:#1d1e2d;font:700 .63rem/1 ui-monospace,Consolas,monospace}.editor-top span:first-child:before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#ff7e67;box-shadow:13px 0 #ffd166,26px 0 #36cfae}textarea{display:block;width:100%;min-height:235px;padding:15px;border:0;resize:vertical;color:#dcdaef;background:#171824;font:500 .72rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;outline:0;tab-size:2}textarea::selection{background:#6c5ce766}.drop-hint{position:absolute;inset:39px 0 0;display:none;place-items:center;color:#fff;background:#6c5ce7ed;font-size:.84rem;font-weight:850;pointer-events:none}.editor-wrap.dragging .drop-hint{display:grid}.input-help{margin:8px 3px 18px;color:#8a8c9f;font-size:.66rem}.settings-heading{padding-top:16px;border-top:1px solid var(--border)}.settings-grid{display:grid;gap:13px;margin-top:13px}.encoding-field{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;border:0}.encoding-field legend,.select-field>span,.text-field>span{grid-column:1/-1;margin-bottom:6px;color:#666980;font-size:.68rem;font-weight:850}.encoding-field label{position:relative;display:flex;align-items:center;gap:8px;min-height:55px;padding:9px;border:1px solid var(--border);border-radius:11px;background:#fff;cursor:pointer}.encoding-field label:has(input:checked){border-color:#9b90e8;background:#f6f4ff;box-shadow:inset 0 0 0 1px #6c5ce719}.encoding-field input{accent-color:var(--primary)}.encoding-field strong,.encoding-field small{display:block}.encoding-field strong{font-size:.72rem}.encoding-field small{margin-top:2px;color:var(--muted);font-size:.6rem}.encoding-field em{position:absolute;top:-7px;right:7px;padding:3px 6px;border-radius:5px;color:#087b6c;background:#dcf8f3;font-size:.51rem;font-style:normal;font-weight:900;text-transform:uppercase}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.select-field,.text-field{display:grid;gap:5px}.select-field>span,.text-field>span{margin:0}.select-field select,.text-field input{width:100%;height:39px;padding:0 9px;border:1px solid var(--border);border-radius:9px;color:#4e5169;background:#fff;font-size:.72rem;font-weight:750;outline:0}.select-field select:focus,.text-field input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6c5ce714}.minify-switch{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 12px;border:1px solid var(--border);border-radius:11px;background:#fff}.minify-switch strong,.minify-switch small{display:block}.minify-switch strong{font-size:.72rem}.minify-switch small{margin-top:3px;color:var(--muted);font-size:.61rem}.minify-switch input{width:35px;height:20px;accent-color:var(--primary)}
.preview-heading{min-height:75px;padding:14px 18px;margin:0;border-bottom:1px solid var(--border)}.preview-themes{display:flex!important;gap:6px;padding:5px;border:1px solid var(--border);border-radius:999px;background:#fff}.theme-button{width:23px;height:23px;padding:0;border:2px solid #fff;border-radius:50%;background:#eef0f8;box-shadow:0 0 0 1px var(--border)}.theme-button[data-theme=dark]{background:#202237}.theme-button.grid-theme{background:repeating-linear-gradient(45deg,#fff 0 4px,#d6d7e1 4px 8px)}.theme-button.active{box-shadow:0 0 0 2px var(--primary)}.preview-stage{position:relative;display:grid;place-items:center;min-height:410px;padding:48px 28px;overflow:hidden;isolation:isolate;transition:.25s}.preview-stage.light{background:linear-gradient(145deg,#f3f4fb,#e9eaf5)}.preview-stage.dark{background:radial-gradient(circle at 70% 20%,#403c69,#1d1f34 63%)}.preview-stage.grid{background-color:#eef0f5;background-image:linear-gradient(45deg,#dfe1e8 25%,transparent 25%),linear-gradient(-45deg,#dfe1e8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dfe1e8 75%),linear-gradient(-45deg,transparent 75%,#dfe1e8 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.preview-glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(3px);opacity:.5}.preview-glow.one{width:260px;height:260px;top:-90px;right:-70px;background:#8c7aff55}.preview-glow.two{width:220px;height:220px;bottom:-95px;left:-60px;background:#00c2a844}.preview-card{display:grid;grid-template-columns:42% 1fr;width:min(100%,545px);min-height:245px;border:1px solid #ffffff8f;border-radius:24px;background:#ffffffd9;box-shadow:0 25px 65px #37336e24;overflow:hidden;backdrop-filter:blur(15px);transform:perspective(900px) rotateX(1deg) rotateY(-1.5deg);transition:.3s}.dark .preview-card{border-color:#ffffff1a;background:#282a42e8;box-shadow:0 26px 70px #05061169}.preview-card.refresh{animation:card-pop .38s ease}.preview-art{min-height:245px;border-right:1px solid #ffffff70;background-color:#302a73;transition:.2s}.preview-copy{display:flex;justify-content:center;flex-direction:column;padding:27px}.preview-copy strong{color:#25263a;font-size:clamp(1.35rem,3vw,2rem);line-height:1.08;letter-spacing:-.045em}.dark .preview-copy strong{color:#fff}.preview-copy small{margin-top:13px;color:#85889d;font-size:.63rem;line-height:1.5}.live-label{display:flex;align-items:center;gap:7px;margin-bottom:13px;color:var(--primary);font-size:.61rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.live-label i{display:block;width:7px;height:7px;border-radius:50%;background:#00b99f;box-shadow:0 0 0 5px #00b99f17}.preview-meta{position:absolute;right:14px;bottom:12px;left:14px;display:flex;justify-content:space-between;gap:10px;color:#74778d;font:700 .59rem/1 ui-monospace,Consolas,monospace}.dark .preview-meta{color:#aeb0c2}
.output-panel{border-top:1px solid #292b40;background:#171824}.output-tabs{display:flex;gap:4px;padding:11px 14px 0}.output-tab{min-height:33px;padding:0 11px;border:0;border-radius:8px;color:#8e91a7;background:transparent;font-size:.66rem;font-weight:850}.output-tab.active{color:#fff;background:#292b40}.output-panel pre{max-height:190px;margin:0;overflow:auto}.output-panel code{display:block;padding:12px 16px 15px;color:#d9d7eb;font:500 .67rem/1.58 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.output-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-top:1px solid #292b40}.output-actions>span{color:#9699ad;font-size:.59rem}.output-actions>span strong{color:#51d6c2}.copy-button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border:0;border-radius:10px;color:#161827;background:#60e2cc;font-size:.7rem;font-weight:900}.error-panel{position:absolute;inset:75px 0 0;z-index:8;place-items:center;align-content:center;padding:30px;color:#7b3333;background:#fff6f6;text-align:center}.error-panel:not([hidden]){display:grid}.error-panel strong{font-size:1.1rem}.error-panel span{max-width:420px;margin-top:8px;color:#9e5d5d;font-size:.78rem;line-height:1.5}.toast{position:fixed;left:50%;bottom:28px;z-index:70;padding:12px 17px;border-radius:12px;color:#fff;background:#282640;box-shadow:0 12px 35px #19182744;font-size:.78rem;font-weight:850;opacity:0;transform:translate(-50%,14px);transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
.content-section{padding:72px 0}.content-section.alt{border-block:1px solid #1f223e0f;background:#ffffff70}.content{max-width:920px;margin:auto}.content h2{margin:0 0 13px;font-size:clamp(1.8rem,4vw,2.55rem);letter-spacing:-.04em}.content>p,.benefit-card p,.prose-content p,.info-grid p,.faq p{color:var(--muted);line-height:1.75}.benefit-grid,.info-grid,.try-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:27px}.benefit-card,.info-grid article{padding:22px;border:1px solid var(--border);border-radius:19px;background:#fff}.benefit-card>span{display:grid;place-items:center;width:35px;height:35px;margin-bottom:14px;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--primary),#9d8ff7);font-size:.68rem;font-weight:900}.benefit-card h3,.info-grid h3{margin:0 0 8px;font-size:1rem}.benefit-card p,.info-grid p{margin:0;font-size:.85rem}.prose-content>p{max-width:850px}.prose-content h2:not(:first-child){margin-top:40px}.info-grid{grid-template-columns:1fr 1fr}.info-grid article:first-child{border-color:#aa9feb;background:#f8f6ff}.info-grid article:last-child{background:#f9fbff}.faq{display:grid;gap:10px;margin-top:24px}.faq details{border:1px solid var(--border);border-radius:15px;background:#fff}.faq summary{padding:17px 19px;cursor:pointer;font-weight:800}.faq p{margin:0;padding:0 19px 18px}.try-heading{display:flex;align-items:end;justify-content:space-between;gap:18px}.try-heading h2{margin-bottom:8px}.try-heading p{margin:0;color:var(--muted)}.try-heading>a{color:var(--primary);font-size:.82rem;font-weight:850;white-space:nowrap}.try-card{display:flex;align-items:center;gap:13px;padding:18px;border:1px solid var(--border);border-radius:17px;background:#fff;transition:.2s}.try-card:hover{transform:translateY(-3px);box-shadow:0 14px 35px #35316e1a}.try-icon{display:grid;place-items:center;flex:0 0 43px;height:43px;border-radius:13px;color:var(--primary);background:#f0eeff;font-size:.7rem;font-weight:900}.try-card strong,.try-card small{display:block}.try-card small{margin-top:3px;color:var(--muted);font-size:.75rem}
@keyframes card-pop{0%{transform:perspective(900px) rotateX(1deg) rotateY(-1.5deg) scale(.97)}65%{transform:perspective(900px) rotateX(1deg) rotateY(-1.5deg) scale(1.015)}100%{transform:perspective(900px) rotateX(1deg) rotateY(-1.5deg) scale(1)}}@media(max-width:950px){.workbench{grid-template-columns:1fr}.input-panel{border-right:0;border-bottom:1px solid var(--border)}.result-panel{min-height:780px}}@media(max-width:680px){.converter-hero{padding-top:40px}.intro h1{font-size:clamp(2.35rem,13vw,3.75rem)}.trust-row{flex-wrap:wrap}.converter-studio{border-radius:22px}.studio-toolbar{align-items:stretch;flex-direction:column}.sample-list{width:100%}.toolbar-actions{justify-content:flex-end}.input-panel{padding:16px 13px}.field-grid,.encoding-field{grid-template-columns:1fr}.result-panel{min-height:720px}.preview-stage{min-height:390px;padding:42px 15px}.preview-card{grid-template-columns:1fr;max-width:350px;transform:none}.preview-art{min-height:165px;border-right:0;border-bottom:1px solid #ffffff70}.preview-copy{padding:21px}.preview-copy strong br{display:none}.preview-meta{display:none}.output-actions{align-items:flex-start;flex-direction:column}.copy-button{width:100%;justify-content:center}.content-section{padding:54px 0}.benefit-grid,.info-grid,.try-grid{grid-template-columns:1fr}.try-heading{align-items:flex-start;flex-direction:column}.sample-button{padding:0 10px}.toolbar-label{display:none}}@media(prefers-reduced-motion:reduce){.preview-card.refresh{animation:none}.sample-button,.try-card,.toast,.preview-card{transition:none}}