:root{font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#243f34;background:#f8fbf8;font-synthesis:none;-webkit-text-size-adjust:100%;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0;line-height:1.65}button,input{font:inherit}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #4ca37e;outline-offset:3px}.page{max-width:1196px;margin:auto;padding:0 28px}.topbar{height:83px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5eee8}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:20px;line-height:1.2}.brand b{font-size:20px;letter-spacing:-.02em}.brand small{display:block;margin-top:4px;color:#759085;font-size:9px;font-weight:800;letter-spacing:.17em}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#2d7657;color:#fff;font-family:Georgia,serif;font-style:italic;font-weight:bold;font-size:30px}.top-back{font-size:13px;font-weight:700;color:#567b6a;text-decoration:none;padding:9px 14px;background:#eef6ef;border-radius:9px}.top-back:hover{background:#dcece1}.intro{padding:55px 0 47px}.eyebrow{margin:0 0 10px;color:#3b8c65;font-size:11px;font-weight:850;letter-spacing:.16em}.intro h1{margin:0;color:#1d3d2e;letter-spacing:-.055em;font-size:clamp(30px,4.5vw,51px);line-height:1.3}.intro h1 .highlight{display:inline-block;font-weight:500;color:#5e806b;font-size:.78em;letter-spacing:-.06em}.intro-desc{margin:19px 0 21px;color:#5a7164;font-size:15px;line-height:1.9}.intro-tags{display:flex;flex-wrap:wrap;gap:8px}.intro-tags span{font-size:11px;font-weight:720;background:#ebf3ec;color:#54836a;padding:5px 11px;border-radius:20px}.workspace,.name-section,.palette-section,.faq{margin-bottom:34px;padding:31px 32px 33px;border:1px solid #e0ece3;border-radius:20px;background:white;box-shadow:0 8px 26px rgba(42,85,58,.035)}.section-heading{display:flex;gap:12px;justify-content:space-between;align-items:end;margin-bottom:24px}.section-heading h2,.faq h2{margin:0;color:#244736;font-size:23px;letter-spacing:-.045em}.hint{margin:0;color:#82988b;font-size:12px}.studio-grid{display:grid;grid-template-columns:.96fr 1.04fr;gap:29px}.preview-panel{min-width:0}.preview{min-height:246px;display:flex;align-items:center;justify-content:center;background:#6f4e37;border-radius:15px;overflow:hidden;transition:background .13s ease}.preview-inner{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.preview-kicker{font-size:11px;font-weight:700;letter-spacing:.14em;opacity:.78}.preview-inner strong{font-size:clamp(28px,3vw,38px);line-height:1.4;letter-spacing:.04em}.preview-inner #preview-name{font-size:13px;font-weight:700}.pick-row{display:flex;align-items:center;gap:14px;border-bottom:1px solid #edf2ed;padding:19px 0}.picker-label{display:flex;align-items:center;gap:7px;font-weight:800;font-size:14px}.picker-icon{font-size:19px;color:#52846a}.pick-row input[type=color]{width:52px;height:43px;padding:4px;border:1px solid #cbdccb;border-radius:10px;background:#fff;cursor:pointer}.picker-help{margin-left:auto;font-size:12px;color:#80958a}.sample-row{padding-top:15px;font-size:12px;color:#6f877a;display:flex;align-items:center;justify-content:space-between;gap:10px}.sample-plates{display:flex;gap:8px}.sample-plates span{display:inline-block;padding:6px 15px;border-radius:8px;font-weight:750;background:#6f4e37;color:#fff;font-size:12px}.sample-plates span+span{color:#6f4e37;background:#fff;border:1px solid #6f4e37}.values-panel{min-width:0}.code-entry{margin-bottom:19px}.code-entry>label{display:block;font-size:13px;font-weight:800;margin-bottom:7px}.code-entry label small{margin-left:7px;font-size:11px;font-weight:500;color:#7e9588}.field-copy{display:flex;gap:8px}.field-copy input{flex:1;width:10px;background:#f8faf8;border:1px solid #d9e5dc;border-radius:9px;padding:11px 13px;outline:none;color:#234534;font-size:16px;font-weight:760;font-variant-numeric:tabular-nums}.field-copy input:focus,.rgb-row input:focus,.search-box:focus-within{border-color:#55a37d;box-shadow:0 0 0 3px #e5f4e9}.field-copy input[readonly]{background:#f2f6f3}.copy-btn{min-width:69px;border:1px solid #c9dfcf;background:#eff8f1;color:#2b7350;border-radius:9px;font-size:12px;font-weight:800;padding:10px}.copy-btn:hover{background:#dcf0e2}.input-error{margin:3px 0 0;color:#b64031;font-size:11px;min-height:0}.rgb-row{display:flex;gap:8px}.rgb-row label{display:flex;align-items:center;flex:1;min-width:0;padding:0 10px;gap:8px;border:1px solid #d9e5dc;border-radius:9px;background:#f8faf8}.rgb-row label span{font-size:12px;font-weight:820;color:#62916f}.rgb-row input{min-width:0;width:100%;border:0;background:transparent;padding:10px 0;outline:none;color:#234534;font-variant-numeric:tabular-nums;font-size:15px;font-weight:700}.rgb-row input::-webkit-inner-spin-button{opacity:.3}.hsl-controls{display:grid;gap:9px;padding:2px 0 8px}.hsl-controls label{display:grid;grid-template-columns:39px 1fr;align-items:center;gap:8px;font-size:12px;font-weight:750;color:#668676}.hsl-controls label span{grid-column:2;grid-row:1;justify-self:end;font-variant-numeric:tabular-nums}.hsl-controls input{grid-column:1/-1;accent-color:#398863;width:100%;height:6px;margin:0 0 6px;cursor:pointer}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.soft-btn{border:1px solid #d8e8dc;color:#446b54;background:white;border-radius:10px;font-size:12px;font-weight:740;padding:10px 12px}.soft-btn:hover{background:#f3f8f3}.search-panel{background:#f5faf6;border:1px solid #e5efe7;border-radius:14px;padding:18px}.search-panel>label{font-weight:810;font-size:14px;display:block;margin-bottom:8px}.search-box{display:flex;align-items:center;border:1px solid #d6e4d9;background:white;border-radius:10px;padding:0 13px;transition:box-shadow .15s}.search-box>span{font-size:27px;color:#75a184;margin-right:8px;line-height:1}.search-box input{height:49px;border:0;outline:none;width:100%;min-width:0;background:transparent;font-size:14px;color:#294638}.search-box button{border:0;background:transparent;color:#749283;font-size:25px;padding:3px 8px}.chip-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}.chip-list button{font-size:11px;color:#538064;background:white;border:1px solid #e1eae2;border-radius:30px;padding:4px 12px}.chip-list button:hover{background:#e5f0e9}.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap;margin:20px 0 13px}.filters{display:flex;gap:6px;flex-wrap:wrap}.filters button{border:1px solid #e0e9e2;background:white;border-radius:30px;font-size:12px;color:#6b8173;padding:8px 14px;font-weight:710}.filters button.active{background:#337b57;border-color:#337b57;color:white}.result-count{font-size:12px;color:#779081}.swatch-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.swatch{appearance:none;display:flex;flex-direction:column;border:1px solid #e6ece5;background:white;border-radius:12px;padding:6px;min-width:0;text-align:left;overflow:hidden;transition:transform .12s,box-shadow .12s,border-color .12s}.swatch:hover{transform:translateY(-2px);box-shadow:0 5px 15px #244e3116;border-color:#90baa1}.swatch:focus-visible{outline-offset:1px}.swatch-color{display:block;width:100%;height:79px;border-radius:8px}.swatch-info{padding:8px 5px 6px;min-width:0}.swatch-title{display:block;color:#335444;font-size:13px;font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.swatch-sub{display:block;color:#8b9b90;font-size:12px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.swatch-hex{display:block;margin-top:5px;font-size:12px;color:#547663;font-weight:740;font-variant-numeric:tabular-nums}.catalog-bottom{text-align:center;margin:20px 0 0}.more-btn{font-size:13px;background:#eef7f0;color:#2f7554;padding:11px 31px;border-radius:11px;border:1px solid #d7e9dc;font-weight:780}.more-btn:hover{background:#dceee0}.note{font-size:12px;line-height:1.8;color:#88998e;margin:16px 0 0}.empty-message{grid-column:1/-1;text-align:center;padding:30px 12px;color:#688374;background:#f7faf7;border-radius:12px;font-size:14px}.palette-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.palette-item{border:1px solid #e2eae2;border-radius:12px;background:white;padding:6px;text-align:left;min-width:0}.palette-item:hover{border-color:#8fbaa0;box-shadow:0 4px 15px #22483314}.palette-color{display:block;height:70px;border-radius:7px}.palette-meta{display:block;padding:7px 5px}.palette-meta b{display:block;font-size:11px;color:#425c4c}.palette-meta small{font-size:11px;color:#708a79;font-weight:740}.contrast-card{display:grid;grid-template-columns:1fr 1.1fr;gap:25px;align-items:center;margin-top:24px;padding:20px;background:#f7faf7;border:1px solid #e8f0e8;border-radius:14px}.contrast-eyebrow{margin:0 0 5px;font-size:11px;font-weight:800;color:#609874}.contrast-card h3{margin:0;font-size:15px;color:#325442}.contrast-card .note{margin:5px 0 0}.contrast-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.contrast-sample{border-radius:10px;padding:17px 10px;text-align:center;min-width:0}.contrast-sample strong{font-size:15px;white-space:nowrap}.contrast-sample small{display:block;margin-top:6px;font-size:11px}.faq h2{font-size:21px;margin:0 0 10px}.faq details{border-bottom:1px solid #e6efe7}.faq details:last-child{border-bottom:0}.faq summary{cursor:pointer;padding:15px 0;font-weight:800;font-size:14px}.faq details p{margin:0 0 17px;font-size:13px;line-height:1.85;color:#667d6d}.footer{display:flex;justify-content:space-between;padding:18px 0 35px;color:#8ca297;font-size:12px}.footer a{font-weight:800;text-decoration:none;color:#477b5f}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,18px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;background:#245b42;color:#fff;padding:11px 19px;border-radius:12px;box-shadow:0 10px 20px #174e2d25;font-size:13px;z-index:10;max-width:min(90vw,450px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:900px){.studio-grid{gap:20px}.swatch-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.workspace,.name-section,.palette-section,.faq{padding:24px}.contrast-card{grid-template-columns:1fr}.intro h1 .highlight{display:block;margin-top:4px}}@media(max-width:670px){.page{padding:0 14px}.topbar{height:68px}.brand b{font-size:17px}.brand-mark{height:35px;width:35px;font-size:26px}.top-back{font-size:11px;padding:6px 10px}.intro{padding:34px 5px 29px}.intro h1{font-size:32px}.intro h1 .highlight{font-size:23px}.intro-desc{font-size:13px}.desktop-break{display:none}.workspace,.name-section,.palette-section,.faq{padding:20px 15px;margin-bottom:16px;border-radius:15px}.section-heading{display:block;margin-bottom:17px}.section-heading h2{font-size:19px}.hint{font-size:11px;margin-top:6px}.studio-grid{grid-template-columns:1fr;gap:23px}.preview{min-height:190px}.preview-inner strong{font-size:32px}.swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.swatch-color{height:69px}.swatch-info{padding:6px 2px}.swatch-title{font-size:13px}.swatch-sub,.swatch-hex{font-size:11px}.palette-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.palette-color{height:60px}.sample-row{flex-wrap:wrap}.catalog-toolbar{margin:15px 0}.filters button{padding:7px 11px;font-size:11px}.contrast-card{padding:13px;gap:16px}.contrast-sample{padding:14px 5px}.contrast-sample strong{font-size:12px}.footer{font-size:11px}.pick-row{gap:9px}.picker-help{font-size:11px}.code-entry label small{font-size:10px}.code-entry>label{font-size:12px}}@media(max-width:375px){.swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rgb-row{gap:5px}.rgb-row label{gap:3px;padding:0 5px}.rgb-row input{font-size:13px}.rgb-row .copy-btn{min-width:51px;padding:7px 5px}.picker-help{display:none}}