@charset "UTF-8";
:root{--blue:#1745ef;--yellow:#f5f04c;--ink:#16201d;--paper:#f6f5ef;--line:#d1d1c8;font-family:Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input,summary{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,pre:focus-visible{outline:3px solid currentColor;outline-offset:5px}button{border-radius:0}a{color:inherit}.masthead{display:flex;align-items:center;justify-content:space-between;background:var(--blue);color:white;padding:29px 4%;border-bottom:1px solid var(--ink)}.brand{position:relative;font-size:32px;font-weight:900;letter-spacing:-1.7px;line-height:.88;text-decoration:none}.brand-dot{position:absolute;right:-18px;top:0;font-size:15px;letter-spacing:0}.header-note{font-size:13px;line-height:1.65;margin-right:auto;margin-left:80px}.edition{font-size:11px;font-weight:700;line-height:1.5;letter-spacing:1px;text-align:right;color:var(--yellow)}main{padding:0 4%}.intro{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:49px 0 42px}.eyebrow,.section-index{font-size:10px;letter-spacing:1.3px;font-weight:700}h1{font-size:clamp(25px,3.1vw,43px);line-height:1.35;letter-spacing:-1.9px;margin:16px 0 0;font-weight:800}.generate-area{flex-shrink:0;width:253px}.generate{display:flex;justify-content:space-between;align-items:center;background:var(--yellow);color:var(--ink);border:1px solid var(--ink);width:100%;padding:19px 21px;font-size:17px;font-weight:800;box-shadow:4px 4px 0 var(--ink)}.generate:hover{background:#fff976;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}.generate:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}.arrow{font-size:27px;font-weight:400}.generate-hint{display:block;font-size:11px;margin-top:16px;text-align:center;color:#5b605a}.palette-topline{border-top:1px solid var(--ink);padding:13px 0;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;font-weight:700}.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--ink);min-height:387px}.color-card{padding:18px 16px 21px;position:relative;display:flex;flex-direction:column;min-width:0;min-height:387px;border-right:1px solid #0002;background:var(--swatch);color:var(--text)}.color-card:last-child{border-right:0}.card-top{display:flex;align-items:center;justify-content:space-between}.color-number{font-size:11px;font-weight:700;letter-spacing:1px}.lock-button{height:40px;min-width:40px;display:flex;align-items:center;gap:6px;justify-content:center;border:1px solid transparent;background:transparent;color:inherit;padding:8px;font-size:11px}.lock-button:hover,.lock-button[aria-pressed="true"]{border-color:currentColor}.lock-button svg{width:18px;height:18px}.lock-word{display:none}.lock-button[aria-pressed="true"] .lock-word{display:inline}.color-space{flex:1;min-height:120px;display:flex;align-items:center;justify-content:center}.swatch-letter{font-size:clamp(38px,6vw,84px);font-weight:800;letter-spacing:-7px;opacity:.13;user-select:none}.hex-label{font-size:9px;letter-spacing:1.2px;display:block;margin-bottom:7px;font-weight:700}.hex-input{width:100%;border:0;border-bottom:1px solid currentColor;background:transparent;color:inherit;padding:5px 0 10px;line-height:1.1;font-family:Arial,sans-serif;font-weight:700;font-size:clamp(19px,2.35vw,32px);letter-spacing:-.8px;border-radius:0;text-transform:uppercase}.hex-input[aria-invalid="true"]{border-bottom-style:dashed;border-bottom-width:3px}.field-error{font-size:11px;line-height:1.4;margin:6px 0 0;min-height:16px;font-weight:700}.contrasts{display:flex;gap:8px;margin-top:11px}.contrast{flex:1;min-width:0;font-size:10px;line-height:1.5}.contrast-label{display:flex;align-items:center;gap:4px;margin-bottom:5px}.ink-chip{width:13px;height:13px;background:#000;border:1px solid #ffffff80;display:inline-block}.ink-chip.white{background:#fff;border-color:#0005}.ratio{font-weight:800;font-size:12px;font-variant-numeric:tabular-nums}.grade{display:block;font-size:9px;letter-spacing:.4px;margin-top:2px}.status-line{display:flex;align-items:center;gap:10px;padding:16px 0 26px;border-bottom:1px solid var(--ink)}.status-dot{width:6px;height:6px;background:var(--blue);flex-shrink:0}.status-line p{font-size:12px;line-height:1.5;margin:0}.local-tag{font-size:9px;font-weight:700;letter-spacing:1px;white-space:nowrap;margin-left:auto}.workbench{display:grid;grid-template-columns:1fr 1fr;padding:33px 0 43px;gap:6%}.export-panel{padding-right:6%;border-right:1px solid var(--line)}.section-index{color:var(--blue);font-size:9px}h2{font-size:24px;letter-spacing:-1px;line-height:1.4;margin:17px 0 12px}.export-panel>p{font-size:13px;line-height:1.8;color:#58605a}.export-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.outline-button{padding:13px 15px;display:flex;justify-content:space-between;gap:22px;font-size:12px;font-weight:700;border:1px solid var(--ink);color:var(--ink);background:transparent;min-height:44px}.outline-button:hover{background:var(--ink);color:var(--paper)}details{margin-top:19px;font-size:11px}summary{cursor:pointer;padding:5px 0;width:fit-content}pre{font-size:12px;line-height:1.7;padding:16px;background:#eaeae2;overflow:auto;margin:13px 0 0;user-select:all}.guide-panel ol{padding:0;margin:19px 0 0;list-style:none;display:grid;gap:14px}.guide-panel li{display:flex;gap:15px}.guide-panel li>span{font-size:10px;color:var(--blue);padding-top:3px;font-weight:700}.guide-panel li p{font-size:12px;line-height:1.65;margin:0;color:#58605a}.guide-panel strong{display:block;font-size:12px;color:var(--ink);margin-bottom:2px}footer{background:var(--yellow);border-top:1px solid var(--ink);padding:27px 4%;display:flex;align-items:center;justify-content:space-between;gap:25px}footer>strong{font-size:20px;font-weight:900;line-height:.96;letter-spacing:-.8px}footer p{font-size:11px;line-height:1.7;margin:0}footer>span{font-size:9px;letter-spacing:.8px}
@media(min-width:1500px){main{max-width:1550px;margin:auto}.palette,.color-card{min-height:460px}}
@media(max-width:900px){.header-note{margin-left:45px}.color-card{padding:14px 10px}.contrasts{gap:5px}.lock-button{padding:6px}.lock-word{font-size:9px}.intro{gap:20px}.generate-area{width:215px}.generate{font-size:15px}footer>span{display:none}}
@media(max-width:650px){.masthead{padding:23px 5%}.brand{font-size:27px}.header-note{display:none}.edition{font-size:10px}main{padding:0 5%}.intro{align-items:stretch;flex-direction:column;padding:32px 0 27px;gap:25px}h1{font-size:28px;letter-spacing:-1.5px;margin-top:14px}.eyebrow{font-size:8px;letter-spacing:1.1px}.generate-area{width:100%}.generate{padding:13px 18px;font-size:16px}.generate-hint{font-size:10px;margin-top:12px}.palette{grid-template-columns:1fr;min-height:0}.color-card{min-height:186px;padding:14px 18px 15px;display:grid;grid-template-columns:minmax(0,1fr) 112px;column-gap:24px;row-gap:4px;border-right:0;border-bottom:1px solid #0002}.color-card:last-child{border-bottom:0}.card-top{grid-column:1/-1}.color-space{display:none}.hex-form{align-self:center}.hex-input{font-size:30px;padding-bottom:9px}.hex-label{font-size:8px;margin-bottom:4px}.field-error{font-size:10px;min-height:14px}.contrasts{margin-top:5px;align-self:center;gap:10px}.contrast{font-size:10px}.ratio{font-size:11px}.grade{font-size:9px}.lock-word{display:inline}.lock-button{padding:6px 8px;font-size:10px;height:35px}.status-line{padding:17px 0 23px;align-items:flex-start}.status-dot{margin-top:6px}.status-line p{font-size:11px}.local-tag{display:none}.workbench{grid-template-columns:1fr;gap:29px;padding-top:26px}.export-panel{padding-right:0;border-right:0;border-bottom:1px solid var(--line);padding-bottom:27px}h2{font-size:23px}.export-actions{margin-top:20px}.outline-button{flex:1;padding:13px 12px;gap:10px;font-size:11px}footer{align-items:flex-start;flex-direction:column;padding:26px 5%;gap:18px}footer p{font-size:10px}footer>strong{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.generate:hover,.generate:active{transform:none}}