/* The two experience entry pages share a compact, quiet technology style. */
.phonetic-experience-intro,.vocabulary-experience-intro{display:grid!important;grid-template-columns:minmax(0,720px)!important;justify-content:center;align-items:center;width:100%;margin:auto;gap:0!important;padding:24px 16px;box-sizing:border-box}
.phonetic-experience-intro>.phonetic-experience-board,.vocabulary-experience-board{position:relative;isolation:isolate;min-width:0;overflow:hidden;border:1px solid #aadcd9;border-radius:26px;padding:36px 36px 32px;color:#19394a;text-align:left;background:linear-gradient(135deg,#fffffff2,#f0faf8f5);box-shadow:0 16px 40px #164a6110,0 0 22px #5bcfdf12,inset 0 1px 0 #fff}
.phonetic-experience-intro>.phonetic-experience-board::before,.vocabulary-experience-board::before{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(90deg,#48c6d1aa,transparent 55%) top left/65% 2px no-repeat,linear-gradient(0deg,#49c9cf77,transparent) bottom right/2px 45% no-repeat,radial-gradient(circle at 100% 0,#83deee29,transparent 45%)}
.phonetic-experience-intro>.phonetic-experience-board h2,.vocabulary-experience-board h2{margin:0 0 26px;font-size:clamp(24px,2.5vw,32px);font-weight:700;line-height:1.4;letter-spacing:.01em}
.phonetic-experience-intro .phonetic-experience-steps,.vocabulary-experience-board .phonetic-experience-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 28px}
.phonetic-experience-intro .phonetic-experience-steps span,.vocabulary-experience-board .phonetic-experience-steps span{padding:12px 6px;border:1px solid #b8e3e1;border-radius:12px;background:linear-gradient(135deg,#e5f7f4,#e9f7fb);color:#166578;font-size:16px;font-weight:700;text-align:center;box-shadow:inset 0 1px 0 #fff}
.phonetic-experience-intro .phonetic-experience-actions,.vocabulary-experience-board .phonetic-experience-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.phonetic-experience-intro .phonetic-experience-primary-action,.vocabulary-experience-board .phonetic-experience-primary-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:184px;min-height:58px;border:1px solid #ffffff75!important;border-radius:999px!important;padding:14px 24px!important;font-size:19px!important;font-weight:750;letter-spacing:.02em;color:#fff!important;cursor:pointer;box-shadow:0 6px 18px #168c9b25,inset 0 1px 0 #ffffff60!important;transition:transform .18s,box-shadow .18s}
.phonetic-experience-intro .phonetic-experience-primary-action:first-child,.vocabulary-experience-board .phonetic-experience-primary-action:first-child{background:linear-gradient(120deg,#158bcc,#14aaa5)!important}
.phonetic-experience-intro .phonetic-experience-primary-action:nth-child(2),.vocabulary-experience-board .phonetic-experience-primary-action:nth-child(2){background:linear-gradient(120deg,#159e83,#52b877)!important}
.phonetic-experience-primary-action:hover{transform:translateY(-2px)}
.phonetic-experience-primary-action:focus-visible{outline:3px solid #3bafdf;outline-offset:4px}
.vocabulary-experience-board .phonetic-experience-primary-action{flex:1}
@media(max-width:600px){.phonetic-experience-intro>.phonetic-experience-board,.vocabulary-experience-board{padding:26px 20px}.phonetic-experience-intro .phonetic-experience-primary-action,.vocabulary-experience-board .phonetic-experience-primary-action{min-width:0;flex:1 1 180px}.phonetic-experience-intro .phonetic-experience-steps,.vocabulary-experience-board .phonetic-experience-steps{gap:7px}.phonetic-experience-intro .phonetic-experience-steps span,.vocabulary-experience-board .phonetic-experience-steps span{font-size:14px}}
@media(prefers-reduced-motion:reduce){.phonetic-experience-primary-action{transition:none!important;transform:none!important}}