.tablet-navigation{display:grid;grid-template-columns:44px minmax(0,1fr) 44px auto;gap:8px;padding-bottom:10px;align-items:center}.tablet-navigation #tablet-study-choice[hidden]{display:none!important}.tablet-navigation>button{min-width:44px;min-height:44px;padding:4px 10px;border:1px solid #91a398;border-radius:7px;background:#20342e;color:#fffefb;font:600 14px system-ui;cursor:pointer}.tablet-navigation #tablet-study-previous,.tablet-navigation #tablet-study-next{font-size:30px;line-height:1}.tablet-navigation>button:focus-visible{outline:3px solid #ff7a1a;outline-offset:2px}.tablet-current{min-width:0;display:flex;flex-direction:column;text-align:center;gap:3px}.tablet-current strong{font:650 15px/1.25 system-ui;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tablet-current span{font:400 11px/1.3 system-ui;color:#d9e4db}.live-tablet{overflow:hidden}.live-tablet iframe{will-change:transform}.live-tablet.carousel-dragging{user-select:none;animation-play-state:paused!important}@media(max-width:700px){.tablet-navigation{gap:6px;grid-template-columns:44px minmax(0,1fr) 44px auto}.tablet-current strong{font-size:15px}.tablet-current span{font-size:11px}.tablet-navigation #tablet-study-library{font-size:12px;padding:4px 8px}.live-tablet iframe{touch-action:pan-y pinch-zoom}.live-tablet-stage{overflow:hidden}}@media(prefers-reduced-motion:reduce){.live-tablet iframe{will-change:auto}}

.tablet-navigation #tablet-study-library[aria-pressed="true"]{background:#fffefb;color:#173d2c}.tablet-study-recovery{inset-block-start:86px}@media(max-width:700px){.tablet-study-recovery{inset-block-start:78px}}

/* More depth at rest: a light upper bevel, dark lower rim and grounded shadow. */
.live-tablet {
  border-color: #8b9e93 #536c60 #172c25 #738a7d;
  box-shadow: inset 0 2px 1px #d8e6db66, inset 2px 0 2px #d8e6db26,
    inset 0 -3px 3px #0b1b16b3, 1px 2px 0 #91a498,
    8px 12px 0 -4px #172c25, 9px 14px 0 -4px #0d201a,
    0 20px 30px -12px #173d2c59, 16px 42px 70px -12px #173d2c59;
}
.live-tablet iframe {
  box-shadow: 0 0 0 1px #0d201a99, 0 -2px 3px #0b1b1680, 0 2px 0 #d8e6db38;
}
.tablet-navigation > button,
.tablet-study-recovery :is(button, a) {
  box-shadow: inset 0 1px 0 #ffffff38, inset 0 -1px 0 #0b1b1680,
    0 3px 0 #10251ee6, 0 5px 9px #0b1b164d;
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, box-shadow 160ms ease, translate 160ms ease;
}
.tablet-navigation > button {
  background-image: linear-gradient(180deg, #ffffff14, #00000014);
  border-color: #91a398 #617c6b #465e50;
}
.tablet-navigation > button:is(:disabled, [aria-disabled="true"]) {
  box-shadow: none;
  opacity: .45;
  cursor: not-allowed;
}
#pocket-showcase :is(.tablet-navigation > button, .tablet-study-recovery button, .tablet-study-recovery a):not(:disabled):not([aria-disabled="true"]):focus-visible {
  outline: 3px solid #ff7a1a;
  outline-offset: 3px;
}
#pocket-showcase :is(.tablet-navigation > button, .tablet-study-recovery button, .tablet-study-recovery a):not(:disabled):not([aria-disabled="true"]):active {
  background-color: #ff7a1a;
  border-color: #ffad70;
  color: #172f27;
  translate: 0 2px;
  box-shadow: inset 0 2px 4px #79370b66, inset 0 -1px 0 #ffd1a680, 0 1px 1px #10251e80;
}
@media (hover: hover) and (pointer: fine) {
  #pocket-showcase :is(.tablet-navigation > button, .tablet-study-recovery button, .tablet-study-recovery a):not(:disabled):not([aria-disabled="true"]):hover:not(:active) {
    background-color: #ff7a1a;
    color: #172f27;
    border-color: #ffbd86 #ff9a45 #cc5b0f;
    translate: 0 -1px;
    box-shadow: inset 0 1px 0 #ffe2c7b3, inset 0 -1px 0 #a4480b66,
      0 4px 0 #74350b99, 0 7px 13px #0b1b1666;
  }
}
@media (max-width: 700px) {
  .live-tablet {
    box-shadow: inset 0 2px 1px #d8e6db66, inset 0 -2px 2px #0b1b1699,
      3px 7px 0 -2px #172c25, 4px 9px 0 -2px #0d201a,
      0 14px 20px -10px #173d2c45, 0 24px 40px -8px #173d2c45;
  }
}
@media (prefers-reduced-motion: reduce) {
  #pocket-showcase :is(.tablet-navigation > button, .tablet-study-recovery button, .tablet-study-recovery a) {
    transition: none !important;
    translate: none !important;
  }
}


/* The automatic next step uses the same orange, depressed button treatment. */
#pocket-showcase #tablet-study-next.study-auto-press {
  background-color: #ff7a1a;
  border-color: #ffad70;
  color: #172f27;
  translate: 0 2px;
  box-shadow: inset 0 2px 4px #79370b66, inset 0 -1px 0 #ffd1a680, 0 1px 1px #10251e80;
}