.atlas {max-width:90rem;margin:auto;padding:4rem clamp(1rem,4vw,4rem)}
.atlas h1,.atlas h2,.atlas-preview h2 {font-family:var(--serif)}
.atlas h1 {font-size:clamp(3rem,7vw,7rem);line-height:.95;max-width:12ch;margin:.4em 0}
.atlas-intro {font-size:1.2rem;max-width:42rem}
.atlas-chart,.atlas-preview-chart {overflow-x:auto;max-width:100%;border-top:2px solid;border-bottom:2px solid}
.atlas-chart {margin:3rem 0 1rem}
.atlas-inner {min-width:calc(13rem + var(--months) * 64px)}
.atlas-preview-inner {min-width:calc(10rem + var(--months) * 64px)}
.atlas-axis,.atlas-row,.atlas-preview-row {display:grid;grid-template-columns:13rem minmax(0,1fr)}
.atlas-preview-row,.atlas-preview-axis {grid-template-columns:10rem minmax(0,1fr)}
.atlas-axis {font:.75rem var(--label);border-bottom:1px solid}
.atlas-axis-label,.atlas-row h3,.atlas-preview-label {position:sticky;left:0;background:var(--paper,#f5f1e8);z-index:3;margin:0;padding:.8rem .7rem .8rem 0}
.atlas-row h3 {font:1rem var(--label)}
.atlas-row h3 span {display:block;font-size:.75rem}
.atlas-row,.atlas-preview-row {border-bottom:1px solid;min-height:4rem;align-items:stretch}
.atlas-row:last-child,.atlas-preview-row:last-child {border:0}
.atlas-months {display:grid;grid-template-columns:repeat(var(--months),minmax(64px,1fr));min-width:0}
.atlas-year {display:block;padding:.3rem .4rem}
.atlas-month-label {padding:.3rem .4rem;border-left:1px solid #ccc}
.atlas-cell {border-left:1px solid #ddd;display:grid;grid-template-columns:repeat(3, 12px);align-content:center;justify-content:center;gap:4px;padding:6px 3px;min-height:36px}
.atlas-mark {position:relative;width:12px;height:12px;display:grid;place-items:center;color:inherit}
.atlas-mark:before {content:"";width:var(--size);height:var(--size);background:currentColor}
.atlas-mark.latest {color:#b52c24}
.atlas-mark:focus-visible {outline:2px solid;outline-offset:2px;z-index:4}
.atlas-mark span {position:absolute;bottom:100%;left:0;width:max-content;max-width:16rem;white-space:normal;background:var(--paper,#f5f1e8);color:var(--ink,#111);border:1px solid;padding:.4rem;visibility:hidden;font:.8rem var(--label)}
.atlas-mark:hover,.atlas-mark:focus {z-index:5}
.atlas-mark:hover span,.atlas-mark:focus span {visibility:visible}
.atlas-cue {display:none;font:.8rem var(--label)}
.atlas-cue.overflowing {display:block}
.atlas-axis .atlas-month-label {display:block}
.atlas-map {margin:2rem 0}
.atlas-map h2 {margin-bottom:.5rem}
.atlas-map-summary {font:1.5rem var(--serif)}
.atlas-map-rule {height:3px;background:#ddd;max-width:40rem}
.atlas-map-rule span {display:block;height:100%;background:var(--ink,#111)}
.atlas-map-counts {display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font:.85rem var(--label)}
.atlas-map-note {font:.8rem var(--label)}
.atlas-invite {border-top:1px solid;padding:1rem 0}
.atlas-invite a {display:inline-block;background:var(--ink,#111);color:var(--paper,#fff);padding:.7rem 1rem}
.atlas-personal-legend[hidden],.atlas-invite[hidden] {display:none}
.atlas-personal .atlas-mark:not(.is-read):not(.is-progress):not(.is-saved),.atlas-personal .atlas-cell i:not(.is-read):not(.is-progress):not(.is-saved) {opacity:.3}
.atlas-mark.is-progress:before,.atlas-preview .atlas-cell i.is-progress {background:linear-gradient(to top,currentColor 50%,transparent 50%);outline:1px solid currentColor}
.atlas-mark.is-saved:before,.atlas-preview .atlas-cell i.is-saved {background:transparent;outline:1px solid currentColor;border-radius:50%}
.atlas-legend {display:flex;flex-wrap:wrap;gap:1.5rem;font:.85rem var(--label)}
.atlas-legend b {color:#b52c24}
.atlas-numbers {border-top:2px solid;border-bottom:2px solid;margin:4rem 0;padding:1rem 0}
.atlas-numbers dl {display:flex;flex-wrap:wrap;gap:2rem}
.atlas-numbers dt {font:.75rem var(--label)}
.atlas-numbers dd {font:1.4rem var(--serif);margin:0}
.atlas details {border-top:1px solid;padding:1rem 0}
.atlas summary {cursor:pointer;font:1.4rem var(--serif)}
.atlas li {margin:.6rem 0}
.atlas-weekly {margin-top:4rem;border-top:4px solid;padding:2rem 0}
.atlas-preview {grid-column:1 / -1;min-width:0;border-top:3px solid;padding:2rem 0;margin:2rem 0}
.atlas-preview-label {font:.8rem var(--label)}
.atlas-preview .atlas-cell i {width:9px;height:9px;background:currentColor}
.atlas-preview .atlas-cell i.latest {color:#b52c24}