@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&display=swap');
:root{--bg:#f8f8f2;--ink:#282c25;--muted:#777a71;--line:#ddded4;--accent:#d5e6a3}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:14px}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit;color:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}header{height:96px;display:flex;align-items:center;border-bottom:1px solid var(--line);margin:0 4%;gap:50px}.wordmark{font-size:25px;font-weight:650;letter-spacing:-1.2px;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}.brand-icon{font-size:36px;line-height:1}.brand-dot{font-size:11px;align-self:flex-start;letter-spacing:0;margin-left:-7px;margin-top:5px}nav{display:flex;gap:28px;margin-left:auto}.nav-link{border:0;background:transparent;font-size:13px;padding:9px 0;display:flex;gap:16px;align-items:center}.nav-link.active{border-bottom:1px solid var(--ink)}.nav-link span{font-size:12px;color:var(--muted)}#saved-count{border:1px solid #d6d8cc;border-radius:50%;min-width:20px;height:20px;display:grid;place-items:center}.header-note{font-size:11px;color:var(--muted);margin-left:5vw}.intro{padding:61px 4% 0}.eyebrow,.section-label,.tiny-label{font-size:10px;letter-spacing:1.25px;font-weight:550}.eyebrow{display:flex;align-items:center;gap:9px}.status-dot{width:6px;height:6px;background:#73834f;border-radius:50%}.intro-row{display:flex;align-items:flex-end;justify-content:space-between;padding:25px 0 48px}h1{font-weight:450;font-size:clamp(45px,5.4vw,82px);line-height:1.04;letter-spacing:-4.3px;margin:0}h1 span{color:#858a7c}.intro-copy{padding:0 1.2% 5px 30px;font-size:15px;line-height:1.6}.intro-copy p{margin:0 0 22px}.intro-copy a{font-size:12px;border-bottom:1px solid #aeb4a2;padding-bottom:7px}.intro-copy a span{margin-left:35px}.hero-bottom{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:17px 0;color:var(--muted);font-size:9px;letter-spacing:1.1px}.library{padding:39px 4% 0}.library-top{display:flex;justify-content:space-between;align-items:center}.section-label{margin-right:13px}#result-count{color:var(--muted);font-size:11px}.view-controls{display:flex;align-items:center;gap:5px}.tiny-label{font-size:8px;color:var(--muted);margin-right:8px}.view{background:transparent;border:1px solid transparent;width:29px;height:28px;font-size:20px;border-radius:3px;color:#8c9083}.view.active{border-color:#d8dbcf;color:var(--ink);background:#eeeFE6}.filter-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:25px 0 27px}.filters{display:flex;gap:6px;flex-wrap:wrap}.filter{font-size:11px;border:1px solid var(--line);background:transparent;border-radius:5px;padding:9px 13px;white-space:nowrap}.filter span{font-size:9px;margin-left:6px;opacity:.55}.filter.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}.filter:hover:not(.active){background:#e9ecdf}.sort-label{font-size:10px;color:var(--muted);white-space:nowrap}select{border:0;background:transparent;font-size:11px;margin-left:6px;max-width:140px;cursor:pointer}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}.grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}.card{min-width:0}.art-button{border:0;padding:0;display:block;width:100%;overflow:hidden;background:#e7eada;position:relative;border-radius:3px;aspect-ratio:1.19}.art-button svg{display:block;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.art-button:hover svg{transform:scale(1.035)}.open-indicator{position:absolute;right:16px;bottom:16px;background:var(--bg);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;opacity:0;transform:translateY(5px);transition:.2s}.art-button:hover .open-indicator,.art-button:focus-visible .open-indicator{opacity:1;transform:none}.card-meta{display:flex;align-items:center;justify-content:space-between;padding:14px 1px 0}.card-title{border:0;background:none;padding:0;font-size:13px;font-weight:500}.card-code{font-size:9px;color:var(--muted);margin-right:8px}.save{border:0;background:none;display:flex;gap:6px;align-items:center;font-size:17px;padding:0 1px}.save span{font-size:10px;color:var(--muted)}.save.saved{color:#637342}.card-category{display:block;font-size:9px;color:var(--muted);margin-top:6px;letter-spacing:.2px}.collection-end{border-top:1px solid var(--line);margin-top:43px;padding:23px 0;display:flex;justify-content:space-between;align-items:center}.collection-end>span{font-size:9px;letter-spacing:1px;color:var(--muted)}.collection-end button{border:0;background:transparent;font-size:12px}.collection-end button span{margin-left:20px}.outro{margin:50px 4% 70px;background:#e8eddf;padding:55px;text-align:center;border-radius:3px}.outro-icon{font-size:48px}.outro h2{font-size:42px;line-height:1.08;font-weight:450;letter-spacing:-1.8px;margin:20px 0}.outro p{color:#747c68;line-height:1.7;font-size:13px}.outro button{border:1px solid #b4bda4;background:transparent;border-radius:4px;padding:12px 18px;margin-top:13px;font-size:12px}footer{margin:0 4%;padding:25px 0 34px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}footer .wordmark{font-size:19px}footer>span{font-size:9px;color:var(--muted)}footer>span:first-of-type{letter-spacing:.8px}footer button{background:none;border:0;font-size:10px}dialog{border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);padding:22px;max-height:94vh;box-shadow:0 20px 100px #0003}dialog::backdrop{background:#242a235e;backdrop-filter:blur(6px)}#editor{width:1000px;max-width:94vw}.editor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.icon-button{background:none;border:0;font-size:21px;padding:4px 8px}.editor-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:32px}#editor-preview{display:flex;align-items:center;background:#e6e9dc;border-radius:3px;overflow:hidden;min-height:400px}#editor-preview svg{width:100%;height:auto;display:block}.editor-controls{padding:12px 12px 10px 0}.editor-controls h2{font-size:34px;letter-spacing:-1px;font-weight:450;margin:14px 0}.editor-controls p{color:var(--muted);line-height:1.6;font-size:12px;margin-bottom:26px}.editor-controls>label{font-size:12px;display:block;margin:22px 0}output{float:right;color:var(--muted);font-size:10px}input[type=range]{display:block;width:100%;margin:13px 0;accent-color:#66754b}.color-row{display:flex;gap:18px;margin:24px 0}.color-row label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;width:50%}input[type=color]{width:34px;height:28px;padding:2px;background:transparent;border:1px solid var(--line);border-radius:3px;cursor:pointer}.primary,.secondary{width:100%;border:1px solid #cdd1c2;background:transparent;border-radius:4px;padding:12px 15px;margin:5px 0;font-size:12px}.primary{background:var(--ink);color:var(--bg);border-color:var(--ink);display:flex;justify-content:space-between}.download-note{font-size:8px;color:var(--muted);letter-spacing:.8px;display:block;text-align:center;margin-top:15px}#about{max-width:530px;padding:50px}#about .icon-button{position:absolute;top:14px;right:13px}#about h2{font-weight:450;letter-spacing:-2px;font-size:48px;line-height:1.05}#about p{line-height:1.7;color:var(--muted)}.about-credit{font-size:11px;margin-top:30px}.about-credit a{border-bottom:1px solid var(--line)}#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,15px);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:5px;opacity:0;pointer-events:none;transition:.25s;font-size:12px;z-index:10}#toast.show{opacity:1;transform:translate(-50%,0)}.empty{grid-column:1/-1;padding:80px 20px;text-align:center;color:var(--muted);line-height:1.8}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #83995b;outline-offset:4px}@media(min-width:1550px){main,header,footer{max-width:1500px;margin-left:auto;margin-right:auto}}@media(max-width:1000px){.header-note{display:none}h1{letter-spacing:-3px}.intro-copy{font-size:13px}.filter-row{align-items:flex-start}.filters{max-width:72%}.grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}.grid{gap:25px 16px}.card-title{font-size:11px}.card-code{margin-right:4px}footer>span:first-of-type{display:none}}@media(max-width:650px){header{height:75px;gap:10px}.wordmark{font-size:22px}nav{gap:14px}.nav-link{font-size:11px;gap:6px}.brand-icon{font-size:29px}#about-open{display:none}.intro{padding-top:35px}.intro-row{display:block;padding:25px 0 30px}h1{font-size:49px;letter-spacing:-2.9px}.intro-copy{padding:25px 0 0}.intro-copy p{margin-bottom:15px}.hero-bottom{font-size:7px;letter-spacing:.6px;gap:20px}.library{padding-top:25px}.filter-row{display:block;margin-top:18px}.filters{max-width:none;gap:6px}.filter{padding:8px 10px;font-size:10px}.sort-label{display:block;margin-top:18px}.grid,.grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}.card-code{display:none}.card-title{font-size:11px}.card-meta{padding-top:10px}.save{font-size:15px;gap:3px}.save span{font-size:8px}.card-category{font-size:8px}.collection-end>span{font-size:7px;max-width:170px;line-height:1.6}.outro{padding:35px 15px;margin-top:30px;margin-bottom:40px}.outro h2{font-size:34px}.outro-icon{font-size:36px}footer{flex-wrap:wrap;gap:20px 10px}footer>span{font-size:8px}.editor-layout{grid-template-columns:1fr;gap:12px}#editor-preview{min-height:0;aspect-ratio:1.2}.editor-controls{padding:10px}.editor-controls h2{margin:10px 0}.editor-controls p{margin-bottom:12px}.editor-controls>label{margin:16px 0}#about{padding:40px 27px}#about h2{font-size:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
/* Poster studio */
#poster-studio{width:1320px;max-width:97vw;height:94vh;max-height:94vh;padding:0;overflow:hidden}.poster-header{display:flex;justify-content:space-between;align-items:center;padding:23px 30px;border-bottom:1px solid var(--line);height:100px}.poster-header h2{font-size:24px;letter-spacing:-.7px;font-weight:450;margin:8px 0 0}.poster-header .eyebrow{font-size:8px;color:var(--muted)}.poster-workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;height:calc(100% - 100px)}.poster-stage{min-width:0;background:#e6e8df;padding:32px 40px 14px;display:flex;flex-direction:column;align-items:center;overflow:auto}.poster-preview-wrap{flex:1;min-height:100px;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.poster-preview-wrap canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 8px 24px #252a2026;position:absolute}.poster-preview-footer{width:100%;display:flex;justify-content:space-between;gap:12px;margin-top:24px;font-size:8px;letter-spacing:.7px;color:#73796b}.poster-preview-footer span:first-child{letter-spacing:0}#poster-status{font-size:11px;min-height:16px;color:#6b5842;margin:10px 0 0;text-align:center}.poster-sidebar{overflow:auto;padding:24px;border-left:1px solid var(--line);background:var(--bg);overscroll-behavior:contain}.poster-section{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}.poster-section-label{font-size:8px;letter-spacing:1.2px;color:var(--muted);margin-bottom:18px}.poster-sidebar label{display:block;font-size:11px;margin:15px 0 7px}.poster-sidebar label span{font-size:9px;color:var(--muted);float:right}.poster-sidebar select,.poster-sidebar textarea,.poster-sidebar input:not([type=range]):not([type=color]){display:block;width:100%;max-width:none;margin:0;background:#fff5;border:1px solid #d6d9cd;border-radius:4px;padding:9px 10px;font:inherit;font-size:12px;color:var(--ink)}.poster-sidebar textarea{resize:vertical;min-height:58px;max-height:130px}.poster-field-pair{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}.poster-field-pair select{font-size:10px}.poster-layouts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:20px 0}.poster-layouts button{padding:11px 5px;border:1px solid var(--line);border-radius:4px;background:none;font-size:9px;color:var(--muted)}.poster-layouts button.selected{background:#e9eddf;border-color:#778364;color:var(--ink)}.layout-symbol{display:block;font-size:20px;line-height:.9;height:43px;letter-spacing:-1px}.poster-sidebar input[type=range]{width:100%;accent-color:#66754b;margin:6px 0}.poster-palettes{display:flex;gap:9px;margin-bottom:17px}.poster-palette{width:40px;height:28px;display:flex;overflow:hidden;border:1px solid #c4c8b9;padding:0;border-radius:4px;background:none}.poster-palette span{height:100%;flex:1}.poster-palette.active{outline:2px solid #7e8b66;outline-offset:3px}.poster-colors{display:flex;justify-content:space-between;gap:15px}.poster-colors label{display:flex;flex-direction:column;gap:7px;flex:1;margin-top:0;font-size:10px}.poster-colors input[type=color]{width:100%;height:30px}.poster-export>div{font-size:10px;color:var(--muted);margin-bottom:12px}.poster-export p{font-size:9px;line-height:1.7;color:var(--muted);margin:10px 0 0}.poster-sidebar button:disabled{opacity:.5;cursor:wait}.poster-sidebar button:focus-visible,.poster-sidebar input:focus-visible,.poster-sidebar textarea:focus-visible{outline:2px solid #83995b;outline-offset:3px}.poster-launch{margin-bottom:10px}#download span{float:right}
@media(max-width:850px){#poster-studio{height:96vh;max-height:96vh;max-width:98vw}.poster-header{padding:17px 20px;height:87px}.poster-header h2{font-size:20px}.poster-workspace{height:calc(100% - 87px);grid-template-columns:minmax(0,1fr) 285px}.poster-stage{padding:24px 20px 12px}.poster-sidebar{padding:18px}}@media(max-width:620px){#poster-studio{height:96vh;max-height:96vh;overflow:auto}.poster-header{height:auto;min-height:84px;padding:15px 18px}.poster-header h2{font-size:18px}.poster-workspace{height:auto;display:block}.poster-stage{height:53vh;min-height:300px;padding:20px 22px 10px}.poster-preview-footer{margin-top:15px;font-size:7px}.poster-sidebar{overflow:visible;border-left:0;border-top:1px solid var(--line);padding:25px}.poster-section{padding-bottom:20px}.poster-export{padding-bottom:15px}}

/* Comfortable native slider targets for touch and mouse input. */
input[type=range]{min-height:44px;touch-action:pan-y;cursor:ew-resize}
