:root {
  color-scheme: light;
  --sf-bg: #e9e2d1;
  --sf-ink: #304d50;
  --sf-muted: #667e73;
  --sf-accent: #a65f49;
  --sf-mint: #d5e5ce;
  --sf-line: #bdc8b5;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: var(--sf-bg);
  color: var(--sf-ink);
  background-image: radial-gradient(ellipse at 62% 22%, #d4e3d18c, transparent 62%);
  -webkit-font-smoothing: antialiased
}

button, a {
  -webkit-tap-highlight-color: transparent
}

button {
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 44px
}

a {
  color: inherit;
  text-decoration: none
}

button:focus-visible, a:focus-visible, canvas:focus-visible {
  outline: 3px solid var(--sf-accent);
  outline-offset: 5px
}

button:disabled {
  cursor: default;
  opacity: .45
}

[hidden] {
  display: none!important
}

.sf-nav {
  max-width: 1480px;
  margin: auto;
  height: 96px;
  padding: 0 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--sf-line)
}

.sf-brand {
  font-weight: 800;
  letter-spacing: -1.2px;
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 5px
}

.sf-brand span {
  color: var(--sf-accent);
  font-weight: 400;
  margin: 0 3px
}

.sf-brand i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #598b7c;
  margin-left: 6px
}

.sf-nav-note {
  font: 9px ui-monospace, monospace;
  letter-spacing: 1.7px;
  color: #687f75
}

.sf-back {
  font-size: 12px;
  color: #526f66
}

.sf-back span {
  margin-left: 18px;
  color: var(--sf-accent)
}

.sf-main {
  width: min(1120px, calc(100% - 96px));
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: minmax(245px, 1fr) minmax(360px, 450px) 180px;
  gap: 52px;
  align-items: start
}

.sf-intro {
  padding-top: 38px
}

.sf-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--sf-accent);
  font: 9px ui-monospace, monospace;
  letter-spacing: 1.6px
}

.sf-eyebrow i {
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%
}

h1 {
  font-size: 65px;
  line-height: 1.16;
  font-weight: 650;
  letter-spacing: -4px;
  margin: 27px 0 22px
}

h1 span {
  display: block;
  color: var(--sf-accent)
}

h1 em {
  font-style: normal;
  font-weight: 400;
  font-size: 52px;
  display: inline-block;
  margin-left: 16px
}

.sf-deck {
  font-size: 14px;
  line-height: 1.9;
  color: #637d73;
  margin: 0
}

.sf-intro-line {
  width: 42px;
  height: 1px;
  background: var(--sf-accent);
  margin: 34px 0
}

.sf-chapter span {
  font: 8px ui-monospace, monospace;
  letter-spacing: 1.5px;
  color: #687f75;
  display: block;
  margin-bottom: 11px
}

.sf-chapter b {
  font-size: 14px;
  font-weight: 500
}

.sf-steps {
  padding: 0;
  list-style: none;
  margin: 23px 0 12px
}

.sf-steps li {
  display: flex;
  gap: 13px;
  margin: 0 0 21px
}

.sf-steps>li>span {
  font: 9px ui-monospace, monospace;
  color: var(--sf-accent);
  padding-top: 3px
}

.sf-steps p {
  font-size: 11px;
  color: #667e73;
  line-height: 1.7;
  margin: 0;
  max-width: 200px
}

.sf-steps b {
  display: block;
  color: #304d50;
  font-weight: 500;
  font-size: 12px;
  margin-bottom: 4px
}

.sf-guide-link {
  border: 0;
  background: none;
  color: var(--sf-accent);
  font-size: 11px;
  border-bottom: 1px solid #a65f4980;
  padding: 8px 0
}

.sf-guide-link span {
  margin-left: 34px
}

.sf-local {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px
}

.sf-local>span {
  color: #598b7c;
  font-size: 24px
}

.sf-local p {
  font-size: 9px;
  color: #687f75;
  line-height: 1.8;
  margin: 0
}

.sf-play {
  min-width: 0
}

.sf-hud {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 87px;
  padding: 0 15px 16px
}

.sf-hud>div>span {
  display: block;
  font-size: 10px;
  color: #637d73;
  margin-bottom: 8px
}

.sf-score {
  flex: 1
}

.sf-score strong {
  font: 500 37px ui-monospace, monospace;
  letter-spacing: -2px
}

.sf-best strong {
  font: 400 21px ui-monospace, monospace;
  color: var(--sf-accent)
}

.sf-next {
  width: 90px;
  position: relative;
  padding-left: 45px;
  align-self: center
}

.sf-next canvas {
  position: absolute;
  left: -4px;
  top: -2px;
  width: 44px;
  height: 44px
}

.sf-next>span {
  font-size: 8px!important;
  margin-bottom: 5px!important
}

.sf-next b {
  font-size: 10px;
  font-weight: 400;
  white-space: nowrap
}

.sf-stage {
  width: 100%;
  aspect-ratio: 420/620;
  position: relative;
  border: 1px solid #9ab8a4;
  border-radius: 26px;
  background: #c6dcd3;
  overflow: hidden;
  box-shadow: 0 22px 55px #41665d26, inset 0 1px 0 #fff9e2a0;
  isolation: isolate
}

.sf-stage canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  outline-offset: -5px
}

.sf-stage-caption {
  position: absolute;
  bottom: 15px;
  left: 28px;
  right: 28px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  font: 7px ui-monospace, monospace;
  letter-spacing: .7px;
  color: #496f65
}

.sf-stage-caption span:last-child {
  font-size: 8px;
  letter-spacing: 0
}

.sf-toast {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  color: #fff5df;
  background: #345650f2;
  padding: 9px 16px;
  border: 1px solid #8da994;
  border-radius: 24px;
  font-size: 12px;
  white-space: nowrap;
  transition: opacity .18s;
  z-index: 4
}

.sf-toast.show {
  opacity: 1
}

.sf-warning {
  position: absolute;
  top: 18px;
  left: 27px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  color: #a34331;
  pointer-events: none
}

.sf-warning>div {
  height: 3px;
  width: 55px;
  background: #a3433126;
  border-radius: 5px;
  overflow: hidden
}

.sf-warning i {
  display: block;
  height: 100%;
  background: #a34331;
  transform-origin: left;
  width: 0
}

.sf-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#edf2db10, #faf5e5cc 45%, #f7f1dfef);
  z-index: 3;
  padding: 18px;
  text-align: center
}

.sf-overlay-card {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%
}

.sf-kicker {
  color: #607b6f;
  font: 8px ui-monospace, monospace;
  letter-spacing: 1.8px
}

.sf-emblem {
  font-size: 70px;
  color: var(--sf-accent);
  margin: 18px 0 12px;
  line-height: 1;
  filter: drop-shadow(0 7px 12px #9a6b4329)
}

.sf-overlay h2 {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -1px;
  margin: 13px 0
}

.sf-overlay p {
  font-size: 12px;
  line-height: 1.9;
  color: #536f63;
  margin: 0 0 24px
}

.sf-primary {
  border: 0;
  color: #fff6df;
  background: var(--sf-ink);
  border-radius: 14px;
  min-height: 47px;
  min-width: 164px;
  display: inline-flex;
  justify-content: space-between;
  gap: 26px;
  align-items: center;
  padding: 13px 24px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 5px 12px #34565020
}

.sf-primary:hover {
  background: #41675b
}

.sf-primary:active {
  transform: translateY(1px)
}

.sf-overlay-tip {
  font-size: 9px;
  color: #637d73;
  line-height: 1.7;
  max-width: 260px;
  margin-top: 20px
}

.sf-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  gap: 8px
}

.sf-controls button {
  color: #304d50;
  background: #faf5e7;
  border: 1px solid #bac5b0;
  border-radius: 12px;
  padding: 0 13px;
  min-height: 44px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex: 1
}

.sf-controls button[aria-pressed="true"] {
  background: #d5e5ce;
  border-color: #6f927d
}

.sf-controls button:hover {
  border-color: #78987f;
  background: #e6ecd9
}

.sf-controls button>span {
  font-size: 20px;
  color: var(--sf-accent);
  font-weight: 400
}

.sf-controls button>b {
  font-size: 10px;
  font-weight: 400;
  white-space: nowrap
}

.sf-controls #sfHelpMobile {
  display: none
}

.sf-save-note {
  font-size: 8px;
  line-height: 1.7;
  color: #667e73;
  text-align: center;
  margin: 12px 0 0
}

.sf-atlas {
  padding-top: 38px
}

.sf-atlas-head>span {
  font: 8px ui-monospace, monospace;
  color: var(--sf-accent);
  letter-spacing: 1.5px
}

.sf-atlas h2 {
  font-size: 21px;
  line-height: 1.6;
  font-weight: 500;
  margin: 16px 0 8px;
  letter-spacing: -.5px
}

.sf-atlas-head p {
  font-size: 10px;
  color: #637d73;
  margin: 0 0 24px
}

.sf-levels {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative
}

.sf-levels:before {
  content: "";
  position: absolute;
  left: 19px;
  top: 22px;
  bottom: 20px;
  border-left: 1px solid #bdc8b5;
  z-index: -1
}

.sf-levels li {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 51px
}

.sf-levels canvas {
  width: 39px;
  height: 39px
}

.sf-levels small {
  font: 8px ui-monospace, monospace;
  color: #687f75;
  display: block;
  margin-bottom: 4px
}

.sf-levels b {
  font-size: 11px;
  color: #687f75;
  font-weight: 400;
  display: block
}

.sf-levels li.unlocked b {
  color: #304d50
}

.sf-levels li.top b {
  color: #a65f49
}

.sf-atlas-foot {
  border-top: 1px solid var(--sf-line);
  display: flex;
  gap: 11px;
  align-items: center;
  margin-top: 25px;
  padding-top: 17px
}

.sf-atlas-foot span {
  font-size: 30px;
  color: var(--sf-accent)
}

.sf-atlas-foot p {
  font-size: 9px;
  line-height: 1.8;
  color: #637d73
}

.sf-footer {
  max-width: 1280px;
  width: calc(100% - 112px);
  margin: 36px auto 0;
  border-top: 1px solid var(--sf-line);
  padding: 24px 0 28px;
  display: flex;
  justify-content: space-between;
  font: 8px ui-monospace, monospace;
  letter-spacing: 1px;
  color: #687f75
}

dialog {
  background: #f8f2e3;
  color: var(--sf-ink);
  border: 1px solid #c7c8b6;
  border-radius: 24px;
  max-width: 640px;
  width: calc(100% - 32px);
  padding: 28px;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  box-shadow: 0 22px 70px #34565042
}

dialog::backdrop {
  background: #21474670;
  backdrop-filter: blur(7px)
}

.sf-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.sf-dialog-head button {
  background: none;
  border: 1px solid #b5c4ad;
  border-radius: 50%;
  color: #304d50;
  font-size: 25px;
  width: 44px;
  height: 44px
}

.sf-dialog-head .sf-eyebrow {
  font-size: 8px
}

.sf-guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
  margin: 23px 0
}

.sf-guide-grid b {
  color: var(--sf-accent);
  font-size: 12px;
  font-weight: 500
}

dialog h2 {
  font-size: 27px;
  margin: 17px 0
}

dialog p {
  font-size: 12px;
  line-height: 1.9;
  color: #536f63
}

.sf-guide-grid p {
  font-size: 11px;
  margin: 7px 0
}

.sf-guide-atlas {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  border-top: 1px solid var(--sf-line);
  border-bottom: 1px solid var(--sf-line);
  padding: 17px 0
}

.sf-guide-atlas>div {
  text-align: center
}

.sf-guide-atlas canvas {
  width: 45px;
  height: 45px
}

.sf-guide-atlas span {
  display: block;
  font-size: 9px;
  color: #536f63
}

.sf-privacy {
  font-size: 10px!important;
  color: #637d73!important;
  margin-bottom: 23px
}

@media(min-width:1600px) {
  .sf-main {
    margin-top: 65px;
    gap: 65px;
    grid-template-columns: 1fr 465px 190px
  }
  .sf-intro {
    padding-top: 50px
  }
  h1 {
    font-size: 77px
  }
}

@media(max-width:1150px) {
  .sf-nav {
    padding: 0 32px
  }
  .sf-main {
    width: calc(100% - 64px);
    grid-template-columns: minmax(200px, 1fr) minmax(340px, 420px);
    gap: 35px
  }
  .sf-atlas {
    display: none
  }
  h1 {
    font-size: 58px
  }
  .sf-footer {
    width: calc(100% - 64px)
  }
}

@media(max-width:760px) {
  .sf-nav {
    height: 62px;
    padding: 0 23px
  }
  .sf-nav-note {
    display: none
  }
  .sf-brand {
    font-size: 18px
  }
  .sf-back {
    font-size: 10px
  }
  .sf-back span {
    margin-left: 7px
  }
  .sf-main {
    width: min(440px, calc(100% - 30px));
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 19px auto 0
  }
  .sf-intro {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 15px
  }
  .sf-intro .sf-eyebrow {
    font-size: 7px;
    letter-spacing: 1px;
    flex-basis: 100%;
    margin-bottom: 9px
  }
  h1 {
    font-size: 27px;
    line-height: 1.2;
    letter-spacing: -1px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0
  }
  h1 span {
    display: inline
  }
  h1 em {
    font-size: 25px;
    margin-left: 10px
  }
  .sf-deck {
    font-size: 10px;
    line-height: 1.7;
    text-align: right
  }
  .sf-intro-line, .sf-chapter, .sf-steps, .sf-guide-link, .sf-local {
    display: none
  }
  .sf-play {
    width: 100%
  }
  .sf-hud {
    height: 64px;
    gap: 22px;
    padding: 0 9px 11px
  }
  .sf-hud>div>span {
    font-size: 9px;
    margin-bottom: 5px
  }
  .sf-score strong {
    font-size: 31px
  }
  .sf-best strong {
    font-size: 19px
  }
  .sf-stage {
    border-radius: 23px
  }
  .sf-controls {
    gap: 6px;
    margin-top: 11px
  }
  .sf-controls button {
    padding: 0 8px;
    gap: 6px;
    min-height: 45px
  }
  .sf-controls button>b {
    font-size: 9px
  }
  .sf-controls button>span {
    font-size: 18px
  }
  .sf-controls #sfHelpMobile {
    display: flex;
    flex: .7
  }
  .sf-save-note {
    margin-top: 9px;
    font-size: 7px
  }
  .sf-footer {
    width: calc(100% - 40px);
    padding: 18px 0;
    margin-top: 22px;
    font-size: 6px;
    letter-spacing: .7px
  }
  .sf-stage-caption {
    left: 23px;
    right: 23px;
    bottom: 13px;
    font-size: 6px
  }
  .sf-stage-caption span:last-child {
    font-size: 7px
  }
  .sf-overlay h2 {
    font-size: 23px
  }
  .sf-overlay p {
    font-size: 11px
  }
  .sf-emblem {
    font-size: 63px
  }
  .sf-overlay-tip {
    font-size: 8px
  }
  .sf-kicker {
    font-size: 7px
  }
  .sf-toast {
    font-size: 11px;
    top: 19px
  }
}

@media(max-width:360px) {
  .sf-main {
    width: calc(100% - 22px);
    margin-top: 15px
  }
  .sf-nav {
    padding: 0 17px
  }
  .sf-deck {
    font-size: 9px
  }
  .sf-intro {
    margin-bottom: 13px
  }
  .sf-overlay h2 {
    font-size: 21px
  }
  .sf-kicker {
    font-size: 6px
  }
  .sf-controls button {
    padding: 0 6px
  }
  .sf-controls button>b {
    font-size: 8px
  }
  .sf-hud {
    gap: 17px
  }
  .sf-best strong {
    font-size: 17px
  }
  .sf-emblem {
    font-size: 53px;
    margin-top: 14px
  }
  .sf-overlay p {
    margin-bottom: 18px
  }
  .sf-primary {
    min-height: 44px
  }
  .sf-guide-grid {
    grid-template-columns: 1fr;
    gap: 12px
  }
}

@media(max-height:760px) and (min-width:761px) {
  .sf-nav {
    height: 72px
  }
  .sf-main {
    margin-top: 25px;
    grid-template-columns: 1fr minmax(320px, 360px) 160px;
    gap: 40px
  }
  .sf-intro, .sf-atlas {
    padding-top: 20px
  }
  h1 {
    font-size: 52px;
    margin: 20px 0 16px
  }
  .sf-hud {
    height: 65px
  }
  .sf-intro-line {
    margin: 22px 0
  }
  .sf-steps li {
    margin-bottom: 15px
  }
  .sf-local {
    margin-top: 20px
  }
  .sf-atlas h2 {
    font-size: 18px
  }
  .sf-levels li {
    height: 45px
  }
  .sf-atlas-head p {
    margin-bottom: 16px
  }
  .sf-footer {
    margin-top: 24px
  }
}

@media(max-height:590px) and (min-width:761px) {
  .sf-main {
    grid-template-columns: 1fr 285px 150px
  }
  .sf-intro .sf-steps, .sf-local {
    display: none
  }
  .sf-levels li {
    height: 34px
  }
  .sf-levels canvas {
    width: 30px;
    height: 30px
  }
  .sf-atlas-foot {
    display: none
  }
  .sf-stage {
    border-radius: 18px
  }
  .sf-controls button {
    padding: 0 6px;
    gap: 6px
  }
  .sf-controls button>b {
    font-size: 8px
  }
}

@media(prefers-reduced-motion:reduce) {
  .sf-toast {
    transition: none
  }
  .sf-primary:active {
    transform: none
  }
}

/* Keep the chamber and controls within normal desktop heights. */
@media(min-width:761px) {
  .sf-main {
    grid-template-columns: minmax(245px, 1fr) minmax(300px, min(420px, calc((100dvh - 280px)*.6774))) 180px;
    gap: 48px
  }
  .sf-stage {
    max-height: calc(100dvh - 280px)
  }
  .sf-hud {
    height: 75px
  }
  .sf-intro {
    padding-top: 25px
  }
  .sf-atlas {
    padding-top: 25px
  }
}

@media(min-width:761px) and (max-width:1150px) {
  .sf-main {
    grid-template-columns: minmax(210px, 1fr) minmax(290px, min(420px, calc((100dvh - 255px)*.6774)));
    gap: 32px
  }
  .sf-stage {
    max-height: calc(100dvh - 255px)
  }
}

@media(min-width:761px) and (max-height:760px) {
  .sf-main {
    grid-template-columns: minmax(180px, 1fr) minmax(280px, calc((100dvh - 225px)*.6774)) 150px;
    gap: 30px
  }
  .sf-stage {
    max-height: calc(100dvh - 225px)
  }
  .sf-hud {
    height: 58px
  }
  .sf-nav {
    height: 68px
  }
  .sf-main {
    margin-top: 24px
  }
  .sf-intro {
    padding-top: 18px
  }
  .sf-steps li {
    margin-bottom: 12px
  }
  .sf-atlas {
    padding-top: 18px
  }
  .sf-atlas-foot {
    margin-top: 15px
  }
  .sf-local {
    margin-top: 16px
  }
  .sf-stage-caption {
    font-size: 6px
  }
}

@media(min-width:761px) and (max-height:590px) {
  .sf-main {
    grid-template-columns: 1fr 265px 135px
  }
  .sf-stage {
    max-height: none
  }
  .sf-atlas-head h2 {
    font-size: 15px
  }
  .sf-levels li {
    height: 30px
  }
  .sf-atlas-head p {
    margin-bottom: 10px
  }
  .sf-levels small {
    font-size: 6px
  }
  .sf-levels b {
    font-size: 9px
  }
}

@media(min-width:761px) and (max-width:1150px) and (max-height:760px) {
  .sf-main {
    grid-template-columns: minmax(0, 1fr) minmax(280px, calc((100dvh - 225px)*.6774));
    gap: 24px
  }
  .sf-atlas {
    display: none
  }
}

@media(min-width:761px) and (max-width:1150px) and (max-height:590px) {
  .sf-main {
    grid-template-columns: minmax(0, 1fr) 265px
  }
}
/* Short landscape: put score and controls beside the complete chamber. */
@media(min-width:560px) and (max-height:500px) and (orientation:landscape){
  .sf-nav{height:48px;padding:0 24px}.sf-brand{font-size:18px}.sf-nav-note{display:none}
  .sf-main{display:grid;width:calc(100% - 32px);margin:12px auto 0;grid-template-columns:minmax(150px,1fr) minmax(360px,460px);gap:16px}
  .sf-intro{padding-top:8px}.sf-intro .sf-eyebrow{font-size:7px;letter-spacing:.8px}
  .sf-intro h1{font-size:34px;letter-spacing:-1.5px;margin:14px 0 12px}.sf-intro h1 em{font-size:27px;margin-left:9px}
  .sf-intro .sf-deck{font-size:11px;line-height:1.7}.sf-intro .sf-guide-link{min-height:44px;margin-top:16px}
  .sf-intro-line,.sf-chapter,.sf-intro .sf-steps,.sf-local,.sf-atlas,.sf-footer{display:none}
  .sf-play{display:grid;grid-template-columns:minmax(140px,1fr) calc((100dvh - 76px)*.677419);grid-template-rows:88px 1fr 34px;gap:12px 14px;height:calc(100dvh - 76px)}
  .sf-stage{grid-column:2;grid-row:1/4;height:calc(100dvh - 76px);max-height:none;border-radius:18px}
  .sf-hud{grid-column:1;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;height:auto;padding:0}
  .sf-hud>div>span{font-size:8px;margin-bottom:3px}.sf-score strong{font-size:25px;letter-spacing:-1px}.sf-best strong{font-size:18px}
  .sf-next{grid-column:1/3;width:auto;height:40px;padding-left:44px}.sf-next canvas{width:36px;height:36px;left:0;top:0}
  .sf-controls{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;align-self:center;margin:0;gap:8px}
  .sf-controls button{min-height:44px;padding:0 5px;gap:4px}.sf-controls button>span{font-size:18px}.sf-controls button>b{font-size:9px}.sf-controls #sfHelpMobile{display:flex}
  .sf-save-note{grid-column:1;grid-row:3;font-size:8px;line-height:1.5;margin:0}
  .sf-overlay{padding:12px}.sf-overlay h2{font-size:17px;margin:8px 0}.sf-overlay p{font-size:9px;line-height:1.7;margin-bottom:13px}
  .sf-kicker{font-size:6px;letter-spacing:1px}.sf-emblem{font-size:34px;margin:10px 0}.sf-overlay-tip{font-size:7px;margin-top:10px}
  .sf-primary{min-width:140px;min-height:44px;padding:10px 15px;font-size:11px}.sf-stage-caption{left:12px;right:12px;bottom:10px;font-size:5px}.sf-stage-caption span:last-child{font-size:6px}
}
@media(min-width:560px) and (max-width:760px) and (max-height:500px) and (orientation:landscape){
  .sf-main{display:block;width:min(600px,calc(100% - 32px))}
  .sf-intro{display:none}
}