@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--black:#1a1a1a;--white:#fafaf8;--red:#c45a3c;--blue:#3a6b8c;--yellow:#e8d5a3;--gray:#ededea;--gray-dark:#9a9a92;--green:#4a7c64;--font-display:"Syne", sans-serif;--font-body:"Space Grotesk", sans-serif;--border:3px solid var(--black);--border-thin:1.5px solid var(--black)}body{font-family:var(--font-body);background:var(--white);color:var(--black);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100svh}::selection{background:var(--yellow);color:var(--black)}button{font-family:var(--font-body);cursor:pointer}input{font-family:var(--font-body)}.app{flex-direction:column;min-height:100svh;display:flex}.app-header{border-bottom:var(--border);padding:2.5rem 2rem 2rem}.header-meta{letter-spacing:.15em;text-transform:uppercase;color:var(--red);margin-bottom:.5rem;font-size:.75rem;font-weight:700}.app-header h1{font-family:var(--font-display);letter-spacing:-.03em;text-transform:uppercase;font-size:clamp(2.5rem,6vw,4rem);font-weight:800;line-height:.95}main{flex:1;width:100%;max-width:960px;margin:0 auto;padding:0 1.5rem 3rem}.app-footer{border-top:var(--border);align-items:center;gap:.75rem;padding:1.25rem 2rem;display:flex}.app-footer p{letter-spacing:.05em;text-transform:uppercase;color:var(--gray-dark);font-size:.75rem;font-weight:500}.footer-line{background:var(--black);flex:1;height:1.5px}.loading{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;min-height:100svh;display:flex}.loading-spinner{border:var(--border);border-top-color:var(--red);width:48px;height:48px;animation:.6s linear infinite spin}.loading p{letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;font-weight:600}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=640px){.app-header{padding:1.5rem 1rem 1.25rem}main{padding:0 1rem 2rem}}.section-header{align-items:center;gap:.75rem;margin-bottom:1.25rem;display:flex}.section-icon{border:var(--border);background:var(--yellow);flex-shrink:0;place-items:center;width:2rem;height:2rem;font-size:1.1rem;display:grid}.section-header h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;font-size:1.1rem;font-weight:700}.section-line{background:var(--black);flex:1;height:1.5px}.vocab-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0;display:grid}.flash-card{perspective:600px;cursor:pointer;height:130px}.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.16,1,.3,1);position:relative}.flash-card.flipped .card-inner{transform:rotateY(180deg)}.card-front,.card-back{backface-visibility:hidden;border:var(--border);flex-direction:column;justify-content:center;align-items:flex-start;gap:.4rem;width:100%;height:100%;margin:-1.5px;padding:1rem 1.25rem;display:flex;position:absolute;overflow:hidden}.card-front{background:var(--white)}.card-accent{width:4px;height:100%;position:absolute;top:0;left:0}.accent-red{background:var(--red)}.accent-blue{background:var(--blue)}.accent-yellow{background:var(--yellow)}.card-back{color:var(--white);transform:rotateY(180deg)}.back-red{background:var(--red)}.back-blue{background:var(--blue)}.back-yellow{background:var(--black)}.dutch-text,.english-text{font-family:var(--font-display);font-size:1.15rem;font-weight:700}.example-text{opacity:.8;font-size:.75rem;line-height:1.4}.audio-hint{opacity:.7;font-size:.75rem;font-style:italic}.card-meta{gap:.35rem;display:flex}.tag{text-transform:uppercase;letter-spacing:.08em;border:1.5px solid var(--black);padding:.15rem .4rem;font-size:.6rem;font-weight:700}.tag-gender-de{background:var(--yellow);border-color:var(--black)}.tag-gender-het{background:var(--blue);border-color:var(--black);color:var(--white)}@media (width<=640px){.vocab-grid{grid-template-columns:1fr 1fr}.flash-card{height:110px}.card-front,.card-back{padding:.75rem 1rem}.dutch-text,.english-text{font-size:1rem}}.dialogue-section{flex-direction:column;gap:1.5rem;display:flex}.dialogue-switcher{gap:0;display:flex;overflow-x:auto}.dialogue-switch{border:var(--border);background:var(--white);flex-direction:column;flex:1;align-items:flex-start;gap:.15rem;min-width:0;margin-right:-3px;padding:.85rem .75rem;transition:background .15s,color .15s;display:flex}.dialogue-switch:last-child{margin-right:0}.dialogue-switch:hover{background:var(--gray)}.dialogue-switch.active{background:var(--black);color:var(--white)}.switch-title{font-family:var(--font-display);text-transform:uppercase;font-size:.95rem;font-weight:700}.dialogue-container{border:var(--border)}.dialogue-context{border-bottom:var(--border-thin);align-items:stretch;display:flex}.context-bar{background:var(--yellow);flex-shrink:0;width:6px}.dialogue-context p{color:var(--black);opacity:.7;padding:.75rem 1rem;font-size:.8rem;font-weight:500}.dialogue-lines{flex-direction:column;display:flex}.d-line{border-bottom:var(--border-thin);cursor:pointer;align-items:stretch;transition:background .1s;display:flex}.d-line:last-child{border-bottom:none}.d-line:hover{background:var(--gray)}.d-line-num{width:3rem;color:var(--gray-dark);border-right:var(--border-thin);flex-shrink:0;place-items:center;font-size:.65rem;font-weight:700;display:grid}.d-line-content{flex:1;padding:.85rem 1rem}.d-speaker{text-transform:uppercase;letter-spacing:.1em;color:var(--gray-dark);font-size:.65rem;font-weight:700}.d-dutch{font-family:var(--font-display);margin-top:.2rem;font-size:1rem;font-weight:600;line-height:1.4}.d-english-wrap{grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.16,1,.3,1);display:grid}.d-english-wrap.visible{grid-template-rows:1fr}.d-english-wrap>p{overflow:hidden}.d-english{color:var(--gray-dark);border-top:1px solid var(--gray);margin-top:.35rem;padding-top:.35rem;font-size:.85rem}.d-line-indicator{flex-shrink:0;width:6px}.ind-red{background:var(--red)}.ind-blue{background:var(--blue)}.reveal-toggle{border:none;border-top:var(--border);background:var(--white);text-transform:uppercase;letter-spacing:.12em;width:100%;padding:.75rem;font-size:.75rem;font-weight:700;transition:background .15s}.reveal-toggle:hover{background:var(--gray)}@media (width<=640px){.d-line-num{width:2.25rem}.d-line-content{padding:.75rem}}.exercise-section{flex-direction:column;gap:2.5rem;display:flex}.ex-block{border:var(--border)}.ex-header{border-bottom:var(--border-thin);padding:1rem 1.25rem}.ex-header h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;font-size:1.1rem;font-weight:700}.ex-sub{color:var(--gray-dark);margin-top:.15rem;font-size:.8rem}.ex-body{padding:0}.tf-row{border-bottom:var(--border-thin);padding:1rem 1.25rem;transition:background .2s}.tf-row:last-child{border-bottom:none}.tf-row.correct{background:color-mix(in oklch, var(--green) 8%, var(--white))}.tf-row.incorrect{background:color-mix(in oklch, var(--red) 8%, var(--white))}.tf-statement{margin-bottom:.6rem;font-size:.9rem;font-weight:500;line-height:1.5}.tf-actions{gap:0;display:flex}.tf-btn{border:var(--border);background:var(--white);text-transform:uppercase;letter-spacing:.05em;flex:1;margin-right:-3px;padding:.5rem;font-size:.8rem;font-weight:700;transition:background .1s,color .1s}.tf-btn:last-child{margin-right:0}.tf-btn:hover{background:var(--gray)}.tf-btn.picked{background:var(--black);color:var(--white)}.ex-explain{color:var(--red);margin-top:.5rem;font-size:.8rem;font-weight:500}.fill-row{border-bottom:var(--border-thin);padding:1rem 1.25rem;transition:background .2s}.fill-row:last-child{border-bottom:none}.fill-row.correct{background:color-mix(in oklch, var(--green) 8%, var(--white))}.fill-row.incorrect{background:color-mix(in oklch, var(--red) 8%, var(--white))}.fill-prompt{margin-bottom:.5rem;font-size:.9rem;font-weight:500}.fill-input{border:var(--border);background:var(--white);width:100%;padding:.55rem .75rem;font-size:.9rem;transition:background .1s}.fill-input:focus{background:var(--yellow);outline:none}.fill-answer{color:var(--green);margin-top:.4rem;font-size:.8rem;font-weight:600}.match-grid{gap:0;display:flex}.match-col{flex-direction:column;flex:1;display:flex}.match-col:first-child{border-right:var(--border)}.match-col-label{text-transform:uppercase;letter-spacing:.12em;color:var(--gray-dark);border-bottom:var(--border-thin);padding:.5rem .75rem;font-size:.65rem;font-weight:700}.match-item{border:none;border-bottom:var(--border-thin);background:var(--white);text-align:left;padding:.65rem .75rem;font-size:.85rem;font-weight:500;transition:background .1s}.match-item:last-child{border-bottom:none}.match-item:hover:not(:disabled){background:var(--gray)}.match-item.picked{background:var(--black);color:var(--white)}.match-item.matched{background:color-mix(in oklch, var(--green) 10%, var(--white));color:var(--green);cursor:default}.match-item.wrong{background:color-mix(in oklch, var(--red) 12%, var(--white));animation:.35s cubic-bezier(.36,.07,.19,.97) shakeX}@keyframes shakeX{0%,to{transform:translate(0)}20%{transform:translate(-5px)}60%{transform:translate(4px)}}.ex-footer{border-top:var(--border-thin)}.ex-check{background:var(--black);width:100%;color:var(--white);text-transform:uppercase;letter-spacing:.1em;border:none;padding:.85rem;font-size:.8rem;font-weight:700;transition:opacity .15s}.ex-check:hover:not(:disabled){opacity:.85}.ex-check:disabled{opacity:.35;cursor:not-allowed}.ex-score{border-top:var(--border-thin);background:var(--gray);align-items:center;gap:1rem;padding:1.25rem;display:flex}.score-num{font-family:var(--font-display);font-size:1.75rem;font-weight:800;line-height:1}.score-label{text-transform:uppercase;letter-spacing:.05em;flex:1;font-size:.85rem;font-weight:700}.ex-retry{border:var(--border);background:var(--white);text-transform:uppercase;letter-spacing:.1em;padding:.45rem 1.25rem;font-size:.75rem;font-weight:700;transition:background .1s}.ex-retry:hover{background:var(--black);color:var(--white)}.grammar-section{flex-direction:column;gap:0;display:flex}.grammar-block{border:var(--border);margin-bottom:-3px}.grammar-header{border-bottom:var(--border-thin);align-items:stretch;display:flex}.grammar-num{width:3.5rem;font-family:var(--font-display);border-right:var(--border-thin);flex-shrink:0;place-items:center;font-size:1.1rem;font-weight:800;display:grid}.num-red{background:var(--red);color:var(--white)}.num-blue{background:var(--blue);color:var(--white)}.num-yellow{background:var(--yellow);color:var(--black)}.grammar-header h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;padding:.85rem 1.25rem;font-size:1rem;font-weight:700}.grammar-body{padding:1.25rem 1.25rem 1.25rem 4.75rem}.grammar-body p{color:var(--black);font-size:.95rem;line-height:1.7}.grammar-body strong{background:var(--yellow);padding:.05em .25em;font-weight:700}@media (width<=640px){.grammar-body{padding:1rem}.grammar-num{width:2.75rem;font-size:.95rem}}.knowledge-section{flex-direction:column;gap:2.5rem;display:flex}.k-block{border:var(--border)}.k-header{border-bottom:var(--border-thin);padding:1rem 1.25rem}.k-header h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;font-size:1.05rem;font-weight:700}.k-desc{color:var(--gray-dark);margin-top:.15rem;font-size:.8rem}.k-table-wrap{-webkit-overflow-scrolling:touch;overflow-x:auto}.k-table{border-collapse:collapse;width:100%;font-size:.85rem}.k-table th{text-transform:uppercase;letter-spacing:.1em;text-align:left;border-bottom:var(--border);background:var(--gray);white-space:nowrap;padding:.6rem .75rem;font-size:.65rem;font-weight:700}.k-table td{border-bottom:var(--border-thin);vertical-align:top;padding:.55rem .75rem}.k-table tr:last-child td{border-bottom:none}.k-table .cell-label{text-transform:uppercase;letter-spacing:.05em;color:var(--gray-dark);white-space:nowrap;font-size:.75rem;font-weight:700}.k-table .cell-empty{color:var(--gray-dark)}.k-table td:nth-child(2),.k-table td:nth-child(5){font-weight:600;font-family:var(--font-display)}.k-table tbody tr:nth-child(2n){background:color-mix(in oklch, var(--gray) 40%, var(--white))}.k-examples{flex-direction:column;display:flex}.k-example-row{border-bottom:var(--border-thin);padding:1rem 1.25rem}.k-example-row:last-child{border-bottom:none}.k-example-pair{align-items:center;gap:.75rem;display:flex}.k-ex-item{flex-direction:column;flex:1;gap:.1rem;display:flex}.k-ex-label{text-transform:uppercase;letter-spacing:.12em;color:var(--gray-dark);font-size:.6rem;font-weight:700}.k-ex-text{font-family:var(--font-display);font-size:.95rem;font-weight:600}.k-ex-arrow{color:var(--gray-dark);flex-shrink:0;padding-top:.8rem;font-size:1.1rem}.k-ex-note{color:var(--gray-dark);margin-top:.5rem;padding-left:0;font-size:.8rem;line-height:1.5}@media (width<=640px){.k-table{font-size:.78rem}.k-table th,.k-table td{padding:.45rem .5rem}.k-example-pair{flex-direction:column;align-items:flex-start;gap:.35rem}.k-ex-arrow{display:none}}.k-numbers{flex-direction:column;display:flex}.num-group{border-bottom:var(--border-thin)}.num-group:last-child{border-bottom:none}.num-group-header{border-bottom:var(--border-thin);background:var(--gray);align-items:baseline;gap:.75rem;padding:.75rem 1.25rem;display:flex}.num-group-label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:700}.num-group-note{color:var(--gray-dark);font-size:.75rem}.num-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));display:grid}.num-cell{border-right:var(--border-thin);border-bottom:var(--border-thin);align-items:baseline;gap:.5rem;padding:.5rem 1rem;display:flex}.num-digit{font-family:var(--font-display);min-width:1.75rem;color:var(--gray-dark);text-align:right;font-size:.85rem;font-weight:800}.num-word{overflow-wrap:break-word;word-break:break-word;min-width:0;font-size:.88rem;font-weight:500}@media (width<=640px){.num-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.num-cell{gap:.35rem;padding:.4rem .75rem}}.lesson-page{flex-direction:column;display:flex}.tab-nav{border-bottom:var(--border);z-index:10;background:var(--white);margin-top:0;display:flex;position:sticky;top:0}.tab-btn{border:none;border-right:var(--border);background:0 0;flex-direction:column;flex:1;align-items:center;gap:.15rem;padding:1rem .5rem;transition:background .15s,color .15s;display:flex;position:relative}.tab-btn:last-child{border-right:none}.tab-btn:hover{background:var(--gray)}.tab-btn.active{background:var(--black);color:var(--white)}.tab-num{letter-spacing:.1em;opacity:.5;font-size:.65rem;font-weight:700}.tab-btn.active .tab-num{opacity:.6;color:var(--yellow)}.tab-label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;font-size:clamp(.7rem,2vw,.9rem);font-weight:700}.tab-content{padding-top:2rem;animation:.35s cubic-bezier(.16,1,.3,1) contentIn}@keyframes contentIn{0%{opacity:0;transform:translateY(12px)}}.learn-tab{flex-direction:column;gap:3rem;display:flex}@media (width<=640px){.tab-btn{padding:.75rem .25rem}}