.app{max-width:1200px;margin:0 auto;padding:48px 32px 64px;display:flex;flex-direction:column;gap:32px}.app__header h1{font-size:clamp(28px,3.4vw,40px);margin:0 0 8px;letter-spacing:-.02em;font-weight:600}.app__header p{margin:0;color:var(--ink-soft);font-size:15px}.controls{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;padding:20px 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.controls__group{display:flex;flex-direction:column;gap:10px}.controls__label{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);font-weight:600}.format-buttons{display:flex;gap:12px;flex-wrap:wrap}.color-buttons{display:flex;gap:10px;flex-wrap:wrap}.format-button{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;min-width:76px;padding:10px 12px 12px;background:var(--bg);border:1px solid var(--border);border-radius:10px;cursor:pointer;color:var(--ink);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease,background .15s ease}.format-button:hover{border-color:var(--ink-soft);transform:translateY(-1px)}.format-button--active{border-color:var(--ink);background:#fff;box-shadow:0 8px 18px -12px #28292666}.format-button__ratio{font-size:13px;font-weight:600;letter-spacing:.02em}.format-button__thumb{width:36px;background:var(--ink);border-radius:4px;opacity:.85}.color-button{display:flex;align-items:center;gap:9px;min-width:76px;padding:9px 11px;background:var(--bg);border:1px solid var(--border);border-radius:10px;cursor:pointer;color:var(--ink);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease,background .15s ease}.color-button:hover{border-color:var(--ink-soft);transform:translateY(-1px)}.color-button--active{border-color:var(--ink);background:#fff;box-shadow:0 8px 18px -12px #28292666}.color-button__number{font-size:13px;font-weight:700}.color-button__swatches{position:relative;width:34px;height:22px;border-radius:5px;overflow:hidden;border:1px solid rgba(42,41,38,.14)}.color-button__swatch{position:absolute;top:0;right:0;bottom:0;left:0}.color-button__swatch--track{left:45%;width:55%}.controls__actions{display:flex;gap:10px;flex-wrap:wrap}.action{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:var(--bg);color:var(--ink);padding:10px 18px;font-size:14px;font-weight:500;border-radius:999px;cursor:pointer;transition:border-color .15s ease,transform .15s ease,background .15s ease}.action:hover{border-color:var(--ink-soft);transform:translateY(-1px)}.action--primary{background:var(--ink);color:var(--surface);border-color:var(--ink)}.action--primary:hover{background:#1c1b19;border-color:#1c1b19}.preview{display:flex;justify-content:center}.preview__frame{--max-w: min(960px, 92vw);--max-h: 64vh;position:relative;width:min(var(--max-w),calc(var(--max-h) * var(--ar)));height:min(var(--max-h),calc(var(--max-w) / var(--ar)));background:#f4f1ea;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border)}.preview__svg{display:block;width:100%;height:100%}.app__footer{display:flex;justify-content:center;font-size:13px;color:var(--ink-soft);letter-spacing:.02em}@media (max-width: 640px){.app{padding:32px 18px 48px;gap:24px}.controls{padding:16px;flex-direction:column;align-items:stretch}.controls__actions{justify-content:stretch}.action{flex:1 1 auto;text-align:center}}:root{--bg: #ece8df;--surface: #f8f5ee;--ink: #2a2926;--ink-soft: #5b574f;--accent: #2a2926;--border: #d8d2c4;--radius: 14px;--shadow: 0 24px 60px -28px rgba(40, 36, 28, .25);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;min-height:100vh;background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit}