:root{--ar-ink:#142033;--ar-blue:#1768e5;--ar-line:#dfe5ed;--ar-soft:#f4f6f9;--ar-mint:#137a52}
.ratio-tool{color:var(--ar-ink);background:var(--ar-soft)}
.ratio-hero{padding:28px 0 22px;color:var(--ar-ink);border-bottom:1px solid var(--ar-line);background:#fff}
.ratio-hero-grid{grid-template-columns:minmax(0,1fr) minmax(300px,.62fr);gap:36px}
.ratio-kicker{margin:0 0 7px;color:#2861ad;font-size:.68rem;letter-spacing:.11em}
.ratio-hero h1{max-width:730px;font-size:clamp(2rem,4vw,3.2rem);line-height:1.02;letter-spacing:-.05em}
.ratio-hero p:not(.ratio-kicker){margin-top:10px;color:#5f6f86;font-size:.94rem;line-height:1.55}
.ratio-promise{gap:8px 14px;margin-top:16px;padding-top:12px;border-top:1px solid #edf0f4}
.ratio-promise li{display:flex;align-items:center;gap:5px;padding:0;border:0;background:none;color:#5d6c82;font-size:.7rem}
.ratio-promise li:before{content:"✓";color:var(--ar-mint);font-weight:900}
.ratio-hero-visual{min-height:180px;padding:16px;border:1px solid var(--ar-line);border-radius:16px;background:#f8fafd;overflow:hidden}
.ratio-frame{border-color:#a8bfdf;box-shadow:0 12px 30px #173a7018}
.ratio-frame span{bottom:8px;left:8px;padding:4px 6px;font-size:.6rem}
.ratio-frame-wide{top:22px;right:14px;width:67%;border-radius:12px}
.ratio-frame-tall{bottom:16px;left:12%;width:23%;border-radius:10px}
.ratio-example-label{position:absolute;z-index:5;top:10px;left:12px;padding:4px 6px;border-radius:5px;background:#fff;color:#2861ad;font-size:.62rem;font-weight:900;letter-spacing:.09em}
.ratio-example-result{position:absolute;z-index:5;right:9px;bottom:8px;padding:5px 7px;border-radius:6px;background:rgba(255,255,255,.94);color:#34465f;font-size:.68rem;box-shadow:0 3px 12px #173a7020}
.ratio-workspace{gap:18px;padding:18px 0 56px}
.ratio-controls,.ratio-preview-card{border-radius:16px;box-shadow:none}
.ratio-controls{position:sticky;top:76px}
.ratio-preview-head .ratio-kicker{margin-bottom:4px}.ratio-preview-head p{margin:4px 0 0;color:#5f6f86;font-size:.78rem}
.ratio-info{padding:34px 0}
@media(max-width:880px){.ratio-hero-grid{grid-template-columns:1fr}.ratio-hero-visual{min-height:170px}.ratio-controls{position:static}}
@media(max-width:540px){.ratio-hero{padding:20px 0 16px}.ratio-hero h1{font-size:2rem}.ratio-hero-visual{min-height:150px}.ratio-example-result{max-width:150px;text-align:right}.ratio-workspace{padding-top:12px}.ratio-info{padding:24px 0}}
.ratio-output button,.ratio-select select{min-height:44px}.ratio-file button{min-width:44px;min-height:44px}