body{display:flex;min-height:100vh;flex-direction:column}main{flex:1}.weight-hero{padding:54px 0 78px}.crumbs{margin-bottom:25px;color:var(--muted);font-size:.82rem}.crumbs a{color:var(--primary);font-weight:750}.hero-copy{max-width:850px;margin:0 auto 34px;text-align:center}.hero-copy h1{margin:18px auto 14px;font-size:clamp(2.65rem,6.6vw,4.8rem)}.weight-studio{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(370px,.75fr);max-width:1180px;margin:auto;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-topbar{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:0 4px 12px;color:#67657a;font-size:.7rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase}.preview-topbar>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}.preview-topbar>div{display:flex;gap:6px}.preview-topbar button{min-height:34px;padding:0 10px;border:1px solid #d9d6e3;border-radius:9px;color:#59566d;background:#fff;font-size:.65rem;font-weight:850}.preview-topbar button:hover{color:var(--primary);border-color:#bcb4ee}.preview-topbar button[aria-pressed=true]{color:#fff;border-color:var(--primary);background:var(--primary)}.play-icon{display:inline-block;margin-right:4px;font-size:.58rem}.preview-topbar button[aria-pressed=true] .play-icon{animation:pulse-play .7s ease-in-out infinite alternate}.specimen{--specimen-bg:#f7f8ff;--specimen-color:#17182a;position:relative;display:grid;place-items:center;min-height:520px;padding:105px 56px 88px;border:1px solid #17182a12;border-radius:22px;color:var(--specimen-color);background-color:var(--specimen-bg);background-image:linear-gradient(#17182a08 1px,transparent 1px),linear-gradient(90deg,#17182a08 1px,transparent 1px);background-size:32px 32px;overflow:hidden;transition:background-color .2s,color .2s}.specimen:before{content:"";position:absolute;width:340px;height:340px;left:-210px;top:-160px;border:80px solid currentColor;border-radius:50%;opacity:.025}.specimen-index,.font-credit{position:absolute;color:color-mix(in srgb,var(--specimen-color) 54%,transparent);font-size:.62rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.specimen-index{top:22px;left:22px}.font-credit{right:22px;bottom:20px}.weight-badge{position:absolute;top:22px;right:22px;display:grid;grid-template-columns:auto auto;align-items:center;gap:0 8px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--specimen-color) 12%,transparent);border-radius:12px;background:color-mix(in srgb,var(--specimen-bg) 84%,transparent);box-shadow:0 8px 24px #17182a0c;backdrop-filter:blur(9px)}.weight-badge span{grid-column:1/-1;color:color-mix(in srgb,var(--specimen-color) 56%,transparent);font-size:.5rem;font-weight:900;letter-spacing:.13em}.weight-badge strong{font-size:1.4rem;letter-spacing:-.04em}.weight-badge small{color:color-mix(in srgb,var(--specimen-color) 65%,transparent);font-size:.62rem;font-weight:750}.preview-text{position:relative;z-index:2;width:100%;margin:0;font-family:Inter,sans-serif;font-size:78px;font-weight:500;line-height:1.05;letter-spacing:-2px;text-align:center;overflow-wrap:anywhere;white-space:pre-wrap;font-variation-settings:"wght" 500}.preview-text.pop{animation:type-pop .5s cubic-bezier(.2,.8,.2,1)}.specimen-scale{position:absolute;left:28px;bottom:22px;display:flex;align-items:center;gap:8px;color:color-mix(in srgb,var(--specimen-color) 50%,transparent);font-size:.52rem;font-weight:850}.specimen-scale i{width:70px;height:4px;border-radius:99px;background:linear-gradient(90deg,currentColor 10%,currentColor 10% 20%,transparent 20% 25%,currentColor 25% 45%,transparent 45% 50%,currentColor 50% 100%);opacity:.35}.weight-presets{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-top:12px}.weight-chip{min-width:0;min-height:51px;padding:6px 2px;border:1px solid #d9d7e2;border-radius:10px;color:#716e82;background:#fff;font-size:.63rem;transition:.16s}.weight-chip span,.weight-chip small{display:block}.weight-chip span{font-weight:900}.weight-chip small{margin-top:4px;color:#aaa6b6;font-size:.48rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.weight-chip:hover,.weight-chip.active{color:var(--primary);border-color:#9f94eb;background:#f8f7ff;transform:translateY(-2px);box-shadow:0 7px 18px #37326d12}.control-panel{padding:26px 24px;background:#fff}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:22px}.panel-heading h2{margin:3px 0 0;font-size:1.35rem;letter-spacing:-.03em}.panel-kicker,.field-label,.select-field>span{color:#858298;font-size:.67rem;font-weight:900;letter-spacing:.1em}.reset-button{min-height:37px;padding:0 11px;border:1px solid #dedbe9;border-radius:10px;color:#777388;background:#fff;font-size:.7rem;font-weight:800}.reset-button:hover{color:var(--primary);background:#f6f4ff}.field-label{display:block;margin-bottom:7px}.text-field{position:relative;border:1px solid #dcd9e6;border-radius:12px;background:#fbfaff;transition:.2s}.text-field:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px #6c5ce712}.text-field textarea{display:block;width:100%;min-height:70px;padding:12px 48px 12px 13px;border:0;outline:0;background:transparent;font-weight:700;resize:vertical}.text-field span{position:absolute;right:10px;bottom:9px;color:#9895a8;font-size:.61rem;font-weight:750}.select-field{display:grid;gap:7px;margin-top:14px}.select-field select{width:100%;min-height:43px;padding:0 11px;border:1px solid #dcd9e6;border-radius:11px;color:#343245;background:#fff;outline:0}.select-field select:focus{border-color:var(--primary);box-shadow:0 0 0 4px #6c5ce712}.sliders{display:grid;gap:14px;margin-top:20px}.range-field{display:grid;gap:7px}.range-field>span{display:flex;align-items:center;justify-content:space-between;color:#4c495d;font-size:.75rem}.range-field output{color:var(--primary);font-size:.69rem;font-weight:850}.range-field input{width:100%;height:5px;accent-color:var(--primary)}.weight-range{padding:13px;border:1px solid #dedbe9;border-radius:13px;background:#f9f8ff}.range-ends{color:#9b97aa!important;font-size:.55rem!important}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:19px}.color-field{display:grid;gap:6px;color:#777487;font-size:.69rem;font-weight:850}.color-control{display:flex;align-items:center;gap:7px;min-width:0;padding:6px;border:1px solid #dcd9e6;border-radius:11px;background:#fff}.color-control input{flex:0 0 29px;width:29px;height:29px;padding:0;border:0;border-radius:8px;background:none}.color-control output{min-width:0;color:#4b485d;font:700 .63rem ui-monospace,Consolas,monospace;overflow:hidden;text-overflow:ellipsis}.code-card{margin-top:19px;border-radius:14px;background:#151321;box-shadow:0 13px 28px #17152724;overflow:hidden}.code-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #ffffff0d;color:#b8b4c9;font-size:.62rem;font-weight:850;letter-spacing:.06em}.code-head span{display:flex;align-items:center;gap:7px}.code-head i{width:7px;height:7px;border-radius:50%;background:#00c2a8;box-shadow:0 0 8px #00c2a8}.code-head button{min-height:32px;padding:0 10px;border:0;border-radius:8px;color:#fff;background:#6c5ce7;font-size:.66rem;font-weight:850}.code-card pre{max-height:160px;margin:0;padding:14px;overflow:auto}.code-card code{color:#d0cce1;font:500 .68rem/1.65 ui-monospace,Consolas,monospace;white-space:pre-wrap;word-break:break-word}.comparison-section,.content-section{padding:70px 0}.comparison-section,.content-soft{border-block:1px solid #1f223e0f;background:#ffffff6b}.comparison-wrap,.content{max-width:930px;margin:auto}.comparison-head,.try-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.comparison-head>div{max-width:660px}.section-label{display:block;margin-bottom:9px;color:var(--primary);font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.comparison-head h2,.content h2,.try-head h2{margin:0 0 11px;font-size:clamp(1.75rem,4vw,2.5rem);letter-spacing:-.04em}.comparison-head p,.content>p,.feature-card p,.faq p,.tip-box p,.try-head p{margin:0;color:var(--muted);line-height:1.75}.compare-note{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:8px 11px;border:1px solid #00c2a82a;border-radius:99px;color:#087b6c;background:#fff;font-size:.68rem;font-weight:850}.compare-note i{width:7px;height:7px;border-radius:50%;background:#00c2a8;box-shadow:0 0 0 4px #00c2a814}.weight-list{margin-top:30px;border:1px solid var(--border);border-radius:22px;background:#fff;box-shadow:0 18px 48px #35316e0a;overflow:hidden}.weight-row{display:grid;grid-template-columns:82px 130px 1fr;align-items:center;gap:18px;min-height:76px;padding:11px 22px;border-bottom:1px solid #1f223e0b;transition:.18s}.weight-row:last-child{border-bottom:0}.weight-row.active{background:linear-gradient(90deg,#6c5ce70d,transparent)}.weight-row.active .row-number{color:#fff;background:var(--primary);box-shadow:0 7px 17px #6c5ce72c}.row-number{display:grid;place-items:center;width:48px;height:34px;border-radius:9px;color:var(--primary);background:#f0eeff;font:850 .73rem ui-monospace,Consolas,monospace}.row-name{color:#777388;font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}.row-sample{min-width:0;margin:0;color:#17182a;font-family:Inter,sans-serif;font-size:clamp(1.2rem,3vw,1.65rem);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:27px}.feature-card{padding:23px;border:1px solid var(--border);border-radius:19px;background:#fff}.feature-card>span{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#302a73,#6c5ce7);font-size:.7rem;font-weight:900;box-shadow:0 8px 18px #6c5ce733}.feature-card h3{margin:15px 0 7px;font-size:1rem}.feature-card p{font-size:.87rem}.prose-content h2:not(:first-of-type){margin-top:42px}.prose-content code{padding:2px 6px;border-radius:6px;color:#5142c7;background:#eeebff;font:700 .88em ui-monospace,Consolas,monospace}.weight-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:25px 0 34px}.weight-guide span{padding:13px;border:1px solid var(--border);border-radius:12px;color:#777388;background:#fff;font-size:.78rem}.weight-guide b{display:inline-block;width:38px;color:var(--primary)}.tip-box{display:flex;gap:16px;margin:30px 0;padding:21px;border:1px solid #6c5ce72b;border-radius:18px;background:#f5f3ff}.tip-mark{display:grid;place-items:center;flex:0 0 45px;height:45px;border-radius:13px;color:#fff;background:var(--primary);font-size:.68rem;font-weight:900}.tip-box h3{margin:1px 0 5px}.tip-box p{font-size:.88rem}.faq{display:grid;gap:11px;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{padding:0 19px 18px}.try-section{padding:70px 0}.try-head p{margin-top:0}.secondary-action{flex:0 0 auto;color:var(--primary);font-size:.82rem;font-weight:800}.try-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:26px}.try-card{display:flex;align-items:center;gap:12px;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:.63rem;font-weight:900}.try-card>span:nth-child(2){min-width:0;flex:1}.try-card strong,.try-card span span{display:block}.try-card span span{margin-top:3px;color:var(--muted);font-size:.75rem}.try-card>b{color:#b1adbf}.toast{position:fixed;left:50%;bottom:28px;z-index:90;padding:12px 18px;border-radius:13px;color:#fff;background:#282640;font-size:.8rem;font-weight:800;opacity:0;transform:translate(-50%,14px);transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.spark{position:absolute;z-index:20;width:10px;height:10px;border:2px solid var(--spark);border-radius:3px;pointer-events:none;animation:spark-pop .85s ease-out forwards}.celebration{position:absolute;inset:0;pointer-events:none;overflow:hidden}
@keyframes pulse-play{to{transform:scale(1.3)}}@keyframes type-pop{0%{transform:scale(1)}45%{transform:scale(.96)}75%{transform:scale(1.015)}100%{transform:scale(1)}}@keyframes spark-pop{to{opacity:0;transform:translate(var(--x),var(--y)) rotate(180deg) scale(.2)}}@media(prefers-reduced-motion:reduce){.preview-text,.play-icon,.spark{animation:none!important}.weight-chip,.try-card{transition:none}}
@media(max-width:980px){.weight-studio{grid-template-columns:1fr}.specimen{min-height:450px}.control-panel{padding:25px}.comparison-wrap,.content{width:min(calc(100% - 32px),930px)}}
@media(max-width:680px){.weight-hero{padding:40px 0 55px}.hero-copy h1{font-size:clamp(2.5rem,14vw,4rem)}.preview-panel{padding:10px}.preview-topbar{align-items:flex-start;gap:8px}.preview-topbar>div{flex-direction:column}.preview-topbar button{min-height:31px}.specimen{min-height:390px;padding:95px 20px 78px}.weight-badge{top:18px;right:16px}.specimen-index{top:20px;left:16px}.font-credit{right:15px;bottom:17px}.specimen-scale{left:16px;bottom:18px}.specimen-scale i{width:42px}.weight-presets{grid-template-columns:repeat(3,1fr)}.weight-chip{min-height:45px}.control-panel{padding:22px 15px}.color-grid,.feature-grid,.try-grid,.weight-guide{grid-template-columns:1fr}.comparison-section,.content-section,.try-section{padding:54px 0}.comparison-head,.try-head{align-items:flex-start;flex-direction:column}.weight-row{grid-template-columns:56px 1fr;gap:8px 12px;padding:12px 15px}.row-name{grid-column:2}.row-sample{grid-column:1/-1;font-size:1.2rem}.tip-box{align-items:flex-start}.footer-inner{align-items:flex-start}}