:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#181b22;line-height:1.6;--blue:#224fcb;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1240px;margin:auto;padding-inline:clamp(20px,4vw,64px)}
header,nav,footer,.brand{display:flex;align-items:center}header{min-height:72px;justify-content:space-between;border-bottom:1px solid #e4e7ee}.brand{gap:9px;font-weight:720;font-size:20px}.brand img{border-radius:8px}
nav,footer{gap:clamp(13px,3vw,36px)}a{color:inherit;text-decoration:none;transition:color .16s,transform .16s,background .16s}a:hover{color:var(--blue)}a:focus-visible{outline:3px solid #3686ee;outline-offset:4px}
.hero{display:grid;grid-template-columns: .88fr 1.12fr;align-items:center;gap:clamp(24px,4vw,64px);padding-block:clamp(52px,8vw,112px)}h1,h2,h3,p,figure{margin:0}h1{font-size:clamp(40px,4.4vw,68px);letter-spacing:-.058em;line-height:1.13}h2{font-size:clamp(26px,3vw,40px);letter-spacing:-.045em}h3{font-size:20px;letter-spacing:-.03em}
p{color:#505967}.intro p{max-width:25em;font-size:18px;margin:22px 0 28px}.button,.textlink{display:inline-block;font-weight:600}.button{background:var(--blue);color:white;border-radius:9px;padding:10px 17px;margin-right:14px}.button:hover{color:white;background:#183eaa;transform:translateY(-2px)}a:active{transform:scale(.98)}.textlink{color:var(--blue)}small{display:block;color:#616979;margin-top:12px}
#features,#install{border-top:1px solid #dbe0e8;padding-block:clamp(36px,5vw,68px)}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:28px}article{border-left:2px solid #c6d9ff;padding-left:16px}article p,.packages p{margin-top:8px}#install{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center}#install h2+p{margin-top:10px}pre{background:#f1f4f9;padding:14px;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere;color:#243d71}footer{font-size:14px;min-height:80px;border-top:1px solid #dbe0e8}footer b{margin-right:auto}.packages a{margin-top:10px}
@media(max-width:760px){.hero,.features,#install{grid-template-columns:1fr}.hero{gap:32px}.features{gap:22px}nav{font-size:14px}}
@media(prefers-reduced-motion:no-preference){.intro,.showcase{animation:appear .45s ease-out both}@keyframes appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}a{transition:none}}
body{background:#fdfdfc}.hero{grid-template-columns:.79fr 1.21fr}.intro h1{font-size:clamp(46px,5.3vw,78px)}em{color:#2358ba;font-style:normal}.showcase,.chapter>*{min-width:0}
.desk{position:relative;isolation:isolate;overflow:hidden;height:clamp(300px,30vw,400px);border-radius:18px;background:linear-gradient(155deg,#e5eff6,#c5dbed 65%,#acc7e2);box-shadow:inset 0 0 0 1px #34567115}
.deskbar,.paper-head,.progress,.controls{display:flex;align-items:center;justify-content:space-between;gap:10px}
.deskbar{height:34px;padding:0 16px;background:#ffffff62;font-size:12px;color:#384b5d}.deskbar b{font-weight:550}
.itinerary{position:absolute;top:21%;left:7%;color:#324e6f;transform:rotate(-6deg);border:1px solid #e2e4df;background:#fffdf1;padding:17px 20px 30px;border-radius:3px;box-shadow:0 5px 16px #4a639323}.itinerary small{font:9px/2 monospace;letter-spacing:.13em;margin:0}.itinerary strong,.itinerary i{display:block}.itinerary strong{font:700 30px/1.7 Georgia,serif}.itinerary i{font-size:12px}
.mountains{position:absolute;inset:26% 0 0;z-index:-1;background:linear-gradient(160deg,#8faeba,#728eaa);clip-path:polygon(0 75%,17% 60%,27% 68%,51% 30%,59% 40%,76% 11%,100% 42%,100% 100%,0 100%)}
.floating{position:absolute;top:24%;right:8%;width:min(245px,68%);height:190px;border-radius:13px;background:#fff;overflow:hidden;box-shadow:0 14px 30px #263c5429;transition:width .48s,height .48s,right .48s,top .48s,border-radius .48s;transition-timing-function:cubic-bezier(.22,.75,.22,1)}
.float-title{display:flex;align-items:center;gap:8px;height:40px;padding:0 15px;font-size:14px;font-weight:600;white-space:nowrap}.float-title i{width:8px;height:8px;border-radius:50%;background:#557db4;flex:none}
.float-body{padding:4px 16px;min-width:190px;transition:opacity .18s}.float-body p,.float-body span{font-size:13px;display:block;margin:5px 0}.float-body b{font-size:19px}
[data-mode=capsule] .floating{width:132px;height:40px;border-radius:22px}
[data-mode=edge] .floating{width:28px;height:108px;right:0;top:32%;border-radius:10px 0 0 10px}
[data-mode=edge] .float-title{writing-mode:vertical-rl;height:108px;width:28px;justify-content:center;padding:0}
:is([data-mode=capsule],[data-mode=edge]) .float-body{opacity:0}
.controls{justify-content:flex-start;gap:4px;margin-top:14px;flex-wrap:wrap}button,.library input{font:inherit}
button{cursor:pointer;color:#314358;background:#fff;border:1px solid #d4dfeb;border-radius:8px;padding:6px 12px;transition:transform .16s,background .16s}button:hover{background:#edf4ff}button:active{transform:scale(.96)}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #2771cd;outline-offset:3px}
.controls button{font-size:13px}.controls button[aria-pressed=true]{background:#244d92;border-color:#244d92;color:white}#play{margin-left:auto}.caption{margin-top:7px;min-height:2.9em;font-size:13px}
.chapter,.more,.faq{border-top:1px solid #dbe0e8;padding-block:clamp(40px,6vw,86px)}.chapter{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,7vw,100px)}.reverse .story{order:2}.story p{margin-top:18px}.story .aside{font-size:14px;border-left:2px solid #a6bfda;padding-left:14px;color:#526780}
.paper,.library,.history{border:1px solid #d7e0e9;border-radius:15px;background:#f2f6fa;padding:clamp(19px,3vw,38px)}.paper{background:#fbf8ec;border-color:#e8dfc7}.paper-head{font-size:13px;color:#5a6370}.paper h3,.history h3{margin:16px 0 5px;font-size:24px}.tasks{display:grid;gap:6px;margin:17px 0}.tasks label{display:flex;align-items:center;gap:9px;cursor:pointer}.tasks input{width:17px;height:17px;accent-color:#285abd}.tasks label:has(:checked){color:#777;text-decoration:line-through}
.progress{font-size:12px;border-top:1px solid #dedbcf;padding-top:12px}.progress progress{width:50%;height:7px;accent-color:#285abd}
.library label{display:block;font-weight:bold;margin-bottom:12px}.library input{background:white;border:1px solid #bfccdf;border-radius:8px;padding:9px 12px;width:100%}.library ul{padding:0;min-height:132px;list-style:none}.library li{margin-top:8px}.library li span{display:block;color:#546477;font-size:13px}
.history{background:#eef3ef}.history hr{border:0;border-top:1px solid #cdd8d0;margin:20px 0}.history p{margin:10px 0 18px}.history small{min-height:1.5em}
.faq h2{margin-bottom:18px}.faq details{border-top:1px solid #dbe0e8;padding:15px 0}.faq summary{font-weight:600;cursor:pointer}.faq details p{padding:12px 0 0;max-width:48em}.features a{display:inline-block;color:var(--blue);margin-top:8px}.packages .button{margin-top:12px}
@media(max-width:760px){.hero,.chapter{grid-template-columns:minmax(0,1fr)}.hero{padding-top:38px}.reverse .story{order:0}.desk{height:286px}.hero h1 br,.story br{display:none}.intro h1{font-size:clamp(38px,8vw,52px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}}
button.float-title{width:100%;background:transparent;border:0;border-radius:inherit;text-align:left;color:#18283a}
button.float-title:hover{background:#eaf1fb}.peek{position:absolute;top:33%;right:40px;pointer-events:none;opacity:0;transform:translateX(5px);transition:opacity .18s,transform .18s;background:white;border-radius:9px;box-shadow:0 8px 24px #253b5226;padding:12px 16px;font-size:13px}.peek small{margin:4px 0 0}.desk[data-mode=edge]:has(.floating:is(:hover,:focus-within)) .peek{opacity:1;transform:none}
.lead{display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:6%;padding-block:clamp(45px,7vw,100px)}.lead h1{font-size:clamp(44px,5vw,74px)}.lead p{max-width:26em;margin:20px 0 25px}.pinboard{position:relative;height:340px;background-color:#edf1f5;background-image:radial-gradient(#aab9c7 1px,transparent 1px);background-size:17px 17px;border-radius:18px;overflow:hidden}.poster{position:absolute;border-radius:12px;box-shadow:0 10px 25px #23344a20;padding:16px 21px}.poster strong{font-size:clamp(17px,2vw,26px);line-height:1.4;display:block}.poster p,.poster small{margin:4px 0;font-size:12px}.peach{background:#fff0d7;top:14%;left:7%;transform:rotate(-4deg)}.blue{background:#daeaff;right:5%;bottom:10%;transform:rotate(4deg)}.mint{background:#deefdf;bottom:14%;left:5%;font-size:13px;padding:8px 14px;border-radius:20px}
.studio{padding-block:clamp(36px,5vw,64px);border-top:1px solid #dbe0e8}.studio>p{margin:12px 0 24px;max-width:54em}.workbench,.overview,.reminder{border:1px solid #d7dfe7;border-radius:16px;overflow:hidden;background:white}.workbench{display:grid;grid-template-columns:minmax(180px,30%) 1fr}.workbench aside{padding:20px;background:#f2f5f8}.workbench input,.editor textarea{font:inherit;width:100%;border-radius:7px;border:1px solid #cdd7df;padding:8px}.workbench aside input{margin:12px 0}.workbench aside button{display:block;text-align:left;width:100%;margin-bottom:4px}.workbench aside #list{margin-top:10px}#list button{background:transparent;border-color:transparent;border-left:4px solid var(--tone)}#list button[aria-current=true]{background:white;border-color:#d4dce7;border-left-color:var(--tone)}.editor,.overview,.reminder{padding:clamp(18px,3vw,36px)}.editor{min-width:0}.bar{display:flex;align-items:center;justify-content:space-between;gap:8px}.bar span,.bar small,.editor label,.editor legend{color:#515f73;font-size:13px}.editor label{display:block;margin-top:15px}.editor input,.editor textarea{display:block;color:#18202c;background:#fafbfc}.editor textarea{resize:vertical}.editor fieldset{border:0;padding:0;margin:14px 0}.editor fieldset button{background:var(--tone);margin:4px 5px 0 0;font-size:13px}.editor fieldset button[aria-pressed=true]{outline:2px solid #426189}
.surface{height:310px;position:relative;isolation:isolate;overflow:hidden;border-radius:14px;background:linear-gradient(138deg,#eff4fa,#c7d8e5)}.surface-label{position:absolute;top:12px;left:15px;font-size:12px;color:#476077}#card{position:absolute;overflow:hidden;box-shadow:0 8px 25px #24344624;border-radius:12px;width:min(230px,82%);height:150px;background:var(--tone,#fff0d7);transition:width .24s,height .24s,left .24s,top .24s,background .2s,border-radius .2s}#card.dragging{transition:none}#grip{display:block;width:100%;border:0;background:transparent;text-align:left;touch-action:none;cursor:grab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:650;height:40px;padding:8px 12px}#desktop-body,#peek{padding:8px 12px;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}.surface[data-mode=capsule] #card{width:150px;height:40px;border-radius:20px}.surface[data-mode=edge] #card{width:32px;height:105px}.surface[data-mode=edge] #grip{writing-mode:vertical-rl;height:100%;padding:8px 5px}.surface:not([data-mode=open]) #desktop-body{display:none}#peek{position:absolute;background:white;border-radius:8px;max-width:65%;pointer-events:none;opacity:0;transition:opacity .2s}.surface[data-mode=edge]:has(#grip:is(:focus-visible,:hover)) #peek{opacity:1}#empty{position:absolute;inset:43% 10% auto;text-align:center}.reminder{background:#f4f6fc}.reminder h3{margin:15px 0 8px}.overview{background:#f8fafb}.overview small{margin:0}#metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}#metrics b{display:block;font-size:26px}#metrics span{font-size:13px;color:#45546a}#heat{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;grid-template-columns:repeat(26,minmax(0,1fr));gap:3px;max-width:740px}#heat button{border:0;padding:0;aspect-ratio:1.35;border-radius:3px}#heat button[aria-pressed=true]{outline:2px solid #172644;outline-offset:0}#day{display:block;margin-top:12px;font-size:14px}
@media(max-width:760px){.lead,.workbench{grid-template-columns:minmax(0,1fr)}.pinboard{margin-top:32px;height:260px}.workbench aside{padding:14px}.workbench #list{max-height:145px;overflow:auto}#metrics{grid-template-columns:1fr 1fr}nav{gap:10px}.surface{height:270px}.poster{padding:12px}.mint{bottom:4%;font-size:11px}.controls button{font-size:12px}}
#desktop-body{width:100%;height:calc(100% - 40px);display:block;background:transparent;border:0;resize:none;font-family:inherit;color:inherit}.surface:not([data-mode=open]) #desktop-body{display:none}#desktop-body:focus-visible{outline-offset:-3px}