:root{--ink:#624354;--rose:#a45878;--paper:#fffaf5;--muted:#846677}*{box-sizing:border-box}body{margin:0;font:17px Tahoma,Arial;line-height:1.9;color:var(--ink);background:radial-gradient(ellipse at 5% 15%,#f9e0e6,transparent 48%),radial-gradient(ellipse at 97% 65%,#fde7d2,transparent 45%),#fff9f3}main{max-width:950px;margin:auto;padding:24px}header{text-align:center;padding:12px 10px}.school{font-size:14px}.overline{font-size:12px;letter-spacing:.6px;color:var(--muted)}h1{font-size:clamp(38px,7vw,64px);font-weight:500;line-height:1.3;margin:18px 0;color:#7d4864}h1 em{font-style:normal;color:#b36c83}h2{font-size:24px;line-height:1.7;margin:8px 0}p{margin:9px 0}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;border-radius:30px;padding:12px 24px;background:#995371;color:white}button:hover{filter:brightness(1.05)}button:focus-visible{outline:3px solid #bc884b;outline-offset:5px}button:disabled{cursor:default}.secondary{background:#f3e1e5;color:#874e65}input,select,textarea{width:100%;padding:12px;border:1px solid #d8bfc9;background:#fffdfa;border-radius:12px;color:var(--ink)}textarea{min-height:100px;resize:vertical}input:focus,textarea:focus,select:focus{outline:3px solid #f3d6df}label{display:block;font-size:14px;margin:16px 0 5px;font-weight:bold}.help,.tiny,small{color:var(--muted);font-size:13px}#welcome{text-align:center;margin:22px auto;max-width:570px;padding:25px;background:#fffaf5a6;border:1px solid #ead4d8;border-radius:30px}#welcomeForm{text-align:right;max-width:400px;margin:auto}#welcomeForm button{display:block;margin:25px auto}.welcome-line{color:#a65d7b}.cap-scene{position:relative;max-width:660px;margin:15px auto 0}.cap-scene svg{display:block;width:100%;height:auto;filter:drop-shadow(0 13px 20px #97557212)}.piece{opacity:0;transition:opacity .8s ease}.piece.done{opacity:1}.hotspots{position:absolute;inset:0}.hotspots button{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:39px;height:39px;padding:0;line-height:39px;background:#f7e9e6;color:#967b88;border:1px solid #d9bac6;font-size:15px;box-shadow:0 4px 12px #97557212}.hotspots button.current{background:#ab5f81;color:white;border:3px solid #fff5e9;box-shadow:0 0 0 7px #cc8ba328;animation:breathe 2.5s ease-in-out infinite}.hotspots button.completed{background:#fff8ed;color:#8d5369;border-color:#dfbfae}.spark{position:absolute;color:#c992a4;font-size:34px;pointer-events:none}.s1{top:18%;left:4%}.s2{top:20%;right:4%}.s3{bottom:12%;left:6%;font-size:26px}.stage-copy{text-align:center;max-width:590px;margin:auto}.stage-copy h2{color:#86506b}.stage-copy button{margin:15px 0}.criteria{max-width:570px;margin:28px auto;font-size:13px;color:#806576;border-top:1px solid #e8ccd4;padding-top:12px}.criteria summary{cursor:pointer;text-align:center}footer{text-align:center;color:#966b7f;font-size:12px;padding:30px}#status{text-align:center;color:#9c5976;min-height:24px}dialog{border:1px solid #e9ccd5;border-radius:26px;background:var(--paper);color:var(--ink);width:min(590px,calc(100% - 24px));max-height:88dvh;padding:25px;box-shadow:0 25px 80px #6b3e5930}dialog::backdrop{background:#65435670;backdrop-filter:blur(5px)}.dialog-header{display:flex;justify-content:space-between;align-items:center}.close{background:#f2e0e5;color:#8b5b73;font-size:26px;width:38px;height:38px;padding:0}.math{direction:ltr;unicode-bidi:isolate;text-align:center;background:#f4e7eb;border-radius:15px;font:25px Georgia;padding:20px;margin:15px 0}.hint{background:#fff0da;border-radius:14px;padding:15px;font-size:14px}.review{background:#f6e9ee;border-radius:14px;padding:15px;font-size:14px}.previous{white-space:pre-wrap;font:14px Tahoma;line-height:1.8;background:#fffdfa;padding:13px;border-radius:12px;border:1px solid #ecd6dc}#taskError{color:#a03c56;font-size:14px}#saveTask{margin-top:20px;width:100%}#finale{text-align:center;padding-top:20px}.envelope{position:relative;width:min(560px,100%);height:340px;margin:38px auto 15px;perspective:1000px;transition:height .8s}.envelope-back{position:absolute;bottom:0;inset-inline:0;height:280px;background:#e9bec9;border-radius:18px;box-shadow:0 18px 35px #a45f7820}.envelope-front{position:absolute;bottom:0;inset-inline:0;height:280px;background:linear-gradient(135deg,#f5d8d9,#ecc7cd);clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);border-radius:0 0 18px 18px;z-index:4;pointer-events:none}.envelope-flap{position:absolute;inset-inline:0;bottom:135px;height:145px;background:#f5dce0;clip-path:polygon(0 0,100% 0,50% 100%);z-index:6;transform-origin:top;transition:transform .7s,z-index .7s}.seal{position:absolute;z-index:7;bottom:83px;left:50%;transform:translateX(-50%);background:#fff0e3;color:#945c73;border:2px solid #e5b8a2;box-shadow:0 5px 15px #a8697720;padding:8px;width:127px;height:113px;border-radius:50%}.seal svg{width:93px;height:61px;margin:auto;display:block}.seal>span:last-child{font-size:11px}.letter{position:absolute;bottom:35px;width:88%;left:6%;text-align:right;background:linear-gradient(140deg,#fffdf7,#fff6ee);border:1px solid #e5cdb8;border-radius:15px;padding:25px;z-index:3;opacity:0;box-shadow:0 8px 25px #97677b12;font-size:15px}.letter h2{text-align:center;color:#945874;font-size:23px}.letter-flower{text-align:center;color:#c48ca0;letter-spacing:10px}.signature{color:#9c5e7d;text-align:left}.achievement{background:#f9eaf0;border:1px solid #ecd1dc;padding:15px;border-radius:12px;margin:18px 0;font-size:14px}.envelope.open{height:960px}.envelope.open .envelope-flap{transform:rotateX(180deg);z-index:1}.envelope.open .letter{bottom:150px;opacity:1;animation:rise 1s ease both;z-index:5}.envelope.open .seal{z-index:7;bottom:45px;width:108px;height:95px}.envelope.open .envelope-front{height:210px}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:22px auto}.actions p{width:100%}.actions button{font-size:14px}.feedback-note{font-size:13px;color:#7b5966}.success{color:#70503e}@keyframes breathe{50%{box-shadow:0 0 0 12px #cc8ba310}}@keyframes rise{from{transform:translateY(80px);opacity:0}to{transform:translateY(0);opacity:1}}[hidden]{display:none!important}@media(max-width:600px){main{padding:14px}header{padding:8px 0}header p{font-size:13px}h1{margin:10px 0}.hotspots button{width:32px;height:32px;line-height:32px;font-size:13px}.stage-copy h2{font-size:21px}.stage-copy p{font-size:14px}.tiny{font-size:11px!important}dialog{padding:19px}.letter{width:92%;left:4%;padding:20px;font-size:14px}.envelope.open{height:1110px}.envelope{height:310px}.envelope-back,.envelope-front{height:250px}.envelope-flap{bottom:120px;height:130px}.seal{bottom:65px}.actions button{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media print{header,#welcome,#journey,footer,.actions,#status,#envelopeInstruction,#finale>p,#finale>h2,.envelope-back,.envelope-front,.envelope-flap,.seal{display:none!important}body{background:white}main{padding:0;max-width:100%}#finale{display:block!important}.envelope,.envelope.open{height:auto;width:100%;margin:0}.letter,.envelope.open .letter{position:static;width:100%;display:block!important;opacity:1;transform:none;box-shadow:none;border:1px solid #d1b5c0;padding:25px;color:#563849}.letter[hidden]{display:block!important}}

.play-options{display:grid;grid-template-columns:1fr;gap:12px;margin:20px 0}.play-tile{background:#fffdfa;border:2px solid #e2c8d2;border-radius:17px;color:#76495f;padding:16px;text-align:center;font-size:18px;min-height:62px}.play-tile.selected{border-color:#a35e7c;background:#f6e4ed}.play-tile.correct{border-color:#8c9a76;background:#f2f3e7}.play-tile:disabled{opacity:.6}.play-tile .math{margin:0;background:transparent;padding:4px;font-size:23px}.match-board{display:grid;grid-template-columns:1fr 1fr;gap:18px;direction:ltr;margin-top:20px}.match-col{display:grid;gap:12px}.match-col button{min-height:65px}.play-feedback{border-radius:14px;padding:14px;background:#f8eadb;color:#805634;font-size:14px;margin:15px 0}.play-feedback.good{background:#f1f1e3;color:#596440}.order-trail{display:flex;gap:10px;flex-wrap:wrap;direction:ltr;border:1px dashed #d3aebd;padding:12px;border-radius:15px;min-height:64px;align-items:center;justify-content:center}.order-trail span{background:#fff8ed;border-radius:10px;padding:8px;font:18px Georgia}.mission-label{font-size:12px;color:#a16c83}.symbol-buttons{display:flex;justify-content:center;gap:20px;direction:ltr}.symbol-buttons button{width:80px;font-size:32px}.play-explainer{font-size:14px;line-height:1.9}.count-pill{display:inline-block;border-radius:20px;background:#f7e4eb;color:#9a607b;padding:3px 12px;font-size:12px}.review-list{white-space:pre-wrap;font:14px Tahoma;line-height:1.9}.play-options.two{grid-template-columns:1fr 1fr}@media(max-width:450px){.play-options.two{grid-template-columns:1fr}.match-board{gap:10px}.play-tile{font-size:16px;padding:12px}.play-tile .math{font-size:20px}}

.graduate-icon{display:inline-block;vertical-align:middle;width:29px;height:35px;object-fit:contain;margin-inline:4px}h1 .graduate-icon{width:65px;height:77px;vertical-align:bottom}.spark .graduate-icon{width:47px;height:57px}.letter-flower .graduate-icon{width:55px;height:65px}.graduate-marker{display:block;width:34px;height:38px;object-fit:contain;margin:auto}.hotspots button.completed{width:45px;height:48px;border-radius:15px;background:#fff8ef;line-height:normal;padding:3px}.seal .graduate-icon{width:17px;height:20px}.seal>span:last-child{white-space:nowrap}@media(max-width:600px){h1 .graduate-icon{width:49px;height:59px}.hotspots button.completed{width:36px;height:40px}.graduate-marker{width:28px;height:32px}}

/* Detailed graduate and a shorter keepsake letter */
.graduate-icon{width:34px;height:42px;object-fit:contain}.graduate-marker{width:38px;height:44px;object-fit:contain}.hotspots button.completed{width:48px;height:53px;padding:2px}.letter-graduate{display:block;width:145px;height:206px;object-fit:contain;margin:-10px auto 8px;filter:drop-shadow(0 5px 7px #7e526316)}.letter{text-align:center;padding:28px 28px 90px;background:linear-gradient(140deg,#fffef9,#fff4ed);overflow:hidden}.letter:before{content:'';position:absolute;inset:8px;border:1px solid #eacfc480;border-radius:10px;pointer-events:none}.letter h2{font-size:24px}.letter-kicker{font-size:12px;color:#ab758b;letter-spacing:.6px}.letter p{line-height:2}.letter .signature{text-align:center;margin-top:22px}.achievement{padding:15px;font-size:14px}.achievement p{margin:5px}.letter>small{display:block;margin-top:13px}.envelope.open .letter{bottom:115px;z-index:3;animation:card-out 1.3s ease both}.envelope.open .envelope-front{z-index:4;height:195px;background:linear-gradient(135deg,#f2d3d7,#e9bcc8)}.envelope.open .seal{z-index:5;bottom:28px}.envelope.open .envelope-flap{z-index:1}.seal>span:last-child{display:block;font-size:11px;margin-top:0;white-space:nowrap}.seal svg{width:80px;height:55px}.calculator{max-width:340px;background:#f0e4e3;border:1px solid #d8b9c4;border-radius:22px;padding:18px;margin:18px auto;direction:ltr;box-shadow:0 7px 15px #a1687910}.calc-screen{display:block;text-align:right;background:#fffcf6;border:1px solid #d9cbbc;border-radius:12px;padding:15px;font:25px Georgia;color:#655542;min-height:60px}.calc-keys{display:flex;gap:10px;margin-top:15px}.calc-key{flex:1;background:#a35f7d;color:white;border-radius:10px;padding:12px 5px;font-size:18px}.calc-key:disabled{background:#ded2d6;color:#8d7783}.source-credit{font-size:10px}.math small{font-size:18px;color:#805b6b}@keyframes card-out{0%{transform:translateY(190px);opacity:0}35%{opacity:1}100%{transform:translateY(0);opacity:1}}@media(max-width:600px){.letter{padding:22px 21px 90px;font-size:15px}.letter-graduate{width:127px;height:181px}.letter h2{font-size:22px}.hotspots button.completed{width:40px;height:46px}.graduate-marker{width:32px;height:39px}}@media(prefers-reduced-motion:reduce){.envelope.open .letter{animation:none}}@media print{.letter,.envelope.open .letter{padding:22px;position:static;z-index:auto}.letter-graduate{width:120px;height:170px}.letter:before{display:none}}

.cap-palette{border:0;margin:12px auto 20px;padding:12px 0;max-width:650px;text-align:center}.cap-palette legend{font-size:15px;font-weight:bold;color:#85556d;margin:auto}.color-options{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}.color-option{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:normal;cursor:pointer;margin:8px 0;padding:7px 8px;min-width:82px;border-radius:14px}.color-option input{position:absolute;opacity:0;width:1px;height:1px}.color-dot{display:block;width:34px;height:34px;border:3px solid #fff8ee;border-radius:50%;box-shadow:0 0 0 1px #dac8cc;transition:transform .2s,box-shadow .2s}.color-option input:checked+.color-dot{box-shadow:0 0 0 3px var(--cap-dark,#874563);transform:scale(1.08)}.color-option:has(input:focus-visible){outline:3px solid #c39158;outline-offset:3px}.color-option:has(input:checked){background:#fffaf5b0}.hotspots button.current{background:var(--cap-dark,#874563)}.dream-note{color:#865571;line-height:2.1!important}.dream-note strong{color:#93506d}.cap-palette #colorNote{margin:6px 0 0}#studentClass{margin-top:6px}@media(max-width:600px){.color-options{gap:3px}.color-option{min-width:75px;font-size:10px;padding:6px 4px}.color-dot{width:29px;height:29px}.dream-note{font-size:14px}}@media print{.cap-palette{display:none!important}}

.piece.half{opacity:.45}.piece.done{opacity:1}