:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#26302a;background:#f4f2ed;--muted: #737b73;--line: #dcded4;--accent: #9a4e30;--panel: #fcfbf7;font-synthesis:none;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select,summary,label{touch-action:manipulation}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,label:has(>input:focus-visible){outline:2px solid var(--accent);outline-offset:4px}button{color:inherit}button,input,select{max-width:100%}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;min-height:24px}input[type=checkbox],input[type=radio]{accent-color:var(--accent)}input[type=number],select{background:var(--panel);color:inherit;border:1px solid var(--line);border-radius:6px;padding:10px;min-height:42px;width:100%}[hidden]{display:none!important}.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site-header,main,footer{max-width:1440px;margin:auto;padding-inline:32px}.site-header{height:64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:6px;font-size:20px;letter-spacing:-.7px;font-weight:650}.brand>span:last-child{font-weight:400}.brand-mark{display:grid;grid-template-columns:repeat(2,7px);gap:3px;margin-right:10px}.brand-mark i{width:7px;height:7px;background:#26302a}.brand-mark i:nth-child(2){background:#b7bcb0}.brand-mark i:nth-child(3){background:#c99a7d}nav{display:flex;gap:32px;font-size:13px}nav a:hover,footer a:hover{color:var(--accent)}.intro{display:flex;align-items:center;gap:16px;padding-block:22px}.intro p{margin:0;color:var(--muted);font-size:12px}.eyebrow{font:10px/1.6 ui-monospace,SFMono-Regular,monospace;text-transform:uppercase;letter-spacing:1.7px;color:var(--muted);margin:0 0 16px}h1{font-family:inherit;font-size:23px;font-weight:500;line-height:1.2;letter-spacing:-.7px;margin:0}.local-badge{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.1px}.local-badge i{width:6px;height:6px;border-radius:50%;background:#698368}.studio{display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px;align-items:start}.controls{display:grid;gap:16px}.panel{background:var(--panel);padding:20px;border:1px solid var(--line);border-radius:8px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel-heading h2{font-size:14px;letter-spacing:-.2px;margin:0;font-weight:600}.panel-heading h2>span{font:10px ui-monospace,SFMono-Regular,monospace;color:var(--accent);margin-right:10px}.counter{font:10px ui-monospace,SFMono-Regular,monospace;color:var(--muted)}.drop-zone{border:1px dashed #bfc6ba;border-radius:6px;padding:12px;display:grid;grid-template-columns:24px 1fr;align-items:center;cursor:pointer;background:#f4f5ee;gap:3px 8px;text-align:left}.drop-zone .upload-icon{grid-row:1 / 4}.drop-zone>:not(.upload-icon){grid-column:2}.drop-zone:hover,.drop-zone.is-over{background:#ebefe3;border-color:#687e65}.drop-zone strong{font-size:12px;font-weight:600}.drop-zone>span:not(.upload-icon){font-size:11px;color:var(--muted)}.drop-zone small{font-size:9px;color:var(--muted);margin-top:5px}.upload-icon{font-size:24px;font-weight:300;color:#61745c;line-height:1}.sequence{display:grid;gap:9px;margin-top:16px}.image-row{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:8px;background:#f5f4ef;border:1px solid #e5e6df;border-radius:6px;min-width:0}.image-row img{width:42px;height:42px;border-radius:4px;object-fit:contain;background:#000;image-rendering:pixelated}.image-info{min-width:0}.image-name{font-size:11px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;max-width:150px}.image-options{display:flex;align-items:center;gap:7px;margin-top:5px;color:var(--muted);font-size:9px}.image-options label{display:flex;align-items:center;gap:3px;cursor:pointer}.image-options input{margin:0;width:12px;height:12px}.image-row-actions{display:flex;gap:1px}.icon-button{border:0;background:transparent;border-radius:3px;padding:3px;min-width:21px;min-height:30px;font-size:13px}.icon-button:hover{background:#e7e8df}.example-actions{display:flex;gap:7px;margin-top:12px}.example-button{flex:1;border:1px solid var(--line);border-radius:6px;padding:8px 5px;color:var(--accent);background:transparent;font:inherit;font-size:11px;cursor:pointer}.example-button:hover{background:#e7e8df}.image-actions .hint{margin:0;align-self:center}.image-actions{display:flex;justify-content:space-between;gap:8px;margin-top:3px}.text-button{display:inline-block;border:0;background:none;padding:7px 0;font-size:11px;color:var(--accent);cursor:pointer}.text-button:hover{text-decoration:underline;text-underline-offset:3px}.hint{font-size:10px;color:var(--muted);line-height:1.7;margin:10px 0 0}.segmented{display:flex;padding:3px;border:1px solid var(--line);background:#f2f2eb;border-radius:6px;margin:0;min-width:0}.segmented label{flex:1;position:relative;min-width:0}.segmented input{position:absolute;opacity:0;width:1px;height:1px}.segmented span{font-size:10px;display:block;text-align:center;padding:10px 3px;border-radius:4px;cursor:pointer}.segmented input:checked+span{background:#fff;box-shadow:0 1px 4px #26302a16;color:var(--accent)}.range-field{margin-top:18px}.range-field>label{font-size:11px;display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.range-field output{font:10px ui-monospace,SFMono-Regular,monospace;color:var(--accent)}.check{display:flex;align-items:center;gap:8px;font-size:11px;margin-top:18px}.check input{margin:0;width:14px;height:14px}details{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}summary{font-size:11px;cursor:pointer}.advanced{margin-top:16px}.select-field{display:grid;gap:7px;font-size:10px;line-height:1.6;margin-top:14px}.select-field select,.select-field input{font-size:11px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field-grid>.select-field{margin-top:0}.field-grid+.field-grid{margin-top:14px}.estimate{font:10px/1.6 ui-monospace,SFMono-Regular,monospace;color:var(--muted);margin:18px 0}.primary-button{border:1px solid #2d3c30;background:#2d3c30;color:#fff;border-radius:6px;width:100%;display:flex;justify-content:space-between;padding:15px;font-size:12px;font-weight:500}.primary-button:hover{background:#425742}.cancel-button{width:100%;background:transparent;border:1px solid var(--line);border-radius:5px;padding:12px;font-size:12px;margin-top:10px}.generation-status{margin-top:14px}progress{accent-color:#61745c;width:100%;height:8px}.generation-status p{font:10px/1.6 ui-monospace,SFMono-Regular,monospace;color:var(--muted);margin:7px 0}.message{font-size:11px;line-height:1.6;color:var(--accent);margin:8px 0}.message:empty{display:none}.preview-sticky{position:sticky;top:16px}.preview-column{align-self:stretch;min-width:0}.preview-heading{display:flex;justify-content:space-between;align-items:center;margin:2px 0 14px}.preview-heading .eyebrow{margin:0}.preview-state{font:10px ui-monospace,SFMono-Regular,monospace;color:var(--muted)}.canvas-shell{padding:16px 16px 0;background:#171c19;border-radius:10px;border:1px solid #202a23;overflow:hidden}.canvas-shell canvas{width:100%;aspect-ratio:1;display:block;image-rendering:pixelated;object-fit:contain;background:#000;max-height:clamp(250px,calc(100dvh - 360px),560px)}.canvas-caption{display:flex;justify-content:space-between;gap:12px;color:#a3ada3;font:9px/1.6 ui-monospace,SFMono-Regular,monospace;padding:10px 0}.canvas-caption span:last-child{white-space:nowrap}.playback{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.playback button{background:transparent;border:1px solid var(--line);border-radius:50%;width:34px;height:34px;flex-shrink:0;font-size:11px}.playback input{accent-color:#53684f}.playback>span{font:10px ui-monospace,SFMono-Regular,monospace;white-space:nowrap;min-width:90px;text-align:right}.result-bar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.result-bar strong{font-size:13px;font-weight:500}.result-bar p{font-size:11px;color:var(--muted);line-height:1.6;margin:6px 0 0;max-width:300px}.export-actions{display:flex;flex-direction:row;gap:8px;flex-shrink:0}.secondary-button,.download-button{border:1px solid var(--line);border-radius:5px;background:transparent;font-size:11px;padding:11px 15px;text-align:center;white-space:nowrap}.download-button{background:#2d3c30;color:#fff;border-color:#2d3c30}.secondary-button:not(:disabled):hover{border-color:var(--accent)}.recipe-bar{display:flex;gap:20px;align-items:center;margin-top:10px}.recipe-bar span{font-size:10px;color:var(--muted);margin-left:auto}.preview-note{font-size:10px;line-height:1.7;color:var(--muted);margin-top:14px;max-width:70ch}.about{border-top:1px solid var(--line);margin-top:72px;padding:42px 0 54px;scroll-margin-top:25px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}.about h2{font:400 32px/1.2 Georgia,serif;letter-spacing:-.8px;margin:0}.about p:not(.eyebrow){font-size:13px;line-height:1.9;color:var(--muted);margin-top:0}.about p.hint{font-size:10px}footer{border-top:1px solid var(--line);padding-block:24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:11px}footer>div{margin-left:auto;display:flex;gap:24px}footer small{width:100%;font-size:9px;color:var(--muted)}body.is-busy .controls section input,body.is-busy .controls section select,body.is-busy #examples,body.is-busy #clear-images,body.is-busy #reset,body.is-busy .image-row-actions button{pointer-events:none}body.is-busy .drop-zone{pointer-events:none;opacity:.6}body.is-busy .controls{opacity:.9}@media(min-width:1550px){.canvas-shell canvas{max-height:680px}}@media(max-width:1100px){.site-header,main,footer{padding-inline:30px}.studio{grid-template-columns:320px minmax(0,1fr);gap:24px}.panel{padding:20px}.canvas-shell{padding:18px 18px 0}.result-bar{align-items:flex-start;flex-direction:column}.export-actions{flex-direction:row;flex-wrap:wrap}.intro{gap:30px}.intro-copy>p:first-child{font-size:19px}.recipe-bar{flex-wrap:wrap;gap:5px 20px}.recipe-bar span{margin-left:0}.image-name{max-width:125px}}@media(max-width:760px){.site-header,main,footer{padding-inline:20px}.site-header{height:56px}nav{gap:16px;font-size:10px}.brand{font-size:18px}.intro{padding-block:16px;gap:5px 12px;flex-wrap:wrap}h1{font-size:20px;letter-spacing:-.5px}.intro p{font-size:10px}.local-badge{width:100%;margin-left:0;font-size:9px}.studio{display:flex;flex-direction:column;gap:24px}.preview-column{order:-1;width:100%}.preview-sticky{position:static}.canvas-shell{padding:16px 16px 0}.canvas-shell canvas{max-height:48vh}.canvas-caption{font-size:8px}.preview-note{display:none}.controls{width:100%;gap:14px}.result-bar{flex-direction:row;align-items:center;gap:12px}.result-bar p{font-size:10px;max-width:33ch}.export-actions{flex-direction:column}.secondary-button,.download-button{padding:10px;font-size:10px}.recipe-bar span{width:100%}.panel{padding:22px}.range-field>label,.check,.select-field,.hint{font-size:12px}.segmented span{font-size:11px}.image-name{max-width:none;font-size:12px}.image-row{grid-template-columns:48px minmax(0,1fr) auto}.image-row img{width:48px;height:48px}.image-options{font-size:10px;gap:12px}.icon-button{min-height:40px;min-width:30px}.drop-zone{padding:22px}.about{margin-top:40px}.about-grid{grid-template-columns:1fr;gap:24px}.about h2{font-size:30px}.about p:not(.eyebrow){font-size:12px}footer{gap:15px;font-size:10px}footer>div{margin-left:0;width:100%;gap:20px}}@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}.preset-field{margin:0 0 14px}.preview-title{display:grid;gap:4px}.run-actions{display:flex;align-items:center;flex-shrink:0}.run-actions .primary-button,.run-actions .cancel-button{width:auto;margin:0;padding:11px 14px;gap:18px;font-size:11px;white-space:nowrap}.preview-column .estimate,.preview-column .generation-status{margin:0 0 12px}.preview-column .message{margin-bottom:12px}@media(max-width:760px){.preview-heading{gap:12px}.preview-state,.preview-heading .eyebrow{font-size:9px}.export-actions{flex-direction:row;flex-wrap:wrap}.result-bar{flex-wrap:wrap}.panel{padding:18px}.drop-zone{padding:12px}}
