:root{color-scheme:light;--paper:#f3f3f2;--ink:#30332f;--line:#d3d5d2;--blue:#e5efff;--yellow:#fff3bb;--green:#dff4e9}*{box-sizing:border-box}body{margin:0;background:#fafaf9;color:var(--ink);font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #527a78;outline-offset:5px}p{line-height:1.85}h1,h2,h3,p{margin-top:0}.skip{position:absolute;left:16px;top:-80px;background:white;padding:12px;z-index:10}.skip:focus{top:12px}.site-header,footer{max-width:1320px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:24px 40px}.site-header{border-bottom:1px solid var(--line)}.wordmark{font-family:Arial,Helvetica,sans-serif;font-size:20px;font-weight:800;letter-spacing:-.8px}.open-app{font-size:13px;display:flex;gap:24px;align-items:center;min-height:40px}.intro{max-width:1320px;margin:auto;padding:72px 40px 80px;display:grid;grid-template-columns:1fr 1.25fr;gap:52px;align-items:center}.eyebrow{font-size:12px;letter-spacing:.08em;margin-bottom:24px;color:#62675f}h1{font-size:clamp(38px,4.1vw,59px);letter-spacing:-.035em;line-height:1.45;margin-bottom:28px;font-weight:700}.product-name{display:block;font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.6px;margin-bottom:16px}.lead{font-size:16px;line-height:2.1;margin-bottom:30px}.primary{display:inline-flex;justify-content:space-between;gap:32px;align-items:center;background:var(--ink);color:white;padding:16px 22px;border-radius:3px;min-height:52px;font-size:14px}.primary:hover{background:#4a5148}.caption{font-size:11px;color:#73776f;margin:12px 0 0}.demo{position:relative;min-height:524px;border:1px solid var(--line);border-radius:4px;background-color:var(--paper);background-image:radial-gradient(#cdcfcb .7px,transparent .7px);background-size:16px 16px;padding:24px}.demo-label{font-size:11px;color:#70756e;margin-bottom:24px}.memo{position:absolute;border:1px solid #c8ccc7;border-radius:3px;padding:32px 16px 18px;background:white;box-shadow:0 2px 0 #30332f04}.handle{position:absolute;top:6px;left:10px;font-size:16px;color:#899087}.memo h2{font-size:15px;margin:0 0 14px;line-height:1.6}.memo p,.memo li{font-size:13px;line-height:1.8;margin:0}.memo .memo-small{font-size:11px;margin-top:14px;color:#747a71}.idea{left:24px;top:66px;width:55%;z-index:1}.picture{right:20px;top:90px;width:34%;padding:28px 10px 12px;background:var(--blue)}.picture svg{display:block;width:100%;height:auto;margin-bottom:8px}.picture p{font-size:10px}.todo{left:36px;top:282px;width:47%;background:var(--yellow)}.todo ul{list-style:none;margin:0;padding:0}.todo li{margin:5px 0}.todo li span{margin-right:5px}.todo s{color:#747a71}.table-note{right:18px;top:318px;width:43%}.table-note table{border-collapse:collapse;width:100%;font-size:11px}.table-note th,.table-note td{text-align:left;border:1px solid #c8ccc7;padding:6px 5px;font-weight:400}.table-note th{font-weight:600}.demo-foot{position:absolute;bottom:10px;left:24px;right:18px;font-size:10px;line-height:1.7;color:#697066;margin:0}.demo-foot span{display:block;color:#858b81;font-size:9px}.overview{max-width:860px;margin:0 auto;padding:60px 40px 52px;text-align:center}.overview h2,.start h2{font-size:32px;line-height:1.6;letter-spacing:-.02em;margin-bottom:24px}.overview>p:last-child{max-width:630px;margin:0 auto;font-size:15px;color:#60665c}.features{max-width:1240px;margin:0 auto 92px;padding:20px 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.features article{border-top:1px solid var(--line);padding-top:24px}.features h2{font-size:17px;line-height:1.7}.features p{font-size:13px;color:#62685f;margin-bottom:0}.start{max-width:1160px;margin:0 auto 72px;padding:48px;background:var(--green);display:grid;grid-template-columns:1.35fr 1fr;gap:64px;border:1px solid #cad9c9;border-radius:4px}.start .eyebrow{margin-bottom:16px}.start p{font-size:14px}.save-info{border-left:1px solid #bdd0bc;padding-left:32px;align-self:center}.save-info h3{font-size:14px}.save-info p{font-size:12px;color:#586451}.save-info p:last-child{margin-bottom:0}footer{border-top:1px solid var(--line);padding-top:26px;padding-bottom:32px;gap:20px}footer .wordmark{font-size:16px}footer p{font-size:11px;color:#747a71;margin:0 auto 0 0}footer>a{font-size:12px}
@media(max-width:1020px){.intro{gap:28px;padding:48px 28px}.demo{min-height:560px}.picture{top:170px;right:14px}.todo{top:286px;left:20px;width:56%}.table-note{top:410px;width:55%;right:16px}.demo-foot{bottom:8px}.memo{padding-left:12px;padding-right:12px}.idea{width:65%;left:18px}.features{gap:24px}.start{margin-left:28px;margin-right:28px;gap:32px;padding:32px}}
@media(max-width:760px){.site-header{padding:14px 20px}.intro{display:block;padding:38px 20px 28px}.intro-copy{margin-bottom:36px}h1{font-size:40px}.lead{font-size:15px}.demo{max-width:570px;margin:auto;min-height:540px}.idea{width:58%;top:60px}.picture{top:91px;right:16px;width:34%}.todo{top:272px;left:20px;width:53%}.table-note{top:349px;right:16px;width:47%;z-index:2}.overview{padding:42px 24px 28px}.overview h2,.start h2{font-size:26px}.overview>p:last-child{font-size:14px;text-align:left}.features{grid-template-columns:1fr;padding:16px 24px;margin-bottom:40px;gap:24px}.features h2{margin-bottom:10px}.start{display:block;padding:28px 24px;margin:0 20px 36px}.save-info{border-left:0;border-top:1px solid #bdd0bc;padding:24px 0 0;margin-top:30px}footer{padding:20px;flex-wrap:wrap}footer p{width:calc(100% - 110px);margin:0}footer>a{margin-left:auto}.demo .memo h2{font-size:13px}.demo .memo p,.demo .memo li{font-size:12px}.demo .picture p{font-size:10px}.demo .table-note table{font-size:10px}}
@media(max-width:390px){.demo{min-height:590px}.idea{width:76%}.picture{top:224px;right:14px;width:37%}.todo{top:278px;width:61%;left:12px}.table-note{top:438px;width:67%}.demo-foot{left:16px}.demo .memo p,.demo .memo li{font-size:11px}}
@media(max-width:760px){.demo{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:0;padding:18px}.demo-label{grid-column:1/-1;margin:0}.demo .memo{position:relative;inset:auto;width:auto;min-width:0}.demo .idea,.demo .table-note{grid-column:1/-1}.demo .picture{align-self:start}.demo .todo{padding:28px 10px 14px}.demo .todo li{font-size:11px}.demo-foot{position:static;grid-column:1/-1}.demo .table-note table{font-size:12px}}
@media(max-width:390px){.demo .picture,.demo .todo{grid-column:1/-1}.demo .picture svg{max-height:130px}.demo .picture p,.demo .todo li{font-size:12px}}