:root {
  --bg:#04050d;
  --bg-vignette:radial-gradient(circle at 12% 8%, rgba(152,95,255,0.28) 0%, rgba(20,26,55,0.82) 32%, rgba(5,7,15,0.95) 68%, rgba(3,4,10,1) 100%);
  --bg-stripe:linear-gradient(120deg, rgba(60,16,118,0.45), rgba(15,110,147,0.35) 42%, rgba(7,23,64,0.85) 100%);
  --bg-veil:linear-gradient(120deg, rgba(60,16,118,0.42), rgba(16,68,148,0.28) 48%, rgba(10,24,58,0.88) 100%);
  --ink:#f2f4ff;
  --muted:#a3b4d6;
  --accent:#4ce0ff;
  --accent-alt:#ff8df0;
  --frame:#2b355b;
  --frame-soft:rgba(142,131,255,0.22);
  --panel:linear-gradient(150deg, rgba(24,34,78,0.94), rgba(12,20,46,0.9));
  --panel-soft:linear-gradient(150deg, rgba(32,46,110,0.94), rgba(18,28,68,0.88));
  --panel-outline:rgba(92,138,255,0.3);
  --card-border:1px solid rgba(121,205,255,0.32);
  --card-shadow:0 28px 48px rgba(6,12,32,0.52);
  --radius:18px;
  --gap:24px;
  --pad:26px;
  --ctrl-h:42px;
  --btn-bg:rgba(18,28,66,0.9);
  --btn-bg-hover:rgba(25,38,88,0.95);
  --border:1px solid rgba(121,205,255,0.32);
  --border-strong:1px solid rgba(255,141,240,0.4);
  --shadow-deep:0 30px 64px rgba(5,10,30,0.65);
  --shadow-soft:0 18px 42px rgba(6,14,34,0.48);
  --green-bg:rgba(45,188,140,0.2);
  --green-bd:rgba(61,214,158,0.48);
  --red-bg:rgba(216,66,108,0.18);
  --red-bd:rgba(244,94,140,0.5);
  --glow:0 0 22px rgba(113,220,233,0.45);
}

*,
*::before,
*::after {
  box-sizing:border-box;
}

html,
body {
  margin:0;
  min-height:100%;
  background:var(--bg);
  background-image:
    radial-gradient(circle at 78% 18%, rgba(255,141,240,0.18) 0%, rgba(255,141,240,0) 38%),
    radial-gradient(circle at 18% 80%, rgba(76,224,255,0.18) 0%, rgba(76,224,255,0) 42%),
    var(--bg-vignette);
  color:var(--ink);
  font-family:"Exo", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
  letter-spacing:0.01em;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  background-image:var(--bg-stripe);
  opacity:0.26;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:-1;
}

body.riftbound-app::before {
  background-image:var(--bg-veil);
}

a {
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}

a:hover {
  text-decoration:none;
  color:var(--accent-alt);
  text-shadow:var(--glow);
}

header {
  max-width:1220px;
  margin:0 auto;
  padding:42px 24px 20px;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:24px;
  position:relative;
}

header::after {
  content:"";
  position:absolute;
  inset:16px;
  border:1px solid rgba(255,141,240,0.15);
  border-radius:32px;
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(120deg, rgba(53,18,104,0.32), rgba(7,30,72,0.24));
  box-shadow:0 0 0 1px rgba(27,43,92,0.6), 0 24px 60px rgba(5,10,32,0.55);
}

.site-banner {
  width:320px;
  display:block;
  filter:drop-shadow(0 14px 36px rgba(10,14,34,0.65));
  margin:0 auto 0 0;
}

footer .site-banner {
  margin:0 auto;
}

.site-banner img {
  display:block;
  width:100%;
}

.heading {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sub {
  color:var(--muted);
  font-size:1.02rem;
  max-width:880px;
}

.pill {
  display:inline-block;
  padding:4px 12px;
  border-radius:999px;
  border:1px solid rgba(121,205,255,0.42);
  background:linear-gradient(150deg, rgba(28,46,114,0.85), rgba(20,32,82,0.7));
  color:#e4ecff;
  font-size:0.82rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin:6px 6px 0 0;
}

.notice {
  margin:12px 0;
  padding:12px 16px;
  border-radius:12px;
  font-size:0.95rem;
  font-weight:600;
}

.notice.yellow {
  background:linear-gradient(140deg, rgba(255,214,0,0.25), rgba(255,141,240,0.22));
  color:#fff3b0;
  border:1px solid rgba(255,214,0,0.48);
  box-shadow:0 18px 36px rgba(6,12,32,0.38);
}

h1 {
  margin:0;
  font-family:"Cinzel", "Exo", serif;
  font-size:2.45rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#fdf7ff;
  text-shadow:0 12px 30px rgba(5,9,30,0.75);
}

.lede {
  margin:0;
  color:var(--muted);
  max-width:760px;
  font-size:1.08rem;
}

.sigil {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:0.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.22em;
  color:rgba(255,141,240,0.78);
}

main {
  max-width:1220px;
  margin:0 auto 80px;
  padding:0 24px 52px;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  position:relative;
}

main::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:48px;
  background:radial-gradient(circle at 50% 0%, rgba(76,224,255,0.15), rgba(76,224,255,0) 60%);
  opacity:0.6;
  pointer-events:none;
  z-index:-1;
}

.card {
  background:linear-gradient(150deg, rgba(21,30,66,0.94), rgba(12,19,44,0.88));
  border:var(--card-border);
  border-radius:var(--radius);
  padding:var(--pad);
  display:flex;
  flex-direction:column;
  gap:20px;
  box-shadow:var(--card-shadow);
  position:relative;
  overflow:hidden;
}

.card::before {
  content:"";
  position:absolute;
  inset:1px;
  border-radius:calc(var(--radius) - 2px);
  border:1px solid rgba(255,141,240,0.22);
  opacity:0.7;
  pointer-events:none;
}

.card::after {
  content:"";
  position:absolute;
  inset:-40% -40% auto;
  height:240px;
  background:radial-gradient(circle at center, rgba(76,224,255,0.35), rgba(76,224,255,0));
  opacity:0.4;
  pointer-events:none;
  transform:rotate(12deg);
}

.card h2 {
  margin:0;
  font-family:"Cinzel", "Exo", serif;
  font-size:1.5rem;
  text-transform:uppercase;
  letter-spacing:0.22em;
  color:var(--accent);
}

.card p {
  margin:0;
  color:var(--muted);
  font-size:1rem;
}

.wrap {
  max-width:1220px;
  margin:0 auto;
  padding:18px 20px 40px;
  position:relative;
}

.wrap::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:44px;
  background:radial-gradient(circle at 50% 0%, rgba(89,221,255,0.12), rgba(89,221,255,0) 65%);
  pointer-events:none;
  z-index:-1;
}

.riftbound-app .card {
  background:var(--panel);
  border:var(--border);
  border-radius:22px;
  padding:24px;
  box-shadow:var(--shadow-deep);
}

.riftbound-app .card::before {
  border-radius:20px;
  border:1px solid rgba(255,141,240,0.22);
  opacity:0.75;
}

details.sets {
  background:var(--panel);
  border:var(--border);
  border-radius:18px;
  padding:0;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}

details.sets > summary {
  list-style:none;
  cursor:pointer;
  padding:18px 20px;
  font-weight:700;
  border-bottom:var(--border);
  background:linear-gradient(155deg, rgba(30,46,112,0.96), rgba(16,24,58,0.86));
  user-select:none;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-family:"Cinzel", "Exo", serif;
  font-size:0.92rem;
}

details.sets[open] > summary {
  border-bottom:var(--border);
}

details.sets > summary::-webkit-details-marker {
  display:none;
}

.chev {
  float:right;
  opacity:0.82;
  transition:transform .18s ease;
}

details[open] .chev {
  transform:rotate(90deg);
}

.include-list {
  padding:18px 22px;
  background:linear-gradient(150deg, rgba(16,28,64,0.92), rgba(12,20,50,0.9));
}

.include-list .col {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:6px;
}

.include-list label {
  font-weight:600;
  color:#d4def3;
}

.btns {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

button,
.btn {
  appearance:none;
  -webkit-appearance:none;
  height:var(--ctrl-h);
  padding:0 16px;
  border-radius:999px;
  border:var(--border);
  background:var(--btn-bg);
  color:var(--ink);
  font:inherit;
  cursor:pointer;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:6px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
  box-shadow:0 12px 28px rgba(6,12,32,0.45);
}

button:hover,
.btn:hover {
  background:var(--btn-bg-hover);
  border:var(--border-strong);
  color:#fff;
}

button:disabled,
.btn:disabled {
  opacity:0.6;
  cursor:not-allowed;
}

.btn-sm {
  height:var(--ctrl-h);
  font-size:0.86rem;
}

input[type="number"],
select {
  height:var(--ctrl-h);
  border-radius:12px;
  border:1px solid rgba(121,205,255,0.4);
  background:rgba(12,20,46,0.86);
  color:#f5f7ff;
  padding:0 14px;
  font-size:0.95rem;
  font-family:inherit;
  width:100%;
  box-sizing:border-box;
}

select:focus,
input[type="number"]:focus {
  outline:none;
  border-color:rgba(255,141,240,0.6);
  box-shadow:0 0 0 2px rgba(255,141,240,0.25);
}

select option {
  color:#091435;
  background:#f2f5ff;
}

select option:hover,
select option:focus,
select option:checked {
  color:#f6f8ff;
  background:linear-gradient(145deg, rgba(28,46,112,0.95), rgba(18,32,82,0.92));
}

input.no-spin::-webkit-outer-spin-button,
input.no-spin::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0;
}

input.no-spin[type="number"] {
  -moz-appearance:textfield;
}

.input-stepper {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}

.input-stepper input[type="number"] {
  flex:1;
  min-width:0;
}

.input-stepper .stepper-btn {
  width:42px;
  min-width:42px;
  height:var(--ctrl-h);
  padding:0;
  border-radius:12px;
  border:1px solid rgba(121,205,255,0.5);
  background:rgba(8,14,36,0.9);
  color:#f4f8ff;
  font-size:1.2rem;
  font-weight:600;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.input-stepper .stepper-btn:hover {
  border-color:rgba(255,141,240,0.6);
  color:#fff;
  box-shadow:0 0 12px rgba(255,141,240,0.25);
}

.input-stepper .stepper-btn:focus-visible {
  outline:none;
  border-color:rgba(255,141,240,0.85);
  box-shadow:0 0 0 2px rgba(255,141,240,0.35);
}

.settings {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:var(--gap);
}

.section {
  background:var(--panel-soft);
  border:var(--border);
  border-radius:18px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:var(--shadow-soft);
  position:relative;
  overflow:hidden;
}

.section::before {
  content:"";
  position:absolute;
  inset:1px;
  border-radius:16px;
  border:1px solid rgba(255,141,240,0.2);
  opacity:0.7;
  pointer-events:none;
}

.section h3 {
  margin:0;
  font-size:1rem;
  color:var(--accent);
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-family:"Cinzel", "Exo", serif;
}

.section-body {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.section-actions {
  margin-top:auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.form-row {
  display:flex;
  flex-direction:column;
  gap:6px;
}

.row-inline {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

label {
  font-size:0.82rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:#dbe4ff;
}

.small {
  font-size:0.88rem;
  color:var(--muted);
}

.mono {
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.summary {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:var(--gap);
  margin-top:18px;
}

.summary .box {
  background:linear-gradient(150deg, rgba(26,40,96,0.92), rgba(16,26,64,0.86));
  border:var(--border);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow-soft);
  position:relative;
  overflow:hidden;
}

.summary .box::before {
  content:"";
  position:absolute;
  inset:1px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.04);
  pointer-events:none;
}

.summary h3 {
  margin:0 0 8px;
  font-size:1.08rem;
  color:var(--accent-alt);
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-family:"Cinzel", "Exo", serif;
}

.summary-card {
  display:flex;
  flex-direction:column;
  gap:16px;
}

.summary-header {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.pill-row {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.summary-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:16px;
}

.summary-grid .box {
  background:var(--panel-soft);
  border:var(--border);
  border-radius:16px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.summary-grid .label {
  font-size:0.82rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#d2dbff;
}

.summary-grid .value {
  font-size:1.5rem;
  font-weight:700;
  color:#fdfbff;
}

.summary-grid .value-pair {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.summary-grid .pair-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.summary-grid .sub-label {
  font-size:0.8rem;
  color:#b6c5ef;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.box-duo {
  display:flex;
  flex-direction:column;
  gap:6px;
}

table {
  width:100%;
  border-collapse:collapse;
}

.mini {
  font-size:0.94rem;
}

.mini th,
.mini td {
  border:var(--border);
  padding:10px 12px;
  text-align:right;
  background:rgba(7,12,30,0.35);
}

.mini th:first-child,
.mini td:first-child {
  text-align:left;
}

.mini .section-row td {
  background:linear-gradient(150deg, rgba(30,44,104,0.92), rgba(18,30,74,0.88));
  font-weight:700;
  color:#e0e8ff;
}

.right {
  text-align:right;
}

.main-table {
  margin-top:18px;
  font-size:0.96rem;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}

.main-table thead th {
  text-align:left;
  border-bottom:var(--border);
  padding:14px 12px;
  font-weight:700;
  color:#e4ecff;
  background:linear-gradient(160deg, rgba(32,48,112,0.95), rgba(18,28,68,0.9));
  position:sticky;
  top:0;
  z-index:2;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.main-table thead th.center {
  text-align:center;
}

.main-table tbody td {
  padding:12px;
  border-bottom:1px solid rgba(92,138,255,0.22);
  vertical-align:middle;
  background:rgba(8,14,32,0.35);
}

.main-table tbody tr:hover {
  background:rgba(89,221,255,0.05);
}

.center {
  text-align:center !important;
  white-space:nowrap;
}

.table-card {
  display:flex;
  flex-direction:column;
  gap:14px;
}

.tool-item {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:160px;
}

.check {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:0.85rem;
  color:#dbe4ff;
}

.check input {
  width:18px;
  height:18px;
}

.table-wrap {
  overflow-x:auto;
  border-radius:18px;
  box-shadow:var(--shadow-soft);
}

.table-foot {
  font-size:0.82rem;
  color:var(--muted);
}

.footnotes {
  margin:26px 0 0;
  display:grid;
  gap:10px;
}

.muted {
  color:var(--muted);
}

.status {
  margin-top:12px;
  font-weight:600;
  letter-spacing:0.04em;
}

.status.loading::before {
  content:"";
  display:inline-block;
  width:16px;
  height:16px;
  margin-right:8px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.2);
  border-top-color:var(--accent);
  animation:spin .8s linear infinite;
  vertical-align:-3px;
}

.loading-overlay {
  position:fixed;
  inset:0;
  background:rgba(5,8,12,0.88);
  backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}

.loading-overlay.active {
  opacity:1;
  pointer-events:auto;
}

.loading-content {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
}

.loading-text {
  font-weight:600;
  letter-spacing:0.4px;
  color:var(--ink);
  text-shadow:0 2px 12px rgba(0,0,0,0.55);
}

.spinner {
  width:62px;
  height:62px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,0.18);
  border-top-color:var(--accent);
  animation:spin 1s linear infinite;
}

@keyframes spin {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}

tr.ge {
  background:var(--green-bg);
  outline:1px solid var(--green-bd);
}

tr.lt {
  background:var(--red-bg);
  outline:1px solid var(--red-bd);
}

.table-tools {
  display:flex;
  gap:10px;
  align-items:center;
  margin:0 0 12px;
  flex-wrap:wrap;
}

.table-tools label {
  display:flex;
  align-items:center;
  gap:6px;
}

footer {
  max-width:1220px;
  margin:32px auto 52px;
  padding:0 20px;
  display:flex;
  justify-content:center;
  color:var(--muted);
  font-size:0.9rem;
}

.debug {
  margin-top:14px;
  display:none;
}

.debug.open {
  display:block;
}

.debug .grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:12px;
}

.debug .box {
  background:linear-gradient(150deg, rgba(24,36,94,0.9), rgba(14,24,62,0.86));
  border:var(--border);
  border-radius:14px;
  padding:14px;
  box-shadow:var(--shadow-soft);
}

.debug .k {
  color:#b6c4e2;
}

.riftbound-precon .table-wrap {
  background:rgba(10,18,44,0.62);
  padding:2px;
  border-radius:18px;
}

.riftbound-precon .main-table {
  background:rgba(10,18,44,0.82);
  border:var(--border);
  box-shadow:none;
}

.riftbound-precon .main-table thead th {
  background:rgba(18,28,68,0.82);
  border-bottom:1px solid rgba(121,205,255,0.28);
  font-size:0.78rem;
  letter-spacing:0.14em;
  position:static;
  top:auto;
}

.riftbound-precon .main-table tbody td {
  background:transparent;
  border-bottom:1px solid rgba(121,205,255,0.18);
  font-size:0.92rem;
  color:#eef1ff;
}

.riftbound-precon .main-table tbody tr:last-child td {
  border-bottom:none;
}

.riftbound-precon .main-table tbody tr.green {
  background:linear-gradient(140deg, rgba(36,118,96,0.32), rgba(28,68,60,0.24));
  border-left:3px solid var(--green-bd);
}

.riftbound-precon .main-table tbody td.right {
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.riftbound-precon .main-table tbody td.center {
  text-align:center;
}

.riftbound-precon .main-table tbody td.small {
  font-size:0.82rem;
  color:var(--muted);
}

.tool-list {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:20px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
}

.tool-card {
  position:relative;
  background:linear-gradient(155deg, rgba(24,38,86,0.92), rgba(14,22,46,0.9));
  border:1px solid rgba(76,224,255,0.32);
  border-radius:16px;
  padding:22px 24px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
  min-height:200px;
  overflow:hidden;
}

.tool-card::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(255,141,240,0.15), rgba(76,224,255,0) 70%);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}

.tool-card:hover,
.tool-card:focus-within {
  transform:translateY(-6px) scale(1.01);
  border-color:rgba(255,141,240,0.65);
  box-shadow:0 30px 40px rgba(7,12,32,0.58);
  background:linear-gradient(150deg, rgba(31,54,112,0.95), rgba(20,38,92,0.92));
}

.tool-card:hover::before,
.tool-card:focus-within::before {
  opacity:0.9;
}

.tool-title {
  font-size:1.2rem;
  font-weight:700;
  font-family:"Cinzel", "Exo", serif;
  margin:0;
  color:#fdf7ff;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.tool-meta {
  font-size:0.95rem;
  color:var(--muted);
  margin:0;
  line-height:1.5;
}

.tool-cta {
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  letter-spacing:0.18em;
  color:var(--accent);
  text-transform:uppercase;
  font-size:0.85rem;
}

.tool-cta::after {
  content:"↗";
  font-size:0.9rem;
  transition:transform .25s ease;
}

.tool-card:hover .tool-cta::after,
.tool-card:focus-within .tool-cta::after {
  transform:translate(4px,-2px);
}

.coming-soon {
  border-style:dashed;
  border-color:rgba(255,141,240,0.45);
  color:rgba(255,255,255,0.82);
  background:linear-gradient(160deg, rgba(34,44,94,0.82), rgba(12,22,52,0.88));
}

.note {
  background:linear-gradient(140deg, rgba(76,224,255,0.14), rgba(255,141,240,0.2));
  border:1px solid rgba(113,220,233,0.28);
  border-radius:14px;
  padding:18px 20px;
  color:#e6efff;
  font-size:0.95rem;
  box-shadow:0 18px 38px rgba(6,12,32,0.45);
  position:relative;
}

.note::before {
  content:"";
  position:absolute;
  inset:2px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  opacity:0.7;
  pointer-events:none;
}

@media (max-width:720px) {
  header {
    padding:32px 18px 18px;
  }

  header::after {
    inset:10px;
    border-radius:26px;
  }

  .site-banner {
    width:260px;
  }

  h1 {
    font-size:2rem;
    letter-spacing:0.12em;
  }

  main {
    padding:0 18px 42px;
  }

  .card {
    padding:22px;
  }

  .row-inline {
    grid-template-columns:1fr;
  }

  .summary {
    grid-template-columns:1fr;
  }

  .summary-grid {
    grid-template-columns:1fr;
  }

  .tool-item {
    min-width:unset;
    width:100%;
  }
}