/* Clarify the two teaching roles without changing the existing tabs or forms. */
.sakura-refresh .sk-manabi-name {
  display: inline-block;
  margin-bottom: 5px;
  color: #304e3c;
  font-size: 16px;
  line-height: 1.7;
}
.sakura-refresh .sk-teaching-roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0;
}
.sakura-refresh .sk-teaching-role {
  min-width: 0;
  padding: 18px;
  border: 1px solid #d2dccd;
  border-radius: 4px 18px 4px 4px;
  background: #fafbf7;
}
.sakura-refresh .sk-role-label {
  display: block;
  color: #785767;
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 7px;
}
.sakura-refresh .sk-teaching-role h4,
.sakura-refresh .sk-video-flow h4 {
  margin: 0 0 8px;
  color: #304e3c;
  font-size: 16px;
  line-height: 1.7;
}
.sakura-refresh .features .sk-teaching-role p {
  font-size: 14px;
  line-height: 1.95;
}
.sakura-refresh .sk-video-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin: 24px 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid #cbd7c6;
}
.sakura-refresh .sk-video-flow li {
  min-width: 0;
  margin: 0;
}
.sakura-refresh .sk-video-step {
  display: block;
  margin-bottom: 8px;
  color: #936579;
  font-size: 13px;
  font-weight: 700;
}
.sakura-refresh .sk-video-flow h4 {
  font-size: 14px;
}
.sakura-refresh .features .sk-video-flow p {
  font-size: 13px;
  line-height: 1.95;
}
.sakura-refresh .trial-intro > .sk-trial-duration {
  display: inline-block;
  margin: 8px 0 20px;
  padding: 8px 14px;
  border: 1px solid #d8bcc5;
  border-radius: 3px;
  color: #684454;
  background: #fffafc;
  font-weight: 700;
  line-height: 1.8;
}
@media (max-width: 700px) {
  .sakura-refresh .sk-teaching-roles {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 20px 0;
  }
  .sakura-refresh .sk-teaching-role {
    padding: 16px;
  }
  .sakura-refresh .sk-video-flow {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 20px;
  }
  .sakura-refresh .sk-video-flow li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
  }
  .sakura-refresh .sk-video-step {
    margin: 3px 0 0;
  }
}
/* Present the learning promise before the decorative photograph on phones. */
@media (max-width: 700px) {
  .sakura-refresh .hero .intro { order: 3; margin: 0 0 16px; }
  .sakura-refresh .hero .tags { order: 4; margin-bottom: 14px; }
  .sakura-refresh .hero .sk-hero-condition { order: 5; margin: 0 0 18px; }
  .sakura-refresh .hero .actions { order: 6; margin-top: 0; margin-bottom: 25px; }
  .sakura-refresh .hero .hero-visual { order: 7; }
}

/* A short, self-contained illustration of pausing, replaying and resuming. */
.sakura-refresh .skx-demo{box-sizing:border-box;min-width:0;margin:38px 0 44px;padding:32px clamp(20px,3vw,38px);border:1px solid #bfcfb5;border-radius:5px 45px 5px 5px;background:linear-gradient(140deg,#f5f7ed,#eef2e6 70%,#f7ecee);color:#304c39;overflow:hidden}
.sakura-refresh .skx-demo [hidden]{display:none!important}
.sakura-refresh .skx-demo-heading{max-width:760px}
.sakura-refresh .skx-demo .skx-kicker{margin:0 0 9px;font-size:11px;line-height:1.7;color:#966078;letter-spacing:.09em;font-weight:700}
.sakura-refresh .skx-demo-heading h3{margin:0 0 14px;font-size:clamp(24px,3.1vw,34px);line-height:1.55;letter-spacing:.015em}
.sakura-refresh .skx-demo-heading>p:last-child{margin:0;color:#60705a;font-size:12px;line-height:1.9}
.skx-workspace{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);align-items:center;gap:35px;margin:28px 0 18px;min-width:0}
.skx-book{position:relative;width:100%;max-width:290px;height:256px;margin:auto;perspective:1000px;border-radius:4px 16px 16px 4px;background:#c5cfb9;box-shadow:8px 10px 0 #e1e5d6,14px 17px 22px #334d3222;isolation:isolate}
.skx-book-spine{position:absolute;left:0;top:0;bottom:0;width:13px;border-radius:3px 0 0 3px;background:#597552}
.skx-sheet{position:absolute;inset:8px 8px 9px 12px;box-sizing:border-box;padding:18px 21px;background:#fffef7;border:1px solid #d1dac6;border-radius:2px 12px 12px 2px;transform-origin:left center}
.skx-sheet-top{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#789269}.skx-sheet-top>span{font:9px/1.5 sans-serif;letter-spacing:.14em}.skx-sheet-top>b{font:italic 34px/1 Georgia,serif;font-weight:400}
.sakura-refresh .skx-sheet>p{margin:11px 0 0;font-size:16px;line-height:1.8;color:#45603d}.skx-sheet>p strong{font-size:23px;font-weight:500;color:#304c39}
.skx-note-lines{display:grid;gap:9px;margin:14px 0}.skx-note-lines i{display:block;height:1px;background:#d7deca;width:100%}.skx-note-lines i:nth-child(2){width:84%;height:6px;background:#e8d59d}.skx-note-lines i:last-child{width:66%}
.skx-video-track{position:absolute;left:21px;right:21px;bottom:18px;height:4px;background:#dce4d1;border-radius:3px;overflow:hidden}.skx-video-scan{display:block;width:34%;height:100%;background:#9c6a81;transform:translateX(50%)}
.skx-ready .skx-video-scan{animation:skx-video-reading 3.2s ease-in-out infinite alternate}
.skx-demo[data-state="paused"] .skx-video-scan,.skx-demo[data-state="away"] .skx-video-scan{animation-play-state:paused}
.skx-pause-mark{display:grid;place-items:center;position:absolute;right:21px;top:85px;width:46px;height:46px;border-radius:50%;background:#8f5b74;color:#fff;font:700 22px/1 sans-serif;opacity:0;transform:scale(.75);transition:opacity .2s,transform .25s}
.skx-demo[data-state="paused"] .skx-pause-mark{opacity:1;transform:scale(1)}
.skx-replay-mark{position:absolute;right:16px;bottom:35px;padding:4px 7px;border:1px solid #d3b4c1;background:#fff6f8;color:#89526c;font-size:11px;line-height:1.5;opacity:0;transition:opacity .2s}
.skx-demo[data-state="replay"] .skx-replay-mark{opacity:1}
.skx-demo[data-state="replay"][data-repeat="0"] .skx-sheet{animation:skx-repeat-page-a .55s ease-out both}.skx-demo[data-state="replay"][data-repeat="1"] .skx-sheet{animation:skx-repeat-page-b .55s ease-out both}
.skx-book-cover{display:flex;flex-direction:column;justify-content:center;position:absolute;inset:7px 7px 8px 12px;z-index:5;padding:24px;border:1px solid #8da27b;border-radius:2px 12px 12px 2px;background:#dce6cc;box-shadow:3px 0 8px #30452620;transform-origin:left center;transform:rotateY(-105deg);opacity:0;backface-visibility:hidden;transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .25s;pointer-events:none}
.skx-book-cover>span{font-size:12px;color:#60764f;line-height:1.7}.skx-book-cover>strong{display:block;margin:12px 0;font-size:29px;line-height:1.6;letter-spacing:.03em;font-weight:500}.skx-book-cover>b{font-size:12px;color:#795267;line-height:1.8;font-weight:500}
.skx-demo[data-state="away"] .skx-book-cover{transform:rotateY(0);opacity:1}
.skx-bookmark{position:absolute;z-index:6;right:28px;top:-6px;display:grid;place-items:start center;width:26px;height:61px;padding-top:11px;box-sizing:border-box;background:#a66a83;color:#fffafc;font:italic 23px/1 Georgia,serif;clip-path:polygon(0 0,100% 0,100% 100%,50% 83%,0 100%)}
.skx-lanes{min-width:0}.sakura-refresh .skx-lane>p{margin:0 0 10px;color:#5e7255;font-size:12px;line-height:1.8}.skx-date-row,.skx-lesson-row{display:grid;grid-template-columns:minmax(0,1fr) 13px minmax(0,1fr) 13px minmax(0,1fr);align-items:center;gap:6px}
.skx-date-row>span{display:grid;place-items:center;min-height:45px;box-sizing:border-box;padding:7px 3px;border:1px solid #c9d4bd;border-radius:4px;background:#f7f9f2;color:#738369;font-size:11px;line-height:1.5;text-align:center;transition:background .25s,border-color .25s,transform .3s}
.skx-date-row>i,.skx-lesson-row>i{font:normal 13px/1 sans-serif;color:#9dad8f;text-align:center}
.skx-demo[data-day="learning"] .skx-date-learn,.skx-demo[data-day="return"] .skx-date-return{background:#fffdf4;color:#395732;border-color:#799563;box-shadow:0 3px 0 #becdaa}
.skx-demo[data-day="away"] .skx-date-away{background:#f5e3e9;border-color:#af7c91;color:#814b65;transform:translateY(-4px);box-shadow:0 4px 0 #d8b9c5}
.skx-lesson-lane{margin-top:25px}.skx-lesson-row>span{position:relative;display:grid;place-items:center;align-content:center;min-height:78px;padding:10px 3px;box-sizing:border-box;border:1px solid #c9d5bd;border-radius:4px;background:#f8faf3;color:#718268;font-size:14px;font-weight:600;line-height:1.7;text-align:center}
.skx-lesson-row>span small{display:block;font-size:10px;line-height:1.8;font-weight:400}.skx-lesson-row>.skx-lesson-current{border:2px solid #92657b;background:#fff9fb;color:#75475e;box-shadow:0 5px 0 #e5cbd6}
.skx-lesson-current>b{position:absolute;right:5px;top:-13px;padding:2px 5px;border-radius:2px;background:#92657b;color:#fff;font-size:9px;font-weight:400;line-height:1.5}
.skx-lesson-row>.skx-lesson-next{background:transparent;border-style:dashed;color:#8a9882}.sakura-refresh .skx-lanes>.skx-lane-note{margin:15px 0 0;font-size:12px;line-height:1.8;color:#775569}
.sakura-refresh .skx-demo>.skx-status{display:flex;align-items:center;min-height:3.2em;box-sizing:border-box;margin:0 0 18px;padding:10px 15px;border-left:3px solid #a5718a;background:#ffffffa3;color:#46603d;font-size:13px;line-height:1.8}
.skx-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.skx-controls button{display:flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-width:0;min-height:58px;padding:10px 8px;border:1px solid #a3b596;border-radius:3px;background:#fffdf5;color:#3e5935;font-family:inherit;font-size:12px;font-weight:600;line-height:1.6;cursor:pointer;text-align:center;transition:background .2s,color .2s,border-color .2s}
.skx-controls button>span{font:18px/1 sans-serif;flex:0 0 auto;color:#967084}.skx-controls button:hover:not(:disabled){background:#345039;color:#fff;border-color:#345039}.skx-controls button:hover:not(:disabled)>span{color:#f7e0ea}.skx-controls button:focus-visible{outline:3px solid #a36582;outline-offset:3px}.skx-controls button:disabled{color:#84917a;border-color:#c9d1c0;background:#ecf0e4;cursor:default}.skx-controls button:disabled>span{color:#aeb7a6}
.skx-static-steps{padding-left:1.4em;margin:16px 0;color:#4d6344;font-size:13px;line-height:1.9}
.skx-tuition-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 14px;margin-top:22px;padding-top:19px;border-top:1px solid #c4d0b8;font-size:11px;line-height:1.9;color:#687a5b}.skx-tuition-note>strong{font-size:12px;color:#49623d}.skx-tuition-note>span{flex-basis:100%}.skx-tuition-note a{display:inline-flex;align-items:center;min-height:35px;color:#6e4a5d;text-decoration:underline;text-underline-offset:4px}.skx-tuition-note a:focus-visible{outline:2px solid #a36582;outline-offset:3px}
@keyframes skx-video-reading{from{transform:translateX(0)}to{transform:translateX(195%)}}
@keyframes skx-repeat-page-a{0%{transform:rotateY(-15deg) translateX(-5px);opacity:.5}100%{transform:none;opacity:1}}
@keyframes skx-repeat-page-b{0%{transform:rotateY(-15deg) translateX(-5px);opacity:.5}100%{transform:none;opacity:1}}
.domain-paused .skx-demo *,.sk-low-motion .skx-demo *{animation:none!important;transition:none!important}
@media(max-width:900px){.skx-workspace{gap:22px;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}.skx-date-row,.skx-lesson-row{gap:4px}.skx-date-row>span{font-size:10px}.skx-controls button{font-size:11px;gap:5px}.skx-controls button>span{font-size:15px}}
@media(max-width:700px){.sakura-refresh .skx-demo{margin:28px 0 34px;padding:24px 17px;border-top-right-radius:30px}.sakura-refresh .skx-demo-heading h3{font-size:25px;line-height:1.65}.sakura-refresh .skx-demo-heading>p:last-child{font-size:11px;line-height:1.9}.skx-workspace{grid-template-columns:1fr;gap:27px;margin:25px 0 19px}.skx-book{height:225px;max-width:260px}.skx-sheet{padding:14px 19px}.skx-sheet-top>b{font-size:30px}.sakura-refresh .skx-sheet>p{font-size:14px;margin-top:5px}.skx-sheet>p strong{font-size:22px}.skx-note-lines{gap:7px;margin-top:12px}.skx-book-cover>strong{font-size:27px}.skx-bookmark{height:55px}.skx-lanes{width:100%;max-width:460px;margin:0 auto}.skx-lane>p{font-size:11px}.skx-date-row>span{min-height:36px;font-size:10px}.skx-lesson-lane{margin-top:20px}.skx-lesson-row>span{min-height:66px;font-size:13px}.skx-lesson-row>span small{font-size:9px}.sakura-refresh .skx-lanes>.skx-lane-note{font-size:11px;margin-top:12px}.sakura-refresh .skx-demo>.skx-status{font-size:12px;padding:10px 12px;min-height:5.3em}.skx-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.skx-controls button{min-height:54px;font-size:11px;gap:5px}.skx-tuition-note{margin-top:19px;padding-top:16px;gap:5px 14px}}
@media(prefers-reduced-motion:reduce){.skx-demo *,.skx-demo *:before,.skx-demo *:after{animation:none!important;transition:none!important}}

#learning-experience{scroll-margin-top:120px}

/* A tapped action travels to the same lesson, then changes the illustration. */
.sakura-refresh .skx-demo{position:relative}
.skx-demo>.skx-controls{margin:24px 0 14px}
.sakura-refresh .skx-demo>.skx-status{margin-bottom:0}
.skx-demo .skx-workspace{margin-top:24px}
.skx-action-token{position:absolute;left:0;top:0;z-index:12;display:grid;place-items:center;box-sizing:border-box;width:38px;height:44px;border:1px solid #87546f;border-radius:50%;background:#9c6681;color:#fffafc;box-shadow:0 5px 16px #5c344f38;font:600 22px/1 sans-serif;pointer-events:none;will-change:transform,opacity}
.skx-action-token[data-kind="bookmark"]{border-radius:2px 2px 0 0;clip-path:polygon(0 0,100% 0,100% 100%,50% 83%,0 100%);font:italic 25px/1 Georgia,serif;padding-bottom:6px}
.skx-controls button.skx-flow-source{border-color:#926078;background:#f4e6ec;box-shadow:inset 0 0 0 1px #926078}
.domain-paused .skx-action-token,.sk-low-motion .skx-action-token{display:none!important}
@media(max-width:700px){.skx-demo>.skx-controls{margin-top:20px}.skx-action-token{width:33px;height:39px;font-size:19px}.skx-action-token[data-kind="bookmark"]{font-size:22px}.sakura-refresh .skx-demo>.skx-status{min-height:5.3em}.skx-demo .skx-workspace{margin-top:23px}}
@media(prefers-reduced-motion:reduce){.skx-action-token{display:none!important}}
@media(min-width:1100px){.sakura-refresh .skx-demo-heading h3 br{display:none}}