@font-face{font-family:"HB Newsreader";src:url(fonts/newsreader.woff) format("woff");font-weight:200 800;font-display:block;ascent-override:73.5%;descent-override:26.5%;line-gap-override:0%}
/* HbColors, CompanionTint and CompanionPaperMapper as shipped: light here, dark in the block below. */
:root{
  --paper:#FBF8F2;--halo:transparent;
  --disc-cream:#F7F4EE;--disc-clay:#E9C9B5;--disc-rose:#F2D4CF;--disc-sage:#D9DED0;
  --text1:#090A0A;--text2:#858585;--card-cream:#F7F4EE;
  --seat:rgba(43,27,20,.14);--disc-edge:rgba(60,35,15,.10);
}

/* Transparent so the native paywall shows through; the frame takes the content's height. */
html,body{margin:0;padding:0;background:transparent;overflow:hidden}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.only-dark{display:none}

/* The companion: disc, then the ink layers in CompanionAvatar's paint order. */
.cmp{position:relative;border-radius:50%;overflow:hidden;background:var(--disc-cream);box-shadow:0 0 0 1px var(--disc-edge) inset;flex:none}
.cmp[data-tint=clay]{background:var(--disc-clay)}
.cmp[data-tint=rose]{background:var(--disc-rose)}
.cmp[data-tint=sage]{background:var(--disc-sage)}
.cmp.bare{border-radius:0;background:none;box-shadow:none}
.cmp .fig{position:absolute;inset:0;color:var(--paper)}
.cmp .ly{position:absolute;inset:0}
.cmp .ly svg{display:block;width:100%;height:100%}
.cmp .eyes_open,.cmp .eyes_closed,.cmp .eyes_look,.cmp .eyes_pleased,
.cmp .mouth_rest,.cmp .mouth_pleased,.cmp .fx_star,.cmp .fx_z{display:none}

/* The caption under a picker (CompanionCaption): name in Playfair, temper in Newsreader italic. */
.cap{position:relative;text-align:center}
.cap .c{position:absolute;left:0;right:0;top:0}
.cap .nm{font-family:"HB Playfair",Georgia,serif;font-weight:500;color:var(--text1);line-height:1.3}
.cap .tp{font-family:"HB Newsreader",Georgia,serif;font-style:italic;font-weight:400;font-optical-sizing:none;color:var(--text2);line-height:1.4;white-space:nowrap;margin-top:2px}

:root.dark{
  --paper:#F1EADF;--halo:#E9DFD0;
  --disc-cream:#202022;--disc-clay:#3A2E2A;--disc-rose:#3B2B2E;--disc-sage:#2B302A;
  --text1:#F2F2F2;--text2:#9A9A9A;--card-cream:#202022;
  --seat:rgba(0,0,0,.38);--disc-edge:rgba(255,255,255,.06);
}
:root.dark .only-dark{display:block}
:root.dark .only-light{display:none}
/* The dark-mode halo: a thin paper keyline round the figure. */
:root.dark .cmp .fig{filter:drop-shadow(0 0 var(--hs) var(--halo)) drop-shadow(0 0 calc(var(--hs) * .5) var(--halo))}
@media (prefers-color-scheme:dark){
:root:not(.light){
  --paper:#F1EADF;--halo:#E9DFD0;
  --disc-cream:#202022;--disc-clay:#3A2E2A;--disc-rose:#3B2B2E;--disc-sage:#2B302A;
  --text1:#F2F2F2;--text2:#9A9A9A;--card-cream:#202022;
  --seat:rgba(0,0,0,.38);--disc-edge:rgba(255,255,255,.06);
}
:root:not(.light) .only-dark{display:block}
:root:not(.light) .only-light{display:none}
/* The dark-mode halo: a thin paper keyline round the figure. */
:root:not(.light) .cmp .fig{filter:drop-shadow(0 0 var(--hs) var(--halo)) drop-shadow(0 0 calc(var(--hs) * .5) var(--halo))}
}


.stage{display:flex;justify-content:center;padding:8px 12px 26px}
.card{position:relative;overflow:hidden;isolation:isolate}
.card .content,.card .page,.card .layer,.card .head{position:absolute;inset:0}
.card .page{will-change:transform}
.card .run{position:absolute;font-family:"HB Newsreader",Georgia,serif;line-height:1;white-space:pre}
.card .title{position:absolute;text-align:center;white-space:pre;font-family:"HB Newsreader",Georgia,serif;line-height:1}
.card .rule{position:absolute}
.card .disc{position:absolute;box-sizing:border-box}