:root{color-scheme:dark;--ink:#f4f1ea;--muted:#a9b0ae;--faint:#687271;--bg:#101416;--panel:#182023;--line:#2b3637;--accent:#e6a15c;--green:#9ccf8d;--max:1160px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;line-height:1.55}a{color:inherit}.wrap{width:min(var(--max),calc(100% - 3rem));margin:auto}.skip{position:absolute;top:-4rem;left:1rem;background:var(--accent);color:#17120d;padding:.6rem 1rem}.skip:focus{top:1rem}header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(16,20,22,.9);backdrop-filter:blur(16px);z-index:5}.nav,footer .wrap{min-height:4.75rem;display:flex;align-items:center;justify-content:space-between}.brand{font: .9rem ui-monospace,monospace;text-decoration:none}.brand:first-letter{color:var(--accent)}.brand span{color:var(--faint)}nav{display:flex;gap:1.8rem;font-size:.85rem}nav a{color:var(--muted);text-decoration:none}nav a:hover,nav a:focus{color:var(--ink)}.hero{padding:clamp(5rem,11vw,9rem) 0 7rem;border-bottom:1px solid var(--line);background:radial-gradient(circle at 85% 20%,rgba(230,161,92,.12),transparent 28rem)}.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:6rem;align-items:end}.kicker{font:700 .7rem ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}.muted{color:var(--faint)}h1,h2,h3{font-family:Georgia,serif;font-weight:400;letter-spacing:-.045em;line-height:1.02}h1{font-size:clamp(3.6rem,8.5vw,7.8rem);margin:1.5rem 0 2rem}h1 em{color:var(--accent);font-style:normal}h2{font-size:clamp(2.4rem,5vw,4.5rem);margin:.8rem 0 1.2rem}h3{font-size:1.7rem;margin:.6rem 0 .7rem}.lead{color:var(--muted);max-width:34rem;font-size:1.15rem}.button,button{border:1px solid var(--line);border-radius:2px;cursor:pointer;font:600 .78rem ui-monospace,monospace;padding:.8rem 1rem;text-decoration:none;display:inline-flex;gap:.7rem;background:transparent;color:var(--ink)}.primary{background:var(--accent);border-color:var(--accent);color:#1c140e}.primary:hover,button:hover{border-color:var(--accent);color:var(--accent)}button.primary{color:#1c140e}.quote{font:1.25rem/1.35 Georgia,serif}.small,small{color:var(--faint);font-size:.78rem}.hero aside{border-left:1px solid var(--accent);padding:1rem 0 1rem 1.5rem}.section{padding:7rem 0;border-bottom:1px solid var(--line)}.alt{background:#151b1d}.heading{display:grid;grid-template-columns:1fr 20rem;gap:5rem;align-items:end;margin-bottom:3.5rem}.heading>p{color:var(--muted);margin:0}.cards,.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.cards article,.guides article{border:1px solid var(--line);background:rgba(24,32,35,.7);padding:1.8rem;min-height:17rem;display:flex;flex-direction:column;align-items:flex-start}.cards article p,.guides article p{color:var(--muted)}.cards article button,.guides article small{margin-top:auto}.guides{grid-template-columns:repeat(2,1fr)}.guides article{min-height:18rem}.guides article b{color:var(--accent);font:700 .7rem ui-monospace,monospace;text-transform:uppercase}.guides a{color:var(--accent)}#panel{margin-top:1rem;border:1px solid var(--accent);background:#12191b;padding:2rem}#panel label{display:block;color:var(--muted);font:700 .72rem ui-monospace;margin:.9rem 0 .4rem;text-transform:uppercase}#panel textarea,#panel input{width:100%;background:#0d1113;border:1px solid var(--line);color:var(--ink);font:.9rem ui-monospace;padding:.8rem}#panel textarea{min-height:9rem}.actions{display:flex;gap:.7rem;margin-top:1rem;flex-wrap:wrap}.result{border-top:1px solid var(--line);margin-top:1.4rem;padding-top:1rem}.pass{color:var(--green)}.warn{color:var(--accent)}.error{color:#ef8c80}.color-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.swatch{padding:1.2rem;margin-top:1rem;border:1px solid var(--line)}.about{padding:7rem 0;background:var(--accent);color:#201811}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:7rem}.about-grid p{font-size:1.1rem}.about-grid .small{color:#70451f;font-size:.85rem}footer{color:var(--faint);font:.72rem ui-monospace,monospace}@media(max-width:760px){.wrap{width:calc(100% - 2rem)}.hero-grid,.heading,.about-grid{grid-template-columns:1fr;gap:2rem}.hero{padding:4rem 0 5rem}.section,.about{padding:5rem 0}.cards,.guides{grid-template-columns:1fr}.cards article,.guides article{min-height:15rem}.color-row{grid-template-columns:1fr}nav{gap:1rem}.nav,footer .wrap{min-height:4rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Compact hero and palette output */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 4.5rem}
.palette{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}.palette .swatch{min-height:5rem;display:flex;align-items:end}.result textarea[readonly]{min-height:5rem;margin-top:1rem}
.tools-first{padding-top:3.5rem}.guides article p+p{margin-top:1rem}.guides article h2{font-size:2rem}
.tools-first .heading{display:none}.tools-first{padding-top:2.5rem}
.article-page{padding:6rem 0}.article-page .wrap{max-width:760px}.article-page h1{font-size:clamp(2.4rem,5vw,4.5rem);margin:1rem 0 1.5rem}.article-page h2{font-size:2.3rem;margin-top:3rem}.article-dek{font:1.35rem/1.45 Georgia,serif;color:var(--muted);margin-bottom:3rem}.article-page p{font-size:1.08rem}.article-page a{color:var(--accent)}
input[type=color]{width:3rem;height:2.5rem;padding:.2rem;vertical-align:middle}
.palette-item{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);padding:.6rem}.palette-item code{font:700 .8rem ui-monospace,monospace}.result canvas{display:block;width:100%;height:auto;border:1px solid var(--line);margin-top:1rem}
#panel select{width:100%;background:#0d1113;border:1px solid var(--line);color:var(--ink);font:.9rem ui-monospace;padding:.8rem}
.heading h1,.about h1{font-size:clamp(2.4rem,5vw,4.5rem)}