/* Web daily, archive, how-to and printable pages (Marketing/web_daily.py). Player styles match /c/. */
:root{--good:#3F9D6B}
@media (prefers-color-scheme:dark){:root{--good:#6CC892}}
main{max-width:640px;padding-top:28px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);text-decoration:none}
.brand img{width:32px;height:32px;border-radius:8px}
h1{font-size:30px;margin:18px 0 6px}
.lead{margin:20px 0}
.btn{display:block;width:100%;border:0;border-radius:18px;padding:16px;font:inherit;font-weight:800;font-size:18px;cursor:pointer;text-align:center;text-decoration:none}
.primary{background:var(--accent);color:#fff}
.ghost{background:var(--line);color:var(--ink)}
.row{display:flex;gap:10px;margin-top:12px}
.row .btn{font-size:15px;padding:12px}
.lane{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin:6px 0}
.lane span:first-child{width:96px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.track{flex:1;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.bar{height:100%;width:3%;border-radius:4px;transition:width .4s}
.lane .t{width:52px;text-align:right;font-variant-numeric:tabular-nums}
#board{display:block;margin:12px auto 0;touch-action:none;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.howto{color:var(--sub);font-size:14px;text-align:center;margin:10px 0 0}
.big{font-size:56px;font-weight:800;text-align:center;margin:0;font-variant-numeric:tabular-nums}
.center{text-align:center}
input{width:100%;font:inherit;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);margin:10px 0}
.links{margin-top:36px;text-align:center;color:var(--sub);font-size:15px}
.archive{padding-left:1.2em;line-height:2}
.steps svg,.sheet svg{max-width:100%;height:auto}
figure{margin:0}
.example{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.example figure{text-align:center;font-size:14px;color:var(--sub)}
.example svg{width:180px;height:180px;background:#fff;border-radius:8px}
.sheet{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 18px;margin:18px 0}
.sheet figure{background:#fff;border-radius:12px;padding:10px;text-align:center}
.sheet figcaption{color:#555;font-size:14px;margin-top:4px}
.sheethead{font-size:13px;color:var(--sub)}
.sheethead span{display:block;margin-top:6px}
@media print{
  :root{--bg:#fff;--ink:#000;--sub:#333}
  body{background:#fff;color:#000}
  main{max-width:none;padding:0}
  .brand,.noprint,.links,.lead{display:none!important}
  h1{font-size:18px;margin:0 0 4px}
  .page{break-after:page}
  .page:last-of-type{break-after:auto}
  @page{margin:12mm}
  .sheet{gap:6mm 8mm;margin:3mm 0}
  .sheet figure{padding:0;break-inside:avoid}
  .sheet svg{width:auto;height:62mm}
  .sheet figcaption{font-size:11px;margin-top:1mm}
  h2{margin:0 0 3mm}
}