/* ===== Mypage ===== */
.mypage {
  width: var(--content-width);
  margin: 0 auto;
  padding: 40px 0 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Profile */
.mypage__profile {
  display: flex;
  align-items: center;
  gap: 20px;
}

.mypage__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line);
  flex-shrink: 0;
}

.mypage__avatar--placeholder {
  background: var(--primary-soft);
  border: 2px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
}

.mypage__username {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink-strong);
}

.mypage__email {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Stats */
.mypage__stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.mypage__stat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 140px;
}

.mypage__stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.mypage__stat-label {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* Section */
.mypage__heatmap-section,
.mypage__answers-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mypage__section-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-strong);
}

.mypage__section-sub {
  margin: -8px 0 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* Heatmap */
.heatmap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 20px 12px;
  overflow-x: auto;
}

.heatmap__month-labels {
  display: grid;
  grid-template-columns: repeat(53, 1fr);
  gap: 3px;
  margin-bottom: 4px;
  width: 100%;
}

.heatmap__month-label {
  font-size: 0.7rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.heatmap__grid {
  display: grid;
  gap: 3px;
  width: 100%;
}

.heatmap__col {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
}

.heatmap__cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.1s;
}

.heatmap__cell:hover {
  transform: scale(1.3);
  opacity: 0.9;
}

.heatmap__cell--future {
  background: transparent;
  cursor: default;
}

.heatmap__cell--future:hover {
  transform: none;
}

.heatmap__cell--level0 { background: rgba(140, 175, 220, 0.12); }
.heatmap__cell--level1 { background: rgba(56, 189, 248, 0.3); }
.heatmap__cell--level2 { background: rgba(56, 189, 248, 0.5); }
.heatmap__cell--level3 { background: rgba(56, 189, 248, 0.75); }
.heatmap__cell--level4 { background: rgb(56, 189, 248); }

.heatmap__cell--selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.heatmap__legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  justify-content: flex-end;
}

.heatmap__legend-label {
  font-size: 0.7rem;
  color: var(--ink-soft);
}

.heatmap__legend .heatmap__cell {
  cursor: default;
}

.heatmap__legend .heatmap__cell:hover {
  transform: none;
}

/* Answers panel */
.mypage__answers-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mypage__answers-count {
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-weight: 400;
}

.mypage__empty {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.mypage__answers-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mypage__answer-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mypage__answer-prompt {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-strong);
}

.mypage__answer-self-mark {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid transparent;
}

.mypage__answer-self-mark--correct {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.32);
}

.mypage__answer-self-mark--incorrect {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
}

.mypage__answer-self-mark--unmarked {
  color: var(--ink-soft);
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.26);
}

.mypage__answer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.mypage__answer-label {
  font-size: 0.72rem;
  color: var(--ink-soft);
  background: rgba(140, 175, 220, 0.08);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

.mypage__answer-input {
  font-size: 0.95rem;
  color: var(--ink-strong);
}

.mypage__answer-model {
  font-size: 0.95rem;
  color: var(--primary);
}

.mypage__answer-category {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--accent);
  border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: 4px;
  padding: 2px 8px;
  align-self: flex-start;
}

@media (max-width: 760px) {
  .heatmap__month-labels,
  .heatmap__grid {
    width: max-content;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

:root {
	--content-width: min(980px, 92vw);
	--bg-top: #060c18;
	--bg-bottom: #0a1428;
	--ink-strong: #ddeafc;
	--ink-soft: #7a9bbf;
	--panel: rgba(10, 18, 40, 0.78);
	--line: rgba(140, 175, 220, 0.15);
	--primary-soft: rgba(56, 189, 248, 0.18);
	--primary: #38bdf8;
	--primary-hover: #0ea5e9;
	--accent: #fb923c;
	--accent-hover: #f97316;
	--danger-bg: rgba(160, 20, 20, 0.28);
	--danger-ink: #fca5a5;
	--mix-base: #070d1e;
}

* {
	box-sizing: border-box;
}

.app-body {
	margin: 0;
	min-height: 100vh;
	font-family: "Space Grotesk", "Noto Sans JP", sans-serif;
	color: var(--ink-strong);
	background: var(--bg-top);
	background-attachment: fixed;
	position: relative;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
}

.app-body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(140, 175, 220, 0.18) 1px, transparent 1px);
	background-size: 28px 28px;
	opacity: 1;
	z-index: -2;
}

.app-body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 600px 500px at 10% 15%, rgba(40, 100, 200, 0.12) 0%, transparent 100%),
		radial-gradient(ellipse 500px 600px at 90% 85%, rgba(100, 40, 200, 0.1) 0%, transparent 100%);
	z-index: -1;
}
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	backdrop-filter: blur(6px);
	background: linear-gradient(180deg, rgba(6, 12, 28, 0.9), rgba(8, 16, 36, 0.82));
	border-bottom: 1px solid rgba(140, 175, 220, 0.22);
}

.site-header__inner,
.site-footer__inner {
	width: var(--content-width);
	margin: 0 auto;
	padding: 10px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.site-header__identity {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.site-header__brand {
	text-decoration: none;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.03em;
	background: linear-gradient(120deg, #f8fcff 0%, #bfe7ff 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	text-shadow:
		0 0 8px rgba(80, 180, 255, 0.28),
		0 0 20px rgba(20, 60, 120, 0.38);
}

.site-header__brand:hover {
	text-shadow:
		0 0 10px rgba(120, 200, 255, 0.35),
		0 0 24px rgba(40, 90, 160, 0.45);
}

.site-header__tagline {
	margin: 0;
	font-size: 12px;
	color: var(--ink-soft);
}

.site-header__nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.site-header__nav .button_to {
	margin: 0;
}

.site-header__nav .button_to .site-header__nav-link {
	font: inherit;
	cursor: pointer;
}

.site-header__nav-link {
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	padding: 8px 11px;
	border-radius: 999px;
	color: var(--ink-strong);
	border: 1px solid transparent;
	transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.site-header__nav-link:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--primary) 45%, transparent);
	background: color-mix(in srgb, var(--primary) 15%, transparent);
}

.site-header__nav-link--cta {
	background: color-mix(in srgb, var(--primary) 18%, rgba(8, 16, 36, 0.92));
	border-color: color-mix(in srgb, var(--primary) 45%, transparent);
	color: color-mix(in srgb, var(--primary) 82%, white);
}

.site-header__user-menu {
	position: relative;
}

.site-header__user-trigger {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.site-header__user-trigger::-webkit-details-marker {
	display: none;
}

.site-header__user-trigger::after {
	content: "▾";
	font-size: 10px;
	opacity: 0.75;
	transition: transform 140ms ease;
}

.site-header__user-menu[open] .site-header__user-trigger::after {
	transform: rotate(180deg);
}

.site-header__user-dropdown {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 168px;
	padding: 8px;
	display: grid;
	gap: 6px;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
	background: linear-gradient(170deg, rgba(14, 26, 52, 0.98), rgba(10, 18, 40, 0.98));
	box-shadow: 0 16px 34px rgba(4, 10, 26, 0.38);
}

.site-header__user-item {
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--ink-strong);
	border: 1px solid transparent;
	background: transparent;
	text-align: left;
	transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.site-header__user-item:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--primary) 45%, transparent);
	background: color-mix(in srgb, var(--primary) 15%, transparent);
}

.site-header__user-form {
	margin: 0;
}

.site-header__user-item--button {
	width: 100%;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.flash {
	width: var(--content-width);
	margin: 14px auto 0;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid var(--line);
	font-size: 14px;
	font-weight: 700;
	background: rgba(16, 28, 58, 0.9);
}

.flash--notice {
	color: #86efac;
	border-color: rgba(34, 197, 94, 0.35);
	background: rgba(22, 101, 52, 0.2);
}

.flash--alert {
	color: var(--danger-ink);
	border-color: rgba(248, 113, 113, 0.35);
	background: var(--danger-bg);
}

.auth-entry-page {
	width: var(--content-width);
	margin: 0 auto;
	padding: 48px 0 72px;
}

.auth-shell {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-top: 8px;
}

.auth-card {
	width: min(520px, 100%);
	display: grid;
	gap: 16px;
	padding: 24px;
	border-radius: 18px;
	border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
	background: linear-gradient(170deg, rgba(16, 28, 58, 0.86), rgba(8, 16, 34, 0.96));
	box-shadow: 0 22px 54px rgba(4, 10, 26, 0.48);
	margin: 0 auto;
}

.auth-card__eyebrow {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: color-mix(in srgb, var(--primary) 82%, white);
}

.auth-card__title {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(26px, 4vw, 36px);
	line-height: 1.2;
}

.auth-card__description {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ink-soft);
}

.auth-card__tabs {
	display: flex;
	gap: 6px;
	padding: 4px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(9, 18, 40, 0.9);
}

.auth-card__tab {
	flex: 1;
	text-align: center;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 12px;
	border-radius: 9px;
	border: 1px solid transparent;
	color: var(--ink-soft);
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.auth-card__tab:hover {
	color: var(--ink-strong);
	background: rgba(19, 35, 74, 0.68);
}

.auth-card__tab.is-active {
	color: color-mix(in srgb, var(--primary) 85%, white);
	border-color: color-mix(in srgb, var(--primary) 45%, transparent);
	background: color-mix(in srgb, var(--primary) 20%, rgba(10, 18, 44, 0.95));
}

.auth-card__panel {
	padding: 14px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(7, 14, 31, 0.72);
	display: grid;
	gap: 12px;
}

.auth-card__label {
	margin: 0;
	font-size: 14px;
	font-weight: 800;
}

.auth-card__hint {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink-soft);
}

.auth-card__divider {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 700;
	color: color-mix(in srgb, var(--ink-soft) 88%, white);
}

.auth-card__divider::before,
.auth-card__divider::after {
	content: "";
	height: 1px;
	flex: 1;
	background: var(--line);
}

.auth-card__panel .button_to {
	margin: 0;
}

.auth-provider-btn {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid color-mix(in srgb, var(--primary) 48%, transparent);
	background: color-mix(in srgb, var(--primary) 18%, rgba(8, 16, 36, 0.96));
	color: color-mix(in srgb, var(--primary) 90%, white);
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
	transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.auth-provider-btn:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--primary) 64%, transparent);
	background: color-mix(in srgb, var(--primary) 24%, rgba(8, 16, 36, 0.96));
}

.auth-provider-btn__icon {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	background: #fff;
	color: #1f2937;
}

.auth-card__terms {
	margin: 0;
	font-size: 12px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--ink-soft) 86%, white);
}

.auth-entry__notice {
	margin: 0;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(248, 113, 113, 0.35);
	background: rgba(127, 29, 29, 0.28);
	color: #fecaca;
	font-size: 14px;
	font-weight: 700;
}

.auth-entry__footer {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	padding-top: 4px;
}

.home-page {
	width: var(--content-width);
	margin: 0 auto;
	padding: 54px 0 72px;
	display: grid;
	gap: 24px;
}

.home-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: stretch;
	position: relative;
	overflow: hidden;
}

.home-hero::after {
	content: "";
	position: absolute;
	inset: auto -130px -180px auto;
	width: 440px;
	height: 440px;
	border-radius: 999px;
	background: radial-gradient(circle at center, rgba(56, 189, 248, 0.2) 0%, rgba(56, 189, 248, 0) 72%);
	pointer-events: none;
}

.home-hero__content {
	display: grid;
	align-content: center;
	gap: 12px;
	max-width: 760px;
}

.home-hero__eyebrow {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--primary);
}

.home-hero__title {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(34px, 5.5vw, 58px);
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-wrap: balance;
	max-width: 13ch;
}

.home-hero__description {
	margin: 0;
	font-size: clamp(17px, 2.4vw, 22px);
	line-height: 1.58;
	color: var(--ink-soft);
	font-weight: 600;
}

.home-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.home-empathy {
	display: grid;
	gap: 16px;
	text-align: center;
}

.home-empathy__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.home-empathy__card {
	border-radius: 12px;
	padding: 14px 10px;
	border: 1px solid var(--line);
	background: rgba(10, 18, 38, 0.82);
	font-size: clamp(18px, 2.8vw, 24px);
	font-weight: 800;
	letter-spacing: 0.01em;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}


.home-empathy__message {
	margin: 0;
	font-size: clamp(18px, 2.8vw, 26px);
	line-height: 1.5;
	font-weight: 700;
}

.home-service {
	display: grid;
	gap: 16px;
}

.home-service__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.home-service-card {
	display: grid;
	align-content: start;
	gap: 8px;
	border-radius: 12px;
	padding: 14px;
	border: 1px solid var(--line);
	background: linear-gradient(150deg, rgba(15, 26, 54, 0.8), rgba(9, 17, 38, 0.92));
}

.home-service-card__label {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--primary) 78%, white);
}

.home-service-card__title {
	margin: 0;
	font-size: 18px;
	line-height: 1.45;
	font-weight: 800;
}

.home-service-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

.home-service__result {
	margin: 0;
	font-size: clamp(17px, 2.2vw, 21px);
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

.home-record {
	display: grid;
	justify-items: center;
	gap: 14px;
	text-align: center;
}

.home-heatmap {
	display: grid;
	gap: 6px;
	padding: 14px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(8, 16, 34, 0.86);
}

.home-heatmap__row {
	display: grid;
	grid-template-columns: repeat(12, 12px);
	gap: 6px;
}

.home-heatmap__cell {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: #16243f;
}

.home-heatmap__cell--0 {
	background: #16243f;
}

.home-heatmap__cell--1 {
	background: #1f5a8e;
}

.home-heatmap__cell--2 {
	background: #2f8ccc;
}

.home-heatmap__cell--3 {
	background: #63c3ff;
}

.home-record__message {
	margin: 0;
	font-size: clamp(17px, 2.4vw, 22px);
	font-weight: 700;
	line-height: 1.55;
}

.home-record__actions {
	padding-top: 2px;
}

.site-footer {
	margin-top: auto;
	border-top: 1px solid color-mix(in srgb, var(--line) 64%, white);
	background: rgba(255, 255, 255, 0.03);
}

.site-footer__copy {
	margin: 0;
	font-size: 12px;
	color: var(--ink-soft);
}

.site-footer__inner {
	justify-content: center;
	align-items: center;
	padding: 14px 0 16px;
}

.learning-page {
	width: var(--content-width);
	margin: 0 auto;
	padding: 44px 0 56px;
	position: relative;
}

.learning-page--default {
	--primary: #38bdf8;
	--primary-hover: #0ea5e9;
	--accent: #fb923c;
	--accent-hover: #f97316;
}

.learning-page--jhs1 {
	--primary: #34d399;
	--primary-hover: #10b981;
	--accent: #fbbf24;
	--accent-hover: #f59e0b;
}

.learning-page--jhs2 {
	--primary: #60a5fa;
	--primary-hover: #3b82f6;
	--accent: #f87171;
	--accent-hover: #ef4444;
}

.learning-page--jhs3 {
	--primary: #a78bfa;
	--primary-hover: #7c3aed;
	--accent: #f472b6;
	--accent-hover: #ec4899;
}

.learning-page__bg-shape {
	display: none;
}

.hero {
	margin-bottom: 24px;
	animation: fade-up 420ms ease-out;
}

.hero__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--primary);
	font-weight: 700;
}

.hero__title {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(28px, 5vw, 42px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: 0.01em;
}

.hero__description {
	margin: 10px 0 0;
	color: var(--ink-soft);
	font-size: clamp(15px, 2.8vw, 18px);
}

.hero__meta {
	margin: 14px 0 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.hero__meta-item {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	background: color-mix(in srgb, var(--primary) 22%, var(--mix-base));
	color: color-mix(in srgb, var(--primary) 92%, white);
	border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
}

.hero__link-row {
	margin: 12px 0 0;
}

.hero__link {
	color: var(--primary);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
}

.hero__link:hover {
	color: var(--primary-hover);
}

.start-page {
	width: var(--content-width);
	margin: 0 auto;
	padding: 44px 0 56px;
	position: relative;
}

.start-page__bg {
	display: none;
}

.start-hero {
	margin-bottom: 20px;
}

.start-hero__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary);
	font-weight: 700;
}

.start-hero__title {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(28px, 4.8vw, 40px);
	font-weight: 800;
	letter-spacing: 0.01em;
}

.start-hero__description {
	margin: 10px 0 0;
	color: var(--ink-soft);
	font-size: clamp(15px, 2.7vw, 18px);
}

.start-progress {
	margin-bottom: 18px;
	display: block;
}

.start-progress__head {
	display: block;
	margin-bottom: 10px;
}

.start-progress__user {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.start-progress__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid color-mix(in srgb, var(--primary) 42%, transparent);
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
	flex: 0 0 auto;
}

.start-progress__avatar--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 800;
	background: color-mix(in srgb, var(--primary) 22%, var(--mix-base));
	color: color-mix(in srgb, var(--primary) 82%, white);
}

.start-progress__content {
	min-width: 0;
	flex: 1;
	display: grid;
	gap: 4px;
}

.start-progress__welcome {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
}

.start-progress__today {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--ink-soft);
}

.start-progress__today strong {
	color: color-mix(in srgb, var(--primary) 80%, white);
	font-size: 15px;
}

.start-progress__heatmap-wrapper {
	overflow-x: auto;
	padding: 0px 4px 4px;
}

.start-progress__heatmap {
	display: grid;
	gap: 8px;
	width: max-content;
}

.start-progress__range-labels {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	font-weight: 700;
	color: var(--ink-soft);
	padding: 0 1px;
}

.start-progress__range-labels span {
	display: inline-flex;
}

.start-progress__grid {
	display: flex;
	gap: 4px;
	align-items: center;
}

.start-progress__grid--single-row {
	width: max-content;
}

.start-progress__cell {
	width: 22px;
	height: 22px;
	display: block;
	border-radius: 3px;
	border: 1px solid rgba(148, 163, 184, 0.15);
	background: rgba(15, 23, 42, 0.7);
	cursor: pointer;
	text-decoration: none;
	transition: transform 100ms ease, box-shadow 100ms ease;
}

.start-progress__cell:hover {
	transform: scale(1.08);
	box-shadow: 0 2px 8px rgba(56, 189, 248, 0.2);
}

.start-progress__cell:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--primary) 72%, white);
	outline-offset: 2px;
}

.start-progress__cell--empty {
	background: transparent;
	border-color: transparent;
}

.start-progress__cell--level-0 {
	background: rgba(140, 175, 220, 0.12);
	border-color: rgba(140, 175, 220, 0.18);
}

.start-progress__cell--level-1 {
	background: rgba(56, 189, 248, 0.3);
}

.start-progress__cell--level-2 {
	background: rgba(56, 189, 248, 0.5);
}

.start-progress__cell--level-3 {
	background: rgba(56, 189, 248, 0.75);
}

.start-progress__cell--level-4 {
	background: rgb(56, 189, 248);
}

.start-progress__cell--level-5 {
	background: rgb(56, 189, 248);
}

.start-progress__cell.is-today {
	outline: 2px solid color-mix(in srgb, var(--primary) 72%, white);
	outline-offset: 1px;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 72%, white);
}

.start-panel {
	margin-bottom: 18px;
}

.start-panel__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 12px;
}

.start-panel__meta {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink-soft);
}

.grade-button-row {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grade-button {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
	position: relative;
	padding: 12px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: linear-gradient(160deg, rgba(16, 28, 58, 0.82) 0%, rgba(10, 18, 44, 0.9) 100%);
	color: var(--ink-strong);
	transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.grade-button__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #d6e6ff;
	background: rgba(93, 63, 211, 0.35);
	border: 1px solid rgba(156, 132, 248, 0.45);
}

.grade-button:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--primary) 65%, transparent);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 14px color-mix(in srgb, var(--primary) 18%, transparent);
}

.grade-button--active {
	border-color: color-mix(in srgb, var(--primary) 65%, transparent);
	background: color-mix(in srgb, var(--primary) 20%, var(--mix-base));
	box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 30%, transparent);
}

.grade-button__main {
	font-size: 18px;
	font-weight: 800;
	font-family: "Noto Sans JP", sans-serif;
}

.grade-button__sub {
	font-size: 13px;
	color: var(--ink-soft);
}

.category-chip-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.category-chip {
	appearance: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: linear-gradient(150deg, rgba(16, 28, 58, 0.75), rgba(10, 18, 44, 0.85));
	color: var(--ink-strong);
	padding: 9px 14px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.category-chip:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--primary) 65%, transparent);
}

.category-chip--all {
	background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 24%, var(--mix-base)), color-mix(in srgb, var(--primary) 12%, var(--mix-base)));
	border-color: color-mix(in srgb, var(--primary) 52%, transparent);
}

.problem-preview-grid {
	margin-top: 18px;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.problem-preview-card {
	border: 1px solid var(--line);
	border-radius: 12px;
	background: linear-gradient(160deg, rgba(14, 24, 54, 0.75), rgba(10, 18, 44, 0.82));
	padding: 12px;
}

.problem-preview-card-form {
	margin: 0;
}

.problem-preview-card--button {
	display: block;
	width: 100%;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.problem-preview-card--button:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--primary) 52%, var(--line));
	box-shadow: 0 16px 32px rgba(4, 10, 28, 0.24);
}

.problem-preview-card--button:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--primary) 82%, white);
	outline-offset: 3px;
}

.problem-preview-card--all {
	border-color: color-mix(in srgb, var(--primary) 52%, transparent);
	background: color-mix(in srgb, var(--primary) 16%, var(--mix-base));
}

.problem-preview-card__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 8px;
}

.problem-preview-card__title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
}

.problem-preview-card__count {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
	background: rgba(14, 24, 50, 0.8);
	border: 1px solid var(--line);
	color: var(--ink-soft);
}

.problem-preview-card__list {
	margin: 0;
	padding-left: 1.2em;
	display: grid;
	gap: 4px;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.5;
}

.problem-preview-card__empty {
	margin: 0;
	font-size: 14px;
	color: var(--ink-soft);
}

.problem-preview-card__action {
	margin: 12px 0 0;
	font-size: 13px;
	font-weight: 700;
	color: color-mix(in srgb, var(--primary) 72%, white);
}

.stepper {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 16px;
	padding: 4px 0;
	animation: fade-up 380ms ease-out;
}

.stepper__line {
	position: absolute;
	left: 8%;
	right: 8%;
	top: 20px;
	height: 2px;
	background: rgba(140, 175, 220, 0.15);
	z-index: 0;
	overflow: hidden;
	border-radius: 999px;
}

.stepper__line-progress {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--primary) 0%, color-mix(in srgb, var(--accent) 45%, var(--primary)) 100%);
	transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	opacity: 0.65;
	transform: translateY(0);
	transition: opacity 180ms ease, transform 180ms ease;
}

.step--active {
	opacity: 1;
	transform: translateY(-1px);
}

.step__index {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 14px;
	border-radius: 50%;
	border: 1px solid rgba(140, 175, 220, 0.22);
	background: rgba(12, 22, 52, 0.9);
	color: var(--ink-soft);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.step--active .step__index {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
	box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 55%, transparent), 0 10px 20px color-mix(in srgb, var(--primary) 30%, transparent);
}

.step--done .step__index {
	background: color-mix(in srgb, var(--primary) 85%, white);
	border-color: color-mix(in srgb, var(--primary) 85%, white);
	color: #fff;
}

.step--current .step__index {
	transform: scale(1.06);
	transition: transform 220ms ease;
}

.step__label {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink-soft);
}

.step--active .step__label {
	color: var(--ink-strong);
}

.step--done .step__label {
	color: color-mix(in srgb, var(--primary) 65%, var(--ink-strong));
}

.alert-banner {
	margin: 0 0 16px;
	padding: 10px 14px;
	border: 1px solid rgba(252, 165, 165, 0.22);
	border-radius: 12px;
	background: var(--danger-bg);
	color: var(--danger-ink);
	font-weight: 600;
}

.panel {
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--panel);
	backdrop-filter: blur(18px);
	box-shadow:
		0 24px 48px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(140, 175, 220, 0.07) inset;
	padding: 20px;
	margin-bottom: 16px;
	animation: fade-up 420ms ease-out;
}

.panel--stage {
	opacity: 0;
	animation: stage-in 460ms ease-out forwards;
}

.panel--stage-1 {
	animation-delay: 40ms;
}

.panel--stage-2 {
	animation-delay: 120ms;
}

.panel--stage-3 {
	animation-delay: 180ms;
}

.panel__title {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 24px;
	font-weight: 800;
}

.panel__subtitle {
	margin: 6px 0 16px;
	color: var(--ink-soft);
}

.question-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.question-progress {
	margin: 0;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: color-mix(in srgb, var(--primary) 86%, white);
	background: rgba(140, 175, 220, 0.12);
	border: 1px solid rgba(140, 175, 220, 0.24);
}

.navigator-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.navigator-head__meta {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink-soft);
}

.question-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.question-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	border: 1px solid rgba(140, 175, 220, 0.18);
	background: rgba(12, 22, 52, 0.72);
	color: var(--ink-soft);
}

.question-chip--unanswered {
	opacity: 0.85;
}

.question-chip--answered {
	background: color-mix(in srgb, var(--primary) 22%, var(--mix-base));
	border-color: color-mix(in srgb, var(--primary) 48%, transparent);
	color: color-mix(in srgb, var(--primary) 92%, white);
}

.question-chip--current {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	box-shadow: 0 8px 14px color-mix(in srgb, var(--accent) 32%, transparent);
}

.setup-form {
	display: grid;
	gap: 12px;
	align-items: end;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setup-form__field {
	min-width: 0;
}

.setup-form__label,
.answer-form__label {
	display: inline-block;
	margin-bottom: 6px;
	font-weight: 700;
}

.setup-form__select,
.answer-form__textarea {
	width: 100%;
	border-radius: 12px;
	border: 1px solid var(--line);
	padding: 10px 12px;
	font: inherit;
	color: var(--ink-strong);
	background: rgba(6, 12, 30, 0.82);
}

.setup-form__select:focus,
.answer-form__textarea:focus {
	outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
	outline-offset: 1px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 10px;
	padding: 10px 16px;
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: transform 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.btn:hover {
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn--primary {
	background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 48%, white), color-mix(in srgb, var(--primary) 88%, #0a1730));
	color: #07101f;
	box-shadow: 0 8px 28px color-mix(in srgb, var(--primary) 45%, transparent);
}

.btn--primary:hover {
	background: var(--primary-hover);
}

.btn--accent {
	background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 52%, white), color-mix(in srgb, var(--accent) 88%, #2b1203));
	color: #1b0b02;
	box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 45%, transparent);
}

.btn--accent:hover {
	background: var(--accent-hover);
}

.empty-state {
	margin: 0;
	color: var(--ink-soft);
}

.question-text {
	margin: 12px 0 14px;
	border-left: 3px solid color-mix(in srgb, var(--primary) 70%, transparent);
	padding: 10px 0 10px 14px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent), rgba(56, 189, 248, 0));
	border-radius: 0 10px 10px 0;
	font-size: clamp(17px, 2.8vw, 22px);
	font-weight: 600;
	line-height: 1.45;
}

.grammar-guide {
	margin: 10px 0 14px;
	padding: 12px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: linear-gradient(160deg, rgba(14, 24, 54, 0.72), rgba(10, 18, 44, 0.82));
}

.grammar-guide-disclosure {
	margin: 10px 0 14px;
}

.grammar-guide-disclosure__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--primary) 50%, var(--line));
	background: color-mix(in srgb, var(--primary) 14%, transparent);
	color: color-mix(in srgb, var(--primary) 92%, white);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	user-select: none;
	list-style: none;
	transition: transform 120ms ease, background-color 120ms ease;
}

.grammar-guide-disclosure__toggle:hover {
	transform: translateY(-1px);
	background: color-mix(in srgb, var(--primary) 22%, transparent);
}

.grammar-guide-disclosure__toggle::before {
	content: "▶";
	font-size: 10px;
	line-height: 1;
	transition: transform 120ms ease;
}

.grammar-guide-disclosure[open] .grammar-guide-disclosure__toggle::before {
	transform: rotate(90deg);
}

.grammar-guide-disclosure > summary::-webkit-details-marker {
	display: none;
}

.grammar-guide-disclosure[open] .grammar-guide-disclosure__toggle {
	margin-bottom: 8px;
}

.grammar-guide-disclosure__label--open {
	display: none;
}

.grammar-guide-disclosure[open] .grammar-guide-disclosure__label--closed {
	display: none;
}

.grammar-guide-disclosure[open] .grammar-guide-disclosure__label--open {
	display: inline;
}

.grammar-guide__title {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: color-mix(in srgb, var(--primary) 88%, white);
}

.grammar-guide__point {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink-strong);
}

.grammar-guide__section-label {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--ink-soft);
}

.grammar-guide__form-lines {
	margin: 0;
	padding: 8px 10px 8px 1.7em;
	border-radius: 8px;
	background: rgba(101, 150, 210, 0.08);
	display: grid;
	gap: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-strong);
}

.grammar-guide__examples-label {
	margin: 10px 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--ink-soft);
}

.grammar-guide__examples {
	margin: 0;
	padding-left: 1.2em;
	display: grid;
	gap: 6px;
	font-size: 13px;
	color: var(--ink-soft);
	line-height: 1.5;
}

.grammar-guide__single-line {
	margin: 0 0 8px;
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-soft);
}

.answer-form__field {
	margin-bottom: 12px;
}

.answer-form__textarea {
	min-height: 118px;
	resize: vertical;
}

.result-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 12px;
}

.result-card {
	border-radius: 12px;
	border: 1px solid var(--line);
	background: linear-gradient(160deg, rgba(14, 24, 54, 0.78), rgba(10, 18, 44, 0.85));
	padding: 14px;
}

.result-card__title {
	margin: 0 0 8px;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--ink-soft);
}

.result-card__body {
	margin: 0;
	line-height: 1.6;
}

.reflection-tip {
	margin: 14px 0;
	color: var(--ink-soft);
}

/* ── 自己採点 ── */
.self-mark {
	margin-top: 20px;
}

.self-mark__label {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}

.self-mark__buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.self-mark__form {
	flex: 1;
	min-width: 140px;
}

.self-mark__form .btn {
	width: 100%;
}

.btn--correct {
	background: linear-gradient(145deg, #16a34a, #15803d);
	color: #fff;
	box-shadow: 0 6px 20px rgba(22, 163, 74, 0.38);
}

.btn--correct:hover {
	background: #15803d;
}

.btn--incorrect {
	background: linear-gradient(145deg, #dc2626, #b91c1c);
	color: #fff;
	box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
}

.btn--incorrect:hover {
	background: #b91c1c;
}

/* ── リトライバナー ── */
.retry-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding: 10px 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.08));
	border: 1px solid rgba(251, 191, 36, 0.28);
	color: #fcd34d;
	font-size: 14px;
	font-weight: 600;
}

.retry-banner__icon {
	font-size: 18px;
}

/* ── 完了画面 ── */
.panel--finished {
	text-align: center;
}

.panel--summary {
	text-align: center;
}

.summary-score {
	margin: 8px 0 10px;
	font-size: clamp(20px, 3.4vw, 28px);
	font-weight: 700;
	color: var(--ink);
}

.summary-detail {
	margin: 0;
	color: var(--ink-soft);
}

.summary-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 18px;
}

.summary-actions__form {
	width: 100%;
	max-width: 300px;
}

.summary-actions__form .btn {
	width: 100%;
}

.finished-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 16px 0;
}

.finished-state__icon {
	font-size: 48px;
	margin: 0;
}

.finished-state__title {
	margin: 0;
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 700;
}

.finished-state__desc {
	margin: 0;
	color: var(--ink-soft);
}

.finished-state .next-form,
.finished-state .btn {
	width: 100%;
	max-width: 280px;
}

.btn--secondary {
	background: transparent;
	color: var(--ink-soft);
	border: 1px solid var(--line);
	box-shadow: none;
}

.btn--secondary:hover {
	background: rgba(255, 255, 255, 0.05);
}

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes stage-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.995);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (max-width: 760px) {
	.site-header__inner,
	.site-footer__inner {
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
	}

	.site-header__nav {
		width: 100%;
		flex-wrap: wrap;
	}

	.site-header__nav-link {
		text-align: center;
		flex: 1;
	}

	.site-header__user-menu {
		flex: 1;
	}

	.site-header__user-dropdown {
		position: static;
		margin-top: 6px;
	}

	.site-footer__inner {
		align-items: center;
	}

	.home-page,
	.learning-page,
	.start-page {
		padding-top: 30px;
	}

	.home-hero {
		grid-template-columns: 1fr;
	}

	.home-hero__title {
		max-width: 100%;
	}

	.home-empathy__cards,
	.home-service__grid {
		grid-template-columns: 1fr;
	}

	.home-heatmap {
		width: 100%;
		overflow-x: auto;
	}

	.panel {
		padding: 16px;
		border-radius: 16px;
	}

	.setup-form,
	.result-grid {
		grid-template-columns: 1fr;
	}

	.grade-button-row {
		grid-template-columns: 1fr;
	}

	.problem-preview-grid {
		grid-template-columns: 1fr;
	}

	.stepper {
		gap: 6px;
	}

	.step__index {
		width: 32px;
		height: 32px;
	}

	.navigator-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.question-head {
		align-items: flex-start;
	}
}