*{box-sizing:border-box;margin:0;padding:0}body{background-color:#eee;font-family:system-ui,sans-serif;line-height:1.6}#app{width:100%;margin:0;padding:0 3rem}.M{border-left:2px solid #aaa;border-right:2px solid #aaa;align-items:flex-start;gap:2rem;width:100%;margin-top:5rem;padding:0 1rem;display:flex}.M-left{flex:1;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:2rem;width:100%;padding:0;display:grid}@media (width<=768px){#app{padding:0 1rem}.M{flex-direction:column;gap:1rem;margin-top:4rem}.M-left{gap:1rem;padding:0}}.page{flex-direction:column;flex:1;justify-content:flex-start;gap:1.2rem;width:100%;padding:0 0 50dvh;display:flex}.page>h1{color:#000;font-size:1.5rem}.page>h2,.page>p{color:#000;font-size:1.2rem}.page>img{object-fit:contain;width:100%;height:100%;display:block}@media (width<=768px){.page{gap:1rem;padding-bottom:0}.page>h1{font-size:1.2rem}.page>h2,.page>p{font-size:1rem}}.sidebar{flex-direction:column;flex-shrink:0;gap:2rem;width:100%;max-width:16rem;padding:0;display:flex}.sidebar-text{background:#fff;border-radius:12px;flex-direction:column;gap:.5rem;width:100%;padding:1rem;display:flex}.sidebar-text>h1,.sidebar-text>p{font-size:1rem}@media (width<=768px){.sidebar{gap:1rem;padding:0}}.block{aspect-ratio:1;cursor:pointer;background:#fff;border-radius:12px;flex-direction:column;width:100%;display:flex;overflow:hidden}.block .text-area{flex-direction:column;justify-content:center;padding:.5rem;display:flex}.block .text-area>p{color:#000;font-size:1rem}.block .image-area{flex:1;position:relative;overflow:hidden}.block .image-area>img{object-fit:cover;width:100%;height:100%;display:block}.block .image-area img.contain{object-fit:contain}.block .image-area .date-overlay{color:#fff;background:linear-gradient(#0000,#000000b3);width:100%;padding:1rem;font-size:.875rem;transition:transform .3s;position:absolute;bottom:0;left:0;transform:translateY(100%)}.block:hover .image-area .date-overlay{transform:translateY(0)}.pagination{grid-column:1/-1;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:1rem;display:flex}.pagination>button{cursor:pointer;background:#fff;border:none;border-radius:1rem;width:2rem;height:2rem;font-size:1rem;transition:background .2s,color .2s}.pagination>span{color:#000;user-select:none;cursor:default;justify-content:center;align-items:center;width:2rem;height:2rem;font-size:1rem;display:flex}.pagination>button:hover:not(:disabled),.pagination>button.active{color:#fff;background:#69f}.pagination>button:disabled{display:none}.H{z-index:100;background:#eee;justify-content:space-between;align-items:center;width:100%;height:4rem;padding:0 3rem;display:flex;position:fixed;top:0;left:50%;transform:translate(-50%)}.H>h1{color:#69f;cursor:pointer;font-size:2rem}.H-butto{color:#000;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;font-size:1.2rem;display:flex}.H-burger{cursor:pointer;background:0 0;border:none;flex-direction:column;justify-content:space-between;height:1rem;display:none}.H-burger>span{background:#69f;width:1.5rem;height:.2rem;transition:all .5s;display:block}.H-burger.active span:first-child{transform:translateY(.3rem)rotate(45deg)}.H-burger.active span:nth-child(2){opacity:0;transform:scaleX(0)}.H-burger.active span:nth-child(3){transform:translateY(-.5rem)rotate(-45deg)}.H-menu{z-index:50;opacity:0;background:#eee;flex-direction:column;justify-content:space-between;width:100%;max-height:0;padding:0;transition:max-height .5s,opacity .5s;display:flex;position:fixed;top:3rem;left:50%;overflow:hidden;transform:translate(-50%)}.H-menu.open{opacity:1;scrollbar-width:none;border-bottom:1px solid #aaa;max-height:100%;overflow-y:auto}.H-menu.open::-webkit-scrollbar{display:none}.H-menu>p{color:#000;cursor:pointer;background:0 0;border-top:1px solid #aaa;justify-content:center;align-items:center;width:100%;padding:.5rem 0;font-size:1rem;display:flex}@media (width<=768px){.H{height:3rem;padding:0 1rem}.H>h1{font-size:1.2rem}.H-butto{display:none}.H-burger{display:flex}.H-menu>h1{font-size:.875rem}}.F{background:0 0;flex-direction:column;width:100%;display:flex}.F p{color:#999;text-align:center;padding-top:6rem;padding-bottom:2rem;font-size:1rem}@media (width<=768px){.F p{padding-top:4rem;padding-bottom:1rem;font-size:.875rem}}.code-block{align-items:top;white-space:pre;background-color:#e6e6e6;border-radius:.5rem;justify-content:space-between;padding:1rem;display:flex}.code-block>code{color:#333;word-break:break-all;white-space:pre-wrap;font-family:monospace;font-size:1rem}.code-copy{color:#666;cursor:pointer;background:0 0;border:none;transition:color .2s;display:flex}.code-copy:hover{color:#000}@media (width<=768px){.code-block{padding:.5rem}.code-block>code{font-size:.875rem}}