.tarot-cosmos{position:fixed;inset:0;z-index:100000;background:radial-gradient(ellipse at 50% 40%,#292039,#080b1d 72%);color:#eee3d2;isolation:isolate;font-family:serif}
.tarot-cosmos canvas{display:block;width:100%;height:100%}
.tarot-cosmos header{position:absolute;top:max(25px,env(safe-area-inset-top));left:15px;right:15px;text-align:center;pointer-events:none;background:none;border:0;box-shadow:none}
.tarot-cosmos header>span{font:10px/1.5 sans-serif;letter-spacing:.4em;color:#c9b89d}
.tarot-cosmos h2{margin:12px 0 8px;color:#eee3d2;font-size:clamp(19px,3vw,27px);font-weight:400;letter-spacing:.14em;border:0;padding:0}
.tarot-cosmos header p{margin:0;color:#bfb5cc;font:12px/1.8 sans-serif;letter-spacing:.1em}
.tarot-cosmos footer{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:20px;right:20px;display:flex;justify-content:space-between;gap:12px;padding:0;border:0;background:none;box-shadow:none}
.tarot-cosmos button{font:12px/1.5 sans-serif;padding:11px 17px;border:1px solid #8d809b;border-radius:24px;background:#13182b;color:#eee3d2;cursor:pointer;letter-spacing:.05em}
.tarot-cosmos button:hover{background:#302940}.tarot-cosmos button:focus-visible{outline:3px solid #e7c996;outline-offset:4px}
.cosmos-labels{position:absolute;inset:0;pointer-events:none}
.cosmos-labels span{position:absolute;transform:translateX(-50%);width:115px;max-width:19vw;text-align:center;font:11px/1.5 sans-serif;color:#dfd3bd;text-shadow:0 1px 5px #000;opacity:0;transition:opacity .3s}
@media(max-width:600px){
  .tarot-cosmos header{top:24px}
  .tarot-cosmos footer{left:12px;right:12px;bottom:20px}
  .tarot-cosmos button{padding:12px 14px}
  .cosmos-labels{inset:auto 12px max(78px,calc(env(safe-area-inset-bottom) + 68px));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;max-height:30vh;overflow-y:auto;pointer-events:auto}
  .cosmos-labels span{display:none;position:static;transform:none;width:auto;max-width:none;text-align:left;font:12px/1.5 sans-serif;color:#fff6e7;background:rgba(8,11,29,.92);border-radius:5px;padding:5px 8px;overflow-wrap:anywhere}
  .cosmos-labels span.is-visible{display:block}
  .tarot-cosmos--year canvas{position:absolute;top:125px;left:0;width:100%!important;height:max(80px,calc(100% - 125px - 30vh - max(78px,calc(env(safe-area-inset-bottom) + 68px))))!important}
}
html body.urban-design .tarot-cosmos footer{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
html body.urban-design .tarot-cosmos h2{color:#eee3d2!important;text-shadow:0 1px 6px #080b1d!important}
html body.urban-design .tarot-cosmos header p{color:#ddd2e0!important;text-shadow:0 1px 5px #080b1d!important}