.name-page{background:#f7f8f5}.name-page header,.name-page main,.name-page footer{max-width:1280px}.name-page .title-row{padding:24px 0}.name-page h1{font-size:clamp(27px,3.4vw,38px)}.name-page .tool-intro{max-width:none}.local-note{margin-left:auto;font-size:13px;color:#627465}.name-page .workspace{grid-template-columns:minmax(0,1fr) 410px}.name-page .image-stage{height:368px}.name-page #image-canvas{max-height:366px}.name-page .result-panel{padding:20px 22px;background:#fcfdfa}.name-page .color-preview{min-height:104px}.name-page .color-preview #color-name{font-family:inherit;font-size:29px;line-height:1.15;letter-spacing:-.5px;overflow-wrap:anywhere;font-weight:650}.name-page #hero-hex{font:13px/1.5 Consolas,monospace;display:block;margin-top:9px}.name-page .color-preview canvas{width:66px;height:66px}.name-page .panel-label{gap:12px;align-items:center}.name-page #name-match{font-weight:600;letter-spacing:.4px}.name-page #name-note{min-height:36px;color:#596c62}.name-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.name-actions .button{flex:1;padding:0 10px;font-size:13px}.hex-copy code{display:none}.nearby-section{margin-top:20px;border-top:1px solid #dfe5dd;padding-top:15px}.nearby-section h2{font-size:16px;letter-spacing:-.2px}.nearby-section .small-note{margin-top:4px}.name-page #similar-colors{list-style:none;margin:12px 0 14px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.name-page #similar-colors li:not(.nearby-empty){display:grid;grid-template-columns:25px minmax(0,1fr);align-items:center;gap:2px 8px;border:1px solid #dce4d9;border-radius:7px;padding:8px;background:white;min-width:0}.nearby-swatch{width:25px;height:32px;border:1px solid #0002;border-radius:4px;grid-row:span 2}.nearby-name{font-size:12px;line-height:1.4;overflow-wrap:anywhere}.name-page #similar-colors code{font-size:11px;color:#637168}.nearby-empty{grid-column:1/-1;padding:25px 10px;background:#f2f5ef;border:1px dashed #d5dfd0;border-radius:7px;font-size:13px;color:#6b7b65;text-align:center}.method-link{font-size:12px;color:#476744;text-underline-offset:3px}.name-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;padding:42px 0;border-bottom:1px solid #dde4d9}.name-guide h2{font-size:23px;line-height:1.3;letter-spacing:-.5px;margin:12px 0 16px}.name-guide p{font-size:15px;line-height:1.8;color:#536256;margin:12px 0}.name-guide a{color:#376c49;text-underline-offset:3px}.name-faq{max-width:840px}.name-faq p{color:#536256}.name-page .eyebrow{color:#5c7048}.name-page .empty-icon{background:#eaf0e1;color:#72894d;border-color:#d9e3c9}.name-page #empty-state h2{font-size:23px}.name-page #empty-state .small-note{max-width:325px;margin-left:auto;margin-right:auto}.name-page .header-nav [aria-current]{color:#496b39;text-decoration:underline;text-underline-offset:6px}
.name-page .title-row{padding:18px 0}.name-page .input-bar{padding:12px 18px}.name-page #name-note{min-height:0}
@media(max-width:1050px){.name-page .workspace{grid-template-columns:minmax(0,1fr) 350px}.name-page .result-panel{padding:18px 16px}.name-page .image-stage{height:385px}.name-page #image-canvas{max-height:383px}.name-guide{gap:24px}}
@media(max-width:740px){.name-page .title-row{padding:17px 0}.name-page .tool-intro{font-size:14px;line-height:1.5;margin-top:8px}.name-page .workspace{display:flex;flex-direction:column}.name-page .result-panel{order:-1;border-top:0;border-bottom:1px solid #dfe5dd;padding:14px}.name-page:not(:has(#canvas-wrap:not([hidden]))) .result-panel{display:none}.name-page .image-column{padding-top:12px}.name-page .image-stage{height:220px}.name-page #image-canvas{max-height:218px}.name-page .input-bar{padding:12px;gap:8px}.local-note{width:100%;text-align:center;font-size:11px;margin-top:1px}.name-page .color-preview{min-height:82px;padding:12px}.name-page .color-preview #color-name{font-size:28px}.name-page .color-preview canvas{width:56px;height:56px}.name-page #hero-hex{margin-top:5px}.name-page .panel-label{margin-bottom:8px;font-size:11px}.name-page #name-note{min-height:0;font-size:12px;margin-top:8px}.name-actions{margin-top:9px}.name-actions .button{height:38px;min-height:38px}.nearby-section{margin-top:12px;padding-top:10px}.name-page #similar-colors{margin:9px 0 10px;gap:6px}.name-page #similar-colors li:not(.nearby-empty){padding:6px}.name-guide{grid-template-columns:1fr;gap:20px;padding:32px 0}.name-guide h2{font-size:22px;margin:10px 0}.name-guide p{font-size:16px}.name-page #empty-state h2{font-size:21px}.name-page #empty-state p{margin-bottom:8px}.name-page .image-foot{font-size:10px}}