* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Recursive', sans-serif; font-variation-settings: 'CASL' 0.5, 'MONO' 0; background: #120810; color: #C0A0AA; line-height: 1.7; font-size: 15px; }
h1, h2 { font-variation-settings: 'CASL' 0, 'MONO' 1; font-weight: 800; color: #E8C8D0; }

.sidebar { position: fixed; left: 0; top: 0; width: 200px; height: 100vh; background: #1A0A10; z-index: 10; padding: 24px 0; transform: translateX(-200px); animation: sideIn 0.3s ease-out forwards; }
@keyframes sideIn { to { transform: translateX(0); } }
.sidebar-title { font-variation-settings: 'CASL' 0, 'MONO' 1; font-weight: 800; font-size: 16px; color: #E8C8D0; padding: 0 20px 20px; border-bottom: 1px solid #4A1A2A; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 12px 20px; color: #8A6070; text-decoration: none; font-variation-settings: 'CASL' 0, 'MONO' 1; font-weight: 300; font-size: 12px; letter-spacing: 0.08em; border-bottom: 1px solid #4A1A2A; transition: background 0.2s ease, color 0.2s ease; }
.nav-item:hover { background: #2A1018; color: #E8C8D0; }
.nav-item:hover svg { transform: rotateY(90deg); transition: transform 0.3s ease; }
.nav-item svg { transition: transform 0.3s ease; }

.pixel-particles { position: fixed; top: 0; left: 200px; width: calc(100% - 200px); height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
.particle { position: absolute; width: 4px; height: 4px; background: #D4607A; opacity: 0.2; animation: drift 25s linear infinite; }
@keyframes drift { 0% { transform: translateY(100vh); } 100% { transform: translateY(-20px); } }

.main-area { margin-left: 200px; position: relative; z-index: 1; }

.hero-chamber { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; }
.isometric-scene { opacity: 0; animation: fadeIn 0.6s 0.3s ease forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.chamber-title { font-size: 28px; margin-top: 24px; letter-spacing: 2px; }
.chamber-sub { font-variation-settings: 'CASL' 1; font-weight: 600; font-size: 14px; color: #D4607A; margin-top: 8px; }

.angular-divider { padding: 0; }
.angular-divider svg { display: block; }
.slash-line { stroke-dasharray: 1500; stroke-dashoffset: 1500; }
.slash-line.drawn { animation: drawSlash 0.6s ease forwards; }
@keyframes drawSlash { to { stroke-dashoffset: 0; } }

.chamber { padding: 64px 48px; }
.chamber-inner { display: flex; gap: 40px; align-items: center; max-width: 800px; margin: 0 auto; }
.chamber-inner.reverse { flex-direction: row-reverse; }
.chamber-visual { flex-shrink: 0; }
.chamber-visual svg { transition: transform 0.2s ease; }
.chamber-text { flex: 1; }
.chamber-label { font-variation-settings: 'CASL' 0, 'MONO' 1; font-weight: 300; font-size: 12px; letter-spacing: 0.08em; color: #8A6070; display: block; margin-bottom: 8px; }
.chamber-text h2 { font-size: 24px; margin-bottom: 12px; }
.chamber-text p { margin-bottom: 12px; }

.chamber { opacity: 0; transform: translateY(40px); transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.chamber.visible { opacity: 1; transform: translateY(0); }

.chamfered { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }

/* Palette: #4A1A2A #5A1A2A #8A6070 #D4607A #E8C8D0 */
@media (max-width: 768px) {
    .sidebar { position: relative; width: 100%; height: auto; transform: translateX(0); animation: none; display: flex; flex-wrap: wrap; padding: 12px; gap: 0; }
    .sidebar-title { padding: 0 12px 0 0; border-bottom: none; }
    .nav-item { padding: 8px 12px; border-bottom: none; }
    .main-area { margin-left: 0; }
    .pixel-particles { left: 0; width: 100%; }
    .chamber-inner, .chamber-inner.reverse { flex-direction: column; }
    .chamber { padding: 40px 24px; }
}