*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f5f5f5;color:#111;min-height:100vh;display:flex;justify-content:center;padding-top:4rem}#app{width:100%}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:.4}main.svelte-1n46o8q{max-width:580px;margin:0 auto;padding:2.5rem 1.5rem}h1.svelte-1n46o8q{font-size:1.6rem;font-weight:700;margin:0 0 2rem;color:#111}.ratio-picker.svelte-1n46o8q{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.ratio-picker.svelte-1n46o8q button:where(.svelte-1n46o8q){padding:.4rem .9rem;border:1.5px solid #ddd;border-radius:999px;background:#fff;color:#444;font-size:.9rem;cursor:pointer;transition:border-color .15s,background .15s,color .15s}.ratio-picker.svelte-1n46o8q button:where(.svelte-1n46o8q):hover{border-color:#888;color:#111}.ratio-picker.svelte-1n46o8q button.active:where(.svelte-1n46o8q){background:#111;border-color:#111;color:#fff}.custom-ratio.svelte-1n46o8q{display:flex;align-items:center;gap:.6rem;margin-bottom:1.5rem}.custom-ratio.svelte-1n46o8q input:where(.svelte-1n46o8q){width:90px;padding:.55rem .75rem;border:1.5px solid #ddd;border-radius:8px;font-size:1rem;text-align:center}.colon.svelte-1n46o8q{font-size:1.4rem;font-weight:600;color:#888}.calculator.svelte-1n46o8q{display:flex;align-items:flex-end;gap:1rem;margin-bottom:1.25rem}.calculator.svelte-1n46o8q label:where(.svelte-1n46o8q){display:flex;flex-direction:column;gap:.4rem;flex:1}.calculator.svelte-1n46o8q label:where(.svelte-1n46o8q) span:where(.svelte-1n46o8q){font-size:.8rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.05em}.input-row.svelte-1n46o8q{display:flex;align-items:center;border:1.5px solid #ddd;border-radius:8px;overflow:hidden;transition:border-color .15s}.input-row.svelte-1n46o8q:focus-within{border-color:#111}.input-row.svelte-1n46o8q input:where(.svelte-1n46o8q){flex:1;padding:.65rem .75rem;border:none;outline:none;font-size:1.1rem;width:100%;min-width:0}.input-row.svelte-1n46o8q .unit:where(.svelte-1n46o8q){padding:0 .75rem;color:#999;font-size:.85rem;background:#f7f7f7;height:100%;display:flex;align-items:center;border-left:1.5px solid #eee}.times.svelte-1n46o8q{font-size:1.3rem;color:#bbb;padding-bottom:.6rem;flex-shrink:0}.ratio-display.svelte-1n46o8q{font-size:.9rem;color:#999;margin:0}.visualizer.svelte-1n46o8q{margin-top:2rem}.viz-frame.svelte-1n46o8q{position:relative;width:100%;aspect-ratio:16 / 9;background:#f0f0f0;border:2px dashed #ccc;border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden}.viz-ref-label.svelte-1n46o8q{position:absolute;top:8px;left:10px;font-size:.72rem;font-weight:600;color:#aaa;letter-spacing:.04em;pointer-events:none}.viz-box.svelte-1n46o8q{background:#3b82f62e;border:2px solid rgba(59,130,246,.7);border-radius:3px;display:flex;align-items:center;justify-content:center;transition:width .25s ease,height .25s ease}.viz-box.is-same.svelte-1n46o8q{background:#22c55e2e;border-color:#22c55eb3}.viz-box-label.svelte-1n46o8q{font-size:.8rem;font-weight:600;color:#3b82f6e6;white-space:nowrap}.viz-box.is-same.svelte-1n46o8q .viz-box-label:where(.svelte-1n46o8q){color:#16a34ae6}.viz-caption.svelte-1n46o8q{margin:.6rem 0 0;font-size:.85rem;color:#888}