:root{
    font-family: "Noto Sans JP","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "sans-serif";
    line-height:1.5;
    font-weight:400;
    color-scheme:light dark;
    color:#ffffffde;
    background-color:#242424;
    font-synthesis:none;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
    
a{
    font-weight:500;
    color:#646cff;
    text-decoration:inherit;
}

a:hover{
    color:#535bf2;
}

body{
    margin: 0;
    display:flex;
    place-items:center;
    min-width:320px;
    min-height:100vh;
}

h1{
    font-size:3.2em;
    line-height:1.1;
}

button{
    border-radius: 8px;
    border: 1px solid transparent;
    padding: .6em 1.2em;
    font-size:1em;
    font-weight:500;
    font-family:inherit;
    background-color:#1a1a1a;
    cursor:pointer;
    transition:border-color .25s;
}

button:hover{
    border-color:#646cff;
}

button:focus,
button:focus-visible{
    outline:4px auto -webkit-focus-ring-color;
}
        
@media (prefers-color-scheme: light){
    :root{color:#213547;background-color:#fff}
    a:hover{color:#747bff}
    button{background-color:#f9f9f9}}
    :root{
        --primary-color: #1c1c1c;
        --primary-hover: #FF7B89;
        --secondary-color: #B5EAD7;
        --accent-color: #C7CEEA;
        --background-color: #e9ebf2;
        --card-background: #ffffff;
        --text-color: #4A4A4A;
        --border-radius: 24px;
        --shadow: 0 8px 16px rgba(255, 154, 162, .1);
    }
    
    body{
        background-color:var(--background-color);
        color:var(--text-color);
        font-family: "Noto Sans JP","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "sans-serif";
    }
    
    #root{
        max-width:1280px;
        margin:0 auto;
        padding:2rem;
        text-align:center;
    }

    .logo{
        height:6em;
        padding:1.5em;
        will-change:filter;
        transition:filter .3s;
    }
    
    .logo:hover{
        filter:drop-shadow(0 0 2em #646cffaa);
    }
    
    .logo.react:hover{
        filter:drop-shadow(0 0 2em #61dafbaa);
    }
    
    @keyframes logo-spin{
        0%{transform:rotate(0)}
        to{transform:rotate(360deg)}
    }
        
    @media (prefers-reduced-motion: no-preference){
        a:nth-of-type(2) .logo{
            animation:logo-spin infinite 20s linear;
        }
    }
        
    .card{
        padding:2em;
    }
    
    .read-the-docs{
        color:#888;
    }
    
    .career-anchor-app{
        max-width:800px;
        margin:0 auto;
        padding:2rem;
        text-align:center;
    }
    
    .question-container{
        background-color:var(--card-background);
        padding:2rem;
        border-radius:var(--border-radius);
        margin:1.5rem auto;
        box-shadow:var(--shadow);
        transition:transform .3s ease;
        box-shadow: 0px 0px 20px 5px rgb(0 34 112 / 5%);
        width:600px;
        min-height:400px;
        display:flex;
        flex-direction:column;
    }
    
    /* .question-container:hover{
        transform:translateY(-5px);
    } */
    
    .question-container h2{
        color:var(--primary-color);
        font-size:1.4rem;
        margin-bottom:1.5rem;
        font-weight:600;
    }
        
    .question-container p{
        font-size:1.1rem;
        line-height:1.8;
        margin-bottom:2rem;
        color:var(--text-color);
        flex-grow:1
    }
        
    .options{
        display:flex;
        flex-direction:column;
        gap:1rem;
        width:100%;
        margin-top:auto;
    }

    .option-button{
        width:200px;
        padding:1rem;
        margin:1rem auto 0;
        border: 2px solid var(--primary-color);
        background:#fff;
        color: var(--primary-color);
        border-radius:50px;
        font-size:1.1rem;
        font-weight:600;
        cursor:pointer;
        transition:all .3s ease;
    }
    
    .option-button:hover:not(:disabled){
        transform:translateY(-3px);
        border: 2px solid var(--primary-color);
        background:#fff;
        color: var(--primary-color);
    }
    
    .option-button:disabled{
        background:#ccc;
        border: 2px solid #ccc;
        color: #fff;
        cursor:not-allowed;
    }
    
    .slider-container{
        width:100%;
        padding:1rem 0;
        box-sizing:border-box;
    }

    .slider{
        -webkit-appearance:none;
        width:100%;
        height:8px;
        border-radius:4px;
        background:var(--background-color);
        outline:none;
    }
    
    .slider::-webkit-slider-thumb{
        -webkit-appearance:none;
        width:24px;
        height:24px;
        border-radius:50%;
        background:var(--primary-color);
        cursor:pointer;
        transition:all .2s ease;
    }

    .slider::-webkit-slider-thumb:hover{
        transform:scale(1.2);
        background:var(--primary-color);
    }

    .slider-labels{
        display:flex;
        justify-content:space-between;
        margin-top:.5em;
        font-size: 1em;
        font-weight: 600;
        color:var(--primary-color);
    }
    
    .radio-container{
        display: flex;
        justify-content: space-between;
        gap: 1.5em;
        width: 100%;
        flex-wrap: wrap;
    }

    .radio-option{
        border:2px solid var(--primary-color);
        border-radius: 10px;
        padding:1rem 1.5rem;
        cursor:pointer;
        transition:all .3s ease;
        width:calc(50% - 0.75em);
        text-align:left;
        ;display:flex;
        align-items:center;
        box-sizing:border-box;
    }

    .radio-option:hover{
        font-weight: 600;
        transform: translateY(-5px);
    }

    .radio-option input[type=radio]{
        accent-color:var(--primary-color);
        margin-right:1rem;
    }
    .results-container{
        background-color:var(--card-background);
        padding:2rem;
        border-radius:var(--border-radius);
        box-shadow: 0px 0px 20px 5px rgb(0 34 112 / 5%);
    }

    .results{
        display:grid;
        grid-template-columns:1fr;
        gap: 2em;
        margin-top:1rem;
    }

    .result-item{
        background-color:#fff;
        padding:1.5rem;
        border-radius:var(--border-radius);
        border:2px solid var(--primary-color);
        box-shadow: 10px 10px 0px 0px var(--primary-color);
        transition:transform .3s ease;
    }

    /* .result-item:hover{
        transform:translateY(-3px);
    } */

    .score-bar{
        background-color: var(--background-color);
        height: 12px;
        border-radius: 6px;
        margin: 1rem 0;
        overflow: hidden;
    }

    .score-fill{
        background: var(--primary-color);
        height: 100%;
        border-radius: 6px;
        transition:width 1s ease;
    }

    h1{
        color:var(--primary-color);
        font-size:2.2rem;
        margin-bottom:2rem;
        font-weight:700;
        text-shadow:2px 2px 4px rgba(255,154,162,.1);
    }

    h2{
        color:#213547;
        margin-bottom:1rem;
    }

    h3{
        color:var(--primary-color);
        margin-bottom:.5rem;
    }

    .description{
        font-size:.9rem;
        color:#666;
        margin-top:10px;
    }

    .top-anchors{
        margin-top:1.5rem;
        padding: 3em;
        background-color:#fff;
        border-radius:8px;
        /* box-shadow:0 2px 4px #0000001a; */
    }

    .top-anchor-item{
        margin:.8rem 0;
        padding:.8rem;
        background-color: var(--background-color);
        border-radius: 10px;
    }

    .top-anchor-item h4{
        margin-bottom:.5rem;
    }

    .top-anchor-item p{
        /* font-size:.9rem;
        color:#666; */
    }

    @media (min-width: 768px){
        .career-anchor-app,
        .question-container{
            padding:2rem;
        }

        .question-container h2{
            font-size:1.4rem;
        }

        .question-container p{
            font-size:1.1rem;
        }
        
        .option-button{
            padding: 1em;
            font-size: 1em;
        }

        .results{
            grid-template-columns:repeat(2,1fr);
        }
    }

    @media (min-width: 1024px){
        .results{
            grid-template-columns:repeat(3,1fr);
        }
    }

    @media (max-width: 768px){
        .career-anchor-app{
            padding:1rem
        }
        
        h1{
            font-size:1.8rem;
        }

        .question-container{
            width:90%;
            min-height:350px;
            padding:1.5rem;
        }

        .recommended-courses-button{
            padding:1rem 2rem;
            font-size:1.1rem;
        }
    }

    @media (max-width: 480px){
        h1{
            font-size:1.5rem;
        }

        .career-anchor-app{
            padding:.5rem;
        }

        .question-container{
            width:95%;
            min-height:300px;
            padding:1rem;
        }

        .question-container p{
            font-size:1rem;
        }

        .option-button{
            padding:.7rem;
            font-size:.8rem;
        }
    }
    
    @keyframes fadeIn
    {
        0%{
            opacity:0;
            transform:translateY(20px);
        }

        to{
            opacity:1;
            transform:translateY(0);
        }
    }

    .question-container,
    .result-item{
        animation:fadeIn .5s ease-out
    }
    
    .recommended-courses{
        text-align:center;
    }

    .recommended-courses h3{
        color:var(--primary-color);
        margin-bottom:1.5rem;
        text-align:center;
        font-size:1.4rem;
    }
    
    .course-list{
        display:grid;
        grid-template-columns:1fr;
        gap:1.5rem;
    }

    .course-card{
        background-color:#fff;
        padding:1.5rem;
        border-radius:var(--border-radius);
        box-shadow:var(--shadow);
        transition:transform .3s ease;
    }
    
    .course-card:hover{
        transform:translateY(-5px);
    }
    
    .course-card h4{
        color:var(--text-color);
        margin-bottom:.8rem;
        font-size:1.2rem;
    }
    
    .course-card p{
        color:#666;
        margin-bottom:1.2rem;
        line-height:1.5;
    }
    
    .course-button{
        display:inline-block;
        padding:.8rem 1.5rem;
        background-color:var(--primary-color);
        color:#fff;
        text-decoration:none;
        border-radius:var(--border-radius);
        transition:all .3s ease;
        font-weight:500;
    }
    
    .course-button:hover{
        background-color:var(--primary-hover);
        transform:translateY(-2px);
    }
    
    @media (min-width: 768px){
        .course-list{
            grid-template-columns:repeat(2,1fr);
        }
    }
    
    @media (min-width: 1024px){
        .course-list{
            grid-template-columns:repeat(3,1fr);
        }
    }
        .recommended-courses-button{
            display:inline-block;
            padding:1.2rem 2.5rem;
            border: 2px solid var(--primary-color);
            background: #fff;
            color: var(--primary-color);
            text-decoration:none;
            border-radius:50px;
            font-size:1.2rem;
            font-weight:600;
            transition:all .3s ease;
        }
        
        .recommended-courses-button:hover{
            transform:translateY(-3px);
            color: var(--primary-color);
        }