.gplan {
  container-type: inline-size;
  container-name: gplan;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  color: var(--text-primary);
  text-align: center;
}
.gplan__hero { order: 10; }
.gplan__region--purpose  { order: 20; }
.gplan__region--stats    { order: 30; }
.gplan__region--goals    { order: 40; }
.gplan__region--practice { order: 50; }
.gplan__region--steps    { order: 60; }

.gplan__stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent-primary);
}
.gplan__portrait { position: relative; align-self: center; display: flex; width: fit-content; margin: var(--space-8) auto var(--space-4); }
.gplan__portrait .avatar {
  background-color: var(--accent-muted);
  color: var(--accent-primary);
}
.gplan__burst {
  position: absolute;
  right: -6px;
  bottom: -2px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--status-success);
  color: var(--text-inverse);
  border: 3px solid var(--surface-page);
  display: none;
  align-items: center;
  justify-content: center;
}
.gplan__burst .material-symbols-rounded { font-size: 22px; font-variation-settings: 'wght' 700; }
@keyframes gplan-pop { from { transform: scale(0); } to { transform: scale(1); } }

.gplan__name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); margin: 0; overflow-wrap: anywhere; }
.gplan__deed { font-size: var(--text-base); color: var(--text-secondary); margin: var(--space-1) 0 0; }
.gplan__title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
  margin: var(--space-6) 0 var(--space-3);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.gplan__meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  align-self: center;
}
.gplan__meta > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--surface-sunken);
  color: var(--text-secondary);
}
.gplan__meta .material-symbols-rounded { font-size: 12px; }
.gplan__meta-category { background: var(--accent-muted); color: var(--accent-primary); }

.gplan__region { margin-top: var(--space-10); }
.gplan__region-head {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  margin: 0 0 var(--space-5);
}
.gplan__region-head .material-symbols-rounded { font-size: 14px; color: var(--accent-primary); }

.gplan__purpose {
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0 auto;
  max-width: 34rem;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.gplan__summit-title { display: none; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); margin: 0; }
.gplan__summit-note  { display: none; font-size: var(--text-sm); color: var(--text-secondary); margin: var(--space-2) 0 0; }
.gplan__stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.gplan__stat { text-align: center; }
.gplan__stat .data-value { font-size: var(--text-4xl); }
.gplan__stat .data-label { margin-top: var(--space-2); }
@container gplan (min-width: 720px) {
  .gplan__stats-row { grid-template-columns: repeat(4, 1fr); }
}

.gplan__goals-list, .gplan__habits-list, .gplan__steps-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
}

.gplan__goal { display: flex; flex-direction: column; }
.gplan__goal-head { display: flex; align-items: baseline; gap: var(--space-2); }
.gplan__goal-check {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--status-success);
}
.gplan__goal-check .material-symbols-rounded { font-size: 18px; }
.gplan__goal-objective { font-weight: var(--weight-semibold); font-size: var(--text-lg); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gplan__goal-leader { display: none; }
.gplan__goal-date { font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }
.gplan__goal-result {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.gplan__goal-from { color: var(--text-tertiary); }
.gplan__goal-arrow { color: var(--text-tertiary); align-self: center; }
.gplan__goal-to { font-weight: var(--weight-bold); color: var(--status-success-text); }
.gplan__goal-state {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--status-success-text);
}
.gplan__goal .progress { margin-top: var(--space-3); }
.gplan--celebrate .gplan__goal .progress__bar { animation: gplan-fill 1.3s var(--ease-out) both 0.8s; }
@keyframes gplan-fill { from { width: 0; } }

.gplan__habit { display: flex; align-items: center; gap: var(--space-3); }
.gplan__habit-icon { color: var(--accent-primary); display: inline-flex; }
.gplan__habit-icon .material-symbols-rounded { font-size: 16px; }
.gplan__habit-action { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gplan__habit-cadence { font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-tertiary); }
.gplan__habit-count { font-family: var(--font-mono); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

.gplan__step { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); }
.gplan__step-check { align-self: center; color: var(--status-success); display: inline-flex; }
.gplan__step-check .material-symbols-rounded { font-size: 15px; }
.gplan__step-desc { color: var(--text-primary); font-weight: var(--weight-medium); min-width: 0; overflow-wrap: anywhere; }
.gplan__step-leader { display: none; }
.gplan__step-date { font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }

@keyframes gplan-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gplan--celebrate .gplan__rise { animation: gplan-rise 0.8s var(--ease-out) both; }
.gplan--celebrate .gplan__hero            { animation-delay: 0.1s; }
.gplan--celebrate .gplan__region--purpose { animation-delay: 0.35s; }
.gplan--celebrate .gplan__region--stats   { animation-delay: 0.5s; }
.gplan--celebrate .gplan__region--goals   { animation-delay: 0.65s; }
.gplan--celebrate .gplan__region--practice{ animation-delay: 0.85s; }
.gplan--celebrate .gplan__region--steps   { animation-delay: 1.05s; }
.gplan--celebrate .gplan__burst { animation: gplan-pop 0.6s var(--ease-spring) both 1.1s; }
.gplan--celebrate[data-style="certificate"] .gplan__portrait::after { animation: gplan-ring-in 0.9s var(--ease-out) both 0.35s; }

.gplan[data-style="certificate"] { max-width: 42rem; }
.gplan[data-style="certificate"] .gplan__stamp::before,
.gplan[data-style="certificate"] .gplan__stamp::after { content: ""; width: 28px; height: 1px; background: var(--border-strong); }
.gplan[data-style="certificate"] .gplan__stamp .material-symbols-rounded { display: none; }
.gplan[data-style="certificate"] .gplan__portrait { width: 108px; height: 108px; }
.gplan[data-style="certificate"] .gplan__portrait .avatar { position: absolute; inset: 6px; width: 96px; height: 96px; font-size: var(--text-3xl); font-family: var(--font-serif); font-weight: var(--weight-medium); }
.gplan[data-style="certificate"] .gplan__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--accent-primary);
  border-radius: var(--radius-full);
}
@keyframes gplan-ring-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.gplan[data-style="certificate"] .gplan__name { font-family: var(--font-serif); font-size: var(--text-3xl); font-weight: var(--weight-medium); }
.gplan[data-style="certificate"] .gplan__title { font-family: var(--font-serif); font-weight: var(--weight-semibold); }
.gplan[data-style="certificate"] .gplan__meta > span { background: transparent; padding: 0; border-radius: 0; font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-tertiary); }
.gplan[data-style="certificate"] .gplan__meta > span + span::before { content: "·"; margin-right: var(--space-2); color: var(--text-tertiary); }
.gplan[data-style="certificate"] .gplan__meta-category { color: var(--accent-primary); }
.gplan[data-style="certificate"] .gplan__region--stats { display: none; }
.gplan[data-style="certificate"] .gplan__purpose { font-family: var(--font-serif); font-size: var(--text-xl); }
.gplan[data-style="certificate"] .gplan__region--purpose::before {
  content: "workspace_premium";
  font-family: 'Material Symbols Rounded';
  font-size: 16px;
  color: var(--accent-primary);
  display: block;
  text-align: center;
  margin: 0 auto var(--space-10);
  background:
    linear-gradient(var(--border-default), var(--border-default)) no-repeat left 50% / calc(50% - 28px) 1px,
    linear-gradient(var(--border-default), var(--border-default)) no-repeat right 50% / calc(50% - 28px) 1px;
}
.gplan[data-style="certificate"] .gplan__goals-list { max-width: 36rem; margin: 0 auto; width: 100%; gap: 0; }
.gplan[data-style="certificate"] .gplan__goal { flex-direction: row; align-items: baseline; gap: var(--space-3); padding: var(--space-3) 0; }
.gplan[data-style="certificate"] .gplan__goal + .gplan__goal { border-top: 1px solid var(--border-subtle); }
.gplan[data-style="certificate"] .gplan__goal-head { display: contents; }
.gplan[data-style="certificate"] .gplan__goal-check { order: 1; }
.gplan[data-style="certificate"] .gplan__goal-objective { order: 2; flex: 0 1 auto; }
.gplan[data-style="certificate"] .gplan__goal-leader { order: 3; }
.gplan[data-style="certificate"] .gplan__goal-result { order: 4; flex: 0 0 auto; flex-wrap: nowrap; }
.gplan[data-style="certificate"] .gplan__goal-date { order: 5; flex: 0 0 auto; }
.gplan[data-style="certificate"] .gplan__goal-check { width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--status-success-bg); align-self: flex-start; margin-block-start: 2px; }
.gplan[data-style="certificate"] .gplan__goal-check .material-symbols-rounded { font-size: 15px; }
.gplan[data-style="certificate"] .gplan__goal-objective { font-family: var(--font-serif); font-weight: var(--weight-regular); }
.gplan[data-style="certificate"] .gplan__goal-leader { display: block; flex: 1; border-bottom: 1px dotted var(--border-strong); transform: translateY(-4px); min-width: var(--space-6); }
.gplan[data-style="certificate"] .gplan__goal-result { font-size: var(--text-sm); }
.gplan[data-style="certificate"] .gplan__goal .progress { display: none; }
.gplan[data-style="certificate"] .gplan__habits-list { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: var(--space-2); text-align: center; }
.gplan[data-style="certificate"] .gplan__habit { flex: 1 1 150px; max-width: 180px; flex-direction: column; gap: 0; padding: var(--space-4) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-base); }
.gplan[data-style="certificate"] .gplan__habit-icon { display: none; }
.gplan[data-style="certificate"] .gplan__habit-count { order: 1; font-family: var(--font-serif); font-size: var(--text-3xl); font-weight: var(--weight-medium); line-height: var(--leading-none); color: var(--text-primary); }
.gplan[data-style="certificate"] .gplan__habit-action { order: 2; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-snug); }
.gplan[data-style="certificate"] .gplan__habit-cadence { order: 3; margin-top: var(--space-1); }
.gplan[data-style="certificate"] .gplan__steps-list { max-width: 30rem; margin: 0 auto; width: 100%; gap: 0; }
.gplan[data-style="certificate"] .gplan__step { padding: var(--space-1-5) 0; }
.gplan[data-style="certificate"] .gplan__step-check { align-self: flex-start; }
.gplan[data-style="certificate"] .gplan__step-leader { display: block; flex: 1; border-bottom: 1px dotted var(--border-subtle); transform: translateY(-3px); min-width: var(--space-4); }

.gplan[data-style="ascent"] { max-width: 42rem; text-align: left; }
.gplan[data-style="ascent"] .gplan__hero { text-align: center; display: flex; flex-direction: column; align-items: center; }
.gplan[data-style="ascent"] .gplan__portrait { margin: var(--space-6) auto var(--space-3); }
.gplan[data-style="ascent"] .gplan__portrait .avatar { width: 56px; height: 56px; font-size: var(--text-lg); }
.gplan[data-style="ascent"] .gplan__stamp .material-symbols-rounded { display: none; }
.gplan[data-style="ascent"] .gplan__name { font-size: var(--text-lg); }
.gplan[data-style="ascent"] .gplan__deed { font-size: var(--text-sm); }
.gplan[data-style="ascent"] .gplan__hero { padding-bottom: var(--space-10); }
.gplan[data-style="ascent"] .gplan__region--practice { order: 25; }
.gplan[data-style="ascent"] .gplan__region--stats { order: 70; }
.gplan[data-style="ascent"] { --gp-node: 32px; }
.gplan[data-style="ascent"] .gplan__region {
  position: relative;
  margin: 0;
  padding: 0 0 var(--space-8) 48px;
}
.gplan[data-style="ascent"] .gplan__region::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-default);
}
.gplan[data-style="ascent"] .gplan__region--stats::before { background: linear-gradient(to bottom, var(--border-default), var(--accent-primary)); bottom: auto; height: var(--space-4); }
.gplan[data-style="ascent"] .gplan__region::after {
  font-family: 'Material Symbols Rounded';
  font-size: 16px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--gp-node);
  height: var(--gp-node);
  border-radius: var(--radius-full);
  border: 2px solid var(--border-strong);
  background: var(--surface-base);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.gplan[data-style="ascent"][data-state="complete"] .gplan__region--practice::after,
.gplan[data-style="ascent"][data-state="complete"] .gplan__region--goals::after,
.gplan[data-style="ascent"][data-state="complete"] .gplan__region--steps::after {
  border-color: var(--status-success);
  background: var(--status-success-bg);
  color: var(--status-success);
}
.gplan[data-style="ascent"] .gplan__region-head .material-symbols-rounded { display: none; }
.gplan[data-style="ascent"] .gplan__region--purpose::after  { content: "flag"; }
.gplan[data-style="ascent"] .gplan__region--practice::after { content: "event_repeat"; }
.gplan[data-style="ascent"] .gplan__region--goals::after    { content: "task_alt"; }
.gplan[data-style="ascent"] .gplan__region--steps::after    { content: "footprint"; }
.gplan[data-style="ascent"] .gplan__region--stats { padding-top: var(--space-4); padding-bottom: 0; }
.gplan[data-style="ascent"] .gplan__region--stats::after {
  content: "workspace_premium";
  top: var(--space-4);
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: var(--text-on-accent);
  box-shadow: 0 0 0 6px var(--accent-subtle);
}
.gplan[data-style="ascent"] .gplan__region-head { justify-content: flex-start; margin-bottom: var(--space-2); min-height: var(--gp-node); }
.gplan[data-style="ascent"] .gplan__region--stats .gplan__region-head { display: none; }
.gplan[data-style="ascent"] .gplan__purpose,
.gplan[data-style="ascent"] .gplan__goals-list,
.gplan[data-style="ascent"] .gplan__habits-list,
.gplan[data-style="ascent"] .gplan__steps-list {
  padding: 0;
}
.gplan[data-style="ascent"] .gplan__summit-card {
  background: var(--surface-sunken);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}
.gplan[data-style="ascent"] .gplan__purpose {
  font-size: var(--text-sm);
  max-width: none;
  text-align: left;
  margin: 0;
  display: flex;
  align-items: center;
  min-height: var(--gp-node);
}
.gplan[data-style="ascent"] .gplan__goal + .gplan__goal { border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); margin-top: var(--space-3); }
.gplan[data-style="ascent"] .gplan__goal-objective { font-size: var(--text-base); }
.gplan[data-style="ascent"] .gplan__goal-result { justify-content: space-between; margin-top: var(--space-2); font-size: var(--text-sm); }
.gplan[data-style="ascent"] .gplan__habit { padding: var(--space-2) var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-lg); font-size: var(--text-sm); }
.gplan[data-style="ascent"] .gplan__step { padding: var(--space-1-5) 0; }
.gplan[data-style="ascent"] .gplan__step-date { margin-left: auto; }
.gplan[data-style="ascent"] .gplan__region--stats > .gplan__summit-card { text-align: center; }
.gplan[data-style="ascent"] .gplan__summit-title,
.gplan[data-style="ascent"] .gplan__summit-note { display: block; }
.gplan[data-style="ascent"] .gplan__stats-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5) var(--space-8); margin-top: var(--space-4); }
.gplan[data-style="ascent"] .gplan__stat .data-value { font-size: var(--text-3xl); color: var(--accent-primary); }
.gplan[data-style="ascent"] .gplan__stat--days { display: none; }

.gplan[data-style="poster"] { max-width: 64rem; }
.gplan[data-style="poster"] .gplan__stamp {
  padding: var(--space-1-5) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--accent-primary);
  color: var(--text-on-accent);
  font-weight: var(--weight-bold);
}
.gplan[data-style="poster"] .gplan__stamp .material-symbols-rounded { font-size: 15px; }
.gplan[data-style="poster"] .gplan__portrait .avatar {
  width: 116px;
  height: 116px;
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  box-shadow: 0 0 0 4px var(--surface-base), 0 0 0 7px var(--accent-primary), var(--shadow-lg);
}
.gplan[data-style="poster"] .gplan__burst { display: flex; }
.gplan[data-style="poster"] .gplan__title {
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-none);
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-top: var(--space-8);
}
.gplan[data-style="poster"] .gplan__region--purpose { display: none; }
.gplan[data-style="poster"] .gplan__region--stats { order: 15; }
.gplan[data-style="poster"] .gplan__region-head { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); font-weight: var(--weight-bold); text-align: left; }
.gplan[data-style="poster"] .gplan__region-head::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }
.gplan[data-style="poster"] .gplan__region--stats .gplan__region-head { display: none; }
.gplan[data-style="poster"] .gplan__stat {
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-3);
}
.gplan[data-style="poster"] .gplan__stat--days { background: var(--accent-primary); }
.gplan[data-style="poster"] .gplan__stat--days .data-value,
.gplan[data-style="poster"] .gplan__stat--days .data-label { color: var(--text-on-accent); }
.gplan[data-style="poster"] .gplan__goals-list,
.gplan[data-style="poster"] .gplan__steps-list { gap: 0; }
@container gplan (min-width: 720px) {
  .gplan--celebrate[data-style="poster"] .gplan__goals-list { display: grid; grid-template-columns: 1fr 1fr; }
}
.gplan[data-style="poster"] .gplan__goal {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-4) 0 var(--space-2);
}
.gplan[data-style="poster"] .gplan__goals-list > .gplan__goal:first-child { border-top: 0; padding-top: var(--space-2); }
.gplan[data-style="poster"] .gplan__goal-check .material-symbols-rounded { font-size: 18px; }
.gplan[data-style="poster"] .gplan__goal-result { margin-top: var(--space-3); }
.gplan[data-style="poster"] .gplan__goal-from { font-size: var(--text-lg); text-decoration: line-through; }
.gplan[data-style="poster"] .gplan__goal-to { font-size: var(--text-3xl); color: var(--accent-primary); }
.gplan[data-style="poster"] .gplan__habits-list { flex-direction: row; flex-wrap: wrap; }
.gplan[data-style="poster"] .gplan__habit {
  padding: var(--space-2) var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  gap: var(--space-2);
  max-width: 100%;
}
.gplan[data-style="poster"] .gplan__habit-action { flex: 0 1 auto; min-width: 0; }
.gplan[data-style="poster"] .gplan__habit-count { color: var(--accent-primary); font-weight: var(--weight-bold); }
.gplan[data-style="poster"] .gplan__step {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
}
.gplan[data-style="poster"] .gplan__step-check .material-symbols-rounded { font-size: 17px; }
.gplan[data-style="poster"] .gplan__step-desc { flex: 1; }

.gplan--celebrate[data-style="ascent"] .gplan__purpose,
.gplan--celebrate[data-style="ascent"] .gplan__goals-list,
.gplan--celebrate[data-style="ascent"] .gplan__habits-list,
.gplan--celebrate[data-style="ascent"] .gplan__steps-list,
.gplan--celebrate[data-style="ascent"] .gplan__summit-card {
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
}
.gplan--celebrate[data-style="ascent"] .gplan__region--stats > .gplan__summit-card {
  border-color: var(--accent-primary);
  background: linear-gradient(to bottom right, var(--accent-subtle), var(--surface-base) 65%);
  box-shadow: var(--shadow-md);
}
.gplan--celebrate[data-style="poster"] .gplan__stat {
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-4);
}
.gplan--celebrate[data-style="poster"] .gplan__stat--days { border-color: var(--accent-primary); }
.gplan--celebrate[data-style="poster"] .gplan__goals-list,
.gplan--celebrate[data-style="poster"] .gplan__steps-list { gap: var(--space-3); }
.gplan--celebrate[data-style="poster"] .gplan__goal {
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.gplan--celebrate[data-style="poster"] .gplan__goals-list > .gplan__goal:first-child { padding-top: var(--space-5); }
.gplan--celebrate[data-style="poster"] .gplan__habit {
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2) var(--space-3);
}
.gplan--celebrate[data-style="poster"] .gplan__step {
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

@container gplan (max-width: 519px) {
  .gplan[data-style="certificate"] .gplan__goal { flex-direction: column; gap: var(--space-1); }
  .gplan[data-style="certificate"] .gplan__goal-head { display: flex; }
  .gplan[data-style="certificate"] .gplan__goal-objective { flex: 1; }
  .gplan[data-style="certificate"] .gplan__goal-leader,
  .gplan[data-style="certificate"] .gplan__step-leader { display: none; }
  .gplan[data-style="certificate"] .gplan__goal-result { margin-inline-start: calc(22px + var(--space-2)); }
  .gplan[data-style="certificate"] .gplan__step-date { margin-inline-start: auto; }
  .gplan[data-style="certificate"] .gplan__habit { flex: 1 1 128px; }
}

@container gplan (max-width: 439px) {
  .gplan__title { font-size: var(--text-3xl); }
  .gplan__name { font-size: var(--text-xl); }
  .gplan__purpose { font-size: var(--text-base); }
  .gplan__stat .data-value { font-size: var(--text-3xl); }
  .gplan__region { margin-top: var(--space-8); }
  .gplan__portrait { margin-top: var(--space-6); }

  .gplan[data-style="certificate"] .gplan__name { font-size: var(--text-2xl); }
  .gplan[data-style="certificate"] .gplan__purpose { font-size: var(--text-lg); }
  .gplan[data-style="certificate"] .gplan__portrait { width: 84px; height: 84px; }
  .gplan[data-style="certificate"] .gplan__portrait .avatar { inset: 5px; width: 74px; height: 74px; font-size: var(--text-2xl); }
  .gplan[data-style="certificate"] .gplan__region--purpose::before { margin-bottom: var(--space-8); }

  .gplan[data-style="ascent"] .gplan__region { --gp-node: 26px; padding-left: 38px; padding-bottom: var(--space-6); }
  .gplan[data-style="ascent"] .gplan__region::before { left: 12px; }
  .gplan[data-style="ascent"] .gplan__region::after { font-size: 14px; }
  .gplan[data-style="ascent"] .gplan__stats-row { gap: var(--space-4) var(--space-5); }

  .gplan[data-style="poster"] .gplan__portrait .avatar { width: 88px; height: 88px; font-size: var(--text-3xl); }
  .gplan[data-style="poster"] .gplan__goal-from { font-size: var(--text-base); }
  .gplan[data-style="poster"] .gplan__goal-to { font-size: var(--text-2xl); }
  .gplan--celebrate[data-style="poster"] .gplan__goal { padding: var(--space-4); }
  .gplan--celebrate[data-style="poster"] .gplan__goals-list > .gplan__goal:first-child { padding-top: var(--space-4); }
}

.gplan-index {
  container-type: inline-size;
  container-name: gplan-index;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.gplan-index__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.gplan-index__title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  margin: 0;
}
.gplan-index__title .material-symbols-rounded { font-size: 14px; color: var(--accent-primary); }
.gplan-index__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.gplan-index__head--actions { margin-bottom: 0; }
.gplan-index__add { margin-left: auto; }

.gplan-index__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: stretch;
}
@container gplan-index (min-width: 640px) {
  .gplan-index__cards { grid-template-columns: 1fr 1fr; }
}
@container gplan-index (min-width: 1000px) {
  .gplan-index__cards { grid-template-columns: 1fr 1fr 1fr; }
}

.gplan-card {
  container-type: inline-size;
  container-name: gplan-card;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text-primary);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  padding-bottom: var(--space-6);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.gplan-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.gplan-card:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.gplan-card__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.gplan-card__ridge,
.gplan-card__marker { display: none; }

.gplan-card__medallion { display: none; }
.gplan-card__medallion-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--surface-base);
  color: var(--accent-primary);
  inset: var(--space-1-5);
  position: absolute;
}
.gplan-card__medallion-face .material-symbols-rounded { font-size: 22px; }

.gplan-card__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-tertiary);
  min-width: 0;
}
.gplan-card__category { font-weight: var(--weight-semibold); color: var(--accent-primary); min-width: 0; overflow-wrap: anywhere; }
.gplan-card__state { margin-left: auto; white-space: nowrap; flex-shrink: 0; }
.gplan-card[data-state="completed"] .gplan-card__state { color: var(--status-success-text); font-weight: var(--weight-semibold); }
.gplan-card__state { display: inline-flex; align-items: center; gap: var(--space-1); }
.gplan-card__shared { font-size: 14px; color: var(--accent-primary); }
.gplan-card[data-style="poster"] .gplan-card__shared { color: var(--ink-on-media); }

.gplan-card__name {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  min-width: 0;
  overflow-wrap: anywhere;
}

.gplan-card__pct {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
  color: var(--accent-primary);
  align-self: end;
}

.gplan-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  min-width: 0;
}
.gplan-card__foot .material-symbols-rounded { font-size: 14px; color: var(--text-tertiary); flex-shrink: 0; }
.gplan-card__next { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gplan-card__goals { margin-left: auto; white-space: nowrap; color: var(--text-tertiary); }

.gplan-card__meter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--space-1-5);
  background: var(--surface-sunken);
}
.gplan-card__meter-fill {
  display: block;
  height: 100%;
  width: var(--gp-progress, 0%);
  background: var(--accent-primary);
  transition: width var(--duration-normal) var(--ease-out);
}
.gplan-card[data-state="completed"] .gplan-card__meter-fill { background: var(--status-success); }

.gplan-card[data-style="certificate"] {
  border-radius: var(--radius-sm);
  border-color: var(--border-default);
  text-align: center;
  justify-items: center;
  grid-template-rows: auto auto auto 1fr auto;
  padding-top: var(--space-6);
}
.gplan-card[data-style="certificate"] .gplan-card__art {
  inset: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.gplan-card[data-style="certificate"] .gplan-card__medallion {
  display: block;
  position: relative;
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-full);
  background: conic-gradient(var(--accent-primary) var(--gp-progress, 0%), var(--border-subtle) 0);
  margin-bottom: var(--space-1);
}
.gplan-card[data-style="certificate"] .gplan-card__eyebrow {
  flex-direction: column;
  align-items: center;
  gap: var(--space-0-5);
}
.gplan-card[data-style="certificate"] .gplan-card__state { margin-left: 0; }
.gplan-card[data-style="certificate"] .gplan-card__name {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
}
.gplan-card[data-style="certificate"] .gplan-card__pct {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
}
.gplan-card[data-style="certificate"] .gplan-card__foot { justify-content: center; }
.gplan-card[data-style="certificate"] .gplan-card__goals { margin-left: 0; }
.gplan-card[data-style="certificate"] .gplan-card__meter { display: none; }
.gplan-card[data-style="certificate"][data-state="completed"] { border-color: var(--accent-primary); }
.gplan-card[data-style="certificate"][data-state="completed"] .gplan-card__medallion-face { color: var(--status-success); }

.gplan-card[data-style="ascent"] {
  background: linear-gradient(to bottom, var(--surface-base) 40%, var(--surface-sunken));
  grid-template-rows: auto 1fr auto auto;
  padding-bottom: var(--space-8);
}
.gplan-card[data-style="ascent"] .gplan-card__ridge {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--space-16);
  background: var(--accent-muted);
  clip-path: polygon(0 100%, 0 62%, 18% 74%, 34% 40%, 52% 58%, 68% 20%, 84% 44%, 100% 26%, 100% 100%);
}
.gplan-card[data-style="ascent"] .gplan-card__marker {
  display: block;
  position: absolute;
  bottom: 0;
  left: var(--gp-progress, 0%);
  width: 1px;
  height: var(--space-16);
  background: var(--accent-primary);
  transition: left var(--duration-normal) var(--ease-out);
}
.gplan-card[data-style="ascent"] .gplan-card__marker::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--accent-primary);
  border: 2px solid var(--surface-base);
  transform: translate(-50%, -50%);
}
.gplan-card[data-style="ascent"] .gplan-card__name {
  font-family: var(--font-display);
  align-self: start;
}
.gplan-card[data-style="ascent"] .gplan-card__pct {
  justify-self: start;
  font-size: var(--text-2xl);
}
.gplan-card[data-style="ascent"] .gplan-card__meter { display: none; }
.gplan-card[data-style="ascent"][data-state="completed"] .gplan-card__ridge { background: var(--accent-primary); }
.gplan-card[data-style="ascent"][data-state="completed"] .gplan-card__marker::after { background: var(--status-success); }

.gplan-card[data-style="poster"] {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
  border-color: transparent;
  color: var(--text-on-accent);
  grid-template-rows: auto auto 1fr auto;
}
.gplan-card[data-style="poster"] .gplan-card__eyebrow { color: var(--ink-on-media-soft); }
.gplan-card[data-style="poster"] .gplan-card__category { color: var(--ink-on-media); }
.gplan-card[data-style="poster"] .gplan-card__state { color: var(--ink-on-media-soft); }
.gplan-card[data-style="poster"][data-state="completed"] .gplan-card__state { color: var(--ink-on-media); }
.gplan-card[data-style="poster"] .gplan-card__name {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-none);
  color: var(--ink-on-media);
}
.gplan-card[data-style="poster"] .gplan-card__pct {
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  color: var(--ink-on-media);
  justify-self: end;
  align-self: end;
}
.gplan-card[data-style="poster"] .gplan-card__foot { color: var(--ink-on-media-soft); }
.gplan-card[data-style="poster"] .gplan-card__foot .material-symbols-rounded { color: var(--ink-on-media-faint); }
.gplan-card[data-style="poster"] .gplan-card__goals { color: var(--ink-on-media-faint); }
.gplan-card[data-style="poster"] .gplan-card__meter { background: var(--ink-on-media-faint); height: var(--space-2); }
.gplan-card[data-style="poster"] .gplan-card__meter-fill,
.gplan-card[data-style="poster"][data-state="completed"] .gplan-card__meter-fill { background: var(--ink-on-media); }
.gplan-card[data-style="poster"]:hover { border-color: transparent; }

@container gplan-index (max-width: 419px) {
  .gplan-card { padding: var(--space-4); padding-bottom: var(--space-5); gap: var(--space-1-5); }
}

@container gplan-card (max-width: 419px) {
  .gplan-card__name { font-size: var(--text-lg); }
  .gplan-card__pct { font-size: var(--text-2xl); }
  .gplan-card[data-style="certificate"] .gplan-card__medallion { width: var(--space-12); height: var(--space-12); }
  .gplan-card[data-style="certificate"] .gplan-card__medallion-face .material-symbols-rounded { font-size: 16px; }
  .gplan-card[data-style="ascent"] .gplan-card__ridge,
  .gplan-card[data-style="ascent"] .gplan-card__marker { height: var(--space-12); }
  .gplan-card[data-style="poster"] .gplan-card__pct { font-size: var(--text-4xl); }
}

@media (prefers-reduced-motion: reduce) {
  .gplan-card,
  .gplan-card__meter-fill,
  .gplan-card[data-style="ascent"] .gplan-card__marker { transition: none; }
  .gplan-card:hover { transform: none; }
}

.gplan[data-style][data-state="active"] .gplan__burst { display: none; }
.gplan[data-state="active"] .gplan__stamp { color: var(--text-tertiary); }
.gplan[data-style="poster"][data-state="active"] .gplan__stamp {
  background: var(--surface-sunken);
  color: var(--text-secondary);
}
.gplan__goal-check--open { color: var(--text-tertiary); }
.gplan[data-style="certificate"] .gplan__goal-check.gplan__goal-check--open { background: var(--surface-sunken); }

.gp-status {
  container-type: inline-size;
  container-name: gp-status;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.gp-status__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.gp-status__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  flex: 0 0 var(--space-24);
}
.gp-status__value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  min-width: 0;
}
.gp-status__value .material-symbols-rounded { font-size: 18px; color: var(--text-tertiary); }
.gp-status__value--done { color: var(--status-success-text); }
.gp-status__value--done .material-symbols-rounded { color: var(--status-success); }
.gp-status__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-2);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--accent-muted);
  color: var(--accent-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.gp-status__link .material-symbols-rounded { font-size: 14px; color: var(--accent-primary); }
.gp-status__action { margin-left: auto; flex-shrink: 0; }
.gp-status__nudge {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
  margin: 0;
}

@container gp-status (max-width: 439px) {
  .gp-status__row { row-gap: var(--space-2); }
  .gp-status__label { flex: 1 1 100%; }
}

.gp-views {
  width: fit-content;
  margin: 0 auto var(--space-6);
  padding: var(--space-1);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.gp-views .tab { min-width: 92px; text-align: center; }
.gp-views .tab--active {
  background: var(--surface-base);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
  .gplan--celebrate .gplan__rise,
  .gplan--celebrate .gplan__burst,
  .gplan--celebrate .gplan__goal .progress__bar,
  .gplan--celebrate[data-style="certificate"] .gplan__portrait::after { animation: none; }
}

.sk-ring {
  width: 20px; height: 20px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-strong);
  display: block;
}
.sk-spine {
  position: absolute;
  right: 12%;
  top: var(--space-2);
  bottom: var(--space-2);
  width: 2px;
  background: var(--border-default);
  border-radius: var(--radius-full);
}
.sk-confetti { position: absolute; inset: 0; }
.sk-confetti i {
  position: absolute;
  width: 4px; height: 7px;
  border-radius: 1px;
  background: var(--accent-muted);
}
.sk-confetti i:nth-child(1) { left: 10%; top: 12%; transform: rotate(20deg); }
.sk-confetti i:nth-child(2) { left: 26%; top: 6%;  transform: rotate(-15deg); background: var(--accent-primary); }
.sk-confetti i:nth-child(3) { left: 48%; top: 14%; transform: rotate(35deg); }
.sk-confetti i:nth-child(4) { left: 68%; top: 7%;  transform: rotate(-25deg); background: var(--accent-primary); }
.sk-confetti i:nth-child(5) { left: 84%; top: 16%; transform: rotate(10deg); }
.sk-confetti i:nth-child(6) { left: 58%; top: 78%; transform: rotate(-40deg); }

.gpw {
  container-type: inline-size;
  container-name: gpw;
  display: flex;
  flex-direction: column;
}
.gpw > * + * { margin-block-start: var(--space-6); }
.gpw__head { display: flex; flex-direction: column; gap: var(--space-3); }

.gpw__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0;
}

.gpw__plan {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  align-self: flex-start;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-decoration: none;
}
.gpw__plan:hover { color: var(--accent-primary); }
.gpw__plan .material-symbols-rounded { font-size: 17px; color: var(--text-tertiary); }
.gpw__plan:hover .material-symbols-rounded { color: var(--accent-primary); }

.gpw__goal { display: flex; flex-direction: column; gap: var(--space-2); }
.gpw__goal-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0;
  overflow-wrap: anywhere;
}
.gpw__reading { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
.gpw__reading-now {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
}
.gpw__reading-ctx { font-size: var(--text-sm); color: var(--text-tertiary); }
.gpw__goal-meta {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--text-tertiary);
}
.gpw__goal-meta .gpw__pct { font-family: var(--font-mono); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.gpw__goal-quiet {
  margin-left: auto;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--accent-primary); cursor: pointer; text-decoration: none;
}
.gpw__goal-quiet:hover { text-decoration: underline; }

.gpw__goals-row { display: flex; flex-direction: column; gap: var(--space-2); }
.gpw__goals {
  display: flex; gap: var(--space-2);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--space-1));
  padding: 0 var(--space-1);
}
.gpw__goals::-webkit-scrollbar { display: none; }
.gpw__goal-pill { flex: none; }
.gpw__pill {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  padding: var(--space-1) var(--space-3);
  min-height: 28px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: var(--surface-base);
  font: inherit;
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--text-secondary); text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.gpw__pill:hover { border-color: var(--border-strong); color: var(--text-primary); }
.gpw__pill[aria-current="true"] { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-on-accent); }
.gpw__pill .material-symbols-rounded { font-size: 14px; }
.gpw__goal-pill { flex: none; }

.gpw__practice {
  background: var(--accent-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.gpw__practice .gpw__label { color: var(--accent-primary); }

.gpw__act {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  min-height: 56px;
}
.gpw__act-icon { flex: none; display: grid; place-items: center; color: var(--accent-primary); }
.gpw__act-icon .material-symbols-rounded { font-size: 20px; }
.gpw__act-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.gpw__act-name {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
.gpw__act-meta { font-size: var(--text-xs); color: var(--text-tertiary); }
.gpw__act-meta strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); font-weight: var(--weight-semibold); }

.gpw__record {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  border: 0;
  background: var(--accent-primary);
  color: var(--text-on-accent);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  white-space: nowrap;
}
.gpw__record:hover { background: var(--accent-hover); }
.gpw__record:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.gpw__record .material-symbols-rounded { font-size: 18px; }
.gpw__record--done {
  background: transparent;
  color: var(--status-success-text);
  border: 1px solid var(--border-subtle);
  font-weight: var(--weight-semibold);
}
.gpw__record--done:hover { background: var(--surface-hover); color: var(--status-success-text); }

.gpw__next {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0;
  min-height: 56px;
}
.gpw__next-check {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-strong);
  background: var(--surface-base);
  color: var(--text-tertiary);
  display: grid; place-items: center;
  cursor: pointer; padding: 0;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.gpw__next-check .material-symbols-rounded { font-size: 26px; }
.gpw__next-check:hover { border-color: var(--accent-primary); color: var(--accent-primary); background: var(--accent-subtle); }
.gpw__next-check:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.gpw__next-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; text-decoration: none; }
.gpw__next-desc { font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug); overflow-wrap: anywhere; }
.gpw__next-when { font-size: var(--text-xs); color: var(--text-tertiary); }

.gpw__steps { display: flex; flex-direction: column; margin-top: var(--space-2); }
.gpw__step {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) 0;
  min-height: 36px;
}
.gpw__step-check {
  flex: none;
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  background: none;
  color: transparent;
  cursor: pointer; padding: 0;
}
.gpw__step-check .material-symbols-rounded { font-size: 17px; }
.gpw__step-check:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.gpw__step-check--taken {
  border-color: transparent;
  background: var(--status-success-bg);
  color: var(--status-success-text);
}
.gpw__step-body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--space-2); background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; text-decoration: none; }
.gpw__step-desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-snug); min-width: 0; overflow-wrap: anywhere; }
.gpw__step--taken .gpw__step-desc { color: var(--text-tertiary); }
.gpw__step-when { margin-left: auto; font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }
.gpw__steps-label {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--text-tertiary);
  margin: var(--space-3) 0 var(--space-1);
}

.gpw__queue { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

@container gpw (min-width: 420px) {
  .gpw > * + * { margin-block-start: var(--space-8); }
  .gpw__head { gap: var(--space-4); }
  .gpw__reading { flex-direction: row; align-items: baseline; gap: var(--space-2); }
  .gpw__goal-name { font-size: var(--text-2xl); }
  .gpw__reading-now { font-size: var(--text-4xl); }
  .gpw__act { padding-left: var(--space-4); min-height: 60px; }
  .gpw__record { padding: 0 var(--space-4); }
  .gpw__practice { padding: var(--space-4); }
}

@container gpw (max-width: 359px) {
  .gpw__act { flex-wrap: wrap; row-gap: var(--space-2); padding: var(--space-3); }
  .gpw__act-body { flex: 1 1 auto; }
  .gpw__record { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .gpw__next-check { transition: none; }
}

.gpauthor {
  container-type: inline-size;
  container-name: gpauthor;
  display: flex; flex-direction: column; gap: var(--space-8);
}
.gpauthor__lede { display: flex; flex-direction: column; gap: var(--space-2); }

.gp-crumbs { flex-wrap: wrap; row-gap: var(--space-1); margin-bottom: var(--space-3); }
.gp-crumbs .breadcrumbs__link {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  font-weight: var(--weight-semibold);
  min-width: 0;
  overflow-wrap: anywhere;
}
.gp-crumbs .material-symbols-rounded { font-size: 16px; color: var(--text-tertiary); }
.gp-crumbs .breadcrumbs__link:hover { color: var(--accent-primary); }
.gp-crumbs .breadcrumbs__link:hover .material-symbols-rounded { color: var(--accent-primary); }
.gpauthor__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  overflow-wrap: anywhere;
}
.gpauthor__sub { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; line-height: var(--leading-relaxed); }
.gpauthor__section { display: flex; flex-direction: column; gap: var(--space-3); }
.gpauthor .progress-step { padding-top: 0; }
.gpauthor__setup-note {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.gprec { display: flex; flex-direction: column; gap: var(--space-5); }
.gprec__field {
  display: flex; align-items: baseline; gap: var(--space-2);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-xl);
  background: var(--input-bg);
  padding: var(--space-3) var(--space-4);
}
.gprec__field:focus-within { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--accent-subtle); }
.gprec__unit {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.gprec__input {
  flex: 1; min-width: 0;
  field-sizing: content;
  border: 0; background: none; outline: none;
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  padding: 0;
}
.gprec__input::placeholder { color: var(--text-disabled); }
@supports (field-sizing: content) {
  .gprec__input { flex: 0 1 auto; min-width: 3ch; }
}
.gprec__where {
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--text-sm); color: var(--text-secondary);
}
.gprec__where strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); }

.gprec__recent { display: flex; flex-direction: column; gap: var(--space-1); }
.gprec__entry {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}
.gprec__entry-when { color: var(--text-tertiary); font-size: var(--text-xs); }
.gprec__entry-value {
  margin-left: auto;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold); color: var(--text-secondary);
}
.gprec__entry-remove {
  flex: none; width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; background: none; padding: 0;
  border-radius: var(--radius-full);
  color: var(--text-tertiary); cursor: pointer;
}
.gprec__entry-remove:hover { background: var(--surface-hover); color: var(--status-error); }
.gprec__entry-remove .material-symbols-rounded { font-size: 18px; }

.gpw__goal-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.gpw__goal-head .gpw__goal-name { flex: 0 1 auto; }
.gpw__plan-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.gpw__plan-head .gpw__plan { align-self: auto; }

.gpresume { display: flex; flex-direction: column; gap: var(--space-4); }
.gpresume__done { display: flex; flex-direction: column; gap: var(--space-1); }
.gpresume__row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-tertiary); }
.gpresume__row .material-symbols-rounded { font-size: 18px; color: var(--status-success); }
.gpresume__row--todo { color: var(--text-primary); font-weight: var(--weight-semibold); }
.gpresume__row--todo .material-symbols-rounded { color: var(--text-disabled); }
.gpauthor__rule { border-top: 1px solid var(--border-subtle); padding-top: var(--space-6); }
.gpauthor__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.gpauthor__spacer { flex: 1; }
.gpauthor__hint { font-size: var(--text-sm); color: var(--text-tertiary); margin: 0; }

.gpauthor .style-pick { flex-direction: column; gap: var(--space-2); }
.gpauthor .style-opt {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}
.gpauthor .style-opt__thumb { flex: none; width: 72px; }
.gpauthor .style-opt__body { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
.style-opt__hint { font-size: var(--text-xs); color: var(--text-tertiary); line-height: var(--leading-snug); }

@container gpauthor (min-width: 520px) {
  .gpauthor .style-pick { flex-direction: row; }
  .gpauthor .style-opt { flex-direction: column; align-items: stretch; padding: var(--space-2); }
  .gpauthor .style-opt__thumb { width: auto; }
}

.gpauthor__icon-row { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.gpauthor__pair { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.gpauthor__pair > .form-group { flex: 1 1 8rem; min-width: 0; margin: 0; }
.gpauthor__icon-btn {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--accent-primary);
  display: grid; place-items: center;
  cursor: pointer;
}
.gpauthor__icon-btn:hover { border-color: var(--accent-primary); }
.gpauthor__icon-btn .material-symbols-rounded { font-size: 22px; }

.gpshare { display: flex; flex-direction: column; gap: var(--space-6); }
.gpshare__tiers { display: flex; flex-direction: column; gap: var(--space-2); }
.gpshare__tier {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-base);
  cursor: pointer;
}
.gpshare__tier:hover { border-color: var(--border-strong); }
.gpshare__tier:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 35%, transparent);
}
.gpshare__tier .material-symbols-rounded { font-size: 20px; color: var(--text-tertiary); margin-top: 2px; }
.gpshare__tier:has(input:checked) .material-symbols-rounded { color: var(--accent-primary); }
.gpshare__tier-body { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
.gpshare__tier-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.gpshare__tier-note { font-size: var(--text-xs); color: var(--text-tertiary); line-height: var(--leading-snug); }

.gpshare__link { display: flex; flex-direction: column; gap: var(--space-3); }
.gpshare__link-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.gpshare__link-row .form-input { min-width: 0; flex: 1 1 12rem; }
.gpshare__link-row .form-input { font-family: var(--font-mono); font-size: var(--text-xs); }
.gpshare__locked {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.gpshare__locked .material-symbols-rounded { font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
  .gpw__next-check { transition: none; }
}

.style-pick { display: flex; gap: var(--space-2); }
.style-opt {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-base);
  cursor: pointer; text-align: left; text-decoration: none; color: inherit;
  font-family: inherit;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.style-opt:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.style-opt--active,
.style-opt:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 35%, transparent);
}
.style-opt__thumb {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  padding: var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-1);
  overflow: hidden;
}
.style-opt__name {
  display: flex; align-items: center; gap: var(--space-1-5);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-primary);
}
.style-opt--active .style-opt__name .material-symbols-rounded,
.style-opt:has(input:checked) .style-opt__name .material-symbols-rounded { color: var(--accent-primary); }
.style-opt__name .material-symbols-rounded { font-size: 15px; color: var(--text-tertiary); }

.sk-line { height: 4px; border-radius: var(--radius-full); background: var(--border-default); }
.sk-line--head { background: var(--text-disabled); }
.sk-block { border-radius: 5px; background: linear-gradient(135deg, var(--accent-muted), var(--accent-primary)); }
.sk-row { display: flex; gap: var(--space-1); align-items: center; min-height: 0; }
.sk-dot { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--accent-primary); flex: none; }
.sk-pill { height: 9px; width: 46%; border-radius: var(--radius-full); background: var(--surface-base); border: 1px solid var(--border-default); }

.gp-page {
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(var(--space-6), 7vw, var(--space-12)) clamp(var(--space-4), 4vw, var(--space-5));
  position: relative;
  z-index: 2;
  color: var(--text-primary);
  background-color: var(--surface-page);
  background-repeat: no-repeat;
}
.gp-page[data-style="certificate"] {
  background-image: radial-gradient(ellipse 120% 55% at 50% -8%, var(--accent-subtle), transparent 70%);
}
.gp-page[data-style="ascent"] {
  background-image:
    linear-gradient(to top, var(--accent-subtle), transparent 55%),
    radial-gradient(ellipse 90% 40% at 50% 108%, var(--accent-muted), transparent 72%);
}
@media (hover: hover) and (pointer: fine) {
  .gp-page[data-style="ascent"] { background-attachment: fixed; }
}
:root[data-device="phone"] .gp-page[data-style="ascent"] { background-attachment: scroll; }
.gp-page[data-style="poster"] {
  background-image:
    radial-gradient(ellipse 60% 42% at 88% -6%, var(--accent-subtle), transparent 70%),
    radial-gradient(var(--border-subtle) 1px, transparent 1px);
  background-size: auto, 22px 22px;
  background-repeat: no-repeat, repeat;
}

.gp-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.gp-confetti i {
  position: absolute;
  top: -4vh;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent-primary);
  opacity: 0;
  animation: gp-drop 3s var(--ease-out) both;
}
@keyframes gp-drop {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(96vh) rotate(340deg); }
}
.gp-confetti i:nth-child(3n) { background: var(--accent-muted); width: 10px; height: 10px; border-radius: var(--radius-full); }
.gp-confetti i:nth-child(4n) { background: var(--status-success); height: 10px; }
.gp-confetti i:nth-child(5n) { background: var(--accent-hover); width: 6px; }
.gp-confetti i:nth-child(1)  { left: 6%;  animation-delay: 0.15s; }
.gp-confetti i:nth-child(2)  { left: 14%; animation-delay: 0.65s; }
.gp-confetti i:nth-child(3)  { left: 22%; animation-delay: 0.3s; }
.gp-confetti i:nth-child(4)  { left: 31%; animation-delay: 0.85s; }
.gp-confetti i:nth-child(5)  { left: 39%; animation-delay: 0.1s; }
.gp-confetti i:nth-child(6)  { left: 47%; animation-delay: 0.55s; }
.gp-confetti i:nth-child(7)  { left: 55%; animation-delay: 0.25s; }
.gp-confetti i:nth-child(8)  { left: 63%; animation-delay: 0.75s; }
.gp-confetti i:nth-child(9)  { left: 71%; animation-delay: 0.4s; }
.gp-confetti i:nth-child(10) { left: 79%; animation-delay: 0.95s; }
.gp-confetti i:nth-child(11) { left: 87%; animation-delay: 0.2s; }
.gp-confetti i:nth-child(12) { left: 94%; animation-delay: 0.6s; }
.gp-confetti i:nth-child(13) { left: 10%; animation-delay: 1.1s; }
.gp-confetti i:nth-child(14) { left: 43%; animation-delay: 1.25s; }
.gp-confetti i:nth-child(15) { left: 68%; animation-delay: 1.05s; }
.gp-confetti i:nth-child(16) { left: 91%; animation-delay: 1.35s; }

.gp-coachmark { margin-top: var(--space-16); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.gp-coachmark__logo {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
  background: var(--text-primary);
  color: var(--surface-page);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gp-coachmark__name {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

@media (prefers-reduced-motion: reduce) {
  .gp-confetti i { animation: none; opacity: 0; }
}