.project {
        margin: 0;
        overflow: hidden;
        background: radial-gradient(ellipse at center, #0a0a1a 0%, #000002 70%);
        color: #e0e0ff;
        font-family: 'Inter', sans-serif;
    }
    .project canvas {
        display: block;
        width: 100%;
        height: 100%;
    }
    .project #info {
        position: absolute;
        top: 20px;
        width: 100%;
        text-align: center;
        color: rgba(220, 220, 255, 0.9);
        font-size: 18px;
        letter-spacing: 0.5px;
        pointer-events: none;
        z-index: 100;
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
        transition: opacity 2s ease-in-out 1s;
    }
    .project .ui-panel {
        position: absolute;
        width: 100%;
        height: 100vh;
        inset: 0;
        background-image: linear-gradient(145deg, rgba(20, 25, 45, 0.85), rgba(10, 15, 30, 0.9));
        backdrop-filter: blur(10px) saturate(160%);
        -webkit-backdrop-filter: blur(10px) saturate(160%);
        padding: 15px 20px;
        border-radius: 10px;
        border: 1px solid rgba(180, 180, 220, 0.15);
        color: rgba(225, 225, 255, 0.9);
        font-size: 14px;
        user-select: none;
        z-index: 500;
        transition: opacity 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(180,180,220,0.07) inset;
        box-sizing: border-box;
        opacity: 0;
        transform: translateY(15px);
        animation: panelFadeIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
    }
    @keyframes panelFadeIn { to { opacity: 1; transform: translateY(0); } }
    .project .ui-panel:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(180,180,220,0.09) inset;
    }
    /* .project #controls { bottom: 20px; right: 20px; } */
    .project#autoRotateToggle {
        cursor: pointer; padding: 8px 5px; display: flex; align-items: center;
        gap: 8px; color: inherit; font-size: inherit; transition: color 0.2s ease;
    }
    .project#autoRotateToggle:hover { color: #fff; }
    .project#autoRotateToggle span { vertical-align: middle; }
    .project.rotate-icon {
        width: 1.1em; height: 1.1em; stroke: currentColor; stroke-width: 1.8;
        fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle;
    }
    @media (max-width: 640px) {
        .project.ui-panel { padding: 10px 12px; border-radius: 8px; }
        /* .project #controls { max-width: 150px; } */
        .project #info { font-size: 16px; top: 15px; }
        .project #info span { font-size: 12px; }
    }