:root{
  --bg:#FFFFFF; --ink:#1C2541; --muted:#465067; --soft:#EEF2F7; --line:#D3D9E3;
  --band:#1C2541; --band-ink:#FFFFFF; --band-muted:#CDD5E3; --accent:#FFD447;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121829; --ink:#EEF1F7; --muted:#AEB7C9; --soft:#1B2338; --line:#2E3852;
    --band:#0B1020; --band-ink:#FFFFFF; --band-muted:#AEB7C9; color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121829; --ink:#EEF1F7; --muted:#AEB7C9; --soft:#1B2338; --line:#2E3852;
  --band:#0B1020; --band-ink:#FFFFFF; --band-muted:#AEB7C9; color-scheme: dark;
}
:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
*,*::before,*::after{ box-sizing:inherit; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Atkinson Hyperlegible', Verdana, sans-serif; font-size:18px; line-height:1.55; overflow-x:hidden; }
a{ color:var(--ink); }
:focus-visible{ outline:3px solid #E0A800; outline-offset:3px; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 18px; }
.display{ font-family:'Bricolage Grotesque', 'Trebuchet MS', sans-serif; font-weight:800; letter-spacing:-0.02em; }
.top{ border-bottom:1px solid var(--line); }
.top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand span{ font-size:24px; }
.pill{ display:inline-flex; align-items:center; min-height:38px; padding:0 14px; border:2px solid var(--ink); border-radius:999px; font-weight:700; font-size:15px; }
.navlinks{ display:flex; gap:16px; font-weight:700; font-size:16px; flex-wrap:wrap; align-items:center; }
.navlinks a{ text-decoration:none; }
.hero{ background:var(--soft); }
.hero .wrap{ padding-top:40px; padding-bottom:44px; display:flex; flex-direction:column; gap:18px; }
.hero h1{ margin:0; font-size:clamp(36px, 8vw, 64px); line-height:1.02; max-width:15ch; text-wrap:balance; }
.hero p{ margin:0; font-size:clamp(18px, 2.4vw, 21px); max-width:36em; color:var(--muted); }
.btnrow{ display:flex; flex-wrap:wrap; gap:12px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; border-radius:12px; font:inherit; font-weight:700; font-size:18px; text-decoration:none; cursor:pointer; border:2px solid var(--ink); background:transparent; color:var(--ink); }
.btn.solid{ background:var(--ink); color:var(--bg); }
.btn.gold{ background:var(--accent); border-color:var(--accent); color:#1C2541; }
.checks{ display:flex; flex-wrap:wrap; gap:8px 22px; font-weight:700; font-size:16px; padding:0; margin:0; list-style:none; }
.checks li{ display:flex; align-items:center; gap:8px; }
.maker{ padding:36px 0 48px; }
.maker h2, .section h2{ margin:0 0 6px; font-size:clamp(30px, 5vw, 42px); line-height:1.08; }
.lead{ margin:0 0 20px; color:var(--muted); max-width:38em; }
.tabs{ display:flex; gap:8px; overflow-x:auto; padding:4px 2px 12px; margin:0 0 8px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.tab{ flex:0 0 auto; min-height:48px; padding:0 16px; border-radius:999px; border:2px solid var(--ink); background:transparent; color:var(--ink); font:inherit; font-weight:700; font-size:16px; cursor:pointer; white-space:nowrap; }
.tab[aria-selected="true"]{ background:var(--ink); color:var(--bg); }
.makergrid{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:start; }
@media (min-width: 960px){ .makergrid{ grid-template-columns:350px minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:28px; } .makergrid .quick{ grid-column:1; grid-row:1; } .makergrid #pages{ grid-column:2; grid-row:1 / span 2; } .makergrid .rest{ grid-column:1; grid-row:2; align-self:start; } }
.controls{ display:flex; flex-direction:column; gap:18px; }
fieldset{ border:0; margin:0; padding:0; min-width:0; }
legend{ font-weight:700; font-size:16px; margin-bottom:8px; padding:0; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ min-height:46px; padding:0 14px; border-radius:10px; border:2px solid var(--ink); background:transparent; color:var(--ink); font:inherit; font-weight:700; font-size:16px; cursor:pointer; }
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-weight:700; font-size:16px; }
.field input, .field textarea, .field select{ font:inherit; font-size:17px; padding:10px 12px; border:2px solid var(--ink); border-radius:10px; background:var(--bg); color:var(--ink); min-height:46px; width:100%; }
.field textarea{ min-height:120px; resize:vertical; }
.toggle{ display:flex; align-items:center; gap:12px; min-height:44px; font-weight:700; cursor:pointer; }
.toggle input{ width:24px; height:24px; accent-color:var(--ink); }
.actions{ display:flex; flex-wrap:wrap; gap:10px; }
.note-tip{ font-size:15px; color:var(--muted); margin:0; }
.tooldesc{ margin:0; font-size:16px; color:var(--muted); }
/* page content */
/* paper */
.sh-head{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; font-size:0.8em; }
.sh-title{ font-family:'Bricolage Grotesque', 'Trebuchet MS', sans-serif; font-weight:800; font-size:1.75em; line-height:1.08; margin:0.45em 0 0.15em; letter-spacing:-0.02em; }
.sh-inst{ margin:0 0 0.8em; padding-bottom:0.6em; border-bottom:3px solid #141414; }
.sh-foot{ margin-top:1em; font-size:0.6em; color:#444444; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; }
.lvl{ font-weight:700; border:2px solid #141414; border-radius:999px; padding:0 0.6em; white-space:nowrap; }
.key{ }
.key h3{ font-family:'Bricolage Grotesque', 'Trebuchet MS', sans-serif; font-size:1.2em; margin:0 0 0.5em; }
.keylist{ display:grid; grid-template-columns:repeat(auto-fill, minmax(9em, 1fr)); gap:0.3em 1em; margin:0; padding:0; list-style:none; }
.keylist.wide{ grid-template-columns:minmax(0,1fr); }
.mrow{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.4em 1em; border:2px solid #141414; border-radius:12px; padding:0.5em 0.8em; margin-bottom:0.5em; }
.mrow .num{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; min-width:1.2em; }
.mrow .item{ flex:1 1 9em; display:flex; flex-direction:column; }
.price{ font-weight:700; font-size:1.3em; line-height:1.1; }
.yn{ display:flex; gap:0.5em; font-weight:700; }
.yn span{ border:2px solid #141414; border-radius:999px; padding:0 0.6em; }
.full{ flex-basis:100%; }
.money-set{ display:flex; flex-wrap:wrap; gap:0.35em; flex:1 1 12em; }
.mnote{ display:inline-flex; align-items:center; justify-content:center; min-width:3.2em; height:1.9em; padding:0 0.4em; border:2px solid #141414; border-radius:4px; font-weight:700; font-size:0.9em; background:repeating-linear-gradient(135deg,#FFFFFF 0 6px,#EDEDED 6px 8px); }
.mcoin{ display:inline-flex; align-items:center; justify-content:center; width:2.2em; height:2.2em; border:2px solid #141414; border-radius:50%; font-weight:700; font-size:0.78em; }
.clocks{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1em; }
.clock{ display:flex; flex-direction:column; align-items:center; gap:0.3em; }
.clock svg{ width:100%; max-width:170px; height:auto; }
.two{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.2em; }
.two ol, .plain{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0.55em; }
.signbox{ display:inline-block; border:3px solid #141414; border-radius:6px; padding:0.05em 0.45em; font-weight:700; letter-spacing:0.04em; }
.ws{ display:grid; border:2px solid #141414; width:100%; max-width:calc(var(--n) * 2.1em); margin:0 auto; }
.ws div{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:clamp(12px, calc(78vw / var(--n) * 0.55), var(--fs)); }
.ws .hit{ background:#D9D9D9; text-decoration:underline; }
.bank{ display:flex; flex-wrap:wrap; gap:0.4em 1.2em; margin:0.9em 0 0; padding:0.6em 0.8em; border:2px solid #141414; border-radius:10px; font-weight:700; list-style:none; }
.qlist{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0.75em; }
.qlist > li{ display:flex; gap:0.5em; }
.qlist .n{ font-weight:700; min-width:1.6em; flex:0 0 auto; }
.letters{ font-weight:700; letter-spacing:0.35em; }
.mathgrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0.8em 1.4em; margin:0; padding:0; list-style:none; }
.mathgrid li{ white-space:nowrap; }
.opts{ display:flex; flex-wrap:wrap; gap:0.3em 1em; margin-top:0.3em; }
.opts span::before{ content:"\25CB  "; }
.line{ border-bottom:1.5px solid #141414; min-height:1.8em; }
.menu{ border:3px double #141414; border-radius:10px; padding:0.8em 1em; margin-bottom:1em; display:grid; grid-template-columns:minmax(0,1fr); gap:0.6em 1.6em; }
.menu h4{ margin:0 0 0.2em; font-size:1em; text-transform:uppercase; letter-spacing:0.06em; }
.menu .mi{ display:flex; justify-content:space-between; gap:0.6em; border-bottom:1px dotted #777; }
.cal{ width:100%; border-collapse:collapse; table-layout:fixed; margin-bottom:1em; }
.cal th, .cal td{ border:1.5px solid #141414; text-align:center; padding:0.25em 0; font-size:0.85em; }
.cal th{ font-size:0.7em; }
.cal td{ height:2.1em; vertical-align:top; text-align:left; padding-left:0.25em; }
.cal.big td{ height:4.6em; }
.formbox{ border:2px solid #141414; border-radius:10px; padding:0.8em 1em; margin-bottom:1em; display:flex; flex-direction:column; gap:0.7em; }
.frow{ display:flex; gap:0.6em; align-items:flex-end; flex-wrap:wrap; }
.frow b{ flex:0 0 auto; }
.frow .line{ flex:1 1 8em; }
.idcard{ border:2px solid #141414; border-radius:12px; padding:0.7em 1em; margin-bottom:1em; background:#F2F2F2; }
.wu{ display:grid; grid-template-columns:minmax(0,1fr); gap:0.8em; }
.wubox{ border:2px solid #141414; border-radius:12px; padding:0.6em 0.8em; display:flex; flex-direction:column; gap:0.4em; }
.wubox h4{ margin:0; font-size:0.95em; }
.wubox svg{ max-width:140px; }
.ft{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0.8em; }
.ftbox{ border:4px solid #141414; border-radius:16px; min-height:11em; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.4em; padding:0.6em; text-align:center; }
.ftbox .lab{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:1.3em; }
.ftbox svg{ width:3.6em; height:3.6em; }
.sched{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.45em; }
.sched li{ display:flex; align-items:center; gap:0.8em; border:2px solid #141414; border-radius:10px; padding:0.4em 0.7em; }
.sched svg{ width:2em; height:2em; flex:0 0 auto; }
.sched .txt{ flex:1 1 auto; font-weight:700; }
.box{ width:1.4em; height:1.4em; border:2px solid #141414; border-radius:4px; flex:0 0 auto; }
.scale{ display:flex; flex-direction:column; gap:0.5em; }
.scale .row{ display:flex; align-items:center; gap:0.8em; border:2px solid #141414; border-radius:10px; padding:0.4em 0.7em; }
.scale .num{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:1.5em; width:1.2em; text-align:center; }
.scale svg{ width:2.6em; height:2.6em; flex:0 0 auto; }
.stars{ display:flex; flex-wrap:wrap; gap:0.5em; justify-content:center; margin:0.8em 0; }
.stars svg{ width:3.2em; height:3.2em; }
.cardgrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0; }
.cut{ border:2px dashed #555555; padding:0.8em; min-height:6.5em; display:flex; flex-direction:column; justify-content:center; gap:0.3em; }
.cut svg{ width:2.4em; height:2.4em; }
.bingo{ display:grid; border:3px solid #141414; margin-bottom:1em; }
.bingo div{ aspect-ratio:1; border:1.5px solid #141414; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:700; font-size:0.85em; padding:0.15em; word-break:normal; overflow-wrap:normal; hyphens:none; overflow:hidden; white-space:nowrap; }
.bingo .free{ background:#E6E6E6; }
.bingos{ display:grid; grid-template-columns:repeat(var(--cols,1), minmax(0,1fr)); gap:1em; }
.cert{ border:8px double #141414; border-radius:8px; padding:1.4em 1em; text-align:center; display:flex; flex-direction:column; gap:0.6em; align-items:center; }
.cert .big{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:2em; line-height:1.1; }
.cert .name{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:1.6em; border-bottom:2px solid #141414; padding:0 1em 0.1em; min-width:60%; }
.cert .sig{ display:flex; gap:2em; justify-content:center; flex-wrap:wrap; margin-top:0.8em; width:100%; }
.cert .sig div{ flex:1 1 8em; border-top:2px solid #141414; padding-top:0.2em; font-size:0.8em; }
.passes{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
.pass{ border:2px dashed #555555; padding:0.8em; display:flex; flex-direction:column; gap:0.35em; font-size:0.85em; }
.pass .t{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:1.5em; }
.trace{ position:relative; height:2.8em; margin-bottom:0.6em; border-top:2px solid #141414; border-bottom:2px solid #141414; display:flex; align-items:flex-end; overflow:hidden; }
.trace::after{ content:""; position:absolute; left:0; right:0; top:50%; border-top:2px dashed #999999; }
.trace span{ font-size:2.3em; line-height:1; color:transparent; -webkit-text-stroke:1.4px #777777; letter-spacing:0.06em; padding-left:0.1em; white-space:nowrap; }
.blank-line{ height:2.8em; margin-bottom:1em; border-top:2px solid #141414; border-bottom:2px solid #141414; position:relative; }
.blank-line::after{ content:""; position:absolute; left:0; right:0; top:50%; border-top:2px dashed #999999; }
.icons{ display:flex; flex-wrap:wrap; gap:0.6em 1.1em; }
.icons span{ display:inline-flex; align-items:center; gap:0.3em; font-weight:700; }
.icons svg{ width:1.6em; height:1.6em; }
.clocks{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
.two, .wu, .menu{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
.mathgrid{ grid-template-columns:repeat(auto-fill, minmax(8.5em, 1fr)) !important; }
.ico{ display:inline-flex; flex:0 0 auto; }
.ico svg{ width:2em; height:2em; }
li .ico svg{ width:1.5em; height:1.5em; vertical-align:middle; margin-right:0.3em; }
.pagescale{ position:relative; width:100%; overflow:hidden; margin:0 auto 16px; }
.page{ position:absolute; top:0; left:0; transform-origin:0 0; background:#FFFFFF; color:#141414; box-shadow:0 0 0 1px #C3CAD6, 0 8px 22px rgba(20,30,60,0.14); padding:48px; box-sizing:border-box; overflow:hidden; font-size:var(--fs); line-height:1.4; overflow-wrap:anywhere; }
.pagelabel{ font-size:14px; color:var(--muted); margin:0 0 6px; font-weight:700; }
/* bands */
.section{ padding:44px 0; }
.soft{ background:var(--soft); }
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:14px; }
.card{ border:2px solid var(--ink); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:6px; }
.card h3{ margin:0; font-size:22px; }
.card p{ margin:0; color:var(--muted); }
.tpt{ background:var(--band); color:var(--band-ink); }
.tpt .wrap{ padding-top:44px; padding-bottom:44px; display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between; }
.tpt h2{ margin:0 0 8px; font-size:clamp(28px, 5vw, 38px); color:var(--band-ink); }
.tpt p{ margin:0; color:var(--band-muted); max-width:34em; }
.ad{ max-width:728px; height:90px; margin:26px auto; border:2px dashed var(--muted); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:15px; }
.faq details{ border-top:1px solid var(--line); padding:12px 0; }
.faq summary{ font-weight:700; cursor:pointer; min-height:44px; display:flex; align-items:center; }
.faq p{ margin:6px 0 0; color:var(--muted); }
.foot{ background:var(--band); color:var(--band-muted); }
.foot .wrap{ padding-top:34px; padding-bottom:34px; display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; }
.foot a{ color:var(--band-ink); }
.foot nav{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.toast{ position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:10px; font-weight:700; display:none; max-width:90vw; z-index:5; }
.toast.on{ display:block; }

.sh-foot.withqr{ align-items:flex-end; }
.sh-foot .fl{ display:flex; flex-direction:column; gap:2px; }
.sh-foot{ align-items:flex-end; }
.qrbox{ display:flex; align-items:center; gap:8px; font-size:11px; line-height:1.2; color:#333333; font-weight:700; text-align:left; }
.qr{ width:92px; height:92px; flex:0 0 auto; }
.qr svg{ width:100%; height:100%; display:block; }
.scalebar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; margin:0 0 10px; padding:10px 12px; border-radius:10px; background:var(--soft); }
.scalenote{ margin:0; font-size:15px; line-height:1.4; flex:1 1 220px; }
.hint{ font-size:14px; color:var(--muted); margin:2px 0 0; }
details.more{ border:2px solid var(--line); border-radius:12px; padding:0 12px; }
details.more summary{ cursor:pointer; min-height:48px; display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; font-weight:700; padding:6px 0; }
details.more summary .sum{ font-weight:400; font-size:14px; color:var(--muted); }
.moreinner{ display:flex; flex-direction:column; gap:16px; padding:6px 0 14px; }
.printsum{ margin:0; font-weight:700; }
#view h1:focus{ outline:none; }
.about{ max-width:760px; margin:8px 0 24px; }
.about h2{ font-size:clamp(26px,4.5vw,34px); margin:8px 0 8px; }
.about h3{ font-size:20px; margin:22px 0 6px; }
.about p, .about li{ font-size:17px; line-height:1.6; }
.about ul{ padding-left:22px; margin:6px 0; display:flex; flex-direction:column; gap:6px; }
.about details{ border-top:1px solid var(--line); padding:8px 0; }
.about summary{ font-weight:700; cursor:pointer; min-height:44px; display:flex; align-items:center; }
.about details p{ margin:4px 0 6px; color:var(--muted); }
.morelist a{ font-weight:700; }
.artlist{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; margin:12px 0 20px; }
.artcard{ display:flex; flex-direction:column; gap:6px; text-decoration:none; border:2px solid var(--ink); border-radius:14px; padding:18px; }
.artcard h2, .artcard h3{ margin:0; font-size:21px; line-height:1.2; }
.artcard p{ margin:0; color:var(--muted); font-size:15px; }
.meta{ color:var(--muted); font-size:14px; }
.post{ max-width:720px; padding-bottom:12px; }
.post h1{ margin:8px 0 4px; }
.post h2{ font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif; font-weight:800; font-size:26px; margin:28px 0 8px; letter-spacing:-0.01em; }
.post p, .post li{ font-size:18px; line-height:1.65; }
.post ul{ padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.post a{ font-weight:700; }
.post .note{ background:var(--soft); border-radius:10px; padding:12px 14px; font-size:16px; }
/* fill the page */
.pc{ height:100%; display:flex; flex-direction:column; }
.pc > .sh-foot{ margin-top:auto; padding-top:0.6em; }
.pc > .rows{ display:flex; flex-direction:column; gap:0.5em; }
.pc > .items{ flex:1 1 auto; justify-content:space-evenly; align-content:space-evenly; }
.pc > .items > .mrow{ margin-bottom:0; }
.pc > .cardgrid, .pc > .passes{ flex:1 1 auto; grid-auto-rows:1fr; }
.pc > .ft{ flex:1 1 auto; }
.pc > .scale{ flex:1 1 auto; justify-content:space-evenly; }
.pc > .cert{ flex:1 1 auto; justify-content:center; }
.pc > .wu{ flex:1 1 auto; align-content:space-evenly; }
.pc > .bingos{ flex:1 1 auto; align-content:space-evenly; }
.ftbox{ min-height:8em; }
.ftbox svg{ width:4.5em; height:4.5em; }
.ws div{ font-size:var(--fs) !important; }
.ws{ max-width:calc(var(--n) * 2.2em); }
.sh-foot.tiny{ font-size:0.45em; color:#777777; }
.center{ text-align:center; }
@media (max-width: 600px){
  .top .pill{ display:none; }
  .top .wrap{ flex-wrap:nowrap; padding-top:10px; padding-bottom:10px; }
  .brand span{ font-size:20px; }
  .brand svg{ width:30px; height:30px; }
  .navlinks{ gap:14px; font-size:15px; flex-wrap:nowrap; }
  .navlinks a:first-child{ display:none; }
  .tabbar .tabs{ padding-top:8px; padding-bottom:8px; }
  .crumbs{ padding-top:10px; margin:0; }
}
.page .clock svg{ max-width:none; }
.page .cut svg{ width:3em; height:3em; }
.page .ftbox{ justify-content:space-evenly; }
.page .ftbox .lab{ font-size:1.8em; }
.page .ftbox svg{ width:7em; height:7em; }
.page .ftbox b{ font-size:1.8em; }
.example{ margin:14px 0 6px; max-width:420px; }
.example img{ width:100%; height:auto; display:block; box-shadow:0 0 0 1px #C3CAD6, 0 6px 18px rgba(20,30,60,0.12); border-radius:4px; background:#FFFFFF; }
.example figcaption{ font-size:14px; color:var(--muted); margin-top:6px; }
.page{ font-family:'Andika', 'Atkinson Hyperlegible', Verdana, sans-serif; }
.page .sh-head{ font-size:max(0.8em, 12px); }
.page .clock svg{ max-width:8.5em; }
.page .bingos > div{ width:100%; max-width:24em; margin:0 auto; }
.page .bingos.one > div{ max-width:none; }
.page .bingos.one .bingo div{ font-size:1.5em; }
.page .bingos.one b{ font-size:1.2em; }
.page .wubox svg{ max-width:7em; }
.page .bingo div{ font-size:max(1.1em, 12px); }
.page.land .bingos:has(> div:nth-child(4)){ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
.page .mcoin{ font-size:max(0.78em, 11px); }
.page .mnote{ font-size:max(0.9em, 11px); }
.page .cal th{ font-size:max(0.7em, 12px); }
.page .cal td{ font-size:max(0.85em, 12px); }
.page .cert .sig div{ font-size:max(0.8em, 12px); }
.page .wubox h4{ font-size:max(0.95em, 12px); }
.page .pass{ font-size:max(0.85em, 12px); }
.tabbar{ border-bottom:1px solid var(--line); background:var(--bg); }
.tabbar .tabs{ max-width:1180px; margin:0 auto; padding:10px 18px; }
a.tab{ display:inline-flex; align-items:center; text-decoration:none; }
.crumbs{ font-size:15px; color:var(--muted); padding-top:18px; }
.crumbs a{ color:var(--muted); }
.view h1{ margin:6px 0 6px; font-size:clamp(30px, 6vw, 46px); line-height:1.05; }
.sheetcards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:14px; margin:18px 0 8px; }
@media (min-width: 700px){ .sheetcards{ grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); } }
.sheetcard{ display:flex; flex-direction:column; gap:6px; text-decoration:none; border:2px solid var(--ink); border-radius:14px; padding:10px; background:var(--bg); }
.sheetcard h3{ margin:4px 0 0; font-size:18px; line-height:1.2; }
.sheetcard p{ margin:0; font-size:14px; color:var(--muted); line-height:1.35; }
.thumb .pagescale{ margin:0; }
.thumb .page{ box-shadow:0 0 0 1px #C3CAD6; }
.span-all{ grid-column:1 / -1; }
.sections{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.sectioncard{ display:flex; gap:14px; align-items:flex-start; text-decoration:none; border:2px solid var(--ink); border-radius:16px; padding:18px; }
.sectioncard .sic{ flex:0 0 auto; width:48px; height:48px; border-radius:12px; background:var(--accent); display:flex; align-items:center; justify-content:center; }
.sectioncard .sic svg{ width:28px; height:28px; }
.sectioncard h3{ margin:0; font-size:22px; }
.sectioncard p{ margin:2px 0 0; color:var(--muted); font-size:15px; }
.related{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
.related a{ display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:2px solid var(--ink); border-radius:10px; text-decoration:none; font-weight:700; font-size:16px; }
.ready{ display:flex; flex-direction:column; gap:14px; padding:22px 0 10px; }
.anchor{ display:none; }
@media (max-width: 760px){
  .anchor.on{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:4; background:var(--bg); border-top:1px solid var(--line); padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px)); align-items:center; justify-content:center; gap:10px; }
  .anchor .slot{ width:320px; max-width:calc(100% - 56px); height:50px; border:2px dashed var(--muted); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; }
  .anchor button{ width:44px; height:44px; border-radius:22px; border:2px solid var(--ink); background:var(--bg); color:var(--ink); font:inherit; font-weight:700; cursor:pointer; }
  body.has-anchor{ padding-bottom:calc(70px + env(safe-area-inset-bottom,0px)); }
}
.vignette{ display:none; position:fixed; inset:0; z-index:6; background:rgba(10,14,28,0.72); align-items:center; justify-content:center; padding:20px; }
.vignette.on{ display:flex; }
.vignette .box{ background:var(--bg); color:var(--ink); border-radius:14px; padding:18px; width:100%; max-width:380px; display:flex; flex-direction:column; gap:12px; }
.vignette .slot{ height:250px; border:2px dashed var(--muted); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--muted); text-align:center; padding:12px; font-size:15px; }
.vignette .top{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:14px; color:var(--muted); }
.vignette .top button{ min-height:44px; padding:0 16px; border-radius:10px; border:2px solid var(--ink); background:var(--bg); color:var(--ink); font:inherit; font-weight:700; cursor:pointer; }
@media print{
  #view .wrap > *:not(#pages):not(.makergrid){ display:none !important; }
  .makergrid > *:not(#pages){ display:none !important; }
  .makergrid{ display:block !important; }
  #view, #view .wrap{ padding:0 !important; margin:0 !important; max-width:none !important; }
  .scalebar, .pagelabel{ display:none !important; }
  .page:last-of-type{ break-after:auto; }
}
@media print{
  :root{ padding:0 !important; }
  body{ background:#FFFFFF; margin:0; }
  body.has-anchor{ padding-bottom:0; }
  .no-print, .anchor, .vignette, .toast{ display:none !important; }
  .pagescale{ height:auto !important; overflow:visible; margin:0; width:auto; }
  .page{ position:relative !important; transform:none !important; box-shadow:none !important; break-after:page; page-break-after:always; }
  .pagelabel{ display:none; }
  .nokey .keypage{ display:none !important; }
}

/* community signs */
.signgrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0.9em 1.4em; flex:1 1 auto; align-content:space-evenly; }
.signcard{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:0.4em; align-items:center; }
.signcard .n{ font-weight:700; grid-row:1 / span 2; align-self:start; }
.signcard .signsvg{ width:100%; max-width:11em; height:auto; display:block; }
.signcard .ans{ margin-top:0.25em; grid-column:2; }
.meanings{ list-style:none; margin:0.8em 0 0; padding:0.6em 0.8em; border:2px solid #141414; border-radius:8px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0.3em 1.2em; }
.wubox .signsvg{ width:100%; max-width:8em; height:auto; display:block; margin:0.2em 0; }

/* calendar holidays */
.cal td .dn{ display:block; }
.cal td .hol{ display:block; font-size:0.74em; line-height:1.15; font-weight:700; margin-top:0.15em; padding-right:0.2em;  overflow-wrap:normal; word-break:normal; hyphens:none; }
.page .cal td .hol{ font-size:max(0.74em, 11px); }

/* award certificate */
.page .cert{ border:none; padding:0; display:flex; align-items:stretch; }
.cframe{ position:relative; flex:1 1 auto; border:10px double #141414; outline:2px solid #141414; outline-offset:-26px; border-radius:6px; padding:2.2em 3em 1.6em; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5em; text-align:center; }
.cframe .cstar{ position:absolute; width:2.2em; height:2.2em; }
.cframe .cstar svg{ width:100%; height:100%; fill:#141414; }
.cframe .cstar:nth-child(1){ top:0.9em; left:0.9em; } .cframe .cstar:nth-child(2){ top:0.9em; right:0.9em; }
.cframe .cstar:nth-child(3){ bottom:0.9em; left:0.9em; } .cframe .cstar:nth-child(4){ bottom:0.9em; right:0.9em; }
.cframe .big{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:2.9em; line-height:1.05; }
.cframe .goes{ font-size:1.05em; margin-top:0.4em; }
.cframe .name{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:2.3em; border-bottom:2px solid #141414; padding:0 1em 0.1em; min-width:60%; }
.cframe .reason{ font-size:1.15em; }
.cframe .sig{ display:grid; grid-template-columns:1fr auto 1fr; gap:1.5em; align-items:end; width:100%; margin-top:0.6em; }
.cframe .sl{ border-top:2px solid #141414; padding-top:0.2em; font-size:max(0.8em, 12px); }
.cframe .seal{ width:4.2em; height:auto; }

/* hall passes */
.pass{ justify-content:space-evenly; }
.pass .room{ font-weight:700; }
.pass .frow{ display:flex; flex-wrap:nowrap; align-items:flex-end; gap:0.4em; }
.pass .frow .line{ flex:1 1 auto; border-bottom:1.5px solid #141414; height:1.1em; }
.pc > .cal.big{ flex:1 1 auto; }
.pc > .cal.big caption{ caption-side:top; }

/* doc pages (about, privacy, terms, contact, faq) */
.doc{ max-width:46em; padding-top:24px; padding-bottom:64px; }
.doc h1{ font-size:clamp(34px, 7vw, 48px); line-height:1.08; margin:4px 0 16px; }
.doc h2{ font-size:26px; line-height:1.2; margin:36px 0 8px; }
.doc p, .doc li{ max-width:40em; }
.doc li{ margin:4px 0; }
.doc .lead{ font-size:21px; }
.doc .updated{ color:var(--muted); font-size:16px; }
.doc .tablewrap{ overflow-x:auto; }
.doc table{ border-collapse:collapse; width:100%; font-size:16px; min-width:520px; }
.doc th, .doc td{ border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.doc th{ background:var(--soft); }
.doc .mail{ font-size:22px; font-weight:700; }
.doc details{ border-bottom:1px solid var(--line); padding:12px 0; }
.doc details summary{ font-weight:700; cursor:pointer; }
.doc details p{ margin:8px 0 0; }
/* end doc pages */


/* writing prompts fill the page */
.pc > .prompts{ flex:1 1 auto; display:flex; flex-direction:column; }
.prompts .prompt{ flex:1 1 0; display:flex; flex-direction:column; min-height:0; }
.prompts .prompt p{ margin:0.6em 0 0.2em; }
.prompts .lns{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-evenly; }

/* token board */
.pc > .stars{ flex:1 1 auto; align-items:center; align-content:center; }
.page .stars svg{ width:6em; height:6em; }
.page .stars.n10 svg{ width:3.6em; height:3.6em; }

/* ===== real-world documents ===== */
.doc2{ display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr); gap:1.2em; align-items:start; flex:1 1 auto; }
.doc2 .qlist{ gap:1em; }
.receipt{ border:2px dashed #141414; border-radius:4px; padding:0.8em 0.9em; font-size:0.92em; background:#FFFFFF; }
.receipt .rhead{ text-align:center; display:flex; flex-direction:column; margin-bottom:0.5em; padding-bottom:0.4em; border-bottom:1.5px solid #141414; }
.receipt .rhead b{ font-size:1.2em; }
.receipt .rhead span{ font-size:0.85em; }
.rr{ display:flex; justify-content:space-between; gap:0.6em; padding:0.12em 0; }
.rr span:last-child{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.rr.big{ font-weight:700; font-size:1.12em; border-top:1.5px solid #141414; margin-top:0.2em; padding-top:0.25em; }
.rsep{ border-top:1.5px dashed #141414; margin:0.35em 0; }
.rfoot{ text-align:center; font-size:0.8em; margin-top:0.5em; }
.payslip, .bill, .stmt{ border:2px solid #141414; border-radius:8px; padding:0.7em 0.9em; margin-bottom:0.9em; font-size:0.9em; }
.ph{ display:flex; justify-content:space-between; align-items:baseline; gap:1em; border-bottom:2px solid #141414; padding-bottom:0.3em; margin-bottom:0.5em; }
.ph b{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:1.25em; }
.ph span{ font-weight:700; text-transform:uppercase; letter-spacing:0.05em; font-size:0.85em; }
.pgrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0.3em 1.2em; margin-bottom:0.6em; }
.pgrid div{ display:flex; flex-direction:column; }
.pgrid span{ font-size:0.75em; text-transform:uppercase; letter-spacing:0.04em; }
.ptab{ width:100%; border-collapse:collapse; margin:0.3em 0 0.5em; font-variant-numeric:tabular-nums; }
.ptab th, .ptab td{ border:1.5px solid #141414; padding:0.22em 0.45em; text-align:left; }
.ptab th{ background:#E6E6E6; font-size:0.85em; }
.ptab td:last-child{ text-align:right; white-space:nowrap; min-width:5.5em; }
.ptab tr.sum td{ font-weight:700; }
.ptab td.blank{ min-width:6em; }
.bt td:nth-child(n+3){ text-align:right; white-space:nowrap; min-width:4.6em; }
.bt td:nth-child(2){ width:40%; }
.pnet{ display:flex; justify-content:space-between; align-items:center; border:2.5px solid #141414; border-radius:6px; padding:0.35em 0.6em; font-weight:700; font-size:1.1em; margin-top:0.3em; }
.pnote{ font-size:0.75em; margin:0.35em 0 0; }
.usage{ display:flex; gap:1.2em; align-items:center; flex-wrap:wrap; font-size:0.9em; border-top:1.5px solid #141414; padding-top:0.4em; }
.usage > span{ font-weight:700; }
.tt{ width:100%; border-collapse:collapse; margin-bottom:0.9em; font-variant-numeric:tabular-nums; }
.tt caption{ caption-side:top; text-align:left; font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:1.15em; padding-bottom:0.3em; }
.tt th, .tt td{ border:1.5px solid #141414; padding:0.28em 0.35em; text-align:center; white-space:nowrap; }
.tt th{ background:#E6E6E6; text-align:left; }
.tt tr:first-child th{ text-align:center; }
.rota td{ font-size:0.82em; }
.rota .off{ color:#555555; font-style:italic; }
.bbrow{ display:grid; grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr); gap:0.4em 0.8em; align-items:center; border:2px solid #141414; border-radius:12px; padding:0.5em 0.8em; }
.bbrow .num{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; }
.bbname{ font-weight:700; }
.tag{ border:2px solid #141414; border-radius:8px 18px 18px 8px; padding:0.25em 0.6em; display:flex; flex-direction:column; align-items:flex-start; }
.tag .pr{ font-size:1.15em; }
.bbans{ grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:0.3em 1.6em; }
.circ{ display:inline-block; border:2px solid #141414; border-radius:50%; width:1.6em; height:1.6em; line-height:1.45em; text-align:center; font-weight:700; margin-left:0.3em; }
.salerow .salesign{ font-weight:800; border:2.5px solid #141414; border-radius:6px; padding:0.1em 0.5em; transform:rotate(-3deg); }
.salerow .saleans{ display:flex; flex-direction:column; gap:0.2em; }
.cards2{ display:grid; grid-template-columns:repeat(auto-fit, minmax(13em, 1fr)); gap:0 1em; }
.idcard.note{ background:#FFFFFF; border-style:dashed; }
.idcard .small{ font-size:0.85em; }
.envelope{ position:relative; border:2.5px solid #141414; border-radius:6px; aspect-ratio:9.5 / 4.6; padding:0.7em 0.9em; margin-top:0.4em; }
.envelope .stamp{ position:absolute; top:0.7em; right:0.9em; width:5.4em; height:6.2em; white-space:nowrap; border:2px dashed #141414; display:flex; align-items:center; justify-content:center; font-size:0.65em; font-weight:700; }
.envelope .eret{ width:45%; font-size:0.85em; }
.envelope .eto{ position:absolute; left:32%; right:6%; top:48%; }
.eline{ border-bottom:1.5px solid #141414; height:1.7em; position:relative; }
.eret .eline{ height:1.45em; }
.elab{ position:absolute; left:0; bottom:-1.2em; font-size:0.6em; color:#555555; }
.eto .eline{ margin-bottom:0.55em; }
.tc td:nth-child(n+2){ text-align:center; }
.qa{ display:flex; flex-direction:column; flex:1 1 auto; }
.aline{ display:block; border-bottom:1.5px solid #141414; height:1.5em; max-width:13em; }
.doc2 .qlist{ justify-content:space-evenly; align-self:stretch; }
.doc2{ align-items:stretch; }
.tc td{ height:2.3em; }
.stmt .bt td{ padding:0.18em 0.4em; }
.cards2.wide1{ grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); }
.cards2.wide1 .idcard{ font-size:0.92em; }