@import "https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;1,700&family=Barlow:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--font:"Barlow", system-ui, sans-serif;--mono:"JetBrains Mono", ui-monospace, "Courier New", monospace;--display:"Barlow Condensed", system-ui, sans-serif;--bg:#edf5ee;--panel:#fff;--fg:#0a1a0d;--fg-muted:#4d7a58;--border:#c2dcc8;--input-bg:#f4faf5;--btn-bg:#edf5ee;--btn-hover:#daeede;--accent:#08852e;--accent-bright:#0aaa3a;--accent-glow:#08852e2e;--accent-dim:#08852e1a}body{font-family:var(--font);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}#root{width:100%;max-width:100%}h1,h2,h3,p{margin:0}button{cursor:pointer;font-family:inherit}input{font-family:inherit}*,:before,:after{box-sizing:border-box}.app{background:var(--bg);height:100dvh;color:var(--fg);font-family:var(--font);flex-direction:column;display:flex;overflow:hidden}.app-header{background:var(--accent);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;height:48px;padding:0 16px 0 20px;display:flex}.app-logo-text{font-family:var(--display);letter-spacing:2px;color:#fff;text-transform:uppercase;font-size:24px;font-weight:800;line-height:1}.toolbar{background:var(--panel);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:flex-end;align-items:center;gap:10px;padding:8px 20px;display:flex}.toolbar-btn{background:var(--accent);font-family:var(--display);letter-spacing:1.8px;text-transform:uppercase;color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:4px;align-items:center;gap:7px;padding:10px 20px;font-size:15px;font-weight:700;transition:background .15s,transform .1s,box-shadow .15s;display:flex}.toolbar-btn:hover{background:var(--accent-bright);box-shadow:0 4px 16px var(--accent-glow);transform:translateY(-1px)}.toolbar-btn:active{box-shadow:none;transform:translateY(0)}.workspace{flex-direction:column;flex:1;min-height:0;display:flex}.panel-preview{flex:1;justify-content:center;align-items:center;min-height:0;padding:24px;transition:background-color .25s;display:flex;position:relative;overflow:hidden}.panel-preview:before{content:"";pointer-events:none;z-index:0;background-image:linear-gradient(#08852e0b 1px,#0000 1px),linear-gradient(90deg,#08852e0b 1px,#0000 1px),repeating-linear-gradient(#08852e06 0 68px,#0000 68px 136px);background-size:68px 68px,68px 68px,100% 136px;position:absolute;inset:0}.panel-preview>*{z-index:1;position:relative}.logo-wrapper{filter:drop-shadow(0 8px 40px #08852e47)drop-shadow(0 2px 10px #00000059);width:min(420px,90vw);height:min(400px,100%);transition:filter .3s}.panel-controls{border-top:2px solid var(--accent);background:var(--panel);flex-direction:row;flex-shrink:0;align-items:flex-start;gap:28px;padding:14px 20px 16px;display:flex;overflow:auto hidden}.panel-controls::-webkit-scrollbar{height:3px}.panel-controls::-webkit-scrollbar-track{background:0 0}.panel-controls::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.panel-controls::-webkit-scrollbar-thumb:hover{background:var(--accent)}.ctrl-section{flex-direction:column;flex-shrink:0;gap:8px;min-width:0;display:flex}.panel-controls>.ctrl-section:first-child{min-width:220px}.color-sections{flex-flow:wrap;flex-shrink:0;align-items:flex-start;gap:28px;display:flex}.ctrl-section-title{font-family:var(--display);letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--border);white-space:nowrap;padding-bottom:5px;font-size:11px;font-weight:700}.field{align-items:center;gap:8px;display:flex}.field-lbl{width:66px;color:var(--fg-muted);flex-shrink:0;font-size:11px;font-weight:600}.field-input{background:var(--input-bg);border:1px solid var(--border);min-width:0;color:var(--fg);letter-spacing:1px;font-size:13px;font-weight:600;font-family:var(--mono);border-radius:3px;outline:none;flex:1;padding:6px 10px;transition:border-color .15s,box-shadow .15s}.field-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}.color-chips-row{flex-wrap:wrap;align-items:flex-start;gap:10px;display:flex}.color-chip{flex-direction:column;align-items:center;gap:5px;display:flex}.color-chip-swatch{border:2px solid var(--border);cursor:pointer;border-radius:50%;width:44px;height:44px;transition:transform .15s,box-shadow .15s,border-color .15s}.color-chip-swatch:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow), 0 4px 14px #00000059;transform:scale(1.14)}.color-chip-label{font-family:var(--display);letter-spacing:1px;text-transform:uppercase;color:var(--fg-muted);white-space:nowrap;-webkit-user-select:none;user-select:none;font-size:9px;font-weight:700}.color-chip--active .color-chip-swatch{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.color-chip-popover{z-index:1000;background:var(--panel);border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:8px;padding:10px;display:flex;position:fixed;transform:translate(-50%,-100%);box-shadow:0 8px 32px #0006}.color-chip-popover .react-colorful{width:190px;height:160px}.color-chip-popover .react-colorful__saturation{border-radius:4px 4px 0 0}.color-chip-popover .react-colorful__hue{border-radius:4px;height:14px;margin-top:8px}.color-chip-popover-hex{background:var(--input-bg);border:1px solid var(--border);border-radius:4px;align-items:center;gap:2px;padding:5px 8px;transition:border-color .15s,box-shadow .15s;display:flex}.color-chip-popover-hex:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}.color-chip-hex-hash{font-family:var(--mono);color:var(--fg-muted);-webkit-user-select:none;user-select:none;font-size:12px;font-weight:600}.color-chip-hex{font-family:var(--mono);color:var(--fg);letter-spacing:1.5px;text-transform:uppercase;background:0 0;border:none;outline:none;flex:1;width:70px;font-size:12px;font-weight:600}.bg-section{flex-direction:column;gap:8px;display:flex}.bg-presets-row{flex-wrap:wrap;gap:6px;display:flex}.bg-preset{border:2px solid var(--border);cursor:pointer;border-radius:50%;flex-shrink:0;width:20px;height:20px;padding:0;transition:transform .12s,border-color .12s,box-shadow .12s}.bg-preset:hover{border-color:var(--fg-muted);transform:scale(1.2)}.bg-preset--active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.app-footer{background:var(--accent);flex-shrink:0;justify-content:center;align-items:center;height:30px;display:flex}.app-footer-link{font-family:var(--display);letter-spacing:1.5px;text-transform:uppercase;color:#fff9;font-size:10px;font-weight:600;text-decoration:none;transition:color .15s}.app-footer-link:hover{color:#fff}.random-n{opacity:.85;font-style:italic}@media (width>=1200px){.app-header{height:64px;padding:0 24px 0 28px}.app-logo-text{letter-spacing:3px;font-size:32px}.toolbar{gap:12px;padding:10px 28px}.toolbar-btn{letter-spacing:2px;padding:11px 24px;font-size:16px}.panel-controls{gap:36px;padding:16px 26px 18px}.panel-controls>.ctrl-section:first-child{min-width:260px}.color-sections{gap:36px}.ctrl-section{gap:9px}.ctrl-section-title{letter-spacing:2.5px;padding-bottom:6px;font-size:14px}.field-lbl{width:80px;font-size:13px}.field-input{padding:7px 11px;font-size:15px}.color-chips-row{gap:12px}.color-chip{gap:6px}.color-chip-swatch{width:50px;height:50px}.color-chip-label{letter-spacing:1.1px;font-size:11px}.bg-preset{width:26px;height:26px}}@media (width>=1600px){.app-header{height:66px}.app-logo-text{letter-spacing:3px;font-size:34px}.toolbar-btn{padding:12px 28px;font-size:17px}.panel-controls{gap:44px;padding:18px 30px 20px}.panel-controls>.ctrl-section:first-child{min-width:280px}.color-sections{gap:44px}.ctrl-section-title{font-size:15px}.field-lbl{width:86px;font-size:13px}.field-input{font-size:16px}.color-chip-swatch{width:52px;height:52px}.color-chip-label{font-size:11px}}@media (width>=769px) and (width<=1199px){.panel-controls{flex-wrap:wrap;align-content:flex-start;gap:20px;overflow:hidden visible}.color-sections{gap:20px}}@media (width<=768px){.toolbar{justify-content:center}.panel-controls{flex-direction:column;gap:14px;max-height:55dvh;padding:12px 16px 20px;overflow:hidden auto}.panel-controls::-webkit-scrollbar{width:3px;height:0}.ctrl-section{min-width:unset}.panel-controls>.ctrl-section:first-child{min-width:unset;width:100%}.color-sections .color-chip-swatch{width:32px;height:32px}.logo-wrapper{width:min(300px,88vw)}}