.learning-page { background: #f7f7f5; }
.learning-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 5vw; background: rgba(247,247,245,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.learning-header nav { display: flex; align-items: center; gap: 2rem; font-size: .72rem; }
.header-action { padding: 11px 14px; border-radius: 7px; color: var(--dark); background: white; border: 1px solid var(--line); }
.resource-kicker { margin: 0 0 1.5rem; color: #85878a; font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

.learning-hero { position: relative; min-height: 710px; margin: 0 5vw 5vw; padding: clamp(4rem,8vw,9rem); overflow: hidden; color: white; background: #090909; border-radius: 22px; }
.learning-hero h1 { position: relative; z-index: 2; max-width: 1200px; margin: 0; font-size: clamp(4.4rem,8.2vw,9.6rem); font-weight: 600; letter-spacing: -.09em; line-height: .8; }
.learning-hero h1 span { display: block; color: #888b8e; }
.hero-bottom { position: absolute; right: clamp(2rem,7vw,8rem); bottom: clamp(3rem,6vw,6rem); left: clamp(2rem,7vw,8rem); z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 3rem; }
.hero-bottom p { max-width: 620px; margin: 0; color: rgba(255,255,255,.62); font-size: .9rem; line-height: 1.6; }
.hero-count { position: absolute; right: -2vw; bottom: -6vw; color: rgba(255,255,255,.035); font-size: 32vw; font-weight: 700; letter-spacing: -.15em; line-height: .7; }

.setup, .router, .guide-note { display: grid; grid-template-columns: .35fr 1.65fr; gap: 5vw; padding: clamp(6rem,10vw,10rem) 7vw; }
.side-label { font-size: .7rem; font-weight: 600; }
.setup { background: white; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.setup-content h2 { margin: 0; font-size: clamp(3.5rem,6vw,7rem); font-weight: 500; letter-spacing: -.08em; line-height: .9; }
.main-input { display: flex; flex-direction: column; gap: 1rem; max-width: 900px; margin-top: 3rem; padding: 20px; background: #f0f1f1; border: 1px solid #d7d8d8; }
.main-input span { font-size: .68rem; font-weight: 600; }
.main-input input { width: 100%; border: 0; outline: 0; background: transparent; font: 500 clamp(1.6rem,3vw,3rem) var(--font); letter-spacing: -.05em; }
.main-input input::placeholder { color: #afb1b2; }
.setup-content > p:last-child { max-width: 650px; margin: 1rem 0 0; color: #74777a; font-size: .72rem; line-height: 1.5; }

.router { padding-top: 0; }
.route-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.route-grid a { display: flex; flex-direction: column; min-height: 240px; padding: 18px; background: white; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: color 160ms ease, background 160ms ease; }
.route-grid a:hover { color: white; background: var(--dark); }
.route-grid span { font-size: .65rem; opacity: .5; }
.route-grid strong { margin-top: auto; font-size: 1.55rem; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.route-grid small { margin-top: 1rem; font-size: .66rem; opacity: .55; }

.guide-note { background: white; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guide-note ol { display: grid; grid-template-columns: repeat(4,1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.guide-note li { min-height: 180px; padding: 17px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guide-note li span { color: var(--muted); font-size: .65rem; }
.guide-note li p { margin: 5rem 0 0; font-size: .8rem; line-height: 1.45; }

.prompt-layout { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 5vw; padding: clamp(6rem,10vw,10rem) 7vw; }
.learning-progress { position: sticky; top: 105px; align-self: start; padding: 22px; background: white; border: 1px solid var(--line); }
.progress-value { font-size: 3.4rem; font-weight: 500; letter-spacing: -.075em; }
.progress-track { height: 3px; margin: 1rem 0; background: #dedfdf; }
.progress-track i { display: block; width: 0; height: 100%; background: var(--dark); transition: width 220ms ease; }
.learning-progress > p:not(.resource-kicker) { color: #74777a; font-size: .7rem; line-height: 1.5; }
.learning-progress nav { display: flex; flex-direction: column; margin-top: 1.5rem; border-top: 1px solid var(--line); }
.learning-progress nav a { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .7rem; }

.prompt-card { scroll-margin-top: 100px; padding-bottom: 8rem; }
.prompt-card + .prompt-card { padding-top: 8rem; border-top: 1px solid var(--line); }
.prompt-card > header { display: grid; grid-template-columns: .28fr 1.72fr; gap: 2rem; }
.prompt-card > header > span { color: var(--muted); font-size: .68rem; }
.prompt-card header p { margin: 0 0 .8rem; color: var(--muted); font-size: .7rem; }
.prompt-card h2 { margin: 0; font-size: clamp(3.2rem,5.8vw,6.6rem); font-weight: 500; letter-spacing: -.08em; line-height: .88; }
.prompt-content { margin: 3.5rem 0 0 28%; }
.description { max-width: 720px; margin: 0; font-size: 1.08rem; line-height: 1.55; }
.context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 2rem; background: var(--line); border: 1px solid var(--line); }
.context-grid div { padding: 16px; background: white; }
.context-grid span, .extra-input > span { color: var(--muted); font-size: .65rem; }
.context-grid p { margin: 2rem 0 0; font-size: .76rem; line-height: 1.5; }
.generated-prompt { margin-top: 1px; color: white; background: var(--dark); }
.prompt-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid rgba(255,255,255,.16); }
.prompt-head span { color: rgba(255,255,255,.45); font-size: .65rem; }
.prompt-head button { border: 0; padding: 8px 11px; border-radius: 6px; color: var(--dark); background: white; font: 500 .65rem var(--font); cursor: pointer; }
.prompt-head button.copied { background: #c8f4d5; }
.generated-prompt pre { margin: 0; padding: 22px; white-space: pre-wrap; color: rgba(255,255,255,.82); font: 400 .85rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.used { display: flex; align-items: center; gap: 10px; margin-top: 1rem; font-size: .72rem; cursor: pointer; }
.used input { width: 17px; height: 17px; accent-color: var(--dark); }
.extra-input { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; padding: 17px; background: white; border: 1px solid var(--line); }
.extra-input textarea, .extra-input input { width: 100%; border: 0; outline: 0; resize: vertical; background: transparent; font: 400 .82rem/1.55 var(--font); }
.extra-input.compact input { font-size: 1.2rem; }

.finish { margin: 0 5vw 5vw; padding: clamp(4rem,8vw,8rem); color: white; background: var(--dark); border-radius: 22px; }
.finish h2 { max-width: 1100px; margin: 0; font-size: clamp(3.8rem,7vw,8rem); font-weight: 500; letter-spacing: -.085em; line-height: .85; }
.finish > p:not(.resource-kicker) { max-width: 650px; margin: 2rem 0; color: rgba(255,255,255,.6); font-size: .9rem; line-height: 1.6; }
.learning-footer { display: flex; align-items: end; justify-content: space-between; padding: 3rem 5vw; border-top: 1px solid var(--line); }
.learning-footer p { margin: 0; color: var(--muted); font-size: .7rem; }

@media (max-width: 1000px) {
  .prompt-layout { grid-template-columns: 1fr; }
  .learning-progress { position: static; }
  .learning-progress nav { display: none; }
}

@media (max-width: 720px) {
  .learning-header { height: 68px; padding: 0 20px; }
  .learning-header nav > a:first-child { display: none; }
  .learning-hero { min-height: 660px; margin: 0 14px 3rem; padding: 4rem 22px; border-radius: 18px; }
  .learning-hero h1 { font-size: 4.1rem; }
  .hero-bottom { right: 22px; bottom: 3rem; left: 22px; align-items: flex-start; flex-direction: column; }
  .setup, .router, .guide-note { grid-template-columns: 1fr; gap: 2.5rem; padding: 5rem 20px; }
  .route-grid, .guide-note ol { grid-template-columns: 1fr; }
  .route-grid a { min-height: 180px; }
  .prompt-layout { padding: 5rem 20px; }
  .prompt-card > header { grid-template-columns: 1fr; }
  .prompt-card h2 { font-size: 3.6rem; }
  .prompt-content { margin-left: 0; }
  .context-grid { grid-template-columns: 1fr; }
  .finish { margin: 0 14px 3rem; padding: 4rem 22px; border-radius: 18px; }
  .finish h2 { font-size: 3.7rem; }
  .learning-footer { padding: 2.5rem 20px; }
}