:root{--bg:#070b18;--bg-elevated:#0d1428;--bg-card:#0f172ab8;--bg-card-solid:#111827;--border:#94a3b824;--border-strong:#94a3b847;--text:#e8eefc;--text-muted:#94a3b8;--text-dim:#64748b;--primary:#38bdf8;--primary-deep:#0ea5e9;--secondary:#818cf8;--accent:#f97316;--success:#34d399;--danger:#f87171;--radius:16px;--radius-sm:10px;--radius-xs:8px;--shadow:0 12px 40px #00000059;--font-display:"Outfit", "IBM Plex Sans Thai", system-ui, sans-serif;--font-body:"IBM Plex Sans Thai", "Outfit", system-ui, sans-serif;--nav-h:64px;--focus:0 0 0 3px #38bdf873;--ease:cubic-bezier(.22, 1, .36, 1)}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}body{min-height:100dvh;font-family:var(--font-body);color:var(--text);background:radial-gradient(1200px 600px at 10% -10%, #38bdf81f, transparent 55%), radial-gradient(900px 500px at 90% 0%, #818cf81f, transparent 50%), radial-gradient(800px 400px at 50% 100%, #f9731614, transparent 55%), var(--bg);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:1.6}#app{flex-direction:column;min-height:100dvh;display:flex}img{max-width:100%}button,input,select{font:inherit}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}.site-header{z-index:100;height:var(--nav-h);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);background:#070b18d1;justify-content:space-between;align-items:center;gap:1rem;padding:0 1.25rem;display:flex;position:sticky;top:0}.brand{cursor:pointer;min-width:0;color:inherit;text-align:left;background:0 0;border:0;align-items:center;gap:.75rem;padding:0;display:flex}.brand-mark{border:1px solid var(--border-strong);background:linear-gradient(135deg,#38bdf840,#818cf840);border-radius:12px;flex-shrink:0;place-items:center;width:40px;height:40px;display:grid}.brand-mark svg{width:26px;height:26px}.brand-text{flex-direction:column;min-width:0;display:flex}.brand-title{font-family:var(--font-display);letter-spacing:-.02em;font-size:1.05rem;font-weight:700;line-height:1.2}.brand-sub{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.72rem;overflow:hidden}.nav-desktop{align-items:center;gap:.25rem;display:none}.nav-link{appearance:none;color:var(--text-muted);cursor:pointer;transition:color .2s var(--ease), background .2s var(--ease);background:0 0;border:0;border-radius:999px;padding:.55rem .85rem;font-size:.92rem;font-weight:500}.nav-link:hover{color:var(--text);background:#94a3b814}.nav-link.active{color:var(--bg);background:linear-gradient(135deg, var(--primary), var(--secondary));font-weight:600}.nav-link:focus-visible,.btn:focus-visible,.lang-toggle:focus-visible,.element-cell:focus-visible,.shell-card:focus-visible,.lesson-tab:focus-visible,.menu-toggle:focus-visible{box-shadow:var(--focus);outline:none}.header-actions{align-items:center;gap:.5rem;display:flex}.lang-toggle{border:1px solid var(--border-strong);background:#0f172acc;border-radius:999px;display:inline-flex;overflow:hidden}.lang-toggle button{color:var(--text-muted);cursor:pointer;background:0 0;border:0;min-width:44px;min-height:36px;padding:.4rem .7rem;font-size:.8rem;font-weight:600}.lang-toggle button.active{color:var(--primary);background:#38bdf833}.menu-toggle{border:1px solid var(--border);width:44px;height:44px;color:var(--text);cursor:pointer;background:#0f172ab3;border-radius:12px;place-items:center;display:inline-grid}.mobile-nav{border-bottom:1px solid var(--border);background:#070b18f5;flex-direction:column;gap:.35rem;padding:.75rem 1rem 1rem;display:none}.mobile-nav.open{display:flex}.mobile-nav .nav-link{text-align:left;border-radius:12px;width:100%}@media (width>=900px){.nav-desktop{display:flex}.menu-toggle{display:none}.mobile-nav{display:none!important}.brand-sub{max-width:220px}}main{flex:1;width:min(1200px,100%);margin:0 auto;padding:1.5rem 1.25rem 3rem}.view{animation:fadeIn .35s var(--ease);display:none}.view.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.section-head{margin-bottom:1.5rem}.section-head h1{font-family:var(--font-display);letter-spacing:-.03em;margin:0 0 .4rem;font-size:clamp(1.6rem,3vw,2.15rem);font-weight:700;line-height:1.2}.section-head p{color:var(--text-muted);max-width:60ch;margin:0}.btn{cursor:pointer;min-height:44px;transition:transform .15s var(--ease), background .2s, border-color .2s, box-shadow .2s;color:inherit;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:.45rem;padding:.65rem 1.15rem;font-weight:600;text-decoration:none;display:inline-flex}.btn:hover{text-decoration:none;transform:translateY(-1px)}.btn:active{transform:translateY(0)scale(.98)}.btn:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}.btn-primary{background:linear-gradient(135deg, var(--primary-deep), var(--secondary));color:#fff;box-shadow:0 8px 24px #0ea5e947}.btn-primary:hover{box-shadow:0 10px 28px #0ea5e966}.btn-secondary{color:var(--primary);background:#38bdf81a;border-color:#38bdf859}.btn-ghost{border-color:var(--border);color:var(--text);background:#94a3b814}.btn-accent{color:#111;background:linear-gradient(135deg,#f97316,#fb923c)}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1.25rem}.card h2,.card h3{font-family:var(--font-display);letter-spacing:-.02em;margin:0 0 .6rem}.hero{align-items:center;gap:1.75rem;margin-bottom:2rem;display:grid}@media (width>=960px){.hero{grid-template-columns:1.1fr .9fr;gap:2rem;min-height:420px}}.hero-badge{color:var(--primary);background:#38bdf81f;border:1px solid #38bdf847;border-radius:999px;align-items:center;gap:.4rem;margin-bottom:1rem;padding:.35rem .75rem;font-size:.82rem;font-weight:600;display:inline-flex}.hero h1{font-family:var(--font-display);letter-spacing:-.035em;background:linear-gradient(135deg,#f8fafc 20%,#7dd3fc 55%,#a5b4fc 100%);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0 0 1rem;font-size:clamp(2rem,5vw,3.1rem);line-height:1.12}.hero-lead{color:var(--text-muted);max-width:48ch;margin:0 0 1.5rem;font-size:1.05rem}.hero-ctas{flex-wrap:wrap;gap:.65rem;margin-bottom:1.5rem;display:flex}.hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;display:grid}@media (width>=520px){.hero-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}.stat{border-radius:var(--radius-sm);border:1px solid var(--border);text-align:center;background:#0f172aa6;padding:.75rem}.stat strong{font-family:var(--font-display);color:var(--primary);font-size:.95rem;display:block}.stat span{color:var(--text-dim);font-size:.75rem}.hero-visual{border-radius:calc(var(--radius) + 4px);border:1px solid var(--border);height:clamp(300px,42vw,420px);min-height:300px;box-shadow:var(--shadow);background:#050814;position:relative;overflow:hidden}.hero-visual canvas{display:block;width:100%!important;height:100%!important}.hero-visual-label{z-index:2;border:1px solid var(--border);color:var(--text-muted);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;background:#070b18bf;border-radius:999px;padding:.35rem .7rem;font-size:.78rem;position:absolute;bottom:12px;left:12px}.home-grid{gap:1rem;margin-bottom:1.5rem;display:grid}@media (width>=800px){.home-grid{grid-template-columns:1.2fr 1fr}}.feature-list{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.feature-list li{border-radius:var(--radius-sm);border:1px solid var(--border);background:#0f172a73;grid-template-columns:auto 1fr;align-items:start;gap:.75rem;padding:.75rem;display:grid}.feature-icon{width:36px;height:36px;color:var(--primary);font-family:var(--font-display);background:#38bdf81f;border-radius:10px;place-items:center;font-size:.85rem;font-weight:700;display:grid}.feature-list strong{margin-bottom:.15rem;display:block}.feature-list span{color:var(--text-muted);font-size:.92rem}.path-list{color:var(--text-muted);margin:0;padding-left:1.1rem}.path-list li{margin-bottom:.45rem}.learn-layout{gap:1rem;display:grid}@media (width>=900px){.learn-layout{grid-template-columns:280px 1fr;align-items:start}}.lesson-tabs{flex-direction:column;gap:.35rem;max-height:min(70vh,640px);padding-right:.25rem;display:flex;overflow:auto}.lesson-tab{text-align:left;border:1px solid var(--border);color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;background:#0f172a80;padding:.7rem .85rem;transition:border-color .2s,background .2s,color .2s}.lesson-tab:hover{border-color:var(--border-strong);color:var(--text)}.lesson-tab.active{color:var(--text);background:#38bdf81a;border-color:#38bdf880}.lesson-tab small{color:var(--text-dim);margin-top:.2rem;font-size:.72rem;display:block}.lesson-content h2{font-family:var(--font-display);margin:0 0 .35rem;font-size:1.45rem}.lesson-level{color:#c4b5fd;background:#818cf826;border-radius:999px;margin-bottom:1rem;padding:.2rem .55rem;font-size:.75rem;font-weight:600;display:inline-block}.lesson-body p{color:var(--text-muted);white-space:pre-line;margin:0 0 .9rem}.lesson-body p:last-child{margin-bottom:0}.lesson-footer{border-top:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.65rem;margin-top:1.25rem;padding-top:1rem;display:flex}.lesson-nav{gap:.5rem;display:flex}.lesson-meta{color:var(--text-dim);font-size:.85rem}.lab-layout{gap:1rem;display:grid}@media (width>=1000px){.lab-layout{grid-template-columns:1.15fr .85fr;align-items:start}}.lab-canvas-wrap{border-radius:var(--radius);border:1px solid var(--border);height:min(58vh,560px);min-height:380px;box-shadow:var(--shadow);background:#050814;position:relative;overflow:hidden}.lab-canvas-wrap canvas{display:block;width:100%!important;height:100%!important}.lab-toolbar{z-index:2;flex-wrap:wrap;justify-content:flex-end;gap:.4rem;display:flex;position:absolute;top:12px;right:12px}.lab-toolbar .btn{border:1px solid var(--border-strong);min-height:38px;color:var(--text);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#070b18cc;padding:.4rem .8rem;font-size:.85rem}.lab-tip{z-index:2;color:var(--text-muted);border:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#070b18bf;border-radius:999px;max-width:calc(100% - 24px);padding:.3rem .7rem;font-size:.75rem;position:absolute;bottom:12px;left:12px}.lab-panel{flex-direction:column;gap:.9rem;display:flex}.search-box{border:1px solid var(--border-strong);width:100%;min-height:44px;color:var(--text);background:#0f172acc;border-radius:12px;padding:.65rem .9rem}.search-box::placeholder{color:var(--text-dim)}.search-box:focus{box-shadow:var(--focus);border-color:#38bdf880;outline:none}.element-quick{flex-wrap:wrap;gap:.35rem;max-height:96px;display:flex;overflow:auto}.chip{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:#0f172a99;border-radius:999px;min-height:34px;padding:.3rem .65rem;font-size:.8rem}.chip:hover,.chip.active{color:var(--text);background:#38bdf81f;border-color:#38bdf873}.element-headline{align-items:center;gap:1rem;display:flex}.element-badge{background:#0f172acc;border:2px solid;border-radius:16px;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;width:72px;height:72px;display:flex}.element-badge .z{color:var(--text-muted);font-size:.7rem}.element-badge .sym{font-family:var(--font-display);font-size:1.5rem;font-weight:700;line-height:1}.element-headline h2{font-family:var(--font-display);margin:0 0 .2rem;font-size:1.35rem}.element-headline p{color:var(--text-muted);margin:0;font-size:.92rem}.meta-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;display:grid}.meta-item{border-radius:var(--radius-xs);border:1px solid var(--border);background:#0f172a8c;padding:.65rem .75rem}.meta-item label{color:var(--text-dim);margin-bottom:.15rem;font-size:.72rem;display:block}.meta-item strong{word-break:break-word;font-size:.92rem}.config-box{border-radius:var(--radius-xs);border:1px solid var(--border);color:#7dd3fc;word-break:break-word;background:#020617a6;padding:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.88rem;line-height:1.5}.shell-cards{gap:.45rem;display:grid}.shell-card{border-radius:var(--radius-xs);border:1px solid var(--border);cursor:pointer;color:inherit;text-align:left;background:#0f172a73;grid-template-columns:auto 1fr auto;align-items:center;gap:.65rem;width:100%;padding:.65rem .75rem;transition:border-color .2s,background .2s;display:grid}.shell-card:hover,.shell-card.active{background:#38bdf814;border-color:#38bdf873}.shell-dot{border-radius:50%;width:12px;height:12px;box-shadow:0 0 10px}.shell-card .name{font-size:.92rem;font-weight:600}.shell-card .sub{color:var(--text-dim);font-size:.75rem}.shell-card .count{font-family:var(--font-display);color:var(--primary);font-weight:700}.table-hint{color:var(--text-muted);margin:0 0 1rem;font-size:.92rem}.legend{flex-wrap:wrap;gap:.45rem;margin-bottom:1rem;display:flex}.legend-item{color:var(--text-muted);border:1px solid var(--border);background:#0f172a80;border-radius:999px;align-items:center;gap:.35rem;padding:.25rem .5rem;font-size:.75rem;display:inline-flex}.legend-swatch{border-radius:3px;width:10px;height:10px}.pt-scroll{border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);background:#0f172a59;padding:.75rem;overflow:auto}.periodic-table{grid-template-columns:repeat(18,minmax(48px,1fr));gap:3px;min-width:900px;display:grid}.element-cell{aspect-ratio:1;min-height:48px;color:var(--text);cursor:pointer;transition:transform .15s var(--ease), border-color .15s, box-shadow .15s;background:#0f172ad9;border:1px solid #ffffff14;border-radius:8px;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:4px;display:flex;position:relative;overflow:hidden}.element-cell:before{content:"";background:linear-gradient(160deg, color-mix(in srgb, var(--cat) 28%, transparent), transparent 70%);pointer-events:none;position:absolute;inset:0}.element-cell:hover{border-color:color-mix(in srgb, var(--cat) 70%, white);z-index:1;transform:translateY(-2px)scale(1.04);box-shadow:0 8px 20px #00000059}.element-cell .ez{color:var(--text-muted);font-size:.58rem;position:relative}.element-cell .es{font-family:var(--font-display);align-self:center;font-size:.92rem;font-weight:700;line-height:1;position:relative}.element-cell .en{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:.52rem;position:relative;overflow:hidden}.pt-spacer{min-height:48px}.fblock-label{color:var(--text-dim);text-align:center;grid-column:1/3;justify-content:center;align-items:center;padding:0 4px;font-size:.65rem;display:flex}.principles-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.85rem;display:grid}.principle-card{position:relative;overflow:hidden}.principle-icon{border:1px solid var(--border);width:44px;height:44px;font-family:var(--font-display);color:var(--primary);background:linear-gradient(135deg,#38bdf833,#818cf833);border-radius:12px;place-items:center;margin-bottom:.75rem;font-size:.85rem;font-weight:700;display:grid}.principle-card p{color:var(--text-muted);margin:0;font-size:.95rem}.diag-section{margin-top:1rem}.diag-wrap{flex-direction:column;gap:.9rem;display:flex}.diag-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.75rem 1.25rem;display:flex}.diag-title{font-family:var(--font-display);letter-spacing:-.02em;margin:0 0 .3rem;font-size:1.2rem}.diag-sub{color:var(--text-muted);max-width:62ch;margin:0;font-size:.92rem}.diag-legend{flex-wrap:wrap;gap:.45rem;display:flex}.diag-leg{color:var(--text-muted);border:1px solid var(--border);background:#0f172a73;border-radius:999px;align-items:center;gap:.35rem;padding:.25rem .55rem;font-size:.75rem;display:inline-flex}.diag-leg i{border:1px solid var(--border-strong);border-radius:4px;width:12px;height:12px;display:inline-block}.diag-leg i.is-empty{background:#1e293be6}.diag-leg i.is-partial{background:linear-gradient(90deg,#38bdf8bf,#1e293be6)}.diag-leg i.is-full{background:#34d399bf}.diag-leg i.is-current{background:#f97316d9;box-shadow:0 0 0 2px #f9731659}.diag-rule-line{border-radius:var(--radius-sm);color:var(--text-muted);background:#38bdf814;border:1px solid #38bdf838;flex-wrap:wrap;align-items:baseline;gap:.4rem .75rem;padding:.7rem .9rem;font-size:.9rem;display:flex}.diag-rule-line strong{color:var(--primary);text-transform:uppercase;letter-spacing:.04em;font-size:.82rem}.diag-svg-scroll{border-radius:var(--radius-sm);border:1px solid var(--border);background:radial-gradient(600px 240px at 20% 0,#38bdf812,#0000 60%),#020617a6;padding:.5rem;overflow:auto}.diag-svg{width:100%;min-width:520px;height:auto;max-height:420px;display:block}.diag-axis{fill:#64748b;font-size:11px;font-family:var(--font-display), system-ui, sans-serif}.diag-axis-col{font-size:13px;font-weight:700}.diag-diagonal-line{stroke:#475569;stroke-width:1.5px;stroke-dasharray:4 4;opacity:.85}.diag-cell-bg{fill:#0f172aeb;stroke:#94a3b838;stroke-width:1.25px;transition:fill .2s,stroke .2s,filter .2s}.diag-cell.is-empty .diag-cell-bg{fill:#0f172a8c;stroke:#94a3b81f}.diag-cell.is-partial .diag-cell-bg{fill:#0e749047;stroke:#38bdf88c}.diag-cell.is-full .diag-cell-bg{fill:#065f4659;stroke:#34d3998c}.diag-cell.is-current .diag-cell-bg{stroke:#f97316;stroke-width:2px;filter:drop-shadow(0 0 8px #f9731673)}.diag-cell-label{fill:#e2e8f0;font-size:13px;font-weight:700;font-family:var(--font-display), system-ui, sans-serif}.diag-cell.is-empty .diag-cell-label{fill:#64748b}.diag-cell-count{fill:#94a3b8;font-family:ui-monospace,Menlo,monospace;font-size:9px}.diag-cell.is-empty .diag-cell-count{fill:#475569}.diag-cell.is-full .diag-cell-count,.diag-cell.is-partial .diag-cell-count{fill:#cbd5e1}.diag-cell-fill{opacity:.95}.diag-cell.is-empty .diag-cell-fill{opacity:0}.diag-order-badge circle{fill:#0f172a;stroke:#38bdf8;stroke-width:1.25px}.diag-order-badge text{fill:#7dd3fc;font-size:9px;font-weight:700;font-family:var(--font-display), system-ui, sans-serif}.diag-seq-block{flex-direction:column;gap:.45rem;display:flex}.diag-seq-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;font-weight:600}.diag-seq{flex-wrap:wrap;align-items:center;gap:.25rem .15rem;display:flex}.diag-seq-item{border:1px solid var(--border);color:var(--text-dim);background:#0f172a8c;border-radius:8px;align-items:center;gap:.2rem;padding:.28rem .45rem;font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;font-size:.78rem;display:inline-flex}.diag-seq-item em{color:var(--text-dim);min-width:1rem;font-size:.65rem;font-style:normal}.diag-seq-item strong{color:var(--c,var(--primary));min-width:.6rem;font-size:.72rem}.diag-seq-item.is-full,.diag-seq-item.is-partial{color:var(--text);border-color:color-mix(in srgb, var(--c) 45%, transparent);background:color-mix(in srgb, var(--c) 14%, #0f172acc)}.diag-seq-item.is-current{border-color:#f97316;box-shadow:0 0 0 2px #f9731673}.diag-seq-arrow{color:#475569;-webkit-user-select:none;user-select:none;padding:0 .1rem;font-size:.75rem}.diag-capacity-row{flex-wrap:wrap;gap:.45rem;display:flex}.diag-cap{color:var(--text-muted);border:1px solid color-mix(in srgb, var(--c) 35%, transparent);background:color-mix(in srgb, var(--c) 10%, transparent);border-radius:999px;padding:.3rem .6rem;font-size:.8rem}.diag-cap strong{color:var(--c);text-transform:uppercase}.diag-note{color:var(--text-muted);border-radius:var(--radius-xs);border:1px solid var(--border);background:#0f172a73;margin:0;padding:.65rem .8rem;font-size:.88rem}.diag-note-warn{color:#fde68a;background:#fbbf2414;border-color:#fbbf2466}.diag-how{margin-top:.25rem}.site-footer{border-top:1px solid var(--border);text-align:center;color:var(--text-dim);width:min(1200px,100%);margin:0 auto;padding:1.25rem;font-size:.85rem}.site-footer p{max-width:70ch;margin:.25rem auto}.sr-only{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.muted{color:var(--text-muted)}