*{box-sizing:border-box}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--background:#0d0d12;--background-alt:#14141f;--background-elevated:#202030d9;--border:#ffffff14;--primary:#58a6ff;--primary-hover:#4090f0;--text:#ffffffeb;--text-muted:#ffffffa6;--shadow-xl:0 40px 80px #0000008c;--shadow-sm:0 10px 25px #0003;--radius-lg:18px;--radius-md:12px;--radius-sm:8px;--transition:.2s ease;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{min-height:100vh;color:var(--text);background:var(--background);justify-content:center;align-items:center;margin:0;padding:clamp(32px,5vw,64px) clamp(16px,5vw,64px);display:flex;position:relative;overflow-x:hidden}.background-gradient{filter:blur();z-index:-2;background:radial-gradient(circle at 20% 20%,#58a6ff40,#0000 55%),radial-gradient(circle at 80% 0,#a855f740,#0000 60%),radial-gradient(circle at 50% 100%,#22c55e2e,#0000 65%);position:absolute;inset:0}.app-shell{backdrop-filter:blur(22px);gap:32px;width:min(960px,100%);display:grid}.app-header{text-align:center;gap:12px;display:grid}.app-header h1{letter-spacing:-.02em;margin:0;font-size:clamp(32px,5vw,48px);font-weight:700}.app-header p{max-width:620px;color:var(--text-muted);margin:0 auto;font-size:16px;line-height:1.6}.card{background:var(--background-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);gap:clamp(28px,4vw,40px);padding:clamp(24px,4vw,40px);display:grid}.ratio-card{position:relative;overflow:hidden}.ratio-card:before{content:"";pointer-events:none;background:linear-gradient(135deg,#58a6ff14,#a855f714);position:absolute;inset:0}.card-section{z-index:1;gap:24px;display:grid;position:relative}.field-group{gap:10px;display:grid}.field-group label{letter-spacing:.01em;color:var(--text);font-size:14px;font-weight:600}label.toggle{color:var(--text-muted);cursor:pointer;user-select:none;align-items:center;gap:12px;font-size:14px;font-weight:500;display:inline-flex}.toggle input{display:none}.toggle-indicator{width:46px;height:26px;transition:background var(--transition);border:1px solid var(--border);background:#ffffff1f;border-radius:999px;position:relative}.toggle-indicator:after{content:"";width:18px;height:18px;transition:transform var(--transition),background var(--transition);box-shadow:var(--shadow-sm);background:#fffc;border-radius:50%;position:absolute;top:50%;left:4px;transform:translateY(-50%)}.toggle input:checked+.toggle-indicator{background:#58a6ff40}.toggle input:checked+.toggle-indicator:after{background:var(--primary);transform:translate(18px,-50%)}.preset-row{grid-template-columns:1fr auto;gap:12px;display:grid}select,input[type=number]{appearance:none;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);transition:border var(--transition),box-shadow var(--transition),transform var(--transition);background:#ffffff0d;outline:none;width:100%;padding:14px 16px;font-size:15px}input[type=number]::-webkit-outer-spin-button{margin:0}input[type=number]::-webkit-inner-spin-button{margin:0}select:focus,input[type=number]:focus{border-color:#58a6ff80;box-shadow:0 0 0 1px #58a6ff0d}select:hover,input[type=number]:hover{transform:translateY(-1px)}.ghost-button,.primary-button{border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--transition),background var(--transition),color var(--transition),border var(--transition);color:var(--text-muted);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:12px 18px;font-size:14px;font-weight:600;display:inline-flex}.primary-button{color:#0f1626;background:linear-gradient(135deg,#58a6ffe6,#38bdf8e6);border-color:#58a6ff66;box-shadow:0 18px 30px #38bdf840}.primary-button:hover{background:linear-gradient(135deg,#58a6ff,#38bdf8);transform:translateY(-2px)}.ghost-button{border-color:var(--border);color:var(--text);background:#ffffff0a}.ghost-button:hover{color:var(--primary);border-color:#58a6ff66}.ghost-button:active,.primary-button:active{transform:translateY(0)}.ratio-inputs .ratio-inline{border:1px solid var(--border);border-radius:var(--radius-md);background:#ffffff08;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:10px 12px;display:grid}.ratio-separator{color:var(--text-muted);font-size:18px;font-weight:600}.ratio-inline input[type=number]{color:var(--text);text-align:center;background:0 0;border:none;padding:10px;font-size:18px;font-weight:600}.ratio-inline input[type=number]:focus{box-shadow:none}.dimensions-section{border-top:1px solid #ffffff0f;padding-top:32px}.field-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;display:grid}.input-with-meta{border:1px solid var(--border);border-radius:var(--radius-sm);background:#ffffff0a;grid-template-columns:1fr auto;align-items:center;display:grid;overflow:hidden}.input-with-meta input[type=number]{background:0 0;border:none;border-right:1px solid #ffffff0a;border-radius:0;padding:14px 16px}.input-with-meta input[type=number]:focus{box-shadow:none}.input-meta{letter-spacing:.08em;color:var(--text-muted);text-transform:uppercase;padding:0 16px;font-size:13px}.actions-row{flex-wrap:wrap;gap:12px;margin-top:12px;display:flex}.card-footer{z-index:1;border-radius:var(--radius-md);background:#ffffff08;border:1px solid #ffffff0a;padding:16px;position:relative}.card-footer p{color:var(--text-muted);margin:0;font-size:14px}@media (width<=640px){.preset-row{grid-template-columns:1fr}.actions-row{flex-direction:column}.primary-button,.ghost-button{width:100%}}.credit{color:var(--text-muted);text-align:center;margin-top:auto;font-size:1rem}.credit a{color:var(--accent);text-decoration:none}.credit a:hover{text-decoration:underline}