body{display:flex;min-height:100vh;flex-direction:column}main{flex:1}.intro{max-width:950px;margin:0 auto;padding:58px 0 32px;text-align:center}.intro h1{margin:18px auto 14px;font-size:clamp(2.6rem,6.8vw,4.75rem)}.intro code{padding:2px 6px;border-radius:6px;color:#5142c7;background:#ece9ff;font-size:.9em}.crumbs{margin-bottom:18px;color:var(--muted);font-size:.82rem}.crumbs a{color:var(--primary);font-weight:750}
.spacing-studio{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);margin:0 auto 82px;border:1px solid var(--border);border-radius:30px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.preview-panel{min-width:0;padding:18px;background:#ebe9f3}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 5px 12px;color:#66647a;font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.preview-toolbar>span{display:flex;align-items:center;gap:8px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#00c2a8;box-shadow:0 0 0 5px #00c2a81b}.theme-switcher{display:flex;gap:6px}.theme-dot{width:23px;height:23px;padding:0;border:2px solid transparent;border-radius:50%;box-shadow:inset 0 0 0 2px #fff,0 2px 8px #17182a1c}.theme-dot:nth-child(1){background:#f9f8f3}.theme-dot:nth-child(2){background:#1d1c2b}.theme-dot:nth-child(3){background:#d9fff5}.theme-dot.active{border-color:#6c5ce7;transform:scale(1.08)}
.type-stage{position:relative;display:flex;min-height:540px;flex-direction:column;justify-content:center;padding:68px 36px 76px;border:1px solid #17182a12;border-radius:21px;overflow:hidden;isolation:isolate;transition:background .25s,color .25s}.type-stage:before,.type-stage:after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(2px)}.type-stage:before{width:280px;height:280px;top:-140px;right:-100px;background:#6c5ce71a}.type-stage:after{width:230px;height:230px;left:-120px;bottom:-90px;background:#00c2a817}.theme-paper{color:#1d1c2b;background:#f9f8f3}.theme-night{color:#f8f7ff;background:#1d1c2b}.theme-night:before{background:#927fff2b}.theme-night:after{background:#00d6b82b}.theme-mint{color:#193b35;background:#d9fff5}.ruler{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;height:38px;padding:12px 18px 0;border-bottom:1px solid currentColor;color:inherit;font:700 .55rem ui-monospace,Consolas,monospace;opacity:.28;background-image:repeating-linear-gradient(90deg,currentColor 0,currentColor 1px,transparent 1px,transparent 2.5%);background-size:100% 8px;background-position:left bottom;background-repeat:no-repeat}.specimen{display:grid;gap:24px}.sample-row{position:relative;min-width:0;padding:21px 0}.sample-label{display:flex;align-items:center;gap:8px;margin-bottom:17px;font-size:.58rem;font-weight:900;letter-spacing:.16em;opacity:.54}.sample-label small{padding:4px 7px;border:1px solid currentColor;border-radius:999px;font-size:.56rem;letter-spacing:0;text-transform:none}.sample-row p{max-width:100%;margin:0;font-size:64px;font-weight:700;line-height:1.02;overflow-wrap:anywhere}.before-row p{letter-spacing:0;opacity:.28}.after-row p{letter-spacing:.08em;text-shadow:0 16px 35px #17182a14}.after-row.animate p{animation:spacing-pop .38s cubic-bezier(.2,.82,.2,1)}.sample-divider{display:flex;align-items:center;gap:9px;color:inherit;opacity:.2}.sample-divider:before,.sample-divider:after{content:"";height:1px;flex:1;background:currentColor}.sample-divider span{width:7px;height:7px;border:1px solid currentColor;transform:rotate(45deg)}.spacing-personality{position:absolute;right:20px;bottom:18px;display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid currentColor;border-radius:999px;font-size:.65rem;font-weight:850;opacity:.62}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.metrics div{min-width:0;padding:13px 12px;border:1px solid #d8d6e1;border-radius:12px;background:#fff}.metrics span,.metrics strong{display:block}.metrics span{color:#858296;font-size:.6rem;font-weight:800;text-transform:uppercase}.metrics strong{margin-top:5px;color:#353246;font-size:.82rem;white-space:nowrap}.metrics div:nth-child(3) strong{color:#6c5ce7}
.controls{padding:25px 24px}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}.panel-heading h2{margin:3px 0 0;font-size:1.4rem;letter-spacing:-.03em}.step-label,.field-label{color:#858298;font-size:.66rem;font-weight:900;letter-spacing:.1em}.reset-button{min-height:38px;padding:0 12px;border:1px solid #dedbe9;border-radius:10px;color:#6c5ce7;background:#f8f7ff;font-size:.72rem;font-weight:850}.reset-button:hover{border-color:#b8b0ed;background:#f0edff}.field-label{display:block;margin-bottom:7px}.text-field{display:flex;align-items:center;border:1px solid #dcd9e6;border-radius:12px;background:#fbfaff;transition:.2s}.text-field:focus-within{border-color:#6c5ce7;box-shadow:0 0 0 4px #6c5ce712}.text-field input{min-width:0;flex:1;padding:12px 13px;border:0;outline:0;background:transparent;font-weight:750}.text-field span{padding-right:12px;color:#9996a9;font-size:.66rem;font-weight:750}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.select-field{display:grid;gap:6px;color:#777487;font-size:.68rem;font-weight:850}.select-field select{width:100%;min-height:42px;padding:0 10px;border:1px solid #dcd9e6;border-radius:11px;color:#343245;background:#fff;outline:0}.range-block{margin-top:18px}.range-heading,.tracking-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.range-heading label,.tracking-heading label{color:#4c495d;font-size:.76rem;font-weight:850}.range-heading output{color:#6c5ce7;font-size:.72rem;font-weight:900}.range-block input,.tracking-block>input{width:100%;height:5px;margin-top:10px;accent-color:#6c5ce7}.tracking-block{margin-top:18px;padding:15px;border:1px solid #e0ddea;border-radius:15px;background:#faf9ff}.tracking-heading>div:first-child{display:grid;gap:2px}.tracking-heading>div:first-child span{color:#9996aa;font-size:.6rem}.number-field{display:flex;align-items:center;border:1px solid #dcd9e6;border-radius:9px;background:#fff;overflow:hidden}.number-field input{width:62px;padding:7px 5px 7px 8px;border:0;outline:0;color:#343245;background:transparent;font-size:.78rem;font-weight:850;text-align:right}.number-field span{padding-right:8px;color:#9996aa;font-size:.58rem}.range-scale{display:flex;justify-content:space-between;margin-top:3px;color:#aaa7b6;font-size:.55rem;font-weight:750}.preset-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}.preset-row button{display:grid;gap:3px;min-height:49px;padding:7px 4px;border:1px solid #dedbe8;border-radius:10px;color:#727083;background:#fff}.preset-row i{font-size:.67rem;font-style:normal;font-weight:850}.preset-row span{font-size:.57rem}.preset-row button:hover,.preset-row button.active{color:#5545ca;border-color:#9f94ea;background:#f3f0ff;transform:translateY(-1px)}
.conversion-card{margin-top:16px;padding:15px;border-radius:16px;color:#fff;background:linear-gradient(135deg,#322b77,#6c5ce7 68%,#7769dc);box-shadow:0 13px 30px #5142c72b}.conversion-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.conversion-title span{font-size:.72rem;font-weight:850}.conversion-title small{color:#ffffffa8;font-size:.58rem}.conversion-values{display:grid;grid-template-columns:1fr 1fr;gap:8px}.conversion-values button{display:grid;gap:2px;padding:11px;border:1px solid #ffffff2b;border-radius:11px;color:#fff;background:#ffffff10;text-align:left}.conversion-values button:hover{background:#ffffff1d}.conversion-values span,.conversion-values small{color:#ffffffa5;font-size:.57rem}.conversion-values strong{font:800 1.08rem ui-monospace,Consolas,monospace}.fit-card{margin-top:12px;padding:14px;border:1px solid #dedbe8;border-radius:15px;background:#fff}.fit-copy{display:flex;align-items:center;gap:10px}.fit-copy strong,.fit-copy small{display:block}.fit-copy strong{font-size:.74rem}.fit-copy small{margin-top:2px;color:#9290a2;font-size:.61rem}.fit-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#078b78;background:#00c2a818;font-weight:900}.fit-input{display:flex;align-items:center;margin-top:11px;border:1px solid #dcd9e6;border-radius:10px;overflow:hidden}.fit-input input{min-width:0;flex:1;padding:9px 2px 9px 10px;border:0;outline:0;background:#fbfaff;font-size:.75rem;font-weight:800}.fit-input span{padding:0 8px 0 4px;color:#9996aa;background:#fbfaff;font-size:.63rem}.fit-input button{align-self:stretch;padding:0 15px;border:0;color:#fff;background:#00a991;font-size:.7rem;font-weight:900}.fit-input button:hover{background:#078b78}.code-card{margin-top:12px;border:1px solid #252438;border-radius:15px;background:#1f1e2d;overflow:hidden}.code-heading{display:flex;align-items:center;justify-content:space-between;min-height:38px;padding:0 8px 0 12px;color:#aaa8b9;font-size:.59rem;font-weight:850;letter-spacing:.08em}.code-heading>span{display:flex;align-items:center;gap:7px}.code-heading>span i{width:6px;height:6px;border-radius:50%;background:#00c2a8}.unit-toggle{display:flex;padding:3px;border-radius:7px;background:#2d2b40}.unit-toggle button{padding:4px 7px;border:0;border-radius:5px;color:#8d8a9f;background:transparent;font-size:.57rem;font-weight:800}.unit-toggle button.active{color:#fff;background:#514b77}.code-line{display:flex;align-items:center;gap:10px;padding:13px;border-top:1px solid #ffffff10}.code-line code{min-width:0;flex:1;color:#bcb4ff;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.code-line button{padding:7px 9px;border:1px solid #ffffff1f;border-radius:8px;color:#fff;background:#ffffff0d;font-size:.64rem;font-weight:850}.code-line button:hover{background:#ffffff18}
.section{padding:64px 0}.section.alt{background:#ffffff73;border-block:1px solid #1f223e0f}.content{max-width:1000px}.content>h2{margin:0 0 11px;font-size:clamp(1.7rem,4vw,2.55rem);letter-spacing:-.04em}.content>p{margin:0;color:#696c83;line-height:1.75}.feature-grid,.try-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}.feature-card{padding:24px;border:1px solid var(--border);border-radius:20px;background:#fff;box-shadow:0 12px 30px #35316e0c}.feature-card>span{display:grid;place-items:center;width:36px;height:36px;margin-bottom:17px;border-radius:11px;color:#6c5ce7;background:#6c5ce714;font-size:.7rem;font-weight:900}.feature-card h3{margin:0 0 8px;font-size:1rem}.feature-card p{margin:0;color:#74768d;font-size:.86rem;line-height:1.65}.feature-card code,.prose-content code{padding:2px 5px;border-radius:5px;color:#5142c7;background:#eeebff;font-size:.9em}.prose-content{max-width:850px}.prose-content h2{margin:42px 0 12px}.prose-content h2:first-child{margin-top:0}.prose-content p,.prose-content li{color:#5f627a;line-height:1.82}.prose-content ol{padding-left:22px}.formula-box,.tip-box{display:flex;gap:17px;margin:28px 0;padding:22px;border:1px solid #dedbea;border-radius:18px;background:#f8f7ff}.formula-mark,.tip-mark{align-self:flex-start;padding:6px 8px;border-radius:8px;color:#fff;background:#6c5ce7;font-size:.58rem;font-weight:900;letter-spacing:.08em;white-space:nowrap}.formula-box>div{display:grid;gap:8px}.formula-box code{display:block;font-size:.78rem}.tip-box{background:#edfffa;border-color:#00a99135}.tip-mark{background:#00a991}.tip-box h3{margin:0 0 5px;font-size:.9rem}.tip-box p{margin:0;font-size:.86rem}.faq{display:grid;gap:10px;margin-top:26px}.faq details{border:1px solid #dfddea;border-radius:15px;background:#fff}.faq summary{padding:17px 20px;font-size:.89rem;font-weight:800;cursor:pointer}.faq p{margin:0;padding:0 20px 18px;color:#666980;font-size:.86rem;line-height:1.7}.try-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:22px}.try-heading h2{margin:0 0 8px;font-size:clamp(1.7rem,4vw,2.55rem);letter-spacing:-.04em}.try-heading p{margin:0;color:#696c83}.try-heading>a{color:#6c5ce7;font-size:.83rem;font-weight:850}.try-card{display:flex;align-items:center;gap:14px;padding:19px;border:1px solid var(--border);border-radius:17px;background:#fff;transition:.2s}.try-card:hover{transform:translateY(-3px);border-color:#6c5ce74a;box-shadow:0 14px 35px #35316e12}.try-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:12px;color:#6c5ce7;background:#6c5ce714;font-size:.67rem;font-weight:900}.try-card strong,.try-card small{display:block}.try-card strong{font-size:.82rem}.try-card small{margin-top:4px;color:#7c7f94;font-size:.68rem;line-height:1.4}.toast{position:fixed;right:22px;bottom:22px;z-index:100;padding:12px 16px;border-radius:12px;color:#fff;background:#242238;box-shadow:0 12px 30px #17182a3d;font-size:.78rem;font-weight:800;opacity:0;pointer-events:none;transform:translateY(10px);transition:.22s}.toast.show{opacity:1;transform:translateY(0)}#measureProbe{position:fixed;left:-10000px;top:-10000px;display:inline-block;width:max-content;white-space:pre;visibility:hidden}
@keyframes spacing-pop{0%{opacity:.5;transform:scale(.985)}60%{transform:scale(1.012)}100%{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.after-row.animate p{animation:none}}
@media(max-width:980px){.spacing-studio{grid-template-columns:1fr}.type-stage{min-height:480px}.sample-row p{font-size:clamp(38px,8vw,64px)}}@media(max-width:700px){.intro{padding:45px 0 25px}.spacing-studio{margin-bottom:52px;border-radius:22px}.preview-panel{padding:10px}.type-stage{min-height:430px;padding:58px 20px 66px}.sample-row p{font-size:clamp(34px,11vw,56px)}.metrics{grid-template-columns:1fr}.controls{padding:22px 17px}.control-grid{grid-template-columns:1fr}.feature-grid,.try-grid{grid-template-columns:1fr}.section{padding:50px 0}.try-heading{align-items:flex-start;flex-direction:column}.formula-box,.tip-box{flex-direction:column}.preset-row{grid-template-columns:repeat(2,1fr)}}@media(max-width:420px){.preview-toolbar>span{font-size:.6rem}.conversion-values{grid-template-columns:1fr}.type-stage{padding-inline:15px}.spacing-personality{left:15px;right:auto}.sample-row p{font-size:31px}}