.aspect-ratio-page{min-height:100vh}.hero-container{padding-top:var(--spacing-3xl);padding-bottom:var(--spacing-xl);position:relative;z-index:1}.page-header{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.page-title{margin:0;text-align:center}.page-subtitle{margin:0;max-width:640px;text-align:center}.workspace-section{padding-bottom:var(--spacing-xl)}.workspace-grid{display:grid;grid-template-columns:1fr 360px;gap:var(--spacing-2xl);align-items:start}.calculator-card{display:flex;flex-direction:column;gap:var(--spacing-lg);position:sticky;top:calc(var(--header-height) + var(--spacing-lg))}.mode-toggle{display:flex;background:var(--theme-canvas-soft-2);border-radius:100px;padding:3px;border:1px solid var(--theme-hairline);width:100%}.mode-btn{flex:1;padding:10px 20px;border:none;border-radius:100px;background:transparent;color:var(--theme-body);font-family:var(--font-sans);font-size:14px;font-weight:500;cursor:pointer;transition:all .25s ease}.mode-btn.is-active{background:var(--theme-canvas);color:var(--theme-ink);box-shadow:var(--shadow-level-2)}.mode-btn:hover:not(.is-active){color:var(--theme-ink)}.mode-panel{display:flex;flex-direction:column;gap:var(--spacing-md);animation:fade-in .25s ease}.input-label{font-size:12px;font-weight:600;color:var(--theme-mute);text-transform:uppercase;letter-spacing:.5px}.input-wrap{position:relative;width:100%}.input-wrap .form-input{width:100%;height:48px;padding:0 var(--spacing-md);padding-right:40px;border:1px solid var(--theme-hairline);border-radius:var(--radius-md);background:var(--theme-canvas-soft);color:var(--theme-ink);font-family:var(--font-sans);font-size:18px;font-weight:500;outline:none;transition:border-color .15s ease,box-shadow .15s ease;-moz-appearance:textfield}.input-wrap .form-input::-webkit-outer-spin-button,.input-wrap .form-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-wrap .form-input:focus{border-color:var(--color-link);box-shadow:0 0 0 3px var(--color-link-bg-soft);background:var(--theme-canvas)}.input-unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:500;color:var(--theme-mute);pointer-events:none}.input-separator{display:flex;align-items:center;justify-content:center;color:var(--theme-mute);padding:2px 0}#ratio-panel{flex-direction:row;align-items:flex-end;gap:var(--spacing-sm)}#ratio-panel .input-group{flex:1;display:flex;flex-direction:column;gap:6px}#ratio-panel .input-separator{padding-bottom:14px}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.preset-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;border:1px solid var(--theme-hairline);border-radius:var(--radius-md);background:var(--theme-canvas-soft);color:var(--theme-body);font-family:var(--font-sans);cursor:pointer;transition:all .2s ease}.preset-btn:hover{border-color:var(--theme-hairline-strong);background:var(--theme-canvas);color:var(--theme-ink)}.preset-btn.is-active{border-color:var(--color-link);background:var(--color-link-bg-soft);color:var(--color-link)}.preset-value{font-size:14px;font-weight:600;line-height:18px}.preset-label{font-size:10px;font-weight:400;opacity:.7;line-height:14px}.custom-ratio-row{display:flex;align-items:center;gap:8px}.custom-ratio-row .input-wrap{flex:1}.custom-ratio-row .form-input{height:40px;font-size:15px;padding-right:var(--spacing-sm)}.ratio-colon{font-size:20px;font-weight:600;color:var(--theme-mute);flex-shrink:0}.apply-btn{flex-shrink:0;height:40px;padding:0 16px}.known-dim-row{display:flex;align-items:center;gap:8px}.known-dim-row .input-wrap{flex:1}.dim-toggle{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border:1px solid var(--theme-hairline);border-radius:var(--radius-md);background:var(--theme-canvas-soft);color:var(--theme-body);font-family:var(--font-sans);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;height:48px;flex-shrink:0}.dim-toggle:hover{border-color:var(--theme-hairline-strong);background:var(--theme-canvas);color:var(--theme-ink)}.dim-toggle-label{min-width:44px;text-align:left}.results-card{margin-top:var(--spacing-sm);padding:var(--spacing-lg);background:linear-gradient(135deg,var(--theme-canvas-soft-2),var(--theme-canvas-soft));border-radius:var(--radius-lg);border:1px solid var(--theme-hairline)}.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.copy-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border:1px solid var(--theme-hairline);border-radius:var(--radius-pill-sm, 64px);background:var(--theme-canvas);color:var(--theme-body);font-family:var(--font-sans);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.copy-btn:hover{border-color:var(--theme-hairline-strong);color:var(--theme-ink)}.copy-btn.is-copied{border-color:var(--color-success);color:var(--color-success)}.results-display{display:flex;flex-direction:column;gap:var(--spacing-md)}.result-primary{text-align:center}.result-ratio{font-size:36px;font-weight:700;letter-spacing:-1.44px;color:var(--theme-ink)}.result-secondary{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm)}.result-item{display:flex;flex-direction:column;gap:2px;padding:var(--spacing-sm);background:var(--theme-canvas);border-radius:var(--radius-sm);border:1px solid var(--theme-hairline)}.result-item-label{font-size:11px;font-weight:500;color:var(--theme-mute);text-transform:uppercase;letter-spacing:.3px}.result-item-value{font-size:16px;font-weight:600;color:var(--theme-ink);font-family:var(--font-mono)}.preview-card{display:flex;flex-direction:column;gap:var(--spacing-md);text-align:center}.preview-header{text-align:left}.preview-container{display:flex;align-items:center;justify-content:center;min-height:340px;background-color:var(--theme-canvas-soft-2);background-image:radial-gradient(rgba(0,112,243,.08) 1.2px,transparent 1.2px);background-size:16px 16px;border-radius:var(--radius-md);border:1px solid var(--theme-hairline);padding:var(--spacing-lg);position:relative;overflow:hidden}[data-theme=dark] .preview-container{background-image:radial-gradient(rgba(0,112,243,.15) 1.2px,transparent 1.2px)}.preview-box{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.preview-box-inner{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0070f308,#7928ca08);border:1.5px dashed rgba(0,112,243,.4);border-radius:var(--radius-lg);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;box-shadow:none}[data-theme=dark] .preview-box-inner{background:linear-gradient(135deg,#0070f30f,#7928ca0f);border-color:#0070f380}.preview-dimensions{display:flex;align-items:center;gap:8px;color:var(--color-link);font-family:var(--font-sans);font-size:16px;font-weight:500;pointer-events:none}.preview-dimensions i{opacity:.6}.dimension-line-h{position:absolute;bottom:calc(100% + 20px);left:0;width:100%;height:1px;background:#0070f366}.dimension-line-h:before,.dimension-line-h:after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--color-link)}.dimension-line-h:before{left:0}.dimension-line-h:after{right:0}.dimension-line-h .line-label{position:absolute;left:50%;transform:translate(-50%,-50%);background:var(--theme-canvas-soft-2);padding-inline:8px;font-family:var(--font-mono);font-size:11px;color:var(--color-link);font-weight:500;white-space:nowrap}.dimension-line-v{position:absolute;right:calc(100% + 20px);top:0;height:100%;width:1px;background:#0070f366}.dimension-line-v:before,.dimension-line-v:after{content:"";position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;background:var(--color-link)}.dimension-line-v:before{top:0}.dimension-line-v:after{bottom:0}.dimension-line-v .line-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);background:var(--theme-canvas-soft-2);padding-inline:8px;font-family:var(--font-mono);font-size:11px;color:var(--color-link);font-weight:500;white-space:nowrap}.preview-badge{position:absolute;bottom:var(--spacing-md);left:50%;transform:translate(-50%);background:var(--theme-canvas);border:1px solid var(--theme-hairline);padding:var(--spacing-xxs) var(--spacing-md);border-radius:var(--radius-pill);box-shadow:var(--shadow-level-2);display:inline-flex;align-items:center;justify-content:center;pointer-events:none;z-index:10}.preview-badge span{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--theme-body)}.article-section{background:var(--theme-canvas);border-top:1px solid var(--theme-hairline);padding-block:var(--spacing-3xl)}.article-inner{max-width:800px}.article-main-title{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.article-lead{font-weight:400}.prose h3{margin-top:var(--spacing-2xl);margin-bottom:var(--spacing-sm)}.guide-list{display:flex;flex-direction:column;gap:var(--spacing-sm);padding-left:20px}.guide-list li strong{color:var(--theme-ink)}.inline-code{background:var(--theme-canvas-soft-2);padding:2px 6px;border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:13px;color:var(--theme-ink)}.ratio-table{display:flex;flex-direction:column;border:1px solid var(--theme-hairline);border-radius:var(--radius-md);overflow:hidden;margin:var(--spacing-lg) 0;font-size:14px}.ratio-table-header{display:grid;grid-template-columns:80px 80px 1fr 120px;gap:var(--spacing-sm);padding:10px var(--spacing-md);background:var(--theme-canvas-soft-2);font-weight:600;color:var(--theme-body);border-bottom:1px solid var(--theme-hairline)}.ratio-table-row{display:grid;grid-template-columns:80px 80px 1fr 120px;gap:var(--spacing-sm);padding:10px var(--spacing-md);background:var(--theme-canvas);color:var(--theme-body)}.ratio-table-row:not(:last-child){border-bottom:1px solid var(--theme-hairline)}.ratio-table-row span:first-child{font-weight:600;color:var(--theme-ink)}.quick-ref-section{padding-block:var(--spacing-xl)}.quick-ref-inner{max-width:800px;margin:0 auto}.quick-ref-title{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-md)}.faq-mini-list{display:flex;flex-direction:column;margin-top:var(--spacing-lg)}.faq-mini-item{border-bottom:1px solid var(--theme-hairline);overflow:hidden}.faq-mini-q{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) 0;cursor:pointer;font-size:15px;font-weight:500;line-height:22px;color:var(--theme-ink);list-style:none;user-select:none;transition:color .15s ease}.faq-mini-q::-webkit-details-marker{display:none}.faq-mini-q:hover{color:var(--color-link)}.faq-chevron{flex-shrink:0;transition:transform .25s ease;color:var(--theme-mute)}.faq-mini-item[open] .faq-chevron{transform:rotate(180deg)}.faq-mini-a{padding-bottom:var(--spacing-md);animation:fade-in .3s ease}.hidden{display:none!important}@media(max-width:960px){.workspace-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}.calculator-card{position:static}.preview-container{min-height:240px}}@media(max-width:600px){.result-ratio{font-size:28px}#ratio-panel{flex-direction:column;align-items:stretch;gap:var(--spacing-sm)}#ratio-panel .input-separator{padding:0;transform:rotate(90deg)}.preset-grid{grid-template-columns:1fr 1fr}.preset-btn{padding:8px 6px}.known-dim-row{flex-direction:column;align-items:stretch;gap:var(--spacing-sm)}.dim-toggle{width:100%;justify-content:center}.custom-ratio-row{flex-wrap:wrap}.preview-dimensions{font-size:12px}}