*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--green:#58cc02;--green-dark:#4caf02;--green-light:#d7f5a0;--blue:#1cb0f6;--blue-dark:#0099da;--red:#ff4b4b;--red-dark:#e43c3c;--orange:#ff9600;--yellow:#ffd900;--purple:#ce82ff;--gray-100:#f7f7f7;--gray-200:#e5e5e5;--gray-300:#afafaf;--gray-600:#777;--gray-900:#3c3c3c;--white:#fff;--shadow:0 4px 0 #0000001f;--radius:12px;--radius-sm:8px}html,body,#root{height:100%}body{background:var(--gray-100);color:var(--gray-900);-webkit-font-smoothing:antialiased;font-family:Nunito,Hiragino Sans,Hiragino Kaku Gothic ProN,Meiryo,sans-serif}button{cursor:pointer;border:none;font-family:inherit}.app{flex-direction:column;align-items:center;min-height:100vh;display:flex}.hearts{align-items:center;gap:4px;display:flex}.heart{font-size:22px;line-height:1;transition:transform .2s}.heart.empty{filter:grayscale()opacity(.3)}.xp-badge{background:var(--yellow);color:var(--gray-900);border-radius:20px;margin-left:auto;padding:4px 10px;font-size:14px;font-weight:800}.progress-bar-wrap{background:var(--gray-200);border-radius:8px;flex:1;height:16px;overflow:hidden}.progress-bar-fill{background:var(--green);border-radius:8px;height:100%;transition:width .4s}.welcome{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;padding:40px 20px;display:flex}.welcome-logo{font-size:80px;line-height:1}.welcome h1{color:var(--green);font-size:36px;font-weight:900}.welcome p{color:var(--gray-600);max-width:400px;font-size:18px;line-height:1.6}.welcome-features{flex-wrap:wrap;justify-content:center;gap:16px;margin:8px 0;display:flex}.feature-chip{background:var(--white);border:2px solid var(--gray-200);color:var(--gray-600);border-radius:20px;padding:8px 16px;font-size:14px;font-weight:700}.btn{border-radius:var(--radius);border:none;justify-content:center;align-items:center;gap:8px;min-width:200px;padding:14px 32px;font-size:16px;font-weight:800;transition:transform .1s,box-shadow .1s;display:inline-flex}.btn:active{transform:translateY(2px)}.btn-primary{background:var(--green);color:var(--white);box-shadow:0 4px 0 var(--green-dark)}.btn-primary:hover{background:#64da02}.btn-primary:active{box-shadow:0 2px 0 var(--green-dark)}.btn-secondary{background:var(--white);color:var(--blue);border:2px solid var(--blue)}.btn-danger{background:var(--red);color:var(--white);box-shadow:0 4px 0 var(--red-dark)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.question-screen{flex-direction:column;flex:1;gap:16px;width:100%;max-width:680px;padding:16px 20px;display:flex}.difficulty-label{text-transform:uppercase;letter-spacing:.08em;color:var(--gray-300);font-size:12px;font-weight:700}.question-title{color:var(--gray-900);font-size:22px;font-weight:800;line-height:1.3}.question-subtitle{color:var(--gray-600);font-size:16px;line-height:1.5}.regex-display{background:var(--gray-900);color:#f8f8f2;border-radius:var(--radius);letter-spacing:.02em;text-align:center;padding:16px 20px;font-family:Menlo,Monaco,Courier New,monospace;font-size:20px;font-weight:700}.regex-display .slash{color:#75715e}.regex-display .pattern{color:#a6e22e}.regex-display .flags-text{color:#66d9ef}.options-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;display:grid}.option-btn{background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius);color:var(--gray-900);box-shadow:0 2px 0 var(--gray-200);text-align:center;word-break:break-all;white-space:pre-wrap;padding:14px 12px;font-family:Menlo,Monaco,Courier New,monospace;font-size:15px;font-weight:700;transition:all .15s}.option-btn:hover:not(:disabled){border-color:var(--blue);color:var(--blue);transform:translateY(-1px);box-shadow:0 3px #b0e8fc}.option-btn.selected{border-color:var(--blue);color:var(--blue);box-shadow:0 2px 0 var(--blue-dark);background:#e8f4fd}.option-btn.correct{background:var(--green-light);border-color:var(--green);color:var(--green-dark)}.option-btn.incorrect{border-color:var(--red);color:var(--red-dark);background:#ffe0e0}.empty-option{opacity:.6;font-style:italic;font-weight:600}.mc-options{flex-direction:column;gap:10px;display:flex}.mc-option{background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius);color:var(--gray-900);text-align:left;box-shadow:0 2px 0 var(--gray-200);padding:14px 18px;font-size:15px;font-weight:600;line-height:1.4;transition:all .15s}.mc-option:hover:not(:disabled){border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}.mc-option.selected{border-color:var(--blue);color:var(--blue);background:#e8f4fd}.mc-option.correct{background:var(--green-light);border-color:var(--green);color:var(--green-dark)}.mc-option.incorrect{border-color:var(--red);color:var(--red-dark);background:#ffe0e0}.build-area{background:var(--white);border:2px dashed var(--gray-200);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:6px;min-height:60px;padding:10px 12px;display:flex;position:relative}.build-area-label{color:var(--gray-300);pointer-events:none;font-size:12px;position:absolute;top:8px;left:12px}.regex-prefix{color:var(--gray-300);font-family:Menlo,Monaco,Courier New,monospace;font-size:18px;font-weight:700}.placed-panel{background:var(--blue);color:var(--white);border-radius:var(--radius-sm);cursor:pointer;box-shadow:0 2px 0 var(--blue-dark);-webkit-user-select:none;user-select:none;align-items:center;padding:6px 10px;font-family:Menlo,Monaco,Courier New,monospace;font-size:15px;font-weight:700;transition:all .1s;display:inline-flex}.placed-panel:hover{background:var(--red);box-shadow:0 2px 0 var(--red-dark)}.placed-panel.correct-panel{background:var(--green);box-shadow:0 2px 0 var(--green-dark);cursor:default}.placed-panel.incorrect-panel{background:var(--red);box-shadow:0 2px 0 var(--red-dark);cursor:default}.panels-grid{flex-wrap:wrap;gap:8px;display:flex}.panel-token{background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius);color:var(--gray-900);box-shadow:0 3px 0 var(--gray-200);-webkit-user-select:none;user-select:none;padding:10px 14px;font-family:Menlo,Monaco,Courier New,monospace;font-size:15px;font-weight:700;transition:all .1s}.panel-token:hover:not(:disabled){background:var(--blue);color:var(--white);border-color:var(--blue);box-shadow:0 3px 0 var(--blue-dark);transform:translateY(-1px)}.panel-token:active:not(:disabled){box-shadow:0 1px 0 var(--blue-dark);transform:translateY(1px)}.panel-token:disabled{opacity:.4;cursor:not-allowed}.build-controls{align-items:center;gap:8px;display:flex}.btn-clear{background:var(--gray-100);border:2px solid var(--gray-200);border-radius:var(--radius-sm);color:var(--gray-600);padding:8px 16px;font-size:13px;font-weight:700;transition:all .1s}.btn-clear:hover{background:var(--gray-200)}.test-cases{flex-direction:column;gap:6px;display:flex}.test-case-row{background:var(--white);border-radius:var(--radius-sm);border:1px solid var(--gray-200);align-items:center;gap:10px;padding:8px 12px;font-size:14px;display:flex}.test-case-row code{background:var(--gray-100);border-radius:4px;padding:2px 6px;font-family:Menlo,Monaco,Courier New,monospace;font-size:13px}.test-expect{color:var(--gray-300);margin-left:auto;font-size:12px}.test-result{font-size:16px}.feedback-bar{z-index:100;flex-direction:column;align-items:center;gap:12px;width:100%;max-height:70vh;padding:20px;animation:.3s slideUp;display:flex;position:sticky;bottom:0;overflow-y:auto}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.feedback-bar.correct{background:var(--green-light);border-top:3px solid var(--green)}.feedback-bar.incorrect{border-top:3px solid var(--red);background:#ffe0e0}.feedback-inner{flex-direction:column;gap:10px;width:100%;max-width:680px;display:flex}.feedback-title{font-size:20px;font-weight:900}.feedback-bar.correct .feedback-title{color:var(--green-dark)}.feedback-bar.incorrect .feedback-title{color:var(--red-dark)}.feedback-explanation{color:var(--gray-900);font-size:14px;line-height:1.5}.feedback-answer{background:#0000000f;border-radius:6px;padding:6px 10px;font-family:Menlo,Monaco,Courier New,monospace;font-size:13px}.feedback-actions{justify-content:flex-end;display:flex}.complete-screen{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;max-width:480px;margin:0 auto;padding:40px 20px;display:flex}.complete-trophy{font-size:80px}.complete-screen h2{font-size:32px;font-weight:900}.stats-grid{grid-template-columns:repeat(3,1fr);gap:12px;width:100%;display:grid}.stat-card{background:var(--white);border-radius:var(--radius);border:2px solid var(--gray-200);flex-direction:column;align-items:center;gap:4px;padding:16px;display:flex}.stat-value{color:var(--green);font-size:28px;font-weight:900}.stat-label{color:var(--gray-300);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:700}.section-label{color:var(--gray-600);text-transform:uppercase;letter-spacing:.06em;font-size:13px;font-weight:700}.header{align-items:center;gap:10px;width:100%;max-width:680px;padding:12px 16px;display:flex}.btn-back{color:var(--gray-300);cursor:pointer;background:0 0;border:none;border-radius:6px;flex-shrink:0;padding:4px 8px;font-size:18px;transition:color .1s}.btn-back:hover{color:var(--gray-600)}.header-center{flex-direction:column;flex:1;gap:4px;display:flex}.header-section-name{color:var(--gray-600);font-size:13px;font-weight:700}.question-counter{color:var(--gray-600);flex-shrink:0;font-size:14px;font-weight:800}.review-badge{background:var(--orange);color:#fff;vertical-align:middle;letter-spacing:.03em;border-radius:4px;margin-right:5px;padding:2px 6px;font-size:10px;font-weight:800;display:inline-block}.home-screen{flex-direction:column;width:100%;max-width:600px;margin:0 auto;padding:0 0 80px;display:flex}.home-topbar{background:var(--gray-100);z-index:10;justify-content:space-between;align-items:center;padding:20px 20px 12px;display:flex;position:sticky;top:0}.home-logo{color:var(--green);font-size:22px;font-weight:900}.home-hero{text-align:center;border-bottom:2px solid var(--gray-200);background:linear-gradient(160deg,#f0fce8 0%,#e8f4fd 100%);flex-direction:column;align-items:center;gap:10px;padding:28px 20px 20px;display:flex}.home-hero-emoji{font-size:56px;line-height:1}.home-hero-title{color:var(--green);margin:0;font-size:32px;font-weight:900}.home-hero-tagline{color:var(--gray-600);max-width:340px;font-size:15px;line-height:1.5}.home-hero-badges{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px;display:flex}.hero-badge{background:var(--white);border:2px solid var(--gray-200);color:var(--gray-600);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700}.home-section{flex-direction:column;gap:12px;padding:20px 20px 0;display:flex}.home-section-title{text-transform:uppercase;letter-spacing:.08em;color:var(--gray-300);font-size:13px;font-weight:800}.about-card{background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius);flex-direction:column;gap:12px;padding:16px 18px;display:flex}.about-text{color:var(--gray-900);font-size:14px;line-height:1.7}.about-rules{border-top:1px solid var(--gray-200);flex-direction:column;gap:8px;padding-top:4px;display:flex}.about-rule{color:var(--gray-600);align-items:flex-start;gap:10px;font-size:13px;line-height:1.4;display:flex}.about-rule-icon{flex-shrink:0;margin-top:1px;font-size:15px}.qtype-list{flex-direction:column;gap:10px;display:flex}.qtype-card{background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius);border-left-width:4px;flex-direction:column;gap:6px;padding:12px 14px;display:flex}.qtype-header{align-items:center;gap:8px;display:flex}.qtype-icon{border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:15px;display:flex}.qtype-label{font-size:14px;font-weight:800}.qtype-desc{color:var(--gray-600);padding-left:36px;font-size:13px;line-height:1.5}.home-summary-inner{background:var(--white);border-radius:var(--radius);border:2px solid var(--gray-200);flex-direction:column;gap:8px;padding:14px 16px;display:flex}.home-progress-text{color:var(--gray-600);font-size:14px;font-weight:700}.home-progress-bar-wrap{background:var(--gray-200);border-radius:6px;height:12px;overflow:hidden}.home-progress-bar-fill{background:var(--green);border-radius:6px;height:100%;transition:width .5s}.sections-list{flex-direction:column;gap:0;padding:12px 20px 0;display:flex}.section-card{background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius);cursor:pointer;box-shadow:0 2px 0 var(--gray-200);-webkit-user-select:none;user-select:none;align-items:center;gap:14px;margin-bottom:12px;padding:16px;transition:all .15s;display:flex;position:relative}.section-card:hover:not(.locked){border-color:var(--green);box-shadow:0 3px 0 var(--green-dark);transform:translateY(-1px)}.section-card:active:not(.locked){box-shadow:0 1px 0 var(--gray-200);transform:translateY(1px)}.section-card.locked{cursor:default;opacity:.6}.section-card.completed{border-color:var(--green);background:#f5fff0}.section-icon{border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;font-size:26px;display:flex;box-shadow:0 3px #00000026}.section-info{flex:1;min-width:0}.section-num{text-transform:uppercase;letter-spacing:.06em;color:var(--gray-300);margin-bottom:2px;font-size:11px;font-weight:700}.section-title{color:var(--gray-900);margin-bottom:2px;font-size:16px;font-weight:800}.section-subtitle{color:var(--gray-600);font-size:13px}.section-status{flex-shrink:0}.status-badge{border-radius:20px;align-items:center;padding:5px 10px;font-size:12px;font-weight:800;display:inline-flex}.completed-badge{background:var(--green-light);color:var(--green-dark)}.locked-badge{background:var(--gray-200);color:var(--gray-300)}.play-badge{background:var(--green);color:#fff}.home-footer{justify-content:center;padding:20px;display:flex}.btn-reset{border:2px solid var(--gray-200);border-radius:var(--radius-sm);color:var(--gray-300);cursor:pointer;background:0 0;padding:8px 20px;font-size:13px;font-weight:700;transition:all .1s}.btn-reset:hover{border-color:var(--red);color:var(--red)}.result-screen{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;width:100%;max-width:480px;margin:0 auto;padding:40px 20px;display:flex}.result-trophy{font-size:80px;line-height:1}.result-title{color:var(--green);font-size:30px;font-weight:900}.result-section-name{color:var(--gray-600);font-size:16px;font-weight:700}.result-stats{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.result-stat{background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius);min-width:90px;color:var(--green);flex-direction:column;align-items:center;gap:4px;padding:14px 20px;display:flex}.result-stat-value{font-size:24px;font-weight:900}.result-stat-label{text-transform:uppercase;letter-spacing:.05em;color:var(--gray-300);font-size:11px;font-weight:700}.result-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.next-section-preview{background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius);text-align:left;width:100%;padding:16px}.next-label{text-transform:uppercase;letter-spacing:.06em;color:var(--gray-300);margin-bottom:10px;font-size:11px;font-weight:700}.next-section-card{align-items:center;gap:12px;display:flex}.next-section-icon{font-size:28px}.next-section-title{font-size:15px;font-weight:800}.next-section-sub{color:var(--gray-600);font-size:13px}.fail-message{border-radius:var(--radius);color:var(--gray-900);background:#fff3f3;border:2px solid #ffd0d0;flex-direction:column;gap:6px;padding:14px 18px;font-size:14px;line-height:1.5;display:flex}.fail-progress-wrap{width:100%}.fail-dots{justify-content:center;gap:6px;display:flex}.fail-dot{background:var(--gray-200);border-radius:7px;width:28px;height:14px}.fail-dot.ok{background:var(--green)}.fail-dot.fail{background:var(--red)}.fail-dot.empty{background:var(--gray-200)}.home-nav-challenge{color:#fff;cursor:pointer;letter-spacing:.02em;white-space:nowrap;background:linear-gradient(135deg,#ff9600,#ff4b4b);border:none;border-radius:20px;padding:8px 16px;font-size:13px;font-weight:800;text-decoration:none;transition:transform .1s,box-shadow .1s;display:inline-block;box-shadow:0 3px #c44000}.home-nav-challenge:hover{background:linear-gradient(135deg,#fa2,#ff6060)}.home-nav-challenge:active{transform:translateY(2px);box-shadow:0 1px #c44000}.challenge-select-screen{flex-direction:column;width:100%;max-width:600px;min-height:100vh;margin:0 auto;display:flex}.csel-header{background:var(--gray-100);z-index:10;align-items:center;gap:12px;padding:16px 20px 12px;display:flex;position:sticky;top:0}.csel-logo{color:var(--green);font-size:18px;font-weight:900}.csel-hero{text-align:center;border-bottom:2px solid var(--gray-200);background:linear-gradient(160deg,#fff8ee 0%,#fff0e0 100%);flex-direction:column;align-items:center;gap:10px;margin:0 -20px;padding:24px 20px 20px;display:flex}.csel-hero-icon{font-size:52px;line-height:1}.csel-hero-title{color:var(--gray-900);margin:0;font-size:28px;font-weight:900}.csel-hero-tagline{color:var(--gray-600);max-width:320px;font-size:14px;line-height:1.7}.csel-hero-badges{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:2px;display:flex}.csel-badge{background:var(--white);border:2px solid var(--gray-200);color:var(--gray-600);border-radius:20px;padding:3px 12px;font-size:12px;font-weight:700}.csel-body{flex-direction:column;gap:24px;padding:20px 20px 60px;display:flex}.csel-section{flex-direction:column;gap:12px;display:flex}.csel-section-title{text-transform:uppercase;letter-spacing:.08em;color:var(--gray-300);font-size:12px;font-weight:800}.csel-about-card{background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius);flex-direction:column;gap:10px;padding:16px 18px;display:flex}.csel-about-text{color:var(--gray-900);font-size:14px;line-height:1.75}.csel-steps{flex-direction:column;gap:10px;display:flex}.csel-step{background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius);align-items:flex-start;gap:12px;padding:14px 16px;display:flex}.csel-step-num{background:var(--orange);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-top:1px;font-size:12px;font-weight:900;display:flex}.csel-step-icon{flex-shrink:0;font-size:22px;line-height:1}.csel-step-body{flex:1;min-width:0}.csel-step-title{color:var(--gray-900);margin-bottom:3px;font-size:14px;font-weight:800}.csel-step-desc{color:var(--gray-600);font-size:13px;line-height:1.55}.csel-rules-card{background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius);flex-direction:column;gap:10px;padding:14px 16px;display:flex}.csel-rule{color:var(--gray-900);align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;display:flex}.csel-rule-icon{flex-shrink:0;margin-top:1px;font-size:15px}.csel-footer-note{color:var(--gray-600);text-align:center;font-size:13px;line-height:1.6}.csel-link-btn{color:var(--blue);cursor:pointer;background:0 0;border:none;padding:0 2px;font-family:inherit;font-size:13px;font-weight:700;text-decoration:underline}.belt-list{flex-direction:column;gap:12px;display:flex}.belt-card{background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius);text-align:left;cursor:pointer;box-shadow:0 3px 0 var(--gray-200);align-items:center;gap:16px;padding:16px;font-family:inherit;transition:all .15s;display:flex}.belt-card:hover{border-color:var(--orange);transform:translateY(-1px);box-shadow:0 4px #d97800}.belt-card:active{box-shadow:0 1px 0 var(--gray-200);transform:translateY(1px)}.belt-icon{border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;font-size:26px;display:flex;box-shadow:0 3px #00000026}.belt-info{flex:1;min-width:0}.belt-label{margin-bottom:2px;font-size:17px;font-weight:900}.belt-desc{color:var(--gray-600);margin-bottom:4px;font-size:13px}.belt-penalty{color:var(--red);background:#ffe0e0;border-radius:10px;padding:2px 8px;font-size:12px;font-weight:700;display:inline-block}.belt-arrow{color:var(--gray-300);flex-shrink:0;font-size:24px}.challenge-play-screen{flex-direction:column;width:100%;max-width:680px;min-height:100vh;margin:0 auto;display:flex}.cp-header{background:var(--gray-100);z-index:10;align-items:center;gap:12px;width:100%;padding:12px 16px 8px;display:flex;position:sticky;top:0}.cp-timer-block{flex-direction:column;flex:1;align-items:center;gap:2px;display:flex}.cp-timer{color:var(--gray-900);font-variant-numeric:tabular-nums;letter-spacing:.03em;font-size:22px;font-weight:900}.cp-penalty-total{color:var(--red);letter-spacing:.02em;font-size:11px;font-weight:700}.cp-counter{color:var(--gray-600);flex-shrink:0;font-size:14px;font-weight:800}.cp-belt-badge{text-align:center;letter-spacing:.06em;text-transform:uppercase;padding:4px 0 0;font-size:12px;font-weight:800}.cp-dots{justify-content:center;gap:5px;padding:8px 16px 4px;display:flex}.cp-dot{border-radius:5px;width:24px;height:10px;transition:background .2s}.cp-dot-pending{background:var(--gray-200)}.cp-dot-current{background:var(--blue)}.cp-dot-ok{background:var(--green)}.cp-dot-fail{background:var(--red)}.cp-question-wrap{flex:1}.cp-feedback{z-index:200;text-align:center;padding:18px 20px;font-size:20px;font-weight:900;animation:.25s slideUp;position:fixed;bottom:0;left:0;right:0}.cp-feedback-ok{background:var(--green-light);border-top:3px solid var(--green);color:var(--green-dark)}.cp-feedback-ng{border-top:3px solid var(--red);color:var(--red-dark);background:#ffe0e0}.cp-feedback-penalty{background:#ff4b4b22;border-radius:8px;margin-left:10px;padding:2px 8px;font-size:16px;display:inline-block}.cr-screen{text-align:center;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:480px;margin:0 auto;padding:40px 20px 60px;display:flex}.cr-trophy{font-size:80px;line-height:1;animation:.4s cubic-bezier(.34,1.56,.64,1) pop}@keyframes pop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.cr-rank{font-size:26px;font-weight:900}.cr-belt{font-size:16px;font-weight:800}.cr-stats{flex-direction:column;gap:12px;width:100%;display:flex}.cr-main-stat{background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius);flex-direction:column;align-items:center;gap:4px;padding:20px;display:flex}.cr-main-val{color:var(--gray-900);font-variant-numeric:tabular-nums;font-size:40px;font-weight:900}.cr-sub-stats{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.cr-sub-stat{background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius);flex-direction:column;align-items:center;gap:4px;padding:12px 8px;display:flex}.cr-sub-val{color:var(--gray-900);font-variant-numeric:tabular-nums;font-size:20px;font-weight:900}.cr-stat-lbl{text-transform:uppercase;letter-spacing:.05em;color:var(--gray-300);font-size:11px;font-weight:700}.cr-dots{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.cr-dot{border-radius:6px;width:28px;height:12px}.cr-dot-ok{background:var(--green)}.cr-dot-fail{background:var(--red)}.cr-actions{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.btn-twitter{color:#fff;border-radius:var(--radius);background:#000;justify-content:center;align-items:center;gap:8px;min-width:200px;padding:14px 32px;font-size:15px;font-weight:800;text-decoration:none;transition:transform .1s,box-shadow .1s,background .1s;display:inline-flex;box-shadow:0 4px #333}.btn-twitter:hover{background:#222}.btn-twitter:active{transform:translateY(2px);box-shadow:0 2px #333}@media (width<=480px){.question-title{font-size:18px}.regex-display{font-size:16px}.options-grid{grid-template-columns:repeat(2,1fr)}.result-stats{gap:10px}.result-stat{min-width:80px;padding:10px 14px}}