:root{color-scheme:dark;--bg:#2a2021;--panel:#3a2c2b;--line:#594443;--text:#fff7ed;--muted:#d1bdb3;--orange:#f39a55;--gold:#ffd072;--aqua:#b9e0d0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:16px;line-height:1.8}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button,input{font:inherit}a:focus-visible,input:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.skip{position:fixed;top:-100px;left:15px;padding:10px;background:var(--panel);z-index:5}.skip:focus{top:10px}header{border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px max(24px,calc((100vw - 1200px)/2));font-size:14px}.home{color:var(--gold);font-weight:bold}.header-note{color:var(--muted);font-size:12px;letter-spacing:.1em}.article,.read-more{color:var(--gold)}main{max-width:1200px;margin:auto;padding:28px 24px 0}.title-row{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:25px}.eyebrow{color:var(--aqua);font-size:13px;letter-spacing:.1em;margin:0 0 7px}h1{font-size:31px;margin:0;line-height:1.5}.instruction{font-size:14px;color:var(--muted);margin:0 0 4px}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:stretch}.palette{background:#4b3531;border:1px solid var(--line);border-radius:18px;min-height:500px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 22px 22px;position:relative;overflow:hidden}.palette:before{content:'COLOR LAB / 03';position:absolute;top:17px;left:20px;color:#dec9bc;font:11px Arial,sans-serif;letter-spacing:.15em}.swatch-wrap{display:flex;flex-direction:column;align-items:center;gap:17px}.swatch{width:min(350px,64vw);aspect-ratio:1;border-radius:50%;background:#A85B35;box-shadow:inset -18px -22px 35px #28171355,0 17px 0 #21161780,0 0 0 7px #ffffff22;display:flex;align-items:end;justify-content:center;padding-bottom:34px;transition:background .25s}.swatch span{background:#251b1bd9;border:1px solid #ffffff55;border-radius:20px;padding:5px 13px;font-size:13px}.color-code{font:700 22px Arial,sans-serif;letter-spacing:.1em}.palette-caption{display:flex;align-items:center;gap:18px;margin-top:36px;color:var(--muted);font-size:13px}.palette-caption strong{color:var(--gold);font-size:15px}.formula{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;margin-top:23px;color:#e9dcd2;font-size:13px}.formula span{display:flex;align-items:center;gap:5px}.formula i{display:inline-block;width:12px;height:12px;border-radius:50%}.formula .red{background:#d23e2d}.formula .yellow{background:#f4bb28}.formula .white{background:#f4efdc;border:1px solid #cdbdb2}.formula .green{background:#58773d}.controls{background:#f2eee5;color:#3d2b2a;border-radius:18px;padding:20px 22px}.guide{display:flex;gap:12px;align-items:center;background:#e8efe7;padding:12px;border-radius:11px;margin-bottom:25px}.mini{font-size:32px;background:white;border-radius:50%;width:50px;height:50px;display:grid;place-items:center}.guide span{font-size:12px;color:#637467;font-weight:bold}.guide p{font-size:14px;font-weight:bold;margin:3px 0;line-height:1.7}.control{margin:18px 0}.controls label{display:flex;justify-content:space-between;font-weight:700;font-size:14px}.controls output{color:#b35334;font-weight:400}.controls input{width:100%;accent-color:#bd633d;min-height:27px}.track{display:flex;justify-content:space-between;color:#897c76;font-size:11px}.reset{width:100%;background:#3e2e2d;border:0;color:white;padding:12px;border-radius:8px;margin-top:12px;min-height:45px}.lesson{max-width:790px;padding:45px 0 33px}.lesson h2{font-size:25px;margin:0 0 13px}.lesson p:not(.eyebrow){color:var(--muted);font-size:15px;line-height:2;margin:0 0 15px}.lesson .medical{font-size:13px!important;color:#e4bcb0!important}.read-more{display:inline-block;border-bottom:1px solid var(--gold);padding-bottom:5px;font-size:14px}.sources{border-top:1px solid var(--line);padding:18px 0 26px;color:var(--muted);font-size:13px}.sources summary{color:var(--text);cursor:pointer}.sources p{line-height:1.9}footer{max-width:1200px;margin:auto;border-top:1px solid var(--line);padding:22px 24px 30px;display:flex;justify-content:space-between;color:var(--muted);font-size:13px}@media(max-width:780px){header{padding:14px 17px}.header-note{display:none}main{padding:22px 15px 0}.title-row{display:block}.instruction{display:none}h1{font-size:27px}.workbench{grid-template-columns:1fr;gap:16px}.palette{min-height:450px}.swatch{width:min(290px,68vw)}.controls{padding:18px}.lesson{padding:32px 3px 27px}.lesson h2{font-size:23px}footer{padding:19px 17px 26px;font-size:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}