:root{font-family:Noto Sans JP,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#0a0a0f;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#0ff;text-decoration:inherit}a:hover{color:#f0f}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:0;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:transparent;cursor:pointer;transition:all .25s}button:focus,button:focus-visible{outline:2px solid #00ffff;outline-offset:2px}:root{--primary-color: #00ffff;--secondary-color: #ff00ff;--accent-color: #ffff00;--bg-dark: #0a0a0f;--bg-medium: #12121a;--bg-light: #1a1a2e;--text-primary: #ffffff;--text-secondary: #a0a0b0;--border-glow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--primary-color);--text-glow: 0 0 10px var(--primary-color);--pink-glow: 0 0 10px var(--secondary-color), 0 0 20px var(--secondary-color)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Noto Sans JP,Hiragino Sans,sans-serif;background:var(--bg-dark);color:var(--text-primary);min-height:100vh;overflow-x:hidden}#root{min-height:100vh}.app-container{min-height:100vh;background:linear-gradient(135deg,var(--bg-dark) 0%,var(--bg-medium) 100%);position:relative;overflow:hidden}.app-container:before{content:"";position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,255,.03) 2px,rgba(0,255,255,.03) 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(255,0,255,.02) 2px,rgba(255,0,255,.02) 4px);pointer-events:none;z-index:0}.glitch-text{position:relative;animation:glitch-skew 1s infinite linear alternate-reverse}.glitch-text:before,.glitch-text:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%}.glitch-text:before{left:2px;text-shadow:-2px 0 var(--secondary-color);clip:rect(44px,450px,56px,0);animation:glitch-anim 5s infinite linear alternate-reverse}.glitch-text:after{left:-2px;text-shadow:-2px 0 var(--primary-color);clip:rect(44px,450px,56px,0);animation:glitch-anim2 5s infinite linear alternate-reverse}@keyframes glitch-anim{0%{clip:rect(31px,9999px,94px,0)}20%{clip:rect(62px,9999px,42px,0)}40%{clip:rect(16px,9999px,78px,0)}60%{clip:rect(83px,9999px,27px,0)}80%{clip:rect(45px,9999px,66px,0)}to{clip:rect(8px,9999px,91px,0)}}@keyframes glitch-anim2{0%{clip:rect(65px,9999px,19px,0)}20%{clip:rect(37px,9999px,72px,0)}40%{clip:rect(89px,9999px,11px,0)}60%{clip:rect(24px,9999px,58px,0)}80%{clip:rect(71px,9999px,35px,0)}to{clip:rect(42px,9999px,86px,0)}}@keyframes glitch-skew{0%{transform:skew(0)}20%{transform:skew(0)}21%{transform:skew(1deg)}22%{transform:skew(0)}to{transform:skew(0)}}.cyber-frame{background:linear-gradient(135deg,#00ffff1a,#ff00ff0d);border:1px solid var(--primary-color);border-radius:8px;padding:20px;position:relative;box-shadow:inset 0 0 20px #00ffff1a}.cyber-frame:before,.cyber-frame:after{content:"";position:absolute;width:20px;height:20px;border:2px solid var(--primary-color)}.cyber-frame:before{top:-2px;left:-2px;border-right:none;border-bottom:none}.cyber-frame:after{bottom:-2px;right:-2px;border-left:none;border-top:none}.cyber-button{background:linear-gradient(135deg,#0ff3,#ff00ff1a);border:2px solid var(--primary-color);color:var(--text-primary);padding:15px 30px;font-size:16px;font-weight:700;cursor:pointer;position:relative;overflow:hidden;transition:all .3s ease;text-transform:uppercase;letter-spacing:2px}.cyber-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,255,.4),transparent);transition:.5s}.cyber-button:hover{box-shadow:var(--border-glow);transform:translateY(-2px)}.cyber-button:hover:before{left:100%}.cyber-button:active{transform:translateY(0)}.intro-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:40px 20px;text-align:center;position:relative;z-index:1}.intro-logo-container{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:30px}.intro-wake-logo{width:120px;height:auto;filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(0,255,255,.5));animation:logoPulse 3s ease-in-out infinite}.intro-logo-text{font-size:.8rem;color:var(--text-secondary);letter-spacing:2px;text-transform:uppercase}@keyframes logoPulse{0%,to{filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(0,255,255,.5));transform:scale(1)}50%{filter:brightness(0) invert(1) drop-shadow(0 0 20px rgba(0,255,255,.8));transform:scale(1.02)}}.glitch-container{margin-bottom:40px}.glitch-container h1{font-size:clamp(2rem,8vw,4rem);font-weight:900;color:var(--primary-color);text-shadow:var(--text-glow);letter-spacing:8px;margin-bottom:10px}.glitch-container .subtitle{font-size:clamp(1.5rem,5vw,2.5rem);color:var(--secondary-color);text-shadow:var(--pink-glow);letter-spacing:4px}.intro-description{max-width:500px;margin-bottom:40px}.tagline{font-size:1.1rem;line-height:2;color:var(--text-secondary)}.feature-list{display:flex;flex-direction:column;gap:15px;margin-top:30px}.feature-item{display:flex;align-items:center;gap:15px;font-size:1rem;color:var(--text-primary)}.feature-icon{font-size:1.5rem}.start-button{font-size:1.2rem;padding:20px 50px;border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.start-button .button-glitch{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0}.start-button:hover .button-glitch{animation:button-glitch .3s infinite}@keyframes button-glitch{0%{opacity:0;transform:translate(0)}20%{opacity:.8;transform:translate(-2px,2px);color:var(--secondary-color)}40%{opacity:0;transform:translate(2px,-2px)}60%{opacity:.8;transform:translate(-2px,-2px);color:var(--primary-color)}80%{opacity:0}to{opacity:0;transform:translate(0)}}.warning-text{margin-top:30px;color:var(--accent-color);font-size:.9rem}.blink{animation:blink 1s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.question-screen,.survey-screen{min-height:100vh;padding:40px 20px;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}.progress-container{width:100%;max-width:500px;margin-bottom:40px}.progress-bar{height:4px;background:var(--bg-light);border-radius:2px;overflow:hidden;margin-bottom:10px}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));transition:width .5s ease;box-shadow:0 0 10px var(--primary-color)}.progress-bar.survey .progress-fill{background:linear-gradient(90deg,var(--secondary-color),var(--accent-color))}.progress-text{text-align:right;font-size:.9rem;color:var(--text-secondary)}.progress-text .current{color:var(--primary-color);font-weight:700}.question-container{width:100%;max-width:600px}.question-number{font-size:1.5rem;font-weight:900;color:var(--primary-color);text-shadow:var(--text-glow);margin-bottom:20px;letter-spacing:4px}.question-text{margin-bottom:40px}.question-text p{font-size:1.2rem;line-height:1.8}.options-container{display:flex;flex-direction:column;gap:15px}.option-button{display:flex;align-items:center;gap:15px;text-align:left;padding:20px;border-radius:0}.option-letter{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:2px solid var(--primary-color);font-weight:700;font-size:1.2rem;flex-shrink:0}.option-text{flex:1;font-size:1rem;line-height:1.6}.scan-line{position:fixed;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent,var(--primary-color),transparent);animation:scan 3s linear infinite;pointer-events:none;z-index:100}@keyframes scan{0%{top:0;opacity:1}to{top:100%;opacity:.3}}.survey-header{text-align:center;margin-bottom:30px}.survey-badge{display:inline-block;background:var(--secondary-color);color:var(--bg-dark);padding:8px 20px;font-weight:700;letter-spacing:4px;margin-bottom:15px}.survey-description{color:var(--text-secondary);line-height:1.8}.survey-options{gap:12px}.option-button.survey{justify-content:center;text-align:center}.result-screen{min-height:100vh;padding:40px 20px;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}.result-header{text-align:center;margin-bottom:30px}.result-badge{display:inline-block;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));color:var(--bg-dark);padding:10px 25px;font-weight:700;letter-spacing:4px;margin-bottom:15px}.result-rarity{font-size:2rem;font-weight:900;color:var(--accent-color);text-shadow:0 0 20px var(--accent-color);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.result-card{width:100%;max-width:400px;margin-bottom:40px;position:relative}.result-image-container{position:relative;border:3px solid var(--primary-color);box-shadow:var(--border-glow);overflow:hidden}.result-image{width:100%;height:auto;display:block}.image-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.8) 100%);pointer-events:none}.result-info{text-align:center;padding:25px 20px;background:var(--bg-medium);border:1px solid var(--primary-color);border-top:none}.result-type-badge{margin-bottom:20px}.type-label{display:block;font-size:.7rem;color:var(--text-secondary);letter-spacing:4px;margin-bottom:8px}.type-code-display{display:flex;justify-content:center;gap:8px;margin-bottom:5px}.type-char{display:inline-flex;align-items:center;justify-content:center;width:50px;height:60px;font-size:2.2rem;font-weight:900;background:linear-gradient(180deg,#0ff3,#00ffff0d);border:2px solid var(--primary-color);color:var(--primary-color);text-shadow:0 0 20px var(--primary-color),0 0 40px var(--primary-color);animation:typeCharPulse 2s ease-in-out infinite;position:relative}.type-char:before{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 100%);pointer-events:none}.type-char:after{content:"";position:absolute;bottom:-5px;left:50%;transform:translate(-50%);width:80%;height:2px;background:var(--primary-color);box-shadow:0 0 10px var(--primary-color)}@keyframes typeCharPulse{0%,to{box-shadow:0 0 10px #00ffff4d,inset 0 0 20px #00ffff1a}50%{box-shadow:0 0 25px #0ff9,inset 0 0 30px #0ff3}}.type-char:nth-child(1){animation-delay:0s}.type-char:nth-child(2){animation-delay:.15s}.type-char:nth-child(3){animation-delay:.3s}.type-char:nth-child(4){animation-delay:.45s}.type-suffix{display:inline-block;font-size:1.5rem;font-weight:900;color:var(--accent-color);text-shadow:0 0 10px var(--accent-color);margin-left:5px;animation:suffixGlow 1.5s ease-in-out infinite alternate}@keyframes suffixGlow{0%{opacity:.7;text-shadow:0 0 5px var(--accent-color)}to{opacity:1;text-shadow:0 0 15px var(--accent-color),0 0 30px var(--accent-color)}}.result-name{font-size:clamp(1.3rem,4vw,1.8rem);font-weight:900;color:var(--text-primary);margin-bottom:10px}.result-attribute{color:var(--text-secondary);font-size:.9rem;margin-bottom:8px}.result-weakness{color:var(--accent-color);font-size:.9rem;text-shadow:0 0 10px rgba(255,0,255,.5)}.result-details{width:100%;max-width:600px}.detail-section{margin-bottom:30px}.section-title{display:flex;align-items:center;gap:10px;font-size:1.2rem;color:var(--primary-color);margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid rgba(0,255,255,.3)}.section-title .icon{font-size:1.3rem}.breakdown-list{display:flex;flex-direction:column;gap:15px}.breakdown-item{display:flex;align-items:flex-start;gap:15px;padding:15px;background:#00ffff0d;border-left:3px solid var(--primary-color)}.axis-code{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--primary-color);color:var(--bg-dark);font-weight:900;font-size:1.2rem;flex-shrink:0}.axis-desc{flex:1;line-height:1.6;color:var(--text-secondary)}.roles-list{list-style:none}.role-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}.role-item .bullet{color:var(--secondary-color)}.advice-box{background:linear-gradient(135deg,#ff00ff1a,#00ffff0d);border-color:var(--secondary-color)}.advice-box:before,.advice-box:after{border-color:var(--secondary-color)}.advice-box p{line-height:1.8}.weakness-advice-box{background:linear-gradient(135deg,#00ffff14,#ff00ff0d);border-color:var(--primary-color)}.weakness-advice-box:before,.weakness-advice-box:after{border-color:var(--primary-color)}.advice-content p{line-height:1.8;color:var(--text-primary);margin-bottom:15px}.weakness-note{padding-top:15px;border-top:1px solid rgba(255,255,255,.1)}.weakness-intro{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:6px}.weakness-text{color:var(--accent-color);font-weight:600;font-size:.95rem}.cta-section .cta-message{text-align:center;background:linear-gradient(135deg,#ffff001a,#ff00ff0d);border-color:var(--accent-color)}.cta-message:before,.cta-message:after{border-color:var(--accent-color)}.cta-message p{white-space:pre-line;line-height:1.8;color:var(--accent-color)}.share-section{width:100%;max-width:600px;margin:40px 0;text-align:center}.share-title{font-size:1rem;color:var(--text-secondary);margin-bottom:20px;letter-spacing:2px}.share-buttons{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.share-button{display:flex;align-items:center;gap:10px;padding:15px 30px}.share-button.twitter{border-color:#1da1f2;color:#1da1f2}.share-button.twitter:hover{box-shadow:0 0 20px #1da1f280}.share-button.copy{border-color:var(--text-secondary)}.share-icon{font-size:1.2rem}.retry-button{margin-top:20px;padding:15px 40px;background:transparent;border-color:var(--text-secondary);color:var(--text-secondary)}.retry-button:hover{border-color:var(--primary-color);color:var(--primary-color)}@media(max-width:600px){.glitch-container h1{letter-spacing:4px}.start-button{padding:15px 30px;font-size:1rem}.option-button{padding:15px}.option-letter{width:35px;height:35px;font-size:1rem}.share-buttons{flex-direction:column;align-items:center}.share-button{width:100%;max-width:250px;justify-content:center}}.intro-screen,.question-screen,.survey-screen,.result-screen{animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.option-button{animation:slideIn .3s ease backwards}.option-button:nth-child(1){animation-delay:.1s}.option-button:nth-child(2){animation-delay:.2s}.option-button:nth-child(3){animation-delay:.3s}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.navigation-header{width:100%;max-width:600px;margin-bottom:20px}.back-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background:transparent;border:1px solid var(--text-secondary);color:var(--text-secondary);font-size:.9rem;cursor:pointer;transition:all .3s ease}.back-button:hover{border-color:var(--primary-color);color:var(--primary-color);box-shadow:0 0 10px #00ffff4d}.back-icon{font-size:.8rem}.type-analysis-section{width:100%;max-width:600px;margin-bottom:40px;padding:30px 20px;background:linear-gradient(135deg,#00ffff0d,#ff00ff0d);border:2px solid var(--primary-color);position:relative}.type-analysis-section:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,255,.02) 2px,rgba(0,255,255,.02) 4px);pointer-events:none}.type-analysis-title{text-align:center;font-size:1.5rem;margin-bottom:30px;color:var(--text-primary)}.title-deco{color:var(--accent-color);margin:0 10px}.highlight-type{display:inline-block;font-size:2rem;font-weight:900;color:var(--primary-color);text-shadow:0 0 20px var(--primary-color);margin:0 10px;letter-spacing:4px;animation:glow 2s ease-in-out infinite alternate}@keyframes glow{0%{text-shadow:0 0 10px var(--primary-color),0 0 20px var(--primary-color)}to{text-shadow:0 0 20px var(--primary-color),0 0 40px var(--primary-color),0 0 60px var(--secondary-color)}}.axis-grid{display:flex;flex-direction:column;gap:20px}.axis-row{display:flex;flex-direction:column;gap:10px}.axis-title{font-size:.85rem;color:var(--text-secondary);text-align:center;letter-spacing:2px}.axis-options{display:flex;align-items:center;justify-content:center;gap:10px}.axis-option{flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:15px 10px;background:#ffffff05;border:1px solid rgba(255,255,255,.1);border-radius:8px;transition:all .3s ease;opacity:.4}.axis-option.selected{opacity:1;border-color:var(--axis-color);background:linear-gradient(135deg,#00ffff1a,#ff00ff1a);box-shadow:0 0 20px color-mix(in srgb,var(--axis-color) 30%,transparent)}.axis-code-badge{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:900;border-radius:50%;background:var(--bg-dark);border:2px solid var(--axis-color);color:var(--axis-color)}.axis-option.selected .axis-code-badge{background:var(--axis-color);color:var(--bg-dark)}.axis-name{font-size:.9rem;font-weight:700;color:var(--text-primary)}.axis-label{font-size:.75rem;color:var(--text-secondary)}.axis-vs{font-size:.8rem;color:var(--text-secondary);font-weight:700}.wake-career-section{width:100%;max-width:600px;margin:40px 0}.wake-career-card{padding:30px;background:linear-gradient(135deg,#ff00ff1a,#00ffff0d);border:2px solid var(--secondary-color);border-radius:12px;text-align:center;position:relative;overflow:hidden}.wake-career-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(255,0,255,.1),transparent,rgba(0,255,255,.1),transparent);animation:rotate 10s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.wake-career-card>*{position:relative;z-index:1}.wake-logo-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}.wake-logo-floating{position:absolute;width:60px;height:auto;opacity:.08;left:var(--x);top:var(--y);animation:floatLogo 6s ease-in-out infinite;animation-delay:var(--delay);filter:brightness(0) invert(1) blur(1px)}@keyframes floatLogo{0%,to{transform:translateY(0) rotate(0);opacity:.05}50%{transform:translateY(-15px) rotate(10deg);opacity:.12}}.wake-logo-main{display:block;width:150px;height:auto;margin:0 auto 15px;filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(255,0,255,.5))}.wake-logo-btn{width:24px;height:auto;filter:brightness(0) invert(1)}.wake-career-header{margin-bottom:20px}.wake-badge{display:inline-block;padding:5px 15px;background:var(--secondary-color);color:var(--bg-dark);font-size:.75rem;font-weight:700;letter-spacing:3px;margin-bottom:15px}.wake-title{font-size:1.3rem;color:var(--text-primary);line-height:1.5}.wake-description{color:var(--text-secondary);margin-bottom:25px;line-height:1.8}.wake-features{display:flex;flex-direction:column;gap:12px;margin-bottom:25px}.wake-feature{display:flex;align-items:center;justify-content:center;gap:10px;font-size:.9rem;color:var(--text-primary)}.wake-icon{font-size:1.2rem}.wake-cta-button{display:inline-flex;align-items:center;gap:10px;padding:18px 35px;background:linear-gradient(135deg,var(--secondary-color) 0%,var(--primary-color) 100%);border:none;color:var(--bg-dark);font-size:1.1rem;font-weight:700;text-decoration:none;transition:all .3s ease}.wake-cta-button:hover{transform:translateY(-3px);box-shadow:0 10px 30px #f0f6}.wake-cta-button .arrow{font-size:1.3rem;transition:transform .3s ease}.wake-cta-button:hover .arrow{transform:translate(5px)}.share-hashtag{margin-top:15px;font-size:.85rem;color:var(--primary-color);letter-spacing:1px}.weakness-section .weakness-box{position:relative}.weakness-section .weakness-name{color:var(--text-primary);font-size:1rem;font-weight:700;margin-bottom:10px}.weakness-section .weakness-advice{color:var(--text-secondary);font-size:.95rem;line-height:1.6}.strength-advice-section .advice-box{position:relative}.strength-advice-section .advice-box p{color:var(--text-primary);line-height:1.8;font-size:1rem}@media(max-width:600px){.type-char{width:40px;height:50px;font-size:1.8rem}.type-suffix,.type-analysis-title{font-size:1.2rem}.highlight-type{font-size:1.5rem}.axis-option{padding:10px 8px}.axis-code-badge{width:30px;height:30px;font-size:1rem}.axis-name{font-size:.8rem}.axis-label{font-size:.7rem}.wake-career-card{padding:20px}.wake-title{font-size:1.1rem}.wake-cta-button{padding:15px 25px;font-size:1rem}}