.structure-main{display:grid;gap:1.15rem;padding-bottom:clamp(3rem,7vw,5rem)}
.structure-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,.58fr);gap:clamp(1.4rem,4vw,3.5rem);align-items:center;padding:clamp(1rem,2vw,1.6rem) 0}.structure-hero-copy{max-width:48rem}.structure-hero .display-title{font-size:clamp(2.45rem,5.5vw,5rem);line-height:.94;margin:.25rem 0 .8rem}.structure-hero-mark{position:relative;min-height:12rem;display:grid;place-items:center;perspective:900px;contain:layout paint}.hero-letter{position:absolute;width:5.15rem;height:5.15rem;border-radius:1.25rem;display:grid;place-items:center;font-size:2.3rem;font-weight:1000;color:var(--purple);background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,#fff),color-mix(in srgb,var(--surface-lilac) 82%,#fff));border:1px solid color-mix(in srgb,var(--purple) 20%,var(--line));box-shadow:0 10px 0 color-mix(in srgb,var(--purple) 10%,var(--line)),0 22px 42px rgba(61,69,126,.16);transform-style:preserve-3d}.hero-letter.is-a{transform:translate(-3rem,-.8rem) rotate(-9deg) rotateY(12deg)}.hero-letter.is-e{transform:translate(3rem,.75rem) rotate(8deg) rotateY(-12deg);color:var(--pink)}.hero-cut{position:absolute;width:4.5rem;height:.48rem;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--pink));transform:rotate(-28deg);box-shadow:0 0 18px color-mix(in srgb,var(--purple) 24%,transparent)}.hero-syllable{position:absolute;bottom:.2rem;padding:.42rem .72rem;border-radius:999px;background:color-mix(in srgb,var(--surface) 93%,transparent);border:1px solid var(--line);box-shadow:0 7px 18px rgba(47,56,97,.09);font-size:.78rem;font-weight:950;letter-spacing:.12em;color:var(--muted)}
.structure-picker{padding:clamp(1rem,2.6vw,1.55rem)}.structure-picker .section-head{margin-bottom:1rem}.structure-picker .section-title{font-size:clamp(1.45rem,2.2vw,2rem);margin:.15rem 0}.structure-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,2vw,1.2rem)}.structure-choice{position:relative;min-width:0;min-height:12.5rem;padding:clamp(1rem,2.2vw,1.35rem);display:grid;grid-template-columns:minmax(8rem,.45fr) minmax(0,1fr) auto;gap:clamp(.8rem,2vw,1.2rem);align-items:center;text-align:left;color:var(--ink);font:inherit;border:1px solid color-mix(in srgb,var(--purple) 16%,var(--line));border-radius:clamp(1.2rem,2.6vw,1.7rem);background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 98%,#fff),color-mix(in srgb,var(--surface-lilac) 72%,#fff));box-shadow:0 7px 0 color-mix(in srgb,var(--line-strong) 52%,transparent),0 22px 42px rgba(48,59,112,.11);cursor:pointer;overflow:hidden;isolation:isolate;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.structure-choice::before{content:"";position:absolute;inset:-35% -25%;z-index:-1;background:radial-gradient(circle at 20% 30%,color-mix(in srgb,var(--cyan) 17%,transparent),transparent 33%),radial-gradient(circle at 80% 70%,color-mix(in srgb,var(--pink) 14%,transparent),transparent 36%);transform:translateZ(0)}.structure-choice.is-syllables::before{background:radial-gradient(circle at 22% 28%,color-mix(in srgb,var(--yellow) 18%,transparent),transparent 34%),radial-gradient(circle at 80% 74%,color-mix(in srgb,var(--purple) 15%,transparent),transparent 36%)}.structure-choice[aria-pressed="true"]{border-color:color-mix(in srgb,var(--purple) 54%,var(--line));box-shadow:0 7px 0 color-mix(in srgb,var(--purple) 20%,var(--line)),0 24px 48px rgba(73,60,166,.17),0 0 0 3px color-mix(in srgb,var(--purple) 9%,transparent)}.choice-copy{display:grid;gap:.32rem}.choice-copy small{font-size:.68rem;text-transform:uppercase;letter-spacing:.13em;font-weight:1000;color:var(--purple)}.choice-copy strong{font-size:clamp(1.3rem,2vw,1.8rem);line-height:1}.choice-copy span{color:var(--muted);font-size:.88rem;line-height:1.45}.choice-arrow{width:2.45rem;height:2.45rem;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--purple) 10%,var(--surface));color:var(--purple);font-weight:1000;font-size:1.1rem}.choice-visual{position:relative;min-height:8.7rem;display:grid;place-items:center;perspective:700px;transform-style:preserve-3d;contain:layout paint}.choice-depth{position:absolute;left:14%;right:14%;bottom:8%;height:1.1rem;border-radius:50%;background:rgba(51,55,93,.16);filter:blur(7px);transform:translateZ(-20px)}.vowels-visual b{position:absolute;width:3rem;height:3rem;border-radius:.82rem;display:grid;place-items:center;background:linear-gradient(150deg,#fff,color-mix(in srgb,var(--surface-lilac) 72%,#fff));border:1px solid color-mix(in srgb,var(--purple) 20%,var(--line));box-shadow:0 5px 0 color-mix(in srgb,var(--purple) 12%,var(--line)),0 12px 22px rgba(60,63,119,.12);font-size:1.28rem;color:var(--purple);font-weight:1000}.vowels-visual b:nth-of-type(1){transform:translate(-2.25rem,-1.5rem) rotate(-8deg) translateZ(18px)}.vowels-visual b:nth-of-type(2){transform:translate(2.1rem,-1.35rem) rotate(7deg) translateZ(8px);color:var(--blue)}.vowels-visual b:nth-of-type(3){transform:translate(-1.8rem,2rem) rotate(6deg) translateZ(5px);color:var(--pink)}.vowels-visual b:nth-of-type(4){transform:translate(2.3rem,2rem) rotate(-5deg) translateZ(16px);color:color-mix(in srgb,var(--purple) 65%,var(--pink))}.vowel-orbit{position:absolute;width:7.6rem;height:7.6rem;border-radius:50%;border:1px dashed color-mix(in srgb,var(--purple) 30%,transparent);transform:rotateX(62deg);opacity:.7}.syllables-visual{grid-template-columns:auto auto auto auto auto;gap:.25rem}.syllable-block{position:relative;z-index:2;min-width:2.65rem;height:3.5rem;padding:0 .48rem;border-radius:.9rem;display:grid;place-items:center;font-size:1.25rem;font-weight:1000;background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--surface-lilac) 72%,#fff));border:1px solid color-mix(in srgb,var(--purple) 20%,var(--line));box-shadow:0 5px 0 color-mix(in srgb,var(--purple) 11%,var(--line)),0 12px 22px rgba(56,63,107,.1)}.syllables-visual>i{width:.55rem;height:2rem;border-radius:99px;background:linear-gradient(180deg,var(--pink),var(--purple));transform:rotate(12deg);opacity:.75}.syllable-block.is-one{transform:rotate(-5deg) translateY(-.35rem);color:var(--pink)}.syllable-block.is-two{transform:translateY(.3rem);color:var(--purple)}.syllable-block.is-three{transform:rotate(5deg) translateY(-.15rem);color:var(--blue)}
.structure-game{display:grid;gap:1rem;scroll-margin-top:6rem}.route-card{padding:clamp(1rem,2.4vw,1.45rem);display:grid;grid-template-columns:minmax(0,.68fr) minmax(26rem,1.32fr);gap:1rem;align-items:center}.route-card h2{font-size:1.25rem;margin:.15rem 0}.route-card p{margin:0;color:var(--muted);font-size:.86rem}.structure-route-options{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}.route-option{min-height:4.3rem;border:1px solid var(--line);border-radius:1rem;background:color-mix(in srgb,var(--surface) 97%,transparent);color:var(--ink);font:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.33rem;flex-wrap:wrap;padding:.65rem;box-shadow:0 4px 0 color-mix(in srgb,var(--line-strong) 50%,transparent);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.route-option span{font-size:1rem}.route-option i{font-style:normal;color:var(--muted);font-weight:900}.route-option strong{width:100%;font-size:.72rem;text-align:center}.route-option.is-active{border-color:color-mix(in srgb,var(--purple) 56%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,#fff),color-mix(in srgb,var(--surface-lilac) 80%,#fff));box-shadow:0 4px 0 color-mix(in srgb,var(--purple) 24%,var(--line)),0 10px 20px rgba(78,65,168,.11)}
.structure-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}.structure-stat{min-width:0;padding:.75rem .85rem;border:1px solid var(--line);border-radius:1rem;background:color-mix(in srgb,var(--surface) 95%,transparent);box-shadow:0 5px 0 color-mix(in srgb,var(--line) 80%,transparent);display:grid;gap:.15rem}.structure-stat span{font-size:.68rem;color:var(--muted);font-weight:850}.structure-stat strong{font-size:1.08rem;color:var(--ink)}
.structure-stage{position:relative;overflow:hidden;padding:clamp(1rem,3vw,1.65rem);min-height:30rem}.structure-stage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}.structure-stage-head>div:first-child{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.exercise-count{font-size:.75rem;color:var(--muted);font-weight:900}.structure-badge{padding:.35rem .6rem;border-radius:999px;background:color-mix(in srgb,var(--purple) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--purple) 16%,var(--line));font-size:.68rem;font-weight:1000;color:var(--purple)}.structure-controls{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}.structure-pill{min-height:2.2rem;padding:.4rem .65rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:.7rem;font-weight:900;cursor:pointer}.structure-progress{height:.52rem;margin:.8rem 0 0;border-radius:99px;background:color-mix(in srgb,var(--line) 76%,transparent);overflow:hidden}.structure-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--purple),var(--pink));transition:width .24s ease}.structure-question{text-align:center;padding:clamp(1.6rem,5vw,3.25rem) .5rem 1.2rem}.structure-context{margin:0 auto .4rem;color:var(--purple);font-size:.72rem;font-weight:950;letter-spacing:.03em}.structure-prompt{margin:0 auto .6rem;color:var(--muted);font-size:.9rem;font-weight:780}.structure-word{margin:0;font-size:clamp(2.65rem,8vw,5.4rem);line-height:1;letter-spacing:-.045em;overflow-wrap:anywhere}.structure-translation{min-height:1.35rem;margin:.6rem 0 0;color:var(--muted);font-size:.9rem;font-weight:800}.structure-listen{margin-top:1rem}.structure-board{min-height:5.5rem;display:flex;justify-content:center;align-items:center;gap:.42rem;flex-wrap:wrap;padding:.4rem}.structure-letter{min-width:3.3rem;height:3.75rem;padding:.45rem .65rem;border-radius:1rem;border:1px solid var(--line);background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-lilac) 48%,var(--surface)));color:var(--ink);font:inherit;font-size:1.45rem;font-weight:1000;box-shadow:0 5px 0 color-mix(in srgb,var(--line-strong) 48%,transparent),0 10px 18px rgba(55,65,105,.08);cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease}.structure-letter.is-selected{background:linear-gradient(145deg,color-mix(in srgb,var(--purple) 14%,var(--surface)),color-mix(in srgb,var(--pink) 9%,var(--surface)));border-color:color-mix(in srgb,var(--purple) 52%,var(--line));color:var(--purple);transform:translateY(-3px)}.structure-letter.is-correct{background:color-mix(in srgb,#40bd83 13%,var(--surface));border-color:color-mix(in srgb,#2ca96f 50%,var(--line));color:#16734a}.structure-letter.is-wrong{background:color-mix(in srgb,#f0a64e 14%,var(--surface));border-color:color-mix(in srgb,#dc8b2b 48%,var(--line));color:#92520d}.structure-syllable-board{display:flex;justify-content:center;align-items:center;gap:.22rem;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;padding:.5rem .2rem 1rem;max-width:100%}.structure-syllable-letter{flex:0 0 auto;min-width:2.9rem;height:3.6rem;border:1px solid var(--line);border-radius:.9rem;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-lilac) 40%,var(--surface)));display:grid;place-items:center;font-size:1.35rem;font-weight:1000;box-shadow:0 4px 0 color-mix(in srgb,var(--line-strong) 45%,transparent)}.structure-gap{flex:0 0 auto;width:1.75rem;height:3.15rem;border:1px dashed color-mix(in srgb,var(--purple) 24%,var(--line-strong));border-radius:.65rem;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--muted);font:inherit;font-size:1.1rem;font-weight:1000;cursor:pointer}.structure-gap.is-selected{background:color-mix(in srgb,var(--purple) 11%,var(--surface));border-style:solid;border-color:var(--purple);color:var(--purple)}.structure-gap.is-correct{background:color-mix(in srgb,#40bd83 13%,var(--surface));border-style:solid;border-color:#2ca96f;color:#16734a}.structure-gap.is-wrong{background:color-mix(in srgb,#f0a64e 14%,var(--surface));border-style:solid;border-color:#dc8b2b;color:#92520d}.structure-hint{text-align:center;color:var(--muted);font-size:.78rem;font-weight:800;margin:.45rem auto}.structure-actions{display:flex;justify-content:center;gap:.65rem;margin-top:1rem}.structure-feedback{min-height:3.6rem;max-width:44rem;margin:.85rem auto 0;border-radius:1rem;padding:.8rem 1rem;display:grid;place-items:center;text-align:center;font-size:.9rem;font-weight:950}.structure-feedback.is-ok{background:color-mix(in srgb,#36bd7d 11%,var(--surface));color:#16734a;border:1px solid color-mix(in srgb,#36bd7d 38%,var(--line))}.structure-feedback.is-try{background:color-mix(in srgb,#f0a64e 12%,var(--surface));color:#85500f;border:1px solid color-mix(in srgb,#e09332 38%,var(--line))}.structure-celebrate{position:absolute;inset:0;pointer-events:none;overflow:hidden}.structure-spark{position:absolute;width:.55rem;height:.55rem;border-radius:50%;background:var(--purple);animation:structure-spark .75s ease-out forwards}.structure-spark:nth-child(3n+2){background:var(--pink)}.structure-spark:nth-child(3n+3){background:var(--yellow)}
.structure-finish{text-align:center;padding:clamp(1.6rem,4vw,2.5rem)}.finish-medal{width:4.5rem;height:4.5rem;margin:0 auto .7rem;border-radius:1.3rem;display:grid;place-items:center;font-size:2rem;color:#fff;background:linear-gradient(145deg,var(--yellow),color-mix(in srgb,var(--pink) 55%,var(--yellow)));box-shadow:0 7px 0 color-mix(in srgb,#b57f13 45%,var(--line)),0 18px 35px rgba(151,112,22,.2);transform:rotate(-4deg)}.structure-finish h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:.35rem}.structure-final{font-size:1rem;font-weight:900;color:var(--muted)}.structure-summary{max-width:42rem;margin:1rem auto;display:grid;gap:.5rem;text-align:left}.structure-summary>div{padding:.72rem .85rem;border:1px solid var(--line);border-radius:.85rem;background:color-mix(in srgb,var(--surface-lilac) 36%,var(--surface));font-size:.82rem}.structure-finish-actions{display:flex;justify-content:center;gap:.65rem;flex-wrap:wrap}.structure-loading{text-align:center;padding:1rem;font-weight:900;color:var(--muted)}
@media(hover:hover) and (pointer:fine){.structure-choice:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--purple) 42%,var(--line));box-shadow:0 9px 0 color-mix(in srgb,var(--purple) 13%,var(--line)),0 30px 54px rgba(54,61,116,.17)}.structure-choice:hover .choice-arrow{transform:translateX(3px)}.route-option:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--purple) 34%,var(--line))}.structure-letter:hover,.structure-gap:hover{border-color:color-mix(in srgb,var(--purple) 48%,var(--line));transform:translateY(-2px)}}
@keyframes structure-spark{0%{opacity:0;transform:translateY(1.1rem) scale(.5)}30%{opacity:1}100%{opacity:0;transform:translateY(-4.5rem) translateX(var(--spark-x,0)) scale(1.15)}}
@media(max-width:900px){.structure-hero{grid-template-columns:1fr}.structure-hero-mark{min-height:9rem}.route-card{grid-template-columns:1fr}.structure-route-options{max-width:44rem}.structure-choice{grid-template-columns:8rem 1fr auto}}
@media(max-width:720px){.structure-choice-grid{grid-template-columns:1fr}.structure-choice{min-height:10.5rem}.structure-stats{grid-template-columns:repeat(2,1fr)}.structure-route-options{grid-template-columns:1fr}.route-option{min-height:3.6rem}.structure-stage-head{align-items:flex-start}.structure-question{padding-top:1.6rem}}
@media(max-width:480px){.structure-main{gap:.8rem}.structure-choice{grid-template-columns:6.3rem minmax(0,1fr) auto;padding:.85rem;gap:.65rem}.choice-visual{min-height:7rem;transform:scale(.86)}.choice-copy span{font-size:.8rem}.choice-arrow{width:2.1rem;height:2.1rem}.structure-stage{padding:.85rem}.structure-controls{width:100%;justify-content:flex-start}.structure-stage-head{flex-wrap:wrap}.structure-letter{min-width:2.65rem;height:3.25rem;padding:.3rem .45rem;font-size:1.2rem}.structure-syllable-letter{min-width:2.35rem;height:3.15rem;font-size:1.15rem}.structure-gap{width:1.45rem;height:2.8rem}.structure-word{font-size:clamp(2.5rem,16vw,4rem)}}
@media(prefers-reduced-motion:reduce){.structure-choice,.route-option,.choice-arrow,.structure-letter,.structure-gap,.structure-progress i{transition:none!important}.structure-spark{animation:none!important;display:none}}
@media(forced-colors:active){.structure-choice,.choice-visual b,.syllable-block,.route-option,.structure-stat,.structure-letter,.structure-syllable-letter,.structure-gap,.structure-badge,.structure-pill,.structure-feedback,.finish-medal{background:Canvas!important;color:CanvasText!important;border:1px solid CanvasText!important;box-shadow:none!important}.choice-depth,.hero-cut,.vowel-orbit{display:none}}
.structure-title-listen{margin-top:.9rem}
