:root{--ink:#252d2b;--muted:#7b8580;--border:#e1e7e3;--green:#22735c;--mint:#e7f2ec;--surface:#f7f9f8;--preview-size:32px;font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--surface);font-synthesis:none;letter-spacing:0}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,summary,select{ -webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{color:inherit;cursor:pointer}button{border:0;background:none}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #288367;outline-offset:4px}svg{width:18px;height:18px;flex-shrink:0;vertical-align:middle}button svg{pointer-events:none}[hidden]{display:none!important}.skip-link{position:fixed;top:-80px;left:20px;background:white;padding:12px;z-index:100}.skip-link:focus{top:10px}.sidebar{width:222px;position:fixed;inset:0 auto 0 0;background:#fff;border-right:1px solid var(--border);z-index:30;overflow-y:auto;padding:28px 18px 18px;scrollbar-width:thin}.brand{display:flex;align-items:center;font-size:23px;font-weight:700;padding:0 10px 29px;white-space:nowrap}.brand-light{font-weight:400}.brand-symbol{position:relative;margin-right:10px;width:32px;height:33px;background:var(--green);color:#fff;font-family:Georgia,serif;font-style:italic;text-align:center;line-height:34px;border-radius:8px;font-size:25px}.brand-symbol span{position:absolute;color:#cce5c9;top:-10px;right:-4px;font-size:27px}.sidebar nav>a{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:500;min-height:36px;padding:8px 12px;border-radius:5px;margin:1px 0;color:#64716a}.sidebar nav>a svg{width:16px;height:16px;color:#78847d}.sidebar nav>a:hover{background:#f3f6f4}.sidebar nav>a[aria-current=page]{background:var(--mint);color:#22674f;font-weight:600}.sidebar nav>a[aria-current=page] svg{color:var(--green)}.active-dot{width:5px;height:5px;border-radius:50%;background:var(--green);margin-left:auto}.nav-label{font-size:9px;font-weight:650;color:#98a099;margin:22px 12px 8px}.sidebar-foot{border-top:1px solid var(--border);margin-top:24px;padding:22px 10px 10px;display:flex;gap:12px;align-items:center;font-size:12px}.sidebar-foot small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.tiny-symbol{font-family:Georgia,serif;font-style:italic;font-size:27px;color:#80928a}.site-main{margin-left:222px}.topbar{height:72px;border-bottom:1px solid var(--border);padding:0 42px;display:flex;align-items:center;justify-content:space-between;background:#fff}.breadcrumb{display:flex;gap:12px;align-items:center;font-size:12px;min-width:0}.breadcrumb>a{color:#87918b}.breadcrumb>svg{width:12px;color:#b1b9b4}.breadcrumb>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-actions{display:flex;align-items:center;gap:25px;flex-shrink:0}.privacy-note{color:#87918b;font-size:11px;display:flex;align-items:center;gap:7px}.privacy-note svg{width:14px;color:#6d9380}.saved-shortcut{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}.saved-count{font-size:10px;min-width:19px;padding:3px;border-radius:4px;text-align:center;background:#edf2ef;color:#6c8073}.topbar .saved-shortcut svg{width:16px}.menu-toggle{display:none!important}main{max-width:1150px;margin:0 auto;padding:39px 48px 0}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.eyebrow{font-size:10px;font-weight:650;color:var(--green);margin:0 0 12px}.page-heading h1{font-size:38px;line-height:1.2;font-weight:650;margin:0 0 10px;overflow-wrap:anywhere}.lead{color:#86918a;font-size:14px;margin:0}.heading-mark{font-family:Georgia,serif;font-style:italic;font-size:66px;color:#bdcec3;position:relative;margin:0 23px 0 30px;flex-shrink:0}.heading-mark span{color:#d79189;font-family:Georgia,serif;font-size:48px;position:absolute;top:-10px;right:-22px}.input-tool{border:1px solid #c6d9cd;border-radius:8px;background:white;box-shadow:0 3px 14px #214c3010;overflow:hidden}.input-label{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 5px;font-size:11px;font-weight:600;color:#6d7c72}.input-label>span{font-size:10px;font-weight:400;color:#a2aaa5}.input-row{display:flex;align-items:center;padding:0 20px 8px 24px;gap:10px}.input-row input{width:100%;min-width:0;font-size:34px;font-weight:450;color:#283d31;border:0;background:none;padding:8px 0;outline:none}.input-row:focus-within{box-shadow:inset 0 -2px #96bda4}.input-row input:disabled{color:#a5aea8}.input-row input::placeholder{font-size:26px;color:#b3bcb6}.icon-button{height:32px;width:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;color:#85938a;flex-shrink:0}.icon-button:hover{background:#eef4ef;color:#2e7256}.input-spark{border-left:1px solid var(--border);padding-left:16px;margin-left:5px;color:#6c947b}.input-spark svg{width:23px;height:23px}.input-foot{display:flex;align-items:center;background:#f9fbf9;border-top:1px solid #eef2ee;padding:12px 24px;color:#8c9b90;font-size:10px;gap:6px;min-height:43px}.live-indicator{height:5px;width:5px;border-radius:50%;background:#7ca58a}.examples{margin-left:auto;display:flex;align-items:center;gap:13px}.examples>span{color:#a0aaa3}.example{font-size:10px;padding:0;border-bottom:1px dotted #acbdb0;color:#617b68}.collection-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);margin-top:27px;scroll-margin-top:15px;gap:12px}.view-tabs{display:flex;gap:24px}.view-tab{position:relative;height:48px;padding:0;display:flex;align-items:center;gap:7px;font-size:12px;color:#8a958e;font-weight:500;white-space:nowrap}.view-tab svg{width:14px;height:14px}.view-tab>span:last-child{font-size:9px;background:#ecf0ed;border-radius:4px;min-width:20px;padding:2px 4px;text-align:center}.view-tab.active{color:#305d43;font-weight:650}.view-tab.active:after{content:"";height:2px;background:#3d8160;position:absolute;bottom:-1px;left:0;right:0}.size-control{display:flex;align-items:center;gap:9px;color:#839185}.size-control svg{width:15px}.size-control input{width:75px;height:3px;accent-color:#548564;cursor:pointer}.filter-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0}.style-chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}.style-chip{flex-shrink:0;border:1px solid #e3e9e4;padding:6px 12px;border-radius:5px;background:#fff;font-size:10px;line-height:16px;color:#829084}.style-chip:hover{border-color:#a3b9aa}.style-chip.active{background:#2a654c;color:#fff;border-color:#2a654c}.results-count{font-size:10px;color:#94a096;white-space:nowrap}.clear-saved{font-size:11px;color:#975955;padding:6px 0}.results-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.result-card{border:1px solid #e3e8e4;border-radius:7px;min-height:173px;background:white;display:flex;flex-direction:column;transition:border-color .16s,box-shadow .16s;min-width:0;overflow:hidden}.result-card:hover{border-color:#b9cbbf;box-shadow:0 3px 10px #324b3610}.result-top{display:flex;gap:8px;align-items:center;min-height:45px;padding:8px 10px 0 20px;font-size:10px;color:#8b958e}.result-top>span:first-child{overflow-wrap:anywhere}.result-top>.save-button{margin-left:auto}.popular{padding:3px 6px;border-radius:3px;background:#edf4e9;color:#7b9667;font-size:8px}.result-value{margin:8px 20px 16px;font-family:"Cambria Math","Segoe UI Symbol","Segoe UI",serif;font-size:var(--preview-size);line-height:1.55;flex:1;min-height:50px;overflow-wrap:anywhere;word-break:break-word;direction:inherit}.tone-rose .result-value{color:#b46b80}.tone-blue .result-value{color:#587baa}.tone-green .result-value{color:#478366}.tone-ink .result-value{color:#434944}.result-bottom{display:flex;align-items:center;justify-content:space-between;min-height:36px;margin:0 19px 12px;gap:8px}.result-bottom>span{font-size:9px;color:#a0aaa3}.copy-button{height:28px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;color:#76877a;border:1px solid #e6ece7;border-radius:4px;min-width:64px;padding:4px 9px;background:#fff}.copy-button svg{width:12px;height:12px}.copy-button:hover,.copy-button.copied{color:#286b4d;background:#edf5ee;border-color:#b9cfbf}.is-saved{color:#397954}.is-saved svg{fill:#dbece0}.icon-button[data-tip]{position:relative}.icon-button[data-tip]:hover:after,.icon-button[data-tip]:focus-visible:after{content:attr(data-tip);position:absolute;right:0;top:31px;background:#314a3a;color:white;padding:4px 6px;font-size:10px;z-index:4;border-radius:3px;white-space:nowrap}.load-area{display:flex;flex-direction:column;align-items:center;gap:17px;padding:26px 0 44px}.load-more{display:flex;align-items:center;gap:14px;justify-content:center;background:#fff;border:1px solid #dce5df;border-radius:5px;padding:11px 24px;font-size:12px;color:#5d7666}.load-more:hover{border-color:#7caa8d}.load-more svg{width:14px;height:14px}.collection-end{font-family:Georgia,serif;font-style:italic;color:#96a197;font-size:12px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:23px}.section-heading>span{font-family:Georgia,serif;font-style:italic;font-size:14px;color:#98a69c}h2{font-size:26px;line-height:1.3;font-weight:550;margin:0}.inspiration{border-top:1px solid var(--border);padding:35px 0 45px}.inspiration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.inspiration-grid img{width:100%;height:auto;aspect-ratio:600/340;object-fit:cover;border-radius:5px;display:block}.inspiration-grid a{display:block;min-width:0}.inspiration-grid a>span{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:11px;color:#697e6e}.inspiration-grid svg{width:14px;height:14px}.editorial{border-top:1px solid var(--border);padding:44px 0;display:grid;grid-template-columns:1fr 1.8fr;gap:46px}.editorial-intro>p:last-child{color:#909e93;font-size:13px;line-height:1.7}.article-body h3{font-size:16px;font-weight:600;margin:0 0 12px}.article-body p,.faq-section details p{font-size:13px;line-height:1.9;color:#7a897e;margin:0}.article-body section+section{margin-top:28px}.faq-section{border-top:1px solid var(--border);padding:42px 0;display:grid;grid-template-columns:1fr 1.8fr;gap:46px}.faq-section details{border-bottom:1px solid var(--border)}.faq-section summary{list-style:none;display:flex;gap:15px;align-items:center;justify-content:space-between;cursor:pointer;font-size:12px;font-weight:550;padding:17px 0;line-height:1.65}.faq-section details:first-child summary{padding-top:0}.faq-section summary::-webkit-details-marker{display:none}.faq-section summary svg{width:14px;height:14px;color:#829787}.faq-section details[open] summary svg{transform:rotate(45deg)}.faq-section details p{padding-bottom:18px}footer{border-top:1px solid var(--border);padding:24px 0;display:flex;align-items:center;gap:22px;font-size:10px;color:#9ca79f}.footer-brand{font-size:17px;font-weight:600;color:#637b6c}.footer-brand span{color:#cd8d86}.footer-brand+span{font-family:Georgia,serif;font-style:italic}footer nav{margin-left:auto;display:flex;gap:20px;align-items:center}footer nav button{font-size:10px;padding:0;color:#7f9285}footer nav a{display:flex;align-items:center;gap:6px}footer nav svg{width:12px;height:12px}#toast{position:fixed;bottom:28px;left:calc(50% + 111px);transform:translate(-50%,15px);background:#2a4c39;color:#fff;border:1px solid #456b54;border-radius:6px;padding:12px 21px;box-shadow:0 5px 20px #243f3520;font-size:12px;max-width:min(440px,90%);z-index:70;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;text-align:center}#toast.visible{opacity:1;transform:translate(-50%,0)}.empty-state{grid-column:1/-1;text-align:center;padding:60px 20px;border:1px dashed #c6d7cb;border-radius:6px}.empty-state>svg{width:26px;height:26px;color:#86a590}.empty-state h3{font-size:17px;font-weight:500;margin:16px 0 20px}.primary-button{display:inline-flex;gap:8px;align-items:center;justify-content:center;background:#2a654c;border:1px solid #2a654c;color:#fff;border-radius:5px;padding:10px 17px;font-size:12px}.primary-button:hover{background:#214e3b}.utility-output{padding:28px 0 40px}.utility-settings{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-bottom:24px}.utility-settings label{display:flex;gap:12px;align-items:center;font-size:12px;color:#738579}.utility-settings input[type=number]{width:80px}.utility-settings input,.utility-settings select{border:1px solid #cadbd0;border-radius:4px;background:white;padding:8px;accent-color:var(--green)}.utility-output>label{font-size:11px;display:block;color:#7d8c81;margin-bottom:10px}.utility-output textarea{width:100%;min-height:170px;resize:vertical;border:1px solid #cbdad0;background:#fff;border-radius:7px;padding:20px;font-size:27px;color:#326849;line-height:1.8;overflow-wrap:anywhere;margin-bottom:15px}dialog{max-width:490px;width:calc(100% - 32px);padding:27px;border:1px solid #c5d5ca;border-radius:8px;color:var(--ink);box-shadow:0 20px 80px #1f382c30}dialog::backdrop{background:#1c322b65}dialog h2{font-size:23px}dialog p{font-size:14px;line-height:1.8;color:#6b7c70}.dialog-heading{display:flex;gap:20px;align-items:center;justify-content:space-between}.dialog-actions{display:flex;gap:16px;justify-content:flex-end;margin-top:24px}.dialog-actions>button{font-size:12px}.mobile-scrim{display:none}
@media(min-width:1550px){main{max-width:1220px;padding-left:64px;padding-right:64px}.results-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.topbar{padding-left:64px;padding-right:64px}}
@media(max-width:1100px){.sidebar{width:194px;padding-left:12px;padding-right:12px}.brand{font-size:21px}.site-main{margin-left:194px}main{padding:32px 28px 0}.topbar{padding:0 28px}.topbar-actions{gap:14px}.page-heading h1{font-size:32px}.privacy-note{display:none}.editorial,.faq-section{gap:25px;grid-template-columns:1fr 1.6fr}.results-count{display:none}.style-chips{gap:6px}.style-chip{padding:5px 10px}#toast{left:calc(50% + 97px)}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);width:235px;transition:transform .2s;z-index:60}.menu-open .sidebar{transform:translateX(0)}.menu-open{overflow:hidden}.mobile-scrim{position:fixed;inset:0;background:#1e332866;z-index:50;display:block}.site-main{margin-left:0}.topbar{height:61px;padding:0 18px;gap:12px}.menu-toggle{display:inline-flex!important;margin-left:-5px}.breadcrumb{gap:8px}.breadcrumb>a{display:none}.breadcrumb>svg{display:none}.breadcrumb>span{font-size:12px}.topbar-actions{gap:0}.saved-shortcut{font-size:11px;gap:6px}main{padding:28px 20px 0}.page-heading{margin-bottom:23px}.page-heading h1{font-size:28px;line-height:1.25;max-width:270px}.heading-mark{font-size:47px;margin-left:15px;margin-right:15px}.heading-mark span{font-size:36px;right:-15px}.eyebrow{font-size:9px;margin-bottom:10px}.lead{font-size:12px;line-height:1.6}.input-label{padding:17px 18px 2px}.input-row{padding:0 14px 8px 18px;gap:4px}.input-row input{font-size:29px}.input-row input::placeholder{font-size:23px}.input-spark{padding-left:10px}.input-foot{padding:11px 17px}.input-foot>span:not(.live-indicator){display:none}.examples{margin-left:auto;gap:12px}.examples>span{font-size:10px}.collection-head{margin-top:21px}.view-tabs{gap:23px}.view-tab{font-size:12px}.size-control input{width:53px}.filter-row{padding:15px 0}.style-chips{width:100%;gap:7px}.style-chip{padding:5px 10px;font-size:10px}.results-grid{gap:11px}.result-card{min-height:159px}.result-top{padding:7px 6px 0 13px;gap:3px;font-size:9px}.result-top .popular{display:none}.result-top>.save-button{width:27px;height:29px}.result-top .save-button svg{width:15px}.result-value{font-size:min(var(--preview-size),28px);margin:7px 13px 11px;min-height:46px;line-height:1.65}.result-bottom{margin:0 12px 9px;min-height:29px}.result-bottom>span{font-size:8px}.char-label{display:none}.copy-button{font-size:9px;min-width:55px;padding:3px 7px;height:26px;gap:4px}.copy-button svg{width:11px}.load-area{padding:23px 0 34px}.inspiration{padding:30px 0}.section-heading h2{font-size:23px}.section-heading>span{display:none}.inspiration-grid{gap:11px}.inspiration-grid a>span{font-size:10px;gap:4px}.inspiration-grid img{aspect-ratio:1;object-fit:cover}.inspiration-grid svg{width:12px}.editorial,.faq-section{display:block;padding:30px 0}.editorial-intro,.faq-section>div:first-child{margin-bottom:25px}h2{font-size:25px}.article-body p,.faq-section details p{font-size:13px}.article-body h3{font-size:15px}.article-body section+section{margin-top:24px}footer{flex-wrap:wrap;gap:13px;font-size:10px}footer nav{margin-left:auto;gap:13px}.footer-brand+span{display:none}#toast{left:50%;bottom:20px;font-size:11px}.utility-settings{gap:18px}.utility-settings label{font-size:11px}.utility-output textarea{font-size:23px}.collection-end{font-size:11px}}
@media(max-width:360px){main{padding-left:14px;padding-right:14px}.page-heading h1{font-size:26px}.heading-mark{display:none}.size-control{gap:4px}.size-control input{width:40px}.view-tabs{gap:15px}.result-top{padding-left:10px;font-size:8px}.result-value{margin-left:10px;margin-right:10px;font-size:min(var(--preview-size),25px)}.result-bottom{margin-left:10px;margin-right:10px}.inspiration-grid a>span{font-size:9px}}
.result-top{color:#6e7c72}.result-bottom>span{color:#7d8b81}.copy-button{color:#54705e}.style-chip{color:#697b6e}.lead{color:#718176}.input-label>span{color:#788d7e}
@media(max-width:760px){.breadcrumb>a{display:block;font-size:16px;font-weight:600;color:#335642}.breadcrumb>span{display:none}.copy-button{height:32px;min-width:58px;font-size:10px}.result-top>.save-button{height:32px;width:30px}.result-top{font-size:10px}.input-foot>.live-indicator{display:none}}
.information-content{max-width:760px;padding:8px 0 44px}.information-content h2{font-size:21px;line-height:1.4;margin:0 0 12px}.information-content>p{margin-top:28px}.information-content a{text-decoration:underline;text-underline-offset:3px}.topbar>a{display:flex;align-items:center;gap:6px;font-size:12px;flex-shrink:0}.topbar>a svg{width:16px;height:16px}
.ui-copy::after{content:"Copy"}.copied .ui-copy::after,.copied .ui-copy-result::after{content:"Copied"}.ui-copy-result::after{content:"Copy result"}.char-label::after{content:"characters"}.ui-saved::after{content:"Saved"}.ui-all-designs::after{content:"All designs"}.ui-more::after{content:"More designs"}.ui-clear-saved::after{content:"Clear saved"}.ui-design::after{content:"design"}.ui-designs::after{content:"designs"}.ui-clear-question::after{content:"Clear saved designs?"}.ui-cancel::after{content:"Cancel"}.ui-popular::after{content:"Popular"}
.ui-copy{display:inline-block;min-width:36px;text-align:center}.ui-copy-result{display:inline-block;min-width:70px;text-align:center}.dialog-title{font-size:23px;font-weight:550;line-height:1.3;margin:0;color:var(--ink)}
.game-options{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:18px;font-size:13px}.game-options label{display:flex;align-items:center;gap:8px}.game-options input[type="text"]{width:120px;max-width:100%;border:1px solid #cbd6ce;border-radius:4px;padding:9px 10px;font:inherit;background:#fff}.game-options input[type="checkbox"]{width:17px;height:17px;accent-color:#335642}.game-options a,.game-rename a{text-decoration:underline;text-underline-offset:3px}.game-examples,.game-rename{padding:32px 0;border-top:1px solid #e1e8e3}.game-examples h2,.game-rename h2{font-size:24px;line-height:1.35;margin:0 0 20px}.nickname-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;list-style:none;margin:0;padding:0}.nickname-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;min-height:58px;padding:10px 0;border-bottom:1px solid #e7ece8}.nickname-example{font-size:22px;overflow-wrap:anywhere;min-width:0}.nickname-list .copy-button{flex-shrink:0}.game-rename{font-size:14px;line-height:1.8}.game-rename ol{padding-left:22px}.game-rename p,.game-rename ol{max-width:760px}.game-rename h3{font-size:17px;margin-top:24px}.game-rename>.copy-button{height:38px;font-size:13px;gap:10px}.game-rename>.copy-button svg{width:16px}.game-options input:focus-visible{outline:2px solid #335642;outline-offset:3px}
@media(max-width:600px){.nickname-list{grid-template-columns:minmax(0,1fr)}.game-examples h2,.game-rename h2{font-size:22px}.game-options{font-size:12px;gap:10px 14px}}
.tool-presets{display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px;border-top:1px solid #e1e8e3}.tool-preset{background:none;border:0;border-bottom:1px solid #a8bab0;padding:5px 0;margin-right:12px;color:#335642;font:inherit;font-size:12px;cursor:pointer}.tool-preset:hover{border-color:#335642}.tool-preset:focus-visible{outline:2px solid #335642;outline-offset:3px}.utility-settings select{max-width:100%;min-width:0}.utility-settings label{min-width:0;max-width:100%}.tool-examples{padding:30px 0;border-top:1px solid #e1e8e3}.tool-examples h2{font-size:24px;line-height:1.35;margin:0 0 20px}.tool-example-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;list-style:none;padding:0;margin:0}.tool-example-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;min-height:90px;padding:14px 0;border-bottom:1px solid #e1e8e3}.tool-example-list li>div{min-width:0}.tool-example-label{display:block;font-size:12px;color:#54705e;margin-bottom:7px}.tool-example-value{display:block;font-size:23px;line-height:1.7;overflow-wrap:anywhere}.tool-example-list .copy-button{flex-shrink:0}.blank-sample{display:inline-block;min-width:70px;min-height:36px;border:1px dashed #9aad9f;border-radius:3px}#blank-status{font-size:13px;color:#54705e;margin:10px 0 16px}body[data-page="blank"] .utility-output{margin-top:0}
@media(max-width:600px){.tool-example-list{grid-template-columns:minmax(0,1fr)}.tool-examples h2{font-size:22px}.tool-presets{padding:10px 17px}.utility-settings{flex-wrap:wrap}.utility-settings label{flex-wrap:wrap}.tool-example-value{font-size:21px}}
.category-nav{display:flex;align-items:center;gap:12px;position:relative;min-width:0;padding:16px 0}
.category-scroll{display:flex;align-items:center;flex:1;min-width:0;gap:4px}
.category-nav .style-chips{flex:1;min-width:0;width:auto;gap:8px;overscroll-behavior-x:contain;scroll-padding:4px;padding:4px 0}
.category-nav .style-chip{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;font-size:13px;line-height:20px;color:#54705e;white-space:nowrap}
.category-nav .style-chip.active{color:#fff}
.category-next{flex-shrink:0;width:30px;height:44px;display:flex;align-items:center;justify-content:center;color:#335642;border-radius:4px}
.category-next:hover{background:#e7f2ec}.category-next:disabled{visibility:hidden}
.categories-menu{flex-shrink:0}
.categories-menu summary{height:44px;display:flex;align-items:center;justify-content:center;gap:8px;list-style:none;cursor:pointer;border:1px solid #b8cdbf;border-radius:5px;padding:8px 12px;background:#fff;color:#335642;font-size:13px;font-weight:600;white-space:nowrap}
.categories-menu summary::-webkit-details-marker{display:none}
.categories-menu summary svg{width:16px;height:16px}
.categories-menu[open] summary{background:#e7f2ec;border-color:#548564}
.categories-panel{position:absolute;top:calc(100% - 6px);left:0;right:0;z-index:40;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:20px;border:1px solid #c6d9cd;border-radius:6px;background:#fff;box-shadow:0 8px 24px #214c301a;max-height:min(65vh,var(--category-panel-height,65vh));overflow-y:auto;overscroll-behavior:contain}
.categories-menu.opens-up .categories-panel{top:auto;bottom:calc(100% - 6px)}
.categories-panel .category-home{grid-column:1/-1}
.categories-panel h2{font-size:12px;font-weight:650;color:#718176;margin:0 0 8px}
.categories-panel section>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.categories-panel a{display:flex;align-items:center;min-height:44px;padding:8px;border-radius:4px;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.categories-panel a:hover{background:#f3f6f4}.categories-panel a.active{background:#e7f2ec;color:#22674f;font-weight:600}
.category-nav+.filter-row{padding:0 0 12px}.filter-row:not(:has(> :not([hidden]))){display:none}
@media(max-width:1100px){.category-nav+.filter-row:not(:has(> .clear-saved:not([hidden]))){display:none}}
@media(max-width:760px){.category-nav{gap:8px;padding:12px 0}.category-nav .style-chip{padding:8px 12px}.category-next{width:24px}.categories-menu summary{gap:6px;padding:8px 10px}.categories-menu summary svg{width:14px;height:14px}.categories-panel{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px}.categories-panel section>div{gap:4px 12px}.result-value{font-size:var(--preview-size)}.size-control input{height:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}