@font-face{font-family:Poppins;src:url('assets/poppins-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url('assets/poppins-semibold.ttf') format('truetype');font-style:normal;font-weight:600 800;font-display:swap}
:root{--forest:#357960;--deep:#123d2e;--gold:#ffc21a;--paper:#f5f4ed;--white:#fffefa;--ink:#172b23;--muted:#62766b;--line:#d9e0d8}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 Poppins,Arial,sans-serif}button,input,textarea,select{font:inherit}button,select{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}
.app{display:grid;grid-template-columns:370px minmax(0,1fr);min-height:100vh}.panel{height:100vh;overflow:auto;background:var(--white);border-right:1px solid var(--line);scrollbar-width:thin;scrollbar-color:#b3c7bb transparent}.brand{background:var(--forest);padding:25px 26px 20px;color:white}.brand img{width:100%;max-width:290px;height:auto;display:block}.brand-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:18px}.brand h1{font-size:21px;letter-spacing:-.6px;margin:0;font-weight:600}.brand-title span{font-size:10px;letter-spacing:1.1px;max-width:75px;color:#e0ebd9}.panel-content{padding:22px 26px 28px}.format-row>label{display:block;font-weight:600;margin-bottom:7px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:26px 0 15px}.section-heading h2{font-size:14px;font-weight:600;margin:0}.section-heading h2 span{color:var(--forest);font-size:12px;margin-right:8px}.section-heading>span{font-size:11px;color:var(--muted);white-space:nowrap}.dropzone{position:relative;background:#edf2eb;border:1px dashed #afc3b5;min-height:116px;padding:14px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;text-align:center;cursor:pointer}.dropzone.dragover{background:#e7edcd;border-color:var(--forest)}.dropzone input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.dropzone strong{font-size:12px;font-weight:600}.dropzone>span:last-child{font-size:11px;color:var(--muted)}.upload-plus{font-size:26px;line-height:1;color:var(--forest)}.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}.photo-thumb{border:2px solid transparent;background:none;padding:0;aspect-ratio:1;position:relative}.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}.photo-thumb[aria-pressed=true]{border-color:var(--forest)}.photo-thumb[aria-pressed=true]:after{content:'✓';position:absolute;right:2px;bottom:2px;width:19px;height:19px;border-radius:50%;background:var(--forest);color:white;font-size:12px}.hint{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.6}.field-label{display:block;font-weight:600;font-size:13px;margin:16px 0 6px}.panel select,.panel input:not([type=file]):not([type=range]),.panel textarea{width:100%;border:1px solid var(--line);background:var(--white);border-radius:2px;color:var(--ink);padding:10px 11px;min-width:0}.panel textarea{resize:vertical;line-height:1.5}.panel textarea:focus,.panel input:focus,.panel select:focus{border-color:var(--forest)}.field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.field-pair select{padding:10px 5px;font-size:12px}.range-label{display:flex;justify-content:space-between;margin:15px 0 7px;font-size:13px}.range-label output{color:var(--forest)}input[type=range]{width:100%;accent-color:var(--forest)}.palette{display:flex;flex-wrap:wrap;gap:9px;padding:4px 0}.swatch{width:30px;height:30px;border:1px solid #0002;border-radius:50%;padding:0}.swatch[aria-pressed=true]{outline:2px solid var(--forest);outline-offset:3px}.swatch:disabled{opacity:.4;cursor:default}.color-name{color:var(--muted);font-size:11px;margin:8px 0}.primary,.secondary{width:100%;padding:13px 10px;font-weight:600;border:1px solid var(--forest);border-radius:2px;font-size:13px}.primary{background:var(--forest);color:white}.primary:hover{background:var(--deep)}.secondary{margin-top:8px;background:transparent;color:var(--forest)}.secondary:hover{background:#edf2eb}button:disabled{cursor:wait;opacity:.6}#status{font-size:12px;min-height:36px;color:var(--forest);margin:12px 0}.back-link{display:block;margin-top:18px;font-size:12px;color:var(--muted);text-align:center;text-underline-offset:4px}
.workspace{padding:27px 38px 18px;display:flex;flex-direction:column;min-width:0;min-height:100vh}.workspace-header{display:flex;justify-content:space-between;align-items:center;gap:18px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:1.8px;color:var(--forest);margin:0 0 7px}.workspace-header h2{font:500 27px/1.2 Georgia,serif;letter-spacing:-.4px;margin:0}.format-badge{border:1px solid #c9d6cb;padding:7px 12px;font-size:11px;white-space:nowrap;color:var(--forest);letter-spacing:1px}.preview-area{display:flex;align-items:center;justify-content:center;flex:1;padding:24px 0}.canvas-wrap{height:min(62vh,650px);max-width:100%;aspect-ratio:3/4;background:var(--forest);box-shadow:0 17px 44px #0d302124}.canvas-wrap canvas{display:block;width:100%;height:100%}.filmstrip-heading{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);margin:0 0 10px}.filmstrip-heading span:first-child{letter-spacing:1.6px;font-size:10px;font-weight:600;color:var(--ink)}#filmstrip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.frame{border:0;background:transparent;padding:0;color:var(--muted);text-align:left;min-width:0}.frame canvas{display:block;width:100%;max-height:160px;aspect-ratio:3/4;object-fit:contain;background:#e3e8df}.frame[aria-selected=true] canvas{outline:3px solid var(--forest);outline-offset:3px}.frame span{display:block;font-size:10px;letter-spacing:1px;margin:9px 0 0}.frame[aria-selected=true] span{color:var(--forest);font-weight:600}.workspace-footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);margin-top:18px;padding-top:12px;color:var(--muted);font-size:11px}.workspace-footer span:last-child{font-size:9px;letter-spacing:1px}
@media(min-width:1400px){.workspace{padding-left:55px;padding-right:55px}#filmstrip{max-width:950px;width:100%;margin:auto}.filmstrip-heading,.workspace-footer{max-width:950px;margin-left:auto;margin-right:auto}.filmstrip-heading{width:100%}}
@media(max-width:1050px){.app{grid-template-columns:320px minmax(0,1fr)}.panel-content{padding:20px}.brand{padding:23px 20px}.workspace{padding:24px}.workspace-header h2{font-size:23px}.format-badge{display:none}}
@media(max-width:700px){.app{display:flex;flex-direction:column}.panel{height:auto;overflow:visible;border-right:0;order:2}.workspace{order:1;padding:20px 20px 18px;min-height:0}.workspace-header h2{font-size:22px}.eyebrow{font-size:9px}.preview-area{padding:21px 0}.canvas-wrap{height:auto;width:min(72%,310px)}#filmstrip{gap:9px}.frame canvas{max-height:100px}.filmstrip-heading{font-size:11px}.workspace-footer{display:none}.brand{padding:18px 22px;display:flex;justify-content:space-between;gap:18px;align-items:center}.brand>a{max-width:190px}.brand-title{margin:0}.brand h1{font-size:16px}.brand-title>span{display:none}.panel-content{padding:10px 22px 26px}.section-heading{margin-top:25px}.field-label{font-size:14px}.hint{font-size:12px}.frame span{font-size:9px}.metadata-fields .field-label{font-size:13px}}
@media(prefers-reduced-motion:no-preference){button,select{transition:background-color .15s,border-color .15s}}