:root{font-family:system-ui,sans-serif;color:#152235;background:#f7f9fc;line-height:1.65}*{box-sizing:border-box}body{margin:0}header,main{max-width:780px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #dde3ed}a{color:#2456ac;text-underline-offset:3px}.brand{font-weight:750;text-decoration:none;color:inherit}h1{font-size:clamp(28px,5vw,40px);line-height:1.2}h2{font-size:22px;margin-top:32px}p,li{max-width:70ch}nav{display:flex;gap:20px;flex-wrap:wrap}.muted{color:#536176;font-size:14px}.ad-area{margin:48px 0;padding:24px 0;border-top:1px solid #dde3ed;border-bottom:1px solid #dde3ed}button{font:inherit;color:#2456ac;background:white;border:1px solid #aab8ce;border-radius:8px;padding:10px 16px;cursor:pointer}.ad-label{font-size:12px;letter-spacing:.05em;color:#536176}ins{display:block}a:focus-visible,button:focus-visible{outline:3px solid #2156b8;outline-offset:4px}blockquote{margin:24px 0;padding:8px 20px;border-left:3px solid #aab8ce;background:#fff}.guide-list{padding:0;list-style:none}.guide-list li{margin:24px 0}.guide-list h2{margin:0}.guide-list p{margin:8px 0}figure{margin:28px 0;padding:16px;border:1px solid #dde3ed;border-radius:12px;background:#fff}figure img{display:block;max-width:100%;height:auto;margin:auto}figcaption{font-size:14px;color:#536176;margin-top:12px}figure:has(img[src$="harbor-studio.png"]){max-width:560px}.guide-note{border-top:1px solid #dde3ed;margin-top:32px;padding-top:16px}.skip{position:absolute;left:16px;top:-100px}.skip:focus{top:8px;background:white;padding:8px}main{overflow-wrap:anywhere}header{flex-wrap:wrap}@media(max-width:400px){header,main{padding:20px}}