:root{--font-primary:"IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg-color:#08090d;--text-primary:#f3f4f6;--text-secondary:#f3f4f699;--text-muted:#f3f4f659;--accent:#d8b4fe;--accent-glow:#d8b4fe40;--glass-bg:#ffffff08;--glass-border:#ffffff14;--glass-hover:#ffffff0f;font-family:var(--font-primary);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}html,body{background-color:var(--bg-color);width:100%;height:100dvh;min-height:-webkit-fill-available;color:var(--text-primary);font-family:var(--font-primary);-webkit-user-select:none;user-select:none;overflow:hidden}#root{width:100%;height:100dvh;min-height:-webkit-fill-available;position:relative}button{cursor:pointer;background:0 0;border:none;outline:none;font-family:inherit}:root{--bg-deep:#08080a;--bg-surface:#111114;--gray-100:#f4f4f6;--gray-200:#e2e2e5;--gray-300:#cfcfd4;--gray-400:#a1a1aa;--gray-500:#71717a;--gray-600:#52525b;--gray-700:#27272a;--gray-800:#18181b}.space-wrapper{background-color:#0a0a0d;justify-content:center;align-items:center;width:100%;height:100dvh;min-height:-webkit-fill-available;display:flex;position:relative;overflow:hidden}.noise-overlay{opacity:.18;pointer-events:none;z-index:1;background-image:radial-gradient(#ffffff8c 1.2px,#0000 1.2px);background-size:26px 26px;position:absolute;inset:0}.enter-overlay{z-index:100;background-color:var(--bg-deep);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;transition:opacity 1.1s cubic-bezier(.16,1,.3,1),visibility 1.1s,transform 1.1s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;inset:0}.enter-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.97)}.enter-hint{letter-spacing:.18em;color:var(--gray-400);-webkit-user-select:none;user-select:none;text-align:center;padding:14px 28px;font-size:clamp(.95rem,2.4vw,1.25rem);font-weight:300;transition:color .4s,text-shadow .4s,transform .4s;animation:3.2s ease-in-out infinite enterTextBreathe}.enter-overlay:hover .enter-hint{color:#fff;text-shadow:0 0 24px #ffffff73;transform:scale(1.04)}@keyframes enterTextBreathe{0%,to{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.025)}}.main-content{z-index:10;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100dvh;min-height:-webkit-fill-available;padding:20px;display:flex;position:relative}.hero-center{--title-size:clamp(2.5rem, 11vw, 8.5rem);--logo-size:clamp(48px, calc(var(--title-size) * .78), 108px);--logo-radius:calc(var(--logo-size) * .23);--logo-gap:clamp(10px, 1.8vh, 22px);box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:100vw;padding:0 clamp(8px,3vw,32px);display:flex;position:relative}.brand-logo-container{bottom:calc(100% + var(--logo-gap));z-index:5;width:var(--logo-size);height:var(--logo-size);aspect-ratio:1;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex;position:absolute;left:50%;transform:translate(-50%)}.brand-logo-bg{border-radius:var(--logo-radius);-webkit-backdrop-filter:blur(14px);opacity:0;pointer-events:none;background:linear-gradient(135deg,#ffffff14 0%,#ffffff05 100%);border:1px solid #ffffff24;transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;position:absolute;inset:0;transform:scale(.86);box-shadow:0 8px 24px #000000a6,inset 0 1px #ffffff38,inset 0 0 14px #ffffff08}.brand-logo-bg.visible{opacity:1;transform:scale(1)}.brand-logo-container:hover .brand-logo-bg{border-color:#ffffff47;box-shadow:0 12px 30px #000c,0 0 20px #ffffff1f,inset 0 1px #ffffff59}.brand-logo-t-wrapper{z-index:2;aspect-ratio:1;opacity:0;visibility:hidden;pointer-events:none;transform-origin:50%;will-change:transform, opacity;justify-content:center;align-items:center;width:76%;height:76%;display:flex;position:relative}.brand-logo-t-wrapper.animate-fall{opacity:1;visibility:visible;pointer-events:auto;animation:1.35s cubic-bezier(.22,1,.36,1) forwards fallImpactTilt}.brand-logo-t-svg{filter:drop-shadow(0 4px 14px #000000b3)drop-shadow(0 0 10px #ffffff26);width:100%;height:100%;transition:filter .3s,transform .3s;overflow:visible}.brand-logo-container:hover .brand-logo-t-svg{filter:drop-shadow(0 6px 18px #000000d9)drop-shadow(0 0 16px #ffffff4d);transform:scale(1.04)}@keyframes fallImpactTilt{0%{opacity:0;transform:translate(38%,-240px)rotate(0)scale(.9,1.1)}12%{opacity:1}32%{opacity:1;transform:translate(38%)rotate(0)scale(1)}37%{transform:translate(37%,4px)rotate(0)scale(1.14,.86)}47%{transform:translate(30%,-14px)rotate(-10deg)scale(.96,1.04)}59%{transform:translate(20%,5px)rotate(-28deg)scale(1)}73%{transform:translate(8.25%,10.25%)rotate(-49deg)}84%{transform:translate(11.25%,10.25%)rotate(-43.5deg)}92%{transform:translate(9.75%,10.25%)rotate(-45.5deg)}to{opacity:1;transform:translate(10.25%,10.25%)rotate(-45deg)}}.brand-logo-container.loop-active{will-change:transform;animation:5s cubic-bezier(.25,1,.5,1) infinite containerHammerJolt}@keyframes containerHammerJolt{0%,82%{transform:translate(-50%)translateY(0)}86%{transform:translate(-50%)translateY(5px)}89.5%{transform:translate(-50%)translateY(-2px)}93.5%{transform:translate(-50%)translateY(.8px)}97%,to{transform:translate(-50%)translateY(0)}}.brand-logo-bg.loop-active{will-change:transform, box-shadow, border-color;animation:5s cubic-bezier(.25,1,.5,1) infinite bgHammerPulse}@keyframes bgHammerPulse{0%,82%{border-color:#ffffff24;box-shadow:0 8px 24px #000000a6,inset 0 1px #ffffff38,inset 0 0 14px #ffffff08}86%{border-color:#ffffff59;box-shadow:0 12px 28px #000c,0 0 18px #ffffff29,inset 0 1px #ffffff6b,inset 0 0 14px #ffffff0f}93%,to{border-color:#ffffff24;box-shadow:0 8px 24px #000000a6,inset 0 1px #ffffff38,inset 0 0 14px #ffffff08}}.brand-logo-t-wrapper.loop-active{opacity:1;visibility:visible;pointer-events:auto;animation:5s cubic-bezier(.25,1,.5,1) infinite tHammerLoop}@keyframes tHammerLoop{0%,70%{opacity:1;transform:translate(10.25%,10.25%)rotate(-45deg)scale(1)}79%{opacity:1;transform:translate(9.5%,6%)rotate(-27deg)scale(.965)}82.5%{opacity:1;transform:translate(9%,5%)rotate(-26deg)scale(.96)}86%{opacity:1;transform:translate(11.5%,12.5%)rotate(-51deg)scale(1.025,.955)}89.5%{opacity:1;transform:translate(9.5%,9%)rotate(-42deg)scale(.985,1.015)}93.5%{opacity:1;transform:translate(10.5%,10.5%)rotate(-46deg)scale(1)}97%,to{opacity:1;transform:translate(10.25%,10.25%)rotate(-45deg)scale(1)}}.brand-title{z-index:2;font-size:var(--title-size);letter-spacing:-.045em;background:linear-gradient(135deg,#fff 0%,#d4d4d8 35%,#71717a 75%,#3f3f46 100%);-webkit-text-fill-color:transparent;-webkit-user-select:none;user-select:none;white-space:nowrap;text-align:center;-webkit-background-clip:text;background-clip:text;width:100%;margin:0;padding:0;font-weight:600;line-height:.95;animation:6s ease-in-out infinite alternate textShimmer;position:relative}@keyframes textShimmer{0%{opacity:.95}to{opacity:1}}.brand-sub-wrapper{white-space:nowrap;opacity:0;will-change:transform, opacity;pointer-events:none;width:max-content;max-width:95vw;min-height:clamp(1.8rem,4.2vw,3.2rem);padding-bottom:clamp(10px,1.4vw,18px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);display:inline-block;position:absolute;top:calc(100% + clamp(8px,1.6vh,18px));left:50%;transform:translate(-50%,-12px)}.brand-sub-wrapper.newline-active{opacity:1;pointer-events:auto;transform:translate(-50%)}.brand-sub{letter-spacing:.02em;color:var(--gray-200);white-space:nowrap;text-shadow:0 2px 20px #000c;-webkit-user-select:none;user-select:none;min-height:1em;margin:0;font-size:clamp(1.05rem,3.4vw,2.4rem);font-weight:300;line-height:1.25}.cursor{background-color:var(--gray-300);vertical-align:baseline;width:2px;margin-left:4px;animation:.85s infinite blink;display:inline-block}.cursor-title,.cursor-sub{height:.8em}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.hand-drawn-svg{pointer-events:none;width:100%;height:clamp(12px,1.6vw,20px);position:absolute;bottom:0;left:0;overflow:visible}.hand-drawn-path{fill:none;stroke:var(--gray-300);stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600px;opacity:.85;transition:opacity .3s}.hand-drawn-path.animate-draw{animation:1.1s cubic-bezier(.65,0,.35,1) forwards drawUnderline}.hand-drawn-path.drawn{stroke-dashoffset:0}@keyframes drawUnderline{to{stroke-dashoffset:0}}.dock-circle-btn{-webkit-backdrop-filter:blur(14px);cursor:pointer;opacity:0;pointer-events:none;background:#ffffff06;border:1px solid #ffffff14;border-radius:50%;justify-content:center;align-items:center;width:clamp(38px,4.5vw,44px);height:clamp(38px,4.5vw,44px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s,box-shadow .3s;display:flex;position:relative;transform:translateY(10px);box-shadow:inset 0 1px #ffffff0f}.dock-circle-btn.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.dock-circle-btn:hover{background:#ffffff12;border-color:#ffffff38;transform:translateY(-2px);box-shadow:0 6px 20px #00000073,inset 0 1px #ffffff26}.dock-circle-btn:active{transform:translateY(0)scale(.96)}.bottom-left-dock{bottom:calc(clamp(16px, 3.2vh, 32px) + env(safe-area-inset-bottom,0px));left:calc(clamp(16px, 3.5vw, 36px) + env(safe-area-inset-left,0px));z-index:25;pointer-events:none;align-items:center;gap:clamp(8px,1.4vw,12px);display:flex;position:fixed}.bottom-left-dock>*{pointer-events:auto}.menu-icon{fill:none;width:clamp(16px,2vw,19px);height:clamp(16px,2vw,19px);stroke:var(--gray-400);stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}.menu-btn:hover .menu-icon{stroke:var(--gray-100)}.menu-line{transform-box:view-box;transform-origin:12px 12px;transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .2s}.menu-btn.active .menu-line.top{transform:rotate(45deg)translateY(5px)}.menu-btn.active .menu-line.mid{opacity:0;transform:scaleX(0)}.menu-btn.active .menu-line.bot{transform:rotate(-45deg)translateY(-5px)}.menu-btn.active{background:#ffffff14;border-color:#ffffff47}.construction-badge{-webkit-backdrop-filter:blur(14px);white-space:nowrap;-webkit-user-select:none;user-select:none;opacity:0;pointer-events:none;background:#ffffff08;border:1px solid #0000;border-radius:9999px;justify-content:center;align-items:center;max-width:0;height:clamp(38px,4.5vw,44px);padding:0;transition:max-width .45s cubic-bezier(.16,1,.3,1),padding .45s cubic-bezier(.16,1,.3,1),opacity .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s;display:inline-flex;overflow:hidden;transform:translate(-10px)scale(.92);box-shadow:0 4px 20px #00000059,inset 0 1px #ffffff14}.construction-badge.open{opacity:1;pointer-events:auto;border-color:#ffffff1a;max-width:280px;padding:0 clamp(14px,2vw,20px);transform:translate(0)scale(1)}.construction-badge:hover{background:#ffffff0f;border-color:#fff3}.badge-text{letter-spacing:.26em;text-transform:uppercase;color:var(--gray-300);font-size:clamp(.66rem,1.2vw,.82rem);font-weight:500;line-height:1}.sound-toggle-btn{bottom:calc(clamp(16px, 3.2vh, 32px) + env(safe-area-inset-bottom,0px));right:calc(clamp(16px, 3.5vw, 36px) + env(safe-area-inset-right,0px));z-index:25;position:fixed}.sound-toggle-icon{fill:none;width:clamp(16px,2vw,19px);height:clamp(16px,2vw,19px);stroke:var(--gray-400);stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s,transform .2s}.sound-toggle-btn:hover .sound-toggle-icon{stroke:var(--gray-100)}@media (width<=640px){.hero-center{--title-size:clamp(2.5rem, 12.5vw, 4.4rem);--logo-size:clamp(46px, 13.5vw, 64px);--logo-radius:calc(var(--logo-size) * .22);--logo-gap:clamp(8px, 2vh, 16px)}.bottom-left-dock{bottom:calc(18px + env(safe-area-inset-bottom,0px));left:calc(16px + env(safe-area-inset-left,0px));gap:8px}.sound-toggle-btn{bottom:calc(18px + env(safe-area-inset-bottom,0px));right:calc(16px + env(safe-area-inset-right,0px))}.dock-circle-btn{width:38px;height:38px}.construction-badge{height:38px}.construction-badge.open{padding:0 13px}.badge-text{letter-spacing:.2em;font-size:.65rem}}@media (width<=380px){.hero-center{--title-size:clamp(2.2rem, 12vw, 3.2rem);--logo-size:clamp(40px, 13vw, 48px);--logo-radius:calc(var(--logo-size) * .22);--logo-gap:8px}}@media (height<=560px){.space-wrapper{-webkit-overflow-scrolling:touch;overflow-y:auto}.hero-center{--title-size:clamp(2.2rem, 9vh, 3.6rem);--logo-size:clamp(36px, 8.5vh, 48px);--logo-radius:calc(var(--logo-size) * .22);--logo-gap:6px}.brand-sub-wrapper{top:calc(100% + 6px)}}