*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#eef1f7;color:#2b2f36;
 font:16px/1.62 "Trebuchet MS",Arial,Helvetica,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:#c4530f}
a:focus-visible,button:focus-visible{outline:2px solid #e2661f;outline-offset:2px}
code,samp,.mono{font-family:Consolas,"Courier New",monospace;font-size:13px}

.shell{max-width:1060px;margin:22px auto 34px;background:#fff;border:1px solid #d3d9e4;
 border-radius:10px;box-shadow:0 2px 10px rgba(40,50,70,.13);overflow:hidden}

/* module 1 : glossy logo + tab rail */
.apphead{background:linear-gradient(#ffffff,#f2f5fa);border-bottom:1px solid #d3d9e4;
 padding:16px 24px 0}
.apphead .brandrow{display:flex;align-items:flex-end;justify-content:space-between;
 gap:18px;flex-wrap:wrap}
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none;color:#2b2f36}
.wordmark img{width:150px}
.strap{font-size:14px;color:#5c6675;margin:2px 0 0}
.tabs{display:flex;flex-wrap:wrap;gap:4px;margin:14px 0 0;padding:0;list-style:none;
 max-width:none}
.tabs a{display:block;padding:9px 10px;min-height:40px;font-size:12px;font-weight:bold;
 color:#2b2f36;text-decoration:none;border:1px solid #d3d9e4;border-bottom:none;
 border-radius:7px 7px 0 0;background:linear-gradient(#fdfdfe,#e8ecf3)}
.tabs a:hover{background:linear-gradient(#fff6ef,#fbdcc4)}
.tabs a[aria-current]{background:linear-gradient(#f7a760,#e2661f);color:#2b2f36;
 border-color:#c4530f}
.statusstrip{background:#3d0a55;color:#f0e4f6;font-size:13px;padding:8px 24px;
 max-width:none;margin:0}
.statusstrip .mono{color:#f6c79a}

.main{padding:26px 24px 30px}
.crumb{font-size:13px;color:#5c6675;margin:0 0 14px;max-width:none}
.crumb a{color:#5c6675}

h1{font-size:34px;line-height:1.2;margin:0 0 10px}
h2{font-size:24px;margin:32px 0 10px}
h3{font-size:19px;margin:24px 0 8px}
h4{font-size:17px;margin:20px 0 6px}
p{margin:0 0 14px;max-width:66ch}
ul,ol{max-width:66ch}
.tabs,.triggers,.footcols ul,.rail ul,.dl,.strip{max-width:none}
li{margin:0 0 7px}
.meta{font-family:Consolas,"Courier New",monospace;font-size:13px;color:#5c6675;
 margin:0 0 18px;border-bottom:1px solid #d3d9e4;padding-bottom:10px;max-width:none}
.leadline{font-size:18px;font-weight:bold;color:#2b2f36;margin:22px 0 10px}

/* module 2 : 55/45 opening */
.opening{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.opening .lead{flex:1 1 52%;min-width:280px}
.opening .shot{flex:1 1 40%;min-width:260px}
.lead p:first-of-type{font-size:18px}

/* screenshot frame */
figure.frame{margin:0 0 18px;border:1px solid #2b2f36;border-radius:6px;overflow:hidden;
 background:#2b2f36}
figure.frame img{width:100%}
figure.frame figcaption{font-size:13px;color:#e7eaf0;padding:8px 12px;
 border-top:1px solid #5c6675}

/* module 3 : numbered step panels */
.steps{list-style:none;margin:0;padding:0;max-width:none}
.steps li{display:flex;gap:14px;background:#f7f9fc;border:1px solid #d3d9e4;
 border-radius:8px;padding:14px 16px;margin:0 0 10px}
.steps .n{flex:0 0 34px;height:34px;border-radius:17px;background:#e2661f;color:#fff;
 font-weight:bold;font-size:17px;display:flex;align-items:center;justify-content:center}
.steps .body{flex:1}
.steps p{margin:0 0 8px}
.steps p:last-child{margin:0}
.note{font-size:14px;color:#5c6675;border-left:3px solid #e2661f;padding-left:10px;
 margin:8px 0 0}

/* module 4 : alternating tour blocks */
.tour{border:1px solid #d3d9e4;border-radius:8px;padding:18px;margin:0 0 16px;
 display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.tour.rev{flex-direction:row-reverse}
.tour .txt{flex:1 1 46%;min-width:270px}
.tour .pic{flex:1 1 46%;min-width:250px}
.tour h3{margin-top:0}
.tour ul{margin:0;padding-left:20px}
.triggers{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:12px 0 0}
.triggers li{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:bold;
 border:1px solid #d3d9e4;border-radius:6px;padding:6px 10px;background:#f7f9fc}
.triggers img{width:20px}

/* module 5 : screenshot strip */
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
.strip figure{margin:0}

/* module 6 : documentation index */
.dl{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 26px}
.dl div{border-bottom:1px solid #d3d9e4;padding:9px 0}
.dl dt{font-weight:bold}
.dl dd{margin:2px 0 0;font-size:14px;color:#5c6675}

/* module 7 : news rows */
.newsrow{display:flex;gap:14px;border-bottom:1px solid #d3d9e4;padding:11px 0;
 align-items:baseline;flex-wrap:wrap}
.newsrow time{flex:0 0 120px;font-family:Consolas,"Courier New",monospace;font-size:13px;
 color:#5c6675}
.newsrow .ttl{flex:1 1 320px;font-weight:bold}
.newsrow .cat{font-size:12px;color:#5c6675;border:1px solid #d3d9e4;border-radius:4px;
 padding:2px 7px}

/* module 8 : footer */
.foot{background:#3d0a55;color:#efe6f4;padding:24px;border-top:3px solid #e2661f}
.foot a{color:#f6c79a}
.foot .about{max-width:62ch;font-size:15px;margin:0 0 18px}
.footcols{display:flex;gap:34px;flex-wrap:wrap}
.footcols h2{font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px;
 color:#d5bde0}
.footcols ul{list-style:none;margin:0;padding:0;font-size:14px}
.footcols li{margin:0 0 5px}
.rights{margin:20px 0 0;font-size:13px;color:#c9b2d4;border-top:1px solid #5c3a6b;
 padding-top:12px}

/* chapter rail + prevnext */
.withrail{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.withrail .doc{flex:1 1 60%;min-width:290px}
.rail{flex:0 0 250px;border:1px solid #d3d9e4;border-radius:8px;background:#f7f9fc;
 padding:14px 16px}
.rail h2{font-size:14px;text-transform:uppercase;letter-spacing:.05em;margin:0 0 9px;
 color:#5c6675}
.rail ul{list-style:none;margin:0;padding:0;font-size:14px}
.rail li{margin:0 0 7px;padding-left:11px;border-left:2px solid #d3d9e4}
.rail li[aria-current]{border-left-color:#e2661f;font-weight:bold}
.prevnext{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
 border-top:1px solid #d3d9e4;margin-top:28px;padding-top:14px;font-size:14px}
.scroller{overflow-x:auto}
table{border-collapse:collapse;font-size:14px}
td,th{border:1px solid #d3d9e4;padding:6px 10px;text-align:left}

@media (max-width:760px){
 .shell{max-width:none;margin:0;border:none;border-radius:0;box-shadow:none}
 .apphead{padding:14px 16px 0}
 .statusstrip,.main,.foot{padding-left:16px;padding-right:16px}
 .wordmark img{width:124px}
 .tabs a{padding:11px 12px}
 h1{font-size:27px}
 .opening{gap:18px}
 .strip,.dl{grid-template-columns:1fr}
 .tour,.tour.rev{flex-direction:column;gap:16px}
 .rail{flex:1 1 100%;order:-1}
 .newsrow time{flex:0 0 100%}
}