.mainintro{border-radius:15px;background-color:white;box-shadow:0 0 20px 0 #f7ecec;border:solid 1px #f2eeee;padding:15px}.wip-banner{border-radius:15px;background-color:#fff3e0;box-shadow:0 0 15px 0 rgba(255,152,0,0.15);border:solid 2px #ffb74d;padding:15px 20px;margin:20px 60px;display:flex;align-items:center;gap:12px}@media only screen and (max-width: 499px){.wip-banner{margin:20px 10px;padding:10px}}.wip-banner .icon{font-size:24px;color:#f57c00;flex-shrink:0}.wip-banner .content{flex-grow:1;color:#e65100;font-weight:500}.samplequestion{margin-top:10px;border-radius:15px;background-color:#edeef7;box-shadow:0 0 20px 0 #edeef7;border:solid 4px #8690df;padding:15px}.jlpt-inner{margin-top:20px}.jlpt__btnrow{display:flex;margin:20px;justify-content:space-between}.jlpt__btnrow .timers{display:flex;flex-grow:1;align-items:center;justify-content:space-between;margin-left:20px;margin-right:20px}.jlpt__btnrow .timers #divProgress{flex-grow:1;line-height:10px;margin-left:20px;margin-right:20px}.jlpt__btnrow .timers #divProgress div{display:inline-block;height:10px}.jlpt__btnrow .timers #divProgress div:hover{cursor:pointer;background-color:#878787}.qn-data{font-size:24px;font-weight:bold;background-color:lightgrey;padding:8px;display:flex;justify-content:space-between}.qn-data .spacer{flex-grow:1}.jlptintro{border:solid 1px black;border-radius:10px;padding:20px;background:linear-gradient(to bottom, #e8f5da 0%, #dbf5f6 100%);box-shadow:0 0 13px -6px rgba(0,0,0,0.5)}.jlpt-practicematrix{display:grid;padding:10px;grid-template-columns:repeat(5, 1fr);grid-auto-rows:50px;grid-gap:10px;font-size:14px;font-weight:bold}@media only screen and (min-width: 500px){.jlpt-practicematrix{grid-auto-rows:50px;font-size:20px}}@media only screen and (max-width: 889px){.jlpt-practicematrix{grid-auto-rows:30px;font-size:16px}}.jlpt-practicematrix div{display:flex;align-items:center;justify-content:center;border:solid 1px;border-radius:5px;color:#466c65;font-size:16px}@media only screen and (min-width: 500px){.jlpt-practicematrix div{padding:10px}}@media only screen and (max-width: 889px){.jlpt-practicematrix div{padding:5px}}.jlpt-practicematrix .nlevel{font-weight:bold;border:none}.jlpt-practicematrix .blank{background-color:inherit;color:inherit;border:none}.jlpt-practicematrix .vqns{border-color:#759894;background-color:#d3e9e6}.jlpt-practicematrix .vqns:hover{background-color:#759894;color:white;cursor:pointer}.jlpt-practicematrix .vqns-disabled{border-color:#d3e9e6;background-color:#d3e9e6;color:#83afa6;font-size:15px}.jlpt-practicematrix .gqns{border-color:#859b5f;background-color:#d6ecaf;color:#466c65;font-size:15px}.jlpt-practicematrix .gqns:hover{background-color:#859b5f;color:white;cursor:pointer}.jlpt-practicematrix .gqns-disabled{border-color:#d6ecaf;background-color:#d6ecaf;color:#83afa6}.jlpt-practicematrix .rqns{border-color:#d15892;background-color:#f3e2e8;color:#466c65;font-size:15px}.jlpt-practicematrix .rqns:hover{background-color:#d15892;color:white;cursor:pointer}.jlpt-practicematrix .rqns-disabled{border-color:#f3e2e8;background-color:#f3e2e8;color:#83afa6}.jlpt-practicematrix .lqns{border-color:#1b3d7d;background-color:#79bbec;color:#466c65;font-size:15px}.jlpt-practicematrix .lqns:hover{background-color:#1b3d7d;color:white;cursor:pointer}.jlpt-practicematrix .lqns-disabled{border-color:#c5e0fb;background-color:#c5e0fb;color:#83afa6}.nlevel-practice{margin-top:20px;background-color:antiquewhite;font-weight:bold;font-size:20px;text-align:center}.jlpt-section{margin-top:20px;padding:10px;font-weight:bold}.jlpt-practicematrix-admin{display:grid;margin-top:5px;grid-template-columns:repeat(5, 1fr);grid-auto-rows:max-content;grid-gap:5px}.jlpt-practicematrix-admin .qn{padding:10px;border:solid 1px lightgrey;border-radius:5px;background-color:white;font-size:15px}.jlpt-practicematrix-admin .qn.v{background-color:#d3e9e6}.jlpt-practicematrix-admin .qn.g{background-color:#d6ecaf}.jlpt-practicematrix-admin .qn.r{background-color:#f3e2e8}.jlpt-practicematrix-admin .qn.l{background-color:#c5e0fb}.jlpt-practicematrix-admin .qn-head{text-align:center;font-weight:bold}.jlpt-practicematrix-admin .content{display:flex}.jlpt-practicematrix-admin .ok{color:green;flex-shrink:0;flex-grow:0;width:30px;text-align:center}.jlpt-practicematrix-admin .not-ok{color:red;flex-shrink:0;flex-grow:0;width:30px;text-align:center}.jlptsplash{border:solid 1px black;border-radius:10px;padding:20px;box-shadow:0 0 13px -6px rgba(0,0,0,0.5)}.jlptgrade{border:solid 1px black;border-radius:10px;padding:20px;background:linear-gradient(to bottom, #e8f5da 0%, #dbf5f6 100%);box-shadow:0 0 13px -6px rgba(0,0,0,0.5)}.splash{border:solid 2px;border-radius:10px;margin:5px;height:10vh;padding:20px;display:flex}.splash .inner{display:flex;align-items:center;justify-content:space-evenly;flex-grow:1}.splash .inner div{width:25%;font-weight:bold;text-align:center}.splash .inner .stime{width:30%}.splash .inner .wider{flex-grow:1}.splash .inner .sresults{width:50%}.splash .inner .sresults div{text-align:left;width:100%}.splash .inner .buttons{width:40%;display:flex;justify-content:space-evenly}.splash.current{box-shadow:0 0 13px -6px rgba(0,0,0,0.5);border:solid 4px}.splash.v{border-color:#759894;background-color:#d3e9e6}.splash.g{border-color:#859b5f;background-color:#d6ecaf}.splash.r{border-color:#d15892;background-color:#f3e2e8}.splash.l{border-color:#1b3d7d;background-color:#79bbec}.score{font-size:larger;font-weight:bold;color:#1b3d7d}.practice-round-succeed{padding:10px;color:#355d32;background-color:#d3fbd0;box-shadow:0 2px 12px 0 #319a2a60}.practice-round-fail{padding:10px;color:#4e0a08;background-color:lightpink;box-shadow:0 2px 12px 0 #8b000080}.score-correct{display:inline-block;font-weight:700;font-style:normal;color:#6fc36a;text-align:center;height:36px;line-height:36px;border-radius:18px;padding:0 10px;font-size:30px}.score-incorrect{display:inline-block;font-weight:700;font-style:normal;color:darkred;text-align:center;height:36px;line-height:36px;border-radius:18px;padding:0 10px;font-size:30px}.jlpt-level{font-size:20px;font-weight:bold;color:red}.jlpt-box{margin:20px;border:3px solid red;border-radius:5px;outline:3px solid black;box-shadow:0 0 14px 0 #ffd6d6;padding:20px;font-weight:bold;font-size:20px;min-width:200px;transition:all 0.2s}.jlpt-box:hover{cursor:pointer;background-color:#ffd6d6}.panel-link4{display:block;margin:20px;margin-top:10px;margin-bottom:10px;padding:1.2rem 1.6rem;border:2px solid #e0e0e0;border-radius:10px;background:#fff;color:#333;font-weight:600;font-size:1.1rem;text-decoration:none;transition:all 0.25s ease;position:relative}.panel-link4::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:#de3138;border-top-left-radius:8px;border-bottom-left-radius:8px;transition:background 0.25s ease, width 0.25s ease}.panel-link4:hover{background:#fff5f5;border-color:#a09da0;transform:translateY(-5px);box-shadow:0 8px 16px rgba(0,0,0,0.1);cursor:pointer}.panel-link4:hover::before{width:12px}#logoContainer{width:50%}#jlpt-nopref{max-width:400px;margin:0 auto;padding:40px;background:white;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.1);font-size:20px;color:#6b6262;font-weight:bold}#jlpt-multicolor-widget{max-width:1200px;margin:0 auto;padding:20px;background:white;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.1)}.widget-header{text-align:center;margin-bottom:30px}.widget-header h3{color:#333;margin-bottom:5px}.widget-header .focus-subtitle,.widget-header .context-subtitle{color:#666;font-size:14px}.view-toggle{text-align:center;margin-bottom:20px}.all-levels-btn{padding:10px 25px;background:#4e6bac;color:white;border:none;border-radius:8px;font-size:14px;font-weight:bold;cursor:pointer;transition:all 0.3s}.all-levels-btn:hover{background:#3d5a9b;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.2)}.dial-container{position:relative}.level-panel{display:none}.level-panel.active{display:block;animation:fadeIn 0.5s}.category-dials{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:30px;margin-bottom:30px}.dial-item{text-align:center;padding:20px;background:#fafafa;border-radius:8px;transition:transform 0.3s}.dial-item:hover{transform:translateY(-5px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}.dial-item h4{margin-bottom:15px;color:#333}.multi-dial{margin:0 auto 20px;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1))}.mastery-segment{transition:stroke-dashoffset 0.8s ease-out, opacity 0.5s}.hover-area:hover~.mastery-segment{opacity:0.8 !important}.mastery-legend{display:flex;flex-direction:column;gap:5px;text-align:left;font-size:12px;max-width:200px;margin:0 auto}.legend-item{display:flex;align-items:center;gap:5px}.color-box{width:16px;height:16px;border-radius:3px;border:1px solid #ddd}.legend-label{font-weight:bold;min-width:55px}.legend-value{min-width:35px;text-align:right}.legend-percent{color:#666;font-size:11px}.total-items{margin-top:10px;padding-top:10px;border-top:1px solid #ddd;font-size:13px;color:#666;font-weight:bold}.level-summary{background:#f0f8ff;padding:20px;border-radius:8px;text-align:center}.level-summary h4{margin-bottom:15px;color:#333}.progress-bar{width:100%;height:20px;background:#e0e0e0;border-radius:10px;overflow:hidden}.progress-fill{height:100%;transition:width 1s ease-out}.all-levels-grid{width:350px;/*!*margin-top: 20px;*!*/}.level-overview-card{background:white;border:2px solid #e0e0e0;border-radius:12px;padding:10px;text-align:center;cursor:pointer;transition:all 0.3s}.level-overview-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px rgba(0,0,0,0.1);border-color:#4e6bac}.level-overview-card.current-level{border-color:#4e6bac;background:#f0f8ff}.level-overview-card .level-header{display:flex;justify-content:center;align-items:center;margin-bottom:15px}.level-overview-card h4{margin:0;font-size:20px;color:#4e6bac}.level-overview-card .star{color:gold;margin-left:5px}.overall-percentage{font-size:18px;font-weight:bold;color:#4e6bac}.mini-segment{transition:opacity 0.3s}.mini-categories{display:flex;justify-content:space-around;margin-top:15px;padding-top:15px;border-top:1px solid #e0e0e0}.mini-cat{display:flex;flex-direction:column;align-items:center;gap:5px}.cat-icon{font-size:18px;font-weight:bold;color:#4e6bac;background:#e8f4f8;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;cursor:help}.cat-icon:hover::after{content:attr(title);position:absolute;bottom:-25px;left:50%;transform:translateX(-50%);background:#333;color:white;padding:4px 8px;border-radius:4px;font-size:11px;white-space:nowrap;z-index:10}.cat-value{font-size:14px;font-weight:bold;color:#333}.focus-view-container,.context-view-container{animation:fadeIn 0.5s}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInSegment{from{opacity:0}to{opacity:1}}@media (max-width: 768px){.category-dials{grid-template-columns:1fr}#jlpt-multicolor-widget{padding:15px}.all-levels-grid{grid-template-columns:1fr}}.subtitle{color:#666;font-size:14px;text-align:center}.clickable:hover{cursor:pointer}.panel-link{display:block;margin:20px;padding:1.5rem;border:1px solid #ccc;border-left:6px solid #d32f2f;border-radius:8px;background:#fff;color:#333;font-weight:600;transition:all 0.2s ease}.panel-link:hover{border-left-color:#000;background:#fff5f5;box-shadow:0 2px 6px rgba(0,0,0,0.1)}.panel-link2{display:block;margin:20px;padding:1.2rem 1.6rem;border:1px solid #ddd;border-radius:10px;background:#fff;color:#333;font-weight:600;font-size:1.1rem;text-decoration:none;transition:all 0.25s ease;position:relative}.panel-link2::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#d32f2f;border-top-left-radius:10px;border-bottom-left-radius:10px;transition:background 0.25s ease, width 0.25s ease}.panel-link2:hover{background:#fff5f5;border-color:#d32f2f;box-shadow:0 2px 6px rgba(0,0,0,0.1)}.panel-link2:hover::before{background:#000;width:8px}.panel-link3{display:block;margin:20px;padding:1.2rem 1.6rem;border:2px solid #e0e0e0;border-radius:10px;background:#fff;color:#333;font-weight:600;font-size:1.1rem;text-decoration:none;transition:all 0.25s ease;position:relative}.panel-link3::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:#d32f2f;border-top-left-radius:8px;border-bottom-left-radius:8px;transition:background 0.25s ease, width 0.25s ease}.panel-link3:hover{background:#fff5f5;border-color:#d32f2f;box-shadow:0 2px 6px rgba(0,0,0,0.1)}.panel-link3:hover::before{background:#000;width:12px}.panel-link4{display:block;margin:20px;margin-top:10px;margin-bottom:10px;padding:1.2rem 1.6rem;border:2px solid #e0e0e0;border-radius:10px;background:#fff;color:#333;font-weight:600;font-size:1.1rem;text-decoration:none;transition:all 0.25s ease;position:relative}.panel-link4::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:#de3138;border-top-left-radius:8px;border-bottom-left-radius:8px;transition:background 0.25s ease, width 0.25s ease}.panel-link4:hover{background:#fff5f5;border-color:#a09da0;transform:translateY(-5px);box-shadow:0 8px 16px rgba(0,0,0,0.1);cursor:pointer}.panel-link4:hover::before{width:12px}.jlpt-level{font-size:20px;font-weight:bold;color:#de3138}@media only screen and (max-width: 499px){#logoPanel{flex-direction:column !important;align-items:stretch !important}#logoContainer{width:100% !important;margin-bottom:20px}.context-view-container{width:100% !important}.all-levels-grid{width:100% !important;max-width:400px;margin:0 auto}}