/* JD-271 · Roger's field journal: warm paper, sunlit milestones, forest ink. */
.mission-hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:26px;padding:38px 36px;margin:22px 0 24px;border:1px solid #ead8ae;border-radius:32px;background:radial-gradient(ellipse at 80% 18%,#fff6d5,transparent 65%),#f4e9ce;overflow:hidden;position:relative}
.mission-hero-copy{min-width:0;z-index:1}.mission-hero h1{font:800 clamp(36px,4.8vw,59px)/1.1 Manrope,sans-serif;letter-spacing:-2.8px;margin:16px 0 18px}.mission-hero h1 em{font-style:normal;color:#367362}.mission-hero p{font-size:14px;color:#675e4e;line-height:1.8}.mission-hero-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}.mission-hero-tags span{font-size:11px;font-weight:700;padding:8px 12px;border:1px solid #e7d8b7;border-radius:20px;background:#fffaf0}
.mission-roger-hero{position:relative;width:100%;max-width:330px;min-width:0;justify-self:end;isolation:isolate}.mission-roger-hero:before{content:'';position:absolute;inset:7% -5%;border:1px dashed #d9b761;border-radius:50%;transform:rotate(-17deg);z-index:-1}.mission-roger-hero img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:48% 48% 38% 38%;mix-blend-mode:multiply}.mission-bubble{position:absolute;bottom:3%;left:0;transform:rotate(-5deg);border:1px solid #dfcba2;border-radius:22px 22px 22px 5px;background:#fffdf2;padding:12px 17px;font-size:12px;font-weight:800;box-shadow:0 5px 0 #dfcfb0}
.mission-next{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 28px;border:1px solid #afc6ae;border-left:5px solid #40846e;border-radius:24px;background:#eff4e9;box-shadow:0 4px 0 #d9e2cc}.mission-next>div{min-width:0}.mission-next .roger-kicker{color:#39614c}.mission-next h2{font:800 24px/1.25 Manrope,sans-serif;letter-spacing:-.8px;margin:8px 0}.mission-next p{font-size:13px;color:#616651}.mission-next .primary{flex-shrink:0}
.mission-route-tools{max-width:710px;margin:34px auto 22px}.mission-route-status{display:flex;justify-content:space-between;gap:14px;font-size:12px;color:#746b59}.mission-route-status b{font-weight:800;color:#385c49}.mission-course-progress{display:block;width:100%;height:7px;margin:12px 0 19px;border:0;border-radius:10px;overflow:hidden;background:#e9e1d2;accent-color:#41846e;appearance:none}.mission-course-progress::-webkit-progress-bar{background:#e9e1d2}.mission-course-progress::-webkit-progress-value{background:#41846e;border-radius:10px}.mission-course-progress::-moz-progress-bar{background:#41846e;border-radius:10px}.mission-route-toolbar{display:flex;align-items:end;gap:10px}.mission-jump-label{display:grid;gap:7px;flex:1;min-width:0;font-size:11px;color:#6b6658}.mission-jump-label select{min-height:46px;min-width:0;width:100%;padding:10px 32px 10px 12px;border:1px solid #d7cbb6;border-radius:14px;background:#fffcf4;color:#3b3a2c;font:inherit;font-size:13px}.mission-route-toolbar .secondary{min-height:46px;padding:11px;font-size:12px;white-space:nowrap}.mission-sound{display:grid;place-items:center;min-height:44px;width:44px;min-width:44px;border-radius:50%;background:#eee7d9;font-size:22px;border:1px solid #d9cdb7;flex-shrink:0}.mission-sound[aria-pressed=false]{color:#756d5a;background:#f6f1e7}.mission-route{max-width:710px;margin:20px auto 30px}
.mission-block{--trail:#c9d9bb;--block-bg:#eaf0df;margin:14px 0;scroll-margin-top:calc(22px + var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px))}.mission-block.tone-1{--trail:#e5d2a1;--block-bg:#fbefce}.mission-block.tone-2{--trail:#c9dce0;--block-bg:#e9f0ee}.mission-block-title{list-style:none;position:relative;display:flex;align-items:center;gap:17px;padding:21px 23px;min-height:106px;background:var(--block-bg);border:1px solid var(--trail);border-radius:24px;cursor:pointer;transition:background .2s,box-shadow .2s}.mission-block-title::-webkit-details-marker{display:none}.mission-block-title:hover{box-shadow:0 3px 0 var(--trail)}.mission-block-title:focus-visible{outline:3px solid #43826f;outline-offset:4px}.mission-block[open] .mission-block-title{box-shadow:0 4px 0 var(--trail)}.mission-block.is-current .mission-block-title{border-color:#a3bb8e}.mission-block-number{font:800 30px/1 Manrope,sans-serif;color:#637650;opacity:.8;min-width:44px;font-variant-numeric:tabular-nums}.tone-1 .mission-block-number{color:#97752b}.tone-2 .mission-block-number{color:#4e7778}.mission-block-copy{flex:1;min-width:0}.mission-block-copy .roger-kicker{font-size:9px;letter-spacing:1.3px}.mission-block-name{display:block;font:800 21px/1.28 Manrope,sans-serif;letter-spacing:-.6px;margin:6px 0}.mission-block-subtitle{font-size:12px;line-height:1.5;color:#6a695a;display:block}.mission-block-status{display:grid;gap:3px;text-align:center;min-width:42px;font-size:9px;color:#6c705c}.mission-block-status b{font-size:14px;font-variant-numeric:tabular-nums;color:#526147}.mission-chevron{display:block;font-size:22px;line-height:14px;transition:transform .2s;margin-top:5px}.mission-block[open] .mission-chevron{transform:rotate(180deg)}.mission-block-content{padding:14px 0 22px;animation:mission-reveal .25s ease-out}
.mission-nodes{list-style:none;padding:20px 0 0;margin:0;position:relative}.mission-nodes:before{content:'';position:absolute;width:94px;top:0;bottom:26px;left:calc(50% - 50px);border:7px dashed var(--trail);border-left:0;border-radius:0 100% 70% 0;transform:rotate(-8deg);opacity:.8}.mission-node-row{position:relative;display:flex;flex-direction:column;align-items:center;margin:24px auto;width:230px;min-height:167px}.mission-node-row.bend-0{transform:translateX(-48px)}.mission-node-row.bend-1{transform:translateX(49px)}.mission-node-row.bend-2{transform:translateX(-12px)}.mission-node{position:relative;display:grid;place-items:center;width:84px;height:76px;border-radius:50%;background:#e9e3d7;border:3px solid #fffaf0;box-shadow:0 8px 0 #c8c0af,0 11px 0 #fff8ed;transition:transform .18s,box-shadow .18s}.mission-node .icon{width:31px;height:31px;stroke-width:2.4}.mission-node.current{background:#ffda68;color:#352e20;box-shadow:0 8px 0 #d1a434,0 0 0 8px #ffedb1;animation:mission-pulse 3s ease-in-out infinite}.mission-node.done{background:#438270;color:#fff;box-shadow:0 8px 0 #2c5f51}.mission-node.locked{color:#8a8375;cursor:help}.mission-node:hover:not(:disabled){transform:translateY(-2px)}.mission-node:active:not(:disabled){transform:translateY(4px)}.mission-node-tag{position:absolute;top:-25px;font-size:9px;letter-spacing:1px;white-space:nowrap;background:#fffdf4;border:1px solid #ddc787;border-radius:10px;padding:5px 8px;font-weight:800}.mission-node-caption{margin-top:18px;text-align:center;position:relative;background:#fff8ed;border-radius:14px;padding:5px 12px;max-width:230px}.mission-node-caption small{font-size:8px;letter-spacing:1.3px;color:#8b7e65}.mission-node-caption b{display:block;font-size:14px;line-height:1.4;margin-top:3px}.mission-node-caption>span{font-size:11px;color:#786f5c;display:block;margin-top:5px}.mission-companion{display:flex;align-items:center;gap:13px;max-width:340px;margin:5px auto 0;padding:14px 17px;background:#fff3d6;border:1px solid #e8d7ae;border-radius:24px}.mission-companion img{width:64px;height:64px;object-fit:cover;border-radius:50%;flex-shrink:0}.mission-companion p{font-size:12px;color:#6e634a;line-height:1.7}.mission-bottom{padding:30px;background:#f1eadd;border:1px solid #e3d9c6;border-radius:25px;text-align:center;max-width:710px;margin:28px auto}.mission-bottom h2{font:800 25px/1.25 Manrope,sans-serif;letter-spacing:-1px;margin-top:10px}.mission-bottom p{font-size:13px;margin:12px auto 18px;color:#746d5d;max-width:430px}.mission-bottom .page-actions{justify-content:center;flex-wrap:wrap;margin-bottom:0}
.mission-loading,.mission-empty,.mission-welcome,.mission-finish{max-width:540px;text-align:center;margin:24px auto 0}.mission-loading img,.mission-empty img{width:120px;aspect-ratio:1;object-fit:cover;border-radius:50%;margin:25px}.mission-empty h1{font:800 30px/1.2 Manrope,sans-serif;letter-spacing:-1px}.mission-empty p{margin-top:15px;font-size:14px;color:#736c5d}.mission-welcome>img{width:176px;height:176px;object-fit:cover;border-radius:50%;margin:10px auto 25px;display:block;border:5px solid #fff1ca;box-shadow:0 7px 0 #ece0c4}.mission-welcome h1,.mission-finish h1{font:800 36px/1.12 Manrope,sans-serif;letter-spacing:-1.5px;margin:16px 0}.mission-welcome p{font-size:14px;color:#746b58;margin:18px 0}.mission-welcome-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:22px 0}.mission-welcome-meta span{padding:9px 13px;background:#eee8d8;border:1px solid #e1d8c1;border-radius:13px;font-size:12px}.mission-welcome .mission-welcome-tip{font-size:12px;max-width:380px;margin:22px auto}.mission-practice{max-width:570px;margin:0 auto}.mission-practice-top{position:sticky;top:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px));z-index:11;display:flex;gap:14px;align-items:center;padding:15px 0 18px;margin:0 0 24px;background:#fff8edf5;backdrop-filter:blur(12px);border-bottom:1px solid #e9dfca}.mission-practice-top .icon-only{width:44px;min-width:44px;min-height:44px;display:grid;place-items:center;color:#736b58;border-radius:50%;background:#f0e9dc}.mission-progress-copy{flex:1;min-width:0}.mission-progress-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#80745e;margin-bottom:7px}.mission-progress-meta b{font-variant-numeric:tabular-nums;font-size:11px;color:#546e4e}.mission-progress-track{height:13px;overflow:hidden;border-radius:20px;background:#e8dfcc;box-shadow:inset 0 2px 0 #d9cfbb}.mission-progress-fill{display:block;height:100%;width:0;border-radius:20px;background:linear-gradient(90deg,#347a62,#74b277);box-shadow:inset 0 3px 0 #a3d2a74d;transition:width .45s cubic-bezier(.22,1,.36,1)}.mission-progress-percent{min-width:34px;font-size:12px;font-weight:800;color:#426a50;font-variant-numeric:tabular-nums}.mission-stage-heading{text-align:center;margin:23px 0}.mission-stage-heading .roger-kicker{font-size:10px}.mission-stage-heading h1{font:800 27px/1.2 Manrope,sans-serif;letter-spacing:-.9px;margin:12px 0 9px}.mission-stage-heading p{font-size:13px;color:#756a54}.mission-stage-heading h1:focus,.mission-welcome h1:focus,.mission-finish h1:focus{outline:none}
.mission-exercise{background:#fffefa;border:1px solid #dfd1b8;border-radius:28px;padding:24px;box-shadow:0 6px 0 #e9dcc5;text-align:center;margin-bottom:25px}.mission-mini-roger{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:23px}.mission-mini-roger img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid #fff0c7}.mission-mini-roger>span{font-size:12px;color:#74684d;background:#fff1cf;border-radius:16px 16px 16px 0;padding:10px 14px}.mission-context{font-size:14px;color:#716950;margin:8px 0 12px}.mission-prompt{font:700 29px/1.45 Manrope,sans-serif;letter-spacing:-.6px;overflow-wrap:anywhere;margin:12px 0 18px}.mission-prompt[lang=th]{letter-spacing:0}.mission-cloze{color:#366b57;padding:15px;border:1px dashed #c7d4b6;border-radius:17px;background:#f2f5e9}.mission-hint{font-size:12px;color:#817563;margin-bottom:15px}.mission-listen{display:flex;align-items:center;justify-content:center;gap:12px;background:#43836d;color:#fff;border-radius:24px;padding:24px;font-size:17px;font-weight:800;margin:10px auto 25px;box-shadow:0 5px 0 #2e5f4c}.mission-listen .icon{width:30px;height:30px}.mission-options{display:grid;gap:11px;margin-top:23px}.mission-option{display:flex;align-items:center;gap:12px;min-height:58px;text-align:left;padding:13px;border:2px solid #e4dccb;border-radius:17px;background:#fffdf6;font-size:14px;font-weight:650;box-shadow:0 3px 0 #ebe4d6;line-height:1.5}.mission-option:hover:not(:disabled){background:#fff5d8;border-color:#d6bc73}.mission-option:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #ebe4d6}.mission-option-number{display:grid;place-items:center;border:1px solid #d9cfbb;border-radius:9px;width:28px;height:29px;flex-shrink:0;font-size:12px;color:#7f7157}.mission-option-text{min-width:0;overflow-wrap:anywhere}.mission-option.right{background:#e3f1dd;border-color:#76a967;opacity:1}.mission-option.right .mission-option-number{color:#fff;background:#54814c;border-color:#54814c}.mission-option.wrong{background:#fff0df;border-color:#ce986c;opacity:1}.mission-option.wrong .mission-option-number{color:#8c5b33;border-color:#cda77e}.mission-option:disabled{cursor:default}.mission-feedback{padding:18px;text-align:left;border-radius:19px;margin-top:22px;animation:mission-reveal .25s ease-out}.mission-feedback.good{background:#edf5e6;border:1px solid #cfdfbf}.mission-feedback.retry{background:#fff1df;border:1px solid #ead1ad}.mission-feedback strong{font-size:14px;line-height:1.5;display:block}.mission-feedback p{font-size:13px;margin-top:8px;color:#706349;overflow-wrap:anywhere}.mission-feedback-tools{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px}.mission-feedback .ghost{font-size:12px;color:#536145}.mission-error{color:#963e2c;font-size:13px;line-height:1.6;margin-top:20px;padding:13px;background:#fff0df;border-radius:13px}.mission-audio-settings{display:flex;gap:18px;align-items:end}.mission-audio-settings .speech-speed{flex:1;min-width:0}.mission-audio-settings>p{font-size:11px;line-height:1.6;color:#81745e;flex:0 0 auto;padding-bottom:5px}.mission-save-note{font-size:11px;color:#837861;text-align:center;margin:22px 0 10px}#mission-write-form{text-align:left;display:grid;gap:13px;margin-top:23px}#mission-write-form label{font-size:12px;color:#72664f}#mission-answer{width:100%;min-width:0;min-height:58px;border:2px solid #dcd1bb;border-radius:16px;padding:13px 15px;font-size:18px;background:#fffdf4;color:#29271f}#mission-answer:focus{border-color:#44846b}
.mission-finish{margin-top:10px}.mission-finish-halo{position:relative;width:220px;margin:20px auto 26px;background:#fff0b5;border-radius:50%;box-shadow:0 0 0 12px #fff1c34d;animation:mission-celebrate .5s ease-out}.mission-finish-halo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;mix-blend-mode:multiply}.mission-finish-halo>span{position:absolute;font-size:32px;color:#ca9928;animation:mission-float 2s ease-in-out infinite}.mission-finish-halo>span:nth-child(2){top:5%;left:-5%}.mission-finish-halo>span:nth-child(3){top:12%;right:-8%;animation-delay:.5s}.mission-finish-halo>span:nth-child(4){bottom:3%;right:0;animation-delay:1s}.mission-finish>p{color:#7c7057;font-size:13px}.mission-result{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:1px solid #dfd6bf;border-radius:22px;background:#fffdf5;margin:24px 0;padding:20px 14px;box-shadow:0 4px 0 #e9dfc9}.mission-result>div{display:grid;gap:5px}.mission-result strong{font-size:30px;font-weight:800;color:#3c7b67}.mission-result span{font-size:12px;color:#75694f}.mission-result>div+div{border-left:1px solid #e6ddc9}.mission-finish>.roger-note{margin-bottom:24px}.mission-effects-settings{border:1px solid #e1d3ba;border-radius:24px;padding:22px;background:#fff7e3;margin:24px 0}.mission-effects-settings h2{font-size:26px;margin-bottom:15px}.mission-effects-settings label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px}.mission-effects-settings p{font-size:12px;color:#807660;margin-top:10px}.mission-effects-settings input{width:22px;height:22px;accent-color:#40806b}
@keyframes mission-pulse{50%{box-shadow:0 8px 0 #d1a434,0 0 0 12px #ffedb170}}@keyframes mission-float{50%{transform:translateY(-7px) rotate(10deg)}}@keyframes mission-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes mission-celebrate{from{opacity:.5;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@media(max-width:600px){.mission-hero{padding:26px 22px;gap:8px;border-radius:26px;margin:18px 0}.mission-hero h1{font-size:32px;letter-spacing:-1.6px;margin:12px 0}.mission-hero p{font-size:12px;line-height:1.7}.mission-hero p br{display:none}.mission-hero .roger-kicker{font-size:8px;letter-spacing:1px}.mission-hero-tags{margin-top:16px;gap:5px}.mission-hero-tags span{font-size:9px;padding:7px 9px}.mission-hero-tags span:last-child{display:none}.mission-bubble{font-size:9px;padding:9px;bottom:-5%;left:-2%}.mission-next{padding:21px;display:block}.mission-next h2{font-size:23px}.mission-next p{font-size:12px}.mission-next .primary{width:100%;margin-top:18px}.mission-route-tools{margin-top:28px}.mission-route-toolbar{flex-wrap:wrap}.mission-jump-label{flex-basis:100%}.mission-route-toolbar>.secondary{flex:1}.mission-route-status{font-size:11px}.mission-block-title{padding:18px 15px;gap:12px;border-radius:21px}.mission-block-name{font-size:18px}.mission-block-subtitle{font-size:11px}.mission-block-copy .roger-kicker{font-size:8px;letter-spacing:1px}.mission-block-number{font-size:26px;min-width:33px}.mission-block-status{min-width:35px}.mission-node-row{width:200px}.mission-node-row.bend-0{transform:translateX(-31px)}.mission-node-row.bend-1{transform:translateX(31px)}.mission-node-row.bend-2{transform:translateX(-8px)}.mission-exercise{padding:20px 16px;border-radius:24px}.mission-prompt{font-size:25px}.mission-practice-top{gap:9px;padding:12px 0 15px;margin-bottom:20px}.mission-practice-top .mission-sound{width:40px;min-width:40px}.mission-stage-heading{margin:20px 0}.mission-stage-heading h1{font-size:25px}.mission-stage-heading p{font-size:12px}.mission-welcome h1,.mission-finish h1{font-size:30px}.mission-welcome>img{width:150px;height:150px}.mission-welcome p{font-size:13px}.mission-companion{max-width:300px}.mission-bottom{padding:24px 18px}.mission-bottom h2{font-size:23px}.mission-finish-halo{width:190px}.habit-summary{padding:14px 16px;margin-bottom:14px;gap:10px}.habit-summary strong{font-size:27px}.habit-summary p{font-size:11px;margin:5px 0 0}.habit-summary .secondary{font-size:11px;padding:10px}.mission-audio-settings{gap:12px}.mission-audio-settings>p{font-size:10px}}
@media(max-width:370px){.mission-hero{grid-template-columns:1.4fr .6fr;padding:23px 17px}.mission-hero h1{font-size:28px}.mission-hero p{font-size:11px}.mission-bubble{font-size:8px;left:-9%;padding:8px}.mission-block-title{gap:9px;padding:17px 12px}.mission-block-name{font-size:17px}.mission-block-subtitle{font-size:10px}.mission-progress-meta{font-size:9px}.mission-practice-top{gap:7px}.mission-progress-percent{min-width:29px;font-size:11px}.mission-practice-top .icon-only{min-width:40px;width:40px}.mission-exercise{padding:18px 13px}.mission-stage-heading h1{font-size:23px}.mission-audio-settings{display:block}.mission-audio-settings>p{margin-top:9px}.mission-audio-settings>p br{display:none}.mission-feedback{padding:15px}.mission-feedback-tools{gap:8px}}
@media(prefers-reduced-motion:reduce){.mission-node.current,.mission-finish-halo,.mission-finish-halo>span,.mission-block-content,.mission-feedback{animation:none}.mission-node,.mission-progress-fill,.mission-block-title,.mission-chevron{transition:none}}