:root {
    --primary-color: #00e5ff; --background-color: #0a0f1c;
    --text-color: #e0e0e0; --font-family: 'Roboto Mono', monospace;
}
body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; background-color: var(--background-color);
    color: var(--text-color); font-family: var(--font-family);
}
.hidden { display: none !important; opacity: 0; }
#boot-screen {
    width: 100%; height: 100%; display: flex;
    align-items: center; justify-content: center;
    transition: opacity 1.5s ease-in-out;
}
#boot-text { font-size: 1em; white-space: pre-wrap; color: var(--primary-color); text-shadow: 0 0 5px var(--primary-color); }
#boot-text::after { content: '_'; opacity: 1; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
#main-interface { position: relative; width: 100%; height: 100%; }
#main-canvas { display: block; position: absolute; top: 0; left: 0; z-index: 1; }
#ui-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
#hologram-menu, #content-display { pointer-events: auto; }
#hologram-menu {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; gap: 15px; z-index: 10;
    animation: fadeInUI 0.5s ease-out;
}
.menu-item {
    padding: 10px 20px; background: rgba(0, 229, 255, 0.1); border: 1px solid rgba(0, 229, 255, 0.5);
    backdrop-filter: blur(5px); color: var(--primary-color); cursor: pointer; transition: all 0.3s ease;
    width: 280px; text-align: center; text-shadow: 0 0 3px var(--primary-color);
}
.menu-item:hover { background: rgba(0, 229, 255, 0.3); box-shadow: 0 0 15px rgba(0, 229, 255, 0.7); }
#content-display {
    position: absolute; width: 100%; height: 100%;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 5%; box-sizing: border-box;
}
.content-panel {
    width: 40%; max-width: 450px; height: 80%;
    background: rgba(10, 15, 28, 0.85); border: 1px solid var(--primary-color);
    backdrop-filter: blur(10px); padding: 20px; box-sizing: border-box;
    line-height: 1.8; color: var(--text-color);
}
#left-panel { animation: slideInLeft 0.5s ease-out; }
#right-panel { animation: slideInRight 0.5s ease-out; overflow-y: auto; }
#right-panel h3 { color: var(--primary-color); border-bottom: 1px solid var(--primary-color); padding-bottom: 10px; }
#close-content-btn {
    position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%);
    background: none; border: 1px solid var(--primary-color); color: var(--primary-color);
    font-family: var(--font-family); cursor: pointer; padding: 10px 20px; transition: all 0.3s ease;
}
#close-content-btn:hover { background: var(--primary-color); color: var(--background-color); }
@keyframes fadeInUI { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* 旧CSSから移植・再定義したスタイル */
#right-panel input {
    width: calc(100% - 22px); background: rgba(0,0,0,0.3); border: 1px solid var(--primary-color);
    color: var(--text-color); padding: 10px; font-family: var(--font-family); margin-bottom: 10px;
}
#right-panel button {
    background: var(--primary-color); border: none; color: var(--background-color);
    padding: 10px 15px; font-family: var(--font-family); cursor: pointer;
}
#right-panel .result { margin-top: 15px; padding: 10px; background: rgba(0,0,0,0.2); }
#right-panel .sim-options button {
    background: none; border: 1px solid var(--primary-color);
    color: var(--primary-color); margin-right: 10px;
    margin-bottom: 10px;
}
#right-panel .sim-options button:hover {
    background: var(--primary-color);
    color: var(--background-color);
}
/* (以前のコードは変更なし。末尾に以下を追記) */
#left-panel ul { list-style: none; padding: 0; margin: 0; }
#left-panel li {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-bottom: 1px solid rgba(0, 229, 255, 0.2);
}
#left-panel li:hover {
    background-color: rgba(0, 229, 255, 0.1);
}
#left-panel li.active {
    background-color: rgba(0, 229, 255, 0.2);
}