:root{color-scheme:light;--paper:#f8f6f0;--ink:#232e29;--muted:#535e56;--line:#d9ded5;--accent:#254d40;--white:#fffefa}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 system-ui,sans-serif}header{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:16px max(16px,calc((100vw - 1320px)/2));border-bottom:1px solid var(--line);background:var(--white);flex-wrap:wrap}.brand{font:700 25px Georgia,serif;text-decoration:none;color:var(--accent)}.brand small{font:600 12px system-ui;vertical-align:top}nav,.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}main,#notice{max-width:1320px;margin:auto;padding:0 16px}main{padding-bottom:32px}#notice:not(:empty){padding-top:12px;color:#873812}h1,h2,h3{font-family:Georgia,serif;line-height:1.2}h1{font-size:clamp(30px,5vw,49px);margin-bottom:12px}h2{font-size:24px}h3{margin:.5em 0}p{margin:.5em 0 1em}.muted{color:var(--muted)}.card{padding:18px;background:var(--white);border:1px solid var(--line);border-radius:14px;margin:12px 0}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:16px;align-items:start}.stack{display:grid;gap:8px}form{max-width:580px}label{display:grid;gap:4px;font-weight:600}input,button,select{font:inherit;color:inherit;border:1px solid #a6b4a8;border-radius:7px;background:white;padding:8px 10px;min-height:42px;max-width:100%}button{cursor:pointer;text-align:left}button:hover{border-color:var(--accent);background:#e9f0e8}button.primary{background:var(--accent);color:white}button[aria-current=true]{outline:2px solid var(--accent)}:focus-visible{outline:3px solid #2767a7;outline-offset:3px}a{color:var(--accent)}.surface{position:relative;display:block;width:fit-content;max-width:100%;margin:auto}.surface img{display:block;width:auto;max-width:100%;max-height:76vh;cursor:crosshair}.marker{position:absolute;transform:translate(-50%,-50%);border:2px solid #242c28;box-shadow:0 0 0 2px white;min-width:38px;min-height:38px;border-radius:100px;padding:4px 7px;text-align:center;font-weight:800;font-size:13px}.marker[aria-current=true]{outline:3px solid #2767a7;outline-offset:3px}.swatch{display:inline-block;flex:none;width:24px;height:24px;border-radius:50%;border:1px solid #38483c;vertical-align:middle}.choice{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}.choice span:nth-child(2){flex:1}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:8px}.trend{border-left:4px solid #b77a25;padding:10px 12px;background:#fff2da;margin:12px 0}ul{padding-left:22px}.image-card{padding:10px}.wash{display:flex;gap:8px;align-items:end;flex-wrap:wrap}input[type=color]{min-width:65px}
@media(max-width:740px){.layout{grid-template-columns:1fr}.surface img{max-height:60vh}}@media print{header,#notice,.no-print,form{display:none!important}.layout{display:block}.card{break-inside:avoid}.marker,.swatch{print-color-adjust:exact;-webkit-print-color-adjust:exact}.surface img{max-height:55vh}}
.hide-markers .marker{display:none}@media print{.hide-markers .marker{display:block}}
.print-guide{display:none}.surface{background:white}@media print{.print-guide{display:block}.marker{font-size:0}.marker:after{content:attr(data-number);font-size:13px}}


.sample-menu{position:fixed;inset:auto;margin:0;width:min(362px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--white);color:var(--ink);box-shadow:0 12px 40px #162b2a55}
.sample-menu::backdrop{background:#132b2924}.sample-menu-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.sample-menu-header h2{margin:0}.sample-menu p{margin:.4em 0}.paint-wheel{position:relative;width:100%;aspect-ratio:1;background:radial-gradient(circle,#e7ece3 0%,#f8f6f0 67%,transparent 69%);margin:4px auto}
.wheel-center,.wheel-paint{position:absolute;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #27342b}.wheel-center{left:50%;top:50%;width:8%;aspect-ratio:1;box-shadow:0 0 0 2px white}.wheel-paint{width:8.5%;aspect-ratio:1;min-height:0;padding:0;font-size:clamp(9px,2.5vw,12px);font-weight:800;text-align:center;overflow:hidden;text-overflow:ellipsis}.wheel-suggested{box-shadow:0 0 0 2px white}.wheel-paint[aria-pressed=true]{outline:2px solid #2767a7;outline-offset:1px}
.sample-menu-notice:not(:empty){color:#873812;margin-bottom:8px}