body { background: #f5f5f2; color: #292e35; }
.lab-header { max-width: 1240px; margin: 0 auto; padding: 36px 30px 24px; display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.lab-kicker { font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1.8px; color: #68737e; margin-bottom: 10px; }
.lab-header h1 { font: 500 27px/1.4 Georgia, "Noto Serif SC", "Songti SC", serif; letter-spacing: -.8px; margin: 0 0 8px; }
.lab-header p { font-size: 12px; color: #64707a; margin: 0; line-height: 1.8; }
.back-link { white-space: nowrap; font-size: 12px; border: 1px solid #d7dcd8; border-radius: 20px; padding: 8px 15px; margin-top: 10px; color: #3f546b; }
.palette-grid { max-width: 1240px; margin: 0 auto; padding: 0 30px 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.palette-card { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 4px 12px #22222204; transition: transform .18s ease, box-shadow .18s ease; }
.palette-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px #2222220c; }
.card-top { padding: 13px 16px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
.card-top h2 { margin: 0; font: 550 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; }
.card-top h2 small { color: var(--muted); font-size: 10px; font-weight: 400; margin-left: 5px; }
.palette-swatches { display: flex; gap: 5px; }
.palette-swatches i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--line); }
.mini-preview { position: relative; height: 270px; overflow: hidden; background: var(--bg); }
.mini-preview iframe { border: 0; width: 1200px; height: 1000px; transform: scale(var(--preview-scale, .3)); transform-origin: 0 0; pointer-events: none; }
.preview-hit { position: absolute; inset: 0; z-index: 1; }
.preview-hit:focus-visible { outline-offset: -4px; }
.card-bottom { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--line); background: var(--surface); }
.card-bottom p { margin: 0; font-size: 10px; color: var(--muted); }
.card-bottom a { font-size: 10px; white-space: nowrap; font-weight: 550; }
.lab-footer { max-width: 1240px; padding: 0 30px 30px; margin: auto; color: #6b747c; font-size: 11px; display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap; }
@media (max-width: 1050px) { .palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .lab-header { display: block; padding: 25px 20px; } .lab-header h1 { font-size: 24px; } .back-link { display: inline-block; margin-top: 16px; } .palette-grid { grid-template-columns: 1fr; padding: 0 20px 25px; gap: 20px; } .lab-footer { padding: 0 20px 25px; } }
@media (prefers-reduced-motion: reduce) { .palette-card { transition: none; } .palette-card:hover { transform: none; } }

.palette-tabs { max-width: 1240px; margin: 0 auto 20px; padding: 0 30px; display: flex; gap: 8px; flex-wrap: wrap; }
.palette-tabs a { padding: 6px 13px; border: 1px solid #d7dcd8; border-radius: 20px; color: #52616a; font-size: 12px; }
.palette-tabs a[aria-current="page"] { color: #fff; background: #344a43; border-color: #344a43; }
.palette-tabs a:hover { text-decoration: none; border-color: #344a43; }
@media (max-width: 650px) { .palette-tabs { padding: 0 20px; } }