:root{color-scheme:light;--bg:#f4f3ef;--paper:#fff;--ink:#1c2b24;--muted:#707d75;--faint:#9aa59e;--line:#e6e7e1;--green:#22966e;--green-dark:#167755;--green-soft:#eaf5ef;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;--sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--shadow:0 16px 45px #27362a0b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);min-height:100vh}.topbar{height:66px;display:flex;align-items:center;max-width:1170px;padding:0 28px;margin:auto;gap:14px;border-bottom:1px solid #dedfd9}.brand{display:flex;align-items:center;gap:9px;font-size:15px;letter-spacing:-.55px;font-weight:600;color:var(--ink);text-decoration:none}.brand-icon{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;background:var(--green);color:white;font-size:16px}.brand-strong{font-weight:800}.top-note{display:flex;align-items:center;gap:8px;margin-left:28px;color:#747f77;font-size:11px}.top-note span{width:6px;height:6px;background:#3cad80;border-radius:50%}.top-right{margin-left:auto;display:flex;gap:12px;align-items:center}.local-badge{font-size:10px;color:#617067;background:#e8ebe5;border-radius:20px;padding:7px 10px}.theme-button{height:31px;width:31px;border-radius:50%;border:1px solid #d7dcd4;background:transparent;color:#5e6c62;cursor:pointer}.page{max-width:1050px;margin:auto;padding:58px 28px 32px}.hero{margin:0 0 35px 5px}.eyebrow{display:flex;align-items:center;gap:8px;color:#308667;font:500 9px var(--mono);letter-spacing:1.35px}.eyebrow i{width:17px;height:1px;background:#39a37e}.hero h1{font-size:clamp(39px,5vw,55px);line-height:1.08;letter-spacing:-2.3px;margin:17px 0 11px;font-weight:650}.hero h1 em{font-style:normal;color:#379373}.hero p{font-size:13px;line-height:1.65;color:#637067;max-width:530px;margin:0}.hero-tags{margin-top:16px;display:flex;align-items:center;gap:9px;color:#68766d;font:10px var(--mono)}.hero-tags b{color:#abb2aa}.app-card,.palette-card{border:1px solid #e5e6df;background:var(--paper);border-radius:13px;box-shadow:var(--shadow);overflow:hidden}.app-head{height:66px;border-bottom:1px solid #ecece7;display:flex;align-items:center;justify-content:space-between;padding:0 23px}.app-title{display:flex;align-items:center;gap:10px}.live-dot{width:8px;height:8px;background:#35ab7e;border-radius:50%;box-shadow:0 0 0 4px #e7f3ec}.app-title div{display:flex;flex-direction:column;gap:4px}.app-title strong{font-size:12px;font-weight:650}.app-title small{font-size:10px;color:#8b958e}.head-tools{display:flex;gap:7px}.subtle-button{border:1px solid #e4e7e1;background:#fff;color:#66736a;padding:7px 10px;border-radius:6px;font-size:10px;cursor:pointer}.subtle-button:hover,.copy-color:hover{background:#f3f7f3;color:#277c5d}.checker-grid{display:grid;grid-template-columns: .86fr 1.14fr;padding:22px;gap:21px}.controls{display:flex;flex-direction:column;gap:18px}.color-control label,.font-size-control>label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:11px;font-weight:600;color:#29382f}.color-control label span{font:9px var(--mono);color:#9aa49c;letter-spacing:.6px}.color-entry{height:41px;display:flex;align-items:center;gap:8px;border:1px solid #e2e6e0;border-radius:7px;padding:5px 8px;background:#fff}.color-entry input[type=color]{appearance:none;width:29px;height:29px;border:0;background:none;padding:0;border-radius:5px;overflow:hidden;cursor:pointer}.color-entry input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-entry input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}.hex-input{height:30px;flex:1;border:0;outline:0;color:#334339;background:transparent;font:11px var(--mono);text-transform:uppercase}.copy-color{height:28px;width:28px;border:0;border-radius:5px;background:transparent;color:#9aa59c;cursor:pointer;font-size:15px}.color-hint{color:#97a199;font-size:9px;margin-top:5px}.swap-divider{display:flex;align-items:center;gap:10px;margin:-6px 0 -3px}.swap-divider span{height:1px;background:#edf0eb;flex:1}.swap-divider button{border:1px solid #e3e8e2;background:#fff;color:#698176;width:27px;height:27px;border-radius:50%;font-size:14px;cursor:pointer}.font-size-control{display:flex;flex-direction:column}.segmented{display:flex;gap:4px;padding:3px;background:#f0f2ee;border-radius:7px}.size-option{flex:1;border:0;background:transparent;border-radius:5px;padding:8px 4px;font-size:10px;color:#77837b;cursor:pointer}.size-option[aria-pressed=true]{background:white;box-shadow:0 1px 3px #172a1d17;color:#256d50;font-weight:600}.font-size-control small{color:#939e96;font-size:9px;margin-top:6px}.result-box{border-radius:8px;background:#f4f7f3;padding:13px 14px;margin-top:0}.result-label{display:flex;align-items:center;justify-content:space-between;color:#66736a;font:9px var(--mono);letter-spacing:.6px}.result-label span{font:600 19px var(--mono);letter-spacing:-1px;color:#243a2c}.criteria{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap}.badge{border-radius:4px;padding:5px 7px;font-size:9px;font-weight:650}.badge.pass{background:#d9f0e5;color:#20794f}.badge.fail{background:#fbe9e5;color:#ad574b}.badge.info{background:#e5eae4;color:#647269}.result-foot{display:flex;justify-content:space-between;gap:5px;margin-top:10px;color:#77847b;font-size:9px}.result-foot b{color:#384d3f;font-family:var(--mono)}.preview-column{min-width:0}.preview-label{display:flex;justify-content:space-between;align-items:center;margin:1px 0 9px;color:#7e8a81;font:9px var(--mono);letter-spacing:.6px}.preview-label span{letter-spacing:0;font:9px var(--sans);color:#9aa39c}.preview{border-radius:9px;min-height:315px;padding:26px 27px 16px;display:flex;flex-direction:column;justify-content:space-between;transition:background-color .15s}.preview-sample{max-width:400px}.sample-kicker{font-size:10px;font-weight:650;letter-spacing:.5px}.sample-sample h2{}.preview h2{font-size:32px;line-height:1.03;letter-spacing:-1.3px;margin:14px 0 11px;font-weight:760}.preview p{font-size:13px;line-height:1.55;max-width:280px;margin:0 0 18px}.sample-button{font:600 10px var(--sans);border:1px solid currentColor;background:transparent;border-radius:5px;padding:8px 10px}.sample-button span{margin-left:9px}.preview-size{display:flex;align-items:center;justify-content:space-between;padding-top:11px;border-top:1px solid currentColor;font-size:9px;opacity:.78}.preview-size b{font:9px var(--mono)}.score-note{display:flex;gap:8px;align-items:flex-start;margin-top:10px;color:#748077}.score-mark{color:#35a47a;margin-top:1px}.score-note p{font-size:9px;line-height:1.5;margin:0}.palette-card{margin-top:15px;padding:22px 23px 15px}.section-heading{display:flex;justify-content:space-between;align-items:center}.section-heading h2{font-size:20px;letter-spacing:-.65px;margin:8px 0 5px}.section-heading p{margin:0;color:#849087;font-size:10px}.export-button{border:1px solid #dae5dc;background:#eff6ef;color:#237651;padding:8px 11px;border-radius:6px;font-size:10px;font-weight:600;cursor:pointer}.export-button span{font-size:13px;margin-left:4px}.palette-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:18px}.swatch{border:1px solid #e5e8e3;border-radius:7px;overflow:hidden;min-width:0}.swatch-color{height:64px;position:relative}.swatch-color input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.swatch-info{padding:8px}.swatch-name{font-size:9px;color:#526056;font-weight:600;display:flex;justify-content:space-between}.swatch-hex{font:9px var(--mono);color:#77847a;margin-top:5px}.swatch-results{display:flex;gap:4px;margin-top:7px}.mini-badge{border-radius:3px;padding:3px 5px;font-size:8px;font-weight:650}.mini-badge.pass{background:#e2f4e9;color:#278052}.mini-badge.fail{background:#f9e9e5;color:#ab574a}.palette-actions{display:flex;align-items:center;justify-content:space-between;margin-top:12px;color:#9aa49c;font-size:9px}.add-button{border:0;background:transparent;color:#308463;font-size:10px;font-weight:600;padding:7px 4px;cursor:pointer}.css-output{white-space:pre-wrap;overflow:auto;margin:12px 0 0;background:#16221a;color:#d2e8d7;padding:13px;border-radius:7px;font:10px/1.6 var(--mono)}.guide-card{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:23px 7px 19px}.guide-card>div{padding:4px 12px;border-left:1px solid #dfe3dd}.guide-number{font:9px var(--mono);color:#36a17a}.guide-card h3{font-size:11px;margin:10px 0 7px}.guide-card p{margin:0;color:#7a867d;font-size:9px;line-height:1.65}.footer{border-top:1px solid #e1e3dc;padding:14px 5px 0;display:flex;justify-content:space-between;color:#879289;font-size:9px}.footer b{font:9px var(--mono);color:#6d7b71;margin-left:3px}#toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#1c3025;color:#f0f7f0;border-radius:6px;padding:10px 14px;font-size:11px;transition:.2s;box-shadow:0 8px 25px #0003;z-index:5}#toast.show{opacity:1;transform:translate(-50%,0)}body.dark{color-scheme:dark;--bg:#121713;--paper:#19211b;--ink:#ecf2ec;--muted:#a0aca2;--faint:#738078;--line:#303a32;--shadow:0 15px 45px #0003;background:#121713}body.dark .topbar{border-color:#2c372f}body.dark .top-note,body.dark .hero p,body.dark .color-hint,body.dark .font-size-control small,body.dark .section-heading p,body.dark .guide-card p,body.dark .footer,body.dark .score-note,body.dark .preview-label span{color:#9aa79d}body.dark .local-badge,body.dark .segmented,body.dark .result-box{background:#232e25}body.dark .app-head,body.dark .footer{border-color:#303b33}body.dark .subtle-button,body.dark .color-entry,body.dark .swap-divider button{background:#1a241d;border-color:#354238;color:#b6c4b8}body.dark .hex-input,body.dark .color-control label,body.dark .font-size-control>label,body.dark .result-label,body.dark .result-foot,body.dark .swatch-name{color:#c7d2c9}body.dark .size-option[aria-pressed=true]{background:#304135;color:#d6f2df}body.dark .sample-button{color:inherit}body.dark .swatch{border-color:#354238}body.dark .swatch-hex,body.dark .guide-card p{color:#9cab9e}body.dark .guide-card>div{border-color:#354238}body.dark .export-button{background:#1c2e22;color:#9fe0b4;border-color:#34503d}body.dark .palette-card,body.dark .app-card{border-color:#303b33}body.dark .palette-actions{color:#9aa79d}body.dark .theme-button{color:#c2d1c4;border-color:#415047}@media(max-width:760px){.topbar{padding:0 18px}.top-note{display:none}.page{padding:42px 16px 24px}.checker-grid{grid-template-columns:1fr;padding:16px;gap:21px}.controls{gap:14px}.preview{min-height:265px}.guide-card{gap:10px;padding:20px 0}.guide-card>div{padding:4px 9px}.palette-card{padding:17px}.palette-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:480px){.topbar{height:58px;padding:0 12px}.local-badge{font-size:8px;padding:6px 7px}.page{padding:34px 11px 22px}.hero{margin-left:1px}.hero h1{font-size:39px;letter-spacing:-1.8px}.hero p{font-size:12px}.app-head{padding:0 12px}.app-title small{font-size:8px}.subtle-button{font-size:9px;padding:7px}.checker-grid{padding:12px}.result-foot{font-size:8px}.preview{min-height:240px;padding:20px}.palette-card{padding:14px}.section-heading h2{font-size:18px}.section-heading p{max-width:200px;line-height:1.4}.palette-grid{grid-template-columns:repeat(2,1fr);gap:7px}.swatch-color{height:55px}.guide-card{grid-template-columns:1fr;gap:12px}.guide-card>div{padding:0 10px}.guide-card h3{margin:6px 0}.footer{flex-wrap:wrap;gap:8px}.footer span:last-child{width:100%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}