/* Flintard — a two-ink print on bone paper: charcoal for the flints, steel-blue for the steels, nothing else.
   Instrument Serif for the words, Public Sans for every figure (a display face sets the digit 1 as a bare stroke). */
:root{
  --bone:#ECE7DE; --bone2:#E3DDD2; --bone3:#F6F3EC; --rule:#C9C2B6;
  --char:#1F1C1A; --char2:#3A3632; --steel:#2F5D8A; --steel2:#23476B; --ash:#7B756C;
  --serif:'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans:'Public Sans', system-ui, sans-serif;
  --mono:'DM Mono', ui-monospace, monospace;
  --barh:92px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bone);color:var(--char)}
body{font:15.5px/1.5 var(--sans);padding-top:calc(var(--barh) + 12px);padding-bottom:28px;
  background-image:linear-gradient(90deg, rgba(31,28,26,.045) 1px, transparent 1px);background-size:34px 100%}
a{color:inherit}
.tk{white-space:nowrap}
button{font:inherit;cursor:pointer}

/* ---- the strip ---- */
.strikebar{position:fixed;top:0;left:0;right:0;z-index:40;background:var(--bone3);border-bottom:2px solid var(--char);
  padding:0 12px;box-shadow:0 2px 0 var(--bone2)}
.sbrow{display:flex;align-items:center;gap:8px;max-width:1180px;margin:0 auto}
.sbid{height:44px;border-bottom:1px solid var(--rule)}
.sbmark{display:flex;align-items:center;gap:8px;text-decoration:none;font:400 22px/1 var(--serif);letter-spacing:.01em}
.sbmark img{display:block;border-radius:50%;border:1px solid var(--char)}
.sbclock{margin-left:auto;font-size:12.5px;color:var(--ash);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sbplug{background:transparent;color:var(--char);border:1.5px solid var(--char);border-radius:999px;padding:6px 11px;font-weight:500;font-size:12.5px;white-space:nowrap}
.sbplug[data-on="1"]{background:var(--steel);border-color:var(--steel);color:var(--bone3)}
.sbca{min-height:44px;padding:6px 0}
.sbk{font:500 11px/1 var(--sans);letter-spacing:.14em;color:var(--ash)}
.sbaddr{flex:1;min-width:0;font:500 11px/1.3 var(--mono);word-break:break-all;user-select:all}
.sbcopy{background:var(--char);color:var(--bone3);border:0;border-radius:3px;padding:8px 11px;font-size:12.5px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.sbcopy[data-done="1"]{background:var(--steel)}
.sbgm{font-size:11.5px;color:var(--ash);white-space:nowrap}

/* ---- the line ---- */
.cry{max-width:1180px;margin:0 auto 4px;padding:6px 16px 12px;font:400 42px/1.05 var(--serif);letter-spacing:-.005em;text-wrap:balance}
.cry em{font-style:italic;color:var(--steel)}
html:not([data-view="hearth"]) .cry{display:none}

/* ---- the folio ---- */
.hearth{max-width:1180px;margin:0 auto;padding:0 16px;display:grid;gap:26px}
.folio{padding-top:6px}
.note{font:400 19px/1.42 var(--serif);margin:0 0 10px;max-width:38em;text-wrap:pretty}
.notesub{margin:0 0 20px;font-size:13.5px;color:var(--ash);max-width:48em}

/* the split pane */
.tinder{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);border:2px solid var(--char);background:var(--bone3);min-height:250px}
.pane{position:relative;padding:12px 12px 14px;display:flex;flex-direction:column;gap:6px;cursor:pointer;user-select:none;min-width:0;
  transition:background .15s ease}
.pane:hover{background:var(--bone2)}
.pane[aria-pressed="true"]{outline:3px solid var(--char);outline-offset:-3px}
.pane-steel[aria-pressed="true"]{outline-color:var(--steel)}
.pane-steel{color:var(--steel2)}
.paneh{font:400 30px/1 var(--serif);margin:0;letter-spacing:.005em}
.pile{flex:1;min-height:96px;display:flex;align-items:flex-end;border-bottom:2px solid currentColor;padding-bottom:0}
.pileink{display:block;width:100%;height:0;min-height:0;background:var(--char);transition:height .7s cubic-bezier(.3,.8,.3,1);
  background-image:repeating-linear-gradient(-45deg, transparent 0 5px, rgba(246,243,236,.16) 5px 6px)}
.pane-steel .pileink{background-color:var(--steel)}
.pane[data-light="1"] .pileink{box-shadow:0 -3px 0 currentColor}
.weight{font:700 26px/1 var(--sans);font-variant-numeric:tabular-nums;margin-top:4px}
.hands{font-size:12.5px;color:var(--ash)}
.fate{font:italic 400 15px/1.25 var(--serif);color:var(--char2)}
.pane-steel .fate{color:var(--steel)}
.mine{position:absolute;top:10px;right:10px;font:500 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  background:currentColor;padding:4px 6px;border-radius:2px}
.mine::after{content:"yours";color:var(--bone3);position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.seam{position:relative;background:linear-gradient(to bottom, var(--char) 50%, var(--steel) 50%);display:flex;align-items:center;justify-content:center}
.spark{position:absolute;width:30px;height:30px;border-radius:50%;background:var(--bone3);border:2px solid var(--char);
  display:flex;align-items:center;justify-content:center;font:700 16px/1 var(--sans);color:var(--char)}
.spark[data-even="1"]{animation:flick .9s ease-in-out infinite alternate}
@keyframes flick{from{box-shadow:0 0 0 0 rgba(47,93,138,.5)}to{box-shadow:0 0 0 8px rgba(47,93,138,0)}}

/* the action */
.bringrow{margin-top:14px;display:grid;grid-template-columns:1fr auto;gap:10px 10px;align-items:end}
.bringk{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);margin-bottom:5px}
.bringamt input{width:100%;font:500 18px/1 var(--sans);font-variant-numeric:tabular-nums;padding:11px 10px;border:1.5px solid var(--char);
  background:var(--bone3);color:var(--char);border-radius:0}
.bringamt input:focus{outline:2px solid var(--steel);outline-offset:1px}
.bringgo{background:var(--char);color:var(--bone3);border:0;border-radius:0;padding:13px 18px;font:400 20px/1 var(--serif);white-space:nowrap}
.bringgo[data-side="2"]{background:var(--steel)}
.bringgo:disabled{opacity:.5;cursor:not-allowed}
.bringquote{grid-column:1/-1;margin:0;font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--char2)}
.bringwhy{grid-column:1/-1;margin:0;min-height:1.3em;font-size:13px;color:var(--ash)}

/* ---- the reckoning ---- */
.reckon{display:grid;gap:14px;align-content:start}
.bellcard{border:2px solid var(--char);padding:14px 14px 12px;background:var(--bone3)}
.bellk{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.bellnum{display:block;font:700 44px/1 var(--sans);font-variant-numeric:tabular-nums;margin:4px 0 8px}
.bellread{margin:0 0 10px;font:400 16.5px/1.4 var(--serif)}
.bellread b{color:var(--steel);font-weight:400}
.tally{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px solid var(--rule);padding-top:10px}
.tally div{min-width:0}
.tally dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}
.tally dd{margin:2px 0 0;font:700 17px/1.1 var(--sans);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tape,.past{border:1.5px solid var(--char);padding:12px 14px;background:var(--bone3)}
.reckonh{font:400 22px/1 var(--serif);margin:0 0 8px}
.tapelist,.pastlist{list-style:none;margin:0;padding:0;font-size:13.5px;font-variant-numeric:tabular-nums}
.tapelist li,.pastlist li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dotted var(--rule)}
.tapelist li:last-child,.pastlist li:last-child{border-bottom:0}
.quiet{color:var(--ash);justify-content:flex-start!important}
.who{font-family:var(--mono);font-size:12.5px}
.sideword{font:italic 400 15px/1 var(--serif)}
.sideword[data-side="2"]{color:var(--steel)}
.more{display:inline-block;margin-top:8px;font-size:13px}

/* ---- other views ---- */
.parchment{border:2px solid var(--char);padding:18px;background:var(--bone3)}
.parchment h1{font:400 38px/1 var(--serif);margin:0 0 12px}
.parchment h2{font:400 24px/1 var(--serif);margin:18px 0 6px}
.parchment p{max-width:62ch}
.sheettable{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.sheettable th,.sheettable td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--rule);vertical-align:top}
.sheettable th{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ash)}
.drawbtn{background:var(--steel);color:var(--bone3);border:0;padding:6px 10px;font-weight:500}
.scroller{overflow-x:auto}

/* ---- the colophon ---- */
.colophon{border-top:2px solid var(--char);padding:14px 0 6px;display:grid;gap:10px;font-size:13px}
.colok{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ash)}
.colov{font-family:var(--mono);font-size:12.5px;word-break:break-all}
.cololinks{display:flex;flex-wrap:wrap;gap:14px}
.unlit{display:none}
.colonote{margin:0;color:var(--ash)}

/* ---- the shade + kit (wallet picker) ---- */
.shade{position:fixed;inset:0;z-index:60;background:rgba(31,28,26,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.kit{background:var(--bone3);border:2px solid var(--char);width:min(420px,100%);padding:14px}
.kittop{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font:400 22px/1 var(--serif)}
.kittop button{background:transparent;border:0;font-size:22px;line-height:1}
.wellrow{display:grid;gap:8px}
.wellrow button{display:flex;align-items:center;gap:10px;background:var(--bone);border:1.5px solid var(--char);padding:10px;text-align:left}
.wellrow img{width:24px;height:24px}
.murmur{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:70;background:var(--char);color:var(--bone3);
  padding:10px 14px;font-size:14px;border-radius:3px;max-width:calc(100% - 32px)}

/* ---- widths ---- */
@media (min-width:700px){
  :root{--barh:52px}
  .strikebar{padding:0 16px}
  .sbrow{max-width:none;margin:0}
  .strikebar{display:flex;align-items:center;gap:18px}
  .sbid{height:52px;border-bottom:0;flex:0 0 auto}
  .sbclock{margin-left:8px}
  .sbca{flex:1;min-width:0;padding:0}
  .sbaddr{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}
  .cry{font-size:60px;padding-bottom:14px}
  .note{font-size:22px}
  .tinder{min-height:320px}
  .paneh{font-size:38px}
  .weight{font-size:34px}
  .bringrow{grid-template-columns:minmax(0,1fr) auto}
  .bringgo{padding:14px 24px;font-size:22px}
}
@media (min-width:1000px){
  .hearth{grid-template-columns:minmax(0,7fr) minmax(300px,4fr);gap:30px 34px;align-items:start;padding-top:8px}
  .folio{padding-top:0}
  .reckon{position:sticky;top:calc(var(--barh) + 14px)}
  .colophon{grid-column:1/-1}
  .parchment{grid-column:1/-1}
  .cry{font-size:74px}
  .note{font-size:23px;max-width:none}
  .tinder{min-height:380px}
  .paneh{font-size:44px}
  .bellnum{font-size:52px}
}
@media (min-width:1300px){
  .strikebar{padding:0 calc((100vw - 1180px) / 2)}
}