*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#020202;font-family:Sora,Helvetica Neue,Arial,sans-serif;touch-action:none;user-select:none}#webgl{position:absolute;top:0;left:0;width:100%;height:100%;transition:opacity .5s ease}.rainbow-bar{width:28px;height:4px;border-radius:2px;background:linear-gradient(90deg,#ff006e,#ff7b00,#ffd60a,#06ffa5,#00b4d8,#7209b7 80%,#f72585);flex-shrink:0}#site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:24px 32px;pointer-events:auto;transition:opacity .4s ease}.header-left{display:flex;align-items:center;gap:12px}.header-right{display:flex;align-items:center;gap:12px;transition:opacity .4s ease}.icon-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.12);color:#ffffffbf;cursor:pointer;padding:0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .3s cubic-bezier(.16,1,.3,1);text-decoration:none}.icon-btn svg{width:20px;height:20px}.icon-btn:hover{background:#ffffff24;border-color:#ffffff4d;color:#fff;transform:translateY(-2px)}.icon-btn:active{transform:translateY(0) scale(.94)}#mode-toggle.on{color:#ffd166;border-color:#ffd1668c;background:#ffd1661f;box-shadow:0 0 18px #ffd16640,inset 0 0 8px #ffd1661f}.site-title{font-size:clamp(13px,2vw,15px);font-weight:600;letter-spacing:4px;text-transform:uppercase;color:#ffffffd9;text-shadow:0 1px 8px rgba(0,0,0,.5)}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:transparent;border:none;cursor:pointer;padding:0}.menu-toggle span{display:block;width:24px;height:2px;background:#fffc;border-radius:2px;transition:all .35s cubic-bezier(.16,1,.3,1)}.menu-toggle:hover span{background:#fff;width:28px}body.menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);width:26px}body.menu-open .menu-toggle span:nth-child(2){opacity:0}body.menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:26px}#menu-overlay{position:fixed;inset:0;background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:55;opacity:0;pointer-events:none;transition:opacity .4s ease}body.menu-open #menu-overlay{opacity:1;pointer-events:auto}#side-menu{position:fixed;top:0;right:0;width:360px;max-width:85vw;height:100%;z-index:60;background:linear-gradient(160deg,#0a0a12,#112);border-left:1px solid rgba(255,255,255,.08);transform:translate(100%);transition:transform .45s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;padding:28px;box-shadow:-10px 0 40px #00000080}body.menu-open #side-menu{transform:translate(0)}.menu-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px}.menu-brand{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;letter-spacing:4px;color:#ffffffd9;text-transform:uppercase}.menu-close{background:transparent;border:none;color:#fff9;font-size:22px;cursor:pointer;padding:4px 8px;transition:color .3s ease}.menu-close:hover{color:#fff}.menu-list{list-style:none;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.menu-list::-webkit-scrollbar{width:5px}.menu-list::-webkit-scrollbar-thumb{background:#ffffff29;border-radius:3px}.menu-list li{margin-bottom:4px}.menu-list a{display:flex;align-items:baseline;gap:14px;color:#ffffffb3;text-decoration:none;font-size:clamp(15px,2vw,18px);font-weight:300;letter-spacing:1px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);transition:all .25s ease}.menu-list a:hover{color:#fff;padding-left:8px;border-bottom-color:#fff3}.menu-list a.active{color:#fff}.menu-idx{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:1px;color:#ffffff59;flex-shrink:0;transition:color .25s ease}.menu-list a.active .menu-idx,.menu-list a:hover .menu-idx{color:#ffd166}.menu-footer{padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}.menu-footer p{color:#ffffff80;font-size:13px;letter-spacing:1px}.menu-sub{font-size:11px!important;opacity:.4;letter-spacing:3px;margin-top:4px}#simple-view{position:fixed;inset:0;z-index:4;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;background:linear-gradient(to bottom,#05070f,#08101f 28%,#0e1d42 52%,#1a356b 74%,#2b5394 90%,#3a66ae);opacity:0;pointer-events:none;transition:opacity .5s ease;color:#fff}body.simple-mode #simple-view{opacity:1;pointer-events:auto}.simple-inner{max-width:860px;margin:0 auto;padding:110px 32px 80px}.simple-label{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:4px;color:#ffffff80}.simple-heading{margin-top:10px;font-size:clamp(28px,5vw,44px);font-weight:300;letter-spacing:5px;text-shadow:0 2px 18px rgba(0,0,0,.35)}.simple-sub{margin-top:8px;font-size:13px;letter-spacing:3px;color:#fff9}#simple-grid{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.simple-card{display:block;text-align:left;padding:20px 22px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#ffffff0b;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);color:#fff;font-family:inherit}.simple-card:hover{transform:translateY(-3px);background:#ffffff1a;border-color:#ffffff47;box-shadow:0 10px 30px #00000059}.simple-card:active{transform:translateY(0) scale(.98)}.simple-card .sc-idx{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:2px;color:#ffffff73}.simple-card .sc-title{display:block;margin-top:8px;font-size:clamp(16px,2.2vw,19px);font-weight:400;letter-spacing:1px}.simple-card .sc-sub{display:block;margin-top:5px;font-size:12px;letter-spacing:2px;color:#ffffff8c}.simple-foot{margin-top:44px;text-align:center;font-size:11px;letter-spacing:3px;color:#ffffff73}body.simple-mode #webgl,body.simple-mode .nav-arrow,body.simple-mode #frame-info,body.simple-mode #indicators{opacity:0;pointer-events:none}body.simple-mode #hint{display:none}#loader{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;background:#020202;z-index:200;transition:opacity 1s ease}#loader span{width:12px;height:12px;border-radius:50%;background:#cdd3e2;box-shadow:0 0 18px #cdd3e2e6;animation:loaderPulse 1s ease-in-out infinite}@keyframes loaderPulse{0%,to{transform:scale(.6);opacity:.4}50%{transform:scale(1);opacity:1}}body.intro-pending #site-header,body.intro-pending .nav-arrow,body.intro-pending #frame-info,body.intro-pending #indicators,body.intro-pending #hint{opacity:0!important;pointer-events:none!important}.nav-arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:5;background:#0006;border:1px solid rgba(255,255,255,.15);color:#fffc;font-size:22px;width:52px;height:52px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .35s cubic-bezier(.16,1,.3,1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 16px #0000004d,inset 0 1px #ffffff14}.nav-arrow:hover{background:#ffffff1f;border-color:#ffffff4d;color:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 8px 32px #0006,inset 0 1px #ffffff26}.nav-arrow:active{transform:translateY(-50%) scale(.92)}.nav-prev{left:30px}.nav-next{right:30px}#frame-info{position:fixed;bottom:80px;left:50%;transform:translate(-50%);text-align:center;color:#fff;z-index:5;pointer-events:none;transition:opacity .4s ease;padding:18px 36px;border-radius:16px;background:#ffffff08;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.06)}#frame-title{font-size:clamp(18px,3.5vw,32px);font-weight:200;letter-spacing:6px;text-transform:uppercase;margin-bottom:6px;transition:opacity .4s ease;text-shadow:0 2px 12px rgba(255,255,255,.1)}#frame-subtitle{font-size:clamp(11px,2vw,14px);letter-spacing:4px;opacity:.5;text-transform:uppercase;font-weight:300}#indicators{position:fixed;bottom:40px;left:50%;transform:translate(-50%);display:flex;gap:10px;z-index:5;transition:opacity .4s ease}#indicators .dot{width:8px;height:8px;border-radius:50%;background:#fff3;transition:all .4s cubic-bezier(.16,1,.3,1);cursor:pointer;box-shadow:0 0 #fff0}#indicators .dot.active{background:#fffffff2;transform:scale(1.5);box-shadow:0 0 12px 2px #ffffff4d}#hint{position:fixed;bottom:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;color:#ffffff59;font-size:10px;letter-spacing:3px;text-transform:uppercase;z-index:5;pointer-events:none;transition:opacity .4s ease;animation:hintPulse 3s ease-in-out infinite}.hand-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}@keyframes hintPulse{0%,to{opacity:.3}50%{opacity:.7}}#detail{position:fixed;inset:0;z-index:6;opacity:0;pointer-events:none;transition:opacity .6s ease .35s;display:flex;flex-direction:column;justify-content:flex-end;padding:48px;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.65),transparent 50%)}body.detail-mode #detail{opacity:1;pointer-events:auto}#detail-back{position:absolute;top:30px;left:30px;background:#ffffff0f;border:1px solid rgba(255,255,255,.15);color:#fffc;padding:12px 22px;border-radius:28px;cursor:pointer;letter-spacing:3px;font-size:12px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .35s cubic-bezier(.16,1,.3,1);box-shadow:0 4px 16px #0000004d}#detail-back:hover{background:#ffffff24;border-color:#ffffff4d;color:#fff;transform:scale(1.05)}#detail-tags{font-family:JetBrains Mono,monospace;font-size:12px;letter-spacing:2px;color:#ffffff80;margin-bottom:12px;opacity:0;transform:translateY(10px);transition:all .5s ease .5s}body.detail-mode #detail-tags{opacity:1;transform:translateY(0)}#detail-title{font-size:clamp(26px,5vw,48px);font-weight:200;letter-spacing:8px;text-transform:uppercase;text-shadow:0 2px 20px rgba(255,255,255,.08);opacity:0;transform:translateY(15px);transition:all .5s ease .6s}body.detail-mode #detail-title{opacity:1;transform:translateY(0)}#detail-subtitle{margin-top:6px;letter-spacing:4px;opacity:0;text-transform:uppercase;font-size:clamp(12px,2vw,15px);color:#fff9;transform:translateY(10px);transition:all .5s ease .7s}body.detail-mode #detail-subtitle{opacity:1;transform:translateY(0)}#detail-desc{margin-top:16px;max-width:560px;line-height:1.8;opacity:0;font-size:clamp(13px,2vw,15px);color:#ffffffbf;transform:translateY(10px);transition:all .5s ease .8s}body.detail-mode #detail-desc{opacity:1;transform:translateY(0)}#detail-link{display:inline-block;margin-top:20px;color:#ffffffe6;text-decoration:none;font-size:14px;letter-spacing:2px;padding:10px 24px;border:1px solid rgba(255,255,255,.25);border-radius:24px;opacity:0;transform:translateY(10px);transition:all .5s ease .9s,background .3s ease,border-color .3s ease}body.detail-mode #detail-link{opacity:1;transform:translateY(0)}#detail-link:hover{background:#ffffff1a;border-color:#fff6}body.detail-mode .nav-arrow,body.detail-mode #frame-info,body.detail-mode #indicators,body.detail-mode #site-header{opacity:0;pointer-events:none}body.detail-mode #hint{display:none}@media(max-width:768px){#site-header{padding:calc(14px + env(safe-area-inset-top,0px)) 20px 14px}.nav-arrow{width:44px;height:44px;font-size:18px}.nav-prev{left:16px}.nav-next{right:16px}#frame-info{bottom:calc(70px + env(safe-area-inset-bottom,0px));padding:14px 24px}#frame-title{letter-spacing:3px}#frame-subtitle{letter-spacing:2px}#indicators{bottom:calc(30px + env(safe-area-inset-bottom,0px))}#hint{bottom:calc(10px + env(safe-area-inset-bottom,0px));font-size:9px;gap:8px}.hand-icon{width:14px;height:14px}#detail{padding:28px}#detail-back{top:20px;left:20px}#detail-title{letter-spacing:4px}#simple-grid{grid-template-columns:1fr;gap:12px}.simple-inner{padding:calc(90px + env(safe-area-inset-top,0px)) 20px 70px}.header-left,.header-right{gap:8px}.icon-btn{width:38px;height:38px}.site-title{letter-spacing:2px}}#course-page{--course-accent: #ffd166;position:fixed;inset:0;z-index:8;opacity:0;pointer-events:none;transform:translateY(4vh);transition:opacity .65s ease,transform .65s cubic-bezier(.16,1,.3,1);color:#fff}body.course-mode #course-page{opacity:1;pointer-events:auto;transform:translateY(0)}#course-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}.course-inner{max-width:760px;margin:0 auto;padding:110px 40px 90px}#course-no{font-family:JetBrains Mono,monospace;font-size:12px;letter-spacing:4px;color:#ffffff8c;margin-bottom:18px}#course-title{font-size:clamp(30px,5.4vw,54px);font-weight:300;letter-spacing:4px;line-height:1.3;text-shadow:0 2px 24px rgba(0,0,0,.35)}#course-keyword{margin-top:14px;font-size:clamp(12px,1.8vw,15px);letter-spacing:3px;color:#ffffffa6}.course-section{margin-top:52px}.course-section h3{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;letter-spacing:6px;text-transform:uppercase;color:#ffffffd9;margin-bottom:18px}.course-section h3:before{content:"";width:26px;height:3px;border-radius:2px;background:var(--course-accent);box-shadow:0 0 12px var(--course-accent);flex-shrink:0}.course-section p,#course-theory p{font-size:clamp(14px,1.9vw,16px);line-height:2;color:#ffffffdb;text-align:justify}#course-theory p+p{margin-top:16px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.15)}#course-question{font-size:clamp(16px,2.4vw,20px)!important;font-weight:300;color:#fff!important;padding:18px 24px;border-left:3px solid var(--course-accent);background:#0000002e;border-radius:0 12px 12px 0}#course-imagery{font-style:italic;color:#ffffffc7!important}.course-footnote{margin-top:64px;text-align:center;font-size:12px;letter-spacing:3px;color:#fff6}#course-back{position:absolute;top:30px;left:30px;z-index:9;background:#00000040;border:1px solid rgba(255,255,255,.25);color:#ffffffe6;padding:12px 22px;border-radius:28px;cursor:pointer;letter-spacing:3px;font-size:12px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .35s cubic-bezier(.16,1,.3,1);box-shadow:0 4px 16px #0000004d}#course-back:hover{background:#ffffff2e;border-color:#ffffff73;transform:scale(1.05)}body.course-mode #detail{opacity:0;pointer-events:none}@media(max-width:768px){.course-inner{padding:90px 22px 70px}#course-back{top:20px;left:20px}#course-title{letter-spacing:2px}.course-section{margin-top:40px}}#next-hint{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%) translateY(10px);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:9;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}#next-hint.visible{opacity:1;transform:translate(-50%) translateY(0)}.next-hint-arrow{font-size:17px;line-height:1;color:var(--course-accent, #ffd166);animation:nextBounce 1s ease-in-out infinite}.next-hint-label{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#ffffffc7;text-shadow:0 1px 8px rgba(0,0,0,.4)}.next-hint-track{width:130px;height:3px;border-radius:2px;background:#ffffff29;overflow:hidden}#next-hint-bar{display:block;width:100%;height:100%;background:var(--course-accent, #ffd166);box-shadow:0 0 8px var(--course-accent, #ffd166);transform:scaleX(0);transform-origin:left center;transition:transform .08s linear}@keyframes nextBounce{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}#course-page.course-switch .course-inner{animation:courseSwitch .55s cubic-bezier(.16,1,.3,1)}@keyframes courseSwitch{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}body.simple-mode .header-right{opacity:0;pointer-events:none}#simple-tabs{display:flex;gap:10px;margin:14px 0 6px}.simple-tab{padding:8px 22px;border-radius:22px;border:1px solid rgba(255,255,255,.22);background:#ffffff0d;color:#ffffffa6;font-size:14px;letter-spacing:4px;cursor:pointer;transition:all .3s ease}.simple-tab:hover{border-color:#ffffff73;color:#ffffffe6}.simple-tab.active{background:#ffffffeb;border-color:transparent;color:#101018;font-weight:600}@media(min-width:1100px)and (min-height:700px){#site-header,.nav-arrow,#frame-info,#indicators,#hint,#open-hint,#detail,#course-page,#simple-view,#side-menu,#about-page{zoom:1.22}}@media(min-width:1800px)and (min-height:1000px){#site-header,.nav-arrow,#frame-info,#indicators,#hint,#open-hint,#detail,#course-page,#simple-view,#side-menu,#about-page{zoom:1.45}}#open-hint{position:fixed;left:50%;bottom:5.5vh;transform:translate(-50%);z-index:90;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none;opacity:0;transition:opacity .6s ease}body.intro-armed #open-hint{opacity:1}.oh-ring{width:14px;height:14px;border-radius:50%;border:2px solid rgba(205,211,226,.9);box-shadow:0 0 16px #cdd3e273;animation:ohPulse 1.6s ease-in-out infinite}@keyframes ohPulse{0%,to{transform:scale(.7);opacity:.5}50%{transform:scale(1.15);opacity:1}}#open-hint p{color:#ffffffa6;font-size:12px;letter-spacing:6px;text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.6);animation:ohTextFade 1.6s ease-in-out infinite}#open-hint p.oh-sub{font-size:10px;letter-spacing:3px;color:#ffffff61;animation:none}#reel-dots{display:flex;gap:10px;margin-bottom:4px;pointer-events:auto}.reel-dot{padding:6px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.28);background:#0a0e1a59;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#ffffff8c;font-size:12px;letter-spacing:4px;cursor:pointer;transition:all .3s ease}.reel-dot:hover{border-color:#ffffff8c;color:#ffffffd9}.reel-dot.active{background:#ebeef8eb;border-color:transparent;color:#101018;font-weight:600}@keyframes ohTextFade{0%,to{opacity:.55}50%{opacity:1}}@media(max-width:768px){#open-hint{bottom:calc(4.5vh + env(safe-area-inset-bottom,0px))}#open-hint p{font-size:11px;letter-spacing:4px}}