:root {
  --paper: #f7f3e8;
  --paper-deep: #efe8d7;
  --surface: #fffdf8;
  --ink: #232925;
  --muted: #6f756f;
  --line: #d9d5ca;
  --green: #388a58;
  --green-dark: #276940;
  --green-soft: #dceedd;
  --sage: #a8c8aa;
  --peach: #efc4a6;
  --blue: #b8ced8;
  --lilac: #d3c4dc;
  --gold: #e4b95f;
  --danger: #b45555;
  --shadow: 0 14px 40px rgba(50, 56, 49, 0.08);
  --shadow-soft: 0 8px 24px rgba(50, 56, 49, 0.06);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 5%, rgba(168,200,170,.18), transparent 25%),
    linear-gradient(180deg, #faf7ef 0%, var(--paper) 35%, #f4efe3 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
}
button, input { font: inherit; }
a { color: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(56,138,88,.3); outline-offset: 2px; }

.shell { min-height: 100vh; }
.container { width: min(calc(100% - 36px), var(--max)); margin: 0 auto; }
.header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(250,247,239,.84);
  border-bottom: 1px solid rgba(217,213,202,.75);
}
.header-inner { height: 76px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 23px; text-decoration: none; letter-spacing: -.04em; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; }
.brand-mark svg { width: 100%; height: 100%; }
.nav { display: flex; gap: 8px; margin-left: 20px; }
.nav a { padding: 10px 13px; border-radius: 12px; text-decoration: none; color: var(--muted); font-weight: 650; font-size: 14px; }
.nav a:hover, .nav a.active { background: rgba(56,138,88,.1); color: var(--green-dark); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.btn { border: 0; border-radius: 13px; min-height: 44px; padding: 0 17px; font-weight: 750; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--green); color: white; box-shadow: 0 7px 16px rgba(56,138,88,.2); }
.btn-primary:hover { background: var(--green-dark); }
.btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-wide { min-width: 150px; }

main { padding-bottom: 100px; }
.hero { padding: 86px 0 64px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 62px; }
.eyebrow { color: var(--green-dark); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; font-size: 12px; }
h1 { font-size: clamp(48px, 7vw, 82px); line-height: .96; letter-spacing: -.065em; margin: 14px 0 22px; max-width: 760px; }
.hero p { font-size: 19px; line-height: 1.65; color: var(--muted); max-width: 590px; margin: 0 0 30px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note { display: flex; gap: 20px; margin-top: 32px; color: var(--muted); font-size: 13px; font-weight: 650; }
.hero-note span { display: flex; align-items: center; gap: 7px; }
.dot-check { width: 18px; height: 18px; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); display: inline-grid; place-items: center; font-size: 11px; }
.hero-art { min-height: 480px; position: relative; display: grid; place-items: center; }
.hero-art::before { content: ""; width: 380px; height: 380px; border-radius: 50%; background: rgba(168,200,170,.22); position: absolute; }
.paper-scene { width: min(100%, 500px); aspect-ratio: 1 / 1; position: relative; filter: drop-shadow(0 28px 35px rgba(65,70,62,.1)); }
.crane-big { position: absolute; inset: 12% 4% 2% 4%; }
.float-card { position: absolute; padding: 13px 16px; background: rgba(255,253,248,.94); border: 1px solid rgba(217,213,202,.85); border-radius: 16px; box-shadow: var(--shadow-soft); font-size: 13px; font-weight: 750; display: flex; gap: 9px; align-items: center; }
.float-card.one { top: 13%; left: 2%; transform: rotate(-3deg); }
.float-card.two { bottom: 12%; right: -2%; transform: rotate(3deg); }
.float-card .tiny-icon { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--green-soft); }

.section { padding: 72px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.section-head h2 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -.045em; margin: 7px 0 0; }
.section-head p { color: var(--muted); max-width: 500px; line-height: 1.6; margin: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.feature-card, .lesson-card, .stat-card, .achievement, .panel { background: rgba(255,253,248,.9); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.feature-card { border-radius: var(--radius-lg); padding: 26px; }
.feature-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 22px; font-size: 23px; }
.feature-card:nth-child(1) .feature-icon { background: var(--green-soft); }
.feature-card:nth-child(2) .feature-icon { background: #f7e6d7; }
.feature-card:nth-child(3) .feature-icon { background: #e5ebf0; }
.feature-card h3 { margin: 0 0 9px; font-size: 19px; }
.feature-card p { color: var(--muted); line-height: 1.6; margin: 0; }

.lesson-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 17px; }
.lesson-card { border-radius: 20px; overflow: hidden; transition: .2s ease; position: relative; }
.lesson-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.lesson-visual { height: 158px; display: grid; place-items: center; overflow: hidden; position: relative; }
.lesson-visual svg { width: 128px; max-height: 120px; filter: drop-shadow(0 10px 15px rgba(40,45,40,.13)); }
.lesson-card-body { padding: 17px; }
.lesson-card h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.02em; }
.lesson-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--muted); font-size: 12px; font-weight: 700; }
.lesson-meta .pill { padding: 5px 8px; border-radius: 999px; background: #f0ede4; }
.lesson-card a { position: absolute; inset: 0; z-index: 3; }

.how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; counter-reset: step; }
.how-item { padding-top: 18px; border-top: 1px solid var(--line); }
.how-number { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: 13px; font-weight: 800; margin-bottom: 18px; }
.how-item h3 { margin: 0 0 8px; font-size: 20px; }
.how-item p { color: var(--muted); line-height: 1.6; margin: 0; }

.page-head { padding: 56px 0 24px; }
.page-head h1 { font-size: clamp(42px,6vw,68px); margin: 8px 0 14px; }
.page-head p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 650px; }
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 26px 0 32px; }
.stat-card { padding: 18px; border-radius: 16px; }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.stat-value { font-size: 29px; font-weight: 820; letter-spacing: -.04em; margin-top: 6px; }
.stat-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

.path-wrap { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 28px; align-items: start; }
.path { max-width: 700px; margin: 0 auto; padding: 18px 0 60px; }
.level-block { margin-bottom: 62px; }
.level-heading { background: var(--ink); color: white; border-radius: 18px; padding: 19px 22px; margin-bottom: 26px; box-shadow: var(--shadow-soft); }
.level-heading small { opacity: .65; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.level-heading h2 { margin: 5px 0 0; font-size: 24px; }
.path-node { display: flex; align-items: center; gap: 16px; width: min(100%, 520px); margin: 18px auto; position: relative; }
.path-node:nth-child(even) { transform: translateX(55px); }
.path-node:nth-child(odd) { transform: translateX(-25px); }
.node-circle { flex: 0 0 82px; width: 82px; height: 82px; border-radius: 28px; background: var(--green); color: white; display: grid; place-items: center; box-shadow: 0 9px 0 #276940, 0 16px 24px rgba(56,138,88,.18); border: 0; transition: .18s ease; }
.node-circle:hover { transform: translateY(-2px); box-shadow: 0 11px 0 #276940, 0 18px 28px rgba(56,138,88,.2); }
.node-circle svg { width: 42px; height: 42px; }
.path-node.locked .node-circle { background: #d8d5cd; color: #8d908d; box-shadow: 0 7px 0 #bbb8b0; }
.node-copy { background: rgba(255,253,248,.84); border: 1px solid var(--line); padding: 13px 16px; border-radius: 14px; min-width: 210px; }
.node-copy strong { display: block; margin-bottom: 4px; }
.node-copy span { color: var(--muted); font-size: 12px; font-weight: 650; }
.path-line { width: 3px; height: 28px; margin: -4px auto; background: repeating-linear-gradient(to bottom,#cfcac0 0 5px,transparent 5px 10px); }
.side-card { position: sticky; top: 102px; padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.side-card h3 { margin: 0 0 6px; }
.side-card p { color: var(--muted); line-height: 1.55; font-size: 14px; }
.daily-progress { height: 10px; background: #ece8de; border-radius: 99px; overflow: hidden; margin: 16px 0 8px; }
.daily-progress > div { height: 100%; width: 66%; background: var(--green); border-radius: inherit; }

.explore-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 22px 0 28px; }
.search-wrap { flex: 1 1 300px; position: relative; }
.search-wrap input { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 14px; padding: 0 16px 0 43px; background: var(--surface); color: var(--ink); }
.search-wrap span { position: absolute; left: 16px; top: 14px; color: var(--muted); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.chip { border: 1px solid var(--line); color: var(--muted); background: rgba(255,253,248,.75); border-radius: 999px; padding: 9px 13px; font-weight: 720; font-size: 13px; }
.chip.active, .chip:hover { background: var(--ink); color: white; border-color: var(--ink); }
.empty-state { padding: 50px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 20px; }

.progress-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 22px; }
.panel { border-radius: 20px; padding: 23px; }
.panel h2, .panel h3 { margin-top: 0; }
.week-strip { display: grid; grid-template-columns: repeat(7,1fr); gap: 10px; margin-top: 22px; }
.day { text-align: center; }
.day-bar { height: 120px; border-radius: 12px; background: #eeeae0; display: flex; align-items: end; overflow: hidden; }
.day-bar span { width: 100%; background: var(--green); border-radius: 10px 10px 0 0; min-height: 4px; }
.day small { display: block; color: var(--muted); margin-top: 8px; font-weight: 700; }
.achievement-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.achievement { padding: 16px; border-radius: 16px; box-shadow: none; }
.achievement.locked { opacity: .48; filter: grayscale(.45); }
.badge-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 19px; background: var(--green-soft); margin-bottom: 12px; }
.achievement strong { font-size: 14px; display:block; margin-bottom: 4px; }
.achievement span { color: var(--muted); font-size: 12px; line-height: 1.4; display: block; }
.continue-card { margin-top: 16px; display:flex; align-items:center; gap:16px; padding:15px; border:1px solid var(--line); border-radius:16px; background:#fbf8f0; }
.continue-thumb { width: 80px; height: 66px; border-radius: 13px; display:grid; place-items:center; background:var(--green-soft); }
.continue-thumb svg { width: 58px; }
.continue-copy { flex:1; }
.continue-copy strong { display:block; }
.continue-copy span { color:var(--muted); font-size:12px; }

.lesson-page { min-height: calc(100vh - 76px); display: flex; flex-direction: column; }
.lesson-top { padding: 22px 0; border-bottom: 1px solid var(--line); }
.lesson-top-inner { display:flex; align-items:center; gap:15px; }
.close-lesson { width:42px; height:42px; border-radius:13px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; font-size:20px; }
.lesson-progress-track { flex:1; height:11px; border-radius:99px; background:#e5e1d8; overflow:hidden; }
.lesson-progress-track div { height:100%; background:var(--green); border-radius:inherit; transition:width .3s ease; }
.step-label { color:var(--muted); font-weight:750; font-size:13px; min-width:82px; text-align:right; }
.lesson-stage { flex:1; padding: 36px 0 30px; }
.lesson-layout { width:min(calc(100% - 36px),940px); margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:45px; align-items:center; min-height:570px; }
.diagram-card { min-height:470px; border:1px solid var(--line); background:radial-gradient(circle at top,#fffefb,#f1ede3); border-radius:32px; display:grid; place-items:center; padding:34px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.diagram-card::after { content:""; position:absolute; inset:0; opacity:.32; pointer-events:none; background-image:linear-gradient(45deg, transparent 48%, rgba(100,100,90,.03) 49%, rgba(100,100,90,.03) 51%, transparent 52%); background-size:18px 18px; }
.diagram-wrap { width:min(100%,400px); position:relative; z-index:2; }
.diagram-wrap svg { width:100%; height:auto; overflow:visible; filter:drop-shadow(0 15px 18px rgba(53,58,53,.12)); }
.fold-guide-note { position:absolute; bottom:18px; left:18px; z-index:4; padding:8px 11px; border-radius:10px; background:rgba(35,41,37,.86); color:white; font-size:12px; font-weight:700; }
.instruction-card { padding:10px 0; }
.instruction-card .eyebrow { margin-bottom:12px; }
.instruction-card h1 { font-size:42px; line-height:1.05; margin:0 0 17px; letter-spacing:-.045em; }
.instruction-card > p { color:var(--muted); font-size:17px; line-height:1.65; }
.tip { display:flex; gap:11px; align-items:flex-start; background:#edf4e9; padding:14px; border-radius:14px; margin:23px 0; color:#41604a; font-size:13px; line-height:1.5; }
.lesson-controls { display:flex; gap:10px; flex-wrap:wrap; margin-top:27px; }
.guide-toggle { border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:10px 13px; font-weight:700; color:var(--muted); }
.guide-toggle.active { color:var(--green-dark); background:var(--green-soft); border-color:#b7d4ba; }
.lesson-bottom { border-top:1px solid var(--line); padding:18px 0; background:rgba(250,247,239,.9); }
.lesson-bottom-inner { width:min(calc(100% - 36px),940px); margin:0 auto; display:flex; justify-content:space-between; gap:12px; }
.complete-card { width:min(calc(100% - 36px),720px); margin:50px auto; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:50px 30px; box-shadow:var(--shadow); }
.complete-origami { width:170px; margin:0 auto 20px; }
.complete-card h1 { font-size:46px; margin:10px 0 12px; }
.complete-card p { color:var(--muted); line-height:1.6; }
.xp-burst { display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border-radius:999px; background:#fff4cf; color:#755815; font-weight:800; margin:14px 0 25px; }

.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(29,34,30,.36); display:grid; place-items:center; padding:20px; }
.modal { width:min(100%,440px); background:var(--surface); border-radius:24px; border:1px solid var(--line); box-shadow:0 30px 80px rgba(30,35,31,.25); padding:28px; }
.modal h2 { margin:0 0 8px; font-size:27px; }
.modal p { color:var(--muted); line-height:1.6; }
.modal-actions { display:flex; justify-content:flex-end; margin-top:22px; }

.mobile-nav { display:none; position:fixed; left:12px; right:12px; bottom:12px; z-index:60; border:1px solid var(--line); background:rgba(255,253,248,.94); box-shadow:0 15px 35px rgba(34,40,35,.15); border-radius:18px; padding:7px; backdrop-filter:blur(14px); }
.mobile-nav a { flex:1; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 5px; border-radius:12px; color:var(--muted); font-size:10px; font-weight:700; }
.mobile-nav a.active { color:var(--green-dark); background:var(--green-soft); }
.mobile-nav .mi { font-size:18px; line-height:1; }

.toast { position:fixed; right:20px; bottom:20px; z-index:120; background:var(--ink); color:white; padding:13px 16px; border-radius:13px; box-shadow:var(--shadow); font-size:13px; font-weight:700; animation:toastin .25s ease both; }
@keyframes toastin { from { opacity:0; transform:translateY(8px); } }
@keyframes floaty { 0%,100%{ transform:translateY(0) rotate(-1deg);} 50%{ transform:translateY(-9px) rotate(1deg);} }
.crane-big { animation:floaty 5.4s ease-in-out infinite; }

@media (max-width: 900px) {
  .nav { display:none; }
  .header-actions .btn-ghost { display:none; }
  .hero { grid-template-columns:1fr; padding-top:58px; gap:24px; }
  .hero-art { min-height:390px; }
  .feature-grid { grid-template-columns:1fr; }
  .lesson-grid { grid-template-columns:repeat(2,1fr); }
  .path-wrap { grid-template-columns:1fr; }
  .side-card { display:none; }
  .progress-layout { grid-template-columns:1fr; }
  .lesson-layout { grid-template-columns:1fr; min-height:0; gap:28px; }
  .diagram-card { min-height:390px; }
}

@media (max-width: 640px) {
  .container { width:min(calc(100% - 28px),var(--max)); }
  .header-inner { height:64px; }
  .brand { font-size:21px; }
  .brand-mark { width:31px; height:31px; }
  .header-actions .btn-primary { display:none; }
  main { padding-bottom:92px; }
  .mobile-nav { display:flex; }
  .hero { padding:45px 0 40px; }
  h1 { font-size:49px; }
  .hero p { font-size:17px; }
  .hero-note { flex-direction:column; gap:8px; }
  .hero-art { min-height:335px; }
  .paper-scene { width:340px; }
  .float-card.one { left:-3%; }
  .float-card.two { right:0; }
  .section { padding:48px 0; }
  .section-head { display:block; }
  .section-head p { margin-top:10px; }
  .lesson-grid { grid-template-columns:1fr; }
  .lesson-visual { height:170px; }
  .how-grid { grid-template-columns:1fr; }
  .page-head { padding-top:36px; }
  .page-head h1 { font-size:46px; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .path-node, .path-node:nth-child(even), .path-node:nth-child(odd) { transform:none; width:100%; }
  .node-circle { flex-basis:68px; width:68px; height:68px; border-radius:23px; }
  .node-copy { min-width:0; flex:1; }
  .achievement-grid { grid-template-columns:1fr; }
  .week-strip { gap:6px; }
  .day-bar { height:88px; }
  .lesson-top { padding:14px 0; }
  .lesson-top-inner { gap:10px; }
  .step-label { display:none; }
  .lesson-stage { padding-top:18px; }
  .lesson-layout { width:min(calc(100% - 28px),940px); }
  .diagram-card { min-height:340px; border-radius:24px; padding:20px; }
  .instruction-card h1 { font-size:32px; }
  .instruction-card > p { font-size:15px; }
  .lesson-bottom-inner { width:min(calc(100% - 28px),940px); }
  .lesson-bottom .btn { flex:1; }
  .complete-card { margin:22px auto; padding:38px 22px; }
  .complete-card h1 { font-size:37px; }
  .toast { bottom:88px; left:16px; right:16px; text-align:center; }
}