:root{color-scheme:light;--bg: #fff;--surface: #fff;--surface-soft: #f6f7f3;--surface-hover: #eef3ed;--border: #d9dfd6;--text: #232d27;--text-muted: #626d65;--accent: #175c46;--accent-hover: #0c4734;--accent-soft: #eaf2e8;--button-text: #fff;--danger: #a12c25;--danger-bg: #fff2ef;--checker: #e5e9e2;--radius: 16px;--radius-sm: 8px}:root[data-theme=dark]{color-scheme:dark;--bg: #161d19;--surface: #1c2520;--surface-soft: #202b24;--surface-hover: #2c3b30;--border: #3b4b40;--text: #edf1e9;--text-muted: #b0bcb2;--accent: #bce7c7;--accent-hover: #d5f2dc;--accent-soft: #2a3e30;--button-text: #173524;--danger: #ffb4a7;--danger-bg: #392622;--checker: #2b3830}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{min-height:100%}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a,input,.dropzone{-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{cursor:pointer}button:disabled,input:disabled{cursor:not-allowed}a{color:inherit}.app{min-height:100vh;max-width:1160px;padding:30px 36px 24px;margin:0 auto;display:flex;flex-direction:column}.app__header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:24px;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:17px;font-weight:650;line-height:1.15;letter-spacing:-.5px}.brand__second{display:block;font-weight:450;color:var(--text-muted)}.theme-toggle{display:inline-flex;align-items:center;gap:8px;color:var(--text-muted);border:1px solid var(--border);border-radius:30px;padding:9px 14px;background:var(--surface);font-size:12px}.theme-toggle:hover{background:var(--surface-hover);color:var(--text)}main{flex:1}.intro{padding:54px 0 38px}.eyebrow{color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.04em;margin-bottom:12px}.intro h1{font-family:Georgia,Times New Roman,serif;font-size:clamp(42px,6vw,66px);line-height:1.12;font-weight:400;letter-spacing:-2.6px;margin-bottom:17px}.intro>p:last-child{color:var(--text-muted);font-size:16px;line-height:1.7}.app__main{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}.panel{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}.panel__title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;margin-bottom:22px}.panel__title>span{color:var(--text-muted);font-size:11px;font-weight:400;font-variant-numeric:tabular-nums}.panel__title small{margin-left:auto;color:var(--text-muted);font-size:10px;font-weight:400;letter-spacing:.06em;text-transform:uppercase}.dropzone{border:1px dashed var(--border);border-radius:var(--radius-sm);background:var(--surface-soft);padding:26px 20px;text-align:center;cursor:pointer}.dropzone:hover,.dropzone--active{border-color:var(--accent);background:var(--accent-soft)}.dropzone--disabled{cursor:not-allowed}.dropzone__icon{color:var(--accent);margin-bottom:8px}.dropzone__text{font-size:15px;font-weight:500}.dropzone__browse{display:inline-flex;align-items:center;gap:26px;background:var(--accent);color:var(--button-text);padding:10px 17px;border-radius:6px;margin-top:14px;font-size:13px;font-weight:600}.dropzone__hint{margin-top:12px;font-size:11px;color:var(--text-muted)}.resolution,.bg-picker{border:none;margin-top:24px;min-width:0}.resolution__legend,.bg-picker__legend{font-size:12px;font-weight:600;margin-bottom:10px}.resolution__options{display:flex;gap:8px}.resolution__option{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:10px 5px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;position:relative}.resolution__option:hover{background:var(--surface-hover)}.resolution__option--selected{border-color:var(--accent);background:var(--accent-soft)}.resolution__option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}.resolution__option input{position:absolute;opacity:0}.resolution__label{font-size:15px;font-weight:600}.resolution__desc{font-size:10px;color:var(--text-muted);text-align:center}fieldset:disabled{opacity:.6}.bg-picker__checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px}.bg-picker__checkbox input{accent-color:var(--accent);width:16px;height:16px}.bg-picker__hint{font-size:11px;color:var(--text-muted);margin:6px 0 0 24px}.bg-picker__controls{margin-top:12px}.bg-picker__presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.bg-picker__preset{padding:5px 12px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-size:12px}.bg-picker__preset:hover{background:var(--surface-hover);border-color:var(--accent)}.bg-picker__custom{display:flex;align-items:center;gap:8px}.bg-picker__custom label{font-size:12px;color:var(--text-muted)}.bg-picker__custom input[type=text]{flex:1;min-width:0;width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:12px}.bg-picker__swatch{flex:none;width:32px;height:32px;padding:0;border:1px solid var(--border);border-radius:6px;background:var(--bg);cursor:pointer}.bg-picker__swatch::-webkit-color-swatch-wrapper{padding:2px}.bg-picker__swatch::-webkit-color-swatch{border:none;border-radius:4px}.bg-picker__swatch::-moz-color-swatch{border:none;border-radius:4px}.alert{margin-top:16px;padding:12px;background:var(--danger-bg);border:1px solid var(--danger);border-radius:var(--radius-sm);color:var(--danger);font-size:13px;overflow-wrap:anywhere}.loading{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13px;color:var(--text-muted)}.loading__spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.panel--result{display:flex;flex-direction:column}.placeholder,.result__preview{background-color:var(--surface-soft);background-image:conic-gradient(var(--checker) 25%,transparent 0 50%,var(--checker) 0 75%,transparent 0);background-size:20px 20px;border-radius:var(--radius-sm)}.placeholder{flex:1;min-height:330px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px}.placeholder__art{margin-bottom:26px;transform:rotate(-8deg);box-shadow:8px 10px 0 var(--border);border-radius:22px;width:88px;height:88px}.placeholder h3{font-family:Georgia,Times New Roman,serif;font-size:23px;font-weight:400;line-height:1.3;padding:4px 8px;background:var(--surface-soft)}.placeholder p{max-width:290px;margin-top:10px;color:var(--text-muted);font-size:12px;padding:4px 8px;background:var(--surface-soft)}.result{display:flex;flex-direction:column;gap:16px}.result__preview{padding:12px;display:flex;justify-content:center;align-items:center;min-height:260px}.result__preview img{display:block;max-width:100%;max-height:450px;object-fit:contain}.result__actions{display:flex;gap:8px}.result__actions button{flex:1;padding:11px 12px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:var(--button-text);font-size:13px;font-weight:600}.result__actions button:hover{background:var(--accent-hover)}.result__actions .result__clear{flex:0 1 auto;background:var(--surface);color:var(--text-muted);border-color:var(--border)}.result__actions .result__clear:hover{background:var(--surface-hover)}.timing{border-top:1px solid var(--border);padding-top:16px;margin-top:20px}.timing__title{font-size:11px;font-weight:500;color:var(--text-muted);margin-bottom:8px}.timing__list{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}.timing__row{display:flex;justify-content:space-between;gap:8px;font-size:10px}.timing__row dt{color:var(--text-muted)}.timing__row dd{font-variant-numeric:tabular-nums}.app__footer{margin-top:40px;padding-top:20px;border-top:1px solid var(--border);font-size:11px;color:var(--text-muted)}.app__footer a{text-underline-offset:3px}.app__footer a:hover{color:var(--accent)}@media(max-width:760px){.app{padding:22px 20px}.intro{padding:38px 0 28px}.intro h1{letter-spacing:-1.8px}.intro>p:last-child{font-size:14px}.desktop-break{display:none}.app__main{grid-template-columns:1fr;gap:18px}.panel{padding:20px}.placeholder{min-height:310px}}@media(max-width:380px){.app{padding-inline:14px}.theme-toggle{padding:9px}.brand{font-size:15px;gap:8px}.panel{padding:16px}}@media(prefers-reduced-motion:reduce){.loading__spinner{animation:none}}