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