:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f6f3ee; color: #292b29; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.app { max-width: 1420px; min-height: 100vh; margin: 0 auto; padding: 34px clamp(18px, 4vw, 56px) 48px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 30px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; background: #292b29; color: #fff; font-family: Georgia, serif; font-size: 28px; line-height: 1; transform: rotate(-5deg); }
.brand-name { font-weight: 750; font-size: 17px; letter-spacing: -.035em; }
.brand-caption { color: #777b75; font-size: 12px; margin-top: 1px; }
.top-note { display: inline-flex; gap: 8px; align-items: center; padding: 9px 13px; border: 1px solid #e4ded4; border-radius: 100px; background: #fffdfa; color: #656963; font-size: 12px; font-weight: 650; white-space: nowrap; }
.top-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d28c5a; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 4vw, 49px); font-weight: 500; letter-spacing: -.055em; line-height: 1.08; }
.intro { margin: 12px 0 28px; color: #777b75; font-size: 15px; line-height: 1.5; }
.workspace { display: grid; grid-template-columns: minmax(340px, 540px) minmax(340px, 1fr); gap: 28px; align-items: start; }
.editor { background: #fffdfa; border: 1px solid #e7e1d7; border-radius: 20px; box-shadow: 0 18px 50px #403b310a; overflow: hidden; }
.section { padding: 23px 25px; border-top: 1px solid #eee9e1; }
.section:first-child { border-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
h2 { margin: 0; font-size: 16px; letter-spacing: -.025em; }
.section-hint { color: #999b95; font-size: 12px; white-space: nowrap; }
.field { min-width: 0; }
.field > label, .field-label { display: block; color: #555b55; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
textarea, select, input[type="number"] { width: 100%; border: 1px solid #e5e0d8; border-radius: 10px; background: #fff; color: #292b29; outline: none; transition: border-color .18s, box-shadow .18s; }
textarea:focus, select:focus, input[type="number"]:focus, input[type="file"]:focus-visible + .upload-label { border-color: #bf845b; box-shadow: 0 0 0 3px #cb956126; }
textarea { min-height: 132px; resize: vertical; padding: 13px 14px; line-height: 1.5; }
select, input[type="number"] { height: 40px; padding: 0 11px; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 17px; }
.first-row { margin-top: 0; }
.spaced { margin-top: 18px; }
.color-field { display: flex; align-items: center; gap: 9px; height: 40px; padding: 4px 9px 4px 5px; border: 1px solid #e5e0d8; border-radius: 10px; background: #fff; }
input[type="color"] { width: 31px; height: 29px; padding: 0; border: 0; background: none; cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 1px solid #0001; border-radius: 6px; }
input[type="color"]::-moz-color-swatch { border: 1px solid #0001; border-radius: 6px; }
.color-value { font-size: 12px; color: #5c615b; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.range-row { display: flex; align-items: center; gap: 12px; height: 40px; }
input[type="range"] { width: 100%; min-width: 0; accent-color: #b8734a; }
.range-value { width: 48px; text-align: right; color: #5c615b; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.segmented { display: flex; width: 100%; padding: 3px; background: #f2eee7; border-radius: 10px; gap: 3px; }
.segmented button { flex: 1; min-width: 0; border: 0; border-radius: 7px; padding: 9px 5px; color: #777b75; background: transparent; font-size: 12px; font-weight: 700; }
.segmented button[aria-pressed="true"] { color: #30312e; background: #fff; box-shadow: 0 1px 5px #24232117; }
.option-line { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 13px; }
.option-line > span { color: #999b95; font-size: 11px; white-space: nowrap; }
.format-hint { margin: 13px 0 0; color: #91958e; font-size: 11px; line-height: 1.6; }
.format-hint code { color: #82694f; background: #f5f0e8; border-radius: 4px; padding: 1px 3px; }
.upload { position: relative; }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-label { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 13px 14px; border: 1px dashed #cfc8bb; border-radius: 11px; background: #faf7f2; color: #4d554e; cursor: pointer; font-size: 13px; }
.upload-label span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-label span:last-child { color: #b1714e; font-weight: 700; white-space: nowrap; }
.upload-meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 30px; margin-top: 7px; color: #93978f; font-size: 12px; }
.text-button { border: 0; background: none; color: #ac6e4d; font-size: 12px; font-weight: 700; padding: 3px 0; white-space: nowrap; }
.inline-check { display: flex; align-items: center; gap: 7px; color: #777b75; font-size: 12px; cursor: pointer; user-select: none; }
.inline-check input { accent-color: #b8734a; }
.padding-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.padding-grid label { display: block; color: #777b75; font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.padding-grid input { text-align: center; padding: 0 4px; }
.preview-panel { position: sticky; top: 22px; min-width: 0; border: 1px solid #e7e1d7; border-radius: 20px; overflow: hidden; background: #ede8df; box-shadow: 0 18px 50px #403b310a; }
.preview-header { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 18px 22px; background: #fffdfa; border-bottom: 1px solid #e7e1d7; }
.preview-header strong { font-size: 14px; }
.preview-header span { color: #93978f; font-size: 12px; font-variant-numeric: tabular-nums; }
.stage { display: grid; place-items: center; min-height: 440px; padding: clamp(20px, 5vw, 55px); background-color: #efebe3; background-image: radial-gradient(#d7d0c5 1px, transparent 1px); background-size: 18px 18px; }
canvas { display: block; width: min(100%, 408px); height: auto; aspect-ratio: 408 / 480; background: white; box-shadow: 0 17px 45px #30291c30; }
.preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border-top: 1px solid #e7e1d7; background: #fffdfa; }
.status { min-width: 0; color: #858a83; font-size: 12px; line-height: 1.4; }
.status.warning { color: #ad624a; }
.download { display: inline-flex; justify-content: center; align-items: center; gap: 9px; padding: 12px 17px; border: 0; border-radius: 10px; background: #292b29; color: white; font-size: 13px; font-weight: 750; white-space: nowrap; transition: transform .15s, background .15s; }
.download:hover { background: #424740; transform: translateY(-1px); }
.download:active { transform: translateY(0); }
.download svg { width: 16px; height: 16px; }
@media (max-width: 860px) { .workspace { grid-template-columns: 1fr; } .preview-panel { position: static; grid-row: 1; } .stage { min-height: 0; } }
@media (max-width: 540px) { .app { padding: 20px 13px 32px; } .topbar { margin-bottom: 26px; } .top-note { display: none; } .section { padding: 20px 17px; } .section-hint { display: none; } .preview-footer { align-items: stretch; flex-direction: column; } .download { width: 100%; } .stage { padding: 22px; } .option-line { align-items: flex-start; flex-direction: column; } }