:root{color-scheme:light;--ink:#172b3a;--muted:#435c6b;--line:#bdc9d0;--action:#176659;--paper:#f2f5f8;font-family:"Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo,sans-serif;color:var(--ink);background:white;line-height:1.75}
*{box-sizing:border-box}body{margin:0}a{color:#145e8a;text-underline-offset:.2em}button,input,textarea{font:inherit}button{min-height:44px;border:1px solid var(--line);background:white;color:var(--ink);border-radius:6px;padding:.45rem .9rem;cursor:pointer}button:hover:not(:disabled){background:#e6f2ef}button:disabled{opacity:.55;cursor:default}input,textarea{border:1px solid var(--line);border-radius:4px;padding:.6rem;width:100%;min-width:0;color:var(--ink);background:white}textarea[aria-invalid=true]{border-color:#af2436}input[readonly]{font-family:Consolas,monospace}input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #176659;outline-offset:3px}.skip{position:absolute;top:-100px;background:white;padding:1rem;z-index:3}.skip:focus{top:0}header{display:flex;justify-content:space-between;max-width:1100px;margin:auto;padding:1.3rem 1.5rem;border-bottom:1px solid var(--line)}header a{font-weight:700;text-decoration:none;color:var(--ink)}header span{color:var(--muted)}main{max-width:1100px;margin:auto;padding:1.5rem}nav{font-size:.85rem;color:var(--muted)}h1{font-size:clamp(2rem,5vw,3.3rem);line-height:1.25;letter-spacing:.02em;margin:1.5rem 0 .7rem}h2{font-size:1.3rem;line-height:1.5;margin:2.3rem 0 .7rem}.intro{font-size:1.12rem;margin:0 0 2rem}.converter{display:grid;grid-template-columns:1.3fr 1fr;gap:2.5rem;background:var(--paper);padding:2rem;border-radius:12px}.entry>label{display:block;font-weight:700;margin-bottom:.6rem}#color-input{resize:vertical;font-family:Consolas,monospace;font-size:1.18rem}.help{font-size:.85rem;color:var(--muted);margin:.6rem 0}.error{color:#a3152a;min-height:1.8em;font-weight:700}.input-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.picker-label{display:flex;align-items:center;gap:.65rem}.picker-label input{width:56px;height:44px;padding:3px}.examples{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;margin:1.3rem 0;font-size:.85rem}.examples button{padding:.35rem .65rem}.preview{display:flex;flex-direction:column;margin:0}.preview p{font-size:.85rem;margin:.6rem 0 0;color:var(--muted)}.swatch{flex:1;min-height:200px;border:1px solid #7d8b95;border-radius:4px}.swatch.empty{background:repeating-linear-gradient(135deg,#e0e6e9 0 12px,white 12px 24px)}.results{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:1.3rem;margin:1.7rem 0 0}.results>div{min-width:0}.results label{display:block;font-weight:700;font-size:.85rem;margin-bottom:.5rem}.results input{font-size:.88rem;letter-spacing:-.02em}.results button{width:100%;margin-top:.6rem;background:var(--action);border-color:var(--action);color:white}.results button:hover:not(:disabled){background:#124d44}#status{min-height:2em;color:var(--action);font-size:.95rem;margin:.8rem 0 2rem}.notes{max-width:790px;border-top:1px solid var(--line);font-size:.95rem}.notes p{max-width:74ch}dl{display:grid;grid-template-columns:4rem 1fr;gap:.9rem}dt{font-weight:700}dd{margin:0}ol{padding-left:1.4rem}footer{display:flex;flex-wrap:wrap;gap:1.3rem;max-width:1100px;margin:2rem auto 0;border-top:1px solid var(--line);padding:1.6rem 1.5rem;font-size:.85rem}@media(max-width:720px){.converter{grid-template-columns:1fr;padding:1.2rem;gap:1.2rem}.results{grid-template-columns:1fr;gap:1.2rem}.swatch{min-height:150px}main,header{padding:1.1rem}.results input{font-size:1rem}header span{font-size:.8rem}.intro{font-size:1rem}.error{min-height:0}dl{grid-template-columns:1fr;gap:.3rem}dd{margin-bottom:.8rem}}