:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#fafaf9;background:#0c0a09;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}
.shell{max-width:1240px;margin:auto;padding:44px 42px 80px}
.topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #292524;padding-bottom:24px}.brand{font-size:18px;letter-spacing:-.045em;font-weight:760}.brand span{color:#e7bd82;font-weight:460}.top-note{font-size:13px;color:#a8a29e}
.heading{margin:55px 0 31px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a8a29e;margin:0 0 11px}.heading h1{font-size:clamp(32px,4vw,48px);letter-spacing:-.055em;line-height:1.08;margin:0;font-weight:680}.description{color:#a8a29e;font-size:15px;line-height:1.55;margin:13px 0 0}
.family-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.family{display:block;border:1px solid #292524;border-radius:18px;padding:13px;background:#1c1917;transition:transform .15s,border-color .15s,box-shadow .15s}.family:hover{transform:translateY(-2px);border-color:#57534e;box-shadow:0 9px 26px #0005}.family:focus-visible,.swatch:focus-visible,.back:focus-visible{outline:3px solid #e7bd82;outline-offset:3px}.family-preview{height:80px;border-radius:10px}.family-meta{display:flex;flex-direction:column;gap:4px;padding:14px 1px 1px}.family-name{font-size:18px;font-weight:660;line-height:1.2}.family-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;color:#e8cda6;line-height:1.4}
.back{display:inline-flex;gap:8px;align-items:center;color:#b7b1a9;font-size:14px;padding:9px 0}.back:hover{color:#fff}.detail-heading{margin:38px 0 38px}.detail-heading h1{display:flex;align-items:center;gap:13px}.title-dot{width:19px;height:19px;border-radius:50%;background:var(--color);flex:none}
.tone-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:20px;row-gap:33px}.swatch{border:0;padding:0;background:transparent;text-align:left;min-width:0}.code-row{display:flex;gap:8px;align-items:center;min-height:28px;margin-bottom:9px}.scale-label{color:#a8a29e;font-size:13px;font-weight:650;margin-right:auto}.hex{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;font-weight:580;color:#e7e5e4;letter-spacing:.01em}.copy-icon{width:16px;height:16px;flex:none;color:#a8a29e;opacity:0;transition:opacity .15s}.swatch:hover .copy-icon,.swatch:focus-visible .copy-icon{opacity:1}.color-block{display:block;background:var(--color);height:180px;border-radius:7px;border:1px solid #ffffff12;transition:box-shadow .15s,transform .15s}.swatch:hover .color-block{box-shadow:0 0 0 3px #ffffff4a;transform:translateY(-2px)}.swatch:active .color-block{transform:scale(.99)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:#fafaf9;color:#1c1917;border-radius:8px;padding:11px 16px;font-size:14px;box-shadow:0 8px 26px #0006;transition:opacity .18s,transform .18s}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.family-grid{grid-template-columns:repeat(2,1fr)}.tone-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.shell{padding:25px 18px 60px}.top-note{display:none}.heading{margin:42px 0 25px}.family-grid{grid-template-columns:1fr;gap:13px}.family-preview{height:76px}.detail-heading{margin:29px 0 30px}.tone-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 12px}.color-block{height:135px}.hex{font-size:13px}.copy-icon{display:none}}
@media(max-width:380px){.color-block{height:108px}}