.formats-hero{padding-top:38px;padding-bottom:34px}.back-link{display:block;text-align:left;font-size:12px;color:#8690a5;text-decoration:none;margin-bottom:32px}.formats-hero h1{font-size:clamp(45px,5.8vw,70px)}.formats-hero .hero-copy{max-width:640px;font-size:17px}.format-overview{display:flex;justify-content:center;gap:16px;margin:36px auto 26px}.format-overview a{display:flex;flex-direction:column;align-items:center;width:132px;padding:23px 12px 17px;border:1px solid #e1e3f1;border-radius:12px;text-decoration:none;box-shadow:0 8px 18px #26347505;transition:transform .2s,border-color .2s}.format-overview a:hover{transform:translateY(-5px);border-color:#a7aaf3}.format-overview span{font-size:19px;font-weight:600;color:var(--accent)}.format-overview small{font-size:10px;margin-top:10px;color:#8d97ad}.formats-intro-note{display:flex;align-items:center;justify-content:center;gap:40px}.formats-intro-note p{font-size:10px;text-align:left;color:#929bb0;margin:0}.format-jump{position:sticky;top:78px;z-index:20;background:#fafbffed;backdrop-filter:blur(12px);border-block:1px solid #e7eaf2}.format-jump>div{display:flex;justify-content:center;align-items:center;gap:27px;padding-top:15px;padding-bottom:15px;overflow-x:auto;white-space:nowrap}.format-jump a{font-size:12px;color:#68748b;text-decoration:none}.format-jump a:hover,.format-jump a[aria-current=location]{color:var(--accent)}.format-jump span{font-size:9px;color:#929aaf;padding-left:22px;border-left:1px solid #dadeeb}.format-section{scroll-margin-top:50px;padding-block:88px}.format-section:nth-of-type(even){background:#fafbfe}.format-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.format-copy h2{font-size:42px}.format-copy>p{font-size:14px;max-width:400px}.format-benefits{list-style:none;margin:23px 0;padding:0;display:grid;gap:12px}.format-benefits li{display:flex;gap:9px;font-size:12px;color:#546278}.format-benefits svg{width:16px;height:16px;color:#58a087;margin-top:1px}.format-copy .text-link{font-size:12px;color:var(--accent);line-height:1.6}.format-copy>.small-note{margin-top:24px;max-width:410px;font-size:10px!important;color:#838fa5!important;line-height:1.8!important}.format-demo{min-width:0;overflow:hidden;border:1px solid #dde2ef;border-radius:14px;background:#fff;box-shadow:0 18px 45px -20px #35457528}.format-demo .demo-top{font-size:9px;height:43px;padding-inline:19px}.format-demo .quiet{font-size:11px}.format-canvas{height:406px;position:relative;overflow:hidden;background:#f0f2f9}.format-source,.format-building,.format-output{position:absolute;inset:0;transition:opacity .4s,transform .5s;min-width:0}.format-source,.format-building{opacity:0;visibility:hidden;pointer-events:none}.format-output{opacity:1;visibility:visible;transform:none}.format-source{display:flex;flex-direction:column;padding:24px 32px;justify-content:center;gap:13px}.mini-source{background:#222329;color:#d4d8e2;border:1px solid #393b46;border-radius:10px;padding:20px 25px;box-shadow:0 10px 20px #282b4312;max-width:380px;width:100%;margin:auto}.source-name{display:flex;align-items:center;gap:7px;font-size:8px;letter-spacing:.08em;color:#939baa;margin-bottom:15px}.mini-bubble{padding:9px 11px;border-radius:10px 10px 3px 10px;background:#363841;color:#d7dae4;font-size:9px;margin-left:auto;width:fit-content;margin-bottom:17px}.mini-source strong{display:block;font-size:14px;letter-spacing:-.3px}.mini-source p{font-size:10px;color:#afb5c6;line-height:1.7;margin-block:8px 13px}.mini-table{display:grid;grid-template-columns:1fr 1.3fr;font-size:9px;gap:8px;border-block:1px solid #40434d;padding:10px 0}.mini-table b{font-weight:400;color:#adb5c8}.mini-formula{font:italic 12px Georgia,serif;margin:14px 0;color:#c8ccef}.mini-file{font-size:9px;color:#989fb4}.selected-format{display:flex;justify-content:space-between;align-items:center;border:1px solid #d5d8f5;background:#fff;padding:10px 14px;border-radius:7px;font-size:10px;color:#8590a6;max-width:380px;width:100%;margin:0 auto}.selected-format b{font-size:11px;color:var(--accent)}.format-building{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;background:radial-gradient(ellipse at center,#e7e9ff,transparent 65%)}.format-building strong{font-size:15px;font-weight:600}.format-building>span{font-size:10px;color:#929bb0;margin-top:-10px}.build-track{width:160px;height:4px;background:#dfe2f3;border-radius:5px;margin-top:12px;overflow:hidden}.build-track i{display:block;width:36%;height:100%;background:#777aeb;border-radius:5px;animation:build 1.8s ease-in-out infinite}.result-filebar{height:42px;display:flex;align-items:center;gap:8px;padding:0 20px;background:#e9edf6;border-bottom:1px solid #dee4f0;font-size:10px;color:#75819a}.result-filebar svg{width:14px;height:14px}.result-filebar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.result-content{height:364px;padding:19px 23px;overflow:auto;overscroll-behavior:contain}.result-content .pdf-sheet{padding:20px 28px;min-height:323px}.result-content .pdf-sheet h3{font-size:22px}.result-content .paper-chart{height:46px;margin-top:14px}.page-number{display:block;text-align:center;font-size:7px;color:#a0a9bd;margin-top:14px}.result-content .code-preview{font-size:10px;line-height:1.75;padding:20px;min-height:324px}.result-content .dark-code{background:#222632;color:#c7cee4;border-color:#303749;font-size:10px;line-height:1.8}.dark-code em{font-style:normal;color:#a7adff}.tree-demo{background:#fff;border:1px solid #e0e4ef;border-radius:9px;padding:24px 17px;min-height:323px;text-align:center}.tree-label{font-size:8px;letter-spacing:.12em;color:#909ab1;margin-bottom:24px}.tree-node{display:inline-block;font-size:10px;padding:11px 13px;border:1px solid #dce1ed;border-radius:7px;color:#7c889e;background:#fafbfe}.root-node{color:#555bd0;background:#f1f1ff;border-color:#d9daf9}.tree-branches{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:30px auto 0;position:relative;max-width:320px}.tree-branches:before{content:'';position:absolute;height:15px;border:1px solid #dfe3ef;border-bottom:none;top:-15px;left:25%;right:25%}.tree-branches:after{content:'';position:absolute;height:16px;width:1px;background:#dfe3ef;top:-30px;left:50%}.tree-branches small{display:block;font-size:8px;line-height:1.7;margin-top:9px;color:#919cb2}.selected-node{border-color:#a9afe9;background:#f0f1ff;color:#656ccc}.raw-snippet{margin:27px 0 0;padding-top:16px;border-top:1px solid #e9ecf3;font:9px/1.9 ui-monospace,monospace;color:#99a2b7}.archive-demo{padding:12px 3px}.archive-title{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;margin:0 0 19px;color:#56647d}.archive-title svg{color:var(--accent)}.bundle-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e0e5f0;border-radius:6px;padding:11px 12px;font-size:10px;margin-bottom:8px}.bundle-row .type-badge{font-size:7px;min-width:66px;text-align:center}.bundle-row>span:last-child{margin-left:auto;color:#5b9b83;font-size:10px}.report-row>span:last-child{color:#b28d54}.archive-demo>small{font-size:8px;color:#8a96ad;display:block;margin-top:12px}.scene-caption{font-size:11px;color:#75849d;background:#fff;padding:15px 15px 10px;text-align:center;min-height:43px}.scene-steps{display:flex;justify-content:space-around;gap:4px;border-top:1px solid #ebedf4;padding:12px 8px}.scene-steps button{font-size:9px;border:0;background:none;display:flex;align-items:center;gap:7px;padding:5px 4px;color:#8b96ac}.scene-steps button span{display:grid;place-items:center;border-radius:50%;width:19px;height:19px;background:#f0f2f7;font-size:8px}.scene-steps button[aria-pressed=true]{color:var(--accent)}.scene-steps button[aria-pressed=true] span{background:#e9eaff;color:var(--accent)}.is-animated .format-source,.is-animated .format-building,.is-animated .format-output{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px)}.is-animated[data-stage="0"] .format-source,.is-animated[data-stage="1"] .format-building,.is-animated[data-stage="2"] .format-output{opacity:1;visibility:visible;pointer-events:auto;transform:none}.is-animated[data-stage="2"] .bundle-row{animation:reveal .45s both}.is-animated[data-stage="2"] .bundle-row:nth-child(3){animation-delay:.15s}.is-animated[data-stage="2"] .bundle-row:nth-child(4){animation-delay:.3s}.is-animated[data-stage="2"] .bundle-row:nth-child(5){animation-delay:.45s}.is-animated[data-stage="2"] .bundle-row:nth-child(6){animation-delay:.6s}.svg-preview,.html-preview{height:324px;background:white;border:1px solid #dfe4f0;border-radius:9px;padding:22px 17px;overflow:hidden}.zoom-label{font-size:8px;letter-spacing:.08em;color:#929eb3;display:flex;justify-content:space-between}.zoom-label span{color:var(--accent)}.svg-preview .diagram-demo{height:166px;gap:8px;padding:20px 0;transform-origin:center;transition:transform .15s}.svg-preview .diagram-node{font-size:10px;padding:10px 12px}.svg-preview .diagram-demo>span:not(.diagram-node){font-size:15px;color:#9ba5c6}.zoom-row{position:relative;display:flex;align-items:center;gap:14px;background:white;padding-block:12px}.zoom-row label,.live-controls label{font-size:9px;color:#8290a8;white-space:nowrap}.zoom-row input,.live-controls input{width:100%;min-width:30px;height:4px;accent-color:var(--accent)}.svg-preview p,.html-preview p{font-size:9px;color:#98a2b8;text-align:center;margin:12px 0 0}.live-preview-label{display:flex;align-items:center;gap:7px;font-size:8px;color:#929eb3;letter-spacing:.06em}.html-preview>svg{width:100%;height:184px;display:block;margin-top:5px}.html-preview #formats-wave{stroke:#6e73e8;stroke-width:2.5;fill:none}.live-controls{display:flex;align-items:center;gap:12px}.live-controls output{font-size:9px;color:#7f8ba2;min-width:16px}.formats-hero+.format-jump~.closing .eyebrow{justify-content:center}.nav a[aria-current=page]{color:var(--accent)}.no-script{padding-block:18px;font-size:13px;color:var(--muted)}body[data-motion=paused] .format-demo *{transition:none!important}
@keyframes build{0%{transform:translateX(-100%)}100%{transform:translateX(380%)}}@keyframes reveal{from{opacity:.25;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.format-layout{gap:32px;grid-template-columns:.9fr 1.1fr}.format-copy h2{font-size:35px}.format-copy>p{font-size:13px}.format-benefits li{font-size:11px}.format-jump>div{gap:22px}.result-content{padding:18px 17px}.format-source{padding:24px}.bundle-row{gap:8px;padding-inline:9px}.bundle-row .type-badge{min-width:57px;font-size:6px}.svg-preview .diagram-node{font-size:9px;padding:9px}.tree-node{font-size:9px;padding:10px}.mini-source{padding:20px}}
@media(max-width:740px){.formats-hero{padding-top:24px}.back-link{margin-bottom:28px;font-size:11px}.formats-hero h1{font-size:45px}.formats-hero .hero-copy{font-size:14px}.format-overview{gap:7px;margin-top:28px}.format-overview a{padding:17px 4px 12px;min-width:0;flex:1;border-radius:8px}.format-overview span{font-size:12px}.format-overview small{font-size:8px;line-height:1.5;margin-top:7px}.formats-intro-note{gap:15px;justify-content:space-between}.formats-intro-note p{font-size:9px}.formats-intro-note button{font-size:10px;max-width:110px}.format-jump{top:68px}.format-jump>div{justify-content:flex-start;gap:24px;padding-block:13px}.format-jump span{padding-left:15px}.format-layout{grid-template-columns:1fr;gap:25px}.format-section{padding-block:57px;scroll-margin-top:44px}.format-copy h2{font-size:35px}.format-copy>p{max-width:500px;font-size:13px}.format-benefits{margin-block:18px;gap:10px}.format-copy>.small-note{font-size:10px!important;max-width:500px;margin-top:18px}.format-demo{max-width:540px;width:100%;margin:auto}.format-canvas{height:390px}.result-content{height:348px;padding:15px}.result-content .pdf-sheet{min-height:318px;padding:18px 23px}.result-content .code-preview{min-height:317px;font-size:9px;padding:17px}.tree-demo,.svg-preview,.html-preview{min-height:317px;height:317px}.tree-demo{padding:24px 12px}.scene-steps button{font-size:9px;gap:5px}.format-source{padding:22px}.svg-preview .diagram-node{font-size:10px;padding:10px}.bundle-row{font-size:10px}.bundle-row .type-badge{font-size:7px;min-width:62px}.archive-title{font-size:14px}.format-jump a{font-size:11px}}
@media(max-width:360px){.formats-hero h1{font-size:39px}.format-overview span{font-size:11px}.format-overview small{font-size:7px}.scene-steps button{font-size:8px;gap:4px}.result-content{padding:12px}.format-source{padding:19px}.bundle-row{font-size:9px;gap:7px}.bundle-row .type-badge{min-width:54px;font-size:6px}.svg-preview{padding-inline:12px}.svg-preview .diagram-node{font-size:9px;padding:9px}.format-canvas{height:388px}}
@media(prefers-reduced-motion:reduce){.format-overview a:hover{transform:none}.format-demo *{transition:none!important;animation:none!important}}

.vector-viewport{height:166px;overflow:hidden;background:radial-gradient(#dbe0f0 1px,transparent 1px);background-size:14px 14px}.vector-diagram{width:100%;height:100%;transform-origin:center;transition:transform .15s}