:root {
  --page-bg: #f0f4f8;
  --card-bg: #ffffff;
  --text: #334e68;
  --page-width: 800px;
  --card-padding: 25px;
  --card-radius: 10px;
  --image-radius: 8px;
  --page-pad: 15px;
  --paragraph-gap: 22px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--page-bg); padding: var(--page-pad); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.page-shell { width: min(100%, var(--page-width)); margin: 0 auto; }
.landing-card { background: var(--card-bg); border-radius: var(--card-radius); padding: var(--card-padding); box-shadow: 0 3px 12px rgba(0,0,0,.07); overflow: hidden; }
.hero-image { display: block; width: 100%; height: auto; border-radius: var(--image-radius); margin: 0 0 20px; object-fit: cover; }
.copy p { margin: 0 3px var(--paragraph-gap); color: var(--text); font-size: 16px; line-height: 1.7; }
.copy p:last-child { margin-bottom: 0; }
.landing-card.split-left, .landing-card.split-right { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.landing-card.split-left .hero-image, .landing-card.split-right .hero-image { height: 100%; min-height: 330px; margin: 0; }
.landing-card.split-right .hero-image { order: 2; }
.landing-card.split-right .copy { order: 1; }
.settings-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 10; border: 0; border-radius: 999px; padding: 11px 16px; background: #243b53; color: #fff; font: inherit; cursor: pointer; box-shadow: 0 5px 18px rgba(0,0,0,.18); }
.settings-panel { position: fixed; right: 18px; bottom: 70px; z-index: 11; width: min(330px, calc(100vw - 36px)); padding: 18px; border-radius: 14px; background: #fff; color: #243b53; box-shadow: 0 12px 40px rgba(0,0,0,.2); transform: translateY(10px); opacity: 0; pointer-events: none; transition: .2s ease; }
.settings-panel.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.settings-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.settings-head button { border: 0; background: transparent; font-size: 25px; cursor: pointer; }
.settings-panel label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin: 12px 0; font-size: 14px; }
.settings-panel input[type="range"], .settings-panel select { grid-column: 1 / -1; width: 100%; }
.settings-panel output { font-variant-numeric: tabular-nums; }
.reset-btn { width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid #bcccdc; border-radius: 8px; background: #f0f4f8; cursor: pointer; }
@media (max-width: 720px) {
  .landing-card.split-left, .landing-card.split-right { display: block; }
  .landing-card.split-left .hero-image, .landing-card.split-right .hero-image { height: auto; min-height: 0; margin: 0 0 20px; }
}