/* perceptr (beta) - shared stylesheet - (c) 2007 */
body{
  margin:0; padding:0;
  background:linear-gradient(#cfeaf7 0%, #eaf6fb 240px, #f3f8fa 100%);
  background-attachment:fixed;
  font-family:"Trebuchet MS","Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,sans-serif;
  color:#34404a; font-size:14px;
}
a{ color:#1f7fc4; text-decoration:none; }
a:hover{ text-decoration:underline; }
em{ font-style:italic; }

/* leaked server errors */
.errband{ background:#fbf3d2; border-bottom:1px solid #e2cd6a; color:#7a5e00;
  font-family:"Courier New",monospace; font-size:11px; line-height:1.55; padding:6px 12px; }
.errband .e{ color:#b22; }

/* glossy header */
.topbar{ background:linear-gradient(#5fb0e6 0%, #3d92d4 48%, #2877ba 52%, #2f86c8 100%);
  border-bottom:1px solid #1d5e94; box-shadow:0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.55); color:#fff; }
.topwrap{ max-width:880px; margin:0 auto; padding:14px 20px 16px; position:relative; }
.logo{ font-size:40px; font-weight:bold; letter-spacing:-1px; line-height:1; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35), 0 0 1px rgba(255,255,255,.6);
  -webkit-box-reflect:below -6px linear-gradient(transparent 55%, rgba(255,255,255,.28)); display:inline-block; }
.logo a{ color:#fff; }
.logo .dot{ color:#bfe66b; }
.beta{ display:inline-block; vertical-align:super; margin-left:6px;
  background:linear-gradient(#ffd24a,#ff9e1b); color:#7a3b00; font-size:11px; font-weight:bold;
  padding:2px 7px; border-radius:9px; box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.3); }
.tagline{ font-size:15px; color:#dff1ff; margin-top:8px; text-shadow:0 1px 1px rgba(0,0,0,.25); }
.topnav{ position:absolute; top:18px; right:20px; font-size:13px; }
.topnav a{ color:#eaf6ff; margin-left:14px; text-shadow:0 1px 1px rgba(0,0,0,.3); }
.topnav a.active{ color:#fff; font-weight:bold; border-bottom:2px solid #bfe66b; padding-bottom:2px; }
.burst{ position:absolute; top:14px; right:150px; }

.brokenimg{ display:inline-block; border:1px solid #b7b7b7; background:#fbfbfb; color:#888;
  font:11px/1.2 "Courier New",monospace; padding:7px 9px; border-radius:2px; vertical-align:middle; }
.brokenimg::before{ content:"\2715"; color:#c33; font-weight:bold; margin-right:6px; }

/* layout */
.wrap{ max-width:880px; margin:22px auto 40px; padding:0 20px; display:flex; gap:22px; align-items:flex-start; }
.main{ flex:1 1 auto; min-width:0; }
.side{ flex:0 0 230px; }
.full{ max-width:880px; margin:22px auto 40px; padding:0 20px; }

.card{ background:#fff; border:1px solid #cdd9e1; border-radius:10px;
  box-shadow:0 2px 5px rgba(40,70,100,.12); padding:20px 22px; margin-bottom:18px; }
h1{ font-size:25px; color:#22404f; margin:0 0 12px; font-weight:bold; }
h2{ font-size:19px; color:#22404f; margin:18px 0 8px; font-weight:bold; }
h3{ font-size:15px; color:#2b6f9e; margin:0 0 10px; }
p{ margin:0 0 12px; line-height:1.62; }
ul{ line-height:1.6; }
.lead{ font-size:15px; color:#3a4750; }
.cold{ color:#8a949c; font-size:13px; }
.tmpl{ color:#a05a00; font-family:"Courier New",monospace; }
.leak{ font-family:"Courier New",monospace; font-size:11px; white-space:pre-wrap; color:#5a6b75;
  background:#f4f8fb; border:1px dashed #c6d3dc; border-radius:4px; padding:7px 9px; margin:12px 0; }
.sealed{ background:#1c1c1c; color:#1c1c1c; user-select:none; padding:0 3px; border-radius:2px; }
.sealtag{ color:#b22; font-weight:bold; }

/* hero */
.hero{ text-align:center; padding:26px 22px; }
.hero h1{ font-size:30px; }
.hero p{ font-size:16px; color:#3a4750; max-width:560px; margin:0 auto 18px; }
.cta{ display:inline-block; cursor:pointer; border:1px solid #4e9a1e; border-radius:9px;
  color:#fff; font-weight:bold; font-size:18px; font-family:inherit; padding:12px 28px;
  background:linear-gradient(#a3e063 0%, #79c93c 48%, #5fb022 52%, #6bbd2c 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(0,0,0,.25); text-shadow:0 -1px 0 rgba(0,0,0,.25); }
.cta:hover{ text-decoration:none; }
.feat{ display:flex; gap:14px; margin-top:4px; }
.feat .f{ flex:1; text-align:center; padding:6px 8px; }
.feat .fn{ font-size:22px; font-weight:bold; color:#2b6f9e; }
.feat .fl{ font-size:12px; color:#8a949c; }

/* specimen / test */
.specimen{ background:linear-gradient(#fbfdfe,#eef4f8); border:1px solid #d4e0e8; border-radius:8px;
  box-shadow:inset 0 1px 3px rgba(40,70,100,.10); padding:16px 18px; margin:6px 0 16px; }
.specimen .tag{ font-size:11px; color:#9aa6ae; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
.slab{ font-size:18px; line-height:2.0; color:#2a343c; }
.slab .ln{ margin:0 0 1px; }
.g{ display:inline; }
.slab .ln.solved .first{ font-weight:bold; color:#e8590c; }
.ansrow{ margin-top:6px; }
#ans{ font-family:Arial,Helvetica,sans-serif; font-size:16px; padding:7px 10px; width:230px;
  border:1px solid #b7c4cd; border-radius:6px; box-shadow:inset 0 1px 2px rgba(0,0,0,.12); outline:none; vertical-align:middle; }
#go{ cursor:pointer; vertical-align:middle; margin-left:8px; border:1px solid #4e9a1e; border-radius:7px;
  color:#fff; font-weight:bold; font-size:15px; font-family:inherit; padding:8px 18px;
  background:linear-gradient(#a3e063 0%, #79c93c 48%, #5fb022 52%, #6bbd2c 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px rgba(0,0,0,.25); text-shadow:0 -1px 0 rgba(0,0,0,.25); }
#go:active{ box-shadow:inset 0 2px 4px rgba(0,0,0,.3); }
.verdict{ margin-top:12px; font-size:14px; color:#c0392b; min-height:18px; }
.result{ margin-top:14px; display:none; border:1px solid #cdd9e1; border-radius:8px; padding:14px 16px;
  background:linear-gradient(#fffef6,#fdf6dd); }
.result.show{ display:block; }
.result .big{ font-size:18px; font-weight:bold; color:#9a6a00; }
.result .word{ font-family:Arial,sans-serif; letter-spacing:3px; font-weight:bold; font-size:20px; color:#e8590c; }
.share{ margin-top:8px; font-size:12px; color:#8a949c; }
.share a{ background:#eef3f7; border:1px solid #d4e0e8; border-radius:4px; padding:1px 6px; margin-right:5px; color:#5a6b75; }

/* sidebar */
.sbox{ background:#fff; border:1px solid #cdd9e1; border-radius:10px; box-shadow:0 2px 5px rgba(40,70,100,.12); padding:14px 16px; margin-bottom:16px; }
.sbox h4{ margin:0 0 8px; font-size:13px; color:#2b6f9e; text-transform:uppercase; letter-spacing:1px; }
.stat{ font-size:30px; font-weight:bold; color:#22404f; line-height:1; }
.statsub{ font-size:12px; color:#8a949c; margin-top:4px; }
.cloud a{ display:inline-block; margin:2px 4px 2px 0; color:#5a8fb5; }
.cloud .s1{ font-size:11px; } .cloud .s2{ font-size:14px; } .cloud .s3{ font-size:18px; } .cloud .s4{ font-size:22px; }
.testi{ font-style:italic; color:#5a6b75; font-size:13px; line-height:1.5; }
.testi .who{ font-style:normal; color:#9aa6ae; font-size:12px; display:block; margin-top:5px; }
.rss{ background:#ff6600; color:#fff; font-size:11px; font-weight:bold; padding:1px 5px; border-radius:3px; }
.arrleak{ font-family:"Courier New",monospace; font-size:11px; white-space:pre; color:#6a7780; line-height:1.4; }
.arrleak .seal{ color:#b22; }

/* research figures */
table.fig{ border-collapse:collapse; width:100%; margin:10px 0 14px; font-size:13px; }
table.fig th, table.fig td{ border:1px solid #cdd9e1; padding:6px 9px; text-align:left; }
table.fig th{ background:#eef4f8; color:#2b6f9e; }
.figcap{ font-size:11px; color:#9aa6ae; font-family:"Courier New",monospace; margin:4px 0 14px; }
.chart{ margin:8px 0 6px; }
.chart .row{ display:flex; align-items:center; margin:4px 0; font-size:12px; }
.chart .rl{ flex:0 0 120px; color:#5a6b75; }
.chart .bar{ height:16px; border-radius:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  background:linear-gradient(#7fb9e6,#3d92d4); }
.chart .bar.alt{ background:linear-gradient(#f3a14b,#e8590c); }

/* blog */
.post{ border-bottom:1px solid #e3eaef; padding:0 0 16px; margin:0 0 16px; }
.post:last-child{ border-bottom:0; }
.post h2{ margin:0 0 3px; font-size:18px; }
.post h2 a{ color:#22404f; }
.post .meta{ font-size:12px; color:#9aa6ae; margin-bottom:8px; }
.post .more{ font-size:13px; }

/* faq */
dl.faq dt{ font-weight:bold; color:#22404f; margin:14px 0 4px; }
dl.faq dd{ margin:0 0 4px; color:#3a4750; line-height:1.55; }

/* contact form */
.field{ margin:0 0 12px; }
.field label{ display:block; font-size:13px; color:#5a6b75; margin-bottom:3px; }
.field input[type=text], .field textarea{ width:100%; max-width:360px; box-sizing:border-box;
  font-family:Arial,sans-serif; font-size:14px; padding:6px 8px; border:1px solid #b7c4cd; border-radius:5px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.1); }
.field textarea{ height:80px; }

footer{ max-width:880px; margin:0 auto; padding:18px 20px 50px; color:#7e8a93; font-size:12px; text-align:center; line-height:1.9; }
footer .badge{ display:inline-block; border:1px solid #b7c4cd; background:#eef3f7; color:#5a6b75; border-radius:3px; padding:1px 6px; margin:0 3px; font-size:11px; }
footer a{ color:#5a8fb5; }
.phpnotice{ font-family:"Courier New",monospace; font-size:11px; color:#9a7a2a; }

@media (max-width:680px){ .wrap{ flex-direction:column; } .side{ flex:1 1 auto; width:100%; } .feat{ flex-wrap:wrap; } .topnav{ position:static; margin-top:10px; } .burst{ display:none; } }

/* success checkmark + email popup */
.okcheck{ display:none; vertical-align:middle; margin-right:6px; }
.okcheck.show{ display:inline-block; }
.mailnote{ font-size:13px; color:#5a6b75; margin-top:10px; }
.mailnote a{ font-family:"Courier New",monospace; color:#1f7fc4; }
.modal{ display:none; position:fixed; inset:0; z-index:1000; background:rgba(18,34,48,.55);
  align-items:center; justify-content:center; padding:20px; }
.modal.show{ display:flex; }
.modal-card{ background:#fff; border:1px solid #cdd9e1; border-radius:12px;
  box-shadow:0 14px 44px rgba(0,0,0,.45); max-width:380px; width:100%; padding:22px 24px 24px;
  position:relative; animation:pop .22s ease-out; }
@keyframes pop{ from{ transform:scale(.92); opacity:0 } to{ transform:scale(1); opacity:1 } }
.modal-close{ position:absolute; top:7px; right:11px; border:0; background:none; font-size:22px;
  color:#9aa6ae; cursor:pointer; line-height:1; }
.modal-check{ text-align:center; margin:2px 0 6px; }
.modal-card h3{ text-align:center; color:#22404f; font-size:18px; margin:0 0 8px; }
.modal-card p{ text-align:center; margin:0 0 8px; }
.mailbtn{ display:inline-block; margin-top:4px; border:1px solid #2b6f9e; border-radius:7px;
  padding:8px 16px; font-weight:bold; color:#fff; font-family:"Courier New",monospace;
  background:linear-gradient(#5fb0e6,#2877ba); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 3px rgba(0,0,0,.2); }
.mailbtn:hover{ text-decoration:none; }

/* faint backchannel mark — a hidden tell on every cover page (only meaningful once you've seen the reveal) */
footer{ position:relative; }
footer::after{
  content:""; display:block; width:46px; height:28px; margin:16px auto 0; opacity:.16;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='40' viewBox='0 0 64 40'><line x1='16' y1='15' x2='48' y2='15' stroke='%237e8a93' stroke-width='2'/><path d='M16 15 Q32 38 48 15' fill='none' stroke='%237e8a93' stroke-width='2.4'/><circle cx='16' cy='15' r='4' fill='%237e8a93'/><circle cx='48' cy='15' r='4' fill='%237e8a93'/></svg>") no-repeat center;
  background-size:contain;
}

/* bare listening prompt (replaces the answer bar) */
.listenline{ margin-top:16px; font-family:"Courier New",monospace; font-size:17px; color:#2a343c; min-height:24px; }
.listenline .lprompt{ color:#9aa6ae; }
#listen{ letter-spacing:2px; }
.listenline .caret{ display:inline-block; width:9px; height:17px; background:#2a343c; margin-left:1px;
  vertical-align:-3px; animation:cblink 1.1s steps(1) infinite; }
@keyframes cblink{ 50%{ opacity:0; } }