:root{--paper:#f7f0df;--cream:#fffaf0;--ink:#24211d;--muted:#625d54;--rule:#cdbfa6;--blue:#155e75;--red:#a33b31;--yellow:#e7be46}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:repeating-linear-gradient(#f7f0df,#f7f0df 4px,#f5eddb 5px);color:var(--ink);font:16px/1.55 Arial,sans-serif}.skip{position:absolute;top:-60px;left:8px;background:var(--ink);color:#fff;padding:8px;z-index:9}.skip:focus{top:8px}.site-head,main,footer{max-width:1200px;margin:auto}.site-head{display:flex;justify-content:space-between;align-items:center;padding:22px 28px}.wordmark{color:var(--ink);font:20px Georgia,serif;text-decoration:none}.wordmark span{color:var(--red)}.wordmark i{font:13px Georgia,serif;color:var(--muted)}nav{display:flex;gap:18px}nav a,footer a{color:var(--blue);text-underline-offset:4px}.intro{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding:42px 0 90px}.eyebrow{margin:0 0 9px;color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}h1{margin:0 0 22px;font:normal clamp(42px,6vw,72px)/1 Georgia,serif;letter-spacing:-.055em}h1 em{color:var(--red)}.lede{max-width:550px;font-size:20px;color:#454038}.button,.file-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border:1.5px solid var(--blue);background:transparent;color:#104a5e;font:700 14px Arial,sans-serif;cursor:pointer;text-decoration:none;transition:transform .18s}.button:hover,.file-button:hover{transform:translateY(-2px)}.primary{background:var(--blue);color:#fff}.hero-figure{margin:0;transform:rotate(1.5deg);filter:drop-shadow(0 16px 14px #49331435)}.hero-figure img{display:block;width:100%;height:auto;border:9px solid #fff8e9}.hero-figure figcaption{padding:7px 3px;color:var(--muted);font:italic 12px Georgia,serif}.lab{padding:66px 0}.section-title{max-width:680px;margin-bottom:34px}.section-title h2,.analysis h2,.method h2{margin:0 0 10px;font: 34px/1.1 Georgia,serif}.section-title>p:last-child,.hint{color:var(--muted)}.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.ruled{padding:22px 0;background:repeating-linear-gradient(transparent,transparent 33px,#d9cdb755 34px);border-top:2px solid var(--ink)}.panel-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.panel-head h3{margin:0;font: 22px Georgia,serif}.panel-head h2{margin:0}.small{font:12px Arial;color:var(--muted)}.hint{font-size:14px}.text-button{border:0;border-bottom:1px solid var(--blue);background:transparent;color:var(--blue);font-weight:700;cursor:pointer}.swatches{margin-bottom:15px}.swatch-row{display:grid;grid-template-columns:44px minmax(100px,1fr) 82px 35px;gap:8px;align-items:center;margin-bottom:8px}.paint{display:block;width:44px;height:44px;border:1px solid #5f584c;border-radius:50%;background:var(--paint)}.paint input{width:100%;height:100%;opacity:0;cursor:pointer}.name-input,.hex-input{height:42px;padding:7px;border:1px solid #b7aa93;background:#fffaf0aa;color:var(--ink);font:15px Arial}.hex-input{font:13px ui-monospace,monospace}.remove{width:35px;height:38px;border:0;background:transparent;color:var(--red);font-size:26px;cursor:pointer}.file-button{white-space:nowrap}.file-button input{position:absolute;opacity:0;width:1px}.empty-note{padding:20px 15px;border:1px dashed #a99d86;background:#fff8ea99;text-align:center;color:var(--muted)}.empty-note span{display:block;color:var(--yellow);font-size:34px}.empty-note strong{display:block;color:var(--ink);font: 20px Georgia,serif}.empty-note p{margin:4px auto;max-width:310px;font-size:14px}.frame-list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.frame{margin:0;border:1px solid var(--rule);background:var(--cream)}.frame img{display:block;width:100%;aspect-ratio:1.4;object-fit:cover}.frame figcaption{padding:5px;font-size:11px;overflow-wrap:anywhere}.frame button{float:right;border:0;background:transparent;color:var(--red);text-decoration:underline;cursor:pointer}.error{min-height:1.4em;color:#8b2923;font-size:14px}.analysis{margin-top:34px}.simulations{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0;padding:14px 0;border:0;border-top:1px solid var(--rule)}.simulations legend{padding:0 5px;font:italic 14px Georgia,serif}.simulations label{display:flex;align-items:center;gap:6px;min-height:40px;padding:7px 9px;border:1px solid #b7aa93;background:#fff9ecaa;font-size:14px}.simulations input{width:18px;height:18px;accent-color:var(--blue)}.offline{margin-bottom:15px;padding:10px;border-left:4px solid #9c6912;background:#fff3ca}.analysis-summary{display:grid;grid-template-columns:190px 1fr 160px;align-items:center;gap:18px;padding:17px;background:#eee1c9}.analysis-summary>div:first-child{display:flex;align-items:baseline;gap:8px}.metric{color:var(--red);font: 42px Georgia,serif}.analysis-summary p{margin:0;color:var(--muted);font-size:14px}.preview-strip{display:flex;height:32px;border:1px solid #998b70}.preview-strip span{flex:1}.findings{margin:0;padding:0;list-style:none}.finding{display:grid;grid-template-columns:42px 1fr 195px;gap:14px;padding:20px 4px;border-bottom:1px solid var(--rule)}.finding-number{color:var(--red);font:italic 20px Georgia,serif}.pair{display:flex;flex-wrap:wrap;align-items:center;gap:7px}.dot{width:20px;height:20px;border:1px solid #61584b;border-radius:50%}.pair p{width:100%;margin:5px 0 0;color:var(--muted);font-size:13px}.fix{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:12px}.fix button{min-height:36px;border:2px solid var(--ink);background:var(--suggest);color:var(--suggest-text,#181613);font:700 12px ui-monospace,monospace;cursor:pointer}.fineprint{color:var(--muted);font-size:12px}.empty-report{padding:24px 12px;background:#fff9edcc}.empty-report strong{font: 21px Georgia,serif}.empty-report p{margin:4px 0;color:var(--muted)}.method{display:grid;grid-template-columns:250px 1fr;gap:42px;padding:50px 0 80px;border-top:1px solid var(--rule)}.method h2{grid-row:2}.method>div{grid-column:2;grid-row:1 / span 2;max-width:650px;color:#4f4940}footer{display:flex;justify-content:space-between;gap:20px;padding:20px 28px 30px;border-top:1px solid var(--rule);color:var(--muted);font-size:12px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #be8213;outline-offset:3px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.file-button{transition:none}.hero-figure{transform:none}}@media(max-width:720px){.site-head,main,footer{padding-left:18px;padding-right:18px}.intro{grid-template-columns:1fr;gap:20px;padding:30px 0 60px}.intro h1{font-size:49px}.lab{padding:48px 0}.lab-grid{grid-template-columns:1fr;gap:20px}.analysis-summary{grid-template-columns:1fr;gap:8px}.preview-strip{max-width:250px}.finding{grid-template-columns:31px 1fr}.fix{grid-column:2}.method{display:block;padding:42px 0 60px}.method h2{margin-bottom:20px}footer{display:block}footer span{display:block;margin-bottom:8px}.swatch-row{grid-template-columns:44px minmax(76px,1fr) 76px 32px}.frame-list{grid-template-columns:repeat(2,1fr)}}