@keyframes panel-reveal {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

* { box-sizing: border-box; }


[hidden] { display: none !important; }


.answer { margin: 0; font-size: var(--type-body); line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.answer.is-reserved { min-height: 1.4em; }
.answer.is-refusal { color: var(--bad-ink); }
.answer:empty:not(.is-reserved) { display: none; }
:root[data-input="touch"] .answer { font-size: var(--touch-floor-ui); }


:root { -webkit-tap-highlight-color: transparent; }


:root { accent-color: var(--ink-1); caret-color: var(--ink-1); }
::selection { background: color-mix(in oklab, var(--ink-1) 28%, var(--surface-ground)); color: var(--ink-1); }


:focus-visible {
  outline: calc(var(--ring-w) / var(--fit)) solid var(--focus);
  outline-offset: calc(var(--ring-off) / var(--fit));
}

body {
  margin: 0;
  background: var(--surface-ground);
  color: var(--ink-1);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1 { font-size: 20px; margin: 0 0 8px; }
h3 { font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin: 0 0 6px; }
pre { font-family: var(--mono); font-size: var(--type-label); white-space: pre-wrap; margin: 4px 0; }
.mono { font-family: var(--mono); font-size: var(--type-label); color: var(--ink-2); }
.empty { color: var(--ink-2); font-style: italic; }
.lede { color: var(--ink-2); max-width: 60ch; }






.ui-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}





.ui-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--step-2);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-2);
  color: var(--ink-1);
  font: inherit;
  font-size: var(--type-body);
  cursor: pointer;
  
  transition:
    background-color var(--motion-1) var(--ease-inout),
    border-color var(--motion-1) var(--ease-inout),
    translate var(--motion-1) var(--ease-standard),
    scale var(--motion-2) var(--ease-release);
}


.ui-btn::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: max(100%, var(--touch));
  height: calc(max(100%, var(--touch)) + 2px);
  transform: translate(-50%, calc(-50% + 1px));
}

.ui-btn-sm { height: var(--control-sm); padding: 0 var(--step-2); }
.ui-btn-md { height: var(--control-md); padding: 0 var(--step-3); }
.ui-btn-lg {
  height: var(--control-lg);
  padding: 0 var(--step-5);
  font-size: var(--type-read);
}


@media (hover: hover) {
  .ui-btn:not(.is-blocked):hover { background: var(--line-2); translate: 0 -1px; }
}

.ui-btn-primary {
  background: var(--decide);
  border-color: var(--decide);
  color: var(--surface-ground);
  font-weight: 600;
}
@media (hover: hover) { .ui-btn-primary:not(.is-blocked):hover { border-color: var(--decide-ink); background: var(--decide-ink); } }

.ui-btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent, oklch(100% 0 0 / 0.55), transparent);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .ui-btn-primary:not(.is-blocked):hover::before { animation: ui-light var(--motion-4) var(--ease-standard) 1 both; }
}
@keyframes ui-light {
  0% { opacity: 0; transform: translateX(0); }
  25% { opacity: 0.35; }
  75% { opacity: 0.35; }
  100% { opacity: 0; transform: translateX(233%); }
}
.ui-btn-quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.ui-btn-danger { color: var(--bad-ink); border-color: var(--bad-ink); }
@media (hover: hover) {
  .ui-btn-quiet:not(.is-blocked):hover { background: var(--surface-2); }
  .ui-btn-danger:not(.is-blocked):hover { background: color-mix(in oklab, var(--bad) 14%, var(--surface-2)); }
}


.ui-btn:active:not(.is-blocked) { scale: var(--tap); transition: scale var(--press-in) var(--ease-standard), background-color var(--motion-1) var(--ease-inout), border-color var(--motion-1) var(--ease-inout); }
.ui-btn:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }

button.ui-btn.is-blocked,
button.sb-move.is-blocked,
button[aria-busy="true"][aria-disabled="true"],
button[aria-disabled="true"]:is(.act, .cand, .select, .ask-step, .ask-option, .predict-btn, .pp-step, .decide-confirm, .decide-main, .compose-send, .free-chain-btn, .help-tour-btn, .rewind-btn) {
  color: var(--ink-3);
  background: var(--surface-1);
  border: 1px dashed var(--line-1);
  box-shadow: none;
  opacity: 1;
  scale: 1;
  filter: none;
  cursor: not-allowed;
}

button[aria-busy="true"][aria-disabled="true"] { cursor: progress; }





.ui-skeleton { display: grid; gap: var(--step-2); }
.ui-skeleton-tile { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.ui-skeleton-bar {
  display: block;
  height: 14px;
  border-radius: var(--round-1);
  background: linear-gradient(
    90deg,
    var(--surface-1) 0%,
    var(--surface-2) 50%,
    var(--surface-1) 100%
  );
  background-size: 200% 100%;
  animation: ui-shimmer var(--loop-wait) linear infinite;
}
.ui-skeleton-tile .ui-skeleton-bar { height: 96px; border-radius: var(--round-2); }
.ui-skeleton-line .ui-skeleton-bar:last-child { width: 60%; }

@keyframes ui-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}





.ui-empty {
  display: grid;
  justify-items: center;
  gap: var(--step-2);
  padding: var(--step-6) var(--step-4);
  text-align: center;
  color: var(--ink-2);
}

.ui-empty-art { display: grid; justify-items: center; gap: var(--step-2); margin-bottom: var(--step-2); }
.ui-empty-art .brand-mark { width: 48px; height: auto; }
.ui-empty-seam { display: block; width: 96px; height: 2px; background: linear-gradient(90deg, transparent, var(--rift-light) 30%, var(--rift-light) 70%, transparent); }
.ui-empty-title { margin: 0; font-size: var(--type-head); color: var(--ink-1); }
.ui-empty-body { margin: 0; max-width: 48ch; font-size: var(--type-read); }
.ui-empty-action { margin-top: var(--step-2); }





.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--step-2);
  border-radius: var(--round-pill);
  background: var(--surface-well);
  color: var(--ink-2);
  font-size: var(--type-note);
  white-space: nowrap;
}
.ui-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.ui-pill-good .ui-pill-dot { background: var(--good); }
.ui-pill-warn .ui-pill-dot { background: var(--warn); }
.ui-pill-bad .ui-pill-dot { background: var(--bad); }
.ui-pill-decide .ui-pill-dot { background: var(--decide); }
.ui-pill-neutral .ui-pill-dot { background: var(--ink-3); }

.ui-pill-glyph { display: inline-flex; }
.ui-pill-good .ui-pill-glyph { color: var(--good); }
.ui-pill-neutral .ui-pill-glyph { color: var(--ink-3); }





.ui-conn-banner {
  
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-notice);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--step-2) var(--step-3);
  padding: var(--step-2) var(--step-4);
  border-bottom: 1px solid var(--bad);
  background: var(--surface-overlay);
  color: var(--ink-1);
  font-size: var(--type-body);
}
.ui-conn-banner[hidden] { display: none; }
.ui-conn-title { color: var(--bad); }
.ui-conn-note { color: var(--ink-2); }
.ui-conn-banner .ui-btn { margin-left: auto; }






.ui-notices {
  position: fixed;
  left: 50%;
  bottom: var(--step-5);
  z-index: var(--z-notice);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--step-2);
  box-sizing: border-box;
  width: min(480px, calc(100vw - 32px));
  pointer-events: none;
}
.ui-notices-standing, .ui-notices-passing { display: flex; flex-direction: column; gap: var(--step-2); }
.ui-notices-standing:empty, .ui-notices-passing:empty { display: none; }
.ui-notices > * > * { pointer-events: auto; }
:root[data-compact] .ui-notices { bottom: calc(var(--rail-h) + env(safe-area-inset-bottom, 0px) + var(--step-3)); }

:root:has(.table) .ui-notices { top: 88px; bottom: auto; }
:root[data-compact]:has(.table) .ui-notices { top: 56px; bottom: auto; }

:root:has([data-free-hold]) .ui-notices { visibility: hidden; }
.ui-toasts { pointer-events: none; }
.ui-toasts-moved { display: none; }
.ui-toast {
  display: flex;
  align-items: center;
  gap: var(--step-2);
  padding: var(--step-2) var(--step-2) var(--step-2) var(--step-4);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-overlay);
  color: var(--ink-1);
  box-shadow: var(--win-shadow);
  pointer-events: auto;
}
.ui-toast-text { flex: 1; margin: 0; font-size: var(--type-read); }
.ui-toast .ui-btn[hidden] { display: none; }

.ui-toast > .ui-btn + .ui-btn { margin-left: var(--step-2); }

:root[data-input="touch"] .ui-toast .ui-btn { min-width: var(--touch); min-height: var(--touch); }


.award-title { display: inline-flex; align-items: center; gap: var(--step-1); min-width: 0; color: var(--ink-2); font-size: var(--type-label); font-weight: 400; line-height: 1.2; }
.award-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.award-crest { display: inline-flex; flex: none; }
.award-crest.is-locked { opacity: 0.4; filter: grayscale(1); }
.totem > .totem-title { grid-column: 1; font-size: 12px; color: var(--ink-2); }
.plate-title { padding: 0 var(--step-3) var(--step-1); }
.pub-profile-title { margin-top: var(--step-1); }
.pub-awards { display: grid; gap: var(--step-2); }
.pub-awards-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--step-3); }
.ur-row.award-row.is-locked { color: var(--ink-2); }
.award-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.award-name-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--step-2); min-width: 0; }
.award-tag { padding: 0 var(--step-1); border: 1px solid var(--line-2); border-radius: 4px; color: var(--ink-3); font-size: var(--type-tag); letter-spacing: 0.08em; text-transform: uppercase; }
.award-row.is-worn .award-tag { border-color: var(--focus); color: var(--focus); }
.award-row .award-desc { white-space: normal; overflow: visible; }
.award-meta { white-space: nowrap; }
@media (max-width: 720px) {
  .ur-row.award-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "crest name name" ". desc meta"; align-items: center; column-gap: var(--step-3); row-gap: 2px; }
  .award-row > .award-crest { grid-area: crest; }
  .award-row > .award-text { display: contents; }
  .award-row .award-name-line { grid-area: name; }
  .award-row .award-desc { grid-area: desc; font-size: 12px; }
  .award-row > .award-meta { grid-area: meta; }
}
.award-preview { margin: 0 0 var(--step-3); color: var(--ink-2); overflow-wrap: anywhere; }
.award-picker { display: grid; gap: var(--step-1); }
.award-pick { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.award-pick.is-off { opacity: 0.6; cursor: default; }
.award-radio { flex: none; width: 18px; height: 18px; border: 2px solid var(--line-2); border-radius: 50%; }
.award-pick.is-checked .award-radio { border-color: var(--focus); background: radial-gradient(circle, var(--focus) 0 4px, transparent 5px); }
.award-lost { margin: var(--step-3) 0 0; color: var(--ink-2); }
.ui-toast-lines { display: grid; gap: 2px; }
.ui-toast-head { margin: 0; font-weight: 600; }
.ui-toast-detail { margin: 0; color: var(--ink-2); font-size: var(--type-label); }
@keyframes award-crest-pulse {
  0% { opacity: 0.3; transform: scale(0.8); }
  60% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: none; }
}
.ui-toast.is-award .award-crest { animation: award-crest-pulse var(--motion-3) var(--ease-standard) 1; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .ui-toast.is-award .award-crest { animation: none; }
}
:root[data-motion="reduce"] .ui-toast.is-award .award-crest { animation: none; }

.ui-toast.is-award { --toast-ms: 6000ms; position: relative; overflow: hidden; touch-action: pan-y; }
.ui-toast-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--focus);
  opacity: 0.7;
  transform-origin: left center;
  animation: ui-toast-run var(--toast-ms) linear 1 forwards;
  pointer-events: none;
}
.ui-toast.is-held .ui-toast-progress { animation: none; }
@keyframes ui-toast-run {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes ui-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}





.ui-kbds { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--step-1); }
.ui-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--step-2);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: var(--round-1);
  background: var(--surface-2);
  color: var(--ink-1);
  font-family: var(--mono);
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.ui-kbd-or, .ui-kbd-plus { color: var(--ink-3); font-size: var(--type-label); }





.ui-sheet {
  position: fixed;
  z-index: var(--z-sheet);
  display: flex;
  flex-direction: column;
  background: var(--surface-overlay);
  color: var(--ink-1);
  border: 1px solid var(--line-2);
  box-shadow: var(--win-shadow);
}
.ui-sheet[hidden] { display: none; }
.ui-sheet-side {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 100vw);
  border-width: 0 0 0 1px;
}

.ui-sheet-side.ui-sheet-wide { width: min(760px, 100vw); }

.ui-match-line { display: flex; align-items: center; justify-content: space-between; gap: var(--step-2); min-height: 40px; padding: 0 var(--step-3); border: 1px solid var(--line-1); border-radius: var(--round-1); background: var(--surface-1); }
.ui-match-text { font-size: var(--type-body); color: var(--ink-1); font-variant-numeric: tabular-nums; }
.ui-match-group { display: grid; gap: var(--step-2); padding-block: var(--step-3); border-top: 1px solid var(--line-1); }
.ui-match-group:first-child { border-top: 0; }
.ui-match-head { margin: 0; font-size: var(--type-tag); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.ui-match-opts { display: flex; gap: var(--step-2); flex-wrap: wrap; }
.ui-match-opt { min-height: var(--touch); min-width: 88px; padding: 0 var(--step-4); border: 1px solid var(--line-2); border-radius: var(--round-1); background: var(--surface-1); color: var(--ink-2); font: inherit; cursor: pointer; }
.ui-match-opt { position: relative; }
.ui-match-opt.on { color: var(--ink-1); }

.ui-match-opt.on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--ink-1) inset; pointer-events: none; }
.ui-match-opt[aria-disabled="true"] { cursor: default; }
.ui-match-opt[aria-disabled="true"]:not(.on) { color: var(--ink-3); border-style: dashed; cursor: not-allowed; }
.ui-match-why { margin: 0; font-size: var(--type-note); color: var(--ink-2); }
:root[data-input="touch"] .ui-match-opt, :root[data-compact] .ui-match-opt { min-height: var(--touch); }
.ui-sheet-left {
  top: 0;
  left: 0;
  bottom: 0;
  width: min(380px, 100vw);
  border-width: 0 1px 0 0;
}
.ui-sheet-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 70vh;
  max-height: 70dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-width: 1px 0 0;
  border-radius: var(--round-2) var(--round-2) 0 0;
}
.ui-sheet-bottom[data-height="half"] { max-height: 50dvh; }
.ui-sheet-bottom[data-height="full"] { max-height: calc(100dvh - 24px); height: calc(100dvh - 24px); }
.ui-sheet-handle { display: grid; place-items: center; width: 100%; min-height: var(--touch); padding: 0; border: 0; background: none; cursor: pointer; }
.ui-sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line-2); }
.ui-sheet-handle:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-in); }

@media (min-width: 601px) {
  :root[data-compact] .ui-sheet-bottom .ui-sheet-handle { display: none; }
  :root[data-compact] .ui-sheet-bottom[data-height="half"] { max-height: calc(100dvh - 24px); }
}
.ui-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--step-3) var(--step-4);
  border-bottom: 1px solid var(--line-1);
}
.ui-sheet-title { margin: 0; font-size: var(--type-head); }

.ui-sheet-titles { display: flex; align-items: center; gap: var(--step-2); min-width: 0; }
.ui-sheet-body {
  display: grid;
  gap: var(--step-4);
  padding: var(--step-4);
  overflow-y: auto;
}

@keyframes ui-slide-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}







[data-win] {
  --win-in: var(--win-place);
  --win-out: var(--win-exit);
  --win-curve-in: var(--ease-spring);
  --win-curve-out: var(--ease-exit);
  --win-xf-in: none;
  --win-xf-out: none;
  --win-reveal: var(--motion-1);
  --win-ox: 50%;
  --win-oy: 50%;
  --win-dir: 1;
  --win-body-in: calc(var(--win-in) - var(--win-reveal));
  --win-body-curve: var(--win-curve-in);
  transform-origin: var(--win-ox) var(--win-oy);
  opacity: 1;
  transform: none;
  transition: opacity var(--win-in) var(--win-curve-in), transform var(--win-in) var(--win-curve-in), display var(--win-in) allow-discrete;
}

[data-win][hidden] *, [data-win-scrim][hidden] *, [data-win-host][hidden] * { pointer-events: none !important; }
[data-win][hidden] {
  display: none;
  opacity: 0;
  transform: var(--win-xf-out);
  pointer-events: none;
  transition: opacity var(--win-out) var(--win-curve-out), transform var(--win-out) var(--win-curve-out), display var(--win-out) allow-discrete;
}
@starting-style {
  [data-win]:not([hidden]) { opacity: 0; transform: var(--win-xf-in); }
}

[data-win="edge"] { --win-xf-in: translateX(calc(24px * var(--win-dir))); --win-xf-out: translateX(calc(24px * var(--win-dir))); --win-shadow: -16px 0 var(--shadow-sheet-blur) var(--shadow-sheet-ink); }
[data-win="edge"][data-side="left"] { --win-dir: -1; --win-shadow: 16px 0 var(--shadow-sheet-blur) var(--shadow-sheet-ink); }
[data-win="bottom"] { --win-xf-in: translateY(100%); --win-xf-out: translateY(100%); --win-shadow: 0 -16px var(--shadow-sheet-blur) var(--shadow-sheet-ink); }
[data-win="top"] { --win-xf-in: translateY(-100%); --win-xf-out: translateY(-100%); --win-shadow: 0 16px var(--shadow-sheet-blur) var(--shadow-sheet-ink); }
[data-win="dialog"] { --win-xf-in: translateY(8px) scale(0.97); --win-xf-out: translateY(4px) scale(0.98); --win-shadow: var(--shadow-sheet); }

[data-win="menu"] { --win-shadow: var(--shadow-float); --win-in: var(--win-pop); --win-out: var(--win-exit-short); --win-curve-in: var(--ease-standard); --win-reveal: 0ms; --win-xf-in: scale(0.96); }
[data-win="confirm"] { --win-xf-in: translateY(8px) scale(0.97); --win-xf-out: translateY(4px) scale(0.98); --win-shadow: var(--shadow-sheet); }
@media (max-width: 600px) {
  [data-win="menu"] { --win-xf-in: translateY(100%); --win-xf-out: translateY(100%); --win-shadow: 0 -16px var(--shadow-sheet-blur) var(--shadow-sheet-ink); --win-in: var(--win-place); --win-out: var(--win-exit); --win-curve-in: var(--ease-spring); --win-reveal: var(--motion-1); }
}
:root[data-compact] [data-win="menu"] { --win-xf-in: translateY(100%); --win-xf-out: translateY(100%); --win-shadow: 0 -16px var(--shadow-sheet-blur) var(--shadow-sheet-ink); --win-in: var(--win-place); --win-out: var(--win-exit); --win-curve-in: var(--ease-spring); --win-reveal: var(--motion-1); }
@media (max-width: 520px) {
  [data-win="confirm"] { --win-xf-in: translateY(100%); --win-xf-out: translateY(100%); --win-shadow: 0 -16px var(--shadow-sheet-blur) var(--shadow-sheet-ink); }
}

[data-win="anchored"], [data-win="tip"] { --win-shadow: var(--shadow-float); --win-in: var(--win-pop); --win-out: var(--win-exit-short); --win-curve-in: var(--ease-standard); --win-reveal: 0ms; }
[data-win="anchored"] { --win-xf-in: scale(0.96); }
[data-win="tip"] { --win-xf-in: translateY(2px); }

[data-win="anchored"][data-held] { --win-out: 0ms; --win-xf-in: none; }
[data-win="notice"] { --win-shadow: var(--shadow-notice); --win-in: var(--motion-2); --win-out: var(--win-exit-short); --win-xf-in: translateY(8px); --win-xf-out: translateY(4px); --win-reveal: 0ms; }

[data-win="line"] { --win-in: var(--motion-1); --win-out: var(--motion-1); --win-curve-in: var(--ease-standard); --win-reveal: 0ms; }

[data-win="overlay"] { --win-in: var(--motion-2); --win-curve-in: var(--ease-standard); --win-body-in: var(--win-place); --win-body-curve: var(--ease-spring); }

[data-win="still"], [data-win="still"][hidden] { transition: none; }
[data-win="still"] [data-win-body], [data-win="still"][hidden] [data-win-body] { transition: none; }
[data-win-scrim][data-still], [data-win-scrim][data-still][hidden] { transition: none; }


[data-win-host] { transition: display var(--win-exit) allow-discrete; }
[data-win-host][hidden] { display: none; pointer-events: none; transition: display var(--win-exit) allow-discrete; }


[data-win-bodies] { display: grid; }
[data-win-bodies] > [data-win-body] { grid-area: 1 / 1; }
[data-win-body] {
  opacity: 1;
  transform: none;
  transition: opacity var(--win-body-in) var(--win-body-curve) var(--win-reveal), transform var(--win-body-in) var(--win-body-curve) var(--win-reveal), display var(--win-out) allow-discrete;
}
[data-win-body][hidden] { display: none; opacity: 0; pointer-events: none; transition-delay: 0s; transition-duration: var(--win-out); }
[data-win][hidden] [data-win-body]:not([hidden]) { opacity: 1; transition: none; }
@starting-style {
  [data-win-body]:not([hidden]) { opacity: 0; }
}
[data-win="overlay"] [data-win-body] { --win-xf-body: translateY(8px); }
[data-win="overlay"][data-grow] [data-win-body] { --win-xf-body: scale(0.96); transform-origin: var(--win-ox) var(--win-oy); }
@starting-style {
  [data-win="overlay"] [data-win-body]:not([hidden]) { transform: var(--win-xf-body); }
}

[data-win] [data-win-row] {
  --i: 0;
  --win-xf-row: translateY(-8px);
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-2) var(--ease-standard) min(calc(var(--i) * var(--stagger)), var(--motion-3)), transform var(--motion-2) var(--ease-standard) min(calc(var(--i) * var(--stagger)), var(--motion-3));
}
@starting-style {
  [data-win] [data-win-row] { opacity: 0; transform: var(--win-xf-row); }
}
[data-win][hidden] [data-win-row] { transition: none; }

[data-win][data-snap][hidden] { --win-out: 0ms; }

[data-win][data-swap] [data-win-body] { transition-delay: 0s; transition-duration: var(--motion-2); transition-timing-function: var(--ease-standard); }

[data-win][data-swap-keep]:not([hidden]) { transition: none; }
[data-win][data-swap-keep] [data-win-body] { transition-delay: 0s; transition-duration: var(--motion-2); transition-timing-function: var(--ease-standard); }
[data-win][data-swap-out][hidden] { --win-out: var(--motion-1); }
[data-win][data-swap-in]:not([hidden]) { transition-delay: var(--motion-1); }


[data-win-scrim] {
  background: var(--scrim);
  opacity: 1;
  transition: opacity var(--motion-2) var(--ease-standard), display var(--motion-2) allow-discrete;
}
[data-win-scrim="veil"] { background: var(--veil); }
[data-win-scrim="shroud"] { background: var(--shroud); }

#win-scrim { position: fixed; inset: 0; z-index: var(--z-scrim); }
[data-win-scrim][hidden] { display: none; opacity: 0; pointer-events: none; transition-timing-function: var(--ease-exit); }
@starting-style {
  [data-win-scrim]:not([hidden]) { opacity: 0; }
}


:is(:root[data-motion="reduce"], [data-win-reduce]) [data-win] {
  --win-in: var(--motion-still);
  --win-out: 0ms;
  --win-curve-in: var(--ease-standard);
  --win-xf-in: none;
  --win-xf-out: none;
  --win-reveal: 0ms;
}
:is(:root[data-motion="reduce"], [data-win-reduce]) [data-win="line"] { --win-in: 0ms; }
:is(:root[data-motion="reduce"], [data-win-reduce]) [data-win="overlay"] { --win-in: 0ms; --win-body-in: var(--motion-still); --win-body-curve: var(--ease-standard); }
:is(:root[data-motion="reduce"], [data-win-reduce]) :is([data-win][data-swap], [data-win][data-swap-keep]) [data-win-body] { transition-duration: 0ms; }
:is(:root[data-motion="reduce"], [data-win-reduce]) [data-win][data-swap-in]:not([hidden]) { transition-delay: 0s; }
:is(:root[data-motion="reduce"], [data-win-reduce]) [data-win][data-swap-out][hidden] { --win-out: 0ms; }
:is(:root[data-motion="reduce"], [data-win-reduce]) [data-win] [data-win-row] { transition-delay: 0s; transition-duration: var(--motion-still); --win-xf-row: none; }
:is(:root[data-motion="reduce"], [data-win-reduce]) [data-win][data-held] { --win-in: 0ms; }
:is(:root[data-motion="reduce"], [data-win-reduce]) [data-win-scrim] { transition-duration: 0ms; }
:is(:root[data-motion="reduce"], [data-win-reduce]) [data-win="overlay"] [data-win-body] { --win-xf-body: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) [data-win] {
    --win-in: var(--motion-still);
    --win-out: 0ms;
    --win-curve-in: var(--ease-standard);
    --win-xf-in: none;
    --win-xf-out: none;
    --win-reveal: 0ms;
  }
  :root:not([data-motion="full"]) [data-win="line"] { --win-in: 0ms; }
  :root:not([data-motion="full"]) [data-win="overlay"] { --win-in: 0ms; --win-body-in: var(--motion-still); --win-body-curve: var(--ease-standard); }
  :root:not([data-motion="full"]) :is([data-win][data-swap], [data-win][data-swap-keep]) [data-win-body] { transition-duration: 0ms; }
  :root:not([data-motion="full"]) [data-win][data-swap-in]:not([hidden]) { transition-delay: 0s; }
  :root:not([data-motion="full"]) [data-win][data-swap-out][hidden] { --win-out: 0ms; }
  :root:not([data-motion="full"]) [data-win] [data-win-row] { transition-delay: 0s; transition-duration: var(--motion-still); --win-xf-row: none; }
  :root:not([data-motion="full"]) [data-win][data-held] { --win-in: 0ms; }
  :root:not([data-motion="full"]) [data-win-scrim] { transition-duration: 0ms; }
  :root:not([data-motion="full"]) [data-win="overlay"] [data-win-body] { --win-xf-body: none; }
}






@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) :is(.ui-skeleton-bar) {
    animation: none;
  }
  :root:not([data-motion="full"]) .ui-btn { transition: none; }
}
:root[data-motion="reduce"] :is(.ui-skeleton-bar) {
  animation: none;
}
:root[data-motion="reduce"] .ui-btn { transition: none; }

#app { overflow-x: clip; overflow-y: clip; }







.ur-page-title {
  margin: 0;
  font: 700 var(--type-page) / 1.1 var(--font-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.ur-section-head {
  margin: 0;
  font: 500 var(--type-section) / 1.2 var(--font-display);
  letter-spacing: var(--track-display);
  color: var(--ink-1);
}



.ur-rows { --dom: var(--line-2); --dom2: transparent; display: grid; gap: var(--step-1); margin: 0; padding: 0; list-style: none; }
.ur-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--step-3);
  min-height: 56px;
  padding: var(--step-2) var(--step-3);
  border-radius: 8px;
  --row-bg: var(--surface-1);
  --row-bg-hi: var(--surface-2);
  background: var(--row-bg);
  color: var(--ink-1);
  transition: background-color var(--motion-1) var(--ease-inout), translate var(--motion-2) var(--ease-standard);
}

.ur-row::before { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; pointer-events: auto; }

@media (hover: hover) and (pointer: fine) { .ur-row:hover { background: var(--row-bg-hi); translate: 0 -2px; } }
@media (hover: hover) and (pointer: coarse) { .ur-row:hover { background: var(--row-bg-hi); } }
.ur-row[class*="ur-dom2-"] { background: linear-gradient(90deg, var(--row-bg) 40%, var(--dom2-bg)); }
@media (hover: hover) { .ur-row[class*="ur-dom2-"]:hover { background: linear-gradient(90deg, var(--row-bg-hi) 40%, var(--dom2-bg-hi)); } }

.ur-row-main {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: scale var(--motion-1) var(--ease-standard);
}
.ur-row-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ur-row-main:focus-visible { outline: none; }
.ur-row:has(.ur-row-main:focus-visible) { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.ur-row-main:active { scale: var(--tap-row); transition-duration: 0s; }

.ur-row > .ui-btn { position: relative; z-index: 1; }

.ur-row-name, .ur-deck-name, .ur-row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ur-row-name { font-weight: 600; }
.ur-deck-name { font: 500 var(--type-deck-name) / 1.25 var(--font-display); letter-spacing: var(--track-display); }
.ur-row-sub { font-size: var(--type-note); color: var(--ink-2); }
.ur-row-meta { flex: none; font-size: var(--type-note); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ur-pill-good { color: var(--good); }
.ur-pill-warn { color: var(--warn); }
.ur-pill-bad { color: var(--bad); }

.ur-result { flex: none; min-width: 5.5em; font-weight: 700; font-size: var(--type-read); }
.is-win > .ur-result { color: var(--good); }
.is-loss > .ur-result { color: var(--status-bad); }
.is-none > .ur-result { color: var(--ink-2); }


.ur-dom-body { --dom: var(--domain-body); --row-bg: var(--domain-body-tint); --row-bg-hi: var(--domain-body-tint-hi); }
.ur-dom-calm { --dom: var(--domain-calm); --row-bg: var(--domain-calm-tint); --row-bg-hi: var(--domain-calm-tint-hi); }
.ur-dom-chaos { --dom: var(--domain-chaos); --row-bg: var(--domain-chaos-tint); --row-bg-hi: var(--domain-chaos-tint-hi); }
.ur-dom-fury { --dom: var(--domain-fury); --row-bg: var(--domain-fury-tint); --row-bg-hi: var(--domain-fury-tint-hi); }
.ur-dom-mind { --dom: var(--domain-mind); --row-bg: var(--domain-mind-tint); --row-bg-hi: var(--domain-mind-tint-hi); }
.ur-dom-order { --dom: var(--domain-order); --row-bg: var(--domain-order-tint); --row-bg-hi: var(--domain-order-tint-hi); }
.ur-dom2-body { --dom2: var(--domain-body-ring); --dom2-bg: var(--domain-body-tint); --dom2-bg-hi: var(--domain-body-tint-hi); }
.ur-dom2-calm { --dom2: var(--domain-calm-ring); --dom2-bg: var(--domain-calm-tint); --dom2-bg-hi: var(--domain-calm-tint-hi); }
.ur-dom2-chaos { --dom2: var(--domain-chaos-ring); --dom2-bg: var(--domain-chaos-tint); --dom2-bg-hi: var(--domain-chaos-tint-hi); }
.ur-dom2-fury { --dom2: var(--domain-fury-ring); --dom2-bg: var(--domain-fury-tint); --dom2-bg-hi: var(--domain-fury-tint-hi); }
.ur-dom2-mind { --dom2: var(--domain-mind-ring); --dom2-bg: var(--domain-mind-tint); --dom2-bg-hi: var(--domain-mind-tint-hi); }
.ur-dom2-order { --dom2: var(--domain-order-ring); --dom2-bg: var(--domain-order-tint); --dom2-bg-hi: var(--domain-order-tint-hi); }
.ur-ring {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-ground);
  box-shadow: 0 0 0 2px var(--dom), 0 0 0 4px var(--surface-ground), 0 0 0 6px var(--dom2);
  color: var(--ink-1);
  font-weight: 700;
  font-size: var(--type-read);
}

.ur-thumb { position: relative; flex: none; display: inline-grid; place-items: center; overflow: hidden; border-radius: 4px; background: var(--surface-ground); container-type: size; box-shadow: 0 0 0 2px var(--dom), 0 0 0 4px var(--surface-ground), 0 0 0 5px var(--dom2); }

:where(.ur-thumb) { --dom: var(--line-2); --dom2: transparent; }
.ur-thumb-28 { width: 28px; height: 28px; }
.ur-thumb-40 { width: 40px; height: 40px; }
.ur-thumb-48 { width: 48px; height: 48px; }
.ur-thumb-initial { font-size: var(--type-read); font-weight: 600; line-height: 1; color: var(--ink-2); }
.ur-thumb-art {
  --ra: 0.716073; --cl: 0.25; --ct: 0.11; --cr: 0.915; --cb: 0.63;
  --fu: calc((var(--cl) + var(--cr)) / 2); 
  --fv: calc(var(--ct) + 0.4 * (var(--cb) - var(--ct)));
  --iw: max(calc(100cqw / (var(--cr) - var(--cl))), calc(100cqh * var(--ra) / (var(--cb) - var(--ct))));
  --ih: calc(var(--iw) / var(--ra));
  position: absolute; max-width: none; object-fit: cover; width: var(--iw); height: var(--ih);
  left: clamp(calc(100cqw - var(--cr) * var(--iw)), calc(50cqw - var(--fu) * var(--iw)), calc(-1 * var(--cl) * var(--iw)));
  top: clamp(calc(100cqh - var(--cb) * var(--ih)), calc(50cqh - var(--fv) * var(--ih)), calc(-1 * var(--ct) * var(--ih)));
}
.ur-thumb-art[hidden] { display: none; }
.ur-thumb.ur-thumb-printing .ur-thumb-art { --cl: 0.06; --ct: 0.08; --cr: 0.94; --cb: 0.6; --fu: 0.5; --fv: 0.34; }

.ur-deckrow { min-height: 56px; }
.ur-deckrow-full { min-height: 64px; }
.ur-deckrow-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  flex: 1;
  gap: var(--step-3);
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
div.ur-deckrow-main { cursor: default; }
.ur-deckrow-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ur-deckrow-main:focus-visible { outline: none; }
.ur-deckrow:has(.ur-deckrow-main:focus-visible) { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.ur-deckrow > :not(.ur-deckrow-main) { position: relative; z-index: 1; }

.ur-deckrow-main > [data-thumb-preview] { position: relative; z-index: 1; }

.ur-deckrow.is-selected { box-shadow: inset 0 0 0 1.5px var(--ink-1), 0 0 14px color-mix(in oklab, var(--ink-1) 16%, transparent); }
.ur-deckrow-text { display: grid; gap: 2px; min-width: 0; }
.ur-deckrow-text > * { min-width: 0; }
.ur-deckrow-name { display: flex; align-items: baseline; gap: var(--step-2); min-width: 0; }
.ur-deckrow-name, .ur-deck-name { white-space: normal; overflow-wrap: anywhere; }
.ur-deckrow-tag { flex: none; font-size: var(--type-note); color: var(--ink-2); }
.ur-deckrow-identity > :first-child { flex: none; }
.ur-deckrow-verdict { font-size: var(--type-note); font-weight: 600; }
.ur-deckrow-identity { display: flex; align-items: center; gap: var(--step-2); min-width: 0; font-size: var(--type-label); color: var(--ink-2); }
.ur-deckrow-legend { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ur-deckrow-meta { font-size: var(--type-note); color: var(--ink-2); }
.ur-deckrow-note { font-size: var(--type-note); }
.ur-deckrow-status { flex: none; font-size: var(--type-label); font-weight: 600; text-align: right; }
.ur-deckrow-status.ur-pill-neutral { color: var(--ink-2); font-weight: 400; }
.ur-marks { display: inline-flex; flex: none; gap: 4px; }
.ur-dom-icon { display: inline-block; flex: none; border-radius: 50%; vertical-align: middle; }


.ur-skeleton .ur-row { background: var(--surface-1); }
.ur-skel { display: block; border-radius: var(--round-1); background: var(--surface-2); }
.ur-skel-ring { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.ur-skel-line { height: 12px; width: min(60%, 18rem); }


.ur-line {
  display: flex;
  align-items: baseline;
  gap: var(--step-2);
  margin: 0;
  padding: var(--step-2) var(--step-3);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  font-size: var(--type-body);
  line-height: 1.45;
}
.ur-line.is-bad { border-color: var(--bad); }
.ur-line.is-warn { border-color: var(--ink-3); }
.ur-line-mark { flex: none; font-weight: 700; }
.is-bad > .ur-line-mark { color: var(--bad); }
.is-warn > .ur-line-mark { color: var(--warn); }


.ur-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--step-3) var(--step-4);
  padding: var(--step-4);
  border: 1px dashed var(--line-2);
  border-radius: 8px;
}
.ur-empty-line { margin: 0; font-size: var(--type-read); color: var(--ink-2); }
.ur-empty-action {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--step-4);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  color: var(--ink-1);
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) { .ur-empty-action:hover { border-color: var(--ink-3); background: var(--surface-1); } }
.ur-empty-action:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .ur-row { transition: none; }
}
:root[data-motion="reduce"] .ur-row { transition: none; }

.room-deck-list { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; }


.ur-switch {
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: var(--step-3);
  min-height: var(--touch);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink-1);
  cursor: pointer;
}
.ur-switch:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); border-radius: var(--round-pill); }
.ur-switch-track {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--round-pill);
  background: var(--surface-1);
  transition: background-color var(--motion-1) var(--ease-standard), border-color var(--motion-1) var(--ease-standard);
}
.ur-switch-track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-3);
  transition: transform var(--motion-1) var(--ease-standard), background-color var(--motion-1) var(--ease-standard);
}
.ur-switch.is-on .ur-switch-track { border-color: var(--ink-1); background: var(--surface-2); }
.ur-switch.is-on .ur-switch-track::before { transform: translateX(18px); background: var(--ink-1); }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .ur-switch-track, :root:not([data-motion="full"]) .ur-switch-track::before { transition: none; }
}
:root[data-motion="reduce"] .ur-switch-track, :root[data-motion="reduce"] .ur-switch-track::before { transition: none; }


.ur-tip {
  --tip-arrow: 16px;
  position: fixed;
  z-index: var(--z-tip);
  max-width: 280px;
  padding: 6px 10px;
  background: var(--surface-overlay);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  box-shadow: var(--win-shadow);
  color: var(--ink-1);
  font: 400 12px / 1.4 var(--font-ui);
  white-space: pre-line;
  pointer-events: none;
}
.ur-tip[hidden] { display: none; }
.ur-tip-head { display: block; margin-bottom: 2px; font: 500 10px / 1.3 var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.ur-tip-head:empty { display: none; }
.ur-tip-arrow { position: absolute; width: 8px; height: 8px; background: inherit; border: inherit; border-radius: 1px; rotate: 45deg; }
.ur-tip[data-side="top"] .ur-tip-arrow { bottom: -5px; left: calc(var(--tip-arrow) - 4px); border-top: 0; border-left: 0; }
.ur-tip[data-side="bottom"] .ur-tip-arrow { top: -5px; left: calc(var(--tip-arrow) - 4px); border-bottom: 0; border-right: 0; }
.ur-tip[data-side="left"] .ur-tip-arrow { right: -5px; top: calc(var(--tip-arrow) - 4px); border-bottom: 0; border-left: 0; }
.ur-tip[data-side="right"] .ur-tip-arrow { left: -5px; top: calc(var(--tip-arrow) - 4px); border-top: 0; border-right: 0; }

.ur-tip-cost { display: flex; margin: 2px 0 4px; font-size: 14px; }
.ur-tip-cost[hidden] { display: none; }

.ur-tip-rich .glyph-icon { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
.ur-tip-rich .kw { font-size: 0.92em; }


.cm { display: inline-flex; align-items: center; gap: 0.22em; line-height: 1; white-space: nowrap; }
.cm-cost {
  display: grid;
  place-items: center;
  min-width: 1.45em;
  height: 1.45em;
  padding: 0 0.18em;
  box-sizing: border-box;
  border: var(--num-rim-w) solid var(--gem-ring);
  border-radius: var(--round-pill);
  background: var(--gem-fill);
  box-shadow: var(--num-lift);
  color: var(--ink-1);
  font-family: var(--font-numeral);
  font-weight: 700;
  font-synthesis: none;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1em;
  letter-spacing: 0;
}
.cm-pip {
  display: grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  padding: 0.12em;
  box-sizing: border-box;
  --pip-ring: var(--ink-2);
  border: var(--num-rim-w) solid var(--pip-ring);
  border-radius: 50%;
  background: var(--gem-fill);
  box-shadow: var(--num-lift);
}
.cm-pip > :is(.ur-dom-icon, .pow-hybrid) { width: 100%; height: 100%; }
.cm-pip[data-domain="body"] { --pip-ring: var(--d-body); }
.cm-pip[data-domain="calm"] { --pip-ring: var(--d-calm); }
.cm-pip[data-domain="chaos"] { --pip-ring: var(--d-chaos); }
.cm-pip[data-domain="fury"] { --pip-ring: var(--d-fury); }
.cm-pip[data-domain="mind"] { --pip-ring: var(--d-mind); }
.cm-pip[data-domain="order"] { --pip-ring: var(--d-order); }

.cm-pip.cm-any { padding: 0; background: conic-gradient(var(--d-fury), var(--d-body), var(--d-order), var(--d-calm), var(--d-mind), var(--d-chaos), var(--d-fury)); }
.cm-pip.cm-any > .pow-any { display: none; }
.cm-icon { display: grid; place-items: center; }
.cm-icon > .glyph-icon { width: 1.2em; height: 1.2em; }
.cm-word { font: 600 0.8em / 1.2 var(--font-ui); color: var(--ink-1); }

:root[data-input="touch"] :is(input, select, textarea) { font-size: var(--type-input); }


:root[data-input="touch"] :is(.ui-btn-sm, .ui-btn-md) { height: var(--touch); }
:root[data-input="touch"] .ui-btn { font-size: var(--touch-floor-ui); }
:root[data-input="touch"] :is(.ur-row-sub, .ur-row-meta) { font-size: var(--touch-floor-ui); }



.ui-sheet .ui-sheet-body { flex: 1 1 auto; min-height: 0; align-content: start; }
.ui-sheet-foot { display: none; padding: var(--step-3) var(--step-4); border-top: 1px solid var(--line-1); }
:root[data-input="touch"] .ui-sheet-foot, :root[data-compact] .ui-sheet-foot { display: flex; }
.ui-sheet-foot .ui-btn { flex: 1; }

.ui-sheet-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-2); padding: var(--step-3) var(--step-4); border-top: 1px solid var(--line-1); background: var(--surface-2); }
.ui-sheet-confirm[hidden] { display: none; }
.ui-sheet-confirm-ask { flex: 1 1 100%; margin: 0; }

.preview-host-thumb { position: fixed; z-index: 120; left: 0; top: 0; width: max-content; transform-origin: 0 0; pointer-events: none; }
.preview-host-thumb > .preview-pane.empty { display: none; }
:root[data-input="touch"] .ui-sheet-head .ui-btn { min-width: var(--touch); padding-inline: var(--step-4); border: 1px solid var(--line-2); }

:root[data-input="touch"] :is(.ur-deckrow-main, .ur-row-main) { min-height: var(--touch); }

:root[data-input="touch"] { --type-tag: 12px; --type-note: 14px; }

:root[data-input="touch"] :is(.ur-deckrow-identity, .home-open-legend) { font-size: var(--touch-floor-ui); }


.ui-pop {
  position: fixed;
  z-index: var(--z-anchored);
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-width: calc(100vw - 16px);
  padding: var(--step-1) 0;
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-1);
  box-shadow: var(--win-shadow);
}
.ui-pop[hidden] { display: none; }
.ui-pop-item {
  display: flex;
  align-items: center;
  gap: var(--step-2);
  min-height: 32px;
  padding: 0 var(--step-4);
  border: 0;
  background: none;
  color: var(--ink-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ui-pop-item:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-in); }
@media (hover: hover) { .ui-pop-item:hover { background: var(--surface-2); } }
.ui-pop-item[aria-disabled="true"] { color: var(--ink-3); cursor: not-allowed; }
.ui-pop-label { flex: 1; }
.ui-pop-check { width: 1em; text-align: center; color: var(--ink-1); }
.ui-pop-count { color: var(--ink-3); font-variant-numeric: tabular-nums; }
:root[data-input="touch"] .ui-pop-item { min-height: var(--touch); font-size: var(--touch-floor-ui); }
.ui-pop-section { display: flex; flex-direction: column; }

.ui-pop-cols { display: grid; grid-template-columns: auto auto; column-gap: var(--step-3); align-items: start; padding-inline: var(--step-2); }
.ui-pop-cols > .ui-pop-section:nth-child(2) { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0; border: 0; }
.ui-pop-section + .ui-pop-section { margin-top: var(--step-1); padding-top: var(--step-1); border-top: 1px solid var(--line-1); }
.ui-pop-head { margin: var(--step-1) var(--step-4) 2px; font-size: var(--type-note); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.ui-pop[role="dialog"] { width: min(720px, calc(100vw - 16px)); max-height: 70dvh; padding: var(--step-3) var(--step-4); overflow-y: auto; }


.ur-cthumb { position: relative; flex: none; display: inline-grid; place-items: center; overflow: hidden; border: 1px solid var(--line-2); border-radius: 4px; background: var(--row-bg); container-type: size; }
:where(.ur-cthumb) { --row-bg: var(--surface-ground); }
.ur-cthumb-32 { width: 32px; height: 32px; }
.ur-cthumb-40 { width: 40px; height: 40px; }
.ur-cthumb-initial { font-size: var(--type-read); font-weight: 600; line-height: 1; color: var(--ink-2); }
.ur-cthumb-art {
  --ra: 0.716073; --cl: 0.205; --ct: 0.06; --cr: 0.72; --cb: 0.495;
  --fu: calc((var(--cl) + var(--cr)) / 2); 
  --fv: calc(var(--ct) + 0.4 * (var(--cb) - var(--ct)));
  --iw: max(calc(100cqw / (var(--cr) - var(--cl))), calc(100cqh * var(--ra) / (var(--cb) - var(--ct))));
  --ih: calc(var(--iw) / var(--ra));
  position: absolute; max-width: none; object-fit: cover; width: var(--iw); height: var(--ih);
  left: clamp(calc(100cqw - var(--cr) * var(--iw)), calc(50cqw - var(--fu) * var(--iw)), calc(-1 * var(--cl) * var(--iw)));
  top: clamp(calc(100cqh - var(--cb) * var(--ih)), calc(50cqh - var(--fv) * var(--ih)), calc(-1 * var(--ct) * var(--ih)));
}
.ur-cthumb-art[hidden] { display: none; }

.ur-cthumb:has(.ur-cthumb-art:not([hidden])) .ur-cthumb-initial { visibility: hidden; }

.ur-cthumb:has(.ur-cthumb-art:not([hidden]))::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.14) 50%, transparent 70%) 150% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 6px);
  animation: ur-cthumb-wait var(--loop-wait) var(--ease-inout) 2;
}
@keyframes ur-cthumb-wait { to { background-position: -150% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .ur-cthumb:has(.ur-cthumb-art:not([hidden]))::before { animation: none; }
}

.ur-cthumb.t-unit .ur-cthumb-art { --cl: 0.205; --ct: 0.06; --cr: 0.72; --cb: 0.495; }
.ur-cthumb.t-champion .ur-cthumb-art { --cl: 0.205; --ct: 0.06; --cr: 0.72; --cb: 0.495; }
.ur-cthumb.t-spell .ur-cthumb-art { --cl: 0.205; --ct: 0.06; --cr: 0.765; --cb: 0.495; }
.ur-cthumb.t-gear .ur-cthumb-art { --cl: 0.205; --ct: 0.056; --cr: 0.78; --cb: 0.495; }
.ur-cthumb.t-legend .ur-cthumb-art { --cl: 0.25; --ct: 0.11; --cr: 0.915; --cb: 0.63; }
.ur-cthumb.t-rune .ur-cthumb-art { --cl: 0.11; --ct: 0.065; --cr: 0.89; --cb: 0.62; --fv: calc((var(--ct) + var(--cb)) / 2); }

.ur-cthumb.ur-cthumb-printing:not(.t-battlefield) .ur-cthumb-art { --cl: 0.06; --ct: 0.08; --cr: 0.94; --cb: 0.6; --fu: 0.5; --fv: 0.34; }

.ur-cthumb.t-battlefield .ur-cthumb-art {
  --cl: 0.21; --ct: 0.05; --cr: 0.64; --cb: 0.78;
  --fv: calc((var(--ct) + var(--cb)) / 2);
  --iw: max(calc(100cqh / (var(--cr) - var(--cl))), calc(100cqw * var(--ra) / (var(--cb) - var(--ct))));
  --bx: clamp(calc(100cqw - (1 - var(--ct)) * var(--ih)), calc(50cqw - (1 - var(--fv)) * var(--ih)), calc((var(--cb) - 1) * var(--ih)));
  --by: clamp(calc(100cqh - var(--cr) * var(--iw)), calc(50cqh - var(--fu) * var(--iw)), calc(-1 * var(--cl) * var(--iw)));
  left: calc(var(--bx) + var(--ih) / 2 - var(--iw) / 2);
  top: calc(var(--by) + var(--iw) / 2 - var(--ih) / 2);
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}






.ui-datefield {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--step-2);
  min-width: 9.5rem;
  min-height: var(--control-md);
  padding: 0 var(--step-3);
  border: 1px solid var(--line-2);
  border-radius: var(--round-1);
  background: var(--surface-2);
  color: var(--ink-1);
  font: inherit;
  font-size: var(--type-body);
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) { .ui-datefield:hover { border-color: var(--ink-3); } }
.ui-datefield:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.ui-datefield.is-empty .ui-datefield-text { color: var(--ink-3); }
.ui-datefield-icon { display: inline-flex; flex: none; color: var(--ink-3); }
:root[data-input="touch"] .ui-datefield { min-height: var(--touch); font-size: var(--touch-floor-ui); }


.ui-datepick-scrim { display: none; }
.ui-datepick {
  position: fixed;
  z-index: var(--z-over);
  box-sizing: border-box;
  width: 19.5rem;
  max-width: calc(100vw - 16px);
  padding: var(--step-3);
  border: 1px solid var(--line-2);
  border-radius: var(--round-2);
  background: var(--surface-overlay);
  box-shadow: var(--win-shadow);
}
.ui-datepick[hidden], .ui-datepick-scrim[hidden] { display: none; }
.ui-datepick-head { display: flex; align-items: center; justify-content: space-between; gap: var(--step-2); margin-bottom: var(--step-2); }
.ui-datepick-title { margin: 0; font: 600 var(--type-read) / 1.2 var(--font-display); letter-spacing: var(--track-display); color: var(--ink-1); }
.ui-datepick-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--round-1);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.ui-datepick-arrow { font-size: 22px; line-height: 1; }
@media (hover: hover) { .ui-datepick-nav:hover { background: var(--surface-2); color: var(--ink-1); } }
.ui-datepick-nav:focus-visible, .ui-datepick-day:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-in); }
.ui-datepick-week, .ui-datepick-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.ui-datepick-wd { padding: var(--step-1) 0; text-align: center; font-size: var(--type-note); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.ui-datepick-day {
  height: 36px;
  border: 1px solid transparent;
  border-radius: var(--round-1);
  background: none;
  color: var(--ink-1);
  font: inherit;
  font-size: var(--type-body);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
@media (hover: hover) { .ui-datepick-day:hover { background: var(--surface-2); } }
.ui-datepick-day.is-out { color: var(--ink-3); }
.ui-datepick-day.is-today { border-color: var(--ink-3); }

.ui-datepick-day.is-selected { border-color: var(--ink-1); background: var(--ink-1); color: var(--surface-ground); font-weight: 700; }
.ui-datepick-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--step-2); margin-top: var(--step-2); padding-top: var(--step-2); border-top: 1px solid var(--line-1); }
.ui-datepick-foot .ui-datepick-close { display: none; }
:root[data-input="touch"] .ui-datepick-day { height: var(--touch); font-size: var(--touch-floor-ui); }
:root[data-input="touch"] .ui-datepick-nav { width: var(--touch); height: var(--touch); }
:root[data-compact] .ui-datepick-scrim { position: fixed; inset: 0; z-index: calc(var(--z-over) - 1); display: block; }
:root[data-compact] .ui-datepick-scrim[hidden] { display: none; }
:root[data-compact] .ui-datepick {
  right: 0;
  bottom: 0;
  left: 0 !important;
  top: auto !important;
  width: auto;
  max-width: none;
  padding-bottom: calc(var(--step-3) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--round-2) var(--round-2) 0 0;
}
:root[data-compact] .ui-datepick-foot .ui-datepick-close { display: inline-flex; }






.cf-art { transition: opacity var(--motion-1) var(--ease-standard); }
.cf-art[data-art="loading"] { opacity: 0; }

.cf-window[data-sweep]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, oklch(100% 0 0 / 0.5), transparent);
  opacity: 0;
  pointer-events: none;
  animation: cf-sweep var(--motion-4) var(--ease-standard) 1 both;
}
@keyframes cf-sweep {
  0% { opacity: 0; transform: translateX(-100%); }
  30% { opacity: 0.5; }
  70% { opacity: 0.5; }
  100% { opacity: 0; transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .cf-window[data-sweep]::after { animation: none; opacity: 0; }
}
:root[data-motion="reduce"] .cf-window[data-sweep]::after { animation: none; opacity: 0; }