@layer component{.hub{min-block-size:100dvh;background:var(--surface);padding-block-end:calc(var(--sp-4) + env(safe-area-inset-bottom));position:relative}.hub>.hub-leather{z-index:0;block-size:28.25rem;position:absolute;inset-block-start:0;inset-inline:0}.hub-top,.hub-games{z-index:1;max-inline-size:30rem;padding-inline:var(--pad);margin-inline:auto;position:relative}.hub-top{color:var(--leather-ink)}.hub-switches{justify-content:flex-end;gap:var(--gap-min);padding-block-start:var(--sp-2);display:flex}.hub-switch{min-inline-size:min-content;min-block-size:var(--btn-h-compact);padding-inline:var(--sp-3);font:600 var(--t-label)/var(--lh-btn) var(--ui);white-space:normal;color:var(--leather-ink);border:2px solid var(--leather-tool);border-radius:var(--r-md);background:0 0;flex:0 auto}.hub-switch--on{color:var(--leather);background:var(--leather-ink);border-color:var(--leather-ink)}.hub-switch:focus-visible,.hub-hero:focus-visible{outline:3px solid var(--leather-ink);outline-offset:2px}.hub-row:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.hub-kicker{margin-block:var(--sp-1) var(--sp-2);font:600 var(--t-label)/var(--lh-label) var(--ui);color:var(--leather-tool);text-align:center;margin-inline:0}.hub-hero{color:inherit;text-align:center;flex-direction:column;align-items:center;gap:.625rem;padding-block-start:var(--sp-1);text-decoration:none;display:flex}.hub-medallion{box-sizing:border-box;border:2px solid var(--leather-tool);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;block-size:9.25rem;inline-size:9.25rem;display:flex;position:relative}.hub-medallion:before{content:"";border:1px solid var(--leather-tool);border-radius:50%;position:absolute;inset:9px}.hub-dia{background:var(--leather-tool);block-size:10px;inline-size:10px;margin:-5px;position:absolute;transform:rotate(45deg)}.hub-dia--n{inset-block-start:0;inset-inline-start:50%}.hub-dia--s{inset-block-start:100%;inset-inline-start:50%}.hub-dia--e{inset-block-start:50%;inset-inline-start:0}.hub-dia--w{inset-block-start:50%;inset-inline-start:100%}.hub-medallion__surah{font:400 1.875rem/1.5 var(--book);color:var(--leather-ink);white-space:nowrap}.hub-medallion__surah--long{font-size:1.5rem}.hub-medallion__surah:lang(en){font:400 1rem/1.5 var(--ui)}.hub-medallion__page{font:600 1.375rem/1.3 var(--ui);color:var(--leather-tool);white-space:nowrap;font-variant-numeric:tabular-nums}.hub-hero__title{margin:var(--sp-1) 0 0;font:var(--w-hero) var(--t-hero)/var(--lh-hero) var(--ui);color:var(--leather-ink)}.hub-medallion__blurb{white-space:normal;max-inline-size:7rem;font-size:1rem;line-height:1.35}.hub-hero__go{white-space:normal;align-self:stretch;inline-size:auto;margin-block-start:.75rem}.hub-games{padding-block-start:1.75rem}.hub-games__heading{font:var(--w-heading) var(--t-heading)/var(--lh-heading) var(--ui);color:var(--ink);margin:0 0 .375rem}.hub-row{min-block-size:5.75rem;padding-block:var(--sp-2);color:var(--ink);border-block-end:var(--rule-w) solid var(--rule);align-items:center;gap:.75rem;text-decoration:none;display:flex}.hub-row[hidden]{display:none}.hub-row__text{gap:var(--sp-1);flex-direction:column;flex:auto;min-inline-size:0;display:flex}.hub-row__title{font:600 var(--t-title)/var(--lh-title) var(--ui);white-space:normal}.hub-row__foot{justify-content:space-between;align-items:center;gap:var(--sp-2);flex-wrap:wrap;display:flex}.hub-row__line{font:400 var(--t-label)/var(--lh-label) var(--ui);color:var(--ink-soft);white-space:normal;font-variant-numeric:tabular-nums;flex:10rem}.hub-row__chip.kit-btn{inline-size:auto;min-block-size:var(--btn-h-compact);padding-block:var(--sp-1);font-size:var(--t-label);white-space:normal;padding-inline:.875rem}.hub-row--resting .hub-row__chip.kit-btn{color:var(--ink-soft);background:var(--surface);border-color:var(--edge);border-style:dashed}.hub-row__mark{flex:none;justify-content:center;inline-size:3rem;display:flex}.hub-mark--grid{direction:ltr;grid-template-columns:repeat(3,14px);gap:2px;display:grid}.hub-mark__sq{background:var(--surface-accent);border-radius:3px;block-size:14px;inline-size:14px;display:block}.hub-mark--tubes{align-items:flex-end;gap:4px}.hub-mark__vial{border:2px solid var(--ink-soft);border-block-start:0;border-radius:0 0 8px 8px;flex-direction:column-reverse;gap:2px;block-size:44px;inline-size:14px;padding:2px;display:flex}.hub-mark__band{border-radius:2px;block-size:11px;display:block}.hub-pg-2{background:var(--pg-2)}.hub-pg-8{background:var(--pg-8)}.hub-pg-10{background:var(--pg-10)}}