@layer base, layout, components, responsive;
@layer base {
  :root {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#233e34; background:#f5f4ef; font-synthesis:none; --ink:#233e34; --muted:#69766e; --line:#dddfd6; --accent:#d4eb94; --paper:#f5f4ef; --white:#fcfcf8}
  * {box-sizing:border-box} body {margin:0} button,input,select {font:inherit;color:inherit} button,a,input,select {touch-action:manipulation} button {cursor:pointer} button:disabled {opacity:.45;cursor:wait} a {color:inherit} button {border:0;background:none} button,select {min-height:40px} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {outline:2px solid #637d2f;outline-offset:3px} input,select {width:100%;min-width:0;border:1px solid #d5dacf;border-radius:5px;background:var(--white);padding:10px 11px;font-size:13px} input[type=checkbox] {width:17px;height:17px;accent-color:var(--ink)} input[type=range] {padding:0} h1,h2,h3,p {margin:0} svg {display:block} [hidden] {display:none!important} .skip-link {position:fixed;top:-70px;padding:15px;background:white;z-index:10}.skip-link:focus {top:0}
}
@layer layout {
  #app {height:100svh;min-height:600px;display:grid;grid-template-rows:76px minmax(0,1fr)}
  .app-header {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 28px;border-bottom:1px solid var(--line);background:var(--white)}
  .brand {display:flex;align-items:center;gap:12px;white-space:nowrap}.brand h1 {font-size:23px;font-weight:650;letter-spacing:-1px}.brand-mark {width:29px;height:30px}.brand small {display:block;font-size:10px;letter-spacing:1.9px;text-transform:uppercase;margin-top:2px;color:var(--muted)}
  .header-middle {display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}.local-dot {width:6px;height:6px;border-radius:50%;background:#567246}.header-actions {display:flex;align-items:center;gap:9px}
  .studio {display:grid;grid-template-columns:202px minmax(0,1fr) 280px;min-height:0}
  .library {display:flex;flex-direction:column;min-height:0;padding:26px 15px 18px;border-right:1px solid var(--line);background:var(--white);overflow-y:auto}
  .canvas-workspace {min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;background:#e9ebe3}
  .canvas-toolbar {min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 24px;border-bottom:1px solid #d7dbd0;background:#f5f4ef}
  .stage {flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:28px 28px 18px;overflow:hidden;background-image:radial-gradient(#c7cbbf .65px,transparent .65px);background-size:12px 12px}
  .artboard {flex-shrink:0;box-shadow:0 9px 30px #24382c16,0 1px 3px #24382c18;transition:width .22s,height .22s;position:relative;background:white}.artboard>svg {width:100%;height:100%}
  .canvas-footer {min-height:45px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;font-size:11px;color:#647164}.inspector {border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--white)}.inspector-scroll {padding:24px;overflow:auto;flex:1;min-height:0}.panel-tabs {display:flex;min-height:64px;border-bottom:1px solid var(--line);padding:0 23px;gap:24px}.panel-tab {position:relative;font-size:12px;font-weight:600;padding:0}.panel-tab[aria-selected=true]::after {content:"";position:absolute;height:2px;background:var(--ink);bottom:0;left:0;right:0}.panel-tab[aria-selected=false] {color:var(--muted)}
}
@layer components {
  .button {display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:10px 14px;border:1px solid var(--line);border-radius:5px;font-size:12px;font-weight:550;white-space:nowrap;transition:background .15s,transform .15s}.button:hover {background:#e9ede2}.button:active {transform:translateY(1px)}.button.primary {background:var(--ink);border-color:var(--ink);color:#fff}.button.primary:hover {background:#355746}.button svg {width:15px;height:15px}.button.ghost {border-color:transparent}.button.full {width:100%}
  .eyebrow {font-size:10px;letter-spacing:1.65px;font-weight:650;text-transform:uppercase;color:var(--muted)}.library .eyebrow {padding:0 12px;margin-bottom:16px}.mode-switch {display:flex;gap:3px;background:#edf0e8;padding:3px;border-radius:6px;margin-bottom:27px}.mode-switch button {flex:1;font-size:12px;min-height:34px;border-radius:4px}.mode-switch button[aria-pressed=true] {background:var(--white);box-shadow:0 1px 3px #24382c15;font-weight:650}
  .template-list {display:flex;flex-direction:column;gap:5px}.template {display:flex;align-items:center;gap:11px;text-align:left;min-height:53px;padding:9px 11px;border-radius:5px;font-size:12px;color:#536459;transition:background .15s}.template:hover {background:#f0f2ea}.template[aria-pressed=true] {background:#e8eedc;color:var(--ink);font-weight:650}.template[aria-pressed=true]::after {content:"";width:5px;height:5px;border-radius:50%;background:#67803c;margin-left:auto}.template svg {width:27px;height:27px;flex:none}.library-bottom {margin-top:auto;padding-top:30px}.source-caption {color:var(--muted);font-size:11px;line-height:1.65;margin:9px 7px 0;text-align:center}.text-action {color:#536b40;font-size:11px;text-decoration:underline;text-underline-offset:3px;padding:4px;min-height:32px}.library-bottom .text-action {display:block;width:100%}.workflow {display:flex;gap:6px;align-items:center;font-size:12px}.workflow b {font-weight:600}.workflow span {color:#86917f}.sample-tag {background:#e6eadc;border-radius:3px;font-size:10px;letter-spacing:.3px;padding:5px 7px;white-space:nowrap}.preview-title {font-weight:600;font-size:12px}.subtle {color:var(--muted)}
  .form-section {padding-bottom:23px;margin-bottom:22px;border-bottom:1px solid var(--line)}.form-section:last-child {border-bottom:0;margin-bottom:0}.section-title {font-size:12px;font-weight:650;margin-bottom:15px;display:flex;justify-content:space-between;align-items:center}.section-title small {font-size:10px;color:var(--muted);font-weight:400}.field {display:block;margin-bottom:13px}.field:last-child {margin-bottom:0}.field>span {display:block;font-size:11px;color:#647166;margin-bottom:7px}.field-help {font-size:11px;line-height:1.6;color:var(--muted);margin-top:9px}.field-row {display:grid;grid-template-columns:1fr 1fr;gap:10px}.palette-list {display:flex;gap:9px}.palette {flex:1;min-width:0;padding:0;position:relative}.palette-art {height:48px;border-radius:4px;display:flex;justify-content:center;align-items:center;font-family:Georgia,serif;font-size:26px;border:1px solid #d8dbd1;transition:transform .15s}.palette:hover .palette-art {transform:translateY(-2px)}.palette[aria-pressed=true] .palette-art {outline:2px solid #637d2f;outline-offset:3px}.palette-label {display:block;margin-top:9px;font-size:10px;color:var(--muted)}.palette-paper .palette-art {background:#f4f1e8;color:#183c32}.palette-forest .palette-art {background:#183c32;color:#d6ef80}.palette-night .palette-art {background:#202723;color:#f4f1e8}.check-field {display:flex;align-items:center;gap:9px;min-height:34px;font-size:12px}.check-field input {margin:0}.format-meta {margin-top:10px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted)}.data-summary {font-size:12px;line-height:1.7}.data-filename {font-weight:600;overflow-wrap:anywhere;margin-bottom:8px}.data-numbers {display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:15px 0}.data-numbers b {display:block;font-size:21px;font-weight:550;letter-spacing:-.7px}.data-numbers span {font-size:10px;color:var(--muted)}details summary {list-style:none;font-size:12px;font-weight:600;cursor:pointer;padding:12px 0}details summary::after {content:"+";float:right}details[open] summary::after {content:"−"}details .field {margin-top:10px}.file-guide {font-size:11px;line-height:1.7;color:var(--muted);margin:12px 0}.file-guide code {font-size:10px;overflow-wrap:anywhere}.warning {font-size:11px;line-height:1.6;color:#805719;margin-top:10px}.status-note {font-size:11px;line-height:1.6;color:var(--muted)}.empty-preview {display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;max-width:320px;text-align:center}.empty-preview h2 {font:32px/1.1 Georgia,serif}.empty-preview p {font-size:13px;color:var(--muted);line-height:1.7}.empty-preview svg {width:70px;height:70px;color:#788864}.error-block {font-size:12px;color:#805719;margin:12px 0;line-height:1.6}#notice {position:fixed;bottom:22px;left:50%;transform:translate(-50%,15px);padding:12px 19px;max-width:min(90vw,600px);background:var(--ink);color:white;font-size:12px;line-height:1.5;border-radius:5px;box-shadow:0 3px 20px #172a2a25;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:10}#notice.show {opacity:1;transform:translate(-50%,0)}#notice.error {background:#7d442b}.mobile-inspector-title {display:none}.canvas-workspace {animation:arrive .35s ease-out}.export-state {font-size:11px;color:var(--muted)}@keyframes arrive {from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
  @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
}
@layer responsive {
  @media(min-width:1550px){.studio{grid-template-columns:230px minmax(0,1fr) 302px}.inspector-scroll{padding:28px}.library{padding:28px 21px}.stage{padding:35px}}
  @media(max-width:1100px){.studio{grid-template-columns:166px minmax(0,1fr) 248px}.library{padding-left:10px;padding-right:10px}.template{gap:8px;padding:8px;font-size:11px}.inspector-scroll{padding:20px}.header-middle{display:none}.app-header{padding:0 20px}.stage{padding:20px}.canvas-toolbar{padding:10px 18px}.canvas-footer{padding:0 18px}}
  @media(max-width:780px){#app{height:auto;min-height:100svh;display:block}.app-header{height:70px;padding:0 16px;gap:10px}.brand h1{font-size:20px}.brand small{font-size:8px;letter-spacing:1.3px}.brand-mark{width:23px}.header-actions{gap:4px}.header-actions .button{padding:9px 10px}.header-actions .save-button{display:none}.studio{display:flex;flex-direction:column}.library{padding:13px 15px 12px;border-right:0;border-bottom:1px solid var(--line);overflow:visible}.library-top{display:flex;gap:12px;align-items:center}.library .eyebrow{display:none}.mode-switch{margin-bottom:11px;max-width:230px;width:100%;padding:3px}.template-list{flex-direction:row;overflow-x:auto;margin:0 -15px;padding:1px 15px 4px;scrollbar-width:thin;gap:6px}.template{min-height:40px;padding:7px 10px;white-space:nowrap;border:1px solid var(--line);font-size:11px;gap:7px}.template svg{width:19px;height:19px}.template[aria-pressed=true]::after{display:none}.library-bottom{display:none}.canvas-toolbar{min-height:50px;padding:9px 16px}.canvas-workspace{min-height:480px}.stage{height:510px;flex:none;padding:22px 24px 15px}.canvas-footer{padding:0 16px;min-height:37px;font-size:10px}.inspector{border-left:0;border-top:1px solid var(--line)}.panel-tabs{min-height:52px;padding:0 22px;position:sticky;top:0;background:var(--white);z-index:1}.inspector-scroll{overflow:visible;padding:25px 22px}.inspector-content{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}.form-section{min-width:0}.form-section:last-child{border-bottom:1px solid var(--line)}.mobile-import{margin-left:auto!important;min-height:35px!important;padding:6px 10px!important;margin-bottom:11px;display:inline-flex!important}.canvas-toolbar .workflow{font-size:11px}.source-caption{max-width:220px}.format-meta{font-size:11px}}
  @media(min-width:781px){.mobile-import{display:none!important}}
  @media(max-width:460px){.brand{gap:8px}.brand h1{font-size:19px}.brand small{font-size:7px}.header-actions .open-project-button{font-size:0;padding:9px}.header-actions .open-project-button svg{width:17px;height:17px}.header-actions .export-button{font-size:11px}.inspector-content{display:block}.stage{height:470px;padding:20px 22px 12px}.canvas-workspace{min-height:480px}.workflow{gap:4px}.workflow .optional{display:none}.canvas-footer span:last-child{max-width:160px;text-align:right}.panel-tabs{gap:30px}.app-header{gap:6px}.sample-tag{font-size:9px}.template-list{padding-bottom:5px}}
}
@layer components {
  .mode-switch button {font-size:11px;white-space:nowrap;padding:4px 7px}
  .export-dialog {position:fixed;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink);padding:30px;width:min(490px,calc(100vw - 32px));max-height:90svh;overflow:auto;text-align:center;box-shadow:0 20px 80px #183c3230}
  .export-dialog::backdrop {background:#182a2459;backdrop-filter:blur(3px)}
  .export-dialog h2 {font-size:22px;letter-spacing:-.7px;margin-bottom:20px;font-weight:600}
  .export-close {position:absolute;right:10px;top:5px;font-size:27px;width:36px;min-height:36px;color:var(--muted)}
  .export-preview {display:block;max-width:100%;max-height:53svh;margin:0 auto;object-fit:contain;box-shadow:0 2px 14px #183c321a;background:repeating-conic-gradient(#e5e7df 0% 25%,#fafaf7 0% 50%) 50% / 14px 14px}
  .export-filename {font-size:11px;overflow-wrap:anywhere;color:var(--muted);margin:18px 0 13px}
  .export-download {text-decoration:none;width:100%}
}
@layer responsive {
  @media(max-width:780px){.canvas-workspace{min-height:0}.stage{height:clamp(245px,calc((100vw - 44px) * var(--canvas-ratio, 1.25) + 36px),570px)}}
  @media(max-width:460px){.brand small{max-width:140px;white-space:normal;font-size:6.5px;letter-spacing:.85px}.brand h1{letter-spacing:-.9px}.header-actions .export-button{padding-left:10px;padding-right:10px}}
}
/* Primary scope controls stay with the artwork at every viewport. */
#primary-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:5px 22px 12px;position:relative;z-index:2;border-bottom:1px solid var(--line)}
#primary-controls .field{margin:0;flex:1 1 100px;max-width:210px;min-width:0}#primary-controls select{width:100%;min-height:44px}#primary-controls .field>span{font-size:10px}
.format-picker{flex:1 1 160px;position:relative;min-width:0}.format-picker>summary,.range-picker>summary{display:flex;align-items:center;gap:9px;min-height:44px;font-size:12px;padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:var(--white);overflow-wrap:anywhere}.format-picker>div{position:absolute;top:100%;right:0;width:245px;max-width:calc(100vw - 32px);padding:8px;background:var(--white);border:1px solid var(--line);box-shadow:0 10px 24px #183c321a;z-index:4}.format-option{display:flex;align-items:center;gap:10px;min-height:58px;padding:7px;cursor:pointer}.format-option:has(input:checked){background:#d6ef8038;outline:1px solid var(--ink)}.format-option small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.proportion{display:inline-block;height:23px;max-width:42px;border:1.5px solid currentColor;border-radius:2px;flex-shrink:0}.range-picker{flex-basis:100%;min-width:0}.range-picker>div{display:flex;flex-wrap:wrap;gap:6px 18px}.range-context{font-size:12px}.route-context{flex:1;min-width:100px}.route-context b{font-size:12px;display:block;overflow-wrap:anywhere}.route-context small{display:block;font-size:10px;margin-top:6px}.custom-text{width:100%;margin-bottom:16px;min-height:44px}.color-button{width:100%;display:flex;align-items:center;gap:8px;text-align:left;min-height:44px;font-size:11px}.color-button i{width:23px;height:23px;border:1px solid #8886;border-radius:3px}.color-button small{margin-left:auto;font-size:9px;color:var(--muted)}.design-details{margin:8px 0}.design-details>summary{font-size:12px;min-height:44px}.check-field{min-height:44px!important}.check-field input,.stat-control input{width:17px;height:17px}.stat-control{display:flex;align-items:center;gap:6px;font-size:11px;min-height:44px}.stat-control label{display:flex;align-items:center;gap:7px;flex:1}.stat-control button{width:36px;min-height:44px;border:1px solid var(--line)}.reset{font-size:10px!important}.color-dialog{margin:auto;width:min(380px,calc(100vw - 24px));max-height:calc(100svh - 24px);overflow:auto;background:var(--white);color:var(--ink);padding:22px;border:1px solid var(--line);border-radius:10px;box-shadow:0 20px 80px #183c3240}.color-dialog::backdrop{background:#182a2466}.color-dialog h2{font-size:20px;margin-bottom:18px}.sv-surface{width:100%;height:190px;position:relative;touch-action:none;border-radius:3px;margin-bottom:15px}.sv-surface i{position:absolute;width:14px;height:14px;border:2px solid white;box-shadow:0 0 0 1px #222;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.color-dialog label{font-size:12px;display:block}.color-dialog input{width:100%;min-height:44px;margin-top:5px}.color-dialog input[type=range]{accent-color:var(--ink)}.color-numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}.color-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:15px}.color-error{font-size:11px;color:#9c3a21;min-height:22px}.color-swatches{display:flex;flex-wrap:wrap;gap:7px}.picker-swatch{width:44px;min-height:44px;border:1px solid #8887;border-radius:4px}button:focus-visible,input:focus-visible,summary:focus-visible,.sv-surface:focus-visible,select:focus-visible{outline:3px solid #729849;outline-offset:3px}.color-dialog[open]{animation:arrive .16s ease-out}.format-picker[open]>div{animation:arrive .12s ease-out}input[type=file]{max-width:100%;font-size:11px;min-height:44px}
@media(max-width:780px){#primary-controls{padding:12px 16px;gap:8px}.format-picker{flex:1 1 155px}.format-picker>div{left:0;right:auto}.color-dialog{padding:18px}.sv-surface{height:175px}.inspector-content{align-items:start}}
.format-option input[type=radio]{width:18px;min-height:18px;flex:0 0 18px;margin:0}.format-option{font-size:12px}.format-option>span{flex:1}.format-option small{white-space:nowrap}.format-picker>summary::after{margin-left:auto}
@media(max-width:360px){.library-top{flex-wrap:wrap;row-gap:0}}
@media(min-width:781px) and (max-width:1100px){.mode-switch button{font-size:10px;padding:4px}}
@media(max-width:360px){.header-actions .export-button{font-size:0;min-width:44px;min-height:44px;padding:10px}.header-actions .export-button svg{width:20px;height:20px}.header-actions .open-project-button{min-width:44px;min-height:44px}.brand{min-width:0;flex:1}.brand h1{font-size:17px}.brand small{max-width:115px}}