*,:before,:after{box-sizing:border-box}body{margin:0;overflow:hidden}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden}.app{background:#f5f3f0;width:100%;height:100%;position:relative}.canvas-container{z-index:1;position:fixed;inset:0}.loading-screen{z-index:100;background:#f5f3f0;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.loading-content{flex-direction:column;align-items:center;gap:24px;width:320px;display:flex}.loading-title h1{color:#1c1917;letter-spacing:.1em;text-align:center;text-transform:uppercase;font-size:2.2rem;font-weight:300}.loading-title p{color:#a8a29e;letter-spacing:.25em;text-align:center;text-transform:uppercase;margin-top:6px;font-size:.72rem}.loading-bar-wrap{background:#e7e5e4;border-radius:1px;width:100%;height:1px;overflow:hidden}.loading-bar{background:linear-gradient(90deg,#c9a84c,#1c1917);border-radius:1px;width:0%;height:100%}.loading-pct{color:#a8a29e;letter-spacing:.15em;font-size:.68rem}.error-overlay{z-index:200;background:#f5f3f0;justify-content:center;align-items:center;padding:32px;display:flex;position:fixed;inset:0}.error-content{text-align:center;max-width:420px}.error-content h2{color:#1c1917;letter-spacing:.04em;margin-bottom:16px;font-size:1.4rem;font-weight:300}.error-content p{color:#57534e;margin-bottom:28px;font-size:.875rem;line-height:1.8}.error-retry{color:#f5f3f0;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#1c1917;border:none;padding:12px 28px;font-size:.78rem;transition:background .2s}.error-retry:hover{background:#c9a84c}.nav{z-index:50;justify-content:space-between;align-items:center;padding:24px 40px;display:flex;position:fixed;top:0;left:0;right:0}.nav-logo{color:#1c1917;letter-spacing:.3em;text-transform:uppercase;font-size:.85rem;font-weight:600}.hamburger{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;flex-direction:column;gap:5px;padding:8px;display:flex}.hb-line{transform-origin:50%;background:#1c1917;border-radius:1px;width:24px;height:1.5px;transition:transform .35s cubic-bezier(.23,1,.32,1),opacity .25s;display:block}.hb-line:first-child.open{transform:translateY(6.5px)rotate(45deg)}.hb-line:nth-child(2).open{opacity:0;transform:scaleX(0)}.hb-line:nth-child(3).open{transform:translateY(-6.5px)rotate(-45deg)}.side-panel{z-index:60;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);will-change:transform;background:#fff;border-left:1px solid #e7e5e4;width:380px;height:100%;padding:80px 44px 48px;position:fixed;top:0;right:0;transform:translate(110%)}.panel-close{color:#78716c;cursor:pointer;background:0 0;border:1px solid #e7e5e4;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:.7rem;transition:all .2s;display:flex;position:absolute;top:24px;right:24px}.panel-close:hover{color:#1c1917;border-color:#1c1917}.panel-content{flex-direction:column;gap:0;display:flex}.panel-tag{color:#c9a84c;letter-spacing:.25em;text-transform:uppercase;margin-bottom:14px;font-size:.62rem}.panel-title{color:#1c1917;margin-bottom:8px;font-size:1.7rem;font-weight:300;line-height:1.2}.panel-subtitle{color:#a8a29e;letter-spacing:.08em;margin-bottom:24px;font-size:.78rem}.panel-divider{background:#c9a84c;width:36px;height:1px;margin-bottom:24px}.panel-description{color:#57534e;margin-bottom:28px;font-size:.875rem;line-height:1.8}.panel-details{flex-direction:column;gap:12px;list-style:none;display:flex}.panel-details li{color:#78716c;letter-spacing:.04em;align-items:center;gap:12px;font-size:.8rem;display:flex}.detail-dot{background:#c9a84c;border-radius:50%;flex-shrink:0;width:4px;height:4px}.view-selector{z-index:50;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:36px;left:40px}.view-btn{-webkit-backdrop-filter:blur(8px);cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;background:#ffffffbf;border:1px solid #e7e5e4;align-items:baseline;gap:10px;padding:10px 16px;transition:background .2s,border-color .2s,transform .2s;display:flex}.view-btn:hover{background:#fffffff2;border-color:#c9a84c}.view-btn.active{background:#1c1917;border-color:#1c1917}.view-btn-ja{color:#1c1917;letter-spacing:.02em;font-size:.82rem;font-weight:400}.view-btn.active .view-btn-ja{color:#f5f3f0}.view-btn-en{color:#a8a29e;letter-spacing:.12em;text-transform:uppercase;font-size:.62rem}.view-btn.active .view-btn-en{color:#c9a84c}.joystick-wrap{z-index:50;-webkit-user-select:none;user-select:none;touch-action:none;position:fixed;bottom:40px;right:40px}.joystick-base{-webkit-backdrop-filter:blur(10px);cursor:grab;touch-action:none;background:#fff9;border:1px solid #e7e5e4;border-radius:50%;justify-content:center;align-items:center;width:88px;height:88px;display:flex;position:relative;box-shadow:0 2px 12px #0000000f}.joystick-base:active{cursor:grabbing}.joystick-thumb{opacity:.75;pointer-events:none;will-change:transform;background:#1c1917;border-radius:50%;width:36px;height:36px;transition:opacity .15s}.joystick-base:active .joystick-thumb{opacity:1}@media (width<=768px){.nav{padding:18px 20px}.nav-logo{font-size:.78rem}.side-panel{border-top:1px solid #e7e5e4;border-left:none;width:100%;height:65%;padding:44px 28px 36px;top:auto;bottom:0}.view-selector{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-direction:row;gap:0;padding:0;bottom:0;left:0;right:0;overflow-x:auto}.view-selector::-webkit-scrollbar{display:none}.view-btn{-webkit-backdrop-filter:blur(12px);background:#f5f3f0eb;border:none;border-top:1px solid #e7e5e4;border-radius:0;flex-direction:column;flex:none;align-items:center;gap:3px;padding:14px 18px}.view-btn-ja{font-size:.78rem}.view-btn-en{font-size:.58rem}.panel-title{font-size:1.4rem}.joystick-wrap{bottom:100px;right:20px}.joystick-base{width:76px;height:76px}.joystick-thumb{width:30px;height:30px}}@media (width<=375px){.view-btn{padding:12px 14px}.view-btn-ja{font-size:.72rem}}