body{margin:0;overflow:hidden;background-color:#d4cfc4;font-family:Noto Sans JP,sans-serif}#canvas-container{width:100vw;height:100vh;display:block}.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:80px;height:80px;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .2s ease-out;color:#ffffffe6;font-size:36px;z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 20px #0009;-webkit-user-select:none;user-select:none}.nav-arrow:hover{background:#ffffff40;transform:translateY(-50%) scale(1.1);color:#ffdb70;border-color:#ffdb70}.nav-arrow:active{transform:translateY(-50%) scale(.95)}#prev-btn{left:40px}#next-btn{right:40px}#status{position:absolute;bottom:40px;width:100%;text-align:center;color:#5a5550;font-size:16px;pointer-events:none;text-transform:uppercase;letter-spacing:4px;font-weight:400;text-shadow:0 2px 4px rgba(255,255,255,.5);transition:opacity .3s}#instruction{position:absolute;top:20px;width:100%;text-align:center;color:#5a5550;font-size:12px;pointer-events:none;background:#ffffff4d;padding:8px 0;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}#loader{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;z-index:100;display:flex;justify-content:center;align-items:center;color:#cba135;font-family:serif;font-size:24px;transition:opacity .8s}.control-btn{position:absolute;bottom:30px;background:#ffffff1a;color:#d4af37;border:1px solid #d4af37;padding:10px 20px;border-radius:30px;cursor:pointer;font-family:serif;letter-spacing:1px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:50;transition:all .3s;text-transform:uppercase;font-size:12px}.control-btn:hover{background:#d4af37;color:#000}#thumb-toggle{right:30px}#mode-toggle{right:160px}#thumb-container{position:absolute;bottom:0;left:0;width:100%;height:220px;background:#000000d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:40;transform:translateY(100%);transition:transform .4s cubic-bezier(.23,1,.32,1);display:flex;flex-direction:column;border-top:1px solid #333}#thumb-container.active{transform:translateY(0)}#thumb-list{flex:1;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;padding:0 40px;gap:20px;scroll-behavior:smooth}#thumb-list::-webkit-scrollbar{height:8px}#thumb-list::-webkit-scrollbar-thumb{background:#333;border-radius:4px}#thumb-list::-webkit-scrollbar-track{background:#111}.thumbnail{flex-shrink:0;width:100px;height:140px;background:#222;border:2px solid #444;border-radius:4px;cursor:pointer;position:relative;transition:all .2s;overflow:hidden}.thumbnail:hover{transform:translateY(-5px);border-color:#d4af37}.thumbnail canvas{width:100%;height:100%;object-fit:cover}.thumb-label{position:absolute;bottom:0;width:100%;background:#000000b3;color:#ccc;font-size:10px;text-align:center;padding:4px 0}.thumbnail.current{border-color:#d4af37;box-shadow:0 0 10px #d4af3780}