.content-overlay{position:fixed;inset:0;background:#1f1f28b3;backdrop-filter:blur(8px);z-index:100;opacity:0;transition:opacity .3s ease;pointer-events:none}.content-overlay.visible{opacity:1;pointer-events:all}.content-panel{position:fixed;background:linear-gradient(135deg,rgba(220,215,186,.03) 0%,transparent 50%,rgba(220,215,186,.02) 100%),radial-gradient(ellipse 120% 120% at 30% 40%,#2a2a37f2,#1a1a22fa 60%,#16161dfa),var(--kana-bg-dark);backdrop-filter:blur(20px);border:1px solid var(--border-default);border-radius:16px;box-shadow:0 20px 60px #16161dcc,inset 0 1px #dcd7ba0f;z-index:101;max-width:500px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;transition:all .4s cubic-bezier(.4,0,.2,1)}.panel-right{right:2rem;top:50%;transform:translate(120%,-50%)}.panel-right.visible{transform:translateY(-50%)}.panel-left{left:2rem;top:50%;transform:translate(-120%,-50%)}.panel-left.visible{transform:translateY(-50%)}.panel-header{padding:2rem;border-bottom:1px solid var(--border-subtle);display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;background:linear-gradient(135deg,rgba(220,215,186,.05) 0%,transparent 100%)}.panel-title-section{flex:1}.panel-title{font-size:1.5rem;font-weight:800;color:var(--kana-fg);margin:0 0 .5rem;letter-spacing:-.01em;text-shadow:0 2px 8px rgba(22,22,29,.3)}.panel-subtitle{font-size:.9375rem;color:var(--kana-fg-dim);margin:0}.close-button{background:#dcd7ba0d;border:1px solid var(--border-default);border-radius:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:var(--kana-fg);flex-shrink:0}.close-button:hover{background:#dcd7ba1a;border-color:#dcd7ba4d;transform:rotate(90deg)}.panel-content{flex:1;overflow-y:auto;padding:1.5rem 2rem}.panel-content::-webkit-scrollbar{width:8px}.panel-content::-webkit-scrollbar-track{background:var(--surface-glass);border-radius:4px}.panel-content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}.panel-content::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.content-item{background:var(--surface-glass);border:1px solid var(--border-subtle);border-radius:12px;padding:1.5rem;margin-bottom:1rem;transition:all .3s ease;animation:slideInContent .4s ease-out forwards;opacity:0}.content-item:hover{border-color:var(--border-hover);background:var(--surface-glass-hover);transform:translate(4px)}.content-item:last-child{margin-bottom:0}@keyframes slideInContent{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.item-link{text-decoration:none;color:inherit;display:block}.item-header{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;margin-bottom:.75rem}.item-title{font-size:1.125rem;font-weight:700;color:var(--kana-fg);margin:0;line-height:1.3}.item-link:hover .item-title{color:#dcd7bae6;text-shadow:0 0 12px rgba(220,215,186,.3)}.item-link svg{flex-shrink:0;color:var(--kana-fg-dim);opacity:.6;transition:all .3s ease}.item-link:hover svg{opacity:1;color:var(--kana-fg);transform:translate(2px,-2px)}.item-description{font-size:.9375rem;color:var(--kana-fg-dim);line-height:1.6;margin:0 0 1rem}.item-tags{display:flex;flex-wrap:wrap;gap:.5rem}.tag{display:inline-block;padding:.25rem .625rem;background:#dcd7ba14;border:1px solid var(--border-hover);border-radius:4px;font-size:.75rem;color:#dcd7bad9;font-weight:600;text-transform:uppercase;letter-spacing:.025em;transition:all .2s ease}.tag:hover{background:#dcd7ba1f;border-color:#dcd7ba4d}.panel-footer{padding:1.5rem 2rem;border-top:1px solid var(--border-subtle);background:#dcd7ba05}.action-button{width:100%;padding:.875rem;background:#dcd7ba0d;border:1px solid var(--border-hover);border-radius:8px;color:var(--kana-fg);font-weight:600;font-size:.9375rem;cursor:pointer;transition:all .3s ease}.action-button:hover{background:#dcd7ba1a;border-color:#dcd7ba4d;transform:translateY(-2px);box-shadow:0 4px 12px #dcd7ba1a}@media(max-width:768px){.content-panel{max-width:calc(100% - 2rem);max-height:70vh}.panel-right,.panel-left{left:1rem;right:1rem;top:auto;bottom:1rem;transform:translateY(120%)}.panel-right.visible,.panel-left.visible{transform:translateY(0)}.panel-header{padding:1.5rem}.panel-content,.panel-footer{padding:1rem 1.5rem}}.room-navigation{position:fixed;top:1.5rem;left:50%;transform:translate(-50%);z-index:1000;animation:slideDown .6s ease-out}.nav-content{display:flex;align-items:center;gap:2rem;padding:.75rem 1.5rem;background:#dcd7ba1a;backdrop-filter:blur(20px);border:1px solid var(--border-hover);border-radius:50px;box-shadow:0 8px 30px #16161d4d}.nav-logo{text-decoration:none;font-size:1.25rem;font-weight:800;transition:transform .3s ease;display:flex;align-items:center}.nav-logo:hover{transform:scale(1.05)}.logo-text{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav-links{display:flex;align-items:center;gap:1.5rem}.nav-link{color:var(--kana-fg);text-decoration:none;font-weight:500;font-size:.9375rem;position:relative;transition:all .3s ease;white-space:nowrap;opacity:.9}.nav-link:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--primary-color),var(--accent-color));transition:width .3s ease}.nav-link:hover{color:var(--kana-fg);opacity:1}.nav-link:hover:after{width:100%}@keyframes slideDown{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}@media(max-width:768px){.room-navigation{top:1rem;left:1rem;right:1rem;transform:none}.nav-content{padding:.625rem 1rem;gap:1rem;justify-content:space-between}.nav-links{gap:1rem}.nav-link{font-size:.875rem}@media(max-width:480px){.nav-links{gap:.75rem}.nav-link{font-size:.8125rem}}}.room-navigation{pointer-events:all}.nav-content>*{pointer-events:all}.galaxy-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0;animation:fadeInGalaxy .8s ease-out .5s forwards}@keyframes fadeInGalaxy{0%{opacity:0}to{opacity:1}}.interactive-room{position:relative;width:100%;height:100vh;overflow:hidden;background:#000}.spline-container{width:100%;height:100%;transition:transform .2s ease-out;transform-style:preserve-3d}.welcome-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(31,31,40,.05) 0%,transparent 50%,rgba(220,215,186,.05) 100%),radial-gradient(ellipse 150% 150% at 20% 50%,#2a2a37,#1a1a22cc 40%,#16161d80 60%,#0000),radial-gradient(ellipse 150% 150% at 80% 80%,#242430,#1a1a22cc 40%,#16161d80 60%,#0000),#16161d;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .5s ease-out}.welcome-screen.fade-out{animation:fadeOut 1.2s ease-in-out forwards}.welcome-content{display:flex;flex-direction:column;align-items:center;gap:3rem;position:relative}.welcome-title{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;align-items:center;font-size:clamp(2.5rem,8vw,5rem);font-weight:700;margin:0;line-height:1.2;text-shadow:0 4px 8px rgba(0,0,0,.3)}.welcome-word{display:inline-block;color:var(--kana-fg);opacity:0;transform:translateY(30px);animation:wordSlideUp .8s ease-out forwards;letter-spacing:.02em}.welcome-word:nth-child(1){animation-delay:.5s}.welcome-word:nth-child(2){animation-delay:.7s}.welcome-word:nth-child(3){animation-delay:.9s}.welcome-word:nth-child(4){animation-delay:1.1s}.welcome-spinner{position:relative;width:80px;height:80px;animation:fadeInSpinner .8s ease-out 1.8s forwards;opacity:0}.spinner-ring{position:absolute;width:100%;height:100%;border:2px solid transparent;border-radius:50%}.spinner-ring:nth-child(1){border-top-color:#dcd7bae6;border-right-color:#dcd7ba66;animation:spinRing 2s linear infinite}.spinner-ring:nth-child(2){border-top-color:#c0a36eb3;border-left-color:#c0a36e4d;animation:spinRing 3s linear infinite reverse;width:70%;height:70%;top:15%;left:15%}.spinner-ring:nth-child(3){border-top-color:#72716999;animation:spinRing 4s linear infinite;width:40%;height:40%;top:30%;left:30%}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0;visibility:hidden}}@keyframes wordSlideUp{to{opacity:1;transform:translateY(0)}}@keyframes fadeInSpinner{to{opacity:1}}@keyframes spinRing{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-overlay{position:absolute;inset:0;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2000;gap:1.5rem}.spinner{width:50px;height:50px;border:4px solid var(--border-default);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay p{color:var(--text-secondary);font-size:1.125rem;font-weight:500}.hotspots-layer{position:absolute;inset:0;pointer-events:none;z-index:5}.hotspots-layer>*{pointer-events:all}.hover-indicator{position:absolute;top:2rem;left:50%;transform:translate(-50%);background:#7e9cd8e6;backdrop-filter:blur(20px);padding:.75rem 1.5rem;border-radius:12px;border:1px solid rgba(220,215,186,.3);box-shadow:0 8px 30px #7e9cd866;z-index:10;animation:slideDown .3s ease-out}.hover-text{color:var(--kana-fg);font-size:.9375rem;font-weight:600;margin:0;white-space:nowrap}@keyframes slideDown{0%{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%)}}.instructions{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);background:#dcd7ba1a;backdrop-filter:blur(20px);padding:1rem 2rem;border-radius:50px;border:1px solid var(--border-hover);box-shadow:0 8px 30px #16161d4d;z-index:10;animation:fadeInUp .8s ease-out .5s forwards;opacity:0}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.instruction-text{color:var(--kana-fg);font-size:.9375rem;font-weight:500;margin:0;display:flex;align-items:center;gap:.75rem}.click-icon{display:inline-flex;align-items:center;justify-content:center;animation:pulse-plus 2s ease-in-out infinite;width:24px;height:24px}.click-icon img{width:24px;height:24px;filter:brightness(0) invert(1)}@keyframes pulse-plus{0%,to{transform:scale(1);box-shadow:0 0 #7e9cd8b3}50%{transform:scale(1.1);box-shadow:0 0 0 8px #7e9cd800}}.hotspot-button{position:absolute;width:40px;height:40px;transform:translate(-50%,-50%);background:#dcd7ba14;backdrop-filter:blur(4px);border:2px solid var(--border-hover);border-radius:50%;color:var(--kana-fg);font-size:24px;font-weight:300;line-height:1;cursor:pointer;z-index:50;transition:all .2s ease;display:flex;align-items:center;justify-content:center;animation:pulse-hotspot 2s ease-in-out infinite}.hotspot-button:hover{background:#7e9cd833;border-color:#7e9cd880;transform:translate(-50%,-50%) scale(1.1)}.hotspot-button:active{transform:translate(-50%,-50%) scale(.95)}@keyframes pulse-hotspot{0%,to{box-shadow:0 0 #dcd7ba66}50%{box-shadow:0 0 0 10px #dcd7ba00}}@media(max-width:768px){.instructions{bottom:1rem;left:1rem;right:1rem;transform:none;padding:.875rem 1.5rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.instruction-text{font-size:.875rem;flex-direction:column;text-align:center;gap:.5rem}.spline-container{transform:none!important}}@media(hover:none)and (pointer:coarse){.spline-container{transform:none!important}}body{margin:0;padding:0;overflow:hidden}