:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}#root{width:100%;min-height:100vh;margin:0;padding:0}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.home{background-image:url(/assets/mainmenu.png-C7RC5ubu.png);background-position:50%;background-repeat:no-repeat;background-size:100% 100%;width:min(100vw,183.369vh);height:min(100vh,54.5347vw);margin:auto;position:relative}body{background:#111827;justify-content:center;align-items:center;width:100vw;height:100vh;margin:0;display:flex;overflow:hidden}.home-content{max-width:700px}.eyebrow{letter-spacing:3px;color:#60a5fa;margin-bottom:20px;font-size:14px}h1{letter-spacing:4px;margin:0;font-size:72px}.tagline{color:#d1d5db;margin-top:20px;font-size:24px}.description{color:#9ca3af;margin:20px auto 35px;font-size:18px;line-height:1.6}.start-button{cursor:pointer;color:#111827;background:#60a5fa;border:none;border-radius:10px;padding:16px 32px;font-size:18px;font-weight:700}.start-button:hover{transform:translateY(-2px)}.database-scroll{border:1px solid #374151;border-radius:8px;max-height:320px;overflow-y:auto}.sql-section textarea{box-sizing:border-box;resize:vertical;width:600px;max-width:90%;min-height:140px;padding:12px;font-family:monospace;font-size:14px}.case-001{color:#fff;background:#111827;width:100%;height:100%;position:absolute;inset:0}.case-001 h1{color:#fff}.case-001 .database-scroll{box-sizing:border-box;background:#0f172ae0;border:2px solid #ffffff2e;border-radius:8px;padding:12px}.case-001 .database-scroll table{color:#e8edf5}.case-001 .database-scroll th{color:#fff}.game-screen{background:#111827;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;overflow:hidden}.case-scene{width:min(100vw,183.369vh);height:min(100vh,54.5347vw);position:relative;overflow:hidden}.menu-controls{position:absolute;inset:0}.main-menu-start{cursor:pointer;z-index:10;background:0 0;border:none;width:38%;height:8%;position:absolute;top:74%;left:50%;transform:translate(-50%,-50%)}.case-navigation{z-index:50;width:100%;height:6%;position:absolute;top:3%;left:0}.nav-back{position:absolute;top:50%;left:3%;transform:translateY(-50%)}.case-buttons{gap:12px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.case-navigation button{cursor:pointer}.case-001 .sql-guide{box-sizing:border-box;color:#e8edf5;z-index:40;background:#0f172a;border:1px solid #374151;border-radius:8px;width:32%;max-height:78%;padding:20px;position:absolute;top:9%;right:3%;overflow:hidden auto}.case-001 .sql-guide pre{white-space:pre-wrap;overflow-wrap:break-word}.case-001 .sql-guide h2{margin-top:0}.database-section{width:64%;height:28%;position:absolute;top:28%;left:5%}.sql-section{width:64%;height:27%;position:absolute;top:61%;left:5%}.hint-section{width:23%;position:absolute;top:25%;right:4%}.case-navigation{z-index:50;position:absolute;top:3%;left:4%;right:4%}.nav-guide{position:absolute;top:50%;right:8%;transform:translateY(-50%)}.case-001 h1+p{color:#172033;width:52%;margin:0;position:absolute;top:25%;left:8%}.case-001 .database-section{width:50%;height:30%;position:absolute;top:31%;left:8%}.case-001 .database-section h2{margin:0 0 8px}.case-001 .database-scroll{box-sizing:border-box;width:100%;height:calc(100% - 35px);overflow:auto}.case-001 .sql-section{width:50%;height:29%;position:absolute;top:64%;left:8%}.case-001 .sql-section h2{margin:0 0 8px}.case-001 .sql-section textarea{box-sizing:border-box;resize:none;width:100%;height:62%;display:block}.case-001 .sql-section .run-query{float:right;margin-top:8px}.case-001 .case-header h1{margin:0 0 24px;font-size:clamp(32px,4vw,64px);line-height:1.1}.case-001 .case-header p{color:#fff;margin:6px 0;line-height:1.4}.case-001 .case-header .eyebrow,.case-001 .case-header h1,.case-001 .case-header p{position:static;inset:auto;transform:none}.case-001 .case-header{width:55%;position:absolute;top:9%;left:8%}.case-001 .case-header .eyebrow{margin:0 0 8px}.case-001 .case-header h1{margin:0 0 16px;line-height:1}.case-001 .case-header p{margin:5px 0;line-height:1.3}.case-002{color:#f9fafb;background:#111827;width:100%;height:100%;position:absolute;inset:0}.case-002 .case-header{width:55%;position:absolute;top:9%;left:8%}.case-002 .case-header .eyebrow{color:#60a5fa;margin:0 0 8px;position:static}.case-002 .case-header h1{color:#f9fafb;margin:0 0 16px;line-height:1;position:static}.case-002 .case-header p{color:#d1d5db;margin:5px 0;line-height:1.3;position:static}.case-002 .database-section{width:50%;height:30%;position:absolute;top:31%;left:8%}.case-002 .database-section h2{margin:0 0 8px}.case-002 .database-scroll{box-sizing:border-box;width:100%;height:calc(100% - 35px);overflow:auto}.case-002 .sql-section{width:50%;height:29%;position:absolute;top:64%;left:8%}.case-002 .sql-section h2{margin:0 0 8px}.case-002 .sql-section textarea{box-sizing:border-box;resize:none;width:100%;height:62%;display:block}.case-002 .case-header .eyebrow{letter-spacing:3px;font-size:14px}.case-002 .case-header h1{letter-spacing:4px;font-size:clamp(32px,4vw,64px);line-height:1}.case-002 .case-header p{font-size:16px;font-weight:400;line-height:1.3}.case-002 .database-section h2,.case-002 .sql-section h2{font-size:1.5em}.case-002 .database-scroll table{font-size:16px}.case-002 .sql-section textarea{font-size:14px}.case-002 .sql-section button{font-size:13.3333px}.case-003{color:#f9fafb;background:#111827;width:100%;height:100%;position:absolute;inset:0}.case-003 .case-header{width:55%;position:absolute;top:9%;left:6.7%}.case-003 .case-header .eyebrow{letter-spacing:3px;color:#60a5fa;margin:0 0 8px;font-size:14px;position:static}.case-003 .case-header h1{letter-spacing:4px;color:#f9fafb;margin:0 0 16px;font-size:clamp(32px,4vw,64px);line-height:1;position:static}.case-003 .case-header p{color:#d1d5db;margin:5px 0;font-size:16px;font-weight:400;line-height:1.3;position:static}.case-003 .database-section{width:50%;height:30%;position:absolute;top:31%;left:6.7%}.case-003 .database-section h2{margin:0 0 8px;font-size:1.5em}.case-003 .database-scroll{box-sizing:border-box;width:100%;height:calc(100% - 35px);overflow:auto}.case-003 .sql-section{width:50%;height:29%;position:absolute;top:64%;left:6.7%}.case-003 .sql-section h2{margin:0 0 8px;font-size:1.5em}.case-003 .sql-section textarea{box-sizing:border-box;resize:none;width:100%;height:62%;font-size:14px;display:block}.case-003 .sql-section button{font-size:13.3333px}.case-003 .database-scroll table{font-size:16px}.case-003 .database-section{height:25%}.case-003 .database-scroll{height:220px;max-height:220px}.case-004{color:#f9fafb;background:#111827;width:100%;height:100%;position:absolute;inset:0}.case-004 .case-header{width:60%;position:absolute;top:9%;left:6.7%}.case-004 .case-header .eyebrow{letter-spacing:3px;color:#60a5fa;margin:0 0 8px;font-size:14px;position:static}.case-004 .case-header h1{letter-spacing:4px;color:#f9fafb;margin:0;font-size:clamp(32px,4vw,64px);line-height:1;position:static}.case-004 .case-description{width:55%;position:absolute;top:20%;left:6.7%}.case-004 .case-description p{color:#d1d5db;margin:5px 0;font-size:16px;line-height:1.3}.case-004 .case-description h2{margin:10px 0 5px;font-size:18px}.case-004 .database-section{width:60%;height:22%;position:absolute;top:41%;left:6.7%}.case-004 .database-section h2{margin:0 0 8px;font-size:1.5em}.case-004 .database-scroll{box-sizing:border-box;width:100%;height:180px;max-height:180px;overflow:auto}.case-004 .database-scroll table{font-size:16px}.case-004 .sql-section{width:50%;height:28%;position:absolute;top:65%;left:6.7%}.case-004 .sql-section h2{margin:0 0 8px;font-size:1.5em}.case-004 .sql-section textarea{box-sizing:border-box;resize:none;width:100%;height:62%;font-size:14px;display:block}.case-004 .sql-section button{font-size:13.3333px}.case-004 .query-results{box-sizing:border-box;background:#0f172a;border:1px solid #374151;border-radius:8px;width:75%;max-height:100%;padding:12px;position:absolute;top:0;left:105%;overflow:auto}.case-004 .query-results h2{margin-top:0;font-size:18px}.case-004 .query-results table{width:100%;font-size:14px}.case-004 .case-solved{box-sizing:border-box;color:#f9fafb;background:#0f172a;border:1px solid #374151;border-radius:10px;width:75%;padding:20px;position:absolute;top:15%;left:110%}.case-004 .case-solved h2{color:#fff;margin:0 0 12px;font-size:clamp(22px,2vw,30px)}.case-004 .case-solved p{color:#d1d5db;margin:7px 0;font-size:15px;line-height:1.5}.case-001 .case-solved,.case-002 .case-solved,.case-003 .case-solved{box-sizing:border-box;color:#f9fafb;z-index:30;background:#0f172a;border:1px solid #374151;border-radius:10px;width:75%;padding:20px;position:absolute;top:10%;left:110%}.case-001 .case-solved h2,.case-002 .case-solved h2,.case-003 .case-solved h2{color:#fff;margin:0 0 12px;font-size:clamp(22px,2vw,30px)}.case-001 .case-solved p,.case-002 .case-solved p,.case-003 .case-solved p{color:#d1d5db;margin:7px 0;font-size:15px;line-height:1.5}.case-001 .query-results{box-sizing:border-box;z-index:20;background:#0f172a;border:1px solid #374151;border-radius:8px;width:75%;max-height:45%;padding:12px;position:absolute;top:55%;left:105%;overflow:auto}.case-001 .query-results h2{margin:0 0 10px;font-size:18px}.case-001 .query-results table{width:100%;font-size:14px}.case-002 .query-results{box-sizing:border-box;z-index:20;background:#0f172a;border:1px solid #374151;border-radius:8px;width:75%;max-height:45%;padding:12px;position:absolute;top:55%;left:105%;overflow:auto}.case-002 .query-results h2{margin:0 0 10px;font-size:18px}.case-002 .query-results table{width:100%;font-size:14px}.case-003 .query-results{box-sizing:border-box;z-index:20;background:#0f172a;border:1px solid #374151;border-radius:8px;width:75%;max-height:45%;padding:12px;position:absolute;top:55%;left:105%;overflow:auto}.case-003 .query-results h2{margin:0 0 10px;font-size:18px}.case-003 .query-results table{width:100%;font-size:14px}.global-sql-guide{box-sizing:border-box;color:#e8edf5;z-index:100;background:#0f172a;border:1px solid #374151;border-radius:8px;width:30%;max-height:78%;padding:20px;position:absolute;top:9%;right:4%;overflow:hidden auto}.global-sql-guide h2{margin:0 0 18px;font-size:20px}.global-sql-guide h3{margin:16px 0 6px;font-size:15px}.global-sql-guide pre{white-space:pre-wrap;overflow-wrap:break-word;background:#111827;border:1px solid #374151;border-radius:6px;margin:0;padding:10px;font-size:13px}