*{box-sizing:border-box}body{margin:0;background:#f6f6f5;color:#20211e;font:15px/1.5 system-ui,sans-serif}main{max-width:1580px;margin:auto;padding:36px}header,.toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px}header{color:#666666;font-size:13px}a{color:inherit;text-underline-offset:4px}h1{font-size:clamp(30px,4vw,56px);font-weight:550;letter-spacing:-.05em;margin:52px 0 12px}.intro{font-size:18px;max-width:740px}.note{font-size:13px;color:#666666;max-width:820px}.toolbar{margin:30px 0 20px;justify-content:flex-start}button{font:inherit;cursor:pointer;border:1px solid #d4d4d1;background:transparent;border-radius:6px;padding:9px 14px;color:inherit}button:hover{background:#f6f6f5}button:focus-visible,a:focus-visible,input:focus-visible,.scroll:focus-visible{outline:3px solid #676ac3;outline-offset:3px}.scroll{overflow:auto;border-top:1px solid #ccc}#atlas{--cell:108px;display:grid;grid-template-columns:125px repeat(10,minmax(var(--cell),1fr));min-width:max-content;gap:1px;background:#f6f6f5}#atlas>*{background:#f6f6f5}.column{padding:13px 4px;text-align:center;font-size:12px;color:#666666}.row{font-size:13px;padding:18px 12px;position:sticky;left:0;z-index:1}.row small{display:block;font-size:10px;color:#666666;margin-top:6px}.tile{border:0;border-radius:0;padding:0;position:relative;width:100%;aspect-ratio:1}.tile svg{width:100%;height:100%;display:block}.tile span{position:absolute;bottom:4px;left:8px;font-size:9px;color:#666666}.tile:hover{background:#f6f6f5}dialog{border:1px solid #d4d4d1;border-radius:12px;width:min(620px,95vw);padding:24px;background:#f6f6f5;max-height:95vh;overflow:auto}dialog::backdrop{background:#191b1766;backdrop-filter:blur(5px)}#close{float:right}h2{font-size:20px;font-weight:500}#large svg{display:block;width:100%;max-height:55vh}#recipe{font-size:14px;color:#666666}.navigation{display:flex;justify-content:space-between}@media(max-width:600px){main{padding:20px 14px}header{font-size:11px}h1{margin-top:35px}.toolbar{flex-wrap:wrap}.intro{font-size:16px}#atlas{grid-template-columns:100px repeat(10,var(--cell))}.row{padding:12px 6px}}
#atlas{min-width:0;width:max(100%,calc(125px + 10 * var(--cell) + 10px));grid-template-columns:125px repeat(10,minmax(0,1fr))}.tile{min-width:0}.tile svg{min-width:0}@media(max-width:600px){#atlas{width:calc(100px + 10 * var(--cell) + 10px);grid-template-columns:100px repeat(10,minmax(0,1fr))}}