:root{--bg: #f4ead0;--bg-2: #f8f8f0;--parchment: rgb(247, 243, 223);--ink: #725d42;--ink-head: #794f27;--muted: #9f927d;--disabled: #c4b89e;--line: #e6dcc0;--teal: #19c8b9;--teal-dk: #129a8e;--teal-bg: #e6f9f6;--success: #6fba2c;--switch-on:#86d67a;--warning: #f5c31c;--error: #e05a5a;--focus: #ffcc00;--btn3d: #bdaea0;--pink:#f8a6b2;--purple:#b77dee;--blue:#889df0;--p-yellow:#f7cd67;--orange:#e59266;--p-teal:#82d5bb;--green:#8ac68a;--red:#fc736d;--brown:#9a835a;--peach:#e18c6f;--lime:#c3df73;--sky:#7ec8e3;--rose:#f3899b;--radius: 20px;--radius-lg:28px;--pill: 999px;--shadow-soft: 0 4px 14px rgba(121, 79, 39, .12);--shadow-card: 0 8px 24px rgba(121, 79, 39, .14);--font: "Nunito", "Noto Sans SC", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font);font-weight:600;color:var(--ink);background-color:var(--bg);background-image:radial-gradient(circle at 18% 12%,rgba(130,213,187,.2),transparent 38%),radial-gradient(circle at 84% 8%,rgba(247,205,103,.22),transparent 40%),radial-gradient(circle at 50% 120%,rgba(25,200,185,.14),transparent 55%),radial-gradient(rgba(121,79,39,.05) 1.5px,transparent 1.5px);background-size:auto,auto,auto,26px 26px;background-attachment:fixed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior-y:none}h1,h2,h3,h4{color:var(--ink-head);margin:0;line-height:1.15;font-weight:800}p{line-height:1.6}a{color:inherit;text-decoration:none}button{font-family:inherit}img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}.btn{--b: var(--teal);--bd: var(--teal-dk);display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:800;font-size:1.05rem;color:#fff;padding:.8em 1.6em;border:none;cursor:pointer;background:var(--b);border-radius:var(--pill);box-shadow:0 5px 0 0 var(--bd);transition:transform .08s ease,box-shadow .08s ease,filter .15s;-webkit-user-select:none;user-select:none;white-space:nowrap}.btn:hover{box-shadow:0 6px 0 0 var(--bd);transform:translateY(-1px);filter:brightness(1.03)}.btn:active{box-shadow:0 1px 0 0 var(--bd);transform:translateY(3px)}.btn:disabled{background:var(--disabled);box-shadow:0 5px #a79c86;cursor:not-allowed;filter:none}.btn--yellow{--b: var(--p-yellow);--bd: #d6a93f;color:var(--ink-head)}.btn--coral{--b: var(--red);--bd: #d44f4a}.btn--lg{font-size:1.2rem;padding:.95em 2.1em}.btn-soft{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:700;color:var(--ink-head);cursor:pointer;padding:.7em 1.3em;border:2px solid var(--line);background:var(--bg-2);border-radius:var(--pill);box-shadow:0 2px 4px #794f2714;transition:transform .1s,border-color .15s,background .15s}.btn-soft:hover{border-color:var(--teal);transform:translateY(-1px)}.btn-soft:active{transform:translateY(1px)}.card{background:var(--parchment);border-radius:var(--radius);box-shadow:var(--shadow-card);border:1.5px solid #efe6cb;padding:20px}.card--dots{background-color:var(--dot-bg, #fff);background-image:radial-gradient(var(--dot, rgba(0,0,0,.06)) 1.5px,transparent 1.5px),radial-gradient(var(--dot, rgba(0,0,0,.06)) 1px,transparent 1px);background-size:28px 28px,14px 14px;background-position:0 0,7px 7px;border:1.5px solid var(--dot, rgba(0,0,0,.12))}.ribbon{position:relative;display:inline-block;font-weight:900;color:var(--rt, #fff);font-size:1.35rem;padding:.42em 1.5em;margin:.2em 0 .6em;background:var(--rf, var(--teal));transform:perspective(360px) rotateX(3deg);filter:drop-shadow(0 3px 2px rgba(121,79,39,.18));clip-path:polygon(0 0,100% 0,100% 100%,0 100%,6% 50%)}.ribbon:before,.ribbon:after{content:"";position:absolute;top:100%;width:0;height:0;border-style:solid;z-index:-1}.ribbon:before{left:0;border-width:0 0 9px 12px;border-color:transparent transparent transparent var(--rb, var(--teal-dk))}.ribbon:after{right:0;border-width:0 12px 9px 0;border-color:transparent var(--rb, var(--teal-dk)) transparent transparent}.pill-input{font-family:inherit;font-weight:800;font-size:1.5rem;color:var(--ink-head);text-align:center;letter-spacing:.12em;padding:.55em 1em;border:2.5px solid var(--line);background:#fff;border-radius:var(--pill);outline:none;transition:border-color .15s,box-shadow .15s}.pill-input:focus{border-color:var(--focus);box-shadow:0 0 0 4px #ffcc0047}.pill-input.is-wrong{border-color:var(--error);animation:shake .35s}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.blob-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#794f2752;display:grid;place-items:center;padding:20px;animation:fade .2s ease}.blob{position:relative;background:var(--parchment);max-width:440px;width:100%;padding:36px 30px;text-align:center;border-radius:64% 36% 56% 44%/50% 56% 44% 50%;box-shadow:var(--shadow-card);animation:pop .3s cubic-bezier(.18,1.3,.5,1)}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:scale(.82)}}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.rise{animation:rise .5s both}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}.floaty{animation:floaty 3.4s ease-in-out infinite}@keyframes starburst{0%{transform:scale(0) rotate(-30deg);opacity:0}50%{opacity:1}to{transform:scale(1.15) rotate(0);opacity:1}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}.wrap{max-width:1080px;margin:0 auto;padding:0 18px}.hide-sm{display:inline}@media (max-width: 460px){.hide-sm{display:none}}@media (min-width: 760px){body{font-size:17px}.ribbon{font-size:1.5rem}}.learn-stage{max-width:560px;margin:0 auto;width:100%}.module-detail{max-width:620px;margin:0 auto;width:100%}.island-card{display:block;transition:transform .12s ease}.island-card:hover{transform:translateY(-4px)}.chip{border:2px solid var(--line);background:#fff;color:var(--ink-head);font-weight:800;border-radius:var(--pill);padding:.45em 1em;cursor:pointer;font-family:inherit;font-size:1rem;transition:all .12s}.chip:hover{border-color:var(--teal)}.chip--on{background:var(--teal);color:#fff;border-color:var(--teal)}.chip--off{opacity:.45}.row{display:flex;align-items:center}.center{display:grid;place-items:center}.stack{display:flex;flex-direction:column}.spin{width:34px;height:34px;border:4px solid var(--teal-bg);border-top-color:var(--teal);border-radius:50%;animation:rot 1s linear infinite}@keyframes rot{to{transform:rotate(360deg)}}