:root{font-family:Comic Sans MS,Chalkboard SE,Marker Felt,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#213547;background-color:#f8faff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;width:100%}h1{font-size:3.2em;line-height:1.1}button{border-radius:12px;border:3px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#4a6bff;color:#fff;cursor:pointer;transition:all .25s}button:hover{transform:translateY(-2px);box-shadow:0 5px 10px #0000001a}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@media (max-width: 768px){h1{font-size:2.5em}h2{font-size:1.8em}.app-container{padding:15px}.question-grid,.options-grid{grid-template-columns:1fr}.similar-careers-list{grid-template-columns:1fr 1fr}}#root{width:100%;max-width:100%}:root{--primary: #4a6bff;--secondary: #ff6b6b;--tertiary: #33d9b2;--background: #f8faff;--text: #333;--card-bg: #ffffff;--shadow: rgba(0, 0, 0, .1);--border-radius: 12px}*{box-sizing:border-box;margin:0;padding:0;font-family:Comic Sans MS,Chalkboard SE,sans-serif}body{background-color:var(--background);color:var(--text)}.app-container{max-width:1600px;width:100%;margin:0 auto;padding:20px;box-sizing:border-box}header{text-align:center;margin-bottom:30px;background:linear-gradient(135deg,var(--primary) 0%,#7a89ff 100%);padding:25px;border-radius:var(--border-radius);box-shadow:0 6px 12px var(--shadow);color:#fff;position:relative;overflow:hidden}.header-animation{display:flex;align-items:center;justify-content:space-between;gap:15px}.emoji{font-size:2rem}.header-logo{height:60px;width:auto;object-fit:contain;border-radius:var(--border-radius);transition:transform .3s ease}.header-logo:hover{transform:scale(1.1)}header h1{font-size:clamp(2rem,5vw,2.8rem);margin-bottom:10px;background:linear-gradient(to right,#fff,#f0f0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 2px 4px rgba(0,0,0,.1);word-wrap:break-word;overflow-wrap:break-word}header h2{font-size:clamp(1.2rem,3vw,1.5rem);font-weight:400;color:#ffffffe6;word-wrap:break-word;overflow-wrap:break-word}.question-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px;margin-bottom:40px;width:100%}.question-card{background-color:var(--card-bg);padding:30px 20px;border-radius:var(--border-radius);box-shadow:0 4px 8px var(--shadow);transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;text-align:center;height:auto;min-height:220px;display:flex;align-items:center;justify-content:center;border:3px solid transparent}.question-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px var(--shadow);border-color:var(--secondary)}.icon-container{font-size:3.5rem;line-height:1;margin-bottom:10px;display:flex;align-items:center;justify-content:center;height:70px}.card-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}.question-card h3{font-size:1.8rem;color:var(--primary);word-wrap:break-word;overflow-wrap:break-word;width:100%;margin:15px 0 0}.options-container{background-color:var(--card-bg);padding:30px;border-radius:var(--border-radius);box-shadow:0 4px 8px var(--shadow);text-align:center;width:100%;max-width:1400px;margin:0 auto}.options-container h2{font-size:clamp(1.5rem,4vw,2rem);margin-bottom:30px;color:var(--primary);word-wrap:break-word;overflow-wrap:break-word}.options-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:25px;margin-bottom:40px;width:100%}.option-button{background-color:var(--tertiary);color:#fff;border:none;padding:25px 15px;border-radius:var(--border-radius);font-size:1.3rem;cursor:pointer;transition:transform .3s ease,background-color .3s ease;box-shadow:0 4px 8px var(--shadow);min-height:180px;height:auto;display:flex;align-items:center;justify-content:center;text-align:center}.option-button:hover{transform:scale(1.05);background-color:var(--secondary)}.back-button,.reset-button{background-color:var(--primary);color:#fff;border:none;padding:15px 30px;border-radius:var(--border-radius);font-size:1.3rem;cursor:pointer;margin:15px;transition:background-color .3s ease,transform .3s ease;box-shadow:0 4px 8px #0000001a}.reset-button{background-color:var(--secondary)}.back-button:hover,.reset-button:hover{opacity:.9;transform:translateY(-3px);box-shadow:0 6px 12px #00000026}.career-details{background-color:var(--card-bg);padding:30px;border-radius:var(--border-radius);box-shadow:0 4px 8px var(--shadow);width:100%;max-width:1400px;margin:0 auto}.career-details h2{font-size:2rem;margin-bottom:20px;color:var(--primary);text-align:center;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.career-description{margin-bottom:40px}.career-description p{font-size:1.2rem;line-height:1.6;margin-bottom:15px}.description-text{background-color:#f0f8ff;padding:25px;border-radius:var(--border-radius);box-shadow:inset 0 0 5px var(--shadow);word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;font-size:1.2rem;line-height:1.7}.similar-careers h3{font-size:1.5rem;margin-bottom:15px;color:var(--primary)}.similar-careers-list{list-style-type:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;margin-bottom:30px;width:100%}.similar-career-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 10px;gap:10px;text-align:center;background-color:#f0f8ff;border-radius:var(--border-radius);transition:transform .3s,box-shadow .3s;height:auto;min-height:130px}.similar-icon{font-size:2.2rem}.similar-career-item span:last-child{word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;width:100%;font-size:1.1rem;font-weight:500}.similar-career-item:hover{transform:translateY(-5px);box-shadow:0 5px 10px var(--shadow);background-color:#e6f2ff}.history-container{margin-top:40px;background-color:var(--card-bg);padding:20px;border-radius:var(--border-radius);box-shadow:0 4px 8px var(--shadow);width:100%;max-width:1400px;margin-left:auto;margin-right:auto}.history-container h3{font-size:1.5rem;margin-bottom:15px;color:var(--primary)}.history-container ul{list-style-type:none}.history-container li{background-color:#f0f8ff;padding:10px 15px;margin-bottom:10px;border-radius:var(--border-radius);box-shadow:0 2px 4px var(--shadow);font-size:1.1rem}.intro-text{text-align:center;margin-bottom:25px;padding:15px;font-size:1.3rem;color:var(--primary);background-color:#4a6bff1a;border-radius:var(--border-radius)}.card-content{display:flex;flex-direction:column;align-items:center;gap:10px;height:100%;width:100%;overflow:hidden}.card-icon{display:inline-block;animation:bounce 2s infinite}.career-button-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.career-icon{font-size:3rem;line-height:1;margin-bottom:8px;display:block}.career-name{font-weight:700;font-size:1.3rem;margin-top:5px;width:100%;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;line-height:1.3}.career-header{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:30px}.career-detail-icon{font-size:3.5rem}.career-details h3{color:var(--primary);margin:20px 0 15px;font-size:1.6rem}.history-list{list-style-type:none}.history-item{display:flex;align-items:center;background-color:#f0f8ff;padding:15px;margin-bottom:15px;border-radius:var(--border-radius);box-shadow:0 2px 4px var(--shadow);font-size:1.1rem;overflow:hidden}.history-question{font-weight:700;color:var(--primary);flex:1;min-width:200px;word-wrap:break-word;overflow-wrap:break-word;padding-right:10px}.history-arrow{margin:0 15px;color:var(--secondary);font-weight:700}.history-career{font-weight:700;color:var(--tertiary);flex:1;text-align:right;min-width:200px;word-wrap:break-word;overflow-wrap:break-word;padding-left:10px}footer{margin-top:60px;padding:25px;text-align:center;background-color:var(--primary);color:#fff;border-radius:var(--border-radius);font-size:1.2rem;width:100%;max-width:1400px;margin-left:auto;margin-right:auto}.career-actions{display:flex;justify-content:center;gap:15px;margin-top:30px}@media (max-width: 768px){.career-header{flex-direction:column}.history-item{flex-direction:column;align-items:flex-start}.history-question,.history-career{width:100%;text-align:left;padding:5px 0}.history-arrow{margin:5px 0;transform:rotate(90deg)}.header-logo{height:40px}}
