/* Written by scripts/binder.mjs from the game's binder (mockup/build/kin.css), scoped to the landing's binder. Do not
   edit; run the script again. The binder itself (the leather, the leaves, the turn) is in site.css. */
.bx .pocket { aspect-ratio: 5 / 7; border: 1px dashed #4a4c53; background: rgba(0, 0, 0, 0.18); display: grid; place-items: center; position: relative; min-width: 0; }
.bx .pocket > span { font: 600 0.66rem/1.2 var(--f-label); letter-spacing: 0.12em; color: #5d5f65; text-align: center; padding: 6px; }
@font-face { font-family: "Sheet Hand"; src: url("/assets/fonts/la-belle-aurore-latin.woff2?v=54da154868") format("woff2"); font-display: block;
  unicode-range: U+0000-0030, U+0032-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sheet Hand"; src: url("/assets/fonts/la-belle-aurore-latin-ext.woff2?v=2a1ea8dcc5") format("woff2"); font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sheet Hand"; src: url("/assets/fonts/calligraffitti-latin.woff2?v=2d5059c07b") format("woff2"); font-display: block; unicode-range: U+0031; }
.bx .sh-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bx-page { --sh: max(10.5px, 1cqw); display: flex; flex-direction: column; }
.bx-page > .sh { flex: 1 0 auto; }
.bx .sh.sh-front { gap: 0.5em; }
.bx-page > .sh.sh-pockets { flex: 1 1 0; min-height: 0; }
.bx .sh { --prt: #b2ab9e; --prt-hi: #ccc5b7; --prt-lo: #958f85; --prt-faint: rgba(178, 171, 158, 0.34); --prt-red: #a9493b; --pen: #ece1c8; --f-hand: "Sheet Hand", cursive; display: flex; flex-direction: column; gap: 0.8em; color: var(--prt); font: 400 var(--sh)/1.3 var(--f-body); }
.bx .sh p { margin: 0; }
.bx .sh .pl { font: 600 max(9px, 0.84em)/1.15 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--prt); }
.bx .sh .sh-fine { font: italic max(9px, 0.92em)/1.3 var(--f-body); color: var(--prt-lo); }
.bx .sh .hw { display: inline-block; font: 400 1.3em/1.15 var(--f-hand); color: var(--pen); transform: rotate(var(--tilt, 0deg)) translateY(var(--lift, 0)); filter: url(#sh-ink); }
.bx .sh .hw.big { font-size: 1.95em; line-height: 1; }
.bx .sh .hw.sm { font-size: 1.12em; }
.bx .hw-mark { display: block; overflow: visible; filter: url(#sh-ink); }
.bx .hw-roman { height: 1.85em; width: auto; }
.bx .hw-mark.k-fill path { stroke-width: 1.35; }
.bx .hw-mark path, .bx .sh-ruler .hw-path { fill: none; stroke: var(--pen); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bx .sh-titlerow { flex: none; display: flex; align-items: flex-end; gap: 1.2em; }
.bx .sh .sh-title { flex: 1 1 auto; display: flex; align-items: center; gap: 0.55em; margin: 0; padding: 0; border: 0; font: 400 1.5em/1 var(--f-display); letter-spacing: 0.02em; color: var(--prt-hi); white-space: nowrap; }
.bx .sh .sh-title::after { content: ""; flex: 1; min-width: 1.5em; height: 0.18em; border-top: 1.5px solid var(--prt); border-bottom: 1px solid var(--prt-faint); filter: url(#sh-print); }
.bx .sh-namefield { flex: 0 1 42%; display: flex; align-items: flex-end; gap: 0.5em; min-width: 0; }
.bx .sh-namefield .sh-on { flex: 1; }
.bx .sh-on { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 0.35em; min-height: 1.75em; min-width: 0; padding: 0 0.2em 0.12em; }
.bx .sh-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1.3px solid var(--prt); filter: url(#sh-print); pointer-events: none; }
.bx .sh-sep { align-self: center; color: var(--prt-lo); }
.bx .sh-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8em; padding-top: 0.2em; }
.bx .sh-fld { position: relative; display: grid; justify-items: center; align-content: start; gap: 0.15em; padding: 0.45em 0.3em 0.35em; text-align: center; min-width: 0; }
.bx .sh-fld::before, .bx .sh-portrait::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--prt); outline: 1px solid var(--prt-faint); outline-offset: -0.3em; filter: url(#sh-print); pointer-events: none; }
.bx .sh-fld .pl { font-size: max(9px, 0.74em); }
.bx .sh-fv { display: grid; place-items: center; min-height: 2.2em; }
.bx .sh-fld.sm { padding: 0.35em 0.2em 0.25em; }
.bx .sh-fld.sm .sh-fv { min-height: 1.75em; }
.bx .sh-fld.sm .hw.big { font-size: 1.6em; }
.bx .sh-boxes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25em; }
.bx .sh-boxes i { position: relative; flex: none; width: 1.2em; height: 1.2em; }
.bx .sh-boxes i::before { content: ""; position: absolute; inset: 0; border: 1.4px solid var(--prt); filter: url(#sh-print); }
.bx .sh-boxes i.red::before { border-color: var(--prt-red); }
.bx .sh-boxes i.gap { margin-right: 0.4em; }
.bx .sh-boxes i.ghost::before { border-style: dotted; opacity: 0.65; }
.bx .sh-boxes i.step::before { border-width: 2.4px; }
.bx .sh-boxes i.steady::before { border-width: 2.4px; outline: 1px solid var(--prt-faint); outline-offset: 0.12em; }
.bx .sh-boxes i.added::before { border-style: dashed; }
.bx .sh-boxes .hw-mark { position: absolute; inset: -14%; width: 128%; height: 128%; }
.bx .sh-die { position: relative; display: inline-flex; gap: 0.2em; padding-bottom: 0.4em; margin-right: 0.25em; }
.bx .sh-die::after { content: ""; position: absolute; left: 0.15em; right: 0.15em; bottom: 0; height: 0.28em; border: 1.2px solid var(--prt-lo); border-top: 0; filter: url(#sh-print); }
.bx .sh-boxes.dread { align-items: flex-start; }
.bx .sh-boxes.dread > i { margin-right: 0.05em; }
.bx .sh-boxes i.torn::before { opacity: 0.55; }
.bx .sh-boxes i.steady.added::before { border-style: dashed; }
.bx .sh-pdie { position: absolute; inset: 0; width: 100%; height: 100%; }
.bx .sh-pdie rect { fill: none; stroke: var(--prt-lo); stroke-width: 1.3; filter: url(#sh-print); }
.bx .sh-pdie circle { fill: var(--prt-lo); }
.bx .sh-head { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); gap: 1.1em; }
.bx .sh-head.gifted { grid-template-columns: 7.6em minmax(0, 1fr) 4.9em; }
.bx .sh-portrait { position: relative; margin: 0; height: 8.3em; display: grid; place-items: end center; }
.bx .sh-gift { display: grid; gap: 0.25em; align-content: start; }
.bx .sh-gift .sh-slot { aspect-ratio: 70 / 120; }
.bx .sh-portrait::before { inset: 0.9em 0 0; }
.bx .sh-portrait .kin-face { position: relative; width: 108%; max-width: none; height: 108%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 0.3em 0.5em rgba(0, 0, 0, 0.55)); }
.bx .sh-who { display: flex; flex-direction: column; justify-content: space-between; gap: 0.45em; min-width: 0; }
.bx .sh-inline { grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 0.6em; }
.bx .sh-inline > .pl { padding-bottom: 0.4em; white-space: nowrap; }
.bx .sh-namebox { display: grid; min-width: 0; }
.bx .sh .hw.sh-name { font-size: 2.15em; line-height: 1; }
.bx .sh-kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 1em; }
.bx .sh-check { position: relative; display: inline-flex; align-items: center; gap: 0.45em; }
.bx .sh-cb { position: relative; flex: none; width: 1.2em; height: 1.2em; }
.bx .sh-cb::before { content: ""; position: absolute; inset: 0; border: 1.4px solid var(--prt); filter: url(#sh-print); }
.bx .sh-cb .hw-mark { position: absolute; left: -8%; top: -32%; width: 145%; height: 145%; }
.bx .sh-kinds .sh-fine { flex-basis: 100%; }
.bx .sh-came .hw { font-size: 1.12em; }
.bx .sh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65em; }
.bx .sh-stats .sh-fv { min-height: 2.3em; }
.bx .sh-beside { position: absolute; right: 0.45em; bottom: 0.3em; display: grid; justify-items: end; gap: 0.05em; }
.bx .sh-beside > span { display: flex; align-items: baseline; gap: 0.25em; }
.bx .sh-beside .pl { font-size: max(9px, 0.58em); color: var(--prt-lo); }
.bx .sh-beside .hw { font-size: 1em; line-height: 1; }
.bx .sh-num.has-beside > .sh-fv { justify-self: start; padding-left: 0.45em; }
.bx .sh-round { display: grid; grid-template-columns: repeat(3, minmax(0, 0.85fr)) minmax(0, 2.6fr); gap: 0.65em; }
.bx .sh-round > .sh-fld { grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; }
.bx .sh-round > .sh-fld > .sh-fine { font-size: max(9px, 0.8em); line-height: 1.15; }
.bx .sh-embers { display: inline-flex; gap: 0.3em; }
.bx .sh-ember { position: relative; width: 1.1em; height: 1.1em; }
.bx .sh-ember::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.4px solid var(--prt); filter: url(#sh-print); }
.bx .sh-ember.added::before { border-style: dashed; }
.bx .sh-ember.torn::before { opacity: 0.55; }
.bx .sh-ember .hw-mark { position: absolute; inset: -14%; width: 128%; height: 128%; }
.bx .sh-vial-in { display: flex; align-items: center; justify-content: center; gap: 0.5em; min-width: 0; }
.bx .sh-vt { position: relative; display: grid; grid-template-columns: auto repeat(4, minmax(1.15em, 1.45em)); align-items: center; }
.bx .sh-vt > .pl { font-size: max(9px, 0.6em); color: var(--prt-lo); text-align: right; padding-right: 0.45em; line-height: 1.3; white-space: nowrap; }
.bx .sh-vt > span:not(.pl) { font: 600 max(9px, 0.82em)/1.3 var(--f-label); color: var(--prt-lo); text-align: center; }
.bx .sh-vt > span.on { color: var(--prt-hi); }
.bx .sh-vt-ring { position: absolute; grid-row: 2 / span 3; left: -0.12em; top: -0.3em; width: calc(100% + 0.24em); height: calc(100% + 0.5em); pointer-events: none; }
.bx .sh-vt-ring path { stroke-width: 1.4; }
.bx .sh-doses { display: inline-flex; gap: 0.3em; }
.bx .sh-vt > .sh-vt-doses { grid-column: 2 / -1; display: inline-flex; gap: 0.3em; padding: 0.1em 0 0.2em 0.15em; }
.bx .sh-dose { position: relative; width: 1.15em; height: 1.15em; }
.bx .sh-dose::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.4px solid var(--prt); filter: url(#sh-print); }
.bx .sh-dose .hw-mark { position: absolute; inset: 12%; width: 76%; height: 76%; clip-path: circle(50%); }
.bx .sh-trk { display: grid; grid-template-columns: 4.7em minmax(0, 1fr) auto; align-items: center; gap: 0.15em 0.6em; }
.bx .sh-trk > .sh-fine { font-size: max(9px, 0.82em); text-align: right; }
.bx .sh-trk > .sh-fine.sh-legend { grid-column: 2 / -1; text-align: left; line-height: 1.2; }
.bx .sh-trk.sh-dread { align-items: start; }
.bx .sh-trk.sh-dread > .pl, .bx .sh-trk.sh-dread > .sh-fine:not(.sh-legend) { padding-top: 0.2em; }
.bx .sh-armour { display: grid; grid-template-columns: 4.7em repeat(4, minmax(0, 1fr)); align-items: center; gap: 0.6em; }
.bx .sh-grow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6em 1.2em; align-items: stretch; }
.bx .sh-lvl, .bx .sh-wpn { display: flex; align-items: center; gap: 0.7em; min-width: 0; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; }
.bx .sh-lvl .sh-fld { flex: none; width: 4.3em; }
.bx .sh-lvl-run { display: flex; align-items: flex-end; gap: 0.45em; min-width: 0; }
.bx .sh-lvl-run .sh-to { font-size: max(9px, 0.7em); padding-bottom: 0.25em; white-space: nowrap; }
.bx .sh-wpn { flex-direction: column; align-items: stretch; justify-content: center; gap: 0.35em; }
.bx .sh-wpn > .pl { font-size: max(9px, 0.74em); }
.bx .sh-wpn .sh-on { min-height: 1.6em; }
.bx .sh-ruler { display: block; flex: none; height: 2.3em; width: auto; overflow: visible; }
.bx .sh-ruler .pr-path { fill: none; stroke: var(--prt); stroke-width: 1.15; filter: url(#sh-print); }
.bx .sh-grow { position: relative; }
.bx .sh-learned { display: flex; flex-wrap: wrap; gap: 0.3em 0.9em; }
.bx .sh-tgroup { display: grid; gap: 0.2em; flex: 1 1 auto; min-width: 0; }
.bx .sh-tslots { display: flex; gap: 0.35em; }
.bx .sh-tslot { position: relative; flex: 1 1 5em; min-width: 0; display: grid; place-items: center; min-height: 2em; padding: 0.1em 0.3em; text-align: center; }
.bx .sh-tslot::before { content: ""; position: absolute; inset: 0; border: 1.3px solid var(--prt); filter: url(#sh-print); }
.bx .sh-tslot > i { font: italic max(9px, 0.8em)/1.1 var(--f-body); color: var(--prt-lo); }
.bx .sh-tslot .hw { font-size: 1.1em; line-height: 1.02; }
.bx .sh-pathrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 0.6em; }
.bx .sh-pathrow > .pl { padding-bottom: 0.35em; }
.bx .sh-pathrow > .sh-boxes { padding-bottom: 0.25em; }
.bx .sh-marks { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.1em; padding: 0.45em 0.75em 0.5em; }
.bx .sh-marks::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--prt); outline: 1px solid var(--prt-faint); outline-offset: -0.3em; filter: url(#sh-print); pointer-events: none; }
.bx .sh-mcol { display: grid; align-content: start; min-width: 0; }
.bx .sh-mrow { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.4em; min-height: 1.6em; padding: 0 0.1em 0.1em; }
.bx .sh-mrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--prt-faint); }
.bx .sh-mrow .hw { font-size: 1.12em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx .sh-mrow .sh-mtag { flex: none; font-size: 0.72em; }
.bx .sh-marks-legend { margin: 0.2em 0 0; }
.bx .sh-boxes.goal { flex-wrap: nowrap; gap: 0.15em; padding-bottom: 0.15em; }
.bx .sh-boxes.goal i { width: 0.85em; height: 0.85em; }
.bx .sh-foot { margin-top: auto; display: flex; align-items: center; gap: 0.8em; font: 400 max(9px, 0.82em)/1 var(--f-display); letter-spacing: 0.12em; color: var(--prt-lo); }
.bx .sh-foot::before, .bx .sh-foot::after { content: ""; flex: 1; border-top: 1px solid var(--prt-faint); filter: url(#sh-print); }
.bx .sh-ledger { display: grid; }
.bx .sh-ledger-head { display: flex; justify-content: space-between; padding: 0 0.2em 0.35em 4.6em; position: relative; }
.bx .sh-ledger-head::after, .bx .sh-ledger-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1.4px solid var(--prt); filter: url(#sh-print); }
.bx .sh-ledger-row::after { border-bottom: 1px solid var(--prt-faint); }
.bx .sh-ledger-head .pl { font-size: max(9px, 0.72em); }
.bx .sh-ledger-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.8em; padding: 0.3em 0.75em 0.3em 0.2em; }
.bx .sh-ledger-row.on { background: linear-gradient(90deg, rgba(199, 150, 80, 0.11), rgba(199, 150, 80, 0) 75%); box-shadow: inset 2px 0 0 var(--ember-dim); }
.bx .kin-who { display: flex; align-items: center; gap: 0.8em; min-width: 0; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; }
.bx .kin-who .kin-face { width: 3.7em; height: 3.7em; object-fit: contain; flex: none; }
.bx .sh-who-text { display: grid; justify-items: start; gap: 0.05em; min-width: 0; }
.bx .sh-who-text .hw { font-size: 1.5em; }
.bx .sh-who-text .sh-fine { font-size: max(9px, 0.84em); }
.bx .sh .sh-tag { font-size: max(9px, 0.66em); color: var(--prt-hi); }
.bx .sh-count { display: flex; align-items: flex-end; gap: 0.55em; }
.bx .sh-count .pl { padding-bottom: 0.3em; }
.bx .sh-count.warn .hw { color: #e3a07e; }
.bx .sh-pillars { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 0.7em; }
.bx .sh-pillars > .pl { padding-bottom: 0.35em; }
.bx .sh-lost { display: inline-block; width: 1.05em; height: 1.45em; }
.bx .sh-lost .hw-mark { width: 100%; height: 100%; }
.bx .sh-notes { display: grid; gap: 0.25em; margin-top: auto; }
.bx .sh-notes .pl { font-size: max(9px, 0.76em); }
.bx .sh-notes .sh-pen-lines { display: block; width: 100%; resize: none; border: 0; padding: 0 0.2em; background: none; color: var(--pen); font: 400 1.25em/1.7em var(--f-hand); background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--prt-faint) 0); background-size: 100% 1.7em; background-attachment: local; }
.bx .kin-box { display: grid; gap: 0.9em; border: 1px dashed transparent; border-radius: 4px; padding: 4px; margin: -4px; }
.bx .kin-shelf { display: grid; gap: 0.45em; }
.bx .sh .kin-shelf-name { font-size: max(9px, 0.74em); }
.bx .kin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2em, 1fr)); gap: 0.6em; }
.bx .kin-grid { flex: 1 1 0; min-height: 0; aspect-ratio: 138 / 210; width: auto; max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 0.75em; }
.bx .sh .kin-pocket { aspect-ratio: auto; height: 100%; border: 0; background: none; border-radius: 0.6em; display: grid; place-items: center; }
.bx .sh .kin-pocket::before, .bx .sh-slot::before { content: ""; position: absolute; inset: 0; border: 1.3px solid var(--prt-faint); border-radius: 0.6em; filter: url(#sh-print); pointer-events: none; }
.bx .sh .kin-pocket::after, .bx .sh-slot::after { content: ""; position: absolute; inset: 0.35em; border: 1px solid rgba(178, 171, 158, 0.13); border-radius: 0.4em; pointer-events: none; }
.bx .sh-pocket-n { font: 400 1.6em/1 var(--f-display); color: rgba(178, 171, 158, 0.32); }
.bx .kin-pocket .gc { position: absolute; inset: 0; z-index: 1; height: 100%; aspect-ratio: auto; }
.bx .sh .kin-pocket.taken { background: repeating-linear-gradient(135deg, rgba(178, 171, 158, 0.07) 0 0.4em, transparent 0.4em 0.8em); }
.bx .sh .kin-pocket.taken .hw { font-size: 1.05em; text-align: center; padding: 0 0.4em; }
.bx .sh-armour-gear { flex: none; }
.bx .sh .gear-note { flex: none; min-height: 1.3em; color: var(--ember); font: italic 0.95em/1.3 var(--f-body); }
.bx .sh-mini { display: flex; align-items: center; gap: 0.8em; }
.bx .sh-mini .kin-face { width: 4.6em; height: 4.6em; object-fit: contain; flex: none; }
.bx .sh-mini > div { display: grid; justify-items: start; gap: 0.15em; }
.bx .sh-mini .hw.sh-name { font-size: 2em; }
.bx .sh-levels { list-style: none; margin: 0; padding: 0; display: grid; }
.bx .sh-lv { position: relative; display: grid; grid-template-columns: 10.8em 2.5em minmax(0, 1fr); align-items: center; gap: 0.75em; padding: 0.38em 0; }
.bx .sh-lv + .sh-lv::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid var(--prt-faint); }
.bx .sh-lv-cut { display: flex; justify-content: flex-end; }
.bx .sh-seal { position: relative; width: 2.5em; height: 2.5em; display: grid; place-items: center; padding: 0; background: none; border: 0; font: 600 0.92em/1 var(--f-label); color: var(--prt); }
.bx .sh-seal::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--prt); filter: url(#sh-print); }
.bx .sh-seal::after { content: ""; position: absolute; inset: 0.22em; border-radius: 50%; border: 1px solid var(--prt-faint); }
.bx .sh-seal .hw-mark { position: absolute; inset: -16%; width: 132%; height: 132%; }
.bx .sh-lv.wait .sh-seal { color: var(--ember); }
.bx .sh-lv.wait .sh-seal::before { border-color: var(--ember); box-shadow: 0 0 0.9em rgba(199, 150, 80, 0.5); filter: none; }
.bx .sh-lv.now .sh-seal { color: var(--prt-hi); }
.bx .sh-lv.ahead { opacity: 0.58; }
.bx .sh-lv-what { display: grid; justify-items: start; gap: 0.08em; min-width: 0; }
.bx .sh-lv-what .pl { font-size: max(9px, 0.78em); }
.bx .sh-lv-what .sh-fine { font-size: max(9px, 0.86em); }
.bx .sh .hw.sh-pick { font-size: 1.18em; }
.bx .sh-kindline { display: flex; align-items: flex-end; gap: 0.8em; }
.bx .sh-kindline .sh-namebox { flex: 1; }
.bx .sh-wart { width: 3em; height: 4.2em; object-fit: contain; flex: none; filter: drop-shadow(0 0.25em 0.45em rgba(0, 0, 0, 0.6)); }
.bx .sh-wtrack { display: grid; grid-template-columns: repeat(var(--n, 9), minmax(0, 1fr)); gap: 0.35em; padding-bottom: 1.25em; }
.bx .sh-wbox { position: relative; aspect-ratio: 1; }
.bx .sh-wbox::before { content: ""; position: absolute; inset: 0; border: 1.4px solid var(--prt); filter: url(#sh-print); }
.bx .sh-wbox.step::before { border-width: 2.5px; outline: 1px solid var(--prt-faint); outline-offset: 0.16em; }
.bx .sh-wbox.carried { margin-right: 0.45em; }
.bx .sh-wbox.carried::before { border-radius: 50%; }
.bx .sh-wbox .hw-mark { position: absolute; inset: 4%; width: 92%; height: 92%; }
.bx .sh-wbox small { position: absolute; left: 50%; top: 100%; margin-top: 0.35em; transform: translateX(-50%); white-space: nowrap; font-size: 1em; line-height: 1; }
.bx .sh-wbox small .pl { font-size: max(9px, 0.62em); }
.bx .sh-steps { display: grid; grid-template-columns: var(--cols, repeat(4, minmax(0, 1fr))); gap: 0.8em; align-items: start; }
.bx .sh-step { display: grid; gap: 0.35em; align-content: start; min-width: 0; }
.bx .sh-step > .pl { font-size: max(9px, 0.66em); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx .sh-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.3em; }
.bx .sh-or { font: italic max(9px, 0.82em)/1 var(--f-body); color: var(--prt-lo); }
.bx .sh-slot { position: relative; aspect-ratio: 44 / 68; display: grid; place-items: center; text-align: center; min-width: 0; }
.bx .sh-slot-lab { position: relative; padding: 0 0.6em; font: italic max(9px, 0.8em)/1.25 var(--f-body); color: var(--prt-lo); }
.bx .sh-slot > .tc { position: absolute; inset: 0; z-index: 1; width: 100%; }
.bx .sh-slot.gone { opacity: 0.45; }
.bx .sh-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4em, 7.8em)); gap: 0.8em; }
.bx .sh-path { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.8em; }
.bx .sh-sleeves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9em; }
.bx .gc { container-type: inline-size; position: relative; aspect-ratio: 44 / 68; width: 100%; }
.bx .gc-n { position: absolute; top: -5%; right: -6%; z-index: 2; display: grid; place-items: center; min-width: 26%; aspect-ratio: 1; border-radius: 50%; background: #242427; box-shadow: 0 0 0 1.4px #8d877d, 0 2px 4px rgba(0, 0, 0, 0.5); font-style: normal; }
.bx .gc-n .hw { font: 400 15cqi/1 "Sheet Hand", cursive; color: #ece1c8; transform: rotate(var(--tilt, 0deg)); filter: url(#sh-ink); }
.bx .gc-barred { position: absolute; left: 5%; right: 5%; bottom: 7%; z-index: 2; padding: 0.25em 0.35em; border-radius: 0.3em; background: rgba(36, 36, 39, 0.86); box-shadow: 0 0 0 1px #8d877d; text-align: center; pointer-events: none; }
.bx .gc-barred .hw { font: 400 10cqi/1.15 "Sheet Hand", cursive; color: #ece1c8; filter: url(#sh-ink); }
.bx .sh-barred { margin: 0.15em 0 0; display: flex; gap: 0.5em; align-items: baseline; }
.bx .kin-face { display: block; flex: none; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55)); }
.bx .tc { container-type: inline-size; position: relative; aspect-ratio: 44 / 68; width: 100%; padding: 3px; border-radius: 9px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); box-shadow: 0 0 0 1px rgba(170, 165, 155, 0.18) inset; }
.bx .tc.tarot { aspect-ratio: 70 / 120; }
.bx .dp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: calc(var(--mm, 3px) * 0.6) calc(var(--mm, 3px) * 1.2); vertical-align: middle; }
.bx .dp-dice { display: inline-flex; align-items: center; gap: calc(var(--mm, 3px) * 0.7); }
.bx .dp-die { width: calc(var(--mm, 3px) * 5.2); height: calc(var(--mm, 3px) * 5.2); flex: none; display: block; filter: drop-shadow(0 calc(var(--mm, 3px) * 0.25) calc(var(--mm, 3px) * 0.3) rgba(30, 22, 12, 0.35)); }
.bx .dp-then { width: calc(var(--mm, 3px) * 3); height: calc(var(--mm, 3px) * 5); flex: none; display: block; color: var(--ink-2, #4a4339); }
.bx .dp-note { color: var(--ink-2, #4a4339); font-size: 0.9em; line-height: 1.15; }
.bx .tc .cd-svg { display: block; }
.bx .sh.cs { gap: 0.55em; }
.bx .cs-print { display: flex; gap: 1.2em; justify-content: flex-end; margin-top: -0.3em; }
.bx .cs-flow { display: flex; flex-direction: column; gap: 0.8em; }
.bx .cs-sec { display: flex; flex-direction: column; gap: 0.45em; break-inside: avoid; }
.bx .sh .cs-st { margin: 0; font: 400 1.18em/1.1 var(--f-display); color: var(--prt-hi); border-bottom: 1px solid var(--prt-faint); padding-bottom: 0.15em; }
.bx .cs-blk { display: flex; flex-direction: column; gap: 0.25em; break-inside: avoid; }
.bx .cs-bh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.8em; }
.bx .sh .cs-note { font-size: max(9px, 0.82em); line-height: 1.25; }
.bx .cs-b { position: relative; flex: none; display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; border: 1.2px solid var(--prt); font-style: normal; }
.bx .cs-b .hw-mark, .bx .cs-r .hw-mark { position: absolute; inset: -18%; width: 136%; height: 136%; }
.bx .cs-r { position: relative; display: inline-grid; place-items: center; min-width: 1.7em; height: 1.45em; font: 600 max(9px, 0.82em)/1 var(--f-label); font-style: normal; color: var(--prt); }
.bx .cs-r .hw-mark { inset: -12% -6%; width: 112%; height: 124%; }
.bx .cs-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.3em 0.28em; }
.bx .cs-tk, .bx .cs-gn { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1em; }
.bx .cs-tk small, .bx .cs-gn small { font: 600 max(9px, 0.7em)/1 var(--f-label); color: var(--prt-lo); letter-spacing: 0.04em; }
.bx .cs-track .cs-li { margin-left: 0.6em; }
.bx .cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(1.9em, 1fr)); gap: 0.25em 0.15em; }
.bx .cs-tl { display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); gap: 0.2em 0.8em; }
.bx .cs-ti { display: inline-flex; align-items: center; gap: 0.35em; min-width: 0; }
.bx .cs-l { font: max(9px, 0.88em)/1.15 var(--f-body); color: var(--prt); }
.bx .cs-table[data-t="companies"] .cs-l, .bx .cs-table[data-t="beasts"] td:nth-of-type(4) .cs-l { white-space: nowrap; }
.bx .cs-ls { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: 0.15em 1em; }
.bx .cs-li { display: flex; align-items: flex-end; gap: 0.45em; min-width: 0; }
.bx .cs-li > .cs-l { flex: none; white-space: nowrap; padding-bottom: 0.15em; }
.bx .cs-ln { position: relative; flex: 1; min-width: 3em; min-height: 1.45em; display: flex; align-items: flex-end; padding: 0 0.2em 0.05em; }
.bx .cs-ln::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--prt); }
.bx .cs-li .sh-ruler { flex: none; height: 1.45em; width: auto; }
.bx .cs-tab { border-collapse: collapse; width: 100%; font: inherit; color: inherit; }
.bx .cs-tab th, .bx .cs-tab td { font: inherit; }
.bx .cs-tab th, .bx .cs-tab td { padding: 0.18em 0.35em 0.18em 0; vertical-align: middle; text-align: left; border-bottom: 1px solid var(--prt-faint); }
.bx .cs-tab thead th { border-bottom: 1px solid var(--prt); }
.bx .cs-tab thead .pl { font-size: max(9px, 0.7em); }
.bx .cs-rl { font: 400 max(9px, 0.95em)/1.15 var(--f-body); color: var(--prt-hi); white-space: nowrap; }
.bx .cs-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2em 0.6em; }
.bx .cs-cell > .cs-li { flex: 1; }
.bx .cs-table[data-t="companies"] .cs-cell, .bx .cs-table[data-t="beasts"] td:nth-of-type(3) .cs-cell, .bx .cs-table[data-t="beasts"] td:nth-of-type(4) .cs-cell { flex-wrap: nowrap; gap: 0.2em 0.35em; }
.bx .cs-table[data-t="beasts"] td:nth-of-type(4) .cs-cell { gap: 0.1em 0.5em; }
.bx .cs-table[data-t="beasts"] td:nth-of-type(5) .cs-cell { gap: 0.1em 0.7em; }
.bx .cs-table[data-t="names"] td:nth-of-type(3n+1) { width: 36%; }
.bx .cs-table[data-t="beasts"] .cs-cell .cs-l { font-size: max(9px, 0.8em); }
.bx #binder-left .cs-table[data-t="beasts"] td:nth-of-type(4) .cs-cell { flex-direction: column; align-items: flex-start; gap: 0.15em; }
.bx .cs-road { gap: 0.2em; }
.bx .cs-road .cs-bh .sh-fine { font-size: max(9px, 0.8em); }
.bx .cs-rx { display: inline-flex; flex-wrap: wrap; gap: 0.2em 0.9em; margin-left: auto; }
.bx .cs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5em, 1fr)); gap: 0.12em 0.7em; }
.bx .cs-card { display: flex; align-items: center; gap: 0.32em; padding: 0.1em 0; border-bottom: 1px solid var(--prt-faint); }
.bx .cs-card b { flex: none; width: 1.9em; font: 600 max(9px, 0.78em)/1 var(--f-label); color: var(--prt-hi); letter-spacing: 0.04em; }
.bx .cs-res { display: inline-flex; gap: 0.08em; }
.bx .cs-res + .cs-res { margin-left: 0.2em; padding-left: 0.28em; border-left: 1px solid var(--prt-faint); }
.bx .cs-card .cs-b { width: 0.95em; height: 0.95em; }
.bx .cs-foot { margin-top: 0.4em; }
.bx #cs-printed { display: none; }
.bx html.cs-printing #cs-printed { display: block; }
.bx html.cs-printing body > *:not(#cs-printed) { display: none !important; }
.bx #cs-printed .cs-a4 { box-sizing: border-box; width: 210mm; height: 296.5mm; padding: 8mm 10mm 5mm; overflow: hidden; background: #fbf9f4; break-after: page; page-break-after: always; }
.bx #cs-printed .sh { --prt: #2f2c27; --prt-hi: #1d1b18; --prt-lo: #5d584f; --prt-faint: rgba(47, 44, 39, 0.3); --pen: #3b3f48; --sh: 8pt; color: var(--prt); gap: 0.35em; }
.bx #cs-printed .sh .pl { font-size: 7.6pt; letter-spacing: 0.1em; }
.bx #cs-printed .sh .sh-fine, .bx #cs-printed .sh .cs-note { font-size: 7.5pt; line-height: 1.2; }
.bx #cs-printed .cs-l, .bx #cs-printed .cs-rl { font-size: 8pt; }
.bx #cs-printed .cs-tk small, .bx #cs-printed .cs-gn small, .bx #cs-printed .cs-r { font-size: 7.5pt; }
.bx #cs-printed .cs-b { width: 3mm; height: 3mm; }
.bx #cs-printed .cs-flow { gap: 0.4em; }
.bx #cs-printed .cs-sec { gap: 0.2em; }
.bx #cs-printed .cs-blk { gap: 0.15em; }
.bx #cs-printed .cs-tl, .bx #cs-printed .cs-ls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.1em 0.8em; }
.bx #cs-printed .cs-ln { min-height: 0; height: 1.6em; }
.bx #cs-printed .cs-ln .hw { line-height: 1; white-space: nowrap; }
.bx #cs-printed .cs-li .sh-ruler { height: 1.4em; }
.bx #cs-printed .cs-tab th, .bx #cs-printed .cs-tab td { padding-top: 0.05em; padding-bottom: 0.05em; }
.bx #cs-printed .cs-table[data-t="beasts"] td:nth-of-type(5) .cs-cell { gap: 0.05em 0.6em; }
.bx #cs-printed .cs-more { column-count: 2; column-gap: 6mm; margin-top: 0.6em; }
.bx #cs-printed .cs-front .cs-flow { display: block; column-count: 2; column-gap: 6mm; }
.bx #cs-printed .cs-sec { margin-bottom: 0.3em; break-inside: auto; }
.bx #cs-printed .cs-st { break-after: avoid; }
.bx #cs-printed .cs-front .cs-sec[data-s="moon"], .bx #cs-printed .cs-front .cs-sec[data-s="beasts"] { column-span: all; }
.bx #cs-printed .cs-back .cs-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bx #cs-printed .cs-back .cs-road { margin-top: 0.25em; }
.bx #cs-printed .cs-a4:last-child { break-after: auto; page-break-after: auto; }
.bx #cs-printed .cs-back .cs-cards { row-gap: 0; }
.bx #cs-printed .cs-back .cs-card { padding: 0; line-height: 1; }
.bx #cs-printed .cs-table[data-t="companies"] .cs-cell { gap: 0.15em 0.25em; }
.bx #cs-printed .cs-table[data-t="companies"] .cs-r { min-width: 1.25em; }
.bx #cs-printed .cs-table[data-t="companies"] th, .bx #cs-printed .cs-table[data-t="companies"] td { padding-right: 0.15em; }
.bx .sh-tarot-big { position: fixed; inset: 0; z-index: 190; display: grid; place-items: center; align-content: center; gap: 18px; padding: 24px; background: rgba(6, 6, 7, 0.82); opacity: 0; }
.bx .sh-tarot-big.on { opacity: 1; }
.bx .stb-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; --tw: min(340px, 42vw, calc((100vh - 140px) * 70 / 120)); }
.bx .stb-faces > .tc { width: var(--tw); }
.bx .stb-figure { width: var(--tw); aspect-ratio: 70 / 120; height: auto; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.7)); }
/* what the binder set inline */
.bx .bs0 { --tilt:0.76deg;--lift:-0.050em; }
.bx .bs1 { --tilt:-0.69deg;--lift:-0.047em; }
.bx .bs2 { --tilt:0.35deg;--lift:0.027em; }
.bx .bs3 { --tilt:0.56deg;--lift:0.063em; }
.bx .bs4 { --tilt:-0.15deg;--lift:-0.060em; }
.bx .bs5 { --tilt:-0.81deg;--lift:0.047em; }
.bx .bs6 { --tilt:1.01deg;--lift:0.005em; }
.bx .bs7 { --tilt:0.34deg;--lift:0.014em; }
.bx .bs8 { --tilt:0.49deg;--lift:-0.049em; }
.bx .bs9 { --tilt:0.84deg;--lift:0.016em; }
.bx .bs10 { grid-column:2 / span 1; }
.bx .bs11 { --tilt:0.22deg;--lift:-0.019em; }
.bx .bs12 { --tilt:1.05deg;--lift:0.006em; }
.bx .bs13 { --tilt:0.75deg;--lift:-0.060em; }
.bx .bs14 { --tilt:-0.81deg;--lift:-0.043em; }
.bx .bs15 { --w:60; }
.bx .bs16 { --tilt:-0.30deg;--lift:0.057em; }
.bx .bs17 { --tilt:-0.37deg;--lift:-0.060em; }
.bx .bs18 { --tilt:0.19deg;--lift:0.031em; }
.bx .bs19 { --tilt:-0.26deg;--lift:0.060em; }
.bx .bs20 { --tilt:1.13deg;--lift:0.042em; }
.bx .bs21 { --tilt:-1.03deg;--lift:0.027em; }
.bx .bs22 { --tilt:0.76deg;--lift:-0.012em; }
.bx .bs23 { --tilt:-0.40deg;--lift:0.005em; }
.bx .bs24 { --tilt:0.76deg;--lift:-0.050em; }
.bx .bs25 { --tilt:1.06deg;--lift:0.049em; }
.bx .bs26 { --tilt:-0.64deg;--lift:0.063em; }
.bx .bs27 { --tilt:0.91deg;--lift:0.052em; }
.bx .bs28 { --tilt:-1.07deg;--lift:0.063em; }
.bx .bs29 { --tilt:-0.75deg;--lift:-0.001em; }
.bx .bs30 { --tilt:0.64deg;--lift:-0.017em; }
.bx .bs31 { --tilt:0.44deg;--lift:-0.038em; }
.bx .bs32 { --tilt:-1.20deg;--lift:0.037em; }
.bx .bs33 { --tilt:-0.01deg;--lift:-0.034em; }
.bx .bs34 { --tilt:-0.63deg;--lift:-0.014em; }
.bx .bs35 { --tilt:-0.42deg;--lift:0.050em; }
.bx .bs36 { --tilt:-0.36deg;--lift:0.022em; }
.bx .bs37 { --tilt:0.76deg;--lift:-0.050em; }
.bx .bs38 { --tilt:-0.17deg;--lift:-0.050em; }
.bx .bs39 { --tilt:-0.35deg;--lift:0.039em; }
.bx .bs40 { --tilt:-1.11deg;--lift:-0.022em; }
.bx .bs41 { --tilt:0.22deg;--lift:-0.019em; }
.bx .bs42 { --tilt:1.05deg;--lift:0.006em; }
.bx .bs43 { --tilt:0.75deg;--lift:-0.060em; }
.bx .bs44 { --tilt:-0.81deg;--lift:-0.043em; }
.bx .bs45 { --tilt:0.76deg;--lift:-0.050em; }
.bx .bs46 { --w:27; }
.bx .bs47 { --tilt:1.11deg;--lift:-0.012em; }
.bx .bs48 { --w:41; }
.bx .bs49 { --tilt:0.10deg;--lift:-0.041em; }
.bx .bs50 { --w:60; }
.bx .bs51 { --w:74; }
.bx .bs52 { --w:93; }
.bx .bs53 { --w:107; }
.bx .bs54 { --tilt:-0.30deg;--lift:0.057em; }
.bx .bs55 { --n:10; }
.bx .bs56 { --cols:minmax(0, 1fr) minmax(0, 2.15fr) minmax(0, 1fr) minmax(0, 1fr); }