:root{--navy:#173450;--ink:#26394a;--muted:#526775;--accent:#a43e31;--cream:#fff9ed;--mint:#edf5f1;--line:#d7e0df}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;color:var(--ink);background:#fffdf9;font-family:-apple-system,BlinkMacSystemFont,"BIZ UDPGothic","Yu Gothic",Meiryo,sans-serif;line-height:1.85}a{color:var(--navy);text-underline-offset:4px}button,input{font:inherit}img{max-width:100%;height:auto}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #bf680c;outline-offset:5px}a:hover{color:var(--accent)}.wrap{width:min(1120px,calc(100% - 48px));margin:auto}.site-head{background:#fffdf9;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.nav{display:flex;justify-content:space-between;align-items:center;min-height:78px;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:19px;text-decoration:none;white-space:nowrap}.brand img{border-radius:11px}.nav nav{display:flex;gap:25px;align-items:center;font-weight:700;font-size:14px}.nav nav a{text-decoration:none}.small-button{padding:7px 15px;border:1px solid var(--line);border-radius:8px}.skip{position:fixed;top:-100px;left:12px;padding:12px;background:white;z-index:50}.skip:focus{top:10px}.hero{background:var(--navy);color:white;padding:84px 0 88px}.hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:48px;align-items:center}.eyebrow{font-size:12px;letter-spacing:.14em;color:var(--accent);font-weight:800;margin:0 0 12px}.hero .eyebrow{color:#ffcb98}.hero h1{font-size:clamp(28px,3vw,39px);line-height:1.6;letter-spacing:.02em;margin:0 0 22px}.hero-lead{font-size:16px;line-height:2;color:#e2e9e9;max-width:32em}.buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.button{display:inline-flex;gap:22px;justify-content:space-between;align-items:center;background:var(--navy);color:white;padding:13px 21px;border-radius:9px;font-weight:700;text-decoration:none;border:1px solid transparent;line-height:1.6}.button:hover{background:#285672;color:white}.button.light{background:var(--cream);color:var(--navy)}.button.outline{border-color:#92acbb;background:transparent}.button.secondary{background:var(--mint);color:var(--navy);border-color:var(--line)}.fine{font-size:12px;color:#cad9df;margin-top:20px}.hero-visual{transform:rotate(-1deg);background:#0d243a;border-radius:18px;padding:20px 15px 16px;box-shadow:0 25px 65px #071a3180}.hero-visual img{display:block;border-radius:7px;width:100%;height:auto}.visual-label{display:block;margin:0 0 15px 6px;font-size:15px;font-weight:bold}.visual-tags{display:flex;gap:10px;justify-content:center;margin-top:18px;font-size:12px;color:#d2e4e7}.visual-tags span+span{border-left:1px solid #7891a0;padding-left:10px}.section{padding-top:82px;padding-bottom:82px}h1,h2,h3{color:var(--navy);line-height:1.6}h1{font-size:clamp(27px,4vw,40px);line-height:1.5}.hero h1{color:white}h2{font-size:clamp(25px,3vw,34px);margin:0 0 28px}h3{font-size:20px;margin:10px 0}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}.feature-card{position:relative;display:block;border:1px solid var(--line);border-radius:14px;padding:24px 26px 44px;text-decoration:none;background:white;transition:transform .2s}.feature-card:hover{transform:translateY(-3px);border-color:#6d9794}.feature-card p{color:var(--muted);font-size:14px;line-height:1.9}.num{color:var(--accent);font-weight:800;font-size:14px}.arrow{position:absolute;right:25px;bottom:15px;font-size:23px}.tinted{background:var(--mint)}.demo-grid{display:grid;grid-template-columns:1fr 310px;gap:100px;align-items:center;max-width:960px}.demo-grid p{max-width:34em}.demo-grid video{display:block;width:100%;max-height:540px;border-radius:16px;background:#0d2338;box-shadow:0 18px 35px #17345026}.muted{color:var(--muted);font-size:13px}.text-link{font-weight:700}.guide-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:65px;align-items:center}.quick-links a{display:block;padding:18px 10px;border-bottom:1px solid var(--line);font-weight:700;text-decoration:none}.quick-links span{display:block;font-size:12px;font-weight:400;color:var(--muted)}footer{margin-top:32px;padding:38px 0;background:var(--navy);color:#dce8e9;font-size:12px}footer a{display:inline-block;color:#fff;margin:0 22px 8px 0}footer a:hover{color:#ffcd9b}footer p{margin:15px 0 0}.breadcrumb{font-size:12px;color:var(--muted);margin:24px 0 35px}.breadcrumb a{color:var(--muted)}.manual-index,.chapter{padding-bottom:45px}.intro{font-size:17px;color:var(--muted);max-width:50em;margin-bottom:30px}.manual-tools{display:flex;gap:30px;align-items:end;padding:24px;background:var(--mint);border-radius:12px}.manual-tools label{display:block;flex:1;font-size:13px;font-weight:bold}.manual-tools input{display:block;width:100%;margin-top:8px;padding:10px 13px;border:1px solid #9dadac;border-radius:7px;background:white;min-width:0}.toc-group{margin-top:42px}.toc-group h2{font-size:22px;border-left:4px solid var(--accent);padding-left:14px;margin-bottom:18px}.chapter-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.chapter-list a{display:flex;align-items:flex-start;gap:15px;padding:20px;border:1px solid var(--line);border-radius:10px;text-decoration:none;background:white}.chapter-list a:hover{border-color:var(--navy)}.chapter-list a>span{color:var(--accent);font-weight:bold;font-size:13px;padding-top:4px}.chapter-list h3{font-size:16px;margin:0 0 7px}.chapter-list p{font-size:12px;color:var(--muted);margin:0}.chapter-list b{margin-left:auto}.chapter-list [hidden],.toc-group[hidden]{display:none}.route{background:var(--mint);border-radius:9px;padding:16px 20px;font-size:14px}.route span{display:block;font-size:11px;font-weight:bold;color:var(--accent);margin-bottom:4px}.lesson{display:grid;grid-template-columns:1fr 380px;gap:60px;margin:35px 0}.steps{padding:0;margin:0;list-style:none;counter-reset:steps}.steps li{counter-increment:steps;position:relative;padding:0 0 30px 50px}.steps li::before{content:counter(steps);position:absolute;left:0;top:3px;background:var(--accent);color:#fff;border-radius:9px;width:32px;height:32px;text-align:center;line-height:32px;font-size:14px;font-weight:bold}.steps h2{font-size:19px;margin:0 0 10px}.steps p{font-size:15px;margin:0;line-height:2}.screenshot{margin:0 auto 28px}.screenshot a{display:block;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:white;cursor:zoom-in}.screenshot img{display:block;width:100%}.screenshot.portrait{max-width:380px}.screenshot .crop-capture{aspect-ratio:430/880}.screenshot .crop-capture img{max-height:none}.screenshot figcaption{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.7}.lesson.wide{grid-template-columns:1fr;gap:20px}.lesson.wide .figures{grid-row:1;display:flex;gap:22px;align-items:flex-start;justify-content:center}.lesson.wide .figures .landscape{flex:1;min-width:0}.lesson.wide .figures .portrait{max-width:215px;flex:0 1 215px}.lesson.wide .steps{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}.note{background:var(--mint);border-left:3px solid #4a8176;padding:18px 22px;border-radius:0 8px 8px 0;font-size:13px;line-height:1.95;margin:28px 0}.page-nav{display:grid;grid-template-columns:1fr 1fr;gap:25px;border-top:1px solid var(--line);padding:27px 0;margin-top:35px}.page-nav a{text-decoration:none;font-weight:700;font-size:14px}.page-nav a:last-child{text-align:right}.page-nav small{display:block;font-weight:400;color:var(--muted);font-size:11px}.image-dialog{width:min(96vw,1440px);max-width:96vw;max-height:94vh;padding:50px 12px 12px;border:0;border-radius:10px;background:#fff;overflow:auto}.image-dialog::backdrop{background:#102333d9}.image-dialog img{display:block;margin:auto;max-height:78vh;width:auto;max-width:100%;object-fit:contain}.image-dialog button{position:absolute;right:12px;top:9px;border:1px solid var(--line);background:white;border-radius:6px;padding:5px 12px;color:var(--navy);cursor:pointer}.image-dialog p{text-align:center;margin:8px 0 0;font-size:12px}.image-dialog p a{cursor:zoom-in}@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:35px}.hero{padding:55px 0}.hero-visual{max-width:700px}.hero h1{font-size:36px}.feature-grid{grid-template-columns:1fr 1fr}.demo-grid{gap:45px;grid-template-columns:1fr 260px}.guide-grid{gap:35px;grid-template-columns:1fr 1fr}.lesson{gap:30px;grid-template-columns:1fr 320px}.chapter-list{grid-template-columns:1fr}.manual-tools{flex-wrap:wrap}}@media(max-width:640px){.wrap{width:calc(100% - 32px)}.nav{min-height:68px;gap:10px}.brand{font-size:16px;gap:8px}.brand img{width:33px;height:33px}.nav nav{gap:12px;font-size:12px}.small-button{padding:6px 9px}.hero{padding:40px 0 48px}.hero h1{font-size:28px;line-height:1.65}.hero-lead{font-size:14px}.hero-grid{gap:28px}.hero-visual{padding:13px 10px}.visual-label{font-size:13px}.visual-tags{font-size:10px;gap:7px}.section{padding-top:50px;padding-bottom:50px}.feature-grid{grid-template-columns:1fr;gap:13px}.feature-card{padding:20px 22px 30px}.feature-card h3{font-size:19px}.feature-card p{margin:9px 0}.demo-grid,.guide-grid{grid-template-columns:1fr;gap:25px}.demo-grid video{max-width:285px;margin:auto}.buttons{gap:10px}.button{font-size:14px;padding:12px 16px}.breadcrumb{font-size:11px;margin-bottom:27px}h1{font-size:28px}.intro{font-size:15px}.manual-tools{padding:18px;gap:17px;display:block}.manual-tools .button{margin-top:20px}.lesson,.lesson.wide{grid-template-columns:1fr;gap:20px;margin-top:25px}.lesson.wide .figures{display:block;grid-row:auto}.lesson.wide .figures .portrait{max-width:320px}.lesson.wide .steps{display:block}.steps li{padding-left:43px;padding-bottom:25px}.steps h2{font-size:18px}.steps p{font-size:14px}.steps li::before{width:29px;height:29px;line-height:29px}.figures{max-width:100%;min-width:0}.screenshot.portrait{max-width:350px}.note{padding:15px 17px;font-size:12px}.page-nav{gap:18px}.page-nav a{font-size:12px}.route{font-size:12px;padding:14px 16px}.chapter-list a{padding:17px;gap:12px}.chapter-list h3{font-size:15px}footer a{margin-right:15px}}@media(max-width:360px){.wrap{width:calc(100% - 24px)}.brand{font-size:14px}.brand img{width:29px;height:29px}.nav nav{gap:8px;font-size:11px}.small-button{padding:5px 7px}.hero h1{font-size:25px}.visual-tags{font-size:9px}h1{font-size:25px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}@media print{.site-head,footer,.page-nav,.manual-tools,.skip{display:none}.wrap{width:100%}.lesson{gap:25px;grid-template-columns:1fr 35%}.screenshot{break-inside:avoid}.steps li{break-inside:avoid}a{color:inherit}body{font-size:10pt}.hero{background:white;color:var(--ink)}.hero h1{color:var(--navy)}}
.screenshot .crop-team{aspect-ratio:590/530}.screenshot .crop-team img{width:199.66%;max-width:none}.screenshot .crop-roster{aspect-ratio:1280/270}