/* Course redesign v2 — Story / Studio / Pulse / Trail */
.course-v2 { --course-accent: var(--matcha); background: var(--bg-content); }
.course-v2--studio { --course-accent: #6857a6; }
.course-v2--pulse { --course-accent: #c05a10; }
.course-v2--trail { --course-accent: #486b70; }
.course-v2 .course-v2-content { background: var(--bg-content); padding: 14px 16px 98px; }
.course-v2-head { height: 48px; display: grid; grid-template-columns: 90px 1fr 52px; align-items: center; padding: 0 14px; background: var(--washi-50); border-bottom: 1px solid var(--border-1); flex-shrink: 0; }
.course-v2-back { display: flex; align-items: center; gap: 2px; border: 0; background: none; color: var(--fg-3); padding: 0; font-size: 12px; cursor: pointer; }
.course-v2-head-title { text-align: center; font-size: 14px; font-weight: 700; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-v2-head-progress { text-align: right; font-size: 10px; letter-spacing: .08em; color: var(--course-accent); font-weight: 800; }
.course-v2-footer { position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; padding: 10px 16px 20px; background: linear-gradient(180deg, rgba(245,244,240,0), var(--washi-50) 25%); }
.course-v2-footer .zen-btn { min-height: 46px; }

/* Story */
.story-rail { display: flex; align-items: flex-start; justify-content: center; margin: 0 3px 18px; }
.story-rail-node { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--take); background: #fff; color: var(--fg-4); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; position: relative; flex-shrink: 0; }
.story-rail-node small { position: absolute; top: 31px; font-size: 9px; color: var(--fg-4); font-weight: 600; }
.story-rail-node.active { color: #fff; border-color: var(--matcha); background: var(--grad-matcha); box-shadow: 0 4px 12px rgba(90,102,65,.25); }
.story-rail-node.active small, .story-rail-node.done small { color: var(--matcha-shade); }
.story-rail-node.done { border-color: var(--matcha); color: var(--matcha-shade); background: var(--matcha-soft); }
.story-rail-line { width: 42px; height: 2px; background: var(--take); margin-top: 13px; }
.story-rail-line.done { background: var(--matcha); }
.story-stage { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.story-scene { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; color: #fff; background: radial-gradient(circle at 10% 10%, #9bad80, #465537 78%); box-shadow: 0 12px 26px rgba(70,85,55,.2); }
.story-scene-art { width: 72px; height: 72px; border-radius: 20px; background: rgba(255,255,255,.14); position: relative; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); }
.story-washer { width: 43px; height: 43px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--matcha-shade); font-family: var(--font-serif); font-size: 20px; }
.story-spin { position: absolute; right: 5px; bottom: 4px; font-size: 16px; color: #fff; }
.story-eyebrow { font-size: 9px; font-weight: 800; letter-spacing: .14em; opacity: .85; }
.story-scene h1 { font-size: 19px; margin: 5px 0 2px; line-height: 1.3; }
.story-scene p { margin: 0; font-size: 11px; opacity: .82; }
.story-player { border: 0; border-radius: 16px; background: #fff; padding: 12px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; text-align: left; cursor: pointer; box-shadow: var(--shadow-paper); color: var(--fg-1); }
.story-player.playing { border: 1px solid var(--shuin); background: #fffaf7; }
.story-play-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--grad-shuin); font-size: 13px; }
.story-player strong, .story-player small { display: block; }
.story-player strong { font-size: 13px; }.story-player small { font-size: 10px; color: var(--fg-3); margin-top: 2px; }
.story-wave { font-size: 11px; color: var(--shuin); letter-spacing: 2px; }
.story-chat { display: flex; flex-direction: column; gap: 9px; padding: 4px 2px; }
.story-chat-row { display: flex; gap: 7px; align-items: flex-end; max-width: 90%; }
.story-chat-row.right { align-self: flex-end; flex-direction: row-reverse; }
.story-avatar { width: 25px; height: 25px; border-radius: 50%; background: var(--matcha-soft); color: var(--matcha-shade); display: grid; place-items: center; font-size: 10px; font-weight: 800; flex-shrink: 0; }
.story-chat-row.right .story-avatar { background: var(--conversation-bubble-right); color: var(--conversation-blue); }
.story-who { display: block; font-size: 9px; color: var(--fg-4); margin: 0 5px 2px; }
.story-chat-row.right .story-who { text-align: right; }
.story-chat-bubble { border-radius: 15px 15px 15px 4px; background: #fff; padding: 9px 11px; font-size: 13px; font-weight: 600; line-height: 1.8; color: var(--fg-1); box-shadow: 0 2px 8px rgba(31,41,55,.05); }
.story-chat-row.right .story-chat-bubble { border-radius: 15px 15px 4px 15px; background: var(--conversation-bubble-right); }
.story-chat-bubble rt, .story-focus-jp rt { font-size: 8px; color: var(--fg-3); }
.story-chat-zh { font-size: 11px; color: var(--fg-3); padding: 4px 6px 0; }
.story-reveal { border: 0; background: none; color: var(--matcha-shade); font-size: 12px; font-weight: 700; cursor: pointer; padding: 6px; }
.story-stage-title { display: flex; gap: 10px; align-items: flex-start; }
.story-stage-title > span { font-size: 10px; letter-spacing: .08em; color: #fff; background: var(--matcha); border-radius: 7px; padding: 4px 6px; font-weight: 800; }
.story-stage-title h1 { margin: 0; font-size: 19px; line-height: 1.3; }.story-stage-title p { margin: 3px 0 0; font-size: 11px; color: var(--fg-3); }
.story-line-tabs { display: flex; gap: 8px; }
.story-line-tabs button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--take); color: var(--fg-3); background: #fff; cursor: pointer; }
.story-line-tabs button.active { border: 0; color: #fff; background: var(--grad-matcha); box-shadow: 0 3px 9px rgba(90,102,65,.25); }
.story-focus-card { position: relative; background: #fff; border-radius: 20px; padding: 18px; box-shadow: var(--shadow-paper); border: 1px solid var(--border-1); }
.story-focus-jp { font-size: 18px; font-weight: 700; line-height: 2; padding-right: 35px; border-bottom: 1px solid var(--border-1); padding-bottom: 12px; }
.story-audio-dot { position: absolute; right: 14px; top: 15px; width: 33px; height: 33px; border: 0; border-radius: 50%; background: var(--matcha-soft); color: var(--matcha-shade); display: grid; place-items: center; }
.story-key-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.story-key-grid > div { background: var(--bg-sunk); border-radius: 12px; padding: 10px; }
.story-key-grid small, .story-key-grid strong, .story-key-grid span { display: block; }.story-key-grid small, .story-natural small { color: var(--fg-4); font-size: 9px; margin-bottom: 4px; }.story-key-grid strong { font-size: 13px; }.story-key-grid span { font-size: 10px; color: var(--fg-3); margin-top: 3px; }
.story-natural { margin-top: 10px; border-left: 3px solid var(--matcha); background: var(--matcha-soft); border-radius: 0 10px 10px 0; padding: 9px 11px; font-size: 13px; font-weight: 600; }
.story-pattern-counter { align-self: flex-end; font-size: 10px; color: var(--fg-4); }
.story-pattern-card { min-height: 245px; border-radius: 26px; padding: 24px 20px; color: #fff; background: linear-gradient(145deg,#4a583c,#87996b); box-shadow: 0 16px 32px rgba(70,85,55,.25); display: flex; flex-direction: column; }
.story-pattern-mark { font-size: 9px; letter-spacing: .12em; opacity: .7; }.story-pattern-card h2 { font-size: 31px; margin: 28px 0 3px; font-family: var(--font-sans); }.story-pattern-card > p { margin: 0; font-size: 12px; opacity: .8; }
.story-pattern-example { margin-top: auto; padding: 13px; border-radius: 14px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.16); }
.story-pattern-example strong, .story-pattern-example span { display: block; }.story-pattern-example strong { font-size: 16px; }.story-pattern-example span { font-size: 11px; margin-top: 4px; opacity: .8; }
.story-swipe-controls { display: grid; grid-template-columns: 40px 1fr 40px; gap: 10px; align-items: center; }
.story-swipe-controls button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: var(--matcha-shade); box-shadow: var(--shadow-paper); }.story-swipe-controls button:disabled { opacity: .3; }
.story-swipe-controls > div { display: flex; justify-content: center; gap: 5px; }.story-swipe-controls i { width: 5px; height: 5px; border-radius: 50%; background: var(--take); }.story-swipe-controls i.active { width: 18px; border-radius: 99px; background: var(--matcha); }
.story-quiz-card { background: #fff; border-radius: 22px; padding: 18px; box-shadow: var(--shadow-paper); text-align: center; }
.story-quiz-audio { width: 48px; height: 48px; border-radius: 50%; background: var(--matcha-soft); color: var(--matcha-shade); display: grid; place-items: center; margin: 0 auto 12px; }
.story-quiz-jp { font-size: 17px; font-weight: 700; line-height: 2; margin-bottom: 16px; }.story-quiz-jp rt { font-size: 8px; }
.story-answer-grid { display: grid; gap: 8px; }.story-answer-grid button { min-height: 43px; border: 1.5px solid var(--take); border-radius: 12px; background: #fff; color: var(--fg-1); font-weight: 600; }.story-answer-grid button.correct { border-color: var(--matcha); background: var(--matcha-soft); color: var(--matcha-shade); }.story-answer-grid button.wrong { border-color: var(--shuin); background: var(--danger-bg); color: var(--shuin); }
.story-feedback { margin-top: 10px; border-radius: 10px; padding: 10px; font-size: 11px; font-weight: 700; }.story-feedback.ok { background: var(--matcha-soft); color: var(--matcha-shade); }.story-feedback.bad { background: var(--warning-bg); color: #92400e; }
.story-finish { text-align: center; align-items: center; padding: 18px 4px; }.story-finish-seal { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--grad-shuin); font-family: var(--font-serif); font-size: 31px; box-shadow: 0 12px 28px rgba(194,65,12,.24); }.story-finish .story-eyebrow { color: var(--shuin); opacity: 1; margin-top: 5px; }.story-finish h1 { font-size: 22px; line-height: 1.45; margin: 2px 0; }.story-finish > p { font-size: 12px; color: var(--fg-3); max-width: 290px; }
.story-earned { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }.story-earned span { padding: 5px 9px; border-radius: 99px; background: var(--matcha-soft); color: var(--matcha-shade); font-size: 11px; font-weight: 700; }
.story-next-card { width: 100%; text-align: left; border-radius: 16px; background: #fff; box-shadow: var(--shadow-paper); padding: 13px; border-left: 4px solid var(--shuin); }.story-next-card span,.story-next-card strong,.story-next-card small { display: block; }.story-next-card span { font-size: 9px; color: var(--shuin); font-weight: 800; }.story-next-card strong { font-size: 13px; margin: 3px 0; }.story-next-card small { font-size: 10px; color: var(--fg-3); }

/* Studio */
.studio-v2 { display: flex; flex-direction: column; gap: 10px; }
.studio-v2-hero { display: flex; gap: 12px; padding: 7px 2px 12px; }.studio-spark { width: 45px; height: 45px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,#8b76cf,#50417f); font-size: 22px; box-shadow: 0 8px 20px rgba(104,87,166,.25); }
.studio-v2-hero small { color: #6857a6; font-size: 9px; letter-spacing: .12em; font-weight: 800; }.studio-v2-hero h1 { font-size: 20px; line-height: 1.35; margin: 3px 0 0; }
.studio-brief-card { background: #fff; border: 1px solid var(--border-1); border-radius: 17px; padding: 13px; box-shadow: 0 2px 10px rgba(31,41,55,.04); }
.studio-section-label { font-size: 11px; color: var(--fg-2); font-weight: 700; margin-bottom: 10px; }.studio-section-label span { color: #6857a6; margin-right: 7px; font-size: 9px; }
.studio-levels { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.studio-levels button { padding: 9px 4px; border: 1px solid var(--take); border-radius: 11px; background: var(--bg-sunk); color: var(--fg-2); font-weight: 800; }.studio-levels small { display: block; margin-top: 2px; font-size: 8px; font-weight: 500; color: var(--fg-4); }.studio-levels button.active { border-color: #6857a6; color: #594a8d; background: #f0edfa; }
.studio-topic { display: flex; align-items: center; gap: 8px; border: 1.5px solid #b8addb; border-radius: 12px; padding: 10px; color: #6857a6; }.studio-topic input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--fg-1); font-size: 14px; font-weight: 600; background: transparent; }
.studio-topic-suggest { display: flex; gap: 5px; margin-top: 7px; }.studio-topic-suggest button { border: 0; border-radius: 99px; padding: 4px 8px; background: var(--bg-sunk); color: var(--fg-3); font-size: 9px; }
.studio-module-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.studio-module-grid button { position: relative; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; text-align: left; border: 1px solid var(--take); border-radius: 12px; padding: 9px; background: var(--bg-sunk); color: var(--fg-2); }.studio-module-grid button > span { grid-row: 1/3; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: #6857a6; font-weight: 800; }.studio-module-grid strong { font-size: 11px; }.studio-module-grid small { font-size: 8px; color: var(--fg-4); }.studio-module-grid i { position: absolute; right: 6px; top: 5px; font-style: normal; color: var(--fg-4); }.studio-module-grid button.active { border-color: #b8addb; background: #f4f1fb; }.studio-module-grid button.active i { color: #6857a6; }
.studio-building { min-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.studio-orbit { width: 104px; height: 104px; border-radius: 50%; border: 1px solid #d8d0ec; display: grid; place-items: center; position: relative; }.studio-orbit span { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(145deg,#8b76cf,#50417f); color: #fff; font-family: var(--font-serif); font-size: 25px; }.studio-orbit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #8b76cf; }.studio-orbit i:nth-child(2){top:6px}.studio-orbit i:nth-child(3){right:7px;bottom:18px}.studio-orbit i:nth-child(4){left:2px;bottom:28px}.studio-building h1 { font-size: 19px; margin: 20px 0 3px; }.studio-building > p { margin: 0; color: var(--fg-3); font-size: 11px; }.studio-build-list { width: 220px; text-align: left; margin-top: 20px; display: grid; gap: 7px; }.studio-build-list div { font-size: 11px; color: var(--fg-4); }.studio-build-list span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--bg-sunk); margin-right: 7px; }.studio-build-list .done { color: #6857a6; }.studio-build-list .done span { background: #ece7f8; }
.studio-preview { display: flex; flex-direction: column; gap: 11px; }.studio-preview-hero { color: #fff; padding: 17px; border-radius: 21px; display: flex; justify-content: space-between; background: linear-gradient(145deg,#43385f,#806bb5); box-shadow: 0 12px 28px rgba(80,65,127,.23); }.studio-preview-hero small { font-size: 8px; letter-spacing: .12em; opacity: .7; }.studio-preview-hero h1 { margin: 5px 0 3px; font-size: 17px; }.studio-preview-hero p { margin: 0; font-size: 10px; opacity: .8; }.studio-preview-hero button { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; }
.studio-preview-tabs { display: grid; grid-template-columns: repeat(3,1fr); background: #e9e6ef; border-radius: 12px; padding: 3px; }.studio-preview-tabs button { border: 0; border-radius: 9px; padding: 8px; background: transparent; color: var(--fg-3); font-size: 11px; }.studio-preview-tabs button.active { background: #fff; color: #594a8d; font-weight: 700; box-shadow: 0 2px 5px rgba(31,41,55,.08); }
.studio-outline { display: grid; gap: 7px; }.studio-outline > div { display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--border-1); }.studio-outline > div > span { width: 27px; height: 27px; border-radius: 9px; display: grid; place-items: center; background: #f0edfa; color: #6857a6; font-size: 10px; font-weight: 800; }.studio-outline strong { font-size: 11px; }.studio-outline small { font-size: 9px; color: var(--fg-4); }
.studio-dialogue-preview { display: grid; gap: 8px; }.studio-dialogue-preview div { max-width: 85%; background: #fff; padding: 10px; border-radius: 13px 13px 13px 4px; }.studio-dialogue-preview div.right { justify-self: end; background: #efebf8; border-radius: 13px 13px 4px 13px; }.studio-dialogue-preview small,.studio-dialogue-preview strong { display:block; }.studio-dialogue-preview small { color: var(--fg-4); font-size: 8px; }.studio-dialogue-preview strong { font-size: 11px; margin-top: 2px; }
.studio-quiz-preview { background: #fff; border-radius: 17px; padding: 14px; }.studio-quiz-preview > small { color:#6857a6;font-size:8px;font-weight:800}.studio-quiz-preview h2{font-size:14px}.studio-quiz-preview button{width:100%;margin-top:6px;padding:9px;border:1px solid var(--take);border-radius:10px;background:#fff}.studio-quiz-preview button.correct{border-color:#8b76cf;background:#f0edfa;color:#594a8d;font-weight:700}.studio-regenerate{border:0;background:none;color:#6857a6;font-size:11px;font-weight:700;padding:8px}

/* Pulse */
.pulse-start { min-height: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; padding-top: 18px; }
.pulse-ring { width: 108px; height: 108px; border-radius: 50%; border: 9px solid #f3ded2; outline: 1px solid #e9bda5; display: grid; place-content: center; background: #fffaf7; box-shadow: 0 12px 30px rgba(192,90,16,.13); }.pulse-ring span { font-size: 38px; line-height: 1; font-weight: 800; color: #a6490b; }.pulse-ring small { font-size: 7px; letter-spacing: .12em; color: #c05a10; font-weight: 800; margin-top: 4px; }
.pulse-start-copy small { display:block;margin-top:20px;color:#c05a10;font-size:9px;font-weight:800;letter-spacing:.12em}.pulse-start-copy h1{font-size:25px;line-height:1.35;margin:4px 0}.pulse-start-copy p{font-size:11px;color:var(--fg-3);margin:0}
.pulse-plan { width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}.pulse-plan>div{background:#fff;border-radius:16px;padding:13px;box-shadow:var(--shadow-paper);display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;text-align:left;gap:0 8px}.pulse-plan span{grid-row:1/3;width:30px;height:30px;border-radius:10px;background:#fff0e8;color:#a6490b;display:grid;place-items:center;font-weight:800}.pulse-plan strong{font-size:11px}.pulse-plan small{font-size:9px;color:var(--fg-4)}.pulse-no-pressure{margin-top:12px;color:var(--fg-4);font-size:9px;letter-spacing:.03em}
.pulse-play{display:flex;flex-direction:column;gap:12px}.pulse-progress,.fill-v2-progress{height:5px;border-radius:99px;background:var(--washi-300);overflow:hidden}.pulse-progress i,.fill-v2-progress i{display:block;height:100%;background:linear-gradient(90deg,#d26a24,#a6490b);border-radius:99px}
.pulse-card{min-height:260px;border-radius:28px;background:linear-gradient(155deg,#fff,#fff5ef);border:1px solid #efd8ca;box-shadow:0 16px 34px rgba(192,90,16,.11);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.pulse-sound{position:absolute;right:14px;top:14px;width:36px;height:36px;border:0;border-radius:50%;background:#fff0e8;color:#a6490b;display:grid;place-items:center}.pulse-card>small{font-size:9px;color:#c05a10;font-weight:800;letter-spacing:.08em}.pulse-card h1{font-size:48px;margin:18px 0 0;font-family:var(--font-serif);color:var(--fg-1)}.pulse-card p{margin:3px 0;color:var(--fg-3);font-size:14px}.pulse-big-audio{width:86px;height:86px;border-radius:50%;border:0;background:linear-gradient(145deg,#d26a24,#9a3f08);color:#fff;display:grid;place-items:center;margin-top:22px;box-shadow:0 12px 26px rgba(192,90,16,.25)}
.pulse-options{display:grid;gap:8px}.pulse-options button{min-height:45px;border:1.5px solid var(--take);border-radius:13px;background:#fff;color:var(--fg-1);font-size:13px;font-weight:600}.pulse-options button.correct{border-color:var(--matcha);background:var(--matcha-soft);color:var(--matcha-shade)}.pulse-options button.wrong{border-color:var(--shuin);background:var(--danger-bg);color:var(--shuin)}.pulse-memory{border-radius:13px;padding:10px 12px}.pulse-memory strong,.pulse-memory span{display:block}.pulse-memory strong{font-size:11px}.pulse-memory span{font-size:10px;margin-top:3px}.pulse-memory.ok{background:var(--matcha-soft);color:var(--matcha-shade)}.pulse-memory.bad{background:var(--warning-bg);color:#92400e}
.pulse-done{text-align:center;display:flex;flex-direction:column;align-items:center;padding:32px 2px;gap:9px}.pulse-done-mark{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#d26a24,#9a3f08);color:#fff;font-size:28px;box-shadow:0 12px 28px rgba(192,90,16,.22)}.pulse-done>small{font-size:8px;color:#c05a10;letter-spacing:.13em;font-weight:800}.pulse-done h1{font-size:24px;margin:0}.pulse-done>p{font-size:11px;color:var(--fg-3);margin:0;max-width:260px}.pulse-score{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:7px}.pulse-score span{background:#fff;border-radius:14px;padding:12px;font-size:10px;color:var(--fg-3);box-shadow:var(--shadow-paper)}.pulse-score strong{display:block;font-size:24px;color:#a6490b}.pulse-missed{width:100%;display:flex;align-items:center;gap:6px;padding:10px;border-radius:12px;background:#fff0e8}.pulse-missed small{font-size:9px;color:#a6490b;font-weight:800}.pulse-missed span{font-size:10px;padding:3px 7px;background:#fff;border-radius:99px}

/* Trail */
.trail-unit-card{border-radius:22px;padding:17px;color:#fff;background:linear-gradient(145deg,#315d61,#64898c);box-shadow:0 13px 28px rgba(49,93,97,.21)}.trail-unit-card small{font-size:8px;letter-spacing:.11em;opacity:.75}.trail-unit-card h1{font-size:21px;margin:6px 0 2px}.trail-unit-card p{font-size:10px;margin:0;opacity:.8}.trail-unit-card button{width:100%;margin-top:13px;padding:8px 0 0;border:0;border-top:1px solid rgba(255,255,255,.2);background:none;color:#fff;text-align:left;font-size:10px;display:flex;justify-content:space-between}
.trail-map{position:relative;min-height:460px;padding:18px 0}.trail-path-line{position:absolute;left:50%;top:26px;bottom:28px;width:4px;border-radius:99px;background:linear-gradient(var(--matcha) 0 26%,var(--take) 26%);transform:translateX(-50%)}.trail-node{position:relative;width:150px;min-height:66px;border:0;background:transparent;display:flex;align-items:center;gap:8px;text-align:left;color:var(--fg-1);margin-bottom:23px}.trail-node.left{margin-left:9px}.trail-node.right{margin-left:auto;margin-right:5px;flex-direction:row-reverse;text-align:right}.trail-node-orb{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#fff;border:5px solid var(--take);box-shadow:0 3px 10px rgba(31,41,55,.09);font-size:16px;font-weight:800;flex-shrink:0;z-index:1}.trail-node-copy strong,.trail-node-copy small{display:block}.trail-node-copy strong{font-size:11px}.trail-node-copy small{font-size:8px;color:var(--fg-4);margin-top:2px}.trail-node.done .trail-node-orb{border-color:var(--matcha);background:var(--matcha-soft);color:var(--matcha-shade)}.trail-node.current .trail-node-orb{border-color:#486b70;background:linear-gradient(145deg,#64898c,#315d61);color:#fff;box-shadow:0 0 0 7px rgba(72,107,112,.12),0 8px 18px rgba(49,93,97,.24)}.trail-node.locked{opacity:.45}.trail-node>i{position:absolute;top:-5px;right:2px;font-size:7px;font-style:normal;letter-spacing:.08em;background:#486b70;color:#fff;border-radius:99px;padding:3px 6px}.trail-node.right>i{right:auto;left:0}.trail-today{background:#fff;border-radius:17px;padding:13px;box-shadow:var(--shadow-paper);border-left:4px solid #486b70;display:grid;grid-template-columns:1fr auto}.trail-today span,.trail-today strong,.trail-today small{display:block;grid-column:1}.trail-today span{font-size:8px;color:#486b70;font-weight:800;letter-spacing:.08em}.trail-today strong{font-size:12px;margin:3px 0}.trail-today small{font-size:9px;color:var(--fg-4)}.trail-today button{grid-column:2;grid-row:1/4;border:0;background:none;color:#486b70;font-size:10px;font-weight:700}
.fill-v2{display:flex;flex-direction:column;gap:18px}.fill-v2-kicker{text-align:center;color:#486b70;font-size:10px;font-weight:800;letter-spacing:.08em;margin-top:16px}.fill-v2-sentence{min-height:190px;border-radius:24px;background:#fff;box-shadow:var(--shadow-paper);padding:22px 17px;display:flex;align-content:center;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px;font-size:20px;line-height:2;font-weight:700}.fill-v2-sentence button{min-width:94px;min-height:39px;border:2px dashed #9ab1b3;border-radius:10px;background:#f2f7f7;color:#789092;font-size:11px;font-weight:700}.fill-v2-sentence button.filled{border-style:solid;background:#e4eeee;color:#315d61;font-size:15px}.fill-v2-bank{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.fill-v2-bank button{padding:10px 14px;border:1.5px solid var(--take);border-radius:12px;background:#fff;font-size:14px;font-weight:700;box-shadow:0 3px 0 var(--take)}.fill-v2-bank button.selected{border-color:#486b70;background:#e4eeee;color:#315d61;transform:translateY(2px);box-shadow:0 1px 0 #486b70}.fill-v2-bank button.correct{border-color:var(--matcha);background:var(--matcha-soft);color:var(--matcha-shade)}.fill-v2-bank button.wrong{border-color:var(--shuin);background:var(--danger-bg);color:var(--shuin)}.fill-v2-feedback{border-radius:15px;padding:12px}.fill-v2-feedback strong,.fill-v2-feedback span,.fill-v2-feedback small{display:block}.fill-v2-feedback strong{font-size:12px}.fill-v2-feedback span{font-size:11px;margin-top:3px}.fill-v2-feedback small{font-size:9px;margin-top:5px;opacity:.8}.fill-v2-feedback.ok{background:var(--matcha-soft);color:var(--matcha-shade)}.fill-v2-feedback.bad{background:var(--warning-bg);color:#92400e}.fill-v2-hint{text-align:center;color:var(--fg-4);font-size:10px}
.trail-unlock{text-align:center;display:flex;flex-direction:column;align-items:center;padding:50px 5px;gap:10px}.trail-unlock-orb{width:85px;height:85px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#64898c,#315d61);font-size:31px;box-shadow:0 0 0 11px rgba(72,107,112,.1),0 14px 30px rgba(49,93,97,.22)}.trail-unlock>small{margin-top:12px;font-size:8px;letter-spacing:.13em;color:#486b70;font-weight:800}.trail-unlock h1{font-size:25px;line-height:1.35;margin:0}.trail-unlock p{font-size:11px;color:var(--fg-3);max-width:260px;margin:0 0 12px}