:root { font-family: 'DM Sans', sans-serif; color: #173d36; background: #f4f3ed; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 5vw, 76px); background: #fff; border-bottom: 1px solid #e4e5de; }
.brand { display: flex; gap: 10px; color: #0e4b3b; text-decoration: none; align-items: center; line-height: .82; font-size: 13px; font-weight: 500; letter-spacing: -.2px; }
.brand b { font-weight: 700; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; color: white; background: #f3a521; border-radius: 50%; font: 700 27px/1 Georgia, serif; }
.topbar p { margin: 0; font-size: 14px; color: #6d7e78; }
.workspace { max-width: 1400px; margin: 0 auto; padding: clamp(26px, 5vw, 72px); display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(38px, 7vw, 112px); }
.controls { max-width: 340px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .13em; color: #dd8610; }
h1, h2, p { margin-top: 0; }
h1 { margin: 8px 0 10px; font: 700 clamp(33px, 4vw, 45px)/1.02 Fraunces, Georgia, serif; letter-spacing: -.045em; color: #104d3d; }
.intro > p { margin-bottom: 34px; color: #61736d; font-size: 15px; line-height: 1.5; }
.step { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 0 0 27px; }
.step::before { content: ''; position: absolute; left: 15px; top: 31px; bottom: 0; width: 1px; background: #cfd7d2; }
.step:last-of-type::before { display: none; }
.step-number { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #aebdb6; border-radius: 50%; color: #63756e; font-size: 13px; font-weight: 700; background: #f4f3ed; z-index: 1; }
.step.active .step-number, .step.complete .step-number { background: #0f604c; border-color: #0f604c; color: #fff; }
.step-content h2, .adjustments h2 { margin: 5px 0 4px; font-size: 16px; letter-spacing: -.02em; }
.step-content p, .adjustments > p { color: #74827c; font-size: 13px; line-height: 1.4; margin-bottom: 12px; }
.upload-button { display: inline-flex; align-items: center; padding: 9px 14px; border: 1px solid #b6c5bd; border-radius: 5px; color: #14523f; background: #fff; font-size: 13px; font-weight: 700; transition: border-color .2s, background .2s; }
.upload-button:hover { border-color: #14523f; background: #f4faf7; }.upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-name { margin: 8px 0 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8b9892 !important; font-size: 11px !important; }
.template-adjustments { margin-top: 16px; padding: 12px; border: 1px solid #d6dfd9; border-radius: 5px; background: #fff; }.template-adjustments label { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 12px; font-weight: 600; }.template-adjustments output { color: #6a7b74; font-weight: 500; }.template-adjustments p { margin: 9px 0 0; color: #74827c; font-size: 11px; line-height: 1.35; }
.disabled { opacity: .45; pointer-events: none; }
.adjustments { border-top: 1px solid #d9ded9; padding-top: 23px; margin-top: 2px; }
.adjustment-heading { display: flex; justify-content: space-between; align-items: center; }.adjustment-heading h2 { margin: 0; }.adjustment-heading button { border: 0; color: #14614c; background: none; font-weight: 700; font-size: 12px; text-decoration: underline; }
.adjustments > p { margin: 6px 0 17px; }.adjustments label { display: flex; justify-content: space-between; margin: 15px 0 5px; font-size: 12px; font-weight: 600; }.adjustments output { color: #6a7b74; font-weight: 500; }
input[type='range'] { appearance: none; width: 100%; height: 4px; border-radius: 3px; background: #c8d5cd; accent-color: #168164; } input[type='range']::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #168164; border: 3px solid white; box-shadow: 0 1px 3px #71847b; }
.export-button { display: flex; justify-content: space-between; width: 100%; margin-top: 31px; padding: 14px 17px; border: 0; border-radius: 5px; background: #e89a1a; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 3px 0 #c77d09; transition: transform .15s, background .15s; }.export-button:hover:not(:disabled) { background: #df8b06; transform: translateY(-1px); }.export-button:disabled { cursor: not-allowed; background: #b6c2bc; box-shadow: none; }
.preview-area { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 0; }.canvas-frame { width: min(100%, 760px); min-height: 300px; display: grid; place-items: center; position: relative; border: 1px solid #dce0da; background: repeating-conic-gradient(#e6e9e4 0% 25%, #f7f8f5 0% 50%) 50% / 18px 18px; box-shadow: 0 13px 35px rgba(26, 61, 49, .12); }.canvas-frame.empty { background: #fff; border-style: dashed; box-shadow: none; }.template-outline { position: absolute; z-index: 2; display: none; border: 2px dashed #f3a521; box-shadow: 0 0 0 1px rgba(18, 75, 59, .55); pointer-events: none; }.canvas-frame:not(.empty) .template-outline { display: block; }
canvas { display: block; max-width: 100%; max-height: calc(100vh - 200px); width: auto; height: auto; touch-action: none; cursor: grab; }.empty canvas { display: none; }canvas.dragging { cursor: grabbing; }.empty-state { display: flex; align-items: center; flex-direction: column; color: #82928b; gap: 8px; padding: 40px; text-align: center; font-size: 13px; }.empty-state strong { color: #3d5c52; font-size: 15px; }.empty-icon { height: 38px; width: 38px; display: grid; place-items: center; border: 1px solid #b8c5be; border-radius: 50%; color: #14614c; font-size: 22px; }.preview-note { margin: 16px 0 0; color: #7b8983; font-size: 12px; text-align: center; }.toast { position: fixed; left: 50%; bottom: 25px; padding: 11px 18px; transform: translate(-50%, 20px); border-radius: 4px; background: #173d36; color: white; font-size: 13px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) { .topbar { height: 62px; padding: 0 20px; }.topbar p { display: none; }.workspace { grid-template-columns: 1fr; padding: 30px 22px 45px; gap: 32px; }.controls { max-width: none; }.preview-area { order: -1; }.canvas-frame { min-height: 210px; } canvas { max-height: 60vh; } h1 { font-size: 36px; } }