@font-face{font-family:"HB Playfair";src:url(fonts/playfair.woff) format("woff");font-weight:400 900;font-display:block}
@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{width:100%;display:flex;flex-direction:column;align-items:center;padding:0 0 6px}
.arc{position:relative}
.arc .it{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform,opacity}
.arc .it .cmp{will-change:transform}