/* Generated by npm run build:design. Edit _shared/design-system. */
/* Project Lazarus design contract. Build into each adopting site; no runtime cross-site dependency. */
:root, .lz-ui {
  --lz-original: #9dff2b;
  --lz-life: #e6b84a;
  --lz-ink: #080808;
  --lz-surface: #121212;
  --lz-raised: #1c1c1c;
  --lz-text: #f4f1e8;
  --lz-secondary: #d2cec1;
  --lz-muted: #a8a293;
  --lz-border: #343a32;
  /* Homepage grain, shared locally by adopting surfaces. */
  --lz-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.045'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --lz-danger: #ff9b91;
  --lz-accent: var(--lz-original);
  --lz-display: Anton, Impact, sans-serif;
  --lz-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
  --lz-body: Inter, Arial, sans-serif;
  --lz-mono: "JetBrains Mono", monospace;
  --lz-size-hero: clamp(44px, 7vw, 104px);
  --lz-size-section: clamp(32px, 4vw, 56px);
  --lz-size-panel: clamp(24px, 2.5vw, 32px);
  --lz-size-body: 16px;
  --lz-size-ui: 16px;
  --lz-size-caption: 13px;
  --lz-size-metric: clamp(36px, 4vw, 48px);
  --lz-leading-display: 1.05;
  --lz-leading-heading: 1.2;
  --lz-leading-body: 1.65;
  --lz-space-1: 4px;
  --lz-space-2: 8px;
  --lz-space-3: 12px;
  --lz-space-4: 16px;
  --lz-space-6: 24px;
  --lz-space-8: 32px;
  --lz-space-12: 48px;
  --lz-radius: 2px;
  --lz-feedback: 180ms;
  --lz-press: 100ms;
  --lz-settle: cubic-bezier(.22, 1, .36, 1);
  color: var(--lz-text);
  font-family: var(--lz-body);
}
.lz-ui [data-gamemode="life"], .lz-ui[data-gamemode="life"] { --lz-accent: var(--lz-life); }
.lz-ui [hidden] { display: none !important; }
.lz-ui :focus-visible { outline: 2px solid var(--lz-accent); outline-offset: 4px; }
.lz-ui .lz-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* These are the same primitives used by the account and the local component showroom. */
.lz-ui .lz-logo { display: block; width: auto; height: 50px; max-width: 100%; object-fit: contain; }
.lz-ui .lz-kicker { display: block; color: var(--lz-accent); font: 700 12px/1.5 var(--lz-heading); text-transform: uppercase; letter-spacing: .18em; margin-bottom: 8px; }
.lz-ui .lz-title { font: 400 var(--lz-size-hero)/var(--lz-leading-display) var(--lz-display); text-transform: uppercase; letter-spacing: .01em; margin: 0; }
.lz-ui .lz-panel { background: var(--lz-surface); border: 1px solid var(--lz-border); border-radius: var(--lz-radius); padding: clamp(20px, 3vw, 32px); min-width: 0; }
/* Static material layers sit behind content and never intercept controls. */
.lz-ui .lz-surface { position: relative; isolation: isolate; box-shadow: inset 0 1px rgba(223,235,210,.09), inset 0 -1px rgba(0,0,0,.55); }
.lz-ui .lz-surface::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-image: linear-gradient(120deg, rgba(185,201,168,.035), transparent 40%, rgba(0,0,0,.25)), var(--lz-surface-lines, linear-gradient(0deg, transparent, transparent)), var(--lz-grain); mask-image: linear-gradient(115deg, #000, rgba(0,0,0,.35) 50%, #000); }
.lz-ui .lz-surface--grid { --lz-surface-lines: repeating-linear-gradient(0deg, rgba(179,199,166,.035) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(179,199,166,.035) 0 1px, transparent 1px 32px); }
.lz-ui .lz-surface--art::after { content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none; background-image: linear-gradient(180deg, rgba(9,13,9,.45), rgba(9,13,9,.86) 55%, #0d120d 95%), var(--lz-surface-art); background-position: center, var(--lz-art-position, 70% 35%); background-size: cover; }
.lz-ui :is(.lz-button, .account-button) { --lz-control-edge: var(--lz-muted); --lz-control-fill: var(--lz-surface); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; max-width: 100%; padding: 13px 22px; border: 0; border-radius: 0; background: none; color: var(--lz-text); font: 700 var(--lz-size-ui)/1.3 var(--lz-heading); text-transform: uppercase; letter-spacing: .065em; text-decoration: none; text-align: center; cursor: pointer; transition: transform var(--lz-feedback) var(--lz-settle); }
/* Cut the decorative layers, not the control: the focus outline stays intact. */
.lz-ui :is(.lz-button, .account-button)::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: var(--lz-control-edge); opacity: .65; transition: opacity var(--lz-feedback) var(--lz-settle); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.lz-ui :is(.lz-button, .account-button)::after { content: ''; position: absolute; inset: 1px; z-index: -1; pointer-events: none; background: linear-gradient(115deg, rgba(220,239,198,.08), transparent 55%), var(--lz-grain), var(--lz-control-fill); box-shadow: inset 3px 0 var(--lz-accent), inset 0 1px rgba(255,255,255,.08); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.lz-ui :is(.lz-button--primary, .account-button--primary) { --lz-control-edge: var(--lz-accent); --lz-control-fill: var(--lz-accent); color: #112007; padding-right: 48px; }
.lz-ui :is(.lz-button--primary, .account-button--primary)::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23112007' stroke-width='1.8'%3E%3Cpath d='m5 5 5 5-5 5m5-10 5 5-5 5'/%3E%3C/svg%3E") right 14px center / 18px 18px no-repeat, linear-gradient(115deg, rgba(255,255,255,.2), transparent 65%), var(--lz-grain), var(--lz-control-fill); box-shadow: inset 0 -3px rgba(10,25,3,.18); }
.lz-ui :is(.lz-button, .account-button):disabled { opacity: .45; cursor: not-allowed; }
.lz-ui .lz-button__icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #4e633b; background: #1b2a12; color: var(--lz-accent); }
.lz-ui .lz-button__icon svg { width: 23px; height: 23px; }
.lz-ui .lz-button__copy { display: grid; gap: 4px; text-align: left; min-width: 0; }
.lz-ui .lz-button__copy small { color: var(--lz-muted); font: 600 12px/1.3 var(--lz-heading); letter-spacing: .12em; }
.lz-ui .lz-button__arrow { width: 16px; height: 16px; color: var(--lz-accent); transition: transform var(--lz-feedback) var(--lz-settle); }
.lz-ui .account-identity__settings { display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 12px; padding: 12px 18px; min-height: 66px; }
@media(hover:hover) and (pointer:fine) {
  .lz-ui :is(.lz-button, .account-button):hover:not(:disabled):not(:focus-visible) { --lz-control-edge: var(--lz-accent); transform: translateY(-2px); }
  .lz-ui :is(.lz-button--primary, .account-button--primary):hover:not(:disabled) { --lz-control-edge: var(--lz-text); }
  .lz-ui :is(.lz-button, .account-button):hover .lz-button__arrow { transform: translateX(3px); }
}
.lz-ui :is(.lz-button, .account-button):active:not(:disabled):not(:focus-visible) { transform: translateY(1px); }
.lz-ui :is(.lz-button, .account-button):focus-visible { transform: none; transition: none; }
.lz-ui :is(.lz-button, .account-button):focus-visible .lz-button__arrow { transform: none; transition: none; }
.lz-ui .lz-tabs { display: flex; position: relative; isolation: isolate; gap: 24px; border-bottom: 1px solid var(--lz-border); }
.lz-ui .lz-tabs > :is(a, button) { position: relative; z-index: 1; display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 48px; padding: 12px 4px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--lz-muted); font: 700 17px/1.3 var(--lz-heading); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; cursor: pointer; }
.lz-ui .lz-tabs > :is([aria-current="page"], [aria-pressed="true"]) { color: var(--lz-accent); border-bottom-color: var(--lz-accent); }
.lz-ui .lz-tabs > :is(a, button):hover { color: var(--lz-text); }
.lz-ui .lz-indicator { position: absolute; pointer-events: none; bottom: -1px; left: 0; width: 100%; height: 3px; transform-origin: left center; background: var(--lz-accent); z-index: 0; }
.lz-ui .lz-tabs[data-lz-enhanced] > :is(a, button) { border-bottom-color: transparent; }
.lz-ui .lz-switch { gap: 4px; padding: 4px; border: 1px solid #48513e; border-radius: 0; width: fit-content; background: #080c08; box-shadow: inset 0 1px rgba(223,235,210,.06); }
.lz-ui .lz-switch > button { min-height: 44px; min-width: 90px; padding: 9px 16px; font-size: 15px; border: 0; }
.lz-ui .lz-switch > [aria-pressed="true"] { color: #11170c; background: var(--lz-accent); }
.lz-ui .lz-switch > button[aria-pressed="true"]:hover { color: #11170c; }
.lz-ui .lz-switch[data-lz-enhanced] > button { background: none; }
.lz-ui .lz-switch .lz-indicator { height: calc(100% - 8px); bottom: 4px; }
.lz-ui .lz-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.lz-ui .lz-metric { min-width: 0; border-left: 1px solid var(--lz-border); padding-left: 24px; }
.lz-ui .lz-metric:first-child { padding-left: 0; border: 0; }
.lz-ui .lz-metric > span { color: var(--lz-muted); font: 600 12px var(--lz-heading); letter-spacing: .12em; text-transform: uppercase; }
.lz-ui .lz-metric strong { display: block; font: 400 clamp(30px, 4vw, 48px)/1.15 var(--lz-display); margin-top: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lz-ui [data-lz-metric] { position: relative; }
.lz-ui :is(.lz-metric, .profile-stat-tile) :is(.lz-number-visual, .lz-number-reserve) { display: block; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
.lz-ui .lz-number-visual { position: absolute; inset: 0; }
.lz-ui .lz-number-reserve { visibility: hidden; }
.lz-ui .lz-disclosure { border-top: 1px solid var(--lz-border); margin-top: 20px; }
.lz-ui .lz-disclosure > summary { display: flex; align-items: center; gap: 12px; justify-content: space-between; min-height: 48px; padding: 14px 0; cursor: pointer; list-style: none; color: var(--lz-text); font: 600 15px/1.5 var(--lz-body); }
.lz-ui .lz-disclosure > summary::-webkit-details-marker { display: none; }
.lz-ui .lz-disclosure > summary::after { content: '+'; font: 500 24px var(--lz-heading); color: var(--lz-accent); }
.lz-ui .lz-disclosure[open] > summary::after { content: '−'; }
.lz-ui .lz-disclosure[data-lz-disclosure] > summary::after { content: none; }
.lz-ui .lz-chevron { flex: 0 0 18px; width: 18px; height: 18px; color: var(--lz-accent); }
.lz-ui .lz-disclosure[open] .lz-chevron { transform: rotate(180deg); }
.lz-ui .lz-disclosure__content { padding-bottom: 16px; }
.lz-ui .lz-disclosure__content p { color: var(--lz-muted); font: 400 14px/1.7 var(--lz-body); }
.lz-ui .lz-bar { margin-top: 18px; }
.lz-ui .lz-bar__label { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; font-size: 14px; }
.lz-ui .lz-bar__track { height: 9px; background: var(--lz-raised); overflow: hidden; }
.lz-ui .lz-bar__fill { display: block; height: 100%; background: var(--lz-accent); transform-origin: left center; }
.lz-ui .lz-ranking { display: grid; grid-template-columns: 32px 1fr auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--lz-border); }
.lz-ui .lz-ranking b { font: 700 24px var(--lz-heading); color: var(--lz-accent); }
.lz-ui .lz-ranking small { display: block; margin-top: 5px; color: var(--lz-muted); }
.lz-ui .lz-state { border-left: 3px solid var(--lz-accent); background: var(--lz-raised); padding: 20px; color: var(--lz-muted); line-height: 1.6; }
.lz-ui .lz-state--error { border-color: var(--lz-danger); }
.lz-ui .lz-dialog { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(420px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; box-sizing: border-box; padding: 32px; border: 0; border-left: 1px solid var(--lz-border); background: var(--lz-surface); color: var(--lz-text); }
.lz-ui .lz-dialog::backdrop { background: rgba(0,0,0,.7); }
@media(max-width:600px) {
  .lz-ui .lz-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lz-ui .lz-metric:nth-child(odd) { border: 0; padding-left: 0; }
}
@media(prefers-reduced-motion:reduce) {
  .lz-ui :is(.lz-button, .account-button), .lz-ui .lz-button__arrow { transition: none; transform: none !important; }
}
@media(max-width:480px) {
  .lz-ui .account-identity__settings { width: 100%; font-size: 16px; }
  .lz-ui .account-sections { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .lz-ui .account-sections > a { display: grid; gap: 4px; min-height: 66px; padding: 12px 2px; font-size: 13px; letter-spacing: .025em; }
}
@media(max-width:360px) { .lz-ui .account-sections > a { font-size: 12px; } }

/* Complete action family: the edge lights first, then the control settles. */
.lz-ui :is(.lz-button,.account-button):is(:hover,:focus-visible)::before { opacity: 1; }
.lz-ui :is(.lz-button,.account-button):active:not(:disabled):not(:focus-visible) { transition-duration: var(--lz-press); }
.lz-ui .lz-button--danger { --lz-accent: var(--lz-danger); --lz-control-edge: var(--lz-danger); }
.lz-ui .lz-button--text { padding-inline: 4px; color: var(--lz-accent); text-decoration: underline; text-underline-offset: 5px; }
.lz-ui .lz-button--text::before, .lz-ui .lz-button--text::after { content: none; }
.lz-ui .lz-button--icon { width: 48px; padding: 12px; }
.lz-ui .lz-button--icon svg { width: 22px; height: 22px; }
.lz-ui :is(.lz-button,.account-button)[aria-busy="true"] { cursor: progress; }
.lz-ui :is(.lz-button,.account-button):disabled::before { opacity: .65; }
.lz-ui :is(.lz-button,.account-button):focus-visible::before { transition: none; }
@media(prefers-reduced-motion:reduce) {
  .lz-ui :is(.lz-button,.account-button)::before { transition: none; }
}