.learning-dialog{box-sizing:border-box;width:calc(100vw - 16px);max-width:1100px;height:calc(100dvh - 16px);max-height:900px;padding:16px;overflow:hidden;color:var(--ink,#234652)}.learning-dialog[open]{display:flex;flex-direction:column;gap:10px}.learning-header,.learning-round,.learning-footer,.builder-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}.learning-header h2{font-size:30px;margin:0}.learning-dialog button{min-height:44px;box-shadow:none;touch-action:manipulation}.learning-dialog p{margin:0}.learning-dialog [hidden]{display:none!important}.learning-dialog [aria-pressed=true]{outline:3px solid #477a88;outline-offset:-3px;background:#fff3d5}.learning-intro{flex:1;min-height:0;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:10px}.learning-intro>span{font-size:55px}.learning-intro h3{font-size:28px;margin:0}.learning-levels{display:flex;gap:8px;flex-shrink:0}.learning-levels button{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;align-items:center}.learning-levels small{font-size:12px}.learning-tip{text-align:center;font-size:13px}.learning-footer{min-height:44px}.learning-footer p{font-size:14px;line-height:1.4}.pattern-workspace{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:20px}.pattern-sequence{display:grid;grid-template-columns:repeat(var(--cells),minmax(0,1fr));gap:8px}.pattern-cell{display:flex;align-items:center;justify-content:center;min-height:0;height:clamp(45px,13vh,110px);background:#eef5f1;border:1px solid #bad3d1;border-radius:12px;font-size:clamp(24px,5vw,54px);min-width:0}.pattern-missing{background:#fff3d5;border:2px dashed #a58e52}.pattern-cell svg{width:75%;height:75%;max-height:80px}.pattern-cell span{max-width:100%;line-height:1}.pattern-prompt{text-align:center;font-weight:700}.pattern-answers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(700px,100%);margin:0 auto}.learning-dialog .pattern-answer{height:clamp(64px,18vh,130px);font-size:clamp(32px,6vw,65px);padding:10px;display:flex;align-items:center;justify-content:center;min-width:0}.pattern-answer svg{height:100%;width:100%;max-height:90px}.pattern-progress{color:#a88635;font-size:23px;white-space:nowrap}.pattern-answer.answer-correct{background:#e5f4eb;border:3px solid #80b89a;opacity:1}.builder-pictures{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.builder-pictures button{display:flex;flex-direction:column;align-items:center;min-width:0;min-height:0;gap:6px;padding:6px}.builder-pictures svg{flex:1;min-height:0;width:100%;height:calc(100% - 30px)}.builder-pictures span{font-size:14px}.builder-reference{width:90px;height:60px;flex-shrink:0;background:#fffdf8;border:1px solid #c7d8d8;border-radius:6px}.builder-reference svg{width:100%;height:100%}.builder-workspace{display:flex;gap:14px;flex:1;min-height:0}.builder-board-space{flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#edf4f0;border-radius:14px}.builder-board{max-width:100%;max-height:100%;touch-action:none;border-radius:10px;border:2px solid #bad3d1;box-sizing:border-box}.builder-board [role=button]:focus-visible{outline:none;filter:drop-shadow(0 0 4px #477a88)}.builder-tray{display:flex;flex-direction:column;justify-content:center;width:250px;gap:8px;min-height:0}.builder-tray p{font-size:14px;line-height:1.3}.builder-pieces{flex:1;min-height:0;max-height:270px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px}.learning-dialog .builder-piece{min-width:0;min-height:0;padding:5px;touch-action:none;font-size:28px;color:#33835c;overflow:hidden}.builder-piece svg{display:block;width:100%;height:100%;min-height:0}.builder-tools{display:flex;gap:8px;flex-shrink:0}.builder-tools button{flex:1}.builder-pager{font-size:13px}.builder-pager button{font-size:12px;padding:6px}.builder-ghost{position:fixed;pointer-events:none;z-index:20;width:100px;height:100px;transform:translate(-50%,-50%);opacity:.9}.builder-ghost svg{width:100%;height:100%}.learning-won .pattern-progress{color:#558766}.learning-won .builder-board,.learning-won .pattern-sequence{animation:learning-cheer .7s ease-in-out 8}.child-pattern-tile{background:#e9e4f5}.child-builder-tile{background:#e6f2dc}@keyframes learning-cheer{50%{transform:scale(.98)}}@media(prefers-reduced-motion:reduce){.learning-won .builder-board,.learning-won .pattern-sequence{animation:none}}@media(orientation:portrait){.builder-workspace{flex-direction:column}.builder-tray{width:100%;height:230px;flex-shrink:0;gap:6px}.builder-pieces{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr}.builder-tools{position:static}.builder-reference{width:65px;height:49px}}@media(max-height:550px) and (orientation:landscape){.learning-dialog{padding:8px;gap:6px}.learning-header h2{font-size:25px}.learning-header button,.learning-round button{font-size:12px}.learning-intro{gap:4px}.learning-intro>span{font-size:30px}.learning-intro h3{font-size:22px}.learning-intro p,.learning-tip{font-size:12px}.learning-levels button{padding:6px}.learning-levels small{font-size:11px}.pattern-workspace{gap:8px}.pattern-cell{height:60px}.learning-dialog .pattern-answer{height:75px}.learning-footer p{font-size:12px}.builder-tray{width:230px;gap:5px}.builder-tray p{font-size:12px}.builder-pieces{gap:5px}.builder-reference{width:60px;height:44px}.learning-round{font-size:13px}}@media(max-width:450px){.learning-header h2{font-size:25px}.learning-round{font-size:12px;gap:5px}.learning-round button{font-size:11px;padding:5px}.learning-levels{gap:5px}.learning-levels button{padding:6px}.learning-levels small{font-size:11px}.pattern-sequence{gap:4px}.pattern-cell{font-size:25px;border-radius:8px}.pattern-progress{font-size:17px}.pattern-workspace{gap:15px}.pattern-answers{gap:8px}.learning-footer p{font-size:12px}.builder-pictures{gap:5px}.builder-pictures span{font-size:12px}.builder-tray{height:215px}.builder-reference{width:60px;height:45px}}

.pattern-hint-cell{outline:3px solid #b79a4d;outline-offset:-3px;background:#fff3d5}