:root{font-family:'Tajawal','Noto Sans Arabic','Segoe UI',sans-serif;color:#21392e;background:#f3f0e7;font-synthesis:none;text-rendering:optimizeLegibility;--green:#123d2c;--green-deep:#0b2b20;--green-mid:#235943;--gold:#d4b56d;--gold-light:#f0dda3;--ivory:#fbf8ee;--ink:#21392e;--muted:#778579;--wood:#715139;--shadow:0 20px 55px rgba(22,48,34,.14)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 42%,#fffdf5 0,#f5f1e8 48%,#ebe5d8 100%);overflow-x:hidden}.wood-frame{position:fixed;inset:0;pointer-events:none;z-index:4;border:9px solid transparent;border-image:linear-gradient(135deg,#5c3d29,#c39553 13%,#71513a 28%,#dfc27b 52%,#725037 70%,#c9a15d 86%,#573b2b) 1;box-shadow:inset 0 0 0 2px rgba(253,234,179,.45),inset 0 0 28px rgba(44,25,12,.16)}.site-shell{max-width:1500px;min-height:100vh;margin:auto;padding:20px clamp(24px,5vw,76px) 14px;display:flex;flex-direction:column;position:relative}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:88px;border-bottom:1px solid rgba(128,103,54,.2);gap:20px}.brand-lockup{display:flex;align-items:center;gap:13px}.logo-medallion{height:72px;width:72px;flex:0 0 auto;border-radius:50%;padding:3px;background:linear-gradient(140deg,#f8ebbd,#bd9653,#f5e6b3);box-shadow:0 3px 10px #4d3c2333}.logo-medallion img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:2px solid #fff8e2}.brand-copy{display:flex;flex-direction:column;gap:2px}.eyebrow{font-size:12px;color:#71806c;letter-spacing:.05em}.brand-title{font-size:24px;font-weight:700;color:var(--green);line-height:1.2}.brand-title em{font-style:normal;color:#aa8743}.topbar-note{display:flex;align-items:center;gap:9px;font-size:14px;color:#778276}.glow-dot{width:7px;height:7px;border-radius:50%;background:#bd9b51;box-shadow:0 0 0 4px #bd9b511c}.sound-panel{display:flex;align-items:center;gap:8px}.sound-button{border:1px solid #ded7c5;background:#ffffffa8;color:#55634f;padding:8px 11px;border-radius:999px;display:flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;transition:.2s}.sound-button:hover{border-color:#b69a58;background:#fffdf7}.sound-icon{font-size:16px;color:#a58643}.switch-track{width:27px;height:15px;background:#c8ccbf;border-radius:20px;position:relative;transition:.25s}.switch-track i{display:block;position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:white;transition:.25s;box-shadow:0 1px 3px #0002}.sound-button[aria-pressed="true"] .switch-track{background:#467253}.sound-button[aria-pressed="true"] .switch-track i{right:14px}.main-stage{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;padding:22px 0 10px}.intro-block{text-align:center;margin:3px 0 19px;position:relative;z-index:1}.section-kicker{display:flex;justify-content:center;align-items:center;gap:11px;color:#a2874c;font-size:13px;font-weight:600;margin-bottom:5px}.section-kicker span{width:24px;height:1px;background:#c7ac69}.intro-block h1{font-family:'Amiri','Tajawal',serif;font-size:clamp(32px,4vw,47px);margin:0;color:var(--green-deep);font-weight:700;line-height:1.25}.intro-block h1 span{color:#ae8d4b}.intro-subtitle{margin:4px auto 0;color:#6d786b;font-size:15px}.intro-subtitle strong{color:#2d6347}.journey-card{width:min(100%,880px);min-height:315px;border:1px solid #e2d7b9;border-radius:23px;background:linear-gradient(145deg,#fffdf7 0%,#fff 47%,#f7f4e9 100%);box-shadow:var(--shadow),inset 0 0 0 5px rgba(217,195,136,.12);padding:21px clamp(20px,4vw,44px) 17px;position:relative;overflow:hidden}.journey-card:before,.journey-card:after{content:'❧';position:absolute;color:#c6a45621;font-family:serif;font-size:98px;pointer-events:none}.journey-card:before{top:-22px;right:-7px;transform:rotate(-30deg)}.journey-card:after{bottom:-42px;left:-4px;transform:rotate(150deg)}.journey-heading{display:flex;align-items:center;gap:13px;position:relative;z-index:1}.heading-mark{width:43px;height:43px;border-radius:14px;background:#173e2e;color:#e2c675;display:grid;place-items:center;font-size:23px;box-shadow:0 4px 10px #163c2d29}.mini-label{display:block;font-size:11px;color:#a4894d;margin-bottom:1px}.journey-heading h2{font-size:21px;color:#163d2c;margin:0;font-weight:700}.step-counter{margin-right:auto;display:flex;align-items:baseline;gap:5px;color:#9b8048}.step-counter span{font:700 19px 'Amiri',serif}.step-counter small{font-size:11px;color:#8c9386}.step-rule{height:3px;margin:14px 0 17px;background:#eee8d8;border-radius:10px;position:relative;z-index:1}.step-rule span{height:100%;width:50%;display:block;border-radius:10px;background:linear-gradient(90deg,#c7a456,#e5d394);transition:width .35s}.step-rule.is-complete span{width:100%}.choice-section{position:relative;z-index:1;animation:fade-up .35s ease both}.field-label{display:flex;align-items:center;gap:9px;color:#526354;font-size:14px;font-weight:700;margin-bottom:11px}.field-number{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#e9dfc4;color:#987940;font-size:12px}.grade-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.grade-choice,.student-choice{font-family:inherit;cursor:pointer;color:var(--green);border:1px solid #e1ddce;background:#fffefa;transition:transform .2s,box-shadow .2s,border-color .2s,background .2s}.grade-choice{min-height:58px;border-radius:13px;font-size:16px;font-weight:700;box-shadow:0 3px 10px #263f2710;position:relative;overflow:hidden}.grade-choice:before{content:'';position:absolute;inset:auto 0 0;height:3px;background:linear-gradient(90deg,#be9a4f,#ead59a);transform:scaleX(0);transition:transform .25s}.grade-choice:hover,.student-choice:hover{transform:translateY(-3px);border-color:#c5aa62;box-shadow:0 8px 16px #253d2418}.grade-choice:hover:before{transform:scaleX(1)}.choice-hint{font-size:12px;color:#849083;margin-top:13px}.hint-star{color:#b09450;margin-left:5px}.selected-grade-line{display:flex;align-items:center;gap:7px;color:#667466;font-size:12px;margin:-2px 0 10px}.grade-dot{width:7px;height:7px;background:#c9a958;border-radius:50%}.selected-grade-line button{border:0;background:none;color:#a08243;text-decoration:underline;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;margin-right:4px}.student-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.student-choice{min-height:40px;padding:8px 10px;border-radius:11px;font-size:14px;font-weight:600}.hidden{display:none!important}.message-section{position:relative;text-align:center;z-index:1;animation:fade-up .5s cubic-bezier(.2,.8,.3,1) both}.message-card{max-width:590px;margin:0 auto;background:linear-gradient(155deg,#fffef9,#fff9e9);border:1px solid #d4ba72;border-radius:17px;padding:18px 28px 17px;position:relative;box-shadow:0 9px 27px #30442c16,inset 0 0 0 4px #cdb56817}.message-card:before{content:'';position:absolute;inset:7px;border:1px solid #d6c99f;border-radius:11px;pointer-events:none}.message-topline{display:flex;justify-content:space-between;position:relative;z-index:1;color:#a38849;font-size:11px;font-weight:600}.message-date{color:#828a7d}.message-emblem{height:38px;width:38px;border:1px solid #c4a75f;background:#f4ecd3;color:#a38440;border-radius:50%;margin:8px auto 3px;display:grid;place-items:center;font-size:22px;box-shadow:0 0 0 4px #f4ecd388}.dear-line{margin:3px 0 0;color:#778274;font-size:14px}.student-name{font-family:'Amiri','Tajawal',serif;font-size:32px;line-height:1.25;margin:0;color:#143d2b}.gold-divider{display:flex;align-items:center;justify-content:center;gap:9px;color:#b49750;margin:3px auto 5px;font-size:17px}.gold-divider:before,.gold-divider:after{content:'';width:42px;height:1px;background:#d7c38a}.message-copy{max-width:510px;margin:0 auto;color:#59685b;font-size:15px;line-height:1.8}.message-copy strong{color:#9a7a39}.message-wish{font-family:'Amiri','Tajawal',serif;font-size:18px;color:#1e573c;margin:7px 0 4px}.message-wish span{color:#c87968;font-size:14px;margin-right:4px}.message-signature{display:flex;flex-direction:column;color:#8a8c7e;font-size:11px;gap:1px}.message-signature strong{color:#54654f;font-size:13px}.message-actions{display:flex;justify-content:center;align-items:center;gap:17px;margin-top:11px}.primary-action{border:0;border-radius:999px;padding:10px 20px;background:linear-gradient(120deg,#17432f,#285f43);color:#fff9e7;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 5px 13px #17432f2e;transition:transform .2s,box-shadow .2s}.primary-action:hover{transform:translateY(-2px);box-shadow:0 8px 19px #17432f40}.primary-action span{color:#e7d28f;margin-left:5px}.quiet-action{border:0;background:none;color:#8b7950;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:8px}.quiet-action:hover{color:#385e43}.quiet-action span{font-size:16px;margin-right:4px}.envelope-flare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,#fff6cf50,transparent 55%);animation:flare 1s ease-out both}.bottom-motto{display:flex;align-items:center;gap:13px;color:#8a856f;font-size:12px;margin-top:auto;padding-top:12px}.motto-line{height:1px;width:40px;background:#cfc3a1}.stage-ornament{position:absolute;color:#c6a45466;font-size:30px}.ornament-one{right:5%;top:28%}.ornament-two{left:6%;top:56%;font-size:23px}.footer-signature{border-top:1px solid rgba(128,103,54,.2);min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:9px;color:#667265}.footer-school{display:flex;align-items:center;gap:9px}.footer-seal{width:30px;height:30px;border:1px solid #b99d5b;color:#a58845;border-radius:50%;display:grid;place-items:center;font-family:'Amiri',serif;font-size:18px}.footer-school div,.footer-center,.footer-director{display:flex;flex-direction:column;gap:1px}.footer-school strong,.footer-center strong,.footer-director strong{font-size:12px;color:#49604e}.footer-school small,.footer-center span,.footer-director span{font-size:10px;color:#939587}.footer-center,.footer-director{text-align:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#confettiCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
@keyframes fade-up{from{opacity:0;transform:translateY(13px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes flare{0%{opacity:0;transform:scale(.7)}30%{opacity:1}100%{opacity:0;transform:scale(1.2)}}@media(min-height:850px){.main-stage{justify-content:center}.bottom-motto{margin-top:24px}}@media(max-width:760px){.site-shell{padding:12px 18px 12px}.topbar{flex-wrap:wrap;padding-bottom:10px;gap:10px}.logo-medallion{width:56px;height:56px}.brand-title{font-size:20px}.topbar-note{display:none}.sound-panel{margin-right:auto}.sound-button{padding:7px 9px}.main-stage{padding-top:17px}.intro-block{margin:0 0 15px}.intro-subtitle{font-size:13px;max-width:460px}.journey-card{padding:17px 18px 15px;min-height:0}.grade-grid{grid-template-columns:repeat(3,1fr)}.grade-choice{min-height:48px}.student-grid{grid-template-columns:repeat(2,1fr);gap:7px}.student-choice{font-size:13px}.footer-signature{flex-wrap:wrap;justify-content:center;padding:10px 0;gap:16px}.footer-school{margin-left:auto}.footer-director{margin-right:auto}.bottom-motto{font-size:11px}.stage-ornament{display:none}}@media(max-width:430px){.site-shell{padding:8px 13px 8px}.wood-frame{border-width:5px}.topbar{min-height:69px}.logo-medallion{height:46px;width:46px}.eyebrow{font-size:10px}.brand-title{font-size:18px}.sound-panel{gap:4px}.sound-button{font-size:10px;padding:6px 7px;gap:5px}.sound-icon{display:none}.switch-track{width:24px}.sound-button[aria-pressed="true"] .switch-track i{right:12px}.intro-block h1{font-size:31px}.intro-subtitle{font-size:12px}.section-kicker{font-size:11px}.journey-card{border-radius:17px;padding:15px 13px 13px}.journey-heading h2{font-size:18px}.heading-mark{width:37px;height:37px}.student-name{font-size:28px}.message-card{padding:16px 17px}.message-copy{font-size:13px}.message-actions{gap:4px;flex-wrap:wrap}.primary-action{font-size:13px}.quiet-action{font-size:12px}.footer-signature{font-size:10px;gap:9px}.footer-school strong,.footer-center strong,.footer-director strong{font-size:10px}.footer-school small,.footer-center span,.footer-director span{font-size:9px}.footer-seal{width:25px;height:25px}.motto-line{width:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

.volume-control{display:flex;align-items:center;gap:6px;color:#788174;font-size:10px;white-space:nowrap}.volume-control input{width:74px;height:4px;accent-color:#a98b48;cursor:pointer}.volume-control input:focus-visible{outline:2px solid #d4b56d;outline-offset:4px;border-radius:6px}@media(max-width:760px){.volume-control input{width:58px}}@media(max-width:430px){.volume-control span{display:none}.volume-control input{width:48px}}