:root{--color-bg-primary: #eaeaea;--color-bg-secondary: #acaba9;--color-bg-tertiary: #75706f;--color-bg-code: #c9c8c6;--color-text-primary: #121212;--color-text-secondary: #2c2c2c;--color-text-tertiary: #75706f;--color-text-quaternary: #9a9896;--color-accent-primary: #2c2c2c;--color-accent-secondary: #121212;--color-accent-hover: #75706f;--color-border: #acaba9;--color-border-hover: #75706f;--color-success: #28a745;--color-error: #dc3545;--color-warning: #dda708;--color-info: #17a2b8;--color-highlight: rgba(0, 0, 0, .8);--color-opacity-1: rgba(0, 0, 0, .01);--color-opacity-2: rgba(0, 0, 0, .02);--color-opacity-3: rgba(0, 0, 0, .03);--color-opacity-4: rgba(0, 0, 0, .04);--color-opacity-5: rgba(0, 0, 0, .05);--color-opacity-10: rgba(0, 0, 0, .1);--color-opacity-20: rgba(0, 0, 0, .2);--color-opacity-30: rgba(0, 0, 0, .3);--color-opacity-40: rgba(0, 0, 0, .4);--color-opacity-50: rgba(0, 0, 0, .5);--color-opacity-60: rgba(0, 0, 0, .6);--color-opacity-70: rgba(0, 0, 0, .7);--color-opacity-80: rgba(0, 0, 0, .8);--color-opacity-90: rgba(0, 0, 0, .9)}[data-theme=dark]{--color-bg-primary: #121212;--color-bg-secondary: #2c2c2c;--color-bg-tertiary: #75706f;--color-bg-code: #1f1f1f;--color-text-primary: #eaeaea;--color-text-secondary: #acaba9;--color-text-tertiary: #75706f;--color-text-quaternary: #4a4847;--color-accent-primary: #acaba9;--color-accent-secondary: #eaeaea;--color-accent-hover: #75706f;--color-border: #2c2c2c;--color-border-hover: #75706f;--color-success: #4caf50;--color-error: #f44336;--color-warning: #ff9800;--color-info: #2196f3;--color-highlight: rgba(255, 255, 255, .8);--color-opacity-1: rgba(255, 255, 255, .01);--color-opacity-2: rgba(255, 255, 255, .02);--color-opacity-3: rgba(255, 255, 255, .03);--color-opacity-4: rgba(255, 255, 255, .04);--color-opacity-5: rgba(255, 255, 255, .05);--color-opacity-10: rgba(255, 255, 255, .1);--color-opacity-20: rgba(255, 255, 255, .2);--color-opacity-30: rgba(255, 255, 255, .3);--color-opacity-40: rgba(255, 255, 255, .4);--color-opacity-50: rgba(255, 255, 255, .5);--color-opacity-60: rgba(255, 255, 255, .6);--color-opacity-70: rgba(255, 255, 255, .7);--color-opacity-80: rgba(255, 255, 255, .8);--color-opacity-90: rgba(255, 255, 255, .9)}*{margin:0;padding:0;box-sizing:border-box;font-weight:500}html,body{height:100%}body{font-family:JetBrains Mono,Merriweather,Montserrat,monospace,serif,sans-serif;background-color:var(--color-bg-primary);color:var(--color-text-primary);transition:background-color .3s ease,color .3s ease;display:flex;flex-direction:column}#root{height:100%;display:flex;flex-direction:column}input,textarea{font-variant-ligatures:none}button{font-family:JetBrains Mono,Merriweather,Montserrat,monospace,serif,sans-serif;border:none;text-decoration:none}a{text-decoration:none}.navbar{width:100%;padding:2rem;background-color:var(--color-bg-primary)}.navbar-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;position:relative}.navbar-title{position:absolute;left:50%;transform:translate(-50%);font-size:1.5rem;font-weight:600;color:var(--color-text-primary);margin:0}.theme-toggle{background:none;border:1px solid var(--color-border);border-radius:.25rem;padding:.5rem 1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.875rem;transition:all .2s ease;margin-left:auto;color:var(--color-text-primary)}.theme-toggle:hover{border-color:var(--color-border-hover);background-color:var(--color-bg-secondary)}.theme-toggle:active{transform:scale(.95)}.footer{width:100%;padding:2rem;background-color:var(--color-bg-primary)}.footer-content{max-width:1200px;margin:0 auto;display:flex;justify-content:flex-end;align-items:center}.footer-version{color:var(--color-text-tertiary);font-size:.875rem;font-weight:400}.regex-problem-container{flex:1;align-items:center;display:flex;flex-direction:column;justify-content:center;width:100%}.regex-problem-text-container{width:fit-content;max-width:1000px;padding:0 2em;margin-bottom:1em}.regex-problem-text{padding:.8em;border-radius:.5em;font-weight:600;color:var(--color-text-secondary);text-align:left;line-height:1.6;white-space:pre-wrap;word-wrap:break-word}.regex-problem-text-short{font-size:1.2em}.regex-problem-text-mid{font-size:clamp(.8em,calc(.8em + .4vw),1.2em)}.regex-problem-text-long{font-size:clamp(.6em,calc(.7em + .45vw),1.2em)}.regex-highlight{color:var(--color-bg-primary);background-color:var(--color-highlight);font-weight:600;padding:2px 0;border-radius:2px}.regex-problem-bottom-container{width:100%;max-width:700px;border-top:1px solid var(--color-border);display:flex;flex-direction:column;align-items:center;padding:1em 2em;box-sizing:border-box}.regex-problem-info-container{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:1em}.regex-problem-info-row{display:flex;flex-direction:row;gap:10px;align-items:flex-start}.regex-problem-label{color:var(--color-text-primary);font-weight:500}.regex-description{color:var(--color-text-primary);font-size:1em;font-weight:400;text-align:left;line-height:1.5}.regex-difficulty{font-size:1em;font-weight:500;text-align:left}.inline-code{background-color:var(--color-bg-code);padding:2px 6px;border-radius:3px;font-family:JetBrains Mono,monospace;color:var(--color-text-secondary)}.regex-input-row{display:flex;flex-direction:row;align-items:center;gap:5px;width:100%;margin-bottom:8px}.regex-separator{color:var(--color-accent-primary);font-size:1.4em;font-weight:400}.regex-input{font-size:1.2em;text-align:left;background-color:transparent;border:none;color:var(--color-accent-primary);outline:none;border-bottom:1px solid var(--color-border);font-weight:400;font-family:JetBrains Mono,monospace}.regex-input::placeholder{color:var(--color-text-tertiary);font-weight:400;opacity:1}.regex-input:focus{border-bottom-color:var(--color-accent-primary)}.regex-input-pattern{flex:1}.regex-input-flags{width:60px}.regex-subtext{display:flex;width:100%;color:var(--color-text-tertiary);font-size:.7em;font-weight:400;margin-bottom:10px;text-align:left}.regex-validation-container{display:flex;flex-direction:row;align-items:center;width:100%;gap:10px;margin-top:10px}.regex-validation-message{font-size:1em;font-weight:400;text-align:left;padding:8px 12px;border-radius:4px;line-height:1.5}.regex-validation-message.correct{color:var(--color-success);background-color:#4caf501a}.regex-validation-message.incorrect{color:var(--color-error);background-color:#f443361a}.regex-next-button{font-size:1em;font-weight:400;text-align:left;padding:8px 12px;border-radius:4px;line-height:1.5;border:none;background-color:var(--color-bg-secondary);color:var(--color-text-primary);cursor:pointer;font-family:inherit;transition:background-color .2s ease;margin-left:auto}.regex-next-button:hover,.regex-next-button:active{background-color:var(--color-bg-tertiary)}.regex-next-button:focus{outline:2px solid var(--color-accent-primary);outline-offset:2px}@media(max-width:800px){.regex-problem-text-container{padding:0 1em}.regex-problem-bottom-container{padding:1em}}.problem-filter-section{max-width:700px;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1em;margin-bottom:2em;margin-top:1em;padding:.5em 1em;box-sizing:border-box;border-radius:.8em;background-color:var(--color-opacity-3)}.problem-filter-label{color:var(--color-text-tertiary);font-size:.9em;font-weight:500;white-space:nowrap}.difficulty-filter-container{display:flex;align-items:center;flex-direction:row},.problem-filter-buttons{display:flex;flex-direction:row;gap:.5em;flex-wrap:wrap;align-items:center}.problem-filter-button{font-size:.875em;font-weight:500;padding:.5em 1em;border:none;background-color:transparent;cursor:pointer;font-family:inherit;transition:all .2s ease;color:var(--color-text-quaternary)}.problem-filter-button.selected{font-weight:500}.problem-filter-button:active{transform:scale(.95)}.problem-filter-button:focus{outline:none}.home-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center}.home-section{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;font-weight:100}.app-content{height:100%;display:flex;flex-direction:column;justify-content:space-between}