@font-face{font-family:Lab;src:url("lab-rounded.woff") format("woff");font-display:swap}
*{box-sizing:border-box}body{margin:0;background:#b98956;color:#fff9e9;font-family:Lab,"Yu Gothic",sans-serif;font-weight:700}button,input{font:inherit}button{border:0;cursor:pointer;min-height:60px;border-radius:18px;padding:14px 18px;background:#f6d465;color:#254b40;box-shadow:0 5px 0 #ad8d45}button:focus-visible,input:focus-visible{outline:4px solid white;outline-offset:3px}button:disabled{opacity:.65;cursor:default}button:active:not(:disabled){transform:translateY(2px)}#app{min-height:100svh;border:14px solid #b98956;box-shadow:inset 0 0 0 3px #795d3e,inset 0 0 45px #102d28;background:radial-gradient(ellipse at top,#326557,#1b443b);padding:22px clamp(14px,4vw,55px)}.wrap{max-width:930px;margin:auto}.top{display:flex;justify-content:space-between;align-items:center;gap:10px}.top h1{font-size:clamp(25px,4vw,40px);margin:10px;text-align:center;color:#fff0bd}.back{background:#a9dce5;min-height:45px;font-size:16px;box-shadow:0 4px 0 #679ca9}.heading{text-align:center;margin:25px 0;font-size:clamp(24px,4vw,34px)}.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:28px auto;max-width:720px}.tile{min-height:135px;font-size:clamp(24px,4vw,34px)}.tile:nth-child(2n){background:#a9dce5;box-shadow:0 5px 0 #679ca9}.tile:nth-child(3n){background:#efb77e;box-shadow:0 5px 0 #bd8b5b}.tile:nth-child(4n){background:#b9dda8;box-shadow:0 5px 0 #7da16c}.muted{text-align:center;color:#dcebe3}.levels{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.level{min-width:105px;font-size:22px}.level:nth-child(even){background:#a9dce5}.problem{background:#326657;border-radius:22px;padding:24px 15px;text-align:center;min-height:155px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin:22px 0}.prompt{font-size:clamp(23px,4.2vw,40px)}.fraction{display:inline-flex;flex-direction:column;vertical-align:middle;align-items:center;line-height:1.2;min-width:1.5em}.fraction > span:first-child{border-bottom:3px solid currentColor;padding:0 .2em .12em}.fraction > span:last-child{padding-top:.12em}.answers{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}.answer{min-width:145px;min-height:95px;font-size:clamp(26px,4vw,42px);background:#f6d465}.answer:nth-child(2){background:#a9dce5;box-shadow:0 5px 0 #679ca9}.answer:nth-child(3){background:#f2b9c9;box-shadow:0 5px 0 #b88296}.answer:disabled{opacity:.9}.progress{height:10px;background:#123d33;border-radius:12px;overflow:hidden;margin:16px 0}.progress div{height:100%;background:#f6d465}.feedback{text-align:center;min-height:72px;margin:15px auto;color:#fff0bd;font-size:23px}.feedback small{display:block;font-size:17px;margin-top:8px;color:#fff}.entry{display:flex;justify-content:center;align-items:center;gap:8px}.entry input{width:150px;min-height:62px;font-size:34px;text-align:center;border-radius:14px;border:3px solid #e8c46d;background:#fffdf1;color:#254b40}.keypad{display:grid;grid-template-columns:repeat(3,1fr);max-width:330px;gap:9px;margin:16px auto}.keypad button{min-height:53px;font-size:25px;padding:7px;background:#e5ecdc;box-shadow:0 3px 0 #a4b4a3}.keypad .go{background:#f6d465}.results{display:grid;grid-template-columns:1fr 1fr;gap:14px}.panel{background:#37695b;border-radius:17px;padding:18px;text-align:center}.big{font-size:clamp(30px,5vw,50px);margin:10px 0}.gold{color:#ffe28a}.actions{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin:24px auto}.secondary{background:#a9dce5;box-shadow:0 5px 0 #679ca9}.record{margin:12px 0;padding:14px;border-radius:15px;background:#37695b}.bars{display:flex;gap:8px;height:140px;align-items:end;justify-content:center;margin:15px 0}.barcol{width:55px;text-align:center;font-size:13px}.bar{background:#a9dce5;border-radius:7px 7px 0 0}.bar.perfect{background:#f6d465}.small{font-size:15px}.notice{text-align:center;font-size:15px;color:#dcebe3}.empty{color:#dcebe3;text-align:center}.count{text-align:right;color:#e3ede5}.hint{color:#fff0bd}.note{font-size:14px;color:#dcebe3;text-align:center}@media(max-width:600px){#app{border-width:9px;padding:14px}.tile{min-height:105px}.tiles{gap:12px}.answer{min-width:85px;min-height:80px;padding:10px}.level{min-width:85px}.top h1{font-size:24px}.results{gap:9px}.panel{padding:12px}}
/* v0.2.0 — original illustrated surfaces */
#app{border:16px solid #bb8a58;border-bottom-width:24px;border-radius:12px;background:radial-gradient(ellipse at 50% 20%,#306557,#1b443b);padding:18px clamp(18px,4vw,68px)}
.tiles{max-width:680px;gap:20px;margin:18px auto}.tile,.tile:nth-child(n){position:relative;aspect-ratio:1;width:100%;max-width:280px;min-height:0;margin:auto;padding:0 24px 35px;border-radius:0;background:transparent url('assets/button-course-yellow.webp') center/contain no-repeat;box-shadow:none;font-size:clamp(21px,3vw,30px);line-height:1.5;text-wrap:balance}.tile:nth-child(3n+2){background-image:url('assets/button-course-blue.webp')}.tile:nth-child(3n){background-image:url('assets/button-course-orange.webp')}
.answer,.answer:nth-child(n){display:grid;place-items:center;width:clamp(100px,19vw,200px);min-width:0;min-height:0;aspect-ratio:25/14;padding:0;border-radius:0;background:transparent url('assets/button-answer-yellow.webp') center/contain no-repeat;box-shadow:none;font-size:clamp(30px,5vw,58px);color:#163d50}.answer:nth-child(2){background-image:url('assets/button-answer-blue.webp')}.answer:nth-child(3){background-image:url('assets/button-answer-pink.webp')}.answer-label{background:#fffdf0;border:2px solid white;border-radius:.3em;padding:0 .12em .06em;min-width:1.55em;line-height:1.05}.answer:disabled{opacity:1}.problem{background:transparent;margin:18px 0;min-height:145px;padding:10px}.prompt{font-size:clamp(26px,4vw,44px)}.prompt .small{font-size:20px;margin:12px 0}.heading{margin:16px 0}.keypad{gap:8px;margin:10px auto}.feedback{margin:10px auto;min-height:65px}.record{border:2px solid #ffffff30}.barcol{flex:1;max-width:65px}.top h1{white-space:nowrap}.top>div{flex:1}.top>div:last-child{min-width:0!important}
@media(max-height:800px) and (min-width:701px){.top h1{font-size:32px}.problem{min-height:110px;margin:10px 0}.keypad button{min-height:45px}.entry input{min-height:52px}.feedback{font-size:21px}.tile{max-width:230px}.tiles{max-width:600px}.prompt{font-size:36px}}
@media(max-width:600px){#app{border-width:9px;padding:12px}.tile{font-size:clamp(17px,4vw,25px);padding:0 14px 24px}.top h1{font-size:20px}.back{padding:10px;font-size:14px}.answers{gap:10px}.answer{width:26vw}.prompt .small{font-size:17px}.top{gap:4px}.count{font-size:14px}}
/* v0.2.1: level rows and direct record access */
.level-wrap{max-width:1150px}.level-table{background:#fff9ee;color:#285346;border-radius:26px;padding:16px 20px 20px;margin:14px auto}.level-table-head,.level-row{display:grid;grid-template-columns:minmax(0,1fr) 170px 130px;gap:14px;align-items:center}.level-table-head{padding:0 12px 10px;color:#74856f;font-size:17px}.level-table-head span:not(:first-child){text-align:center}.level-row{border:2px solid #d6e2cb;border-radius:19px;background:#fffef8;margin:9px 0;padding:7px 12px;min-height:88px}.level-start{display:flex;align-items:center;gap:16px;text-align:left;box-shadow:none;background:transparent;padding:6px 0;min-height:65px;color:#285346}.level-number{border-radius:50%;background:#f6d465;min-width:46px;height:46px;display:grid;place-items:center;font-size:28px}.level-start strong{display:block;font-size:25px}.level-start small{display:block;font-size:16px;color:#6b806d;margin-top:3px}.level-summary{text-align:center;font-size:16px}.level-summary strong{display:block;font-size:23px}.level-summary small{display:block;font-size:14px;margin-top:5px}.graph-button{background:#def0e8;box-shadow:0 3px 0 #a8d0bd;border-radius:17px;padding:12px 8px;font-size:20px;min-height:66px;color:#285346}.graph-button span{font-size:27px}.level-start:focus-visible,.graph-button:focus-visible{outline-color:#286753}.level-start:hover{background:#edf4e8}.level-row:last-child{margin-bottom:0}
@media(max-width:700px){.level-table{padding:12px}.level-table-head,.level-row{grid-template-columns:minmax(0,1fr) 110px 90px;gap:8px}.level-row{padding:7px;min-height:92px}.level-start{gap:8px}.level-start strong{font-size:22px}.level-start small{font-size:13px}.level-summary strong{font-size:18px}.level-summary small{font-size:12px}.graph-button{font-size:16px}.graph-button span{display:block;font-size:22px}.level-number{min-width:36px;height:36px;font-size:23px}}
@media(max-width:480px){.level-table-head,.level-row{grid-template-columns:minmax(0,1fr) 72px 65px;gap:5px}.level-table{padding:8px;border-radius:18px}.level-table-head{font-size:12px;padding:2px 5px}.level-start small{font-size:12px}.level-start{gap:5px}.level-number{min-width:29px;height:29px;font-size:20px}.level-summary{font-size:11px}.level-summary strong{font-size:14px}.level-summary small{font-size:10px}.graph-button{padding:8px 3px;font-size:13px}}
/* v0.2.2: one-row topic menu with meaningful line breaks */
.topic-wrap{max-width:1180px}.topic-tiles{grid-template-columns:repeat(var(--columns),minmax(0,1fr));max-width:1120px;gap:16px;margin:28px auto}.topic-tiles .tile{max-width:260px;padding:0;display:grid;place-items:center;font-size:clamp(19px,2.2vw,29px);container-type:inline-size}.tile-caption{display:block;transform:translateY(-12%);font-size:clamp(16px,10cqw,29px);line-height:1.55;white-space:nowrap;word-break:keep-all}.topic-wrap .heading{margin:20px 0}
@media(max-width:700px){.topic-tiles{gap:8px;margin:20px auto}.tile-caption{font-size:clamp(11px,10cqw,24px)}}
@media(max-width:480px){.topic-tiles{gap:4px}.tile-caption{font-size:10cqw}.topic-wrap .heading{font-size:22px}}
@media(max-height:600px) and (min-width:701px){.topic-tiles{margin:12px auto;max-width:1000px}.topic-tiles .tile{max-width:220px}.topic-wrap .heading{margin:10px 0}}
/* v0.2.3: compact single-line level rows */
.level-wrap{max-width:1180px}.level-wrap .heading{margin:8px 0 12px}.level-table{padding:12px 16px;margin:10px auto}.level-table-head,.level-row{grid-template-columns:minmax(0,1fr) 250px 120px;gap:12px}.level-table-head{padding:0 10px 7px;font-size:15px}.level-row{min-height:64px;margin:7px 0;padding:4px 10px;border-radius:15px}.level-start{min-height:48px;padding:2px 0;gap:12px}.level-start>span:last-child{display:flex;align-items:center;gap:16px;min-width:0}.level-start strong{font-size:22px;white-space:nowrap}.level-start small{font-size:15px;margin:0;line-height:1.4}.level-number{min-width:38px;height:38px;font-size:24px}.level-summary{display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;white-space:nowrap}.level-summary strong{font-size:19px}.level-summary small{font-size:13px;margin:0}.graph-button{min-height:47px;padding:7px 10px;font-size:18px;border-radius:12px}.graph-button span{display:inline;font-size:22px}
@media(max-width:1000px){.level-table-head,.level-row{grid-template-columns:minmax(0,1fr) 195px 98px;gap:8px}.level-start>span:last-child{gap:8px}.level-start small{font-size:13px}.level-summary{gap:6px}.level-summary strong{font-size:17px}.level-summary small{font-size:11px}.graph-button{font-size:16px}}
@media(max-width:700px){.level-table-head,.level-row{grid-template-columns:minmax(0,1fr) 100px 80px}.level-start>span:last-child{flex-wrap:wrap;gap:1px 7px}.level-summary{flex-wrap:wrap;gap:1px}.level-row{min-height:65px}.level-start small{font-size:12px}.level-start strong{font-size:18px}.level-number{min-width:30px;height:30px;font-size:20px}.graph-button{font-size:14px;padding:6px}.level-summary strong{font-size:15px}}
@media(max-width:480px){.level-table-head,.level-row{grid-template-columns:minmax(0,1fr) 76px 62px;gap:5px}.level-table{padding:9px 6px}.level-start{gap:5px}.level-start small{font-size:11px}.level-summary{font-size:11px}.level-summary strong{font-size:13px}.graph-button{font-size:12px}.graph-button span{font-size:16px}}
.topic-tiles .tile:nth-child(4){background-image:url('assets/button-course-green.png')}
/* v0.3.0: practice modes and achievement collection */
.mode-picker{display:flex;justify-content:center;gap:12px;margin:8px auto;flex-wrap:wrap}.mode-picker button{min-height:44px;padding:9px 22px;font-size:18px;background:#d9eae1;color:#285346;box-shadow:0 3px 0 #84aa99;border-radius:14px}.mode-picker button[aria-pressed="true"]{background:#ffdc70;box-shadow:0 3px 0 #c29840;outline:2px solid #fff6d4;outline-offset:2px}.mode-note{text-align:center;font-size:14px;margin:7px 0 9px;color:#fff0bd}.medal-shelf{display:flex;justify-content:center;gap:24px;background:#173e3599;border:2px solid #ffffff30;border-radius:22px;padding:14px;margin:16px auto}.medal-shelf>div{text-align:center}.medal-shelf strong{display:block;font-size:21px}.medal-image{display:block;width:120px;height:120px;object-fit:contain;margin:0 auto}.challenge-result{text-align:center;background:#ffffff0d;border-radius:20px;padding:14px}.challenge-result>.medal-image{width:190px;height:190px;filter:drop-shadow(0 5px 10px #09281b88);animation:medal-pop .5s ease-out}.challenge-result .big{color:#ffe18a;font-size:48px}.history-list{margin-top:12px}.history-row{display:grid;grid-template-columns:1.5fr 1.5fr .5fr .8fr;gap:12px;align-items:center;border-bottom:1px solid #ffffff25;padding:12px 4px;font-size:15px}summary{cursor:pointer;padding:5px;font-size:19px}@keyframes medal-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}@media(max-height:800px) and (min-width:701px){.level-wrap .top h1{font-size:28px}.level-wrap .heading{font-size:27px;margin:4px 0 7px}.level-wrap .level-table{margin:8px auto}.level-wrap .level-row{min-height:60px;margin:5px 0}.level-wrap .mode-picker button{min-height:40px;font-size:17px}.challenge-result>.medal-image{width:150px;height:150px}.challenge-result .big{font-size:40px}}
@media(max-width:600px){.mode-picker{gap:8px}.mode-picker button{font-size:14px;padding:9px 12px}.medal-shelf{gap:14px;padding:12px 6px}.medal-image{width:85px;height:85px}.medal-shelf strong{font-size:17px}.history-row{grid-template-columns:1fr 1fr;gap:5px;font-size:13px}.challenge-result>.medal-image{width:160px;height:160px}}
@media(prefers-reduced-motion:reduce){.challenge-result>.medal-image{animation:none}}
.not-earned .medal-image{filter:grayscale(1);opacity:.25}
/* v0.3.1: start either mode directly from each level */
.direct-modes .level-table-head,.direct-modes .level-row{grid-template-columns:minmax(0,1fr) 165px 145px 105px;gap:12px}.level-label{cursor:default}.level-label:hover{background:transparent}.row-mode{min-height:51px;padding:7px 10px;font-size:18px;border-radius:13px;color:#285346;box-shadow:0 3px 0 #bdad8b}.row-mode small{display:block;font-size:12px;line-height:1.3;margin-top:3px}.timed-start{background:#ffda72;box-shadow:0 3px 0 #c9a044}.slow-start{background:#b9e0ea;box-shadow:0 3px 0 #87b7c4}.row-mode:focus-visible{outline-color:#285346}.direct-modes .level-table-head span:not(:first-child){text-align:center}.direct-modes .level-row{min-height:66px}.direct-modes .level-start small{font-size:14px}.direct-modes .level-start>span:last-child{gap:10px}
@media(max-width:1000px){.direct-modes .level-table-head,.direct-modes .level-row{grid-template-columns:minmax(0,1fr) 140px 120px 90px;gap:8px}.direct-modes .level-start>span:last-child{flex-wrap:wrap;gap:2px 8px}.direct-modes .level-start small{font-size:12px}.row-mode{font-size:16px}.direct-modes .level-table-head{font-size:13px}}
@media(max-width:650px){.direct-modes .level-table-head{display:none}.direct-modes .level-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 80px;gap:8px;padding:10px}.direct-modes .level-label{grid-column:1/-1;min-height:32px}.direct-modes .level-label>span:last-child{flex-wrap:nowrap}.row-mode{font-size:15px;min-height:48px}.direct-modes .graph-button{min-height:48px}.direct-modes .level-start small{font-size:12px}}
/* v0.3.2: topic x level medal collection */
.collection-wrap{max-width:1180px}.collection-scroll{background:#fff9ee;color:#285346;border-radius:20px;padding:12px;margin:15px 0 8px;overflow-x:auto}.medal-table{width:100%;border-collapse:collapse;table-layout:fixed;min-width:660px}.medal-table caption{text-align:left;font-size:20px;padding:0 8px 9px}.medal-table th,.medal-table td{border-bottom:1px solid #d6e2cb;padding:5px 8px;text-align:center}.medal-table thead th{font-size:18px;background:#e7f0df;padding:8px}.medal-table th:first-child{width:180px}.medal-table tbody th{font-size:16px;text-align:left;line-height:1.4}.cell-medals{display:flex;align-items:center;justify-content:center;gap:6px}.collection-medal{display:block;min-width:0}.collection-medal .medal-image{width:36px;height:43px;max-width:100%;margin:0}.medal-state{display:block;font-size:10px;line-height:1.1}.collection-medal.earned .medal-state{font-weight:bold;color:#285346}.collection-medal.not-earned .medal-state{color:#87978b}.medal-table tbody tr:last-child>*{border-bottom:0}.collection-wrap .heading{margin:10px 0}.collection-wrap .notice{margin:8px auto}
@media(max-width:850px){.medal-table th:first-child{width:140px}.medal-table tbody th{font-size:13px}.cell-medals{gap:3px}.collection-medal .medal-image{width:30px;height:38px}.medal-table th,.medal-table td{padding:5px}.collection-scroll{padding:8px}}
/* v0.3.3: one highest medal for each learning level */
.collection-medal .medal-image{width:47px;height:53px;margin:auto}.medal-state{font-size:11px;margin-top:2px}.cell-medals{gap:0}
/* v0.3.4: equal buttons, countdown, judgments, spinning reward */
.direct-modes .level-table-head,.direct-modes .level-row{grid-template-columns:minmax(280px,1.6fr) repeat(3,minmax(135px,1fr));gap:12px}.direct-modes .row-mode,.direct-modes .graph-button{width:100%;height:58px;min-height:58px;padding:7px 10px;border-radius:13px;font-size:18px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px}.direct-modes .graph-button span{display:none}.direct-modes .row-mode small{margin:0}.countdown-stage{min-height:65svh;display:grid;place-items:center}.countdown-value{font-size:clamp(150px,30vmin,280px);line-height:1;color:#ffe174;animation:count-pop .4s ease-out}.countdown-value.start-word{font-size:clamp(50px,9vw,100px);white-space:nowrap}@keyframes count-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.judgment{position:fixed;z-index:20;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden}.judgment span{font-family:Arial,sans-serif;font-weight:400;line-height:.8;text-shadow:0 0 8px #fff8;animation:judgment-pop .4s ease-out both}.judgment.correct span{font-size:min(88vw,88vh);color:#ff5368}.judgment.incorrect span{font-size:min(48vw,48vh);font-weight:700;color:#79d7ff}.feedback{position:relative;z-index:21}.feedback:not(:empty){background:#153d35ee;border-radius:14px;padding:10px 14px;max-width:650px}.challenge-result{perspective:900px;overflow:visible}.challenge-result>.medal-image{width:clamp(180px,30vh,290px);height:clamp(180px,30vh,290px);animation:medal-spin-bang 1.4s cubic-bezier(.18,.8,.25,1) both;transform-origin:center;filter:drop-shadow(0 8px 18px #0b291b88)}@keyframes judgment-pop{from{transform:scale(.55);opacity:0}70%{transform:scale(1.06);opacity:1}to{transform:scale(1);opacity:1}}@keyframes medal-spin-bang{0%{transform:scale(.1) rotateY(0deg) rotate(-25deg);opacity:0}15%{opacity:1}60%{transform:scale(.65) rotateY(1080deg) rotate(8deg)}78%{transform:scale(1.25) rotateY(1440deg) rotate(-4deg)}90%{transform:scale(.94) rotateY(1440deg) rotate(2deg)}100%{transform:scale(1) rotateY(1440deg) rotate(0)}}
@media(max-width:1000px){.direct-modes .level-table-head,.direct-modes .level-row{grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(105px,1fr));gap:8px}.direct-modes .row-mode,.direct-modes .graph-button{font-size:16px}}
@media(max-width:760px){.direct-modes .level-table-head{display:none}.direct-modes .level-row{grid-template-columns:repeat(3,minmax(0,1fr))}.direct-modes .level-label{grid-column:1/-1}.direct-modes .row-mode,.direct-modes .graph-button{height:54px;min-height:54px;font-size:14px}.direct-modes .level-label>span:last-child{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.countdown-value,.judgment span,.challenge-result>.medal-image{animation:none}}
/* v0.3.6: direct learning graphs and compact screen header */
.wrap{position:relative}.compact-top{position:absolute;left:0;top:0;width:auto;min-height:45px;z-index:2}.wrap:has(>.compact-top)>.heading{min-height:46px;display:flex;align-items:center;justify-content:center;width:calc(100% - 230px);margin:0 auto 14px!important;line-height:1.35;font-size:clamp(23px,3vw,32px)}.wrap:has(>.compact-top)>.count{min-height:46px;display:flex;align-items:center;justify-content:flex-end;padding-left:135px}.graph-wrap{max-width:1180px}.line-panel{background:#fffaf0;color:#285346;padding:16px;border-radius:22px;margin:18px auto}.line-scroll{overflow-x:auto}.learning-line{display:block;width:100%;height:auto;max-height:390px;font:15px Lab,sans-serif;color:#285346}.learning-line text{fill:#285346}.learning-line circle:focus{outline:3px solid #137d89}.empty-chart{padding:50px 12px;text-align:center;line-height:1.7}.graph-wrap .mode-picker{margin-top:8px}.wrap:has(>.compact-top) .topic-tiles{margin-top:16px}
@media(max-width:600px){.wrap:has(>.compact-top)>.heading{width:calc(100% - 100px);margin:0 0 12px auto!important;font-size:21px;min-height:48px}.line-panel{padding:10px}.learning-line{max-height:none}.compact-top .back{font-size:13px;padding:10px 8px}.wrap:has(>.compact-top)>.count{padding-left:90px;font-size:12px}}
/* v0.3.7: medal illustration over challenge button */
.timed-start{position:relative;overflow:visible}.direct-modes .timed-start:has(.button-medal){padding-right:48px}.button-medal{position:absolute;right:5px;top:-8px;pointer-events:none;filter:drop-shadow(0 3px 3px #254b4033)}.button-medal .medal-image{width:44px;height:60px;margin:0;object-fit:contain}
@media(max-width:760px){.button-medal .medal-image{width:34px;height:48px}.button-medal{right:2px;top:-5px}.direct-modes .timed-start:has(.button-medal){padding-right:35px}}
/* v0.4.0: common denominators and sequential numerators */
.common-pair{display:flex;justify-content:center;align-items:center;gap:clamp(20px,5vw,75px);flex-wrap:wrap}.common-pair>span{white-space:nowrap}.fraction-slot{display:inline-block;min-width:1.2em;border-radius:6px;padding:0 .1em}.active-slot{color:#ffe174;background:#ffffff18;outline:none;outline-offset:0}.wrap:has(.countdown-stage)>.mode-note{min-height:45px;display:flex;align-items:center;justify-content:center;padding-left:115px;padding-right:10px;margin:0;font-size:17px}.common-pair+.small{margin-top:18px}.countdown-stage{min-height:60svh}
@media(max-width:600px){.common-pair{font-size:28px;gap:22px}.wrap:has(.countdown-stage)>.mode-note{padding-left:95px;font-size:13px}}
/* v0.5.0: fraction skill menu and mixed-number answers */
.fraction-tiles{grid-template-columns:repeat(3,minmax(0,1fr));max-width:850px;gap:10px 22px;margin:10px auto!important}.fraction-tiles .tile{max-width:205px}.fraction-tiles .tile-caption{font-size:clamp(17px,10cqw,26px)}.mixed-number{display:inline-flex;align-items:center;gap:.18em;vertical-align:middle;white-space:nowrap}.answer-label:has(.fraction){font-size:.66em;min-height:0;padding:.08em .2em;line-height:1.1}.answer-label .fraction{min-width:1.2em}.answer-label .fraction > span:first-child{border-bottom-width:2px;padding-bottom:.05em}.answer-label .fraction > span:last-child{padding-top:.05em}.answer-label .mixed-number{gap:.14em}.prompt .mixed-number{gap:.2em}.fraction-tiles .tile:nth-child(5){background-image:url('assets/button-course-blue.webp')}.fraction-tiles .tile:nth-child(6){background-image:url('assets/button-course-orange.webp')}
@media(min-width:701px) and (max-height:800px){.fraction-tiles .tile{max-width:185px}.fraction-tiles{max-width:760px;gap:6px 22px}.fraction-tiles .tile-caption{font-size:23px}}
@media(max-width:700px){.fraction-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.fraction-tiles .tile-caption{font-size:10cqw}}

/* v0.5.2: review above grade-five skills; stable centered challenge labels */
.fraction-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
.fraction-tiles .tile{grid-column:span 2}
.fraction-tiles .tile:nth-child(1){grid-column:2 / span 2}
.fraction-tiles .tile:nth-child(2){grid-column:4 / span 2}
.fraction-tiles .tile:nth-child(3){grid-column:1 / span 2}
.direct-modes .timed-start:has(.button-medal){padding:7px 10px}
.button-medal{right:-10px;top:-16px}
.button-medal .medal-image{width:34px;height:46px}
@media(max-width:760px){.button-medal{right:-7px;top:-14px}.button-medal .medal-image{width:28px;height:38px}}

/* v0.6.0: eight fraction topics; two review tiles followed by six grade-five tiles */
.fraction-tiles{max-width:760px;gap:8px 22px}
.fraction-tiles .tile{max-width:154px}
.fraction-tiles .tile-caption{font-size:clamp(16px,10cqw,23px)}
.fraction-tiles .tile:nth-child(n+3){grid-column:span 2}
.fraction-tiles .tile:nth-child(3){grid-column:1 / span 2}
.fraction-tiles .tile[data-topic="division_to_fraction"]{background-image:url('assets/button-course-mint.webp')}
.fraction-tiles .tile[data-topic="fraction_to_division"]{background-image:url('assets/button-course-purple.webp')}
.fraction-tiles .tile[data-topic="decimal_to_fraction"]{background-image:url('assets/button-course-coral.webp')}
@media(max-width:700px){.fraction-tiles{gap:6px 10px}.fraction-tiles .tile{max-width:145px}.fraction-tiles .tile-caption{font-size:10cqw}}
@media(min-width:701px) and (max-height:650px){.fraction-tiles .tile{max-width:132px}.fraction-tiles .tile-caption{font-size:20px}.fraction-tiles{gap:4px 20px}}