:root{
  --chrome:#B8C4C4;
  --beige:#F0EDE4;
  --teal:#3D7A7A;
  --btn:#008000;
  --ink:#000000;
  --light:#FFFFFF;
  --shade:#7E8C8C;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--teal);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.55;
}
.mono,.statusbar,.calc-out,.calc-title{font-family:"Courier New",Courier,monospace}
h1,h2,h3,legend,.brand,.cmd,.panel-title,.btn,.hero h1{font-family:Verdana,Geneva,sans-serif}
h1{font-size:24px;line-height:1.25;margin:0 0 10px}
h2{font-size:17px;margin:22px 0 8px}
p{margin:0 0 10px}
a{color:#1a4f4f}
.link{font-weight:bold}

.desktop{padding:18px 12px 44px}
.win{
  max-width:1060px;margin:0 auto;
  background:var(--chrome);
  border:3px solid var(--ink);
  box-shadow:7px 7px 0 rgba(0,0,0,.35);
}

/* title bar */
.titlebar{
  display:flex;align-items:center;gap:8px;
  background:var(--teal);
  border-bottom:3px solid var(--ink);
  padding:6px 7px;
}
.tb-icon{
  width:16px;height:16px;flex:0 0 16px;
  background:var(--beige);
  border-top:2px solid var(--light);border-left:2px solid var(--light);
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
}
.brand{
  color:var(--light);font-size:13px;font-weight:bold;
  letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-btns{margin-left:auto;display:flex;gap:4px;flex:0 0 auto}
.tb-btn{
  width:20px;height:18px;display:flex;align-items:center;justify-content:center;
  font-family:Verdana,Geneva,sans-serif;font-size:10px;line-height:1;
  background:var(--chrome);color:var(--ink);
  border-top:2px solid var(--light);border-left:2px solid var(--light);
  border-right:2px solid var(--shade);border-bottom:2px solid var(--shade);
}

/* toolbar */
.toolbar{
  display:flex;flex-wrap:wrap;gap:2px;
  background:var(--chrome);
  padding:4px 6px;
  border-bottom:3px solid var(--ink);
}
.cmd{
  font-size:12px;text-decoration:none;color:var(--ink);
  padding:4px 10px;border:2px solid transparent;
}
.cmd:hover,.cmd:focus{
  border-top-color:var(--light);border-left-color:var(--light);
  border-right-color:var(--shade);border-bottom-color:var(--shade);
  background:var(--beige);
}
.cmd.is-active{
  background:var(--beige);
  border-top-color:var(--shade);border-left-color:var(--shade);
  border-right-color:var(--light);border-bottom-color:var(--light);
  font-weight:bold;
}

/* workspace + panels */
.workspace{padding:14px;display:flex;flex-direction:column;gap:14px;background:var(--chrome)}
.panel{
  background:var(--beige);
  border-top:3px solid var(--shade);border-left:3px solid var(--shade);
  border-right:3px solid var(--light);border-bottom:3px solid var(--light);
  outline:1px solid var(--ink);
}
.panel-title{
  background:var(--teal);color:var(--light);
  font-size:12px;font-weight:bold;letter-spacing:.4px;
  padding:5px 9px;border-bottom:2px solid var(--ink);
}
.panel-body{padding:16px}

/* hero */
.hero{display:flex;gap:18px;align-items:flex-start}
.hero-mark{
  flex:0 0 108px;height:150px;background:var(--chrome);
  border-top:3px solid var(--shade);border-left:3px solid var(--shade);
  border-right:3px solid var(--light);border-bottom:3px solid var(--light);
  padding:10px;display:flex;flex-direction:column;justify-content:space-between;
}
.slat{display:block;height:16px;background:var(--teal);border:2px solid var(--ink)}
.slat:nth-child(even){background:var(--btn)}
.hero-text{flex:1 1 auto;min-width:0}
.lead{font-size:16px;font-weight:bold}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-size:13px;font-weight:bold;padding:9px 16px;
  background:var(--chrome);color:var(--ink);
  border-top:3px solid var(--light);border-left:3px solid var(--light);
  border-right:3px solid var(--shade);border-bottom:3px solid var(--shade);
  outline:1px solid var(--ink);
}
.btn:active{
  border-top-color:var(--shade);border-left-color:var(--shade);
  border-right-color:var(--light);border-bottom-color:var(--light);
}
.btn-primary{background:var(--btn);color:var(--light)}
.btn-primary:active{color:var(--light)}
.inset-note{
  background:var(--light);
  border-top:2px solid var(--shade);border-left:2px solid var(--shade);
  border-right:2px solid var(--light);border-bottom:2px solid var(--light);
  outline:1px solid var(--ink);
  padding:8px 10px;font-size:12px;
}

/* grids / fieldsets */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fs{
  background:var(--light);
  border:2px solid var(--shade);
  margin:0 0 12px;padding:10px 12px 12px;
}
.fs:last-child{margin-bottom:0}
.fs legend{font-size:12px;font-weight:bold;background:var(--teal);color:var(--light);padding:3px 8px;border:2px solid var(--ink)}
.fs p{font-size:13px}
.ico{color:var(--teal);display:inline-block;margin:4px 0 6px}
.small{font-size:12px}
.after-grid{margin:14px 0 0}

/* steps */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.steps li{
  counter-increment:s;
  background:var(--light);
  border-top:2px solid var(--shade);border-left:2px solid var(--shade);
  border-right:2px solid var(--light);border-bottom:2px solid var(--light);
  outline:1px solid var(--ink);
  padding:34px 11px 12px;position:relative;font-size:13px;
}
.steps li::before{
  content:"[" counter(s) "]";
  position:absolute;top:8px;left:11px;
  font-family:"Courier New",Courier,monospace;font-weight:bold;color:var(--btn);
}
.steps strong{display:block;font-family:Verdana,Geneva,sans-serif;font-size:13px;margin-bottom:4px}
.steps span{display:block}
.steps li+li{margin:0}
.panel-body .steps{margin-bottom:14px}

/* split layout */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.split-col{min-width:0}

/* tables */
.tbl{width:100%;border-collapse:collapse;background:var(--light);border:2px solid var(--ink);font-size:13px;margin:0 0 10px}
.tbl caption{text-align:left;padding:0 0 6px}
.tbl th,.tbl td{border:1px solid var(--shade);padding:6px 8px;text-align:left}
.tbl thead th{background:var(--chrome);font-family:Verdana,Geneva,sans-serif;font-size:12px}
.tbl tbody tr:nth-child(even){background:var(--beige)}
.tbl-mini td:last-child{font-family:"Courier New",Courier,monospace;white-space:nowrap}

/* forms */
label{display:block;font-size:12px;font-weight:bold;margin:10px 0 4px}
label.chk{font-weight:normal;display:flex;gap:8px;align-items:flex-start;font-size:12px}
label.chk input{margin-top:3px}
input[type=text],input[type=tel],input[type=number],select,textarea{
  width:100%;font-family:Arial,Helvetica,sans-serif;font-size:14px;
  padding:7px 8px;background:var(--light);color:var(--ink);
  border-top:2px solid var(--shade);border-left:2px solid var(--shade);
  border-right:2px solid var(--light);border-bottom:2px solid var(--light);
  outline:1px solid var(--ink);
}
textarea{resize:vertical}
input.err,textarea.err,select.err{background:var(--beige);outline:2px solid var(--btn)}
form .btn{margin-top:14px}
.calc{
  background:var(--chrome);
  border-top:3px solid var(--light);border-left:3px solid var(--light);
  border-right:3px solid var(--shade);border-bottom:3px solid var(--shade);
  outline:1px solid var(--ink);
  padding:12px;
}
.calc-title{font-size:12px;font-weight:bold;background:var(--teal);color:var(--light);padding:4px 8px;border:2px solid var(--ink);margin:-4px 0 6px}
.calc-out{
  display:block;margin-top:12px;padding:9px 10px;font-size:13px;
  background:var(--light);
  border-top:2px solid var(--shade);border-left:2px solid var(--shade);
  border-right:2px solid var(--light);border-bottom:2px solid var(--light);
  outline:1px solid var(--ink);white-space:pre-line;
}

/* faq */
.faq{
  background:var(--light);border:2px solid var(--shade);outline:1px solid var(--ink);
  margin-bottom:10px;padding:0 12px;
}
.faq summary{
  cursor:pointer;font-family:Verdana,Geneva,sans-serif;font-size:13px;font-weight:bold;
  padding:10px 0;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"[+] ";font-family:"Courier New",Courier,monospace;color:var(--btn)}
.faq[open] summary::before{content:"[-] "}
.faq p{font-size:13px;border-top:2px solid var(--chrome);padding-top:9px}
.prose{max-width:860px}
.prose ul{margin:0 0 12px;padding-left:22px}
.prose li{margin-bottom:5px}

/* social strip */
.social-strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  background:var(--chrome);padding:7px 10px;border-top:3px solid var(--ink);
}
.soc{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;text-decoration:none;color:var(--ink);
  padding:4px 9px;background:var(--beige);
  border-top:2px solid var(--light);border-left:2px solid var(--light);
  border-right:2px solid var(--shade);border-bottom:2px solid var(--shade);
}
.soc:hover{color:var(--teal)}

/* status bar */
.statusbar{
  display:flex;flex-wrap:wrap;gap:4px;
  background:var(--chrome);padding:5px 6px;border-top:2px solid var(--light);
  font-size:12px;
}
.sb-cell{
  padding:3px 9px;background:var(--chrome);
  border-top:2px solid var(--shade);border-left:2px solid var(--shade);
  border-right:2px solid var(--light);border-bottom:2px solid var(--light);
}
.sb-cell a{color:var(--ink)}
.sb-grow{flex:1 1 120px;text-align:right}

@media (max-width:900px){
  .grid-4,.steps{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:14px}
  h1{font-size:20px}
  .desktop{padding:10px 8px 28px}
  .win{box-shadow:4px 4px 0 rgba(0,0,0,.35)}
  .grid-4,.steps{grid-template-columns:1fr}
  .hero{flex-direction:column}
  .hero-mark{flex:0 0 auto;width:100%;height:84px;flex-direction:row;gap:8px}
  .hero-mark .slat{flex:1 1 auto;height:auto}
  .brand{font-size:11px}
  .workspace{padding:9px}
  .panel-body{padding:12px}
  .sb-grow{text-align:left}
}