.modal-overlay{position:fixed;inset:0;background:#04070ed9;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.modal-content{background:#121623d9;border-radius:20px;padding:0;max-width:440px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 28px 80px #03060ed9;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);position:relative;animation:modalSlideIn .3s cubic-bezier(.16,1,.3,1)}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-close{position:absolute;top:18px;right:18px;background:none;border:none;font-size:26px;cursor:pointer;color:#fff6;z-index:1;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.modal-close:hover{background:#ffffff1a;color:#fff}.auth-form{padding:40px 36px}.auth-form h2{margin:0 0 28px;color:#fff;font-size:1.6rem;font-weight:700;text-align:center;letter-spacing:.03em}.form-group{margin-bottom:22px}.form-group label{display:block;margin-bottom:8px;color:#ffffffbf;font-weight:500;font-size:.9rem;letter-spacing:.02em}.form-group input{width:100%;padding:14px 18px;background:#060a1599;border:1px solid rgba(255,255,255,.12);border-radius:10px;font-size:1rem;color:#fff;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.form-group input::placeholder{color:#ffffff4d}.form-group input:focus{outline:none;border-color:#5bc9ff99;box-shadow:0 0 0 3px #5bc9ff26}.field-error{display:block;color:#ff8a8a;font-size:.85rem;margin-top:6px}.error-message{background:#dc262626;color:#ffb3b3;padding:14px 16px;border-radius:10px;margin-bottom:24px;border:1px solid rgba(220,38,38,.3);font-size:.9rem}.auth-button{width:100%;background:linear-gradient(135deg,#5bc9fff2,#3488fff2);color:#040d21;border:none;padding:16px 20px;border-radius:10px;font-size:1.05rem;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:all .2s;margin-bottom:24px}.auth-button:hover:not(:disabled){background:linear-gradient(135deg,#6dd0ff,#4894ff);transform:translateY(-2px);box-shadow:0 8px 24px #3488ff59}.auth-button-signup{background:linear-gradient(135deg,#7957ffe6,#a266ffe6);color:#fff}.auth-button-signup:hover:not(:disabled){background:linear-gradient(135deg,#8565ff,#ad75ff);box-shadow:0 8px 24px #7957ff59}.auth-button:disabled{background:#ffffff1a;color:#ffffff4d;cursor:not-allowed;transform:none;box-shadow:none}.auth-toggle{text-align:center;margin:0;color:#ffffff80;font-size:.9rem}.link-button{background:none;border:none;color:#5bc9ffe6;cursor:pointer;text-decoration:underline;font-size:.9rem;font-weight:600;padding:0 4px}.link-button:hover{color:#fff}.link-button-signup{background:linear-gradient(135deg,#7957ffcc,#a266ffcc);color:#fff;border-radius:999px;padding:10px 18px;text-decoration:none}.link-button-signup:hover{background:linear-gradient(135deg,#8565ff,#ad75ff);color:#fff}.user-menu{position:relative;display:inline-block}.user-button{background:#7e57c2;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;transition:background .2s}.user-button:hover{background:#6d48af}.user-dropdown{position:absolute;top:100%;right:0;background:#1e293b;border:1px solid #374151;border-radius:8px;box-shadow:0 10px 15px -3px #0000004d;min-width:150px;z-index:100;margin-top:4px;overflow:hidden}.user-dropdown button{width:100%;background:none;border:none;padding:12px 16px;text-align:left;cursor:pointer;font-size:14px;color:#e5e7eb;transition:background .2s}.user-dropdown button:hover{background:#374151}.user-dropdown button:first-child{border-radius:0}.user-dropdown button:last-child{border-radius:0;color:#f87171;border-top:1px solid #374151}@media (max-width: 480px){.modal-content{width:95%;margin:20px}.auth-form{padding:24px 20px}}:root{font-family:Inter,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#05070d}#root{min-height:100vh}a{color:inherit;text-decoration:none}button{font-family:inherit}:root{--page-bg: #05070d;--surface: rgba(15, 18, 28, .82);--surface-border: rgba(255, 255, 255, .08);--surface-hover: rgba(36, 45, 72, .82);--text-primary: #f4f7ff;--text-muted: rgba(239, 243, 255, .68);--accent: #7bc7ff;--accent-strong: #5b7aff;--accent-soft: rgba(123, 199, 255, .14);--header-height: 56px;--footer-height: 56px;--content-max-width: 1440px;color-scheme:dark}.app-shell{min-height:100vh;display:flex;flex-direction:column;padding-top:var(--header-height);background:var(--page-bg);color:var(--text-primary)}.app-header{position:fixed;width:100%;height:var(--header-height);top:0;z-index:20;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(90deg,#060912eb,#0c1220d1);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 6px 16px #0509128c}.app-nav{width:min(100%,var(--content-max-width));height:100%;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:32px;font-size:.95rem}.app-nav .brand{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:1.05rem;letter-spacing:.08em;color:var(--text-primary);margin-right:auto}.brand-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#7bc7ff47,#5b7aff59);color:var(--text-primary);font-size:1.2rem;box-shadow:0 10px 24px #5b7aff47}.nav-links{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;margin-left:auto}.nav-links a{position:relative;font-weight:500;padding:7px 14px;border-radius:999px;transition:color .2s ease,background .2s ease;color:var(--text-muted)}.nav-links a:hover,.nav-links a:focus-visible{color:var(--text-primary);background:var(--accent-soft);outline:none}.nav-links a.active{color:var(--text-primary);background:#7bc7ff38;box-shadow:0 0 0 1px #7bc7ff47}.app-main{flex:1;width:100%;display:flex;position:relative}.app-main>*{flex:1;display:flex;min-width:0}.app-footer{height:var(--footer-height);display:grid;place-items:center;font-size:.8rem;color:var(--text-muted);border-top:1px solid rgba(255,255,255,.06);background:#05070de6}.page{flex:1;width:100%;min-height:calc(100vh - var(--header-height) - var(--footer-height));padding:clamp(32px,5vw,56px) clamp(18px,6vw,48px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,4vw,32px);text-align:center}.page>*{width:min(760px,100%);max-width:min(760px,100%)}.page.home>*{width:min(860px,100%);max-width:min(860px,100%)}.page.games>*{width:min(1220px,100%);max-width:min(1220px,100%)}.page h1{margin:0;font-size:clamp(2rem,3.6vw,3rem);letter-spacing:.04em}.page .intro{color:var(--text-muted);margin:0;line-height:1.7}.page .hint{color:var(--text-muted);font-size:.9rem;margin:0}.page .cta{align-self:center}.page .cta.secondary{background:transparent;color:var(--text-primary);border:1px solid rgba(123,199,255,.55);box-shadow:none}.page .cta.secondary:hover,.page .cta.secondary:focus-visible{color:#05070d;background:#7bc7ffe6}.start-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}.topics{display:grid;gap:18px;width:100%;text-align:left}.topic{background:#121623c7;border-radius:20px;padding:18px 24px;border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px #05091266}.topic h2{margin:0 0 8px;font-size:1.1rem;letter-spacing:.03em}.topic p{margin:0;color:var(--text-muted);line-height:1.65}.block-guides{width:100%;text-align:left;background:#0c101cb8;border-radius:24px;padding:clamp(20px,4vw,32px);border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 48px #05091266;display:grid;gap:20px}.block-guides h2{margin:0;font-size:1.6rem;letter-spacing:.03em}.block-guides>p{margin:0;color:var(--text-muted);line-height:1.6}.block-category{display:grid;gap:12px;padding:18px 20px;border-radius:18px;background:#121623b3;border:1px solid rgba(255,255,255,.06)}.block-category h3{margin:0;font-size:1.15rem;letter-spacing:.04em}.block-category ul{list-style:none;padding:0;margin:0;display:grid;gap:16px}.block-guide{display:grid;gap:12px;padding:16px 18px;border-radius:16px;background:#0b0e18b3;border:1px solid rgba(255,255,255,.05)}.block-guide-header{display:grid;gap:6px}.block-guide-header strong{font-size:1rem;letter-spacing:.02em}.block-guide-header span{color:var(--text-muted);line-height:1.6}.block-example{color:var(--accent);font-size:.9rem;letter-spacing:.03em}.block-guide-examples{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block-guide-example{display:grid;gap:8px;grid-template-rows:auto 1fr}.block-guide-label{text-transform:uppercase;font-size:.72rem;letter-spacing:.18em;color:var(--text-muted)}.block-image-placeholder{min-height:120px;border-radius:12px;border:1px dashed rgba(123,199,255,.45);background:#090c1499;color:#7bc7ffcc;display:grid;place-items:center;text-align:center;font-size:.85rem;height:100%}.block-image{width:100%;height:100%;max-height:100%;object-fit:contain;border-radius:12px;border:1px solid rgba(123,199,255,.2);background:#090c14cc;display:block}.python-example{margin:0;padding:12px 14px;border-radius:12px;background:#090c14cc;border:1px solid rgba(123,199,255,.2);color:#dce6ff;font-size:.85rem;line-height:1.5;overflow-x:auto;height:100%}.game-grid{display:grid;width:100%;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));text-align:left}.game-card{background:#121623c7;border-radius:20px;padding:20px 24px;border:1px solid rgba(255,255,255,.08);box-shadow:0 16px 38px #05091261}.game-card h2{margin:0 0 10px;font-size:1.1rem;letter-spacing:.02em}.game-card p{margin:0;color:var(--text-muted);line-height:1.6}.game-card .tech{margin-top:12px;color:var(--accent);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}.game-card-meta{display:flex;flex-wrap:wrap;gap:10px}.game-status-badge{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;border:1px solid transparent;font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.game-status-badge.is-guaranteed{background:#5ccd8c24;color:#dffde9;border-color:#5ccd8c52}.game-status-badge.is-supported-evolving{background:#ffc26329;color:#ffe6bd;border-color:#ffc2634d}.game-card-actions{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}.game-card .cta{align-self:flex-start}.auth-form{width:min(420px,100%);margin:0 auto;display:grid;gap:14px;text-align:left}.auth-form label{display:grid;gap:6px;font-weight:500;color:var(--text-muted)}.auth-form input,.auth-form textarea{padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#0b0f1ad9;color:var(--text-primary)}.auth-form input:focus-visible{outline:none;border-color:#7bc7ff99;box-shadow:0 0 0 2px #7bc7ff40}.auth-form button{margin-top:6px;padding:12px 20px;border-radius:999px;border:none;background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#05070d;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 18px 45px #7bc7ff52}.auth-form button:hover,.auth-form button:focus-visible{transform:translateY(-1px);box-shadow:0 22px 60px #5bc9ff61;outline:none}.switch{color:var(--text-muted)}.home{position:relative;width:100%;background:radial-gradient(circle at top,rgba(123,199,255,.08),transparent 58%)}.home-card{width:min(760px,100%);background:#0f131fd1;border-radius:26px;padding:clamp(26px,4vw,40px);border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 54px #03060f85;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);text-align:left}.home h1{font-size:clamp(2.2rem,4vw,3.2rem);margin-bottom:12px;letter-spacing:.04em}.home p{color:var(--text-muted);font-size:1rem;line-height:1.6;margin-bottom:20px}.bullets{padding-left:20px;margin:0 0 28px;color:var(--text-muted);line-height:1.8;text-align:left}.cta{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#05070d;border-radius:999px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 18px 45px #7bc7ff52}.cta:after{content:"→";font-size:1.1em}.cta:hover,.cta:focus-visible{transform:translateY(-1px);box-shadow:0 22px 60px #5bc9ff61;color:#05070d}@media (max-width: 1200px){.app-nav{padding-inline:22px;gap:22px}.page.games>*{width:min(1080px,100%);max-width:min(1080px,100%)}.page.help>*{width:min(1040px,100%);max-width:min(1040px,100%)}}@media (max-width: 980px){.app-nav{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 20px}.nav-links{width:100%;justify-content:flex-start;margin-left:0;gap:10px}.page{padding:28px 20px 40px;gap:20px}.page.home>*,.page.games>*,.page.help>*{width:100%;max-width:100%}.game-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}.help-keyboard-grid,.help-function-grid,.help-stage-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}}@media (max-width: 720px){.app-nav{flex-direction:column;align-items:flex-start;gap:16px;padding:18px 20px}.nav-links{flex-wrap:wrap;gap:10px}.page{padding:28px 16px;gap:20px}.home-card{border-radius:22px}}.hint{color:var(--text-muted);font-size:12px}.login-button{background:#7e57c2;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:background .2s}.login-button:hover{background:#6d48af}.loading{display:flex;align-items:center;justify-content:center;height:100vh;font-size:18px;color:#666}.page.help>*{width:min(1140px,100%);max-width:min(1140px,100%)}.help-panel{width:100%;text-align:left;background:#0c101cb8;border-radius:24px;padding:clamp(20px,4vw,32px);border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 48px #05091266;display:grid;gap:14px}.help-panel h2{margin:0;font-size:1.45rem;letter-spacing:.02em}.help-panel-intro{margin:0;color:var(--text-muted);line-height:1.65}.help-steps,.help-bullets{margin:0;padding-left:1.2rem;display:grid;gap:8px;line-height:1.65}.help-keyboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}.help-key-row{display:grid;gap:6px;padding:12px 14px;border-radius:14px;background:#121623b3;border:1px solid rgba(255,255,255,.06)}.help-key-row strong{font-size:.98rem}.help-key-row span{color:var(--text-muted);font-size:.9rem}.help-key-row code{font-size:.82rem;padding:6px 8px;border-radius:10px;background:#090c14d9;border:1px solid rgba(123,199,255,.16);color:#dce6ff;overflow-x:auto}.help-function-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}.help-stage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;margin-bottom:14px}.help-stage-card{display:grid;gap:10px;padding:16px;border-radius:16px;background:#121623c7;border:1px solid rgba(255,255,255,.08)}.help-stage-card.is-supported{border-color:#66bb6a3d;box-shadow:inset 0 0 0 1px #66bb6a14}.help-stage-card.is-future{border-color:#7bc7ff2e}.help-stage-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.help-stage-header h3,.help-stage-card p,.help-stage-goal{margin:0}.help-stage-status{padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;background:#7bc7ff29;border:1px solid rgba(123,199,255,.24);color:#d9ebff}.help-stage-section{display:grid;gap:6px}.help-stage-section strong{font-size:.88rem}.help-stage-card .help-bullets{margin:0}.help-stage-goal{color:var(--text-muted);font-size:.92rem;line-height:1.5}.help-function-card{display:grid;gap:8px;padding:14px;border-radius:14px;background:#121623b3;border:1px solid rgba(255,255,255,.06)}.help-function-card h3{margin:0;font-size:1rem}.help-function-card p{margin:0;color:var(--text-muted);font-size:.92rem;line-height:1.5}.help-function-card pre{margin:0;padding:12px;border-radius:12px;background:#090c14cc;border:1px solid rgba(123,199,255,.2);color:#dce6ff;font-size:.8rem;line-height:1.5;overflow-x:auto}.help-compare-grid{display:grid;gap:14px}.help-compare-card{display:grid;gap:10px;padding:16px;border-radius:16px;background:#121623b3;border:1px solid rgba(255,255,255,.06)}.help-compare-card h3,.help-compare-card p{margin:0}.help-compare-card p{color:var(--text-muted);font-size:.92rem;line-height:1.55}.help-compare-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.help-compare-column{display:grid;gap:8px;padding:12px;border-radius:14px;background:#090c14b8;border:1px solid rgba(255,255,255,.08)}.help-compare-column.is-avoid{border-color:#ff8a654d}.help-compare-column.is-prefer{border-color:#66bb6a4d}.help-compare-label{font-size:.82rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}.help-compare-column pre{margin:0;padding:12px;border-radius:12px;background:#04070ee6;border:1px solid rgba(123,199,255,.14);color:#dce6ff;font-size:.8rem;line-height:1.5;overflow-x:auto}@media (max-width: 640px){.help-key-row code,.help-function-card pre,.help-compare-column pre,.python-example{font-size:.76rem}.block-guide-examples,.help-compare-columns{grid-template-columns:1fr}}