:root {
  --xzfz5x:#F6F8FB;
  --qk1z13:#FFFFFF;
  --ran8cl:#1F2937;
  --ej4yw0:#6B7280;
  --uvovuo:#E5E9F0;
  --mtah8y:#0F172A;
  --ps5jbm:#0B84D8;
  --e2reou:#1D4ED8;
  --k43qe5:#16A34A;
  --jd850z:#14532D;
  --ims4r4:#D9F5E4;
  --xewn1s:#22C55E;
  --a0l3id:#0F1B2D
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--xzfz5x);
  color:var(--ran8cl);
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:18px;
  line-height:1.75
}

a {
  color:var(--ps5jbm)
}

img {
  max-width:100%;
  height:auto;
  display:block
}

.piece {
  max-width:1180px;
  margin:0 auto;
  padding:0 20px
}

h1,
h2,
h3,
h4 {
  font-family:'Poppins',system-ui,sans-serif;
  color:var(--mtah8y);
  line-height:1.2;
  margin:0
}

h2 {
  font-size:clamp(26px,3.4vw,40px);
  font-weight:700;
  padding:34px 0 14px;
  border-bottom:1px solid var(--uvovuo);
  margin-bottom:20px
}

h3 {
  font-size:clamp(22px,2.6vw,30px);
  font-weight:700;
  margin:30px 0 12px
}

h4 {
  font-size:22px;
  font-weight:700;
  margin:26px 0 10px
}

p {
  margin:0 0 18px
}

.object {
  background:#fff;
  border-bottom:1px solid var(--uvovuo)
}

.object .piece {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:96px
}

.logo {
  text-decoration:none
}

.logo img {
  width:66px;
  height:66px;
  object-fit:contain
}

.logo span {
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:22px;
  color:var(--mtah8y)
}

.menu a {
  text-decoration:none;
  font-size:19px
}

.factor {
  border-left:6px solid var(--ps5jbm);
  padding:26px 0 26px 22px;
  margin:0 0 26px
}

.factor h1 {
  font-size:clamp(32px,4.4vw,50px);
  font-weight:700
}

.dateline {
  color:var(--ps5jbm);
  font-size:18px;
  margin-top:8px
}

.top {
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:0 0 30px
}

.unitpart {
  position:relative;
  display:grid;
  grid-template-columns:130px minmax(0,1fr) auto auto;
  gap:18px;
  align-items:center;
  background:var(--qk1z13);
  border:1px solid var(--uvovuo);
  border-radius:10px;
  padding:36px 24px 26px 30px
}

.unitpart.is-first {
  border-color:var(--xewn1s)
}

.unit {
  position:absolute;
  top:-1px;
  left:-1px;
  background:var(--ims4r4);
  color:#15803D;
  font-weight:700;
  font-size:14px;
  padding:6px 14px;
  border-radius:10px 0 10px 0;
  letter-spacing:.02em
}

.unitpart-mark {
  display:flex;
  align-items:center;
  justify-content:center;
  height:70px
}

.unitpart-mark img {
  max-height:70px;
  width:auto
}

.unitpart-mark span {
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:20px;
  color:var(--mtah8y);
  text-align:center
}

.unitpart-heart {
  min-width:0
}

.chunk {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:6px
}

.chunk b {
  font-size:13px;
  letter-spacing:.12em;
  color:#8A94A6;
  font-weight:600
}

.tagbadge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--ims4r4);
  color:#166534;
  font-size:13px;
  font-weight:600;
  padding:3px 12px;
  border-radius:999px
}

.tagbadge i {
  font-style:normal;
  color:#F97316
}

.spot {
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:clamp(20px,2.3vw,28px);
  color:var(--jd850z);
  line-height:1.3
}

.spot em {
  font-style:normal;
  color:var(--k43qe5)
}

.fragment-2 {
  display:flex;
  align-items:center;
  gap:8px;
  color:#4B5563;
  font-size:16px;
  margin-top:6px
}

.fragment-2 i {
  font-style:normal;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--k43qe5);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px
}

.scoring {
  font-family:'Poppins',sans-serif;
  color:var(--k43qe5);
  font-size:40px;
  font-weight:600;
  white-space:nowrap
}

.scoring small {
  font-size:16px;
  color:#94A3B8;
  font-weight:400
}

.startplay {
  display:inline-block;
  background:var(--k43qe5);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:20px;
  letter-spacing:.05em;
  padding:14px 32px;
  border-radius:999px;
  box-shadow:0 8px 18px rgba(22,163,74,.28);
  white-space:nowrap;
  text-transform:uppercase
}

.startplay.is-off {
  background:#9CA3AF;
  box-shadow:none;
  cursor:default
}

.unitpart-mark img {
  max-width:130px;
  object-fit:contain
}

.conditions {
  grid-column:1/-1;
  border-top:1px dashed var(--uvovuo);
  padding-top:10px;
  margin-top:-4px;
  font-size:15px
}

.conditions summary {
  cursor:pointer;
  color:var(--ej4yw0);
  font-weight:500;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:6px
}

.conditions summary::-webkit-details-marker {
  display:none
}

.conditions summary::after {
  content:'▾';
  font-size:12px;
  transition:transform .15s
}

.conditions[open] summary::after {
  transform:rotate(180deg)
}

.conditions dl {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px 24px;
  margin:12px 0 6px
}

.conditions dt {
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8A94A6;
  font-weight:600
}

.conditions dd {
  margin:2px 0 0;
  color:var(--ran8cl);
  line-height:1.45
}

.conditions-portion {
  font-size:13px;
  color:#94A3B8;
  margin:6px 0 0
}

.part th:first-child,
.part td:first-child {
  font-weight:700;
  color:var(--mtah8y);
  white-space:nowrap
}

.part td {
  white-space:nowrap
}

.part td:nth-child(2) {
  white-space:normal;
  min-width:180px;
  color:var(--jd850z);
  font-weight:600
}

.part tbody tr:nth-child(even) td {
  background:#FAFCFE
}

.slimbar {
  margin:0 0 10px
}

.aspect {
  list-style:none;
  padding:0;
  margin:0 0 26px;
  display:flex;
  flex-direction:column;
  gap:10px
}

.aspect li {
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  background:var(--qk1z13);
  border:1px solid var(--uvovuo);
  border-radius:10px;
  padding:12px 16px
}

.aspect.has-logos li {
  grid-template-columns:36px 90px minmax(0,1fr) auto
}

.aspect-entity {
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--ims4r4);
  color:#15803D;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px
}

.aspect-mark img {
  max-height:42px;
  max-width:90px;
  object-fit:contain
}

.aspect-body b {
  display:block;
  font-family:'Poppins',sans-serif;
  color:var(--mtah8y);
  font-size:18px;
  line-height:1.3
}

.aspect-body small {
  display:block;
  color:var(--ej4yw0);
  font-size:15px;
  line-height:1.4
}

.aspect .startplay {
  font-size:15px;
  padding:10px 22px;
  box-shadow:none
}

.critique {
  margin:0 0 10px
}

.fragment {
  border:3px solid var(--ps5jbm);
  border-radius:16px;
  padding:6px;
  background:#fff;
  margin:26px 0 8px
}

.fragment img {
  border-radius:10px;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top
}

.fragment.is-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px;
  background:#0B1220
}

.fragment.is-logo img {
  max-height:110px;
  width:auto;
  aspect-ratio:auto;
  object-fit:contain
}

.plainlist {
  list-style:none;
  padding:0;
  margin:0 0 18px
}

.plainlist li {
  position:relative;
  padding:6px 0 6px 38px
}

.plainlist li::before {
  content:'';
  position:absolute;
  left:10px;
  top:17px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--ps5jbm);
  box-shadow:0 0 0 4px rgba(11,132,216,.18)
}

.scrollbox {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:18px 0 26px;
  border-radius:10px
}

.scrollbox .datatable {
  margin:0;
  min-width:520px
}

.datatable {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid #D8E2EE;
  border-radius:10px;
  overflow:hidden;
  margin:18px 0 26px;
  font-size:17px;
  background:#fff
}

.datatable th,
.datatable td {
  padding:16px 18px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid #E8EEF5
}

.datatable tr:last-child td {
  border-bottom:0
}

.datatable thead th {
  background:#F1F5F9;
  font-weight:700
}

.factline th {
  width:50%;
  background:#F4F7FB;
  font-weight:400
}

.startplay:not(.is-off),
.cta a:not(.is-off) {
  transition:transform .15s,filter .15s
}

.startplay:not(.is-off):hover,
.cta a:not(.is-off):hover {
  filter:brightness(1.08);
  transform:translateY(-1px)
}

.cta {
  display:flex;
  justify-content:center;
  margin:12px 0 26px
}

.cta a {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--e2reou);
  color:#fff;
  font-weight:700;
  font-size:21px;
  padding:14px 26px;
  border-radius:12px;
  box-shadow:0 0 0 7px rgba(29,78,216,.14)
}

.cta a.is-off {
  background:#9CA3AF;
  box-shadow:none;
  text-decoration:none;
  cursor:default
}

.dividerline {
  border:0;
  border-top:1px solid var(--uvovuo);
  margin:10px 0 0
}

.footline {
  background:var(--a0l3id);
  color:#CBD5E1;
  text-align:center;
  padding:40px 20px;
  font-size:18px;
  margin-top:50px
}

.footline small {
  display:block;
  margin-top:10px;
  font-size:14px;
  color:#94A3B8
}

.footline a {
  color:#CBD5E1
}

.footline-navbar {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 22px;
  margin:0 0 14px
}

.footline-navbar a {
  text-decoration:none;
  font-size:16px
}

.footline-detail {
  margin:0 0 6px;
  font-size:15px;
  color:#9CA3AF
}

.navlist ul {
  margin:0 0 22px;
  padding-left:22px
}

.navlist li {
  margin:6px 0
}

.scrolltop {
  position:fixed;
  right:30px;
  bottom:30px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--ps5jbm);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:20px
}

.perksrow {
  list-style:none;
  padding:0;
  margin:8px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  font-size:15px;
  color:#4B5563
}

.perksrow li::before {
  content:'✓';
  color:var(--k43qe5);
  font-weight:700;
  margin-right:6px
}

.authorbox {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  font-size:16px;
  color:var(--ej4yw0)
}

.userimg {
  border-radius:50%;
  object-fit:cover;
  flex:none
}

.element-component {
  display:flex;
  gap:20px;
  align-items:flex-start;
  background:var(--qk1z13);
  border:1px solid var(--uvovuo);
  border-radius:12px;
  padding:22px;
  margin:34px 0 10px
}

.element-component h3 {
  margin:4px 0 6px
}

.element-areabox {
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8A94A6;
  font-weight:600
}

.element-thing {
  color:var(--ej4yw0);
  margin:0 0 10px
}

.element-head {
  display:flex;
  align-items:center;
  gap:22px
}

.element-factor {
  list-style:none;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px
}

.unitpart-2 {
  font-size:14px;
  color:var(--ej4yw0);
  margin:18px 0 0
}

.unitpart-2 ol {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px
}

.unitpart-2 li+li::before {
  content:'›';
  margin-right:6px;
  color:#94A3B8
}

.unitpart-2 a {
  text-decoration:none
}

.morelink-r {
  display:block;
  text-align:center;
  margin-top:8px;
  font-size:14px;
  font-weight:600
}

.moretext {
  margin:6px 0 18px;
  font-weight:600
}

.showmore {
  margin:10px 0 0;
  font-weight:600
}

.takeaways {
  background:var(--qk1z13);
  border:1px solid var(--uvovuo);
  border-radius:12px;
  padding:14px 18px 14px 34px;
  margin:0 0 22px
}

.takeaways li {
  margin:4px 0
}

.showmore a::after {
  content:" →"
}

.linkset ul {
  list-style:none;
  padding:0;
  margin:0 0 18px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px
}

.linkset li a {
  display:block;
  background:var(--qk1z13);
  border:1px solid var(--uvovuo);
  border-radius:10px;
  padding:12px 16px;
  text-decoration:none;
  font-weight:600
}

@media (max-width:820px) {
  body {
    font-size:17px
  }
  .unitpart {
    grid-template-columns:84px minmax(0,1fr);
    gap:10px 14px;
    padding:36px 14px 14px
  }
  .unitpart-mark {
    height:auto;
    min-height:48px
  }
  .unitpart-mark img {
    max-width:84px;
    max-height:48px
  }
  .unitpart-mark span {
    font-size:16px
  }
  .spot {
    font-size:19px
  }
  .scoring {
    font-size:24px;
    text-align:center
  }
  .scoring small {
    font-size:12px
  }
  .unitpart .startplay {
    display:block;
    text-align:center;
    font-size:16px;
    padding:12px 16px
  }
  .datatable {
    font-size:15px
  }
  .conditions {
    text-align:left
  }
  .aspect li,
  .aspect.has-logos li {
    grid-template-columns:30px minmax(0,1fr);
    gap:10px
  }
  .aspect-mark {
    display:none
  }
  .aspect .startplay {
    grid-column:1/-1;
    text-align:center
  }
  .scrolltop {
    right:16px;
    bottom:16px
  }
}