/* Markdown Beacon (beacon.js). Win98 chrome comes from app.css; this is the inside of the window. */
.beaconw{height:600px;max-height:calc(100% - 50px)}
.bk{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--face)}
.bk-banner{flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 12px 8px;margin:2px 0 0;
  background:linear-gradient(180deg,#1C3F7A,#0B1F45);border-bottom:2px solid #D9A62E;color:#fff}
.bk-ttl{font-family:Georgia,'Times New Roman',serif;font-size:22px;font-weight:700;color:#FFD35A;text-shadow:2px 2px 0 #000;letter-spacing:.01em}
.bk-ttl i{font-weight:400;color:#fff;font-size:18px}
.bk-ed{font-size:13px;color:#BFD3F2;font-style:italic;white-space:nowrap}
.bk-main{flex:1;min-height:0;overflow-y:auto;padding:10px 12px}
.bk-h{font-size:17px;margin:0 0 8px;font-weight:700}
.bk-lbl{display:block;font-size:14px;font-weight:700;margin:8px 0 3px;color:#222}
.bk-foot{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:12px}
.bk-grow{flex:1}

/* Margo and her speech balloon */
.bk-teach{display:flex;gap:12px;align-items:flex-start}
.bk-pic{flex:0 0 auto;width:96px;height:112px;padding:0;background:#15305E;line-height:0}
.bk-margo{width:100%;height:100%;display:block}
.bk-margo.happy{animation:bkhop .5s steps(4) 2}
@keyframes bkhop{50%{transform:translateY(-4px)}}
.bk-say{position:relative;flex:1;background:#FFFFE1;border:1px solid #000;border-radius:10px;padding:9px 11px;font-size:15.5px;line-height:1.45;box-shadow:2px 2px 0 rgba(0,0,0,.3);margin-top:6px;min-height:44px}
.bk-say::before{content:"";position:absolute;left:-12px;top:16px;border:6px solid transparent;border-right:7px solid #000}
.bk-say::after{content:"";position:absolute;left:-10px;top:17px;border:5px solid transparent;border-right:6px solid #FFFFE1}
.bk-say.good{background:#E7F7DF}
.bk-say.good::after{border-right-color:#E7F7DF}
.bk-say.bad{background:#FFF0E0}
.bk-say.bad::after{border-right-color:#FFF0E0}
.bk-say code{font-family:var(--mono);font-size:14.5px;background:#fff;border:1px solid #bbb;padding:0 3px}
.bk-ans{font-family:var(--mono);font-size:14.5px;background:#fff;border:1px solid #bbb;padding:5px 7px;margin:6px 0 0;white-space:pre-wrap}

/* home */
.bk-home{display:flex;flex-direction:column;gap:16px;padding:6px 4px}
.bk-home .bk-pic{width:132px;height:154px}
.bk-home .bk-say{font-size:16.5px;margin-top:14px}
.bk-menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:520px;margin-left:144px}
.bk-menu .btn{height:38px;font-size:15.5px}
.bk-menu .btn.def{grid-column:1 / -1}
.bk-strip{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin-left:144px}
.bk-tile{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px 4px;background:#fff;cursor:pointer;font:inherit;min-width:0;
  border-top:2px solid var(--shadow);border-left:2px solid var(--shadow);border-right:2px solid var(--hilite);border-bottom:2px solid var(--hilite)}
.bk-tile b{font-family:Georgia,serif;font-size:18px;color:#1C3F7A}
.bk-tile small{font-size:11.5px;color:#444;line-height:1.15;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.bk-tile span .bk-star{font-size:11.5px}
.bk-tile.bk-done{background:#FFF7D6}
.bk-tile:hover,.bk-tile:focus-visible{background:var(--navy);outline:none}
.bk-tile:hover b,.bk-tile:hover small,.bk-tile:focus-visible b,.bk-tile:focus-visible small{color:#fff}
.bk-fb:empty{display:none}
.bk-fb{margin-top:6px;padding-top:6px;border-top:1px dotted #999;font-weight:700}
.bk-say.good .bk-fb{color:#1F5A28}
.bk-say.bad .bk-fb{color:#8A2B0E}

/* lessons list */
.bk-list{display:flex;flex-direction:column;max-height:none}
.bk-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid #E4E4E4;padding:7px 10px;cursor:pointer;font:inherit}
.bk-row:hover,.bk-row:focus-visible{background:var(--navy);color:#fff;outline:none}
.bk-row:hover small,.bk-row:focus-visible small{color:#DDE}
.bk-num{flex:0 0 26px;height:26px;display:grid;place-items:center;background:#1C3F7A;color:#FFD35A;font-weight:700;font-family:Georgia,serif;font-size:16px}
.bk-lt{flex:1;display:flex;flex-direction:column;line-height:1.3}
.bk-lt small{color:#555;font-size:13.5px}
.bk-rs{flex:0 0 auto}
.bk-star{color:#B9B9B9;font-size:17px;text-shadow:1px 1px 0 #fff}
.bk-star.on{color:#E8A317;text-shadow:1px 1px 0 #7A5D10}

/* drills */
.bk-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.bk-top b{font-size:15.5px}
.bk-dots{display:flex;gap:4px}
.bk-dots i{width:12px;height:12px;border:1px solid #000;background:#fff}
.bk-dots i.bk-done{background:#3A7D44}
.bk-dots i.bk-now{background:#FFD35A}
.bk-drill .bk-teach{margin-bottom:4px}
.bk-drill .bk-pic{width:64px;height:75px}
.bk-target{padding:8px 12px;min-height:44px;transition:background .15s}
.bk-target.match{background:#E7F7DF;box-shadow:inset 1px 1px 0 var(--dark),0 0 0 2px #3A7D44}
.bk-ex{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bk-in{font-family:var(--mono);font-size:15px;line-height:1.45;min-height:120px;height:100%;resize:vertical;white-space:pre}
.bk-drill.wide .bk-in{min-height:260px}
.bk-out{padding:8px 12px;min-height:120px;height:calc(100% - 25px);overflow:auto}
.bk-src{font-family:var(--mono);font-size:15px;background:#fff;padding:8px 10px;white-space:pre-wrap;min-height:60px;margin:0}
.bk-fin .bk-score{display:inline-flex;flex-direction:column;align-items:center;gap:4px;padding:10px 26px;margin:14px 0 0 108px;background:var(--face)}
.bk-big .bk-star{font-size:34px}

/* rendered Markdown, as a 1998 browser would show it */
.md{font-family:'Times New Roman',Times,serif;font-size:17px;line-height:1.35;color:#000;word-wrap:break-word;overflow-wrap:anywhere}
.md > :first-child{margin-top:0}
.md > :last-child{margin-bottom:0}
.md h1{font-size:28px;margin:.2em 0 .35em;font-weight:700}
.md h2{font-size:22px;margin:.3em 0 .35em;font-weight:700}
.md h3{font-size:18.5px;margin:.3em 0 .3em;font-weight:700}
.md h4,.md h5,.md h6{font-size:17px;margin:.3em 0;font-weight:700}
.md p{margin:0 0 .6em}
.md ul,.md ol{margin:0 0 .6em;padding-left:1.6em}
.md li.task{list-style:none;margin-left:-1.25em}
.md li.task input{margin:0 5px 0 0;vertical-align:-1px;width:13px;height:13px}
.md a{color:#0000EE;text-decoration:underline}
.md code{font-family:var(--mono);font-size:15px;background:#F0F0F0;padding:0 3px}
.md pre{background:#F0F0F0;border:1px solid #999;padding:6px 8px;margin:0 0 .6em;overflow-x:auto}
.md pre code{background:none;padding:0;white-space:pre}
.md blockquote{margin:0 0 .6em;padding:2px 0 2px 12px;border-left:4px solid #B5B5B5;color:#333}
.md table{border-collapse:collapse;margin:0 0 .6em}
.md th,.md td{border:1px solid #808080;padding:3px 8px;text-align:left}
.md th{background:#E4E4E4}
.md hr{border:0;border-top:2px groove #f4f4f4;margin:.6em 0}

/* progress */
.bk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px}
.bk-stats > div{display:flex;flex-direction:column;align-items:center;padding:8px 4px;background:var(--face)}
.bk-stats b{font-size:22px;font-family:Georgia,serif;color:#1C3F7A}
.bk-stats span{font-size:13.5px;color:#333}
.bk-chart{display:flex;align-items:flex-end;gap:6px;height:170px;padding:10px 12px 6px;background:#fff}
.bk-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.bk-col{flex:1;width:100%;max-width:38px;display:flex;align-items:flex-end;background:repeating-linear-gradient(0deg,#EEE 0 1px,transparent 1px 25%)}
.bk-col i{display:block;width:100%;background:linear-gradient(90deg,#1C3F7A,#3B6FB6);border:1px solid #000;border-bottom:0;min-height:0}
.bk-bar span{font-size:13.5px;font-weight:700}

/* cheat sheet */
.bk-cheat{padding:4px;max-height:420px;overflow:auto}
.bk-cheat table{border-collapse:collapse;width:100%}
.bk-cheat td{padding:4px 6px;border-bottom:1px solid #E4E4E4;vertical-align:top;font-size:14.5px}
.bk-cheat code{font-family:var(--mono);font-size:14px;white-space:nowrap}

/* Format Rally */
.bk-track{position:relative;background:#5A8F3C;padding:8px 40px 8px 10px;margin:10px 0 4px}
.bk-lane{position:relative;height:40px;background:#4A4A4A;border-top:2px dashed #FFD35A;margin:0;display:flex;align-items:center}
.bk-lane + .bk-lane{border-top:2px dashed #FFD35A;border-bottom:2px solid #333}
.bk-who{position:absolute;left:4px;top:1px;font-size:11.5px;color:#fff;font-weight:700;z-index:1}
.bk-rcar{position:absolute;left:0;width:64px;height:28px;transition:left .25s steps(5)}
.bk-car{width:64px;height:28px;display:block}
.bk-flag{position:absolute;right:10px;top:8px;bottom:8px;width:24px;background:repeating-conic-gradient(#000 0 25%,#fff 0 50%) 0 0/12px 12px;border:1px solid #000}
.bk-lcd{background:#000;color:#f00;font-family:var(--mono);font-size:20px;padding:0 6px;letter-spacing:1px;min-width:64px;text-align:right}
.bk-rin{font-family:var(--mono);font-size:16px;height:30px;margin-top:8px}
.bk-rprev{min-height:30px;padding:4px 2px;color:#444}
.bk-race .bk-target{font-size:18px}

@media (max-width:760px){
  .beaconw{height:auto;max-height:none}
  .bk-main{overflow:visible;padding:8px}
  .bk-banner{flex-direction:column;gap:0;padding:6px 10px}
  .bk-ttl{font-size:19px}
  .bk-home .bk-pic{width:96px;height:112px}
  .bk-home .bk-say{margin-top:6px;font-size:15.5px}
  .bk-menu{margin-left:0;grid-template-columns:1fr}
  .bk-strip{margin-left:0;grid-template-columns:repeat(5,1fr)}
  .beaconw .status > div + div{display:none}
  .bk-tile small{white-space:normal;font-size:12px}
  .bk-teach{gap:10px}
  .bk-drill .bk-pic{width:52px;height:61px}
  .bk-ex{grid-template-columns:1fr;gap:0}
  .bk-in{min-height:110px;font-size:16px}
  .bk-out{height:auto;min-height:60px}
  .bk-fin .bk-score{margin-left:0}
  .bk-stats{grid-template-columns:repeat(2,1fr)}
  .bk-chart{height:140px;gap:3px;padding:8px 6px 4px}
  .bk-foot .btn{min-width:0}
  .bk-rcar,.bk-car{width:48px;height:21px}
  .bk-track{padding-right:32px}
  .bk-flag{width:18px}
  .bk-cheat code{white-space:normal}
}