.unpuzzle-guide { overflow: hidden; }
.unpuzzle-guide .container { max-inline-size: var(--content-max-width); }
.unpuzzle-guide__hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.unpuzzle-guide__hero-copy { min-inline-size: 0; inline-size: 100%; max-inline-size: 620px; }
.unpuzzle-guide__hero-lead { max-inline-size: 42ch; font-size: var(--font-size-18); line-height: var(--line-height-relaxed); }
.unpuzzle-guide__hero-statement { max-inline-size: 42ch; }
.unpuzzle-guide__orientation { display: flex; flex-direction: column; gap: 16px; max-inline-size: 460px; margin-block-start: 32px; }
.unpuzzle-guide__orientation > * { margin: 0; }
.unpuzzle-guide__mini-steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.unpuzzle-guide__mini-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; min-inline-size: 0; }
.unpuzzle-guide__mini-steps strong { color: var(--color-lavender-deep); font-variant-numeric: tabular-nums; }
.unpuzzle-guide__hero-visual { position: relative; min-inline-size: 0; margin: 0; padding-block-start: 40px; }
.unpuzzle-guide__hero-visual img { inline-size: 100%; max-inline-size: 100%; border: var(--border); border-radius: var(--radius-md); object-fit: cover; aspect-ratio: 4 / 3; }
.unpuzzle-guide__hero-diagram { position: absolute; z-index: 1; inset-block-start: 0; inset-inline-end: 4%; inline-size: min(48%, 350px); block-size: 190px; border: var(--border); border-radius: var(--radius-md); background: var(--color-pale-stone); overflow: hidden; }
.unpuzzle-guide__move-block, .unpuzzle-guide__static-block { position: absolute; border: 1px solid var(--color-charcoal); border-radius: 3px; background: var(--color-soft-mint); }
.unpuzzle-guide__move-block { inset-inline-start: 24%; inset-block-start: 62px; inline-size: 76px; block-size: 58px; padding: 0; transition: transform var(--transition-fast), background-color var(--transition-fast); }
.unpuzzle-guide__move-block:hover, .unpuzzle-guide__move-block:focus-visible, .unpuzzle-guide__move-block.is-moving { transform: translateX(4px); background: #b3cdbd; }
.unpuzzle-guide__move-block::before, .unpuzzle-guide__static-block::before { content: ""; position: absolute; inset-inline-start: 7px; inset-block-start: -10px; inline-size: 76px; block-size: 10px; border: 1px solid var(--color-charcoal); transform: skewX(-38deg); transform-origin: bottom left; background: #e2f0e6; }
.unpuzzle-guide__move-block::after, .unpuzzle-guide__static-block::after { content: ""; position: absolute; inset-inline-end: -10px; inset-block-start: -5px; inline-size: 10px; block-size: 58px; border: 1px solid var(--color-charcoal); transform: skewY(-38deg); transform-origin: bottom left; background: var(--color-mint-deep); }
.unpuzzle-guide__static-block--one { inset-inline-start: 5%; inset-block-end: 20px; inline-size: 56px; block-size: 44px; background: var(--color-lavender-mist); }
.unpuzzle-guide__static-block--two { inset-inline-start: 43%; inset-block-end: 22px; inline-size: 55px; block-size: 40px; background: var(--color-charcoal); }
.unpuzzle-guide__diagram-arrow { position: absolute; inset-inline-end: 15%; inset-block-start: 70px; color: var(--color-mint-deep); font-size: 36px; line-height: 1; }
.unpuzzle-guide__diagram-note { position: absolute; inset-inline-end: 10%; inset-block-end: 18px; color: var(--color-slate); font-size: var(--font-size-14); }
.unpuzzle-guide__rules-intro { max-inline-size: 760px; }
.unpuzzle-guide__rule-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 24px; align-items: start; margin-block-start: 48px; }
.unpuzzle-guide__rule-card { display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; margin: 0; }
.unpuzzle-guide__rule-card > * { margin: 0; }
.unpuzzle-guide__rule-card--primary { grid-column: 1; grid-row: span 2; min-block-size: 510px; }
.unpuzzle-guide__rule-card--blocked { grid-column: 2; margin-block-start: 32px; }
.unpuzzle-guide__rule-card--change { grid-column: 3; margin-block-start: 12px; }
.unpuzzle-guide__card-head { display: flex; align-items: center; gap: 12px; min-inline-size: 0; }
.unpuzzle-guide__card-head .eyebrow { margin: 0; }
.unpuzzle-guide__rule-diagram { position: relative; block-size: 175px; border-block-end: var(--border); }
.unpuzzle-guide__rule-cube, .unpuzzle-guide__tiny-cube, .unpuzzle-guide__demo-block, .unpuzzle-guide__demo-obstacle { display: block; border: 1px solid var(--color-charcoal); border-radius: 3px; background: var(--color-lavender-mist); }
.unpuzzle-guide__rule-cube { position: absolute; inset-inline-start: 12%; inset-block-start: 52px; inline-size: 98px; block-size: 72px; background: var(--color-soft-mint); }
.unpuzzle-guide__rule-cube::before, .unpuzzle-guide__tiny-cube::before, .unpuzzle-guide__demo-block::before, .unpuzzle-guide__demo-obstacle::before { content: ""; position: absolute; inset-inline-start: 8px; inset-block-start: -11px; inline-size: calc(100% - 1px); block-size: 11px; border: 1px solid var(--color-charcoal); transform: skewX(-38deg); transform-origin: bottom left; background: #e7f1e9; }
.unpuzzle-guide__rule-arrow { position: absolute; inset-inline-start: 57%; inset-block-start: 54px; color: var(--color-mint-deep); font-size: 46px; }
.unpuzzle-guide__route-label { position: absolute; inset-inline-start: 58%; inset-block-start: 110px; color: var(--color-mint-deep); font-size: var(--font-size-14); font-weight: 700; }
.unpuzzle-guide__compare-diagram { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-block-size: 132px; }
.unpuzzle-guide__compare-diagram > div { position: relative; min-inline-size: 0; padding-block-start: 28px; }
.unpuzzle-guide__tiny-cube { position: absolute; inset-inline-start: 4px; inset-block-start: 34px; inline-size: 42px; block-size: 35px; }
.unpuzzle-guide__tiny-cube--obstacle { inset-inline-start: 48px; background: var(--color-charcoal); }
.unpuzzle-guide__tiny-cube--mint { background: var(--color-soft-mint); }
.unpuzzle-guide__tiny-arrow { position: absolute; inset-inline-start: 54px; inset-block-start: 28px; color: var(--color-mint-deep); font-size: 28px; }
.unpuzzle-guide__compare-diagram small { position: absolute; inset-inline-start: 0; inset-block-end: 5px; color: var(--color-slate); }
.unpuzzle-guide__before-after { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-block-size: 110px; color: var(--color-mint-deep); font-size: var(--font-size-14); font-weight: 700; }
.unpuzzle-guide__before-after span { display: grid; inline-size: 82px; block-size: 58px; place-items: center; border: var(--border); border-radius: var(--radius-sm); background: var(--color-warm-white); }
.unpuzzle-guide__rules-close { max-inline-size: 700px; margin-block: 32px 0; color: var(--color-slate); }
.unpuzzle-guide__process { background: var(--color-pale-stone); }
.unpuzzle-guide__process-intro { max-inline-size: 680px; }
.unpuzzle-guide__process-board { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-block-start: 48px; }
.unpuzzle-guide__process-line { position: absolute; inset-inline-start: calc(16.666% - 12px); inset-block: 16px; inline-size: 1px; background: var(--color-line-stone); }
.unpuzzle-guide__process-step { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr); grid-column: 1 / -1; min-inline-size: 0; }
.unpuzzle-guide__process-marker { grid-column: 2; z-index: 1; display: flex; justify-content: center; padding-block-start: 32px; }
.unpuzzle-guide__process-card { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 58%); gap: 16px; align-items: center; min-inline-size: 0; }
.unpuzzle-guide__process-card > * { min-inline-size: 0; }
.unpuzzle-guide__process-step--left .unpuzzle-guide__process-card { grid-column: 1; }
.unpuzzle-guide__process-step--right .unpuzzle-guide__process-card { grid-column: 3; }
.unpuzzle-guide__process-art { position: relative; min-block-size: 150px; border-radius: var(--radius-sm); background: var(--color-pale-stone); overflow: hidden; }
.unpuzzle-guide__process-art::before, .unpuzzle-guide__process-art::after { content: ""; position: absolute; border: 1px solid var(--color-charcoal); border-radius: 3px; }
.unpuzzle-guide__process-art::before { inset-inline-start: 22%; inset-block-start: 45%; inline-size: 58px; block-size: 46px; background: var(--color-lavender-mist); }
.unpuzzle-guide__process-art::after { inset-inline-start: 48%; inset-block-start: 26%; inline-size: 45px; block-size: 38px; background: var(--color-soft-mint); }
.unpuzzle-guide__process-art--scan { background: linear-gradient(90deg, transparent 49%, var(--color-line-stone) 50%, transparent 51%), var(--color-pale-stone); }
.unpuzzle-guide__process-art--move::after { transform: translateX(25px); background: var(--color-soft-mint); }
.unpuzzle-guide__process-art--read::before { opacity: .45; }
.unpuzzle-guide__process-art--clear::before { inset-inline-start: 36%; background: var(--color-soft-mint); }
.unpuzzle-guide__process-art--clear::after { opacity: .2; transform: translateX(45px); }
.unpuzzle-guide__process-copy { min-inline-size: 0; }
.unpuzzle-guide__process-copy > :last-child { margin-block-end: 0; }
.unpuzzle-guide__process-close { max-inline-size: 680px; margin-block: 40px 0; color: var(--color-slate); }
html.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 360ms ease-out, transform 360ms ease-out; }
[data-reveal].is-visible { opacity: 1; transform: none; }
.unpuzzle-guide__spatial-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 5fr); gap: 24px; align-items: start; }
.unpuzzle-guide__spatial-copy { grid-column: 1; max-inline-size: 700px; }
.unpuzzle-guide__definition { max-inline-size: 35ch; color: var(--color-lavender-deep); font-family: var(--font-heading); font-size: var(--font-size-22); font-weight: 700; line-height: 1.35; }
.unpuzzle-guide__checklist { display: flex; flex-direction: column; gap: 12px; max-inline-size: 620px; margin-block-start: 32px; }
.unpuzzle-guide__checklist h3 { margin: 0; }
.unpuzzle-guide__check-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; min-inline-size: 0; border: 0; border-block-end: var(--border); background: transparent; padding: 12px 0; text-align: start; }
.unpuzzle-guide__check-item span { grid-row: span 2; inline-size: 18px; block-size: 18px; margin-block-start: 3px; border: 1px solid var(--color-charcoal); border-radius: 2px; }
.unpuzzle-guide__check-item strong { min-inline-size: 0; }
.unpuzzle-guide__check-item em { min-inline-size: 0; color: var(--color-slate); font-size: var(--font-size-14); font-style: normal; }
.unpuzzle-guide__check-item.is-complete span { border-color: var(--color-mint-deep); background: var(--color-soft-mint); }
.unpuzzle-guide__check-item.is-complete span::after { content: "✓"; display: grid; place-items: center; color: var(--color-mint-deep); font-size: 13px; font-weight: 700; }
.unpuzzle-guide__spatial-media { position: relative; grid-column: 3; min-inline-size: 0; padding-block-end: 72px; }
.unpuzzle-guide__spatial-media figure { margin: 0; }
.unpuzzle-guide__spatial-media img { inline-size: 100%; border: var(--border); border-radius: var(--radius-md); object-fit: cover; aspect-ratio: 3 / 2; }
.unpuzzle-guide__notice { position: absolute; inset-inline-start: -22%; inset-block-end: 0; inline-size: min(70%, 320px); display: flex; flex-direction: column; gap: 12px; }
.unpuzzle-guide__notice > * { margin: 0; }
.unpuzzle-guide__practice-head { max-inline-size: 640px; margin-inline: auto; text-align: center; }
.unpuzzle-guide__practice-head h2 { margin-inline: auto; }
.unpuzzle-guide__practice-board { display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr); gap: 24px; max-inline-size: 980px; margin: 48px auto 0; border: var(--border); border-radius: var(--radius-md); padding: 24px; }
.unpuzzle-guide__practice-diagram { position: relative; min-inline-size: 0; min-block-size: 280px; border-radius: var(--radius-sm); background: var(--color-warm-white); overflow: hidden; }
.unpuzzle-guide__demo-block { position: absolute; inline-size: 112px; block-size: 82px; padding: 0; color: var(--color-charcoal); font-size: var(--font-size-14); font-weight: 700; transition: transform var(--transition-fast), background-color var(--transition-fast); }
.unpuzzle-guide__demo-block span { position: relative; z-index: 1; }
.unpuzzle-guide__demo-block--free { inset-inline-start: 16%; inset-block-start: 55%; background: var(--color-soft-mint); }
.unpuzzle-guide__demo-block--blocked { inset-inline-start: 46%; inset-block-start: 24%; background: var(--color-lavender-mist); }
.unpuzzle-guide__demo-block--free.is-moving { transform: translateX(4px); background: #b3cdbd; }
.unpuzzle-guide__demo-block.is-selected { outline: 2px solid var(--color-lavender-deep); outline-offset: 3px; }
.unpuzzle-guide__demo-obstacle { position: absolute; inset-inline-start: 68%; inset-block-start: 25%; inline-size: 76px; block-size: 72px; background: var(--color-charcoal); }
.unpuzzle-guide__demo-arrow { position: absolute; color: var(--color-mint-deep); font-size: 44px; line-height: 1; }
.unpuzzle-guide__demo-arrow--free { inset-inline-start: 39%; inset-block-start: 59%; }
.unpuzzle-guide__demo-arrow--blocked { inset-inline-start: 61%; inset-block-start: 28%; color: var(--color-lavender-deep); }
.unpuzzle-guide__practice-result { display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; align-self: stretch; border-inline-start: var(--border); padding-inline-start: 24px; }
.unpuzzle-guide__practice-result > * { margin: 0; }
.unpuzzle-guide__practice-result .button { align-self: flex-start; margin-block-start: auto; }
.unpuzzle-guide__balance-intro { max-inline-size: 720px; }
.unpuzzle-guide__balance-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 24px; align-items: stretch; margin-block-start: 48px; }
.unpuzzle-guide__balance-card { display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; border: var(--border); border-radius: var(--radius-md); padding: 24px; }
.unpuzzle-guide__balance-card > * { margin: 0; }
.unpuzzle-guide__balance-card--main { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.unpuzzle-guide__balance-card--rhythm { grid-column: 7 / span 3; grid-row: 1; }
.unpuzzle-guide__balance-card--limit { grid-column: 10 / span 3; grid-row: 1; }
.unpuzzle-guide__balance-card--audience { grid-column: 4 / span 6; grid-row: 2; }
.unpuzzle-guide__cta-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 1fr) minmax(300px, 4fr); gap: 24px; align-items: start; }
.unpuzzle-guide__cta-copy { grid-column: 1; max-inline-size: 650px; }
.unpuzzle-guide__cta-card { grid-column: 3; display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; }
.unpuzzle-guide__cta-card > * { margin: 0; }
.unpuzzle-guide__cta-card .google-play-badge { align-self: flex-start; }
.unpuzzle-guide__disclaimer { border-block-start: var(--border); padding-block-start: 12px; color: var(--color-slate); font-size: var(--font-size-12); line-height: 1.5; }
.unpuzzle-guide__related-intro { max-inline-size: 700px; }
.unpuzzle-guide__related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-inline-size: calc((100% / 12 * 8) - 8px); margin-block-start: 32px; }
.unpuzzle-guide__related-card { display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; }
.unpuzzle-guide__related-card > * { margin: 0; }
.unpuzzle-guide__related-card--offset { margin-block-start: 32px; }
.unpuzzle-guide__related-card a { align-self: flex-start; font-weight: 700; }

@media (max-width: 1039px) {
  .unpuzzle-guide__hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .unpuzzle-guide__hero-copy { max-inline-size: 720px; }
  .unpuzzle-guide__hero-visual { max-inline-size: 680px; padding-block-start: 28px; }
  .unpuzzle-guide__hero-diagram { inset-inline-end: 2%; }
}
@media (max-width: 959px) {
  .unpuzzle-guide__rule-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .unpuzzle-guide__rule-card--primary { grid-column: 1 / -1; grid-row: auto; min-block-size: 0; }
  .unpuzzle-guide__rule-card--blocked { grid-column: 1 / span 3; margin-block-start: 0; }
  .unpuzzle-guide__rule-card--change { grid-column: 4 / span 3; margin-block-start: 0; }
  .unpuzzle-guide__process-board { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .unpuzzle-guide__process-line { inset-inline-start: 24px; }
  .unpuzzle-guide__process-step { grid-template-columns: 48px minmax(0, 1fr); grid-column: 1 / -1; }
  .unpuzzle-guide__process-marker { grid-column: 1; padding-block-start: 28px; }
  .unpuzzle-guide__process-card, .unpuzzle-guide__process-step--left .unpuzzle-guide__process-card, .unpuzzle-guide__process-step--right .unpuzzle-guide__process-card { grid-column: 2; grid-template-columns: minmax(150px, 36%) minmax(0, 64%); }
  .unpuzzle-guide__spatial-grid { grid-template-columns: 1fr; gap: 32px; }
  .unpuzzle-guide__spatial-copy { grid-column: 1; }
  .unpuzzle-guide__spatial-media { grid-column: 1; max-inline-size: 83.333%; padding-block-end: 56px; }
  .unpuzzle-guide__notice { inset-inline-start: 8%; inline-size: min(55%, 320px); }
  .unpuzzle-guide__practice-board { grid-template-columns: 1fr; }
  .unpuzzle-guide__practice-result { border-inline-start: 0; border-block-start: var(--border); padding-inline-start: 0; padding-block-start: 24px; }
  .unpuzzle-guide__cta-grid { grid-template-columns: 1fr; gap: 32px; }
  .unpuzzle-guide__cta-copy, .unpuzzle-guide__cta-card { grid-column: 1; }
  .unpuzzle-guide__cta-card { max-inline-size: 83.333%; }
}
@media (max-width: 859px) {
  .unpuzzle-guide__balance-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto; }
  .unpuzzle-guide__balance-card--main { grid-column: 1 / -1; grid-row: auto; }
  .unpuzzle-guide__balance-card--rhythm { grid-column: 1 / span 3; grid-row: auto; }
  .unpuzzle-guide__balance-card--limit { grid-column: 4 / span 3; grid-row: auto; }
  .unpuzzle-guide__balance-card--audience { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 759px) {
  .unpuzzle-guide__related-grid { grid-template-columns: 1fr; max-inline-size: 100%; }
  .unpuzzle-guide__related-card--offset { margin-block-start: 0; margin-inline-start: 8px; }
}
@media (max-width: 679px) {
  .unpuzzle-guide__hero-diagram { position: relative; inset: auto; inline-size: 100%; max-inline-size: 360px; margin-block-end: 16px; }
  .unpuzzle-guide__hero-visual { padding-block-start: 0; }
  .unpuzzle-guide__hero-lead { font-size: var(--font-size-16); }
  .unpuzzle-guide__rule-grid { grid-template-columns: 1fr; gap: 16px; }
  .unpuzzle-guide__rule-card--primary, .unpuzzle-guide__rule-card--blocked, .unpuzzle-guide__rule-card--change { grid-column: 1; min-block-size: 220px; margin-inline: 0; }
  .unpuzzle-guide__rule-card--blocked { margin-inline-end: 10px; }
  .unpuzzle-guide__rule-card--change { margin-inline-start: 10px; }
  .unpuzzle-guide__process-card, .unpuzzle-guide__process-step--left .unpuzzle-guide__process-card, .unpuzzle-guide__process-step--right .unpuzzle-guide__process-card { grid-template-columns: 1fr; }
  .unpuzzle-guide__process-art { min-block-size: 145px; }
  .unpuzzle-guide__spatial-media { max-inline-size: 100%; padding-block-end: 0; }
  .unpuzzle-guide__notice { position: relative; inset: auto; inline-size: calc(100% - 12px); margin: 16px 0 0 12px; }
  .unpuzzle-guide__practice-board { padding: 16px; }
  .unpuzzle-guide__practice-diagram { min-block-size: 280px; }
  .unpuzzle-guide__demo-block { inline-size: 92px; block-size: 72px; }
  .unpuzzle-guide__demo-block--free { inset-inline-start: 8%; }
  .unpuzzle-guide__demo-block--blocked { inset-inline-start: 42%; }
  .unpuzzle-guide__demo-obstacle { inset-inline-start: 67%; inline-size: 58px; block-size: 64px; }
  .unpuzzle-guide__demo-arrow--free { inset-inline-start: 32%; }
  .unpuzzle-guide__demo-arrow--blocked { inset-inline-start: 58%; }
  .unpuzzle-guide__balance-grid { grid-template-columns: 1fr; gap: 16px; }
  .unpuzzle-guide__balance-card--main, .unpuzzle-guide__balance-card--rhythm, .unpuzzle-guide__balance-card--limit, .unpuzzle-guide__balance-card--audience { grid-column: 1; min-block-size: auto; }
  .unpuzzle-guide__cta-card { max-inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .unpuzzle-guide__move-block:hover, .unpuzzle-guide__move-block:focus-visible, .unpuzzle-guide__move-block.is-moving, .unpuzzle-guide__demo-block--free.is-moving { transform: none; }
  html.js [data-reveal] { opacity: 1; transform: none; }
}