/* PWA UI uses px so it remains readable in the theme's 62.5% root and the app shell. */
:root {
  --gp-brand: var(--kabocy-color-site-brand, #ff5b00);
  --gp-cream: var(--kabocy-color-main-bg, #fff4e1);
  --gp-pink: var(--kabocy-color-km-brand, #ff7bac);
  --gp-terminal: #20332d;
  --gp-ink: #28342c;
  --gp-muted: #59645b;
  --gp-border: #dfdfd1;
  --gp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --goodly-app-nav-height: 0px;
}

body.gp-shell {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  background: var(--gp-cream);
  color: var(--gp-ink);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
}

:where(.gp-shell, .gp-guide-tools, .gp-nav, .gp-notice, .gp-install),
:where(.gp-shell, .gp-guide-tools, .gp-nav, .gp-notice, .gp-install) * {
  box-sizing: border-box;
}

.gp-shell :where(a, button),
.gp-guide-tools :where(a, button),
.gp-nav a,
.gp-notice :where(a, button) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:where(.gp-shell, .gp-guide-tools, .gp-nav, .gp-notice, .gp-install)
  :focus-visible {
  outline: 3px solid #2369c4;
  outline-offset: 4px;
}

.gp-skip {
  position: fixed;
  z-index: 100000;
  top: 10px;
  left: 12px;
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid var(--gp-terminal);
  border-radius: 10px;
  background: #fffefa;
  color: var(--gp-terminal);
  font-size: 14px;
  font-weight: 750;
  transform: translateY(-160%);
}

.gp-skip:focus {
  transform: none;
}

.gp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1080px, calc(100% - 48px));
  min-height: 86px;
  margin: 0 auto;
  border-bottom: 1px solid #20332d1f;
}

.gp-header > a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--gp-terminal);
  font-size: 23px;
  font-weight: 850;
  letter-spacing: -0.7px;
  text-decoration: none;
}

.gp-header img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.gp-header > span {
  color: var(--gp-muted);
  font-size: 13px;
  font-weight: 650;
}

.gp-header > a > span {
  margin-left: 9px;
  color: var(--gp-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.gp-header .gp-connection {
  flex: 0 1 auto;
  margin: 0;
  font-size: 11px;
}

.gp-main {
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  padding: 40px 0 56px;
}

.gp-hero {
  padding: 12px 0 30px;
  margin: 0 0 14px;
}

.gp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 6px 12px;
  margin: 0 0 18px;
  border: 1px solid #456052;
  border-radius: 9px;
  background: var(--gp-terminal);
  color: #fff4e1;
  font:
    650 12px/1.6 ui-monospace,
    "Cascadia Code",
    monospace;
  letter-spacing: 0.6px;
}

.gp-eyebrow::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-right: 17px;
  border-radius: 50%;
  background: var(--gp-brand);
  box-shadow:
    9px 0 0 var(--gp-pink),
    18px 0 0 #b3d89c;
}

.gp-hero h1 {
  max-width: 820px;
  margin: 0 0 17px;
  color: var(--gp-terminal);
  font-size: clamp(29px, 4vw, 46px);
  font-weight: 850;
  line-height: 1.4;
  letter-spacing: -0.7px;
  text-wrap: balance;
}

.gp-hero > p:not(.gp-eyebrow) {
  max-width: 740px;
  margin: 0;
  color: var(--gp-muted);
  font-size: 16px;
  line-height: 1.9;
}

.gp-connection {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 11px;
  margin: 16px 0 0;
  border: 1px solid #d1dccb;
  border-radius: 100px;
  background: #f7fbf2;
  color: #38533e;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.6;
}

.gp-connection::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.gp-connection[data-offline="true"],
.gp-connection.is-offline {
  border-color: #dfc290;
  background: #fff7e5;
  color: #805719;
}

.gp-section {
  margin: 0 0 40px;
  scroll-margin-top: 24px;
}

.gp-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 16px;
}

.gp-section-head h2 {
  margin: 0;
  color: var(--gp-terminal);
  font-size: 22px;
  line-height: 1.5;
  font-weight: 800;
}

.gp-section-head > span {
  color: var(--gp-muted);
  font-size: 13px;
}

.gp-section-head h2 > span {
  display: inline-block;
  min-width: 28px;
  padding: 2px 9px;
  margin-left: 6px;
  border-radius: 100px;
  background: #ffe1ed;
  color: #733149;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  vertical-align: middle;
}

.gp-section-note {
  max-width: 780px;
  margin: -4px 0 18px;
  color: var(--gp-muted);
  font-size: 13px;
  line-height: 1.8;
}

.gp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 18px;
  align-items: stretch;
}

.gp-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 23px;
  border: 1px solid var(--gp-border);
  border-radius: 22px;
  background: #fffefa;
  box-shadow:
    0 3px 0 #20332d05,
    0 10px 30px #46371305;
  animation: gp-arrive 320ms var(--gp-ease) both;
}

.gp-card h3 {
  margin: 0 0 12px;
  color: var(--gp-terminal);
  font-size: 19px;
  line-height: 1.6;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.gp-card h3 a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.gp-card p {
  margin: 0 0 14px;
  color: var(--gp-muted);
  font-size: 14px;
  line-height: 1.8;
}

.gp-card .gp-eyebrow {
  align-self: flex-start;
  color: #fff4e1;
  font-size: 12px;
  line-height: 1.6;
}

.gp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 16px;
  color: var(--gp-muted);
  font-size: 12px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.gp-card .gp-actions {
  margin-top: auto;
  padding-top: 8px;
}

.gp-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.gp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 17px;
  border: 1px solid #a43d00;
  border-radius: 13px;
  background: var(--gp-brand);
  color: #2e180a;
  font:
    750 14px/1.55 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans JP",
    sans-serif;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition:
    transform 180ms var(--gp-ease),
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.gp-button:visited {
  color: #2e180a;
}

.gp-button--quiet {
  border-color: #d2d8cb;
  background: #fffefa;
  color: var(--gp-terminal);
}

.gp-button--quiet:visited {
  color: var(--gp-terminal);
}

.gp-button:not(:disabled):not([aria-disabled="true"]):active {
  transform: scale(0.97);
}

.gp-button:disabled,
.gp-button[aria-disabled="true"] {
  border-color: #bfc6bd;
  background: #e8ece4;
  color: #596258;
  cursor: not-allowed;
  box-shadow: none;
}

.gp-button[aria-busy="true"] {
  cursor: progress;
}

.gp-empty {
  grid-column: 1 / -1;
  padding: 30px;
  border: 1px dashed #c8cbb9;
  border-radius: 22px;
  background: #fffaf0;
  color: var(--gp-muted);
  font-size: 15px;
  line-height: 1.9;
}

.gp-empty p {
  margin: 0 0 14px;
}

.gp-empty p:last-child {
  margin-bottom: 0;
}

.gp-progress {
  display: grid;
  gap: 7px;
  margin: 0 0 18px;
  color: var(--gp-muted);
  font-size: 12px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.gp-progress progress,
progress.gp-progress {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 100px;
  background: #e9eddf;
  accent-color: var(--gp-brand);
}

.gp-progress progress::-webkit-progress-bar,
progress.gp-progress::-webkit-progress-bar {
  border-radius: 100px;
  background: #e9eddf;
}

.gp-progress progress::-webkit-progress-value,
progress.gp-progress::-webkit-progress-value {
  border-radius: 100px;
  background: var(--gp-brand);
}

.gp-progress progress::-moz-progress-bar,
progress.gp-progress::-moz-progress-bar {
  border-radius: 100px;
  background: var(--gp-brand);
}

.gp-install {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 30px;
  padding: 25px 28px;
  margin: 0 0 30px;
  border: 1px solid #40564a;
  border-radius: 22px;
  background: var(--gp-terminal);
  color: #fff4e1;
}

.gp-install-copy {
  flex: 1 1 320px;
  min-width: 0;
}

.gp-install-copy :where(h2, h3) {
  margin: 0 0 8px;
  color: #fff4e1;
  font-size: 20px;
  line-height: 1.6;
}

.gp-install-copy p:not(.gp-eyebrow) {
  margin: 0;
  color: #d4dfd4;
  font-size: 14px;
  line-height: 1.8;
}

.gp-install-copy .gp-eyebrow {
  margin-bottom: 12px;
}

.gp-install-copy :where(ol, ul) {
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.9;
}

.gp-install a:not(.gp-button) {
  color: #ffd6b3;
  text-underline-offset: 3px;
}

.gp-notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: min(1080px, calc(100% - 32px));
  padding: 16px 18px;
  margin: 18px auto;
  border: 1px solid #dfc49a;
  border-radius: 15px;
  background: #fff5dc;
  color: #55401e;
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.gp-main .gp-notice {
  width: 100%;
}

.gp-notice p,
.gp-notice > span {
  flex: 1 1 260px;
  margin: 0;
}

.gp-guide-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 21px 23px;
  margin: 22px 0;
  border: 1px solid #dfd4bd;
  border-left: 4px solid var(--gp-brand);
  border-radius: 18px;
  background: #fffaf0;
  color: var(--gp-ink);
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.gp-guide-tools h2 {
  flex-basis: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--gp-terminal);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 800;
  box-shadow: none;
}

.gp-guide-tools > div:not(.gp-actions) {
  flex: 1 1 320px;
  min-width: 0;
}

.gp-guide-tools h2::before,
.gp-guide-tools h2::after {
  display: none;
}

.gp-guide-tools > p,
.gp-guide-tools > div > p {
  flex: 1 1 280px;
  margin: 0;
  color: var(--gp-muted);
  font-size: 14px;
  line-height: 1.8;
}

.gp-guide-tools > div > p {
  margin-top: 6px;
}

.gp-guide-tools .gp-save-status {
  flex-basis: 100%;
  min-width: 0;
  margin: 0;
  color: #4e5d48;
  font-size: 12px;
  line-height: 1.7;
}

.gp-save-status:empty {
  display: none;
}

.gp-nav-spacer {
  height: max(
    0px,
    calc(var(--goodly-app-nav-height, 0px) - var(--lp-compare-dock-space, 0px))
  );
  pointer-events: none;
}

/* フッターがタブの分だけ伸びるテーマ（body.goodly-footer-inset）では、フッターの下の空白を足さない。
   足すと、暗いフッターの下に地の色の帯ができる。 */
.goodly-footer-inset .gp-nav-spacer {
  display: none;
}

html {
  scroll-padding-bottom: max(
    var(--goodly-app-nav-height, 0px),
    var(--lp-compare-dock-space, 0px)
  );
}

body :focus {
  scroll-margin-bottom: max(
    var(--goodly-app-nav-height, 0px),
    var(--lp-compare-dock-space, 0px)
  );
}

body .gnav {
  bottom: var(--goodly-app-nav-height, 0px);
}

body .distro-compare-tray.lp-compare-dock {
  bottom: calc(
    var(--goodly-app-nav-height, 0px) +
      max(8px, env(safe-area-inset-bottom, 0px))
  );
}

/* The progress bar sits between the app navigation and the comparison dock. */
@media (max-width: 999px) {
  body.has-gnav .distro-compare-tray.lp-compare-dock {
    bottom: calc(
      var(--goodly-app-nav-height, 0px) + var(--goodly-guide-nav-height, 64px) +
        max(8px, env(safe-area-inset-bottom, 0px))
    );
  }
}

html:has(body.gp-shell) {
  --goodly-app-nav-height: calc(64px + env(safe-area-inset-bottom, 0px));
}

.gp-shell .gp-nav {
  display: grid;
}


.gp-notice[hidden],
.gp-nav[hidden],
.gp-guide-tools[hidden],
.gp-install[hidden],
.gp-button[hidden] {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .gp-button:not(:disabled):not([aria-disabled="true"]):hover {
    background: #ff791f;
    box-shadow: 0 3px 0 #8038001a;
  }

  .gp-button--quiet:not(:disabled):not([aria-disabled="true"]):hover {
    background: #f3f6eb;
  }

  .gp-nav a:not([aria-current]):hover,
  .gp-nav__more:hover {
    color: #b04500;
  }
}

@media (max-width: 600px) {
  .gp-header,
  .gp-main {
    width: calc(100% - 32px);
  }

  .gp-header {
    min-height: 70px;
    gap: 10px;
  }

  .gp-header > span {
    font-size: 11px;
  }

  .gp-header > a > span {
    display: none;
  }

  .gp-main {
    padding-top: 26px;
  }

  .gp-hero {
    padding-top: 0;
    margin-bottom: 6px;
  }

  .gp-hero > p:not(.gp-eyebrow) {
    font-size: 15px;
  }

  .gp-section {
    margin-bottom: 30px;
  }

  .gp-section-head h2 {
    font-size: 20px;
  }

  .gp-card,
  .gp-empty {
    padding: 20px;
    border-radius: 19px;
  }

  .gp-card h3 {
    font-size: 18px;
  }

  .gp-card .gp-actions > .gp-button:first-child {
    flex-grow: 1;
  }

  .gp-install {
    padding: 22px 20px;
    gap: 18px;
  }

  .gp-install .gp-actions {
    width: 100%;
  }

  .gp-install .gp-actions > .gp-button {
    flex-grow: 1;
  }

  .gp-guide-tools {
    padding: 18px;
    border-radius: 15px;
  }

  .gp-guide-tools .gp-actions {
    width: 100%;
  }

  .gp-guide-tools .gp-actions > .gp-button {
    flex: 1 1 auto;
  }
}

@keyframes gp-arrive {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gp-card,
  .gp-button,
  .gp-nav a,
  .gp-nav a svg {
    animation: none;
    transition: none;
  }

  .gp-button:not(:disabled):not([aria-disabled="true"]):active,
  .gp-nav a:active,
  .gp-nav a:hover svg {
    transform: none;
  }
}

@media (forced-colors: active) {
  .gp-card,
  .gp-empty,
  .gp-install,
  .gp-notice,
  .gp-guide-tools,
  .gp-nav,
  .gp-eyebrow,
  .gp-connection {
    border-color: CanvasText;
    box-shadow: none;
  }

  .gp-button,
  .gp-nav a {
    border: 1px solid ButtonText;
  }

  .gp-nav a[aria-current] {
    outline: 2px solid Highlight;
    outline-offset: -3px;
  }

  :where(.gp-shell, .gp-guide-tools, .gp-nav, .gp-notice, .gp-install)
    :focus-visible {
    outline-color: Highlight;
  }

  .gp-button:disabled,
  .gp-button[aria-disabled="true"] {
    color: GrayText;
    border-color: GrayText;
  }

  .gp-progress progress {
    border: 1px solid CanvasText;
  }
}

@media print {
  .gp-skip,
  .gp-nav,
  .gp-nav-spacer,
  .gp-guide-tools,
  .gp-install,
  .gp-notice,
  .gp-connection,
  .gp-card .gp-actions {
    display: none !important;
  }

  body.gp-shell {
    background: white;
    color: black;
  }

  .gp-main,
  .gp-header {
    width: 100%;
  }

  .gp-card,
  .gp-empty {
    break-inside: avoid;
    box-shadow: none;
    animation: none;
  }
}


/* 今日の学び（me.js）: 今日やること1つ・レベル・学びの地図 */
.gp-me {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.gp-me > p { grid-column: 1 / -1; }
.gp-me-next h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.gp-me-next p { margin: 0 0 14px; color: var(--gp-muted); }
.gp-me-next.is-done { border-style: dashed; }
.gp-me-lv { margin: 0 0 10px; }
.gp-me-lv strong { font-size: 1.6rem; color: var(--gp-terminal); margin-right: 6px; }
.gp-me-bar { height: 10px; border-radius: 999px; background: var(--gp-border); overflow: hidden; }
.gp-me-bar span { display: block; height: 100%; border-radius: inherit; background: var(--gp-brand); }
.gp-me-parts { margin-top: 10px; font-size: 13px; }
.gp-me-parts ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.gp-me-parts li { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.gp-me-map { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.gp-me-area {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 2px solid var(--gp-border);
  border-radius: 14px;
  background: #fff;
  color: var(--gp-ink);
  text-decoration: none;
}
.gp-me-area.is-on { border-color: var(--gp-terminal); }
.gp-me-area:focus-visible { outline: 3px solid var(--gp-brand); outline-offset: 2px; }
.gp-me-area strong { font-size: 15px; }
.gp-me-count { font-size: 1.5rem; font-weight: 800; color: var(--gp-terminal); font-variant-numeric: tabular-nums; }
.gp-me-area small { color: var(--gp-muted); font-size: 12px; }
@media (max-width: 720px) { .gp-me { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------
 * 下のナビ（nav.js）。スマホは画面の下いっぱい、タブレットは浮いたドック。
 * ---------------------------------------------------------------- */
.gp-nav {
  --gp-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gp-out: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed;
  z-index: 7000;
  inset: auto 0 0;
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  min-height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 6px max(6px, env(safe-area-inset-right, 0px))
    calc(6px + env(safe-area-inset-bottom, 0px))
    max(6px, env(safe-area-inset-left, 0px));
  border-top: 1px solid #eadfcd;
  background: #fffdf8e6;
  color: var(--gp-terminal);
  box-shadow: 0 -6px 28px #20332d12;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  view-transition-name: gp-nav;
  transition: transform 320ms var(--gp-out), opacity 220ms ease;
}
.gp-nav.is-away {
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}

/* いまのタブの下地。left と width を JS が決め、ばねで滑る */
.gp-nav__pill {
  position: absolute;
  z-index: 0;
  top: 6px;
  left: 0;
  width: var(--w, 0px);
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffe9d4, #ffdcbb);
  box-shadow: inset 0 0 0 1px #ffc79a, 0 4px 12px #ff5b0022;
  transform: translateX(var(--x, 0px));
  opacity: 0;
  transition: transform 520ms var(--gp-spring), width 420ms var(--gp-out), opacity 200ms ease;
  pointer-events: none;
}
.gp-nav__pill.is-still {
  transition: none;
}

.gp-nav a,
.gp-nav__more {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 52px;
  padding: 4px 2px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #5b6358;
  font: inherit;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease, transform 160ms var(--gp-out);
}
.gp-nav a:active,
.gp-nav__more:active {
  transform: scale(0.92);
}
.gp-nav a[aria-current="page"] {
  color: #7a3208;
  font-weight: 800;
}
.gp-nav__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}
.gp-nav__icon svg {
  width: 23px;
  height: 23px;
  transition: transform 260ms var(--gp-spring), stroke-width 200ms ease;
}
.gp-nav a[aria-current="page"] .gp-nav__icon svg {
  stroke-width: 2.3;
  transform: translateY(-1px);
}
.gp-nav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 押したときの弾み */
.is-pop .gp-nav__icon svg,
.is-pop .gp-sheet__icon svg {
  animation: gp-pop 460ms var(--gp-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
@keyframes gp-pop {
  0% { transform: scale(1); }
  30% { transform: scale(0.78) rotate(-6deg); }
  65% { transform: scale(1.16) rotate(3deg); }
  100% { transform: scale(1); }
}

/* 押したところから広がる波紋 */
.gp-ripple {
  position: absolute;
  z-index: -1;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #ff5b0033;
  pointer-events: none;
  animation: gp-ripple 560ms ease-out forwards;
}
@keyframes gp-ripple {
  to { transform: scale(9); opacity: 0; }
}

/* マイ学習の「今日やることがあります」の点 */
.gp-nav__dot {
  position: absolute;
  top: -1px;
  right: -3px;
  width: 9px;
  height: 9px;
  border: 2px solid #fffdf8;
  border-radius: 50%;
  background: #ff5b00;
  animation: gp-dot 2.4s ease-in-out infinite;
}
.gp-nav__dot[hidden] {
  display: none;
}
@keyframes gp-dot {
  0%, 70%, 100% { box-shadow: 0 0 0 0 #ff5b0066; }
  35% { box-shadow: 0 0 0 6px #ff5b0000; }
}
.gp-nav__sr,
.gp-sheet__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
 * メニューのシート（<dialog>）
 * ---------------------------------------------------------------- */
.gp-sheet {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gp-ink, #28342c);
  overflow: visible;
}
.gp-sheet::backdrop {
  background: #1d2a2400;
  backdrop-filter: blur(0);
  transition: background 260ms ease, backdrop-filter 260ms ease;
}
.gp-sheet.is-open::backdrop {
  background: #1d2a2466;
  backdrop-filter: blur(3px);
}
.gp-sheet__panel {
  box-sizing: border-box;
  width: min(100%, 600px);
  max-height: 86dvh;
  margin: 0 auto;
  overflow: auto;
  padding: 6px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  border-radius: 26px 26px 0 0;
  background: #fffaf2;
  box-shadow: 0 -12px 40px #20332d33;
  transform: translateY(100%);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  overscroll-behavior: contain;
}
.gp-sheet.is-open .gp-sheet__panel {
  transform: translateY(0);
}
.gp-sheet.is-closing .gp-sheet__panel {
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
}
.gp-sheet__panel.is-dragging {
  transition: none;
}
.gp-sheet__grab {
  display: grid;
  place-items: center;
  height: 26px;
  cursor: grab;
  touch-action: none;
}
.gp-sheet__grab span {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: #d8cbb6;
}
.gp-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.gp-sheet__head h2 {
  margin: 0;
  font-size: 18px;
  color: var(--gp-terminal, #20332d);
}
.gp-sheet__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #f1e8da;
  color: var(--gp-terminal, #20332d);
  cursor: pointer;
}
.gp-sheet__close svg {
  width: 20px;
  height: 20px;
}
.gp-sheet__search {
  position: relative;
  margin-bottom: 16px;
}
.gp-sheet__search svg {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 20px;
  height: 20px;
  color: #7a7f73;
  transform: translateY(-50%);
  pointer-events: none;
}
.gp-sheet__search input {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px 10px 44px;
  border: 2px solid #e6dac6;
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: 16px; /* iOS の自動ズームを止める */
  color: inherit;
}
.gp-sheet__search input:focus {
  border-color: #ff5b00;
  outline: none;
  box-shadow: 0 0 0 4px #ff5b0026;
}
.gp-sheet__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gp-sheet__grid a {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 4px;
  border-radius: 16px;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transition: background 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 480px) {
  .gp-sheet__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.gp-sheet__grid a:active {
  transform: scale(0.94);
  background: #ffeddc;
}
.gp-sheet__grid a:focus-visible,
.gp-sheet__close:focus-visible,
.gp-nav a:focus-visible,
.gp-nav__more:focus-visible {
  outline: 3px solid #2369c4;
  outline-offset: -3px;
}
.gp-sheet__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(160deg, #fff, #ffeedd);
  box-shadow: inset 0 0 0 1px #f2dcc2, 0 3px 8px #ff5b0014;
  color: #d24a00;
}
.gp-sheet__icon svg {
  width: 24px;
  height: 24px;
}
/* 開いたとき、アイコンが順に浮かび上がる */
.gp-sheet.is-open .gp-sheet__grid li {
  animation: gp-rise 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(80ms + var(--i, 0) * 28ms);
}
@keyframes gp-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
}

/* ------------------------------------------------------------------
 * 表示する幅: スマホ（〜599px）は下いっぱい、タブレット（600〜1024px）は浮いたドック
 * ---------------------------------------------------------------- */
@media (max-width: 1024px), (display-mode: standalone) {
  html:has(.gp-nav) {
    --goodly-app-nav-height: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .gp-nav {
    display: grid;
  }
  body:has(.gp-nav) .gnav {
    padding-bottom: 0;
  }
}
@media (min-width: 600px) and (max-width: 1024px) {
  .gp-nav {
    left: 50%;
    right: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: min(560px, calc(100% - 32px));
    min-height: 64px;
    padding: 6px;
    border: 1px solid #eadfcd;
    border-radius: 24px;
    transform: translateX(-50%);
    box-shadow: 0 10px 34px #20332d24;
  }
  .gp-nav.is-away {
    transform: translate(-50%, calc(100% + 40px));
  }
  .gp-sheet__panel {
    margin-bottom: 12px;
    border-radius: 26px;
  }
  .gp-sheet__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------
 * ページをまたぐ切り替え（対応ブラウザ）: 中身はふわっと入れ替わり、ナビは動かない
 * ---------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: gp-vt-out 180ms ease both;
}
::view-transition-new(root) {
  animation: gp-vt-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gp-vt-out {
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes gp-vt-in {
  from { opacity: 0; transform: translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  .gp-nav,
  .gp-nav__pill,
  .gp-nav a,
  .gp-nav__more,
  .gp-nav__icon svg,
  .gp-sheet__panel,
  .gp-sheet::backdrop,
  .gp-sheet__grid a {
    transition: none;
  }
  .gp-nav__dot,
  .is-pop .gp-nav__icon svg,
  .is-pop .gp-sheet__icon svg,
  .gp-sheet.is-open .gp-sheet__grid li {
    animation: none;
  }
  .gp-nav a:active,
  .gp-nav__more:active,
  .gp-sheet__grid a:active {
    transform: none;
  }
}
@media (forced-colors: active) {
  .gp-nav__pill {
    background: Highlight;
    opacity: 0.3;
  }
  .gp-sheet__panel {
    border: 1px solid CanvasText;
  }
}

/* =====================================================================
 * 2.0.0 — アプリにする・アプリの操作感・マイ学習の作り直し
 * （app-shell.js・install.js・me.js。動きを減らす設定では、動きだけを止める）
 * =================================================================== */
:root {
  --gp-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gp-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gp-appbar-h: 56px;
}

/* 部品の中の線のアイコン（JS が作る svg） */
:where(.gp-appbar, .gp-toast, .gp-ichip, .gp-isheet, .gp-welcome, .gp-day, .gp-route, .gp-chip, .gp-edge, .gp-ios-pointer, .gp-sheet__app) svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------------
 * 起動の演出（アプリとして開いた最初の1ページ）。OS のスプラッシュと同じ色・同じアイコンから続けて、
 * アイコンが「ひらいて」画面になる（丸い穴が広がる）。@property が無いブラウザでは消えるだけ。
 * ------------------------------------------------------------------- */
@property --gp-reveal {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
html.gp-launching::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: radial-gradient(circle at 50% 44%, #fffaf2 0, #fff4e1 70%);
  -webkit-mask: radial-gradient(circle at 50% 44%, transparent var(--gp-reveal), #000 calc(var(--gp-reveal) + 1px));
  mask: radial-gradient(circle at 50% 44%, transparent var(--gp-reveal), #000 calc(var(--gp-reveal) + 1px));
  animation:
    gp-reveal 760ms cubic-bezier(0.7, 0, 0.25, 1) 560ms forwards,
    gp-splash-fade 260ms ease 1340ms forwards;
  pointer-events: none;
}
html.gp-launching::after {
  content: "";
  position: fixed;
  z-index: 2147483001;
  left: 50%;
  top: 44%;
  width: 116px;
  height: 116px;
  margin: -58px 0 0 -58px;
  background: url("icon-512.png") center / contain no-repeat;
  filter: drop-shadow(0 12px 26px #ff5b0040);
  animation: gp-splash-icon 1300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  pointer-events: none;
}
@keyframes gp-reveal {
  to { --gp-reveal: 160vmax; }
}
@keyframes gp-splash-fade {
  to { opacity: 0; visibility: hidden; }
}
@keyframes gp-splash-icon {
  0% { transform: scale(0.84); }
  22% { transform: scale(1.1); }
  36% { transform: scale(0.96); }
  48% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ---------------------------------------------------------------------
 * アプリとして開いたとき: 上の帯を小さく（戻る・ロゴ・検索・共有）
 * テーマの帯をそのまま使う（ほかの部品が帯の下端を測っているので、要素は消さずに高さ 0 に畳む）
 * ------------------------------------------------------------------- */
html.gp-app {
  --lp-header-offset: calc(var(--gp-appbar-h) + env(safe-area-inset-top, 0px));
}
html.gp-app body {
  padding-top: calc(var(--gp-appbar-h) + env(safe-area-inset-top, 0px));
}
html.gp-app body.gp-shell {
  padding-top: env(safe-area-inset-top, 0px);
}
html.gp-app .global-header {
  padding-top: env(safe-area-inset-top, 0px);
  background: #fffdf8f0;
  box-shadow: 0 1px 0 #20332d14, 0 8px 24px #20332d0d;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
html.gp-app .global-header__wrap {
  align-items: center;
  gap: 2px;
  height: var(--gp-appbar-h);
  padding: 0 4px 0 6px;
  background: transparent;
}
html.gp-app .global-header-option {
  display: none;
}
html.gp-app .global-header-nav {
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
html.gp-app .global-header-logo {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
}
html.gp-app .global-header-logo__wrap,
html.gp-app .global-header-logo__link {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}
html.gp-app .global-header-logo__logo {
  width: 116px;
  height: auto;
  margin: 0;
}
html.gp-app .global-header-logo__tagline {
  display: none;
}
.gp-appbar__btn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--gp-terminal);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 160ms ease, transform 160ms var(--gp-out);
}
.gp-appbar__btn svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gp-appbar__back svg {
  stroke-width: 2.5;
}
.gp-appbar__btn:active {
  transform: scale(0.86);
  background: #ff5b001a;
}
.gp-appbar__btn:focus-visible {
  outline: 3px solid #2369c4;
  outline-offset: -3px;
}
.gp-appbar__back {
  animation: gp-back-in 420ms var(--gp-spring) both;
}
@keyframes gp-back-in {
  from { opacity: 0; transform: translateX(-10px); }
}
.gp-appbar__actions {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
.gp-shell .gp-header .gp-appbar__actions {
  margin-left: auto;
}
/* アプリでは、つながりの印は知らせ（toast）に任せて、上の帯を軽く */
html.gp-app .gp-shell .gp-header .gp-connection {
  display: none;
}
/* テーマの帯が無いページの、自分の帯 */
.gp-appbar {
  position: fixed;
  z-index: 8000;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: calc(var(--gp-appbar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 4px 0 6px;
  background: #fffdf8f0;
  box-shadow: 0 1px 0 #20332d14;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.gp-appbar__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--gp-terminal);
  font: 800 16px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 移るあいだの読み込みの帯（アプリには読み込み中の印が無い） */
.gp-loadbar {
  position: fixed;
  z-index: 9500;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #ff5b00, #ffb071);
  box-shadow: 0 0 10px #ff5b0080;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
.gp-loadbar.is-on {
  opacity: 1;
  animation: gp-load 2.6s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
}
@keyframes gp-load {
  from { transform: scaleX(0.08); }
  to { transform: scaleX(0.88); }
}

/* 引っぱって更新 */
.gp-pull {
  position: fixed;
  z-index: 9400;
  top: calc(var(--gp-appbar-h) + env(safe-area-inset-top, 0px) - 48px);
  left: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border-radius: 50%;
  background: #fffdf8;
  box-shadow: 0 8px 20px #20332d2e, 0 0 0 1px #20332d12;
  opacity: 0;
  transform: translateY(var(--pull, 0px)) scale(0.6);
  transition: opacity 160ms ease, transform 300ms var(--gp-out);
  pointer-events: none;
}
.gp-pull.is-shown {
  opacity: 1;
  transform: translateY(var(--pull, 0px)) scale(1);
  transition: none;
}
.gp-pull__icon {
  width: 28px;
  height: 28px;
  background: url("icon-192.png") center / contain no-repeat;
  transform: rotate(var(--turn, 0deg));
}
.gp-pull.is-armed {
  box-shadow: 0 8px 22px #ff5b0055, 0 0 0 2px #ff5b00;
}
.gp-pull.is-armed .gp-pull__icon {
  animation: gp-armed 420ms var(--gp-spring);
}
.gp-pull.is-loading {
  transition: transform 300ms var(--gp-spring);
}
.gp-pull.is-loading .gp-pull__icon {
  animation: gp-spin 900ms linear infinite;
}
@keyframes gp-armed {
  40% { transform: rotate(var(--turn, 0deg)) scale(1.25); }
}
@keyframes gp-spin {
  to { transform: rotate(360deg); }
}

/* 左の端から引いて戻る（iPhone・iPad） */
.gp-edge {
  position: fixed;
  z-index: 9400;
  top: 50%;
  left: -48px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  background: var(--gp-terminal);
  color: #fff4e1;
  opacity: 0;
  transform: translateX(var(--dx, 0px));
  transition: opacity 160ms ease, background-color 160ms ease;
  pointer-events: none;
}
.gp-edge svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.6;
}
.gp-edge.is-shown {
  opacity: 1;
}
.gp-edge.is-armed {
  background: var(--gp-brand);
  color: #2e180a;
}

/* ---------------------------------------------------------------------
 * 知らせ（toast）: 下のナビの上に、ばねで出る。横に払うと消える
 * ------------------------------------------------------------------- */
.gp-toasts {
  position: fixed;
  z-index: 9600;
  left: 50%;
  bottom: calc(var(--goodly-app-nav-height, 0px) + 12px);
  display: grid;
  gap: 8px;
  width: min(480px, calc(100% - 24px));
  transform: translateX(-50%);
  pointer-events: none;
}
.gp-toast {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 9px 9px 9px 12px;
  border-radius: 17px;
  background: #20332df2;
  color: #fff7ea;
  box-shadow: 0 14px 34px #20332d47;
  font: 650 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  opacity: 0;
  transform: translateY(18px) scale(0.95);
  transition: opacity 200ms ease, transform 420ms var(--gp-spring);
  pointer-events: auto;
  touch-action: pan-y;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.gp-toast.is-in {
  opacity: 1;
  transform: none;
}
.gp-toast.is-out {
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition-duration: 200ms;
}
.gp-toast__icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff1f;
}
.gp-toast__icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}
.gp-toast--ok .gp-toast__icon {
  background: #2bb673;
  color: #fff;
}
.gp-toast--offline .gp-toast__icon {
  background: #ffb071;
  color: #20332d;
}
.gp-toast--update .gp-toast__icon {
  background: var(--gp-brand);
  color: #2e180a;
}
.gp-toast--error .gp-toast__icon {
  background: #e5484d;
  color: #fff;
}
.gp-toast__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.gp-toast__action {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  border-radius: 11px;
  background: var(--gp-brand);
  color: #2e180a;
  font: inherit;
  font-weight: 800;
  line-height: 24px;
  text-decoration: none;
  cursor: pointer;
}
.gp-toast__action:visited {
  color: #2e180a;
}
.gp-toast__close {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.gp-toast__close svg {
  width: 16px;
  height: 16px;
}
.gp-toast :focus-visible {
  outline: 3px solid #8fc1ff;
  outline-offset: 2px;
}

/* 保存の進み具合 */
.gp-save-meter {
  flex-basis: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: #efe3cf;
}
.gp-save-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7a26, #ff5b00);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  transition: transform 300ms ease;
}
.gp-save-meter[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------
 * 「アプリにする」: メニューの1行目・誘う札（チップ）
 * ------------------------------------------------------------------- */
.gp-sheet__app {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(120deg, #20332d, #2e4d40);
  color: #fff4e1;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 20px #20332d33;
  transition: transform 160ms var(--gp-out);
}
.gp-sheet__app:active {
  transform: scale(0.97);
}
.gp-sheet__app[hidden] {
  display: none;
}
.gp-sheet__app img {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.gp-sheet__app span {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}
.gp-sheet__app b {
  font-size: 15px;
}
.gp-sheet__app small {
  color: #cfdccf;
  font-size: 12px;
}
.gp-sheet__app svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}
.gp-sheet__app:focus-visible {
  outline: 3px solid #8fc1ff;
  outline-offset: 2px;
}

.gp-ichip {
  box-sizing: border-box;
  position: fixed;
  z-index: 7100;
  left: 50%;
  bottom: calc(var(--goodly-app-nav-height, 0px) + 12px);
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(470px, calc(100% - 20px));
  padding: 9px 6px 9px 10px;
  border-radius: 20px;
  background: #fffdf8;
  color: var(--gp-ink);
  box-shadow: 0 18px 42px #20332d33, 0 0 0 1px #ffd2ad;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  opacity: 0;
  transform: translate(-50%, 26px) scale(0.94);
  transition: transform 520ms var(--gp-spring), opacity 240ms ease;
}
.gp-ichip.is-in {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.gp-ichip.is-out {
  opacity: 0;
  transform: translate(-50%, 18px) scale(0.96);
  transition-duration: 240ms;
}
.gp-ichip img {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  animation: gp-wiggle 1100ms var(--gp-spring) 420ms both;
}
@keyframes gp-wiggle {
  0% { transform: scale(0.6) rotate(-14deg); }
  40% { transform: scale(1.12) rotate(8deg); }
  62% { transform: scale(0.97) rotate(-4deg); }
  82% { transform: rotate(2deg); }
  100% { transform: none; }
}
.gp-ichip__text {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
}
.gp-ichip__text b {
  color: var(--gp-terminal);
  font-size: 13.5px;
  line-height: 1.45;
}
.gp-ichip__text small {
  color: var(--gp-muted);
  font-size: 11.5px;
  line-height: 1.5;
}
.gp-ichip__go {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 6px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--gp-brand);
  color: #2e180a;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.gp-ichip__close {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gp-muted);
  cursor: pointer;
}
.gp-ichip__close svg {
  width: 16px;
  height: 16px;
}
.gp-ichip :focus-visible {
  outline: 3px solid #2369c4;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * 入れるシート: スマホの模型・できるようになること・入れ方・入れた瞬間
 * ------------------------------------------------------------------- */
.gp-isheet,
.gp-welcome {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gp-ink);
  overflow: visible;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  line-height: 1.6;
}
.gp-isheet *,
.gp-welcome * {
  box-sizing: border-box;
}
.gp-isheet::backdrop,
.gp-welcome::backdrop {
  background: #1d2a2400;
  transition: background 280ms ease, backdrop-filter 280ms ease;
}
.gp-isheet.is-open::backdrop,
.gp-welcome.is-open::backdrop {
  background: #1d2a2475;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.gp-isheet__panel {
  position: relative;
  width: min(100%, 520px);
  max-height: 92dvh;
  margin: 0 auto;
  overflow: auto;
  padding: 4px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  background: radial-gradient(130% 55% at 50% 0%, #ffe3c6 0%, #fff5e8 48%, #fffaf2 100%);
  box-shadow: 0 -16px 50px #20332d40;
  transform: translateY(100%);
  transition: transform 520ms var(--gp-out);
  overscroll-behavior: contain;
}
.gp-isheet.is-open .gp-isheet__panel {
  transform: none;
}
.gp-isheet.is-closing .gp-isheet__panel {
  transition-duration: 260ms;
  transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
}
.gp-isheet__panel.is-dragging {
  transition: none;
}
.gp-isheet__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
}
@media (min-width: 600px) {
  .gp-isheet__panel {
    margin-bottom: 16px;
    border-radius: 28px;
  }
}
.gp-isheet__stage {
  position: relative;
  display: grid;
  place-items: end center;
  height: 206px;
  margin: 2px 0 4px;
}
.gp-phone {
  position: relative;
  width: 172px;
  height: 196px;
  padding: 10px 10px 0;
  overflow: hidden;
  border-radius: 32px 32px 0 0;
  background: #20332d;
  box-shadow: inset 0 0 0 2px #4b6656, 0 22px 40px #20332d38;
  -webkit-mask: linear-gradient(#000 82%, transparent);
  mask: linear-gradient(#000 82%, transparent);
}
.gp-phone__screen {
  position: relative;
  height: 100%;
  padding: 24px 12px 0;
  overflow: hidden;
  border-radius: 23px 23px 0 0;
  background: linear-gradient(165deg, #ffcfa6, #ffe9d4 48%, #fff6ea);
}
.gp-phone__time {
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  color: #20332d;
  font: 800 9px/1 -apple-system, "Segoe UI", sans-serif;
  text-align: center;
}
.gp-phone__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.gp-phone__app {
  aspect-ratio: 1;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px #00000012;
  animation: gp-app-pop 520ms var(--gp-spring) both;
  animation-delay: calc(150ms + var(--i, 0) * 40ms);
}
@keyframes gp-app-pop {
  from { opacity: 0; transform: scale(0.4); }
}
.gp-phone__dock {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 40px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 8px;
  border-radius: 16px;
  background: #ffffffa6;
}
.gp-phone__slot {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1.5px dashed #ff5b00a0;
  border-radius: 9px;
  animation: gp-slot 1.6s ease-in-out infinite;
}
.gp-phone__slot img {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  animation: gp-land 560ms var(--gp-spring) both;
}
.gp-phone__slot.is-landed {
  border-color: transparent;
  animation: gp-slot-ripple 900ms ease-out;
}
@keyframes gp-slot {
  50% { border-color: #ff5b00; background: #ff5b0016; }
}
@keyframes gp-land {
  0% { transform: scale(1.3, 0.7); }
  50% { transform: scale(0.9, 1.1); }
  100% { transform: none; }
}
@keyframes gp-slot-ripple {
  from { box-shadow: 0 0 0 0 #ff5b0090; }
  to { box-shadow: 0 0 0 20px #ff5b0000; }
}
.gp-isheet__icon {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 50%;
  width: 78px;
  height: 78px;
  margin-left: -39px;
  border-radius: 21px;
  filter: drop-shadow(0 14px 24px #ff5b0059);
  animation: gp-float 3s ease-in-out infinite;
}
@keyframes gp-float {
  50% { transform: translateY(-8px) rotate(2deg); }
}
.gp-isheet__body h2 {
  margin: 6px 0 4px;
  color: var(--gp-terminal);
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.3px;
  text-align: center;
}
.gp-isheet__lead {
  margin: 0 0 14px;
  color: var(--gp-muted);
  font-size: 14px;
  text-align: center;
}
.gp-isheet__perks {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.gp-isheet__perks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fffdf8;
  box-shadow: 0 0 0 1px #f0e2cc;
  animation: gp-rise 500ms var(--gp-out) both;
  animation-delay: calc(220ms + var(--i, 0) * 70ms);
}
.gp-isheet__perk-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(160deg, #ff7a26, #ff5b00);
  color: #fff;
}
.gp-isheet__perk-icon svg {
  width: 20px;
  height: 20px;
}
.gp-isheet__perks b {
  display: block;
  color: var(--gp-terminal);
  font-size: 14px;
}
.gp-isheet__perks small {
  display: block;
  color: var(--gp-muted);
  font-size: 12px;
  line-height: 1.5;
}
.gp-isheet__cta {
  display: grid;
  gap: 8px;
}
.gp-isheet__go {
  width: 100%;
  min-height: 54px;
  border-radius: 16px;
  font-size: 16px;
  box-shadow: 0 8px 20px #ff5b0055;
  animation: gp-breathe 2.4s ease-in-out 1.2s infinite;
}
@keyframes gp-breathe {
  50% { box-shadow: 0 10px 30px #ff5b0088; transform: translateY(-1px); }
}
.gp-isheet__fine {
  margin: 0;
  color: var(--gp-muted);
  font-size: 11.5px;
  text-align: center;
}
.gp-isheet__steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gp-step;
}
.gp-isheet__steps li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding: 12px 14px 12px 52px;
  border-radius: 16px;
  background: #fffdf8;
  box-shadow: 0 0 0 1px #f0e2cc;
  font-size: 14px;
  counter-increment: gp-step;
}
.gp-isheet__steps li::before {
  content: counter(gp-step);
  position: absolute;
  top: 50%;
  left: 12px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  background: var(--gp-terminal);
  color: #fff4e1;
  font-size: 13px;
  font-weight: 800;
}
.gp-isheet__steps svg {
  width: 20px;
  height: 20px;
  color: #2369c4;
}
.gp-isheet__how {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fffdf8;
  box-shadow: 0 0 0 1px #f0e2cc;
  font-size: 14px;
}
/* iPhone・iPad: 本物の共有ボタンを指す */
.gp-ios-pointer {
  --dir: 1;
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border-radius: 50%;
  background: #2369c4;
  color: #fff;
  box-shadow: 0 10px 24px #2369c466;
  animation: gp-point 1.1s ease-in-out infinite;
}
.gp-ios-pointer svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.6;
}
.gp-ios-pointer--ipad {
  --dir: -1;
  top: calc(6px + env(safe-area-inset-top, 0px));
  bottom: auto;
  left: auto;
  right: 70px;
  margin: 0;
}
.gp-ios-pointer--ipad svg {
  transform: rotate(180deg);
}
@keyframes gp-point {
  50% { transform: translateY(calc(var(--dir) * 8px)); }
}
/* 入れた */
.gp-isheet__done {
  padding: 6px 0 4px;
  text-align: center;
  animation: gp-rise 520ms var(--gp-out) both;
}
.gp-isheet__done:focus {
  outline: none;
}
.gp-isheet__wow {
  margin: 0;
  color: var(--gp-brand);
  font: 900 13px/1.4 ui-monospace, "Cascadia Code", monospace;
  letter-spacing: 0.2em;
}
.gp-isheet__body h2,
.gp-isheet__done h3,
.gp-welcome h2,
.gp-hello h1 {
  text-wrap: balance;
  word-break: auto-phrase;
}
.gp-isheet__done h3 {
  margin: 4px 0 12px;
  color: var(--gp-terminal);
  font-size: 21px;
}
.gp-isheet__serial,
.gp-welcome__serial b {
  font-variant-numeric: tabular-nums;
}
.gp-isheet__serial {
  display: inline-grid;
  justify-items: center;
  gap: 2px;
  margin: 0 0 12px;
  padding: 14px 26px;
  border-radius: 20px;
  background: var(--gp-terminal);
  color: #fff4e1;
  box-shadow: 0 12px 26px #20332d40;
  animation: gp-pop-in 600ms var(--gp-spring) 200ms both;
}
@keyframes gp-pop-in {
  from { opacity: 0; transform: scale(0.7); }
}
.gp-isheet__serial b {
  color: #ffb071;
  font: 800 30px/1.1 ui-monospace, "Cascadia Code", monospace;
  letter-spacing: 0.04em;
}
.gp-isheet__serial small {
  color: #d4dfd4;
  font-size: 12px;
}
.gp-isheet__next {
  margin: 0 0 14px;
  color: var(--gp-muted);
  font-size: 13.5px;
}
.gp-burst {
  position: fixed;
  z-index: 2147483200;
  width: 0;
  height: 0;
  pointer-events: none;
}
.gp-burst i {
  position: absolute;
  left: -4px;
  top: -6px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  animation: gp-burst 1.1s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
@keyframes gp-burst {
  to { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}

/* ---------------------------------------------------------------------
 * はじめての起動: ようこそ
 * ------------------------------------------------------------------- */
.gp-welcome {
  inset: 0;
  width: 100%;
  height: 100%;
}
.gp-welcome[open] {
  display: grid;
  place-items: center;
}
.gp-welcome__panel {
  width: min(100% - 28px, 440px);
  max-height: calc(100dvh - 28px);
  overflow: auto;
  padding: 26px 20px 16px;
  border-radius: 28px;
  background: radial-gradient(120% 60% at 50% 0%, #ffe3c6 0%, #fffaf2 60%);
  box-shadow: 0 26px 64px #20332d59;
  text-align: center;
  opacity: 0;
  transform: scale(0.9) translateY(18px);
  transition: transform 560ms var(--gp-spring), opacity 260ms ease;
}
.gp-welcome.is-open .gp-welcome__panel {
  opacity: 1;
  transform: none;
}
.gp-welcome.is-closing .gp-welcome__panel {
  opacity: 0;
  transform: scale(0.96);
  transition-duration: 200ms;
}
.gp-welcome__art {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: 0 auto 10px;
}
.gp-welcome__art img {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 24px;
  animation: gp-wiggle 1s var(--gp-spring) 200ms both;
}
.gp-welcome__ring {
  position: absolute;
  inset: 0;
  border: 2px solid #ff5b0070;
  border-radius: 50%;
  animation: gp-ring-out 2.2s ease-out infinite;
}
.gp-welcome__ring--2 {
  animation-delay: 1.1s;
}
@keyframes gp-ring-out {
  from { opacity: 1; transform: scale(0.7); }
  to { opacity: 0; transform: scale(1.5); }
}
.gp-welcome h2 {
  margin: 0 0 6px;
  color: var(--gp-terminal);
  font-size: 21px;
  font-weight: 850;
}
.gp-welcome__serial {
  margin: 0 0 10px;
  font-size: 14px;
  animation: gp-rise 400ms var(--gp-out) both;
}
.gp-welcome__serial b {
  color: #d24a00;
  font: 800 16px/1.4 ui-monospace, "Cascadia Code", monospace;
}
.gp-welcome__ask {
  margin: 0 0 12px;
  color: var(--gp-muted);
  font-size: 13.5px;
}
.gp-welcome__later {
  min-height: 40px;
  margin-top: 8px;
  border: 0;
  background: none;
  color: var(--gp-muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* あなたの道を選ぶ（ようこそ・マイ学習） */
.gp-paths {
  display: grid;
  gap: 8px;
  text-align: left;
}
.gp-paths__item {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #f0dcc2;
  border-radius: 18px;
  background: #fffdf8;
  color: var(--gp-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  animation: gp-rise 450ms var(--gp-out) both;
  animation-delay: calc(120ms + var(--i, 0) * 70ms);
  transition: transform 200ms var(--gp-out), border-color 200ms ease, box-shadow 200ms ease;
}
.gp-paths__item b {
  color: var(--gp-terminal);
  font-size: 15.5px;
}
.gp-paths__item small {
  color: var(--gp-muted);
  font-size: 12.5px;
}
.gp-paths__item:hover,
.gp-paths__item:focus-visible {
  border-color: var(--gp-brand);
  box-shadow: 0 6px 16px #ff5b0026;
  outline: none;
}
.gp-paths__item:active {
  transform: scale(0.97);
}
.gp-paths__item.is-current {
  border-color: var(--gp-terminal);
}

/* ---------------------------------------------------------------------
 * マイ学習（アプリの最初の画面）
 * ------------------------------------------------------------------- */
.gp-loading {
  color: var(--gp-muted);
  font-size: 14px;
}
.gp-hello {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 28px;
}
.gp-hello__text {
  flex: 1 1 260px;
  min-width: 0;
}
.gp-hello__greet {
  margin: 0 0 6px;
  color: var(--gp-muted);
  font-size: 14px;
  font-weight: 700;
}
.gp-hello h1 {
  margin: 0;
  color: var(--gp-terminal);
  font-size: clamp(27px, 4vw, 42px);
  font-weight: 850;
  line-height: 1.32;
  letter-spacing: -0.6px;
  text-wrap: balance;
}
.gp-hello__me {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gp-ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
}
.gp-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.gp-ring circle {
  fill: none;
  stroke-width: 6;
}
.gp-ring__bg {
  stroke: #f1e3cd;
}
.gp-ring__fg {
  stroke: var(--gp-brand);
  stroke-linecap: round;
  stroke-dasharray: 169.65;
  stroke-dashoffset: calc(169.65 * (1 - var(--p, 0)));
  animation: gp-ring-in 1.1s var(--gp-out) 200ms both;
}
@keyframes gp-ring-in {
  from { stroke-dashoffset: 169.65; }
}
.gp-ring b {
  position: relative;
  display: grid;
  justify-items: center;
  color: var(--gp-terminal);
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gp-ring b small {
  color: var(--gp-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.gp-hello__chips {
  display: grid;
  gap: 6px;
  justify-items: start;
}
.gp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #fffdf8;
  box-shadow: 0 0 0 1px #ecdcc4;
  color: var(--gp-ink);
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
}
.gp-chip svg {
  width: 16px;
  height: 16px;
}
.gp-chip--fire.is-on {
  background: linear-gradient(120deg, #fff1e3, #ffe0c2);
  box-shadow: 0 0 0 1px #ffc79a;
  color: #a43d00;
}
.gp-chip--fire.is-on svg {
  fill: #ff5b00;
  stroke: #ff5b00;
  transform-origin: 50% 90%;
  animation: gp-flame 1.6s ease-in-out infinite;
}
@keyframes gp-flame {
  50% { transform: scale(1.12, 0.94) rotate(-4deg); }
}

/* 今日やること */
.gp-today [data-gp-today] {
  position: relative;
}
.gp-today__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 138px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gp-day a {
  position: relative;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 2px;
  min-height: 116px;
  padding: 14px;
  border-radius: 20px;
  background: #fffefa;
  box-shadow: 0 0 0 1px var(--gp-border), 0 6px 16px #46371308;
  color: var(--gp-ink);
  text-decoration: none;
  animation: gp-rise 450ms var(--gp-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
  transition: transform 180ms var(--gp-out), box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.gp-day a:active {
  transform: scale(0.96);
}
.gp-day a:focus-visible {
  outline: 3px solid #2369c4;
  outline-offset: 2px;
}
.gp-day__stamp {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: #fff1e3;
  color: #d24a00;
}
.gp-day__stamp svg {
  width: 22px;
  height: 22px;
}
.gp-day b {
  color: var(--gp-terminal);
  font-size: 14.5px;
}
.gp-day small {
  color: var(--gp-muted);
  font-size: 12px;
}
.gp-day__check {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #e6d8c2;
  color: transparent;
}
.gp-day__check svg {
  width: 15px;
  height: 15px;
  stroke-width: 3;
}
.gp-day.is-done a {
  background: linear-gradient(160deg, #fff6ec, #fffefa);
}
.gp-day.is-done .gp-day__stamp {
  background: var(--gp-brand);
  color: #fff;
}
.gp-day.is-done .gp-day__check {
  background: #2bb673;
  box-shadow: none;
  color: #fff;
  animation: gp-stamp 520ms var(--gp-spring) both;
  animation-delay: calc(200ms + var(--i, 0) * 60ms);
}
.gp-day.is-done small {
  color: #1f8a55;
  font-weight: 750;
}
@keyframes gp-stamp {
  from { opacity: 0; transform: scale(2) rotate(-20deg); }
}
.gp-today__sum {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 2px 0;
  color: var(--gp-muted);
  font-size: 13px;
}
.gp-today__meter {
  position: relative;
  flex: 0 0 110px;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #efe3cf;
}
.gp-today__meter::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7a26, #ff5b00);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  animation: gp-meter-in 900ms var(--gp-out) both;
}
@keyframes gp-meter-in {
  from { transform: scaleX(0); }
}
.is-complete .gp-today__sum {
  color: #1f8a55;
  font-weight: 800;
}
.is-complete .gp-today__meter::after {
  background: linear-gradient(90deg, #2bb673, #1f8a55);
}
.gp-confetti {
  position: absolute;
  top: 34%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.gp-confetti i {
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  animation: gp-confetti 1.5s cubic-bezier(0.2, 0.6, 0.3, 1) var(--d, 0ms) forwards;
}
@keyframes gp-confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  40% { opacity: 1; transform: translate(calc(var(--x) * 0.6), var(--y)) rotate(calc(var(--r) * 0.5)); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 190px)) rotate(var(--r)); }
}

/* 続きから: 横に送るカード */
.gp-rail {
  display: grid;
  grid-auto-columns: min(84%, 330px);
  grid-auto-flow: column;
  gap: 12px;
  margin: 0 -2px;
  padding: 4px 2px 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.gp-rail > * {
  scroll-snap-align: start;
}
.gp-rail:has(> .gp-empty),
.gp-rail:has(> .gp-loading) {
  grid-auto-columns: 100%;
}
.gp-resume {
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* あなたの道 */
.gp-path__ask {
  margin: 0 0 12px;
  color: var(--gp-muted);
  font-size: 14px;
}
.gp-path__head h3 {
  margin: 0 0 2px;
  color: var(--gp-terminal);
  font-size: 18px;
}
.gp-path__head p {
  margin: 0 0 12px;
  color: var(--gp-muted);
  font-size: 13.5px;
}
.gp-route {
  position: relative;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gp-route::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 26px;
  width: 3px;
  border-radius: 3px;
  background: repeating-linear-gradient(#e2d2bb 0 6px, transparent 6px 11px);
}
.gp-route__stop a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 6px;
  border-radius: 16px;
  color: var(--gp-ink);
  text-decoration: none;
  animation: gp-rise 450ms var(--gp-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: background-color 180ms ease;
}
.gp-route__stop a:hover {
  background: #fff7ec;
}
.gp-route__stop a:focus-visible {
  outline: 3px solid #2369c4;
  outline-offset: 1px;
}
.gp-route__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-left: 6px;
  border-radius: 50%;
  background: #fffdf8;
  box-shadow: inset 0 0 0 3px #e2d2bb;
  color: #fff;
}
.gp-route__dot svg {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}
.gp-route__stop.is-done .gp-route__dot {
  background: #2bb673;
  box-shadow: none;
}
.gp-route__stop.is-next .gp-route__dot {
  background: var(--gp-brand);
  box-shadow: 0 0 0 0 #ff5b0066;
  animation: gp-next 1.8s ease-out infinite;
}
@keyframes gp-next {
  0% { box-shadow: 0 0 0 0 #ff5b0066; }
  70%, 100% { box-shadow: 0 0 0 12px #ff5b0000; }
}
.gp-route__stop.is-next a {
  background: #fff3e6;
  box-shadow: 0 0 0 1px #ffd2ad;
}
.gp-route__text {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.gp-route__text b {
  color: var(--gp-terminal);
  font-size: 14.5px;
}
.gp-route__stop.is-done .gp-route__text b {
  color: #6b7568;
  text-decoration: line-through;
  text-decoration-color: #2bb67399;
}
.gp-route__text small {
  color: var(--gp-muted);
  font-size: 12px;
}
.gp-route__stop.is-next small {
  color: #a43d00;
  font-weight: 700;
}
.gp-path__change {
  min-height: 40px;
  margin-top: 8px;
  border: 0;
  background: none;
  color: var(--gp-muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* 最近読んだページ */
.gp-recent {
  margin: 18px 0 16px;
  padding: 16px 18px;
  border-radius: 20px;
  background: #fffefa;
  box-shadow: 0 0 0 1px var(--gp-border);
}
.gp-recent[hidden] {
  display: none;
}
.gp-recent h3 {
  margin: 0 0 6px;
  color: var(--gp-terminal);
  font-size: 15px;
}
.gp-recent ul {
  display: grid;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.gp-recent li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid #f0e6d6;
}
.gp-recent li:first-child {
  border-top: 0;
}
.gp-recent a {
  min-width: 0;
  overflow: hidden;
  color: var(--gp-terminal);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp-recent .gp-meta {
  flex: 0 0 auto;
  margin: 0;
}
.gp-recent .gp-section-note {
  margin: 0;
}

/* Goodly Club とつなぐ */
.gp-club {
  margin: 0 0 30px;
  padding: 22px 24px;
  border-radius: 22px;
  background: linear-gradient(135deg, #fff0f6, #fff8ef);
  box-shadow: 0 0 0 1px #f4cadd;
}
.gp-club[hidden] {
  display: none;
}
.gp-club h2 {
  margin: 0 0 6px;
  color: #5e2440;
  font-size: 19px;
}
.gp-club p:not(.gp-eyebrow) {
  margin: 0 0 14px;
  color: #6b4a58;
  font-size: 14px;
}

/* アプリにする（マイ学習） */
.gp-install__art {
  flex: 0 0 auto;
}
.gp-install__art img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  filter: drop-shadow(0 8px 16px #00000040);
  animation: gp-float 3s ease-in-out infinite;
}

/* この端末のデータ */
.gp-foot {
  margin: 10px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #20332d1a;
  color: var(--gp-muted);
  font-size: 13px;
}
.gp-foot h2 {
  margin: 0 0 6px;
  color: var(--gp-terminal);
  font-size: 15px;
}
.gp-foot p {
  margin: 0 0 10px;
}
.gp-foot__ver {
  font: 600 11px/1.6 ui-monospace, "Cascadia Code", monospace;
  opacity: 0.8;
}

/* 動きを減らす設定: 動きだけを止める（最後の形で見せる） */
@media (prefers-reduced-motion: reduce) {
  html.gp-launching::before,
  html.gp-launching::after {
    display: none;
  }
  .gp-toast,
  .gp-ichip,
  .gp-isheet__panel,
  .gp-welcome__panel,
  .gp-pull,
  .gp-edge,
  .gp-appbar__btn,
  .gp-paths__item,
  .gp-day a,
  .gp-route__stop a,
  .gp-save-meter span {
    transition: none;
  }
  .gp-appbar__back,
  .gp-ichip img,
  .gp-phone__app,
  .gp-phone__slot,
  .gp-phone__slot img,
  .gp-isheet__icon,
  .gp-isheet__perks li,
  .gp-isheet__go,
  .gp-ios-pointer,
  .gp-isheet__done,
  .gp-isheet__serial,
  .gp-welcome__art img,
  .gp-welcome__serial,
  .gp-paths__item,
  .gp-ring__fg,
  .gp-chip--fire.is-on svg,
  .gp-day a,
  .gp-day.is-done .gp-day__check,
  .gp-today__meter::after,
  .gp-route__stop a,
  .gp-route__stop.is-next .gp-route__dot,
  .gp-install__art img,
  .gp-loadbar.is-on,
  .gp-pull.is-loading .gp-pull__icon {
    animation: none;
  }
  .gp-loadbar.is-on {
    transform: scaleX(0.6);
  }
  .gp-welcome__ring {
    display: none;
  }
}
@media (forced-colors: active) {
  .gp-toast,
  .gp-ichip,
  .gp-isheet__panel,
  .gp-welcome__panel,
  .gp-day a,
  .gp-recent,
  .gp-club,
  .gp-paths__item {
    border: 1px solid CanvasText;
  }
  .gp-route__dot,
  .gp-day__check {
    border: 2px solid CanvasText;
  }
}
@media print {
  .gp-toasts,
  .gp-ichip,
  .gp-loadbar,
  .gp-pull,
  .gp-edge,
  .gp-appbar__btn {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------
 * 2.1.0 — 続けた日数を守る通知（remind.js）。マイ学習の「今日やること」の下
 * ------------------------------------------------------------------- */
.gp-remind {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
  margin-top: 14px;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, #fffaf2, #fff1e3);
  box-shadow: 0 0 0 1px #f3dcc2;
  animation: gp-rise 450ms var(--gp-out) 200ms both;
}
.gp-remind[hidden] {
  display: none;
}
.gp-remind.is-on {
  background: linear-gradient(135deg, #f3fbf6, #fffaf2);
  box-shadow: 0 0 0 1px #bfe6cd;
}
.gp-remind__mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--gp-brand);
  color: #fff;
  box-shadow: 0 6px 14px #ff5b0040;
}
.gp-remind.is-on .gp-remind__mark {
  background: #2bb673;
  box-shadow: 0 6px 14px #2bb67340;
}
.gp-remind__mark svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 10%;
}
.gp-remind__mark.is-ring svg {
  animation: gp-bell 900ms var(--gp-spring);
}
@keyframes gp-bell {
  15% { transform: rotate(18deg); }
  30% { transform: rotate(-15deg); }
  45% { transform: rotate(11deg); }
  60% { transform: rotate(-7deg); }
  75% { transform: rotate(3deg); }
}
.gp-remind__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.gp-remind__text b {
  color: var(--gp-terminal);
  font-size: 14.5px;
  line-height: 1.5;
}
.gp-remind__text small {
  color: var(--gp-muted);
  font-size: 12.5px;
  line-height: 1.6;
}
.gp-remind > .gp-button {
  grid-column: 1 / -1;
  justify-self: start;
}
.gp-remind__hours {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gp-remind__hour {
  min-width: 52px;
  min-height: 40px;
  padding: 6px 10px;
  border: 1.5px solid #ecd8bd;
  border-radius: 12px;
  background: #fffdf8;
  color: var(--gp-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 160ms var(--gp-out), background-color 160ms ease, border-color 160ms ease;
}
.gp-remind__hour:active {
  transform: scale(0.94);
}
.gp-remind__hour.is-on {
  border-color: var(--gp-terminal);
  background: var(--gp-terminal);
  color: #fff4e1;
}
.gp-remind__hour:focus-visible,
.gp-remind__off:focus-visible {
  outline: 3px solid #2369c4;
  outline-offset: 2px;
}
.gp-remind__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.gp-remind__off {
  min-height: 40px;
  border: 0;
  background: none;
  color: var(--gp-muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .gp-remind,
  .gp-remind__mark.is-ring svg {
    animation: none;
  }
  .gp-remind__hour {
    transition: none;
  }
}
@media (forced-colors: active) {
  .gp-remind,
  .gp-remind__hour {
    border: 1px solid CanvasText;
  }
}

/* =====================================================================
 * 2.2.0 — 向きのある移り変わり・パソコンのタイトルバー・設定（夜の画面・文字・動き）・
 *         大きな見出し・長押しでのぞき見・アプリ会員証・節目のお祝い・コマンド当て
 * =================================================================== */
:where(.gp-peek, .gp-joy, .gp-quiz, .gp-quiz-card, .gp-settings, .gp-mcard, .gp-isheet__acts) svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
 * ① 向きのある移り変わり（<head> の小さなスクリプトが型を付ける）
 *    進む＝右から重なる・戻る＝左へ抜ける・タブ＝入れ替わる。上の帯と下のナビは動かない
 * ---------------------------------------------------------------- */
html.gp-app .global-header,
html.gp-app .gp-shell .gp-header,
html.gp-app .gp-appbar {
  view-transition-name: gp-header;
}
::view-transition-group(gp-header),
::view-transition-group(gp-nav) {
  animation-duration: 0.3s;
}
html:active-view-transition-type(gp-forward, gp-back)::view-transition-old(root),
html:active-view-transition-type(gp-forward, gp-back)::view-transition-new(root) {
  mix-blend-mode: normal;
}
html:active-view-transition-type(gp-forward, gp-back)::view-transition-group(*) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
html:active-view-transition-type(gp-forward)::view-transition-old(root) {
  animation: gp-push-out 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html:active-view-transition-type(gp-forward)::view-transition-new(root) {
  animation: gp-push-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html:active-view-transition-type(gp-back)::view-transition-old(root) {
  z-index: 1;
  animation: gp-pop-out 0.36s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}
html:active-view-transition-type(gp-back)::view-transition-new(root) {
  animation: gp-pop-in 0.36s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}
/* 片方のページにしか無い名前つきの部品（一覧のロゴなど）は、ページと一緒に動く */
html:active-view-transition-type(gp-forward)::view-transition-old(*):only-child {
  animation: gp-push-out 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html:active-view-transition-type(gp-forward)::view-transition-new(*):only-child {
  animation: gp-push-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html:active-view-transition-type(gp-back)::view-transition-old(*):only-child {
  animation: gp-pop-out 0.36s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}
html:active-view-transition-type(gp-back)::view-transition-new(*):only-child {
  animation: gp-pop-in-late 0.36s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}
html:active-view-transition-type(gp-tab)::view-transition-old(root) {
  animation: gp-vt-out 0.14s ease both;
}
html:active-view-transition-type(gp-tab)::view-transition-new(root) {
  animation: gp-tab-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gp-push-in {
  from { transform: translateX(100vw); }
}
@keyframes gp-push-out {
  to { transform: translateX(-28vw); filter: brightness(0.9); }
}
@keyframes gp-pop-out {
  to { transform: translateX(100vw); }
}
@keyframes gp-pop-in {
  from { transform: translateX(-28vw); filter: brightness(0.9); }
}
@keyframes gp-pop-in-late {
  0% { transform: translateX(-28vw); opacity: 0; }
  60% { opacity: 0; }
}
@keyframes gp-tab-in {
  from { opacity: 0; transform: scale(0.985); }
}
/* 図鑑の版のページは、自分の向き（dv-forward / dv-back）で動く。ページ全体はふわっと */
html:active-view-transition-type(dv-forward, dv-back)::view-transition-old(root) {
  animation: gp-vt-out 180ms ease both;
}
html:active-view-transition-type(dv-forward, dv-back)::view-transition-new(root) {
  animation: gp-vt-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* 画面の色の切り替え（設定）: 押したところから丸く広がる */
html.gp-vt-theme .global-header,
html.gp-vt-theme .gp-shell .gp-header,
html.gp-vt-theme .gp-appbar,
html.gp-vt-theme .gp-nav {
  view-transition-name: none;
}
html.gp-vt-theme::view-transition-old(root),
html.gp-vt-theme::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* ------------------------------------------------------------------
 * ⑩ パソコンのアプリのタイトルバー（Window Controls Overlay）
 *    窓のボタンの横まで Goodly の帯にする。帯の空いたところをつかんで窓を動かせる
 * ---------------------------------------------------------------- */
@media (display-mode: window-controls-overlay) {
  html.gp-app {
    --gp-titlebar-h: env(titlebar-area-height, 33px);
  }
  html.gp-app .global-header,
  html.gp-app .gp-appbar {
    padding-top: 0;
    padding-left: env(titlebar-area-x, 0px);
    padding-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw));
    app-region: drag;
    -webkit-app-region: drag;
  }
  html.gp-app .global-header__wrap {
    height: max(var(--gp-appbar-h), var(--gp-titlebar-h));
  }
  html.gp-app .global-header a,
  html.gp-app .global-header button,
  html.gp-app .global-header input,
  html.gp-app .gp-appbar a,
  html.gp-app .gp-appbar button,
  html.gp-app .gp-shell .gp-header a,
  html.gp-app .gp-shell .gp-header button {
    app-region: no-drag;
    -webkit-app-region: no-drag;
  }
  html.gp-app .gp-shell .gp-header {
    position: sticky;
    top: 0;
    z-index: 60;
    width: 100%;
    min-height: max(var(--gp-appbar-h), var(--gp-titlebar-h));
    padding-left: calc(env(titlebar-area-x, 0px) + 16px);
    padding-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 8px);
    background: #fffdf8f0;
    app-region: drag;
    -webkit-app-region: drag;
  }
  /* パソコンの窓では、下のナビの代わりに上の帯で十分 */
  html.gp-app .gp-appbar__title {
    font-size: 14px;
  }
}

/* ------------------------------------------------------------------
 * ⑬ 設定: 夜の暗い画面（β）・文字の大きさ・動きを減らす
 * ---------------------------------------------------------------- */
/* 暗い画面は、ページ全体の色を反転してから色相を戻す（写真・ロゴ・動画は元の色に戻す） */
html.gp-dark {
  filter: invert(0.92) hue-rotate(180deg);
  background: #fff;
  color-scheme: light;
}
html.gp-dark :is(img, video, canvas, iframe, svg image, object, embed, .gp-mcard, .gp-joy__medal, [data-gp-keep-color]) {
  filter: invert(1) hue-rotate(180deg);
}
html.gp-dark :is(.gp-mcard, [data-gp-keep-color]) :is(img, video, canvas, iframe) {
  filter: none;
}
/* 文字の入ったロゴ（濃い字）は、ページと一緒に反転させて読めるように */
html.gp-dark :is(.global-header-logo, .page-footer__site-logo, .page-footer__network-logo) img {
  filter: none;
}
/* 最前面（dialog）は html の filter の外で描かれるので、同じ反転を自分に */
html.gp-dark dialog[open] {
  filter: invert(0.92) hue-rotate(180deg);
}
html.gp-dark dialog[open]::backdrop {
  background-color: #00000099;
}

/* 文字の大きさ（ページの中身だけ。上の帯と下のナビはそのまま） */
html.gp-text-l :is(#main-content, .gp-main, .site-main, main.page-main) {
  zoom: 1.12;
}
html.gp-text-xl :is(#main-content, .gp-main, .site-main, main.page-main) {
  zoom: 1.25;
}
html.gp-text-l :is(#main-content, .gp-main, .site-main, main.page-main) :is(#main-content, .gp-main, .site-main, main.page-main),
html.gp-text-xl :is(#main-content, .gp-main, .site-main, main.page-main) :is(#main-content, .gp-main, .site-main, main.page-main) {
  zoom: 1;
}

/* 動きを減らす（設定）: 端末の設定と同じに */
html.gp-reduce *,
html.gp-reduce *::before,
html.gp-reduce *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html.gp-reduce .gp-burst,
html.gp-reduce .gp-confetti {
  display: none !important;
}

/* ------------------------------------------------------------------
 * ③ 大きな見出しが縮んで、上の帯に収まる（アプリとして開いたとき）
 * ---------------------------------------------------------------- */
html.gp-app .global-header__wrap,
html.gp-app .gp-shell .gp-header {
  position: relative;
}
.gp-appbar__title--large {
  position: absolute;
  left: 56px;
  right: 104px;
  top: 50%;
  text-align: center;
  opacity: 0;
  transform: translateY(calc(-50% + 10px));
  transition: opacity 220ms ease, transform 320ms var(--gp-out);
  pointer-events: none;
}
html.gp-titled .gp-appbar__title--large {
  opacity: 1;
  transform: translateY(-50%);
}
html.gp-app .global-header-logo,
html.gp-app .gp-shell .gp-header > a {
  transition: opacity 200ms ease, transform 320ms var(--gp-out);
}
html.gp-app.gp-titled .global-header-logo,
html.gp-app.gp-titled .gp-shell .gp-header > a {
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
}
/* マイ学習の帯を、アプリでは上に留める */
html.gp-app .gp-shell .gp-header {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  min-height: var(--gp-appbar-h);
  padding: env(safe-area-inset-top, 0px) 8px 0 14px;
  margin: 0;
  background: #fff4e1f0;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  transition: box-shadow 200ms ease;
}
html.gp-app.gp-titled .gp-shell .gp-header {
  box-shadow: 0 1px 0 #20332d14, 0 8px 24px #20332d0d;
}
html.gp-app body.gp-shell {
  padding-top: 0;
}
@supports (animation-timeline: view()) {
  html.gp-app:not(.gp-reduce) .gp-large-title {
    transform-origin: 0 100%;
    animation: gp-large-title linear both;
    animation-timeline: view(block calc(var(--gp-appbar-h) + env(safe-area-inset-top, 0px)) 0px);
    animation-range: exit 0% exit 100%;
  }
}
@keyframes gp-large-title {
  to { opacity: 0; transform: translateY(10px) scale(0.86); }
}

/* ------------------------------------------------------------------
 * ④ 長押しでのぞき見
 * ---------------------------------------------------------------- */
:is(.gh-card, .dz-card, .gp-resume, .gp-recent li, [data-gp-peek]) {
  -webkit-touch-callout: none;
}
.is-pressing {
  transform: scale(0.965) !important;
  transition: transform 460ms cubic-bezier(0.3, 0, 0.3, 1) !important;
  filter: brightness(0.97);
}
.gp-peek {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 16px;
  border: 0;
  background: transparent;
  color: var(--gp-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  line-height: 1.6;
  overflow: hidden;
}
.gp-peek[open] {
  display: grid;
  place-items: center;
}
.gp-peek::backdrop {
  background: #1d2a2400;
  transition: background 240ms ease, backdrop-filter 240ms ease;
}
.gp-peek.is-open::backdrop {
  background: #1d2a2459;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}
.gp-peek * {
  box-sizing: border-box;
}
.gp-peek__panel {
  position: relative;
  width: min(100%, 400px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 20px 18px 14px;
  border-radius: 26px;
  background: #fffaf2;
  box-shadow: 0 30px 70px #20332d59, 0 0 0 1px #20332d10;
}
.gp-peek.is-closing .gp-peek__panel {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 200ms ease, transform 220ms ease;
}
.gp-peek__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 40px;
}
.gp-peek__logo {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px #20332d14, 0 6px 16px #20332d1a;
  color: var(--gp-terminal);
  font: 800 20px/1 ui-monospace, "Cascadia Code", Consolas, monospace;
}
.gp-peek__logo img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.gp-peek__names {
  display: grid;
  min-width: 0;
}
.gp-peek__names small {
  color: var(--gp-brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.gp-peek__names b {
  color: var(--gp-terminal);
  font-size: 18px;
  line-height: 1.4;
  text-wrap: balance;
}
.gp-peek__lead {
  margin: 12px 0 0;
  color: var(--gp-muted);
  font-size: 14px;
}
.gp-peek__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.gp-peek__chips li {
  padding: 3px 10px;
  border-radius: 999px;
  background: #f1e8da;
  color: var(--gp-terminal);
  font-size: 12px;
  font-weight: 700;
  animation: gp-chip-in 420ms var(--gp-spring) backwards;
  animation-delay: calc(var(--i, 0) * 40ms + 120ms);
}
@keyframes gp-chip-in {
  from { opacity: 0; transform: translateY(6px) scale(0.9); }
}
.gp-peek__acts {
  display: grid;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px #20332d14;
}
.gp-peek__act {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 16px;
  border: 0;
  border-top: 1px solid #20332d12;
  background: transparent;
  color: var(--gp-terminal);
  font: 700 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gp-peek__act:first-child {
  border-top: 0;
}
.gp-peek__act svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--gp-brand);
}
.gp-peek__act.is-primary {
  color: #a43d00;
}
.gp-peek__act:active {
  background: #ff5b0014;
}
.gp-peek__act.is-done svg {
  color: #2b8a5c;
}
.gp-peek__act:disabled {
  opacity: 0.7;
}
.gp-peek__act:focus-visible {
  outline: 3px solid #2369c4;
  outline-offset: -3px;
}
.gp-peek__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f1e8da;
  color: var(--gp-terminal);
  cursor: pointer;
}
.gp-peek__close svg {
  width: 18px;
  height: 18px;
}

/* ------------------------------------------------------------------
 * ⑥ アプリ会員証
 * ---------------------------------------------------------------- */
.gp-member [data-gp-member-card] {
  display: grid;
  justify-items: start;
  gap: 14px;
  perspective: 900px;
}
.gp-mcard {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "top chip" "no no" "rows rows" "foot foot";
  gap: 6px 12px;
  width: min(100%, 420px);
  aspect-ratio: 1200 / 760;
  padding: clamp(14px, 4.4vw, 22px);
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(70% 90% at 88% 6%, #ff5b008c 0%, #ff5b0000 60%),
    repeating-linear-gradient(0deg, #fff4e10c 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, #fff4e10c 0 1px, transparent 1px 22px),
    linear-gradient(135deg, #1b2c26 0%, #2e4d40 55%, #20332d 100%);
  color: #fff4e1;
  box-shadow: 0 18px 40px #20332d40, inset 0 0 0 1px #fff4e126;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 520ms var(--gp-spring), box-shadow 300ms ease;
  touch-action: pan-y;
  animation: gp-mcard-in 700ms var(--gp-spring) backwards;
}
@keyframes gp-mcard-in {
  from { opacity: 0; transform: rotateX(18deg) translateY(16px) scale(0.96); }
}
.gp-mcard.is-tilt {
  transition: transform 80ms linear;
  box-shadow: 0 26px 50px #20332d55, inset 0 0 0 1px #fff4e140;
}
.gp-mcard__shine {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 50% at var(--mx) var(--my), #ffffff40 0%, #ffffff00 70%),
    linear-gradient(115deg, #7cc4ff00 20%, #7cc4ff2e 38%, #ff7bac2e 50%, #ffd84d26 62%, #ffd84d00 80%);
  background-size: 100% 100%, 250% 250%;
  background-position: 0 0, var(--mx) var(--my);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: gp-holo 6s ease-in-out infinite alternate;
}
.gp-mcard.is-tilt .gp-mcard__shine {
  animation: none;
}
@keyframes gp-holo {
  from { background-position: 0 0, 0% 0%; }
  to { background-position: 0 0, 100% 100%; }
}
.gp-mcard__top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font: 800 clamp(10px, 2.6vw, 12px)/1.2 ui-monospace, "Cascadia Code", Consolas, monospace;
  letter-spacing: 0.12em;
  opacity: 0.82;
}
.gp-mcard__top img {
  width: clamp(28px, 8vw, 38px);
  height: clamp(28px, 8vw, 38px);
  border-radius: 50%;
}
.gp-mcard__chip {
  grid-area: chip;
  width: clamp(36px, 10vw, 46px);
  aspect-ratio: 4 / 3;
  border-radius: 7px;
  background:
    linear-gradient(90deg, transparent 32%, #20332d55 32% 35%, transparent 35% 65%, #20332d55 65% 68%, transparent 68%),
    linear-gradient(0deg, transparent 32%, #20332d55 32% 36%, transparent 36% 64%, #20332d55 64% 68%, transparent 68%),
    linear-gradient(135deg, #ffd84d, #c99a1f);
}
.gp-mcard__no {
  grid-area: no;
  align-self: center;
  color: #ffb071;
  font: 800 clamp(30px, 10vw, 46px)/1.1 ui-monospace, "Cascadia Code", Consolas, monospace;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 #00000033;
}
.gp-mcard__rows {
  grid-area: rows;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.gp-mcard__rows dt {
  font-size: clamp(9px, 2.4vw, 11px);
  font-weight: 700;
  opacity: 0.66;
}
.gp-mcard__rows dd {
  margin: 0;
  overflow: hidden;
  font-size: clamp(11px, 3vw, 14px);
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp-mcard__rows dd small {
  display: block;
  overflow: hidden;
  font-size: 0.82em;
  font-weight: 700;
  opacity: 0.85;
  text-overflow: ellipsis;
}
.gp-mcard__foot {
  grid-area: foot;
  align-self: end;
  overflow: hidden;
  font-size: clamp(10px, 2.8vw, 12.5px);
  font-weight: 700;
  opacity: 0.8;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp-mcard__acts .gp-meta {
  margin: 0;
}

/* ------------------------------------------------------------------
 * ⑦ 節目のお祝い（レベル・続けた日数・道の完走）
 * ---------------------------------------------------------------- */
.gp-joy {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 16px;
  border: 0;
  background: transparent;
  color: #fff4e1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  line-height: 1.6;
  overflow: hidden;
}
.gp-joy[open] {
  display: grid;
  place-items: center;
}
.gp-joy::backdrop {
  background: #101a1600;
  transition: background 320ms ease;
}
.gp-joy.is-open::backdrop {
  background: radial-gradient(80% 60% at 50% 40%, #2e4d40f2 0%, #101a16f7 70%);
}
.gp-joy * {
  box-sizing: border-box;
}
.gp-joy__panel {
  display: grid;
  justify-items: center;
  width: min(100%, 420px);
  text-align: center;
  opacity: 0;
  transform: translateY(24px) scale(0.92);
  transition: transform 640ms var(--gp-spring), opacity 280ms ease;
}
.gp-joy.is-open .gp-joy__panel {
  opacity: 1;
  transform: none;
}
.gp-joy.is-closing .gp-joy__panel {
  opacity: 0;
  transform: scale(1.04);
  transition-duration: 220ms;
}
.gp-joy__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 220px;
  height: 220px;
  margin-bottom: 4px;
}
.gp-joy__rays {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #ffb07133 0deg 9deg, #ffb07100 9deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 0%, #000 30%, transparent 70%);
  mask: radial-gradient(circle, #000 0%, #000 30%, transparent 70%);
  animation: gp-rays 14s linear infinite;
}
@keyframes gp-rays {
  to { transform: rotate(360deg); }
}
.gp-joy__glow {
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff5b0080 0%, #ff5b0000 70%);
  animation: gp-glow 2.4s ease-in-out infinite alternate;
}
@keyframes gp-glow {
  to { transform: scale(1.18); opacity: 0.7; }
}
.gp-joy__medal {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff6cf 0%, #ffd84d 26%, #e9a91e 64%, #b57d0c 100%);
  box-shadow: 0 0 0 6px #fff4e126, 0 0 0 12px #ffd84d1f, 0 18px 40px #00000059, inset 0 -6px 0 #00000026, inset 0 4px 0 #ffffff66;
  color: #3a2504;
  animation: gp-medal-in 900ms var(--gp-spring) 120ms both;
}
@keyframes gp-medal-in {
  0% { transform: scale(0.2) rotate(-200deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(8deg); opacity: 1; }
  100% { transform: none; }
}
.gp-joy__medal small {
  font: 800 16px/1 ui-monospace, "Cascadia Code", Consolas, monospace;
  opacity: 0.8;
}
.gp-joy__medal b {
  font: 900 52px/1 ui-monospace, "Cascadia Code", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.gp-joy__medal > svg {
  width: 58px;
  height: 58px;
  stroke-width: 2.4;
}
.gp-joy__flame svg {
  width: 30px;
  height: 30px;
  color: #c2410c;
  fill: #ff7a1a;
  stroke: #9a3412;
}
.gp-joy--streak .gp-joy__medal {
  background: radial-gradient(circle at 32% 28%, #ffe1c7 0%, #ff9a4d 30%, #ff5b00 66%, #b23c00 100%);
  color: #2e1203;
}
.gp-joy--path .gp-joy__medal {
  background: radial-gradient(circle at 32% 28%, #e3ffe9 0%, #6fd49a 30%, #2b8a5c 66%, #1b5e3d 100%);
  color: #0f2e1f;
}
.gp-joy h2 {
  margin: 8px 0 6px;
  color: #fff4e1;
  font-size: clamp(22px, 6vw, 28px);
  line-height: 1.35;
  text-wrap: balance;
  animation: gp-rise 600ms var(--gp-out) 380ms backwards;
}
.gp-joy__lead {
  margin: 0 0 22px;
  color: #fff4e1cc;
  font-size: 15px;
  animation: gp-rise 600ms var(--gp-out) 480ms backwards;
}
@keyframes gp-rise {
  from { opacity: 0; transform: translateY(12px); }
}
.gp-joy__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  animation: gp-rise 600ms var(--gp-out) 580ms backwards;
}
.gp-joy__acts .gp-button {
  min-width: 120px;
}
.gp-joy__ok {
  box-shadow: 0 10px 24px #ff5b0059;
}

/* ------------------------------------------------------------------
 * ⑨ コマンド当て（オフラインでも遊べる）
 * ---------------------------------------------------------------- */
.gp-quiz-card {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border-radius: 22px;
  background: #fffaf2;
  box-shadow: 0 0 0 1px #20332d14, 0 10px 28px #20332d12;
}
.gp-quiz-card.is-offline {
  background: linear-gradient(135deg, #fff1df 0%, #fffaf2 60%);
  box-shadow: 0 0 0 2px #ff5b0040, 0 14px 32px #ff5b001f;
}
.gp-quiz-card__art {
  display: grid;
  gap: 10px;
  padding: 12px 14px 16px;
  border-radius: 14px;
  background: var(--gp-terminal);
  color: #d8f5e4;
  font: 600 14px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace;
}
.gp-quiz-card__dots,
.gp-quiz__dots {
  display: flex;
  gap: 6px;
}
.gp-quiz-card__dots::before,
.gp-quiz-card__dots::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 15px 0 0 #febc2e, 30px 0 0 #28c840;
}
.gp-quiz-card__dots::after {
  display: none;
}
.gp-quiz-card__art p {
  margin: 0;
  white-space: nowrap;
}
.gp-quiz-card__ps {
  color: #ffb071;
}
.gp-quiz-card__art b {
  color: #ffd84d;
}
.gp-quiz-card__cursor,
.gp-quiz__caret {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: currentColor;
  animation: gp-caret 1s steps(1) infinite;
}
@keyframes gp-caret {
  50% { opacity: 0; }
}
.gp-quiz-card__copy h2 {
  margin: 2px 0 4px;
  color: var(--gp-terminal);
  font-size: 20px;
  line-height: 1.35;
}
.gp-quiz-card__copy p {
  margin: 0;
  color: var(--gp-muted);
  font-size: 14px;
}
.gp-quiz-card__copy .gp-meta {
  margin: 6px 0 0;
}
.gp-quiz-card__play svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}
.gp-quiz-card.is-offline .gp-quiz-card__play {
  animation: gp-nudge 2.6s var(--gp-out) 1s infinite;
}
@keyframes gp-nudge {
  0%, 70%, 100% { transform: none; }
  76% { transform: scale(1.06); }
  84% { transform: scale(0.98); }
}
@media (max-width: 640px) {
  .gp-quiz-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .gp-quiz-card__art {
    grid-column: 1 / -1;
  }
}

.gp-quiz {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d8f5e4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  line-height: 1.6;
  overflow: hidden;
}
.gp-quiz[open] {
  display: grid;
  place-items: center;
}
.gp-quiz::backdrop {
  background: #0d1512cc;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.gp-quiz * {
  box-sizing: border-box;
}
.gp-quiz__panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 560px);
  height: min(100dvh, 760px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background:
    repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px),
    radial-gradient(120% 70% at 50% 0%, #2e4d40 0%, #17241f 70%);
  box-shadow: 0 30px 80px #00000080;
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: transform 520ms var(--gp-spring), opacity 240ms ease;
}
@media (min-width: 600px) {
  .gp-quiz__panel {
    border-radius: 26px;
    overflow: hidden;
  }
}
@media (max-width: 599px) {
  .gp-quiz__panel {
    height: 100dvh;
  }
}
.gp-quiz__panel.is-result .gp-quiz__timer {
  visibility: hidden;
}
.gp-quiz.is-open .gp-quiz__panel {
  opacity: 1;
  transform: none;
}
.gp-quiz.is-closing .gp-quiz__panel {
  opacity: 0;
  transform: translateY(30px);
  transition-duration: 220ms;
}
.gp-quiz__panel.is-shake {
  animation: gp-shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes gp-shake {
  15%, 85% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(5px); }
  45%, 55% { transform: translateX(-7px); }
}
.gp-quiz__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px 18px;
  border-bottom: 1px solid #d8f5e41a;
}
.gp-quiz__dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
}
.gp-quiz__dots i:nth-child(2) {
  background: #febc2e;
}
.gp-quiz__dots i:nth-child(3) {
  background: #28c840;
}
.gp-quiz__bar h2 {
  flex: 1 1 auto;
  margin: 0;
  color: #d8f5e4;
  font: 700 14px/1.4 ui-monospace, "Cascadia Code", Consolas, monospace;
  text-align: center;
  opacity: 0.85;
}
.gp-quiz__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #d8f5e414;
  color: #d8f5e4;
  cursor: pointer;
}
.gp-quiz__close svg {
  width: 18px;
  height: 18px;
}
.gp-quiz__hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px 8px;
  font: 600 14px/1.4 ui-monospace, "Cascadia Code", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.gp-quiz__hud b {
  color: #fff4e1;
  font-size: 18px;
}
.gp-quiz__combo {
  padding: 2px 10px;
  border-radius: 999px;
  color: #2e1203;
  font-weight: 800;
  opacity: 0;
  transform: scale(0.6);
  transition: transform 360ms var(--gp-spring), opacity 200ms ease;
}
.gp-quiz__combo.is-on {
  background: linear-gradient(90deg, #ffd84d, #ff9a4d);
  opacity: 1;
  transform: none;
  animation: gp-combo 420ms var(--gp-spring);
}
@keyframes gp-combo {
  from { transform: scale(1.35); }
}
.gp-quiz__timer {
  height: 4px;
  margin: 0 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #d8f5e41a;
}
.gp-quiz__timer i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #28c840, #ffd84d 60%, #ff5f57);
  background-size: 100vw 100%;
  transform-origin: 0 50%;
}
.gp-quiz__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  padding: 20px 18px 18px;
  overflow: auto;
}
.gp-quiz__screen {
  flex: 1 1 auto;
  min-height: 150px;
  padding: 16px;
  border-radius: 16px;
  background: #0d1512b3;
  box-shadow: inset 0 0 0 1px #d8f5e41a, inset 0 0 40px #28c84012;
  font: 500 17px/1.7 ui-monospace, "Cascadia Code", Consolas, "Noto Sans JP", monospace;
  cursor: default;
}
.gp-quiz__prompt {
  margin: 0 0 8px;
  color: #d8f5e4b3;
}
.gp-quiz__ps {
  color: #ffb071;
}
.gp-quiz__who {
  display: inline-block;
  padding: 0 6px;
  border-radius: 6px;
  background: #ffd84d26;
  color: #ffd84d;
  transition: background-color 200ms ease, color 200ms ease;
}
.gp-quiz__who.is-right {
  background: #28c84033;
  color: #8ff0b0;
  animation: gp-pop 420ms var(--gp-spring);
}
.gp-quiz__who.is-wrong {
  background: #ff5f5733;
  color: #ffb3ae;
}
@keyframes gp-pop {
  40% { transform: scale(1.2); }
}
.gp-quiz__desc {
  margin: 0;
  color: #fff4e1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.7;
}
.gp-quiz__caret {
  color: #28c840;
}
.gp-quiz__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.gp-quiz__choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid #d8f5e426;
  border-radius: 14px;
  background: #d8f5e40f;
  color: #fff4e1;
  font: 700 18px/1.3 ui-monospace, "Cascadia Code", Consolas, monospace;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, border-color 160ms ease, opacity 200ms ease, transform 160ms var(--gp-out);
}
.gp-quiz__choices:not(.is-in) .gp-quiz__choice {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.gp-quiz__choices.is-in .gp-quiz__choice {
  animation: gp-choice-in 380ms var(--gp-spring) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes gp-choice-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
}
.gp-quiz__choice:not(:disabled):active {
  transform: scale(0.96);
}
.gp-quiz__choice:not(:disabled):hover {
  border-color: #ffb07180;
  background: #ffb0711a;
}
.gp-quiz__choice:focus-visible {
  outline: 3px solid #7cc4ff;
  outline-offset: 2px;
}
.gp-quiz__choice kbd {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #d8f5e41a;
  color: #d8f5e4b3;
  font: 700 12px/1 ui-monospace, Consolas, monospace;
}
.gp-quiz__choice code {
  min-width: 0;
  overflow: hidden;
  font: inherit;
  text-overflow: ellipsis;
}
.gp-quiz__choice:disabled {
  cursor: default;
  opacity: 0.45;
}
.gp-quiz__choice.is-right {
  border-color: #28c840;
  background: #28c84033;
  opacity: 1;
}
.gp-quiz__choice.is-wrong {
  border-color: #ff5f57;
  background: #ff5f5729;
  opacity: 1;
}
.gp-quiz__pop {
  position: absolute;
  right: 12px;
  top: 6px;
  color: #ffd84d;
  font-size: 14px;
  font-weight: 800;
  pointer-events: none;
  animation: gp-points 900ms var(--gp-out) both;
}
@keyframes gp-points {
  from { opacity: 0; transform: translateY(8px) scale(0.8); }
  30% { opacity: 1; transform: translateY(-4px) scale(1.1); }
  to { opacity: 0; transform: translateY(-22px); }
}
.gp-quiz__result {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}
.gp-quiz__result .gp-eyebrow {
  color: #ffd84d;
}
.gp-quiz__total {
  margin: 0;
  color: #fff4e1;
  font: 900 64px/1.1 ui-monospace, "Cascadia Code", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  animation: gp-pop 600ms var(--gp-spring);
}
.gp-quiz__total span {
  font-size: 20px;
  opacity: 0.7;
}
.gp-quiz__result h3 {
  margin: 0 0 12px;
  color: #ffb071;
  font-size: 20px;
}
.gp-quiz__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.gp-quiz__stats li {
  display: grid;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 14px;
  background: #d8f5e40f;
  animation: gp-rise 500ms var(--gp-out) backwards;
  animation-delay: calc(var(--i, 0) * 80ms + 300ms);
}
.gp-quiz__stats span {
  color: #d8f5e4b3;
  font-size: 12px;
}
.gp-quiz__stats b {
  color: #fff4e1;
  font: 800 18px/1.3 ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.gp-quiz__missed {
  width: 100%;
  margin-bottom: 12px;
  text-align: left;
}
.gp-quiz__missed h4 {
  margin: 0 0 6px;
  color: #d8f5e4;
  font-size: 14px;
}
.gp-quiz__missed ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gp-quiz__missed li {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #0d151299;
  font-size: 13px;
}
.gp-quiz__missed code {
  color: #ffd84d;
  font: 700 15px/1.4 ui-monospace, Consolas, monospace;
}
.gp-quiz__missed a {
  color: inherit;
}
.gp-quiz__missed span {
  color: #fff4e1cc;
}
.gp-quiz__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.gp-quiz__acts .gp-button {
  min-width: 120px;
}
@media (max-width: 380px) {
  .gp-quiz__choices {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------
 * ⑬ 設定のシート
 * ---------------------------------------------------------------- */
.gp-sheet__head .gp-sheet__gear {
  margin-left: auto;
}
.gp-sheet__gear svg {
  stroke-width: 1.8;
}
.gp-isheet__acts {
  justify-content: center;
}
.gp-settings {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gp-ink);
  overflow: visible;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  line-height: 1.6;
}
.gp-settings * {
  box-sizing: border-box;
}
.gp-settings::backdrop {
  background: #1d2a2400;
  transition: background 260ms ease, backdrop-filter 260ms ease;
}
.gp-settings.is-open::backdrop {
  background: #1d2a2466;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.gp-settings__panel {
  width: min(100%, 560px);
  max-height: 90dvh;
  margin: 0 auto;
  overflow: auto;
  padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: 26px 26px 0 0;
  background: #f6efe3;
  box-shadow: 0 -12px 40px #20332d33;
  transform: translateY(100%);
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
  overscroll-behavior: contain;
}
.gp-settings.is-open .gp-settings__panel {
  transform: none;
}
.gp-settings.is-closing .gp-settings__panel {
  transform: translateY(100%);
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
}
.gp-settings__panel.is-dragging {
  transition: none;
}
@media (min-width: 720px) {
  .gp-settings {
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .gp-settings[open] {
    display: grid;
    place-items: center;
  }
  .gp-settings__panel {
    border-radius: 26px;
    max-height: min(86dvh, 780px);
    transform: translateY(24px) scale(0.97);
    opacity: 0;
    transition: transform 420ms var(--gp-spring), opacity 200ms ease;
  }
  .gp-settings.is-open .gp-settings__panel {
    opacity: 1;
  }
  .gp-settings.is-closing .gp-settings__panel {
    opacity: 0;
    transform: scale(0.97);
  }
  .gp-settings__grip {
    display: none;
  }
}
.gp-settings__grip {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 22px;
  margin: 0 -16px;
  background: #f6efe3;
  cursor: grab;
  touch-action: none;
}
.gp-settings__grip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: #d8cbb6;
  transform: translateX(-50%);
}
.gp-settings__head {
  position: sticky;
  top: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -16px;
  padding: 2px 16px 10px;
  background: #f6efe3;
  touch-action: none;
}
@media (min-width: 720px) {
  .gp-settings__head {
    top: 0;
    padding-top: 18px;
  }
}
.gp-settings__head h2 {
  margin: 0;
  color: var(--gp-terminal);
  font-size: 20px;
}
.gp-settings__close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #e9dfcf;
  color: var(--gp-terminal);
  cursor: pointer;
}
.gp-settings__close svg {
  width: 18px;
  height: 18px;
}
.gp-settings__body {
  display: grid;
  gap: 18px;
  padding-top: 4px;
}
.gp-set-group h3 {
  margin: 0 0 6px 6px;
  color: var(--gp-muted);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.04em;
}
.gp-set-group__box {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: 0 0 0 1px #20332d0f;
}
.gp-seg {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.gp-seg legend {
  margin-bottom: 8px;
  padding: 0;
  color: var(--gp-terminal);
  font-size: 15px;
  font-weight: 750;
}
.gp-seg__row {
  --at: 0;
  --n: 3;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  padding: 3px;
  border-radius: 13px;
  background: #ece3d4;
}
.gp-seg__row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gp-seg__row label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 4px 6px;
  border-radius: 10px;
  color: var(--gp-muted);
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.gp-seg__row label svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}
.gp-seg__row input:checked + label {
  color: var(--gp-terminal);
}
.gp-seg__row input:focus-visible + label {
  outline: 3px solid #2369c4;
  outline-offset: 1px;
}
.gp-seg__pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--n));
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px #20332d1f, 0 0 0 0.5px #20332d14;
  transform: translateX(calc(var(--at) * 100%));
  transition: transform 380ms var(--gp-spring);
}
.gp-set-preview {
  margin: -4px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6efe3;
  color: var(--gp-terminal);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  transition: font-size 260ms var(--gp-out);
}
html.gp-text-l .gp-set-preview {
  font-size: 17px;
}
html.gp-text-xl .gp-set-preview {
  font-size: 19px;
}
.gp-set-note {
  margin: 0;
  color: var(--gp-muted);
  font-size: 12.5px;
  line-height: 1.6;
}
.gp-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.gp-set-row + .gp-set-row {
  padding-top: 14px;
  border-top: 1px solid #20332d10;
}
.gp-set-row.is-disabled {
  opacity: 0.6;
}
.gp-set-row__text {
  display: grid;
  min-width: 0;
  cursor: pointer;
}
.gp-set-row__text b {
  color: var(--gp-terminal);
  font-size: 15px;
}
.gp-set-row__text small {
  color: var(--gp-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.gp-switch {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 32px;
  margin: 0;
  border-radius: 999px;
  background: #d6cbb9;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color 220ms ease;
}
.gp-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px #20332d40;
  transition: transform 340ms var(--gp-spring), width 200ms ease;
}
.gp-switch:active::before {
  width: 32px;
}
.gp-switch:checked {
  background: #2bb673;
}
.gp-switch:checked::before {
  transform: translateX(20px);
}
.gp-switch:checked:active::before {
  transform: translateX(14px);
}
.gp-switch:focus-visible {
  outline: 3px solid #2369c4;
  outline-offset: 2px;
}
.gp-switch:disabled {
  cursor: not-allowed;
}
.gp-set-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.gp-set-link > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--gp-muted);
}
.gp-set-link__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #ff5b001a;
  color: var(--gp-brand);
}
.gp-set-link__icon svg {
  width: 18px;
  height: 18px;
}
.gp-set-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.gp-set-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 14px;
  border: 1px solid #20332d1f;
  border-radius: 13px;
  background: #fff;
  color: var(--gp-terminal);
  font: 750 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  cursor: pointer;
  transition: transform 160ms var(--gp-out), background-color 160ms ease;
}
.gp-set-action svg {
  width: 18px;
  height: 18px;
  color: var(--gp-brand);
}
.gp-set-action:active {
  transform: scale(0.97);
}
.gp-set-action:disabled {
  opacity: 0.6;
}
.gp-set-action:focus-visible {
  outline: 3px solid #2369c4;
  outline-offset: 2px;
}
.gp-set-action--accent {
  border-color: #a43d00;
  background: var(--gp-brand);
  color: #2e180a;
}
.gp-set-action--accent svg {
  color: currentColor;
}
.gp-set-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--gp-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.gp-set-meta:empty {
  display: none;
}
.gp-button--small {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 13px;
}

/* ------------------------------------------------------------------
 * 動きを減らす（端末の設定・アプリの設定）
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gp-mcard,
  .gp-mcard__shine,
  .gp-joy__rays,
  .gp-joy__glow,
  .gp-joy__medal,
  .gp-joy h2,
  .gp-joy__lead,
  .gp-joy__acts,
  .gp-peek__chips li,
  .gp-quiz-card__play,
  .gp-quiz__panel.is-shake,
  .gp-quiz__choices.is-in .gp-quiz__choice,
  .gp-quiz__stats li,
  .gp-quiz__total,
  .gp-quiz-card__cursor,
  .gp-quiz__caret {
    animation: none !important;
  }
  .is-pressing {
    transform: none !important;
  }
}

/* =====================================================================
 * 2.3.0 — すぐ開く・今日の分・マイ学習の「続きの準備に」の表示
 * =================================================================== */

/* マイ学習の「続きの準備に」: テーマのギア（guide-gear.css）は 1rem＝10px（テーマの root 62.5%）で書かれている。
   マイ学習の殻は 1rem＝16px なので、そのままだと字も余白も 1.6 倍になる。ここだけ、テーマと同じ大きさに直す。
   ほかの部品と殻の root の大きさは変えない */
.gp-shell [data-gp-gear] {
  --guide-fs-eyebrow: 12px;
  --guide-fs-meta: 13px;
  --guide-fs-label: 14px;
  --guide-fs-body: 16px;
  --guide-fs-lead: 17px;
  --guide-fs-h3: 19px;
  --guide-fs-h2: 23px;
  --guide-space-1: 4px;
  --guide-space-2: 8px;
  --guide-space-3: 12px;
  --guide-space-4: 16px;
  --guide-space-5: 24px;
  --guide-space-6: 32px;
}
.gp-shell [data-gp-gear] .guide-gear__badge {
  padding: 3px 10px;
}
.gp-shell [data-gp-gear] .guide-gear__icon {
  font-size: 22px;
}
.gp-shell [data-gp-gear] .guide-gear__link {
  padding: 6px 16px;
}
.gp-shell [data-gp-gear] .guide-gear__title {
  line-height: 1.4;
}
/* 読み上げだけに出す文字（テーマの .sr-only は殻に無い。ボタンに「広告・新しいタブで開きます」がそのまま出ていた） */
.gp-shell .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 今日の分を用意ずみ（instant.js）: マイ学習の「今日やること」の下 */
.gp-prep {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 12px 0 0;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: #e6f4ec;
  color: #1e6a43;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  animation: gp-prep-in 520ms var(--gp-spring) backwards;
}
.gp-prep svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes gp-prep-in {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .gp-prep {
    animation: none;
  }
}