@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Noto+Sans+Thai:wght@300;400;500;600;700&family=Press+Start+2P&display=swap";*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}html,body{width:100%;height:100%;font-family:Outfit,Noto Sans Thai,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body.game-mode{overflow:hidden}#root{width:100%;height:100%}.spa-view--dark{--spa-bg: #070913;--spa-bg-deep: #04050a;--spa-surface: rgba(14, 18, 34, .72);--spa-surface-hover: rgba(22, 28, 50, .88);--spa-surface-border: rgba(130, 220, 255, .14);--spa-text: #f4f7ff;--spa-text-secondary: rgba(217, 227, 255, .72);--spa-text-muted: rgba(193, 205, 230, .42);--spa-accent: #79e8ff;--spa-accent-secondary: #c4b5fd;--spa-accent-warm: #f6c177;--spa-accent-glow: rgba(121, 232, 255, .15);--spa-accent-glow-strong: rgba(121, 232, 255, .42);--spa-gradient-start: #79e8ff;--spa-gradient-end: #c4b5fd;--spa-nav-bg: rgba(7, 9, 19, .72);--spa-nav-border: rgba(130, 220, 255, .12);--spa-card-shadow: 0 16px 48px rgba(0, 0, 0, .42);--spa-timeline-track: rgba(121, 232, 255, .08);--spa-timeline-fill: linear-gradient(180deg, #79e8ff, #c4b5fd);--spa-timeline-dot: #79e8ff;--spa-input-bg: rgba(255, 255, 255, .05);--spa-input-border: rgba(255, 255, 255, .08);--spa-input-focus: rgba(121, 232, 255, .3);--spa-section-alt: rgba(255, 255, 255, .02);--spa-footer-border: rgba(255, 255, 255, .06)}.spa-view--light{--spa-bg: #f4f7fb;--spa-bg-deep: #e9eff9;--spa-surface: rgba(255, 255, 255, .82);--spa-surface-hover: rgba(255, 255, 255, .96);--spa-surface-border: rgba(15, 23, 42, .08);--spa-text: #101827;--spa-text-secondary: rgba(16, 24, 39, .66);--spa-text-muted: rgba(16, 24, 39, .32);--spa-accent: #0f766e;--spa-accent-secondary: #2563eb;--spa-accent-warm: #f59e0b;--spa-accent-glow: rgba(15, 118, 110, .08);--spa-accent-glow-strong: rgba(15, 118, 110, .2);--spa-gradient-start: #0f766e;--spa-gradient-end: #2563eb;--spa-nav-bg: rgba(244, 247, 251, .86);--spa-nav-border: rgba(15, 23, 42, .06);--spa-card-shadow: 0 16px 36px rgba(15, 23, 42, .08);--spa-timeline-track: rgba(15, 118, 110, .1);--spa-timeline-fill: linear-gradient(180deg, #0f766e, #2563eb);--spa-timeline-dot: #0f766e;--spa-input-bg: rgba(15, 23, 42, .02);--spa-input-border: rgba(15, 23, 42, .08);--spa-input-focus: rgba(15, 118, 110, .24);--spa-section-alt: rgba(15, 23, 42, .02);--spa-footer-border: rgba(15, 23, 42, .06)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes glowPulse{0%,to{opacity:.4}50%{opacity:1}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes dotPulse{0%,to{box-shadow:0 0 0 0 var(--spa-accent-glow-strong)}50%{box-shadow:0 0 0 8px transparent}}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--spa-gradient-start, #64d8ff),var(--spa-gradient-end, #a78bfa));border-radius:10px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--spa-gradient-end, #a78bfa),var(--spa-gradient-start, #64d8ff))}::selection{background:#64d8ff40;color:inherit}:root{--glass-bg: rgba(255, 255, 255, .1);--glass-bg-dark: rgba(15, 15, 30, .6);--glass-border: rgba(255, 255, 255, .2);--glass-border-dark: rgba(255, 255, 255, .1);--glass-blur: blur(12px);--accent-color: #6366f1;--accent-glow: 0 0 15px rgba(99, 102, 241, .5);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .7)}.glass-panel{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:16px;box-shadow:0 8px 32px #0000004d}.dark .glass-panel{background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark)}.player-stats{position:absolute;top:20px;left:20px;padding:15px;background:#0009;border:2px solid;border-radius:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;gap:16px;min-width:220px;pointer-events:auto;transition:all .3s ease;z-index:20;overflow:hidden}.player-stats__toggle{display:none;background:none;border:none;padding:10px;cursor:pointer;font-size:18px;width:44px;height:44px;align-items:center;justify-content:center;color:inherit}.player-stats--compact{min-width:44px;height:44px;padding:0;gap:0}.player-stats--compact .player-stats__content{display:none}.player-stats--mobile .player-stats__toggle{display:flex}.hud--light .player-stats{background:#ffffffd9;border-color:#96785080;color:#543;box-shadow:0 4px 15px #0000001a}.hud--dark .player-stats{background:#0a0a1ed9;border-color:#50507880;color:#c8d0ff;box-shadow:0 0 20px #3c50b433}.player-stats__header{font-size:12px;font-weight:700;text-align:center;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid;color:#fff;text-shadow:1px 1px 0 #000}.hud--light .player-stats__header{border-color:#9678504d;color:#321;text-shadow:none}.hud--dark .player-stats__header{border-color:#50507880;color:#eef}.player-stats__row{display:flex;justify-content:space-between;align-items:center}.player-stats__label{font-size:10px;opacity:.8;text-transform:uppercase}.player-stats__value{font-size:14px;font-weight:700}.player-stats__class{color:#64ffda;text-shadow:0 0 5px rgba(100,255,218,.3);font-size:11px}.hud--light .player-stats__class{color:#0077b6;text-shadow:none}@media(max-width:768px){.player-stats{top:10px;left:10px;transform:scale(.9);transform-origin:top left;min-width:180px}.player-stats--compact{min-width:44px;width:44px}}@media(max-width:480px){.player-stats{transform:scale(.85)}}.quest-log{position:absolute;top:20px;right:80px;padding:16px;background:#000000b3;border:2px solid;border-radius:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:14px;width:260px;pointer-events:auto;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:20;overflow:hidden}.quest-log__toggle{display:none;background:none;border:none;padding:10px;cursor:pointer;font-size:20px;width:48px;height:48px;align-items:center;justify-content:center;color:inherit}.quest-log--compact{min-width:48px;width:48px;height:48px;padding:0;gap:0}.quest-log--compact .quest-log__content{display:none}.quest-log--mobile .quest-log__toggle{display:flex}.hud--light .quest-log{background:#ffffffeb;border-color:#96785099;color:#432;box-shadow:0 8px 24px #0000001f}.hud--dark .quest-log{background:#0a0a19eb;border-color:#6464a099;color:#d8e0ff;box-shadow:0 0 30px #3c50c840}.quest-log__header{font-size:14px;font-weight:800;letter-spacing:1.5px;border-bottom:2.5px solid;padding-bottom:6px;margin-bottom:6px;text-align:center;color:#fc0;text-shadow:0 2px 4px rgba(0,0,0,.5)}.hud--light .quest-log__header{color:#b8860b;border-color:#96785066;text-shadow:0 1px 2px rgba(255,255,255,.8)}.hud--dark .quest-log__header{border-color:#6478c880}.quest-log__item{display:flex;flex-direction:column;gap:6px}.quest-log__label{font-size:10px;font-weight:600;opacity:.85;text-transform:uppercase;letter-spacing:.5px}.quest-log__title{font-size:13px;line-height:1.5;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.3)}.quest-log__progress-track{height:10px;background:#0006;border-radius:5px;overflow:hidden;margin-top:4px;border:1px solid rgba(255,255,255,.15)}.hud--light .quest-log__progress-track{background:#00000026;border-color:#00000026}.quest-log__progress-fill{height:100%;background:repeating-linear-gradient(45deg,#3b82f6,#3b82f6 12px,#1d4ed8 12px 24px);width:65%;animation:progressStripes 2s linear infinite;box-shadow:inset 0 2px 4px #fff3}@keyframes progressStripes{0%{background-position:0 0}to{background-position:34px 0}}@media(max-width:768px){.quest-log{top:10px;right:70px;width:220px;padding:12px;transform:scale(.95);transform-origin:top right}.quest-log--compact{min-width:48px;width:48px}}@media(max-width:480px){.quest-log{transform:scale(.9);right:65px;width:210px}}.joystick-container{position:absolute;bottom:50px;left:50px;width:120px;height:120px;z-index:100;pointer-events:auto}.joystick-base{position:relative;width:100%;height:100%;background:#ffffff1a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center}.joystick-knob{width:50px;height:50px;background:#ffffff80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:2px solid rgba(255,255,255,.5);border-radius:50%;box-shadow:0 4px 12px #0000004d}@media(max-width:600px){.joystick-container{bottom:30px;left:30px;width:100px;height:100px}.joystick-knob{width:40px;height:40px}}.hud{position:absolute;inset:0;pointer-events:none;z-index:10;font-family:"Press Start 2P",Noto Sans Thai,sans-serif}.hud>*{pointer-events:auto}.hud__location{position:absolute;top:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:10px 24px;border-radius:8px;border:2px solid;font-size:14px;animation:slideDown .4s ease-out}.hud__title{position:absolute;top:30px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;animation:slideDown .6s ease-out}.hud__title-sub{font-size:8px;letter-spacing:3px;margin-bottom:4px;opacity:.8;font-family:"Press Start 2P",sans-serif}.hud__title-main{font-size:24px;letter-spacing:2px;font-family:"Press Start 2P",sans-serif;text-transform:uppercase;background:linear-gradient(180deg,#fff,#aaa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 0 rgba(0,0,0,.3))}.hud--dark .hud__title-main{background:linear-gradient(180deg,#fff,#8af);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 10px rgba(100,150,255,.5))}.hud--light .hud__title-main{background:linear-gradient(180deg,#543,#864);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 0 rgba(255,255,255,.5))}.hud--dark .hud__title-sub{color:#89c}.hud--light .hud__title-sub{color:#876}.hud--dark .hud__location{background:#0a0a1ed9;border-color:#6478c880;color:#c8d0ff;box-shadow:0 0 20px #3c50b44d}.hud--light .hud__location{background:#ffffffd9;border-color:#64502866;color:#4a3520;box-shadow:0 4px 20px #0000001a}.hud__location-icon{font-size:20px}.hud__location-name{font-size:13px;letter-spacing:1px}.hud__settings-btn{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:#0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:20px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.hud__settings-btn:hover{transform:rotate(90deg) scale(1.1);background:#0009;border-color:#ffffff80}.hud__nav{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}.hud__nav-label{font-size:9px;text-transform:uppercase;letter-spacing:2px;opacity:.6}.hud--dark .hud__nav-label{color:#88b}.hud--light .hud__nav-label{color:#777}.hud__nav-buttons{display:flex;gap:8px}.hud__nav-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 16px;border-radius:8px;border:2px solid;cursor:pointer;transition:all .3s ease;min-width:90px}.hud--dark .hud__nav-btn{background:#0a0a1ecc;border-color:#50507880;color:#aab}.hud--light .hud__nav-btn{background:#fffc;border-color:#9678504d;color:#543}.hud__nav-btn:hover{transform:translateY(-3px)}.hud--dark .hud__nav-btn:hover{border-color:#788cf0b3;box-shadow:0 4px 15px #3c50c84d}.hud--light .hud__nav-btn:hover{border-color:#96785080;box-shadow:0 4px 15px #00000026}.hud__nav-btn--active{transform:translateY(-3px)}.hud--dark .hud__nav-btn--active{border-color:#78f;background:#282850e6;box-shadow:0 0 20px #5064ff4d;color:#dde}.hud--light .hud__nav-btn--active{border-color:#a84;background:#fff8e6f2;box-shadow:0 0 20px #aa823233;color:#321}.hud__nav-btn-icon{font-size:20px}.hud__nav-btn-text{font-size:8px;font-family:"Press Start 2P",Noto Sans Thai,sans-serif}.hud--light .hud__settings-btn{background:#ffffffb3;border-color:#00000026}.hud--light .hud__settings-btn:hover{background:#ffffffe6;border-color:#0000004d}@keyframes slideDown{0%{opacity:0;transform:translate(-50%) translateY(-15px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.hud__keys{position:absolute;bottom:24px;left:24px;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.5;transition:opacity .3s ease}.hud__keys:hover{opacity:.8}.hud__keys-row{display:flex;gap:4px}.hud__key{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-family:"Press Start 2P",monospace;font-size:10px;border:2px solid;transition:all .15s ease}.hud--dark .hud__key{background:#141428cc;border-color:#6478c866;color:#89c;box-shadow:0 2px #3c50964d}.hud--light .hud__key{background:#ffffffd9;border-color:#96825a4d;color:#764;box-shadow:0 2px #0000001a}.hud__keys-label{font-size:7px;font-family:"Press Start 2P",sans-serif;letter-spacing:1px;margin-top:2px}.hud--dark .hud__keys-label{color:#67a}.hud--light .hud__keys-label{color:#986}.hud__interaction-prompt{position:absolute;top:65%;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;animation:promptFloat 2s ease-in-out infinite}.hud__interaction-key{font-size:10px;font-family:"Press Start 2P",monospace;padding:6px 12px;border-radius:4px;border:2px solid;border-bottom-width:4px}.hud--dark .hud__interaction-key{background:#fff;color:#333;border-color:#aaa;box-shadow:0 4px 10px #0006}.hud--light .hud__interaction-key{background:#333;color:#fff;border-color:#000;box-shadow:0 4px 10px #0003}.hud__interaction-text{font-size:8px;text-transform:uppercase;letter-spacing:1px;font-family:"Press Start 2P",sans-serif}.hud--dark .hud__interaction-text{color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8)}.hud--light .hud__interaction-text{color:#333;text-shadow:0 2px 4px rgba(255,255,255,.8)}@keyframes promptFloat{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-5px)}}@media(max-width:768px){.hud__title-main{font-size:18px}.hud__title-sub{font-size:6px;letter-spacing:2px}.hud__nav{width:100%;bottom:15px;padding:0 10px}.hud__nav-buttons{width:100%;overflow-x:auto;padding:12px 15px;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent)}.hud__nav-buttons::-webkit-scrollbar{display:none}.hud__nav-btn{flex-shrink:0;min-width:85px;padding:8px 12px}.hud__nav-btn-icon{font-size:18px}.hud__nav-btn-text{font-size:7px}}@media(max-width:480px){.hud__nav-btn{min-width:75px;padding:6px 10px}.hud__nav-buttons{padding:10px;mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent)}}.hud__interaction-btn{background:linear-gradient(180deg,#ffde59,#ff914d);border:4px solid #fff;border-radius:12px;padding:15px 30px;color:#000;font-family:"Press Start 2P",sans-serif;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 0 20px #ff914d80,0 6px #b36200;transition:all .1s active;pointer-events:auto}.hud__interaction-btn:active{transform:translateY(4px);box-shadow:0 0 10px #ff914d4d,0 2px #b36200}.hud__interaction-prompt--touch{top:50%;left:50%;transform:translate(-50%,-50%);z-index:100}.hud--mobile .player-stats{transform:scale(.7);top:10px;left:10px}.hud--mobile .quest-log{transform:scale(.7);top:10px;right:10px}.hud--spa{position:fixed;inset:0 0 auto auto;width:auto;height:auto;padding:10px;background:none;border:none;box-shadow:none;z-index:1000}.hud--spa .hud__settings-btn{position:relative;top:0;right:0;background:#fff3;border:1px solid rgba(0,0,0,.1);color:inherit}.hud--dark.hud--spa .hud__settings-btn{background:#0003;border:1px solid rgba(255,255,255,.1)}.info-panel__project-card{padding:14px;border-radius:8px;position:relative;transition:transform .2s ease}.info-panel__project-card:hover{transform:translate(4px)}.info-panel--dark .info-panel__project-card{background:#1e142899;border:1px solid rgba(120,60,80,.3)}.info-panel--light .info-panel__project-card{background:#fff5ebcc;border:1px solid rgba(180,150,100,.3)}.info-panel__project-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.info-panel__project-number{font-family:"Press Start 2P",sans-serif;font-size:20px;opacity:.1}.info-panel__project-status{font-family:Inter,sans-serif;font-size:10px;padding:3px 10px;border-radius:12px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}.info-panel__project-status--completed{background:#22c55e26;color:#22c55e;border:1px solid rgba(34,197,94,.3)}.info-panel__project-status--in-progress{background:#f59e0b26;color:#f59e0b;border:1px solid rgba(245,158,11,.3);animation:pulse 2s ease-in-out infinite}.info-panel__project-card--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.info-panel__project-name{font-family:"Press Start 2P",Noto Sans Thai,sans-serif;font-size:12px;margin:0 0 8px}.info-panel__project-desc{font-family:Noto Sans Thai,Inter,sans-serif;font-size:13px;line-height:1.6;margin:0 0 8px;opacity:.8}.info-panel__project-tech{font-size:10px;font-family:Inter,monospace;opacity:.5}.info-panel__tech-container{width:100%;margin-top:12px;position:relative}.info-panel__tech-container--animated{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent);mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent)}.info-panel__tech-container--static{overflow:visible;-webkit-mask-image:none;mask-image:none}.info-panel__tech-list{display:flex;gap:12px;white-space:nowrap;width:max-content}.info-panel__tech-list--animate{animation:marquee 20s linear infinite}.info-panel__tech-list--static{width:auto;flex-wrap:wrap}.info-panel__tech-list:hover{animation-play-state:paused}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.info-panel__tech-tag{font-size:10px;padding:3px 10px;border-radius:6px;font-family:Inter,sans-serif;font-weight:500;flex-shrink:0}.info-panel--dark .info-panel__tech-tag{background:#6478ff1a;border:1px solid rgba(100,120,255,.2);color:#abf}.info-panel--light .info-panel__tech-tag{background:#b496641a;border:1px solid rgba(180,150,100,.2);color:#5a4020}.info-panel__hint{font-size:9px;opacity:.4;font-style:italic;margin-top:4px;display:block}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.game-project-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1.25rem;animation:gameProjectFadeIn .2s ease-out}.game-project-modal__backdrop{position:absolute;inset:0;background:#05081494;-webkit-backdrop-filter:blur(6px) saturate(1.08);backdrop-filter:blur(6px) saturate(1.08)}.game-project-modal__content{position:relative;width:min(960px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;border:1px solid rgba(124,163,255,.34);background:radial-gradient(circle at top left,rgba(102,198,255,.14),transparent 32%),radial-gradient(circle at top right,rgba(191,121,255,.1),transparent 28%),linear-gradient(180deg,#1c243cfa,#0b0e1afa);box-shadow:0 24px 72px #00000073,0 0 0 1px #95c4ff0f,inset 0 1px #ffffff0d}.game-project-modal__content:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 26%)}.game-project-modal__content>*{position:relative;z-index:1}.game-project-modal__header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding:1.4rem 1.5rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.08)}.game-project-modal__header-copy{min-width:0}.game-project-modal__status{display:inline-flex;align-items:center;gap:.45rem;padding:.28rem .7rem;border-radius:999px;font-family:Outfit,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.game-project-modal__status--completed{background:#22c55e1a;color:#22c55e;border:1px solid rgba(34,197,94,.22)}.game-project-modal__status--in-progress{background:#f59e0b1a;color:#f59e0b;border:1px solid rgba(245,158,11,.22);animation:gameProjectPulse 2s ease-in-out infinite}.game-project-modal__title{margin:.85rem 0 0;font-family:"Press Start 2P",Noto Sans Thai,sans-serif;font-size:clamp(1.15rem,2vw,1.75rem);line-height:1.35;color:#f6f8ff;text-shadow:0 0 18px rgba(121,232,255,.14)}.game-project-modal__close{flex-shrink:0;width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:#ffffff0f;color:#e8eefc;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease}.game-project-modal__close:hover{transform:translateY(-1px);background:#ffffff1a;border-color:#79e8ff59}.game-project-modal__body{flex:1;overflow-y:auto;padding:1.3rem 1.5rem 1.5rem;color:#d6def3;font-family:Noto Sans Thai,Inter,sans-serif}.game-project-modal__desc{margin:0 0 1.25rem;font-size:.98rem;line-height:1.75;color:#d6def3eb}.game-project-modal__section{margin-bottom:1.35rem}.game-project-modal__section-title{display:block;margin-bottom:.7rem;font-family:Outfit,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9fdfff}.game-project-modal__tech-grid{display:flex;flex-wrap:wrap;gap:.5rem}.game-project-modal__tech-tag{display:inline-flex;align-items:center;padding:.34rem .72rem;border-radius:999px;font-family:Outfit,sans-serif;font-size:.76rem;font-weight:600;color:#d7e7ff;background:#76aaff1f;border:1px solid rgba(124,163,255,.24);box-shadow:inset 0 1px #ffffff0a}.game-project-modal__images-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.85rem}.game-project-modal__image-wrapper{border:1px solid rgba(124,163,255,.26);border-radius:14px;overflow:hidden;background:#ffffff08;padding:0;cursor:zoom-in;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.game-project-modal__image-wrapper:hover{transform:translateY(-2px);border-color:#79e8ff8c;box-shadow:0 0 0 1px #79e8ff2e,0 16px 32px #00000047}.game-project-modal__image{width:100%;display:block}.game-project-zoom{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;cursor:zoom-out}.game-project-zoom__backdrop{position:absolute;inset:0;background:#000000d1}.game-project-zoom__content{position:relative;max-width:min(92vw,1280px);max-height:92vh;border-radius:14px;box-shadow:0 24px 80px #00000080}@keyframes gameProjectFadeIn{0%{opacity:0}to{opacity:1}}@keyframes gameProjectPulse{0%,to{opacity:1}50%{opacity:.45}}@media(max-width:768px){.game-project-modal{padding:1rem}.game-project-modal__header{padding:1.1rem 1rem 1rem}.game-project-modal__body{padding:1rem}.game-project-modal__images-grid{grid-template-columns:1fr}}.production-map{width:100%;display:flex;flex-direction:column;align-items:center;position:relative;padding-bottom:1.5rem}.production-map__header-section{text-align:center;margin-bottom:1.5rem}.production-map__main-title{font-family:Comic Sans MS,Chalkboard SE,Comic Neue,cursive,sans-serif!important;letter-spacing:1px}.info-panel__subtitle--sketch{font-family:Comic Sans MS,Chalkboard SE,Comic Neue,cursive,sans-serif;font-size:1rem;opacity:.75}.production-map__board{width:100%;max-width:720px;display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);grid-template-rows:auto 18px auto;align-items:center;column-gap:0;row-gap:.2rem}.production-map__arrow{flex-shrink:0;color:#00000073}.production-map--dark .production-map__arrow{color:#ffffff73}.production-map__arrow--right{grid-column:2;grid-row:1;width:48px;display:flex;align-items:center;justify-content:center}.production-map__arrow--horizontal-bidirectional{grid-column:2;grid-row:1;width:20px;display:flex;align-items:center;justify-content:center}.production-map__duo-horizontal{display:flex;align-items:center;justify-content:center;gap:.12rem;width:20px;height:18px}.production-map__duo-horizontal svg{width:10px;height:20px}.production-map__arrow--vertical-bidirectional{grid-column:1;grid-row:2;width:20px;height:18px;display:flex;align-items:center;justify-content:center;justify-self:center}.production-map__duo-vertical{display:flex;align-items:center;justify-content:center;gap:.1rem;width:20px;height:18px}.production-map__duo-vertical svg{width:9px;height:18px;flex-shrink:0}.roadmap-card{flex:1;max-width:310px;min-width:200px;position:relative;background:#fdfbf3;border:2.5px solid #6b5a3e;border-radius:16px;overflow:visible;font-family:Comic Sans MS,Chalkboard SE,Comic Neue,cursive,sans-serif;color:#333;box-shadow:4px 4px #6b5a3e26;transition:transform .3s ease,box-shadow .3s ease}.production-map__card{justify-self:center}.production-map__card--desktop{grid-column:1;grid-row:1}.production-map__card--core{grid-column:3;grid-row:1}.production-map__card--mobile{grid-column:1;grid-row:3}.production-map__card--web{grid-column:3;grid-row:3;margin-top:.25rem}.roadmap-card:hover{transform:translateY(-4px);box-shadow:6px 8px 12px #6b5a3e2e}.production-map--dark .roadmap-card{background:#1e1e2d;color:#e0e0e0;border-color:#8a7c6a;box-shadow:4px 4px #00000059}.production-map--dark .roadmap-card:hover{box-shadow:6px 8px 12px #00000080}.roadmap-card__ribbon{position:relative;text-align:center;padding:.35rem .8rem;font-size:.78rem;font-weight:700;letter-spacing:.5px;border-radius:16px 16px 0 0;border-bottom:1.5px dashed rgba(0,0,0,.15)}.status-ribbon--completed{background:linear-gradient(135deg,#b8e6b0,#8fcf85);color:#1b4d1e}.status-ribbon--in-progress{background:linear-gradient(135deg,#ffd9a3,#ffbe6e);color:#7a4400}.status-ribbon--planned{background:linear-gradient(135deg,#f5c6d0,#f0a0b8);color:#6b1a3a}.production-map--dark .status-ribbon--completed{background:linear-gradient(135deg,#2e5a2e,#3c7a3c);color:#a2e6a2}.production-map--dark .status-ribbon--in-progress{background:linear-gradient(135deg,#5a3a0e,#7a5020);color:#ffd699}.production-map--dark .status-ribbon--planned{background:linear-gradient(135deg,#4a1a30,#5a2542);color:#f5b0c8}.roadmap-card__body{padding:.9rem 1rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.3rem}.roadmap-card__subtitle{margin:0;font-size:.72rem;opacity:.7;font-style:italic;line-height:1.3}.roadmap-card__icon{font-size:1.8rem;line-height:1}.roadmap-card__title{margin:0;font-size:.95rem;font-weight:700;line-height:1.2;letter-spacing:.3px}.roadmap-card__desc{margin:0;font-size:.75rem;line-height:1.35;opacity:.75}@media(max-width:600px){.production-map__grid-row{flex-direction:column;gap:0}.production-map__arrow--right{transform:rotate(90deg);width:48px;height:32px}.production-map__board{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);grid-template-rows:auto 18px auto;row-gap:.18rem}.roadmap-card{max-width:280px;width:100%}}.roadmap-card{animation:fadeInCard .6s ease both}.roadmap-card--0{animation-delay:0s}.roadmap-card--1{animation-delay:.15s}.roadmap-card--2{animation-delay:.3s}.roadmap-card--3{animation-delay:.45s}@keyframes fadeInCard{0%{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.production-map__arrow svg{animation:fadeInArrow .5s ease both;animation-delay:.4s}@keyframes fadeInArrow{0%{opacity:0}to{opacity:1}}.info-panel{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-out}.info-panel__backdrop{position:absolute;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.info-panel__content{position:relative;width:90%;max-width:550px;max-height:80vh;overflow-y:auto;border-radius:12px;border:2px solid;padding:30px;animation:slideUp .4s ease-out;font-family:"Press Start 2P",Noto Sans Thai,sans-serif}.info-panel--dark .info-panel__content{background:#0f0f23f2;border-color:#6478c866;color:#c8d0ee;box-shadow:0 0 40px #283c964d,inset 0 0 30px #1e1e3c80}.info-panel--light .info-panel__content{background:#fffcf5f7;border-color:#b4966466;color:#3a2a18;box-shadow:0 10px 40px #00000026}.info-panel__content::-webkit-scrollbar{width:6px}.info-panel__content::-webkit-scrollbar-track{background:transparent}.info-panel--dark .info-panel__content::-webkit-scrollbar-thumb{background:#6478c84d;border-radius:3px}.info-panel--light .info-panel__content::-webkit-scrollbar-thumb{background:#9678504d;border-radius:3px}.info-panel__close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#0000004d;color:#aaa;font-size:16px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.info-panel__close:hover{background:#ff32324d;color:#fff;transform:scale(1.1)}.info-panel .section-title{font-family:"Press Start 2P",Noto Sans Thai,sans-serif;font-size:16px;margin:0 0 6px;line-height:1.5}.info-panel--dark .section-title{color:#e0e4ff}.info-panel--light .section-title{color:#2a1a08}.info-panel .section-subtitle{font-size:12px;opacity:.6;margin:0 0 20px;font-family:"Press Start 2P",Noto Sans Thai,sans-serif}.info-panel .section-body{margin-bottom:20px}.info-panel .section-text{font-family:Noto Sans Thai,Inter,sans-serif;font-size:14px;line-height:1.8;margin:0}.info-panel .section-card{padding:12px 16px;border-radius:8px;font-family:Noto Sans Thai,Inter,sans-serif;font-size:14px;margin-bottom:1rem}.info-panel--dark .section-card{background:#1e1e3c99;border:1px solid rgba(80,80,140,.3)}.info-panel--light .section-card{background:#f5ebd7cc;border:1px solid rgba(180,150,100,.3)}.info-panel .section-card-title{font-family:Noto Sans Thai,Inter,sans-serif;font-weight:700}.info-panel .section-date{opacity:.7;font-size:.9em}.info-panel .section-projects-grid{display:flex;flex-direction:column;gap:12px}.info-panel .contact-form{display:flex;flex-direction:column;gap:16px}.info-panel .form-group{display:flex;flex-direction:column;gap:6px}.info-panel .form-label{font-family:"Press Start 2P",Noto Sans Thai,sans-serif;font-size:10px;opacity:.8}.info-panel .form-input,.info-panel .form-textarea{width:100%;padding:12px 14px;border-radius:8px;border:1px solid;font-family:Noto Sans Thai,Inter,sans-serif;font-size:14px;background:#14142dcc;border-color:#505aa066;color:#c8d0ee;box-sizing:border-box}.info-panel--light .form-input,.info-panel--light .form-textarea{background:#fffaf0e6;border-color:#b4966466;color:#3a2a18}.info-panel .form-submit{padding:14px 24px;border-radius:8px;border:2px solid;font-family:"Press Start 2P",Noto Sans Thai,sans-serif;font-size:11px;cursor:pointer;background:linear-gradient(135deg,#3c50b466,#643ca066);border-color:#6478dc80;color:#c8d0ff}.info-panel--light .form-submit{background:linear-gradient(135deg,#b48c3c33,#c8a0504d);border-color:#b48c3c80;color:#4a3520}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.info-panel__content{padding:24px 16px;width:95%;max-height:85vh;border-radius:16px}.info-panel__close{top:10px;right:10px;width:44px;height:44px;font-size:22px;background:#0006;border-color:#ffffff1a}.info-panel .section-title{font-size:14px;margin-right:40px}.info-panel .section-subtitle{font-size:9px;margin-bottom:15px}.info-panel .section-text{font-size:13px}.info-panel .section-card{padding:10px 12px}.info-panel .form-submit{width:100%;padding:16px}}@media(max-height:500px){.info-panel__content{max-height:95vh;padding-top:40px}}.settings-overlay{position:absolute;inset:0;z-index:30;display:flex;align-items:flex-start;justify-content:flex-end;padding:70px 20px 20px;animation:fadeIn .2s ease-out}.settings-backdrop{position:absolute;inset:0}.settings-panel{position:relative;width:280px;border-radius:12px;border:2px solid;padding:20px;animation:slideIn .3s ease-out}.settings--dark{background:#0f0f23f2;border-color:#6478c866;color:#c8d0ee;box-shadow:0 0 30px #283c964d;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.settings--light{background:#fffcf5f7;border-color:#b4966466;color:#3a2a18;box-shadow:0 10px 30px #00000026;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgba(128,128,128,.2)}.settings-title{font-family:"Press Start 2P",Noto Sans Thai,sans-serif;font-size:12px;margin:0}.settings-close{width:28px;height:28px;border-radius:50%;border:1px solid rgba(128,128,128,.3);background:transparent;color:#888;font-size:14px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.settings-close:hover{background:#ff323233;color:#f66}.settings-group{margin-bottom:16px}.settings-label{display:block;font-family:"Press Start 2P",Noto Sans Thai,sans-serif;font-size:9px;margin-bottom:10px;opacity:.7}.settings-toggle-group{display:flex;gap:6px}.settings-toggle-btn{flex:1;padding:8px 10px;border-radius:8px;border:2px solid transparent;font-family:Noto Sans Thai,Inter,sans-serif;font-size:12px;cursor:pointer;transition:all .25s ease}.settings--dark .settings-toggle-btn{background:#1e1e3299;color:#88a;border-color:#3c3c644d}.settings--light .settings-toggle-btn{background:#f0e6d299;color:#875;border-color:#b4966433}.settings--dark .settings-toggle-btn:hover{background:#282846cc;color:#aac}.settings--light .settings-toggle-btn:hover{background:#faf0dccc;color:#543}.settings--dark .settings-toggle-btn--active{background:#323c7899;border-color:#67d;color:#dde0ff;box-shadow:0 0 10px #5064c84d}.settings--light .settings-toggle-btn--active{background:#fff5dce6;border-color:#b94;color:#321;box-shadow:0 0 10px #aa823233}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.glow-card{--mouse-x: -999px;--mouse-y: -999px;--glow-color: var(--spa-accent-glow-strong, rgba(100, 216, 255, .35));position:relative;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 28%),var(--spa-surface);border:1px solid var(--spa-surface-border);border-radius:16px;overflow:hidden;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);transition:transform .3s cubic-bezier(.23,1,.32,1),border-color .3s ease,box-shadow .3s ease,background .3s ease;box-shadow:var(--spa-card-shadow);cursor:default}.glow-card:hover{transform:translateY(-6px) scale(1.01);border-color:var(--spa-accent-glow-strong);box-shadow:var(--spa-card-shadow),0 0 52px -14px var(--glow-color)}.glow-card__glow{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .3s ease;background:radial-gradient(350px circle at var(--mouse-x) var(--mouse-y),var(--glow-color),transparent 60%)}.glow-card:hover .glow-card__glow{opacity:1}.glow-card__content{position:relative;z-index:2;padding:1.75rem}.glow-card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .3s ease;background:radial-gradient(400px circle at var(--mouse-x) var(--mouse-y),var(--glow-color),transparent 50%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}.glow-card:hover:before{opacity:1}.glow-card:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.07) 50%,transparent 65%);transform:translate(-120%);opacity:0}.glow-card:hover:after{opacity:1;animation:cardSheen 1.2s ease-out}@keyframes cardSheen{0%{transform:translate(-120%)}to{transform:translate(120%)}}@media(max-width:768px){.glow-card__content{padding:1.25rem}}.spa-view{min-height:100vh;font-family:Outfit,Noto Sans Thai,sans-serif;color:var(--spa-text);background:var(--spa-bg);position:relative;overflow-x:hidden;isolation:isolate}.spa-view:before,.spa-view:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}.spa-view:before{background:radial-gradient(circle at 15% 18%,rgba(121,232,255,.16),transparent 28%),radial-gradient(circle at 82% 15%,rgba(196,181,253,.13),transparent 26%),radial-gradient(circle at 78% 78%,rgba(246,193,119,.08),transparent 22%),linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%);filter:blur(12px)}.spa-view:after{background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.65),transparent 90%);mask-image:linear-gradient(180deg,rgba(0,0,0,.65),transparent 90%);opacity:.22;mix-blend-mode:screen}.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:1000;background:transparent}.scroll-progress__bar{height:100%;width:0%;background:linear-gradient(90deg,var(--spa-gradient-start),var(--spa-gradient-end));border-radius:0 2px 2px 0;transition:width .05s linear;box-shadow:0 0 12px var(--spa-accent-glow-strong)}.spa-nav{position:fixed;top:3px;left:0;right:0;z-index:500;background:var(--spa-nav-bg);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--spa-nav-border);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;box-shadow:0 12px 30px #0000001f}.spa-nav__container{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center;height:64px}.spa-nav__logo{display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;color:var(--spa-text);font-family:Outfit,sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:-.02em;padding:0;transition:opacity .2s}.spa-nav__logo:hover{opacity:.8}.spa-nav__logo-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--spa-gradient-start),var(--spa-gradient-end));animation:glowPulse 2.5s ease-in-out infinite}.spa-nav__links{display:flex;gap:.25rem}.spa-nav__link{background:none;border:none;cursor:pointer;color:var(--spa-text-secondary);font-family:Outfit,Noto Sans Thai,sans-serif;font-size:.85rem;font-weight:500;padding:.5rem .85rem;border-radius:8px;transition:all .25s ease;position:relative;white-space:nowrap}.spa-nav__link:hover{color:var(--spa-text);background:var(--spa-accent-glow)}.spa-nav__link--active{color:var(--spa-accent);background:var(--spa-accent-glow)}.spa-nav__link--active:after{content:"";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:16px;height:2px;border-radius:1px;background:linear-gradient(90deg,var(--spa-gradient-start),var(--spa-gradient-end))}.spa-nav__controls{display:flex;align-items:center;gap:.35rem}.spa-nav__toggle{background:none;border:1px solid transparent;cursor:pointer;font-size:1.15rem;padding:.4rem;border-radius:8px;transition:all .25s ease;line-height:1;display:flex;align-items:center;justify-content:center}.spa-nav__toggle:hover{background:var(--spa-accent-glow);border-color:var(--spa-surface-border)}.spa-nav__toggle--game{font-size:1rem}.spa-nav__hamburger{display:none;background:none;border:none;cursor:pointer;padding:.5rem;width:36px;height:36px;position:relative}.spa-nav__hamburger-line,.spa-nav__hamburger-line:before,.spa-nav__hamburger-line:after{display:block;width:20px;height:2px;background:var(--spa-text);border-radius:2px;transition:all .3s cubic-bezier(.23,1,.32,1);position:absolute;left:50%;transform:translate(-50%)}.spa-nav__hamburger-line{top:50%;margin-top:-1px}.spa-nav__hamburger-line:before{content:"";top:-7px}.spa-nav__hamburger-line:after{content:"";top:7px}.spa-nav__hamburger-line--open{background:transparent}.spa-nav__hamburger-line--open:before{top:0;transform:translate(-50%) rotate(45deg)}.spa-nav__hamburger-line--open:after{top:0;transform:translate(-50%) rotate(-45deg)}.spa-content{position:relative;z-index:1;padding-top:67px}.spa-section{padding:5rem 0;position:relative}.spa-section:nth-child(2n){background:linear-gradient(180deg,transparent,var(--spa-section-alt),transparent)}.spa-section__container{max-width:900px;margin:0 auto;padding:0 2rem}.sh{margin-bottom:3rem;position:relative}.sh--center{text-align:center}.sh--center .sh__eyebrow{margin-left:auto;margin-right:auto}.sh__eyebrow{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:.85rem;padding:.35rem .8rem;border-radius:999px;font-family:Outfit,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--spa-accent);background:linear-gradient(135deg,var(--spa-accent-glow),transparent);border:1px solid var(--spa-surface-border);box-shadow:inset 0 1px #ffffff14}.sh__title{font-family:Outfit,Noto Sans Thai,sans-serif;font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:0 0 .75rem;color:var(--spa-text);text-shadow:0 0 22px var(--spa-accent-glow)}.spa-view--light .sh__title{color:#122238;text-shadow:0 8px 28px rgba(15,118,110,.08),0 0 18px rgba(37,99,235,.08)}.spa-view--dark .sh__title{color:#f4f8ff;text-shadow:0 0 18px rgba(121,232,255,.26),0 0 34px rgba(196,181,253,.16)}.sh__line{width:min(220px,48vw);height:1px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--spa-gradient-start),var(--spa-gradient-end),transparent);margin-bottom:.95rem;position:relative;overflow:hidden}.sh__line:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translate(-120%);animation:shimmer 3.8s linear infinite}.sh--center .sh__line{margin-left:auto;margin-right:auto}.about-card-wrap{position:relative}.about-card--single{--glow-color: rgba(121, 232, 255, .24)}.about-card--single .glow-card__content{padding:2rem}.about-card__body{display:flex;flex-direction:column;gap:1rem}.about-text{font-size:1.08rem;line-height:1.85;color:var(--spa-text-secondary);margin:0}.skills-section,.skills-marquee{position:relative}.skills-marquee:before,.skills-marquee:after{content:none}.skills-marquee--manual{overflow-x:auto;overflow-y:hidden;padding:.1rem 0 .5rem;scroll-padding-inline:1rem;scrollbar-width:thin;scrollbar-color:var(--spa-accent) transparent;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.skills-marquee--manual::-webkit-scrollbar{height:6px}.skills-marquee--manual::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--spa-gradient-start),var(--spa-gradient-end));border-radius:999px}.skills-marquee__track{display:flex;gap:1rem;width:max-content;animation:skillMarquee 28s linear infinite;will-change:transform;padding:.35rem 0 .75rem}.skills-marquee--manual .skills-marquee__track{animation:none}.skills-marquee--manual .skills-marquee__group{scroll-snap-align:start}.skills-marquee--manual{scroll-snap-type:x proximity}.skills-marquee--manual .skills-marquee__track{padding-inline:1rem}.skills-marquee--auto:hover .skills-marquee__track{animation-play-state:paused}.skills-marquee__group{min-width:240px;padding:1rem 1.05rem;border-radius:18px;border:1px solid var(--spa-surface-border);background:linear-gradient(135deg,#ffffff12,#ffffff05),var(--spa-surface);box-shadow:inset 0 1px #ffffff0d}.skills-marquee__label{display:inline-flex;margin-bottom:.85rem;font-family:Outfit,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--spa-accent)}.skills-marquee__chips{display:flex;flex-wrap:wrap;gap:.45rem}.skills-marquee__chip{font-family:Outfit,sans-serif;font-size:.78rem;padding:.32rem .65rem;border-radius:999px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(135deg,#ffffff14,#ffffff05);color:var(--spa-text-secondary);white-space:nowrap}.skills-mode-toggle{display:inline-flex;gap:.5rem;padding:.35rem;margin-bottom:1rem;border-radius:999px;background:#ffffff08;border:1px solid var(--spa-surface-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.skills-mode-toggle__btn{border:1px solid transparent;background:transparent;color:var(--spa-text-secondary);font-family:Outfit,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:.55rem .9rem;cursor:pointer;transition:all .25s ease}.skills-mode-toggle__btn:hover{color:var(--spa-text);background:#ffffff0d}.skills-mode-toggle__btn--active{color:var(--spa-text);background:linear-gradient(135deg,var(--spa-accent-glow),rgba(255,255,255,.04));border-color:var(--spa-surface-border);box-shadow:0 0 0 1px #79e8ff1f inset}.skill-card__header,.strength-card__header{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.skill-card{--glow-color: rgba(121, 232, 255, .26)}.strength-card{--glow-color: rgba(196, 181, 253, .26)}.skill-card__index,.strength-card__index{width:fit-content;font-family:Outfit,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--spa-accent);background:var(--spa-accent-glow);padding:.25rem .6rem;border-radius:999px}.skill-card__title,.strength-card__title{font-family:Outfit,Noto Sans Thai,sans-serif;font-size:1.02rem;font-weight:700;margin:0}.skill-card__tags{display:flex;flex-wrap:wrap;gap:.45rem}.skill-card__tag{font-family:Outfit,sans-serif;font-size:.78rem;padding:.32rem .65rem;border-radius:999px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(135deg,#ffffff14,#ffffff05);color:var(--spa-text-secondary);box-shadow:inset 0 1px #ffffff0f}.strengths-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.strength-card__desc{font-size:.92rem;line-height:1.7;color:var(--spa-text-secondary);margin:0}@keyframes skillMarquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.edu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.25rem}.edu-card__header{margin-bottom:.75rem}.edu-card{--glow-color: rgba(15, 118, 110, .24)}.edu-card__year{font-family:Outfit,sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.08em;color:var(--spa-accent);background:var(--spa-accent-glow);padding:.25rem .75rem;border-radius:20px;display:inline-block}.edu-card__degree{font-family:Outfit,Noto Sans Thai,sans-serif;font-size:1.05rem;font-weight:700;margin:0 0 .4rem;line-height:1.35}.edu-card__institution{font-size:.9rem;color:var(--spa-text-secondary);margin:0}.tl{position:relative;padding-left:50px}.tl__track{position:absolute;left:17px;top:0;bottom:0;width:3px;border-radius:2px;background:var(--spa-timeline-track);overflow:hidden}.tl__fill{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--spa-timeline-fill);transform-origin:top;transform:scaleY(0);border-radius:2px}.tl-item{position:relative;margin-bottom:2.5rem}.tl-item:last-child{margin-bottom:0}.tl-item__dot{position:absolute;left:-42px;top:1.75rem;width:13px;height:13px;border-radius:50%;background:var(--spa-timeline-dot);border:3px solid var(--spa-bg);box-shadow:0 0 0 3px var(--spa-accent-glow-strong);z-index:2;animation:dotPulse 3s ease-in-out infinite}.tl-item__period{font-family:Outfit,sans-serif;font-size:.8rem;font-weight:600;color:var(--spa-accent);letter-spacing:.05em;margin-bottom:.5rem}.tl-item__card{--glow-color: rgba(121, 232, 255, .22)}.tl-item__role{font-family:Outfit,Noto Sans Thai,sans-serif;font-size:1.1rem;font-weight:700;margin:0 0 .25rem;line-height:1.3}.tl-item__company{font-size:.9rem;font-weight:400;color:var(--spa-text-secondary);margin:0 0 1rem}.tl-item__details{padding-left:1.25rem;margin:0;display:flex;flex-direction:column;gap:.5rem}.tl-item__details li{font-size:.9rem;line-height:1.6;color:var(--spa-text-secondary)}.tl-item__details li::marker{color:var(--spa-accent)}.projects-switcher{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem}.projects-switcher__button{display:inline-flex;align-items:center;justify-content:space-between;gap:.75rem;min-width:170px;padding:.85rem 1rem;border-radius:999px;border:1px solid var(--spa-surface-border);background:linear-gradient(180deg,#ffffff06,#ffffff03),#080b1859;color:var(--spa-text-secondary);font-family:Outfit,Noto Sans Thai,sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease,background .2s ease;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}.projects-switcher__button:hover{transform:translateY(-1px);border-color:var(--spa-accent-glow-strong);color:var(--spa-text)}.projects-switcher__button--active{color:var(--spa-text);border-color:#79e8ff61;background:linear-gradient(135deg,#79e8ff29,#a479ff1a 45%,#f6c17714);box-shadow:0 0 0 1px #79e8ff24,0 14px 30px #00000038}.projects-switcher__label{white-space:nowrap}.projects-switcher__count{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 .45rem;border-radius:999px;background:#ffffff14;color:var(--spa-text-muted);font-size:.75rem;font-weight:700;flex-shrink:0}.projects-viewport{margin-top:.75rem;padding:1.25rem;border-radius:28px;background:radial-gradient(circle at top left,rgba(121,232,255,.08),transparent 30%),radial-gradient(circle at top right,rgba(246,193,119,.08),transparent 28%),linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--spa-surface);border:1px solid var(--spa-surface-border);box-shadow:var(--spa-card-shadow)}.projects-viewport__header{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1rem}.projects-viewport__title-wrap{min-width:0}.projects-viewport__eyebrow{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:.35rem;font-family:Outfit,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--spa-accent)}.projects-viewport__title{margin:0;font-family:Outfit,Noto Sans Thai,sans-serif;font-size:1.5rem;font-weight:800;line-height:1.2;color:var(--spa-text)}.projects-viewport__hint{font-size:.78rem;color:var(--spa-text-muted);text-align:right;line-height:1.5}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem}.project-card__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.project-card{--glow-color: rgba(246, 193, 119, .28)}.project-card__number{font-family:Outfit,sans-serif;font-size:1.5rem;font-weight:800;color:var(--spa-text-muted);background:linear-gradient(135deg,var(--spa-accent-glow),transparent);-webkit-background-clip:text;background-clip:text}.project-status{font-family:Outfit,sans-serif;font-size:.7rem;padding:.2rem .7rem;border-radius:20px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.project-status--completed{background:#22c55e1a;color:#22c55e;border:1px solid rgba(34,197,94,.2)}.project-status--in-progress{background:#f59e0b1a;color:#f59e0b;border:1px solid rgba(245,158,11,.2);animation:glowPulse 2s ease-in-out infinite}.project-card__name{font-family:Outfit,Noto Sans Thai,sans-serif;font-size:1.15rem;font-weight:700;margin:0 0 .5rem}.project-card__desc{font-size:.9rem;line-height:1.6;color:var(--spa-text-secondary);margin:0 0 1rem}.project-card__tech{display:flex;flex-wrap:wrap;gap:.4rem}.project-card__tech-tag{font-family:Outfit,sans-serif;font-size:.7rem;font-weight:500;padding:.2rem .6rem;border-radius:6px;background:linear-gradient(135deg,var(--spa-accent-glow),rgba(255,255,255,.03));color:var(--spa-accent);border:1px solid var(--spa-surface-border)}.project-card__hint{display:block;margin-top:.75rem;font-size:.7rem;color:var(--spa-text-muted);font-style:italic}.spa-project-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:2rem}.spa-project-modal__backdrop{position:absolute;inset:0;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.spa-project-modal__content{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--spa-surface);-webkit-backdrop-filter:blur(24px) saturate(1.25);backdrop-filter:blur(24px) saturate(1.25);border:1px solid var(--spa-surface-border);border-radius:20px;max-width:700px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:var(--spa-card-shadow);padding:2rem}.spa-view--light .spa-project-modal__backdrop{background:#222a3b57;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.spa-view--light .spa-project-modal__content{background:radial-gradient(circle at top left,rgba(15,118,110,.07),transparent 28%),radial-gradient(circle at top right,rgba(37,99,235,.06),transparent 28%),linear-gradient(180deg,#fffffffa,#f8fbfff5);border-color:#0f172a1f;box-shadow:0 18px 42px #0f172a1f,0 0 0 1px #fffc,inset 0 1px #ffffffb3}.spa-project-modal__content:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at top left,rgba(121,232,255,.08),transparent 28%),radial-gradient(circle at top right,rgba(246,193,119,.06),transparent 30%)}.spa-project-modal__content>*{position:relative;z-index:1}.spa-project-modal__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem}.spa-project-modal__title{font-family:Outfit,sans-serif;font-size:1.5rem;font-weight:800;margin:0;color:var(--spa-text);text-shadow:0 0 12px rgba(121,232,255,.06)}.spa-view--light .spa-project-modal__title{color:#0f172a;text-shadow:none}.spa-project-status{font-family:Outfit,sans-serif;font-size:.7rem;padding:.2rem .7rem;border-radius:20px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.spa-project-status--completed{background:#22c55e1a;color:#22c55e;border:1px solid rgba(34,197,94,.2)}.spa-project-status--in-progress{background:#f59e0b1a;color:#f59e0b;border:1px solid rgba(245,158,11,.2);animation:glowPulse 2s ease-in-out infinite}.spa-project-modal__close{background:var(--spa-accent-glow);border:1px solid var(--spa-surface-border);color:var(--spa-text);width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.spa-project-modal__close:hover{background:var(--spa-accent-glow-strong)}.spa-view--light .spa-project-modal__close{background:#0f172a0a;color:#0f172a;border-color:#0f172a1f}.spa-view--light .spa-project-modal__close:hover{background:#0f172a14;border-color:#0f172a2e}.spa-project-modal__body{color:var(--spa-text-secondary)}.spa-project-modal__desc{font-size:.95rem;line-height:1.7;color:var(--spa-text-secondary);margin:0 0 1.5rem}.spa-view--light .spa-project-modal__desc{color:#0f172ac2}.spa-project-modal__section{margin-bottom:1.5rem}.spa-project-modal__section-title{display:block;font-family:Outfit,sans-serif;font-size:.8rem;font-weight:600;color:var(--spa-accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.75rem}.spa-view--light .spa-project-modal__section-title{color:#0f766e}.spa-project-modal__tech-grid{display:flex;flex-wrap:wrap;gap:.4rem}.spa-project-modal__tech-tag{font-size:.75rem;padding:.3rem .7rem;border-radius:6px;background:#76aaff1f;color:#c7dbff;border:1px solid rgba(124,163,255,.24);font-family:Outfit,sans-serif;box-shadow:inset 0 1px #ffffff0a}.spa-view--light .spa-project-modal__tech-tag{background:#0f766e14;color:#0f172a;border-color:#0f766e2e;box-shadow:none}.spa-project-modal__images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem}.spa-project-modal__image-wrapper{border-radius:10px;overflow:hidden;cursor:pointer;border:1px solid rgba(124,163,255,.28);transition:transform .2s,border-color .2s,box-shadow .2s;background:#ffffff08}.spa-project-modal__image-wrapper:hover{transform:scale(1.02);border-color:#79e8ff99;box-shadow:0 0 0 1px #79e8ff47,0 12px 28px #00000047}.spa-view--light .spa-project-modal__image-wrapper{border-color:#0f172a1f;background:#0f172a05}.spa-view--light .spa-project-modal__image-wrapper:hover{border-color:#0f766e52;box-shadow:0 0 0 1px #0f766e1f,0 12px 28px #0f172a1f}.spa-project-modal__image{width:100%;height:auto;display:block}.spa-image-zoom{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;cursor:zoom-out}.spa-image-zoom__backdrop{position:absolute;inset:0;background:#000000d9}.spa-view--light .spa-image-zoom__backdrop{background:#e2e8f0e0}.spa-image-zoom__content{position:relative;max-width:90vw;max-height:90vh;border-radius:8px}.ai-description{font-size:1rem;line-height:1.7;color:var(--spa-text-secondary);margin:0}.ai-description--compact{max-width:62rem}.ai-card{--glow-color: rgba(121, 232, 255, .3)}.ai-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.ai-card--sub .glow-card__content,.ai-card .glow-card__content{display:flex;gap:1rem;align-items:flex-start}.ai-card__icon{font-size:2rem;flex-shrink:0;line-height:1;margin-top:.1rem}.ai-card__body{flex:1;min-width:0}.ai-card__category{font-family:Outfit,sans-serif;font-size:.7rem;font-weight:600;color:var(--spa-accent);text-transform:uppercase;letter-spacing:.08em}.ai-card__name{font-family:Outfit,Noto Sans Thai,sans-serif;font-size:1rem;font-weight:700;margin:.25rem 0 .4rem}.ai-card__desc{font-size:.85rem;line-height:1.6;color:var(--spa-text-secondary);margin:0}.ai-card__stack{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.85rem}.ai-card__stack-item{display:inline-flex;align-items:center;padding:.3rem .6rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--spa-accent) 28%,transparent);background:color-mix(in srgb,var(--spa-surface-2) 82%,transparent);color:var(--spa-text-secondary);font-size:.72rem;font-weight:600;letter-spacing:.01em}.contact-form{display:flex;flex-direction:column;gap:1.25rem}.form-group{display:flex;flex-direction:column;gap:.4rem}.form-label{font-family:Outfit,Noto Sans Thai,sans-serif;font-size:.85rem;font-weight:600;color:var(--spa-text-secondary)}.form-input,.form-textarea{padding:.85rem 1rem;border-radius:10px;border:1px solid var(--spa-input-border);background:var(--spa-input-bg);color:var(--spa-text);font-family:Outfit,Noto Sans Thai,sans-serif;font-size:.95rem;transition:all .25s ease;outline:none}.form-input:focus,.form-textarea:focus{border-color:var(--spa-accent);box-shadow:0 0 0 3px var(--spa-input-focus)}.form-input::placeholder,.form-textarea::placeholder{color:var(--spa-text-muted)}.form-textarea{resize:vertical;min-height:120px}.form-submit{padding:.85rem 1.5rem;border-radius:10px;border:none;font-family:Outfit,Noto Sans Thai,sans-serif;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.23,1,.32,1);background:linear-gradient(135deg,var(--spa-gradient-start),var(--spa-gradient-end));color:#fff;position:relative;overflow:hidden}.form-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px var(--spa-accent-glow-strong)}.form-submit:disabled{opacity:.6;cursor:not-allowed}.form-submit--success{background:linear-gradient(135deg,#22c55e,#16a34a)}.form-submit--error{background:linear-gradient(135deg,#ef4444,#dc2626)}.spa-footer{position:relative;z-index:1;padding:3rem 0;text-align:center}.spa-footer__container{max-width:900px;margin:0 auto;padding:0 2rem}.spa-footer__gradient{width:120px;height:2px;background:linear-gradient(90deg,transparent,var(--spa-accent),transparent);margin:0 auto 1.5rem;border-radius:1px}.spa-footer__text{font-size:.85rem;color:var(--spa-text-secondary);margin:0 0 .35rem}.spa-footer__sub{font-size:.75rem;color:var(--spa-text-muted);margin:0}@media(max-width:1024px){.spa-section__container{max-width:100%}}@media(max-width:768px){.spa-nav__links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:1rem 1.5rem;gap:.25rem;background:var(--spa-nav-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--spa-nav-border)}.spa-nav__links--open{display:flex}.spa-nav__link{padding:.75rem 1rem;font-size:.95rem}.spa-nav__hamburger{display:block}.spa-section{padding:3.5rem 0}.spa-section__container{padding:0 1.25rem}.sh__title{font-size:1.8rem}.tl{padding-left:35px}.tl__track{left:10px}.tl-item__dot{left:-32px;width:11px;height:11px}.edu-grid,.projects-grid{grid-template-columns:1fr}.projects-switcher__button{min-width:0;flex:1 1 160px}.projects-viewport{padding:1rem}.projects-viewport__header{flex-direction:column;align-items:flex-start}.projects-viewport__hint{text-align:left}.ai-grid{grid-template-columns:1fr}.spa-project-modal{padding:1rem}.spa-project-modal__content{padding:1.25rem}}@media(max-width:480px){.spa-nav__container{padding:0 1rem;height:56px}.spa-nav__logo{font-size:1.1rem}.spa-section{padding:2.5rem 0}.spa-section__container{padding:0 1rem}.sh__title{font-size:1.5rem}.about-card--single .glow-card__content{padding:1.25rem}.projects-switcher{gap:.5rem}.projects-switcher__button{padding:.75rem .9rem;font-size:.82rem}.projects-viewport__title{font-size:1.25rem}.skills-marquee:before,.skills-marquee:after{width:36px}.skills-marquee__group{min-width:210px}.tl{padding-left:28px}.tl__track{left:6px}.tl-item__dot{left:-27px;width:9px;height:9px}.tl-item__role{font-size:.95rem}.tl-item__details li{font-size:.8rem}.about-text{font-size:.95rem}}.app{width:100vw;min-height:100vh}.app--game{position:fixed;top:0;left:0;height:100vh;overflow:hidden}.app--game>canvas{display:block}