.usage-guide-root .usage-slide-canvas:focus-visible,
.usage-guide-root .usage-slide-controls button:focus-visible,
.usage-guide-root .usage-slide-segment:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}
.usage-guide-title .usage-title-emphasis {
  color: var(--red);
  font-weight: 300;
}
.usage-slideshow {
  width: 100%;
  margin: 0 auto 48px;
}
.usage-slide-canvas {
  position: relative;
  display: grid;
  width: min(100%, 680px);
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  padding: clamp(25px, 5vw, 58px);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--charcoal);
  background: var(--cream);
  text-align: left;
  cursor: pointer;
}
.usage-slide-canvas:hover { filter: none; }
.usage-slide-canvas.usage-slide-red:hover:not(:disabled) {
  background-color: var(--red);
  background-image: radial-gradient(rgba(255,255,255,.16) .8px, transparent .8px);
}
.usage-slide-canvas.usage-slide-cream:hover:not(:disabled) { background: var(--cream); }
.usage-slide-canvas.usage-slide-charcoal:hover:not(:disabled) { background: var(--charcoal); }
.usage-slide-canvas.usage-slide-red {
  border-color: var(--red);
  color: var(--white);
  background-color: var(--red);
  background-image: radial-gradient(rgba(255,255,255,.16) .8px, transparent .8px);
  background-size: 19px 19px;
}
.usage-slide-canvas.usage-slide-charcoal {
  border-color: var(--charcoal);
  color: var(--white);
  background: var(--charcoal);
}
.usage-slide-mark {
  position: absolute;
  top: clamp(22px, 4vw, 44px);
  right: clamp(22px, 4vw, 44px);
  width: clamp(32px, 6vw, 50px);
  height: auto;
  fill: var(--red);
}
.usage-slide-content {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 0 30px;
}
.usage-slide-label {
  display: block;
  margin: 0 0 clamp(24px, 4vw, 42px);
  color: var(--red);
  font-family: var(--font-sans);
  font-size: clamp(.62rem, 1.1vw, .76rem);
  font-weight: 600;
  letter-spacing: .19em;
  line-height: 1.2;
}
.usage-slide-icon {
  position: relative;
  display: grid;
  width: clamp(68px, 10vw, 96px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  margin: 0 0 clamp(24px, 4vw, 43px);
  border-radius: 50%;
  color: var(--white);
  background: var(--red);
}
.usage-slide-icon::before {
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(255,44,63,.45);
  border-radius: inherit;
  content: "";
  animation: usage-ring 2.8s ease-out infinite;
}
.usage-slide-red .usage-slide-icon { background: var(--red-press); }
.usage-slide-red .usage-slide-icon::before { border-color: rgba(255,255,255,.58); }
.usage-slide-charcoal .usage-slide-icon::before { border-color: rgba(255,44,63,.55); }
.usage-icon-drawing {
  width: 47%;
  height: 47%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.usage-icon-chat .usage-icon-drawing circle { fill: currentColor; stroke: none; }
.usage-slide-headline {
  display: block;
  max-width: 100%;
  color: inherit;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.1vw, 4.2rem);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: .99;
}
.usage-slide-emphasis {
  color: var(--red);
  font-style: italic;
  font-weight: 300;
}
.usage-slide-red .usage-slide-emphasis { color: var(--white); }
.usage-slide-charcoal .usage-slide-emphasis { color: var(--red); }
.usage-slide-line {
  display: block;
  max-width: 37em;
  margin-top: clamp(18px, 3vw, 30px);
  color: var(--charcoal-80);
  font-family: var(--font-sans);
  font-size: clamp(.9rem, 1.55vw, 1.08rem);
  line-height: 1.55;
}
.usage-slide-red .usage-slide-line { color: rgba(255,255,255,.92); }
.usage-slide-charcoal .usage-slide-line { color: rgba(255,255,255,.76); }
.usage-slide-enter { animation: usage-slide-fade .45s ease both; }
.usage-slide-enter .usage-slide-headline,
.usage-slide-enter .usage-slide-line,
.usage-slide-enter .usage-slide-label {
  animation: usage-text-rise .5s cubic-bezier(.2,.7,.2,1) both;
}
.usage-slide-enter .usage-slide-line { animation-delay: .08s; }
.usage-slide-enter .usage-slide-label { animation-delay: .04s; }
.usage-icon-bell .usage-icon-drawing { animation: usage-bell 2.8s ease-in-out infinite; transform-origin: 50% 14%; }
.usage-icon-stopwatch .usage-sweep {
  transform-box: view-box;
  transform-origin: 12px 13px;
  animation: usage-stopwatch 5s linear infinite;
}
.usage-icon-warning .usage-icon-drawing { animation: usage-warning 3s ease-in-out infinite; transform-origin: 50% 62%; }
.usage-icon-bulb .usage-rays { animation: usage-glow 2.2s ease-in-out infinite; }
.usage-icon-alarm .usage-icon-drawing { animation: usage-alarm 1.2s ease-in-out infinite; transform-origin: 50% 68%; }
.usage-icon-chat .usage-icon-drawing circle { animation: usage-chat-dot 1.2s ease-in-out infinite; }
.usage-icon-chat .usage-icon-drawing circle:nth-of-type(2) { animation-delay: .14s; }
.usage-icon-chat .usage-icon-drawing circle:nth-of-type(3) { animation-delay: .28s; }
.usage-icon-bolt .usage-icon-drawing { animation: usage-bolt 1.6s ease-in-out infinite; }
.usage-slide-progress {
  display: grid;
  width: min(100%, 680px);
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 18px auto 0;
}
.usage-slide-segment {
  height: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--cream-deep);
  cursor: pointer;
}
.usage-slide-segment:hover { background: var(--charcoal-50); }
.usage-slide-segment.is-current { background: var(--red); }
.usage-slide-segment:disabled { opacity: .42; cursor: not-allowed; }
.usage-slide-controls {
  display: grid;
  width: min(100%, 680px);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 15px auto 0;
}
.usage-slide-controls button {
  min-height: 42px;
  padding: 10px 17px;
  border: 1px solid var(--red);
  border-radius: 2px;
  color: var(--red-press);
  background: var(--white);
  font-family: var(--font-sans);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
}
.usage-slide-controls button:hover:not(:disabled) { color: var(--white); background: var(--red); }
.usage-slide-controls .usage-slide-next { justify-self: end; color: var(--white); background: var(--red); }
.usage-slide-controls .usage-slide-next:hover { background: var(--red-press); border-color: var(--red-press); }
.usage-slide-controls button:disabled {
  color: var(--charcoal-50);
  border-color: var(--rule);
  background: var(--cream);
  cursor: not-allowed;
}
.usage-slide-count {
  color: var(--charcoal-80);
  font-family: var(--font-sans);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
}
.usage-guide-done { margin-top: 40px; }
.usage-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

#usage-guide-gate {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(12px, 2.5vh, 28px) clamp(16px, 3vw, 44px);
  overflow: auto;
  border: 0;
  border-radius: 0;
  color: var(--charcoal);
  background: var(--cream);
}
#usage-guide-gate::backdrop { background: rgba(55,54,56,.78); }
.usage-guide-gate-root,
.usage-slideshow-gated {
  display: flex;
  width: 100%;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
}
.usage-guide-gate-root { align-items: center; }
#usage-guide-gate .usage-slideshow-gated { margin: 0 auto; }
#usage-guide-gate .usage-slide-canvas {
  width: min(100%, 680px, 58dvh);
  padding: clamp(20px, 4vw, 46px);
  container-type: inline-size;
}
#usage-guide-gate .usage-slide-content { padding: 8px 0 14px; }
#usage-guide-gate .usage-slide-label { margin-bottom: clamp(16px, 4cqw, 30px); }
#usage-guide-gate .usage-slide-icon {
  width: clamp(48px, 13cqw, 78px);
  margin-bottom: clamp(16px, 4cqw, 30px);
}
#usage-guide-gate .usage-slide-mark {
  top: clamp(18px, 4cqw, 32px);
  right: clamp(18px, 4cqw, 32px);
  width: clamp(30px, 7cqw, 46px);
}
#usage-guide-gate .usage-slide-headline { font-size: clamp(1.5rem, 9.6cqw, 4rem); }
#usage-guide-gate .usage-slide-line {
  margin-top: clamp(14px, 3.5cqw, 24px);
  font-size: clamp(.82rem, 2.55cqw, 1.05rem);
}
#usage-guide-gate .usage-slide-progress,
#usage-guide-gate .usage-slide-controls { width: min(100%, 680px, 58dvh); }

@keyframes usage-ring {
  0% { opacity: .58; transform: scale(.92); }
  80%, 100% { opacity: 0; transform: scale(1.16); }
}
@keyframes usage-slide-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes usage-text-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes usage-bell {
  0%, 74%, 100% { transform: rotate(0); }
  78% { transform: rotate(-9deg); }
  82% { transform: rotate(8deg); }
  86% { transform: rotate(-6deg); }
  90% { transform: rotate(4deg); }
  94% { transform: rotate(-2deg); }
}
@keyframes usage-stopwatch { to { transform: rotate(360deg); } }
@keyframes usage-warning {
  0%, 72%, 100% { transform: rotate(0); }
  76%, 88% { transform: rotate(-4deg); }
  82%, 94% { transform: rotate(4deg); }
}
@keyframes usage-glow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 5px rgba(255,255,255,.85)); }
}
@keyframes usage-alarm {
  0%, 55%, 100% { transform: rotate(0); }
  60%, 70%, 80%, 90% { transform: rotate(-5deg); }
  65%, 75%, 85%, 95% { transform: rotate(5deg); }
}
@keyframes usage-chat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes usage-chat-dot {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}
@keyframes usage-bolt {
  0%, 100% { opacity: 1; transform: scale(1); }
  48% { opacity: .72; transform: scale(.92); }
  68% { opacity: 1; transform: scale(1.06); }
}

@media (max-width: 700px) {
  .usage-slide-canvas { width: 100%; padding: clamp(24px, 6vw, 38px); }
  .usage-slide-headline { font-size: clamp(2rem, 9vw, 3.15rem); }
  .usage-slide-line { font-size: clamp(.85rem, 3.7vw, .98rem); }
  .usage-slide-progress { gap: 5px; }
}
@media (max-width: 390px) {
  .usage-slide-canvas { padding: 22px; }
  .usage-slide-content { padding-bottom: 16px; }
  .usage-slide-label { margin-bottom: 22px; }
  .usage-slide-icon { width: 62px; margin-bottom: 22px; }
  .usage-slide-headline { font-size: 1.9rem; }
  .usage-slide-line { margin-top: 15px; font-size: .83rem; }
}
@media (prefers-reduced-motion: reduce) {
  .usage-slide-enter,
  .usage-slide-enter .usage-slide-headline,
  .usage-slide-enter .usage-slide-line,
  .usage-slide-enter .usage-slide-label,
  .usage-slide-icon::before,
  .usage-icon-bell .usage-icon-drawing,
  .usage-icon-stopwatch .usage-sweep,
  .usage-icon-warning .usage-icon-drawing,
  .usage-icon-bulb .usage-rays,
  .usage-icon-alarm .usage-icon-drawing,
  .usage-icon-chat .usage-icon-drawing circle,
  .usage-icon-bolt .usage-icon-drawing {
    animation: none !important;
    transition: none !important;
  }
}