class-studys 7.0.1 → 7.0.2

package/index.html

@@ -21,8 +21,8 @@ button{font-family:inherit;cursor:pointer;border:none;background:none;color:inhe
 /* ---------- particles ---------- */
 #particles{position:fixed;inset:0;z-index:0;pointer-events:none}
 
-/* ---------- ambient glow (tiny bit of orange) ---------- */
-.glow{position:fixed;z-index:0;pointer-events:none;filter:blur(120px);opacity:.14;border-radius:50%;
+/* ---------- ambient glow ---------- */
+.glow{position:fixed;z-index:0;pointer-events:none;filter:blur(120px);opacity:.13;border-radius:50%;
   background:var(--accent);animation:glowFloat 14s ease-in-out infinite alternate}
 .glow.g1{width:55vw;height:55vw;top:-20vw;right:-15vw}
 .glow.g2{width:40vw;height:40vw;bottom:-15vw;left:-10vw;animation-delay:-7s}
@@ -41,91 +41,123 @@ button{font-family:inherit;cursor:pointer;border:none;background:none;color:inhe
 .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
   background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 40%,transparent 70%,rgba(255,255,255,.05))}
 
-/* ---------- HOME ---------- */
-#home{padding:6vh 6vw 150px;overflow-y:auto;scrollbar-width:none;align-items:center;text-align:center;display:flex;flex-direction:column}
+/* ============================================================
+   HOME — left-aligned hero, long scrollable page
+============================================================ */
+#home{overflow-y:auto;scrollbar-width:none;display:block;padding:0}
+#proxy{padding:0}
+#proxyFrame{flex:1;width:100%;height:100%;border:none;background:#000}
 #home::-webkit-scrollbar{display:none}
-.home-left{max-width:900px;width:100%;display:flex;flex-direction:column;align-items:center;animation:riseIn 1s cubic-bezier(.22,1,.36,1) both}
-@keyframes riseIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
+
+.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
+  padding:12vh 7vw 10vh;position:relative;text-align:left;overflow:hidden}
+/* left edge accent beam */
+.hero::before{content:"";position:absolute;left:0;top:15%;bottom:15%;width:3px;border-radius:3px;
+  background:linear-gradient(180deg,transparent,var(--accent),transparent);
+  animation:beamPulse 4s ease-in-out infinite;opacity:.7}
+@keyframes beamPulse{0%,100%{opacity:.35;filter:blur(1px)}50%{opacity:.9;filter:blur(0)}}
+
 .os-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:99px;
   font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);
-  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);margin-bottom:24px;
-  animation:pulseBadge 3s ease-in-out infinite}
+  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);margin-bottom:26px;
+  animation:slideLeft .8s cubic-bezier(.22,1,.36,1) both, pulseBadge 3s ease-in-out infinite 1s}
+@keyframes slideLeft{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
 @keyframes pulseBadge{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 35%,transparent)}
   50%{box-shadow:0 0 24px 4px color-mix(in srgb,var(--accent) 25%,transparent)}}
 .os-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:blink 1.6s infinite}
 @keyframes blink{50%{opacity:.25}}
-#bigTitle{font-size:clamp(56px,9vw,124px);font-weight:800;line-height:.95;letter-spacing:-.03em;
-  background:linear-gradient(180deg,#fff 30%,#8a8a8a);-webkit-background-clip:text;background-clip:text;
-  -webkit-text-fill-color:transparent;animation:titleShimmer 6s ease-in-out infinite}
-#bigTitle span{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff));
-  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
-@keyframes titleShimmer{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 34px color-mix(in srgb,var(--accent) 30%,transparent))}}
-#rotator{height:28px;margin-top:22px;font-size:clamp(15px,1.6vw,20px);color:#9a9a9a;overflow:hidden;position:relative;width:100%}
-#rotator .line{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;
-  opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s cubic-bezier(.22,1,.36,1)}
+
+#bigTitle{font-size:clamp(60px,10vw,138px);font-weight:800;line-height:.93;letter-spacing:-.035em;
+  display:flex;flex-direction:column;align-items:flex-start}
+#bigTitle {
+  font-size: clamp(60px, 10vw, 138px);
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.035em;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.2em;
+  white-space: nowrap;
+}
+
+#rotator{height:30px;margin-top:26px;font-size:clamp(15px,1.6vw,20px);color:#9a9a9a;overflow:hidden;position:relative;width:min(560px,80vw)}
+#rotator .line{position:absolute;inset:0;display:flex;align-items:center;gap:10px;
+  opacity:0;transform:translateY(26px);transition:opacity .6s,transform .6s cubic-bezier(.22,1,.36,1)}
 #rotator .line.on{opacity:1;transform:none}
-#rotator .line.off{opacity:0;transform:translateY(-24px)}
-#rotator .tick{width:22px;height:2px;background:var(--accent);border-radius:2px;flex:none}
+#rotator .line.off{opacity:0;transform:translateY(-26px)}
+#rotator .tick{width:22px;height:2px;background:var(--accent);border-radius:2px;flex:none;
+  box-shadow:0 0 10px var(--accent)}
 
-/* home widget row */
-.widget-row{display:flex;gap:16px;margin-top:44px;flex-wrap:wrap;justify-content:center;animation:riseIn 1.1s .15s cubic-bezier(.22,1,.36,1) both}
+/* widget row */
+.widget-row{display:flex;gap:16px;margin-top:48px;flex-wrap:wrap;animation:slideLeft 1s .55s cubic-bezier(.22,1,.36,1) both}
 .widget{padding:18px 22px;display:flex;align-items:center;gap:16px;min-width:200px;
+  animation:floaty 5.5s ease-in-out infinite;animation-delay:var(--fd,0s);
   transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
-.widget:hover{transform:translateY(-5px);box-shadow:0 16px 44px rgba(0,0,0,.6),0 0 30px color-mix(in srgb,var(--accent) 12%,transparent)}
+.widget:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 16px 44px rgba(0,0,0,.6),0 0 30px color-mix(in srgb,var(--accent) 14%,transparent)}
+@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -7px}}
 .widget .wicon{font-size:30px;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--accent) 45%,transparent))}
 .widget .wlabel{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#888}
 .widget .wvalue{font-size:20px;font-weight:700;margin-top:2px}
-/* battery ring */
 .ring{transform:rotate(-90deg)}
 .ring .bg{stroke:rgba(255,255,255,.1)}
-.ring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1)}
+.ring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1);
+  filter:drop-shadow(0 0 6px var(--accent))}
 
-/* home nav */
-.home-nav{display:flex;gap:14px;margin-top:46px;flex-wrap:wrap;justify-content:center;animation:riseIn 1.2s .3s cubic-bezier(.22,1,.36,1) both}
-.nav-btn{padding:14px 30px;border-radius:18px;font-size:15px;font-weight:600;letter-spacing:.04em;
+/* nav */
+.home-nav{display:flex;gap:14px;margin-top:50px;flex-wrap:wrap;animation:slideLeft 1.1s .7s cubic-bezier(.22,1,.36,1) both}
+.nav-btn{padding:15px 30px;border-radius:18px;font-size:15px;font-weight:600;letter-spacing:.04em;
   display:flex;align-items:center;gap:10px;transition:all .3s cubic-bezier(.22,1,.36,1)}
 .nav-btn:hover{transform:translateY(-4px) scale(1.03);border-color:color-mix(in srgb,var(--accent) 55%,transparent);
   box-shadow:0 12px 34px rgba(0,0,0,.55),0 0 26px color-mix(in srgb,var(--accent) 18%,transparent)}
 .nav-btn .arr{transition:transform .3s}
-.nav-btn:hover .arr{transform:translateX(5px)}
+.nav-btn:hover .arr{transform:translateX(6px)}
 .nav-btn.primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000));
   color:#0a0a0a;box-shadow:0 8px 26px color-mix(in srgb,var(--accent) 35%,transparent)}
 
-/* ---------- home library marquee ---------- */
-.library{width:100%;max-width:1200px;margin-top:80px;display:flex;flex-direction:column;gap:20px;
-  animation:riseIn 1.3s .4s cubic-bezier(.22,1,.36,1) both}
-.library .lib-head{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:#666;
-  display:flex;align-items:center;justify-content:center;gap:16px}
-.library .lib-head::before,.library .lib-head::after{content:"";width:70px;height:1px;
-  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25))}
-.library .lib-head::after{background:linear-gradient(90deg,rgba(255,255,255,.25),transparent)}
-.rail-window{overflow:hidden;width:100%;position:relative;padding:6px 0;
+/* scroll cue */
+.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;
+  align-items:center;gap:6px;color:#666;font-size:10px;letter-spacing:.35em;text-transform:uppercase;
+  animation:fadeIn 1.4s 1.6s both}
+.scroll-cue .chev{width:12px;height:12px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
+  transform:rotate(45deg);animation:chevBounce 1.6s ease-in-out infinite}
+@keyframes chevBounce{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5}50%{transform:rotate(45deg) translate(5px,5px);opacity:1}}
+@keyframes fadeIn{from{opacity:0}to{opacity:1}}
+
+/* ---------- library marquee ---------- */
+.library{width:100%;padding:9vh 0 16vh;display:flex;flex-direction:column;gap:24px;
+  animation:fadeIn 1s both}
+.library .lib-title{padding:0 7vw;font-size:clamp(28px,4vw,48px);font-weight:800;letter-spacing:-.02em;display:flex;align-items:baseline;gap:16px}
+.library .lib-title em{font-style:normal;color:var(--accent)}
+.library .lib-title .n{font-size:13px;color:#666;font-weight:600;letter-spacing:.2em}
+.library .lib-sub{padding:0 7vw;color:#777;font-size:14px;margin-top:-12px}
+.rail-window{overflow:hidden;width:100%;position:relative;padding:8px 0;
   -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
   mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
-.rail-track{display:flex;gap:18px;width:max-content;padding-right:18px;
-  animation:railScroll 42s linear infinite}
-.rail-track.rev{animation-direction:reverse;animation-duration:50s}
+.rail-track{display:flex;gap:20px;width:max-content;padding-right:20px;animation:railScroll 42s linear infinite}
+.rail-track.rev{animation-direction:reverse;animation-duration:52s}
 .rail-window:hover .rail-track{animation-play-state:paused}
 @keyframes railScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
-.rail-game{width:92px;height:92px;flex:none;border-radius:24px;overflow:hidden;
+.rail-game{width:96px;height:96px;flex:none;border-radius:26px;overflow:hidden;
   position:relative;border:1px solid var(--glass-border);cursor:pointer;
-  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
-.rail-game:hover{transform:scale(1.15) rotate(-3deg);box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 24px var(--gc,#ff6b1a)}
+  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;animation:floaty 6s ease-in-out infinite;animation-delay:var(--fd,0s)}
+.rail-game:hover{transform:scale(1.16) rotate(-4deg);animation-play-state:paused;
+  box-shadow:0 12px 34px rgba(0,0,0,.65),0 0 26px var(--gc,#ff6b1a)}
 .rail-game img{width:100%;height:100%;object-fit:cover;display:block}
 
-/* ---------- section headers (games / movies) ---------- */
+/* section headers */
 .hub{padding:34px 5vw 130px;overflow-y:auto;scrollbar-width:none}
 .hub::-webkit-scrollbar{display:none}
 .hub-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:34px;
-  animation:riseIn .7s cubic-bezier(.22,1,.36,1) both}
+  animation:slideLeft .7s cubic-bezier(.22,1,.36,1) both}
 .hub-head h2{font-size:clamp(34px,4.5vw,58px);font-weight:800;letter-spacing:-.02em}
 .hub-head h2 em{font-style:normal;color:var(--accent)}
 .hub-head .count{font-size:13px;color:#777;letter-spacing:.15em;text-transform:uppercase}
 
-/* games grid: rows of 5, icons only */
+/* games grid: rows of 5 */
 .games-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
 @media(max-width:1100px){.games-grid{grid-template-columns:repeat(4,1fr)}}
-@media(max-width:800px){.games-grid{grid-template-columns:repeat(3,1fr)}}
+@media(max-width:800px){.games-grid{grid-template-columns:repeat(3,1fr)}.hero{padding:10vh 6vw}}
 @media(max-width:520px){.games-grid{grid-template-columns:repeat(2,1fr)}}
 .game-tile{aspect-ratio:1;border-radius:26px;overflow:hidden;position:relative;cursor:pointer;
   border:1px solid var(--glass-border);
@@ -153,7 +185,7 @@ button{font-family:inherit;cursor:pointer;border:none;background:none;color:inhe
 .game-tile .feat-tag{position:absolute;top:10px;left:10px;background:var(--accent);color:#000;
   font-size:9px;font-weight:800;letter-spacing:.12em;padding:4px 9px;border-radius:8px}
 
-/* movies grid: no names */
+/* movies */
 .movies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:26px}
 .movie-tile{border-radius:20px;overflow:hidden;cursor:pointer;position:relative;aspect-ratio:2/3;
   border:1px solid var(--glass-border);
@@ -169,24 +201,25 @@ button{font-family:inherit;cursor:pointer;border:none;background:none;color:inhe
   filter:drop-shadow(0 0 14px var(--accent));transition:transform .3s}
 .movie-tile:hover .tri{transform:scale(1.2)}
 
-/* ---------- play modal ---------- */
+/* play modal */
 #playModal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
   background:rgba(0,0,0,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
 #playModal.open{display:flex;animation:fadeIn .3s ease}
-@keyframes fadeIn{from{opacity:0}to{opacity:1}}
 .play-shell{width:min(1100px,94vw);height:min(86vh,90vh);border-radius:26px;overflow:hidden;
-  display:flex;flex-direction:column;border:1px solid var(--glass-border);
-  background:#0a0a0a;box-shadow:0 40px 120px rgba(0,0,0,.8),0 0 60px color-mix(in srgb,var(--accent) 10%,transparent);
+  display:flex;flex-direction:column;border:1px solid var(--glass-border);background:#0a0a0a;
+  box-shadow:0 40px 120px rgba(0,0,0,.8),0 0 60px color-mix(in srgb,var(--accent) 10%,transparent);
   animation:popIn .45s cubic-bezier(.34,1.56,.64,1)}
 @keyframes popIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
 .play-bar{display:flex;align-items:center;gap:14px;padding:12px 18px;
   background:rgba(255,255,255,.04);border-bottom:1px solid var(--glass-border)}
-.play-bar .ttl{font-weight:700;font-size:15px;letter-spacing:.02em;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.play-bar .ttl{font-weight:700;font-size:15px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .play-bar .live{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.4s infinite;flex:none}
 .play-bar button{padding:8px 18px;border-radius:12px;font-size:13px;font-weight:700;
   background:rgba(255,255,255,.08);border:1px solid var(--glass-border);transition:all .25s}
 .play-bar button:hover{background:var(--accent);color:#000}
 #playFrame{flex:1;width:100%;border:none;background:#000}
+.play-shell:fullscreen{width:100vw;height:100vh;border-radius:0}
+.play-shell:fullscreen .play-bar{padding:14px 22px}
 .play-loading{position:absolute;inset:44px 0 0;display:flex;flex-direction:column;gap:18px;
   align-items:center;justify-content:center;background:#0a0a0a;transition:opacity .4s;z-index:2}
 .play-loading.gone{opacity:0;pointer-events:none}
@@ -194,9 +227,10 @@ button{font-family:inherit;cursor:pointer;border:none;background:none;color:inhe
   border-top-color:var(--accent);animation:spin 1s linear infinite}
 @keyframes spin{to{transform:rotate(360deg)}}
 
-/* ---------- bottom nav ---------- */
+/* dock */
 #dock{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:20;display:flex;gap:6px;
   padding:8px;border-radius:24px;animation:riseIn 1s .5s cubic-bezier(.22,1,.36,1) both}
+@keyframes riseIn{from{opacity:0;transform:translate(-50%,40px)}to{opacity:1;transform:translate(-50%,0)}}
 .dock-btn{padding:12px 22px;border-radius:17px;font-size:14px;font-weight:600;color:#aaa;
   display:flex;align-items:center;gap:8px;transition:all .3s cubic-bezier(.22,1,.36,1);position:relative}
 .dock-btn:hover{color:#fff;transform:translateY(-3px)}
@@ -204,7 +238,7 @@ button{font-family:inherit;cursor:pointer;border:none;background:none;color:inhe
   box-shadow:0 6px 22px color-mix(in srgb,var(--accent) 40%,transparent)}
 .dock-btn .dicon{font-size:16px}
 
-/* ---------- settings ---------- */
+/* settings */
 #settingsModal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
   background:rgba(0,0,0,.7);backdrop-filter:blur(14px)}
 #settingsModal.open{display:flex;animation:fadeIn .25s ease}
@@ -226,10 +260,31 @@ input[type=text],input[type=range]{accent-color:var(--accent)}
   padding:10px 14px;border-radius:12px;font-size:14px;width:170px;outline:none;transition:border .25s}
 .set-input:focus{border-color:var(--accent)}
 
+/* ---------- TOUR ---------- */
+#tour{position:fixed;inset:0;z-index:80;display:none}
+#tour.open{display:block}
+#tour .dim{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);animation:fadeIn .3s}
+.tour-card{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);width:min(440px,90vw);
+  padding:26px 28px;animation:popIn .45s cubic-bezier(.34,1.56,.64,1)}
+.tour-card .step-n{font-size:10px;letter-spacing:.3em;color:var(--accent);font-weight:800;text-transform:uppercase}
+.tour-card h4{font-size:20px;font-weight:800;margin:8px 0 8px}
+.tour-card p{font-size:14px;color:#b5b5b5;line-height:1.6}
+.tour-card .tour-nav{display:flex;gap:10px;margin-top:20px;align-items:center}
+.tour-card .tour-nav .prog{flex:1;display:flex;gap:6px}
+.tour-card .tour-nav .prog i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.14);transition:background .3s}
+.tour-card .tour-nav .prog i.on{background:var(--accent);box-shadow:0 0 8px var(--accent)}
+.tour-btn{padding:10px 20px;border-radius:13px;font-size:13px;font-weight:700;
+  background:rgba(255,255,255,.08);border:1px solid var(--glass-border);transition:all .25s}
+.tour-btn.next{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 75%,#000));color:#0a0a0a;border:none}
+.tour-btn:hover{transform:translateY(-2px)}
+.tour-spot{position:absolute;z-index:81;border-radius:28px;pointer-events:none;
+  box-shadow:0 0 0 3px var(--accent),0 0 44px 6px color-mix(in srgb,var(--accent) 45%,transparent);
+  animation:spotPulse 1.6s ease-in-out infinite;transition:all .5s cubic-bezier(.22,1,.36,1)}
+@keyframes spotPulse{0%,100%{opacity:.85}50%{opacity:1}}
+
 /* ---------- AI ---------- */
-#ai{padding:0}
 .ai-wrap{flex:1;display:flex;flex-direction:column;max-width:900px;width:100%;margin:0 auto;padding:30px 4vw 120px}
-.ai-head{display:flex;align-items:center;gap:16px;margin-bottom:20px;animation:riseIn .6s both}
+.ai-head{display:flex;align-items:center;gap:16px;margin-bottom:20px;animation:slideLeft .6s both}
 .ai-orb{width:52px;height:52px;border-radius:50%;flex:none;position:relative;
   background:radial-gradient(circle at 32% 30%,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent) 45%,#3a1500);
   animation:orbFloat 4s ease-in-out infinite;box-shadow:0 0 34px color-mix(in srgb,var(--accent) 45%,transparent)}
@@ -249,7 +304,6 @@ input[type=text],input[type=range]{accent-color:var(--accent)}
 .msg.bot{align-self:flex-start;background:var(--glass);backdrop-filter:blur(20px);
   border:1px solid var(--glass-border);border-bottom-left-radius:6px}
 .msg.bot .who{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:6px}
-/* code widget */
 .code-widget{margin:12px 0;border-radius:16px;overflow:hidden;border:1px solid var(--glass-border);
   background:#0b0b0f;box-shadow:0 8px 24px rgba(0,0,0,.4)}
 .code-head{display:flex;align-items:center;gap:10px;padding:9px 14px;background:rgba(255,255,255,.05);
@@ -271,7 +325,8 @@ input[type=text],input[type=range]{accent-color:var(--accent)}
 .typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
 @keyframes tp{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-7px);opacity:1}}
 #aiInputBar{display:flex;gap:12px;margin-top:18px;padding:10px 10px 10px 22px;align-items:center;
-  animation:riseIn .8s .2s both}
+  animation:riseInDock .8s .2s both}
+@keyframes riseInDock{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
 #aiInput{flex:1;background:none;border:none;outline:none;color:#fff;font-size:15px;font-family:inherit}
 #aiInput::placeholder{color:#666}
 #sendBtn{width:48px;height:48px;border-radius:16px;flex:none;display:flex;align-items:center;justify-content:center;
@@ -283,14 +338,14 @@ input[type=text],input[type=range]{accent-color:var(--accent)}
   color:#aaa;background:rgba(255,255,255,.04);transition:all .25s}
 .chip:hover{color:#fff;border-color:var(--accent);transform:translateY(-2px)}
 
-/* toast */
 #toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);z-index:99;opacity:0;
-  background:rgba(15,15,15,.9);backdrop-filter:blur(14px);border:1px solid var(--glass-border);
+  background:rgba(15,15,10,.92);backdrop-filter:blur(14px);border:1px solid var(--glass-border);
   padding:11px 22px;border-radius:14px;font-size:13px;font-weight:600;pointer-events:none;
   transition:all .35s cubic-bezier(.22,1,.36,1)}
 #toast.on{opacity:1;transform:translate(-50%,0)}
 </style>
 <base target="_blank">
+<base target="_blank">
 </head>
 <body>
 
@@ -300,17 +355,20 @@ input[type=text],input[type=range]{accent-color:var(--accent)}
 
 <!-- ============ HOME ============ -->
 <div class="screen active" id="home">
-  <div class="home-left">
-    <div class="os-badge"><span class="dot"></span>IGNITE OS · v2.0</div>
-    <h1 id="bigTitle">IGNITE<br><span>OS</span></h1>
+  <div class="hero" id="hero">
+    <div class="os-badge"><span class="dot"></span>IGNITE OS · v2.1</div>
+    <h1 id="bigTitle">
+      <span class="row" data-txt="IGNITE"></span>
+      <span class="row os" data-txt="OS"></span>
+    </h1>
     <div id="rotator"></div>
 
-    <div class="widget-row">
-      <div class="widget glass">
+    <div class="widget-row" id="widgetRow">
+      <div class="widget glass" style="--fd:0s">
         <div class="wicon" id="wIcon">⛅</div>
         <div><div class="wlabel">Weather</div><div class="wvalue" id="wVal">--°</div></div>
       </div>
-      <div class="widget glass">
+      <div class="widget glass" style="--fd:1.4s">
         <svg class="ring" width="52" height="52" viewBox="0 0 52 52">
           <circle class="bg" cx="26" cy="26" r="21" fill="none" stroke-width="5"/>
           <circle class="fg" id="battRing" cx="26" cy="26" r="21" fill="none" stroke-width="5"
@@ -318,7 +376,7 @@ input[type=text],input[type=range]{accent-color:var(--accent)}
         </svg>
         <div><div class="wlabel">Battery</div><div class="wvalue" id="battVal">--%</div></div>
       </div>
-      <div class="widget glass">
+      <div class="widget glass" style="--fd:2.8s">
         <div class="wicon">🕒</div>
         <div><div class="wlabel">Time</div><div class="wvalue" id="clockVal">--:--</div></div>
       </div>
@@ -329,17 +387,19 @@ input[type=text],input[type=range]{accent-color:var(--accent)}
       <button class="nav-btn glass" onclick="go('movies')">Movies <span class="arr">→</span></button>
       <button class="nav-btn glass" onclick="go('ai')">Ask IGNITE AI <span class="arr">→</span></button>
     </div>
+
+    <div class="scroll-cue"><span>Scroll</span><div class="chev"></div></div>
   </div>
 
   <!-- library marquee -->
-  <div class="library">
-    <div class="lib-head">Game Library · hover to pause · click to play</div>
+  <div class="library" id="librarySec">
+    <div class="lib-title">Game <em>Library</em> <span class="n">20 TITLES</span></div>
+    <div class="lib-sub">Auto-scrolling · hover to pause · click any icon to play instantly</div>
     <div class="rail-window"><div class="rail-track" id="railTrack"></div></div>
     <div class="rail-window"><div class="rail-track rev" id="railTrack2"></div></div>
   </div>
 </div>
 
-
 <!-- ============ GAMES HUB ============ -->
 <div class="screen" id="games">
   <div class="hub">
@@ -373,7 +433,7 @@ input[type=text],input[type=range]{accent-color:var(--accent)}
       </div>
     </div>
     <div id="chatLog"></div>
-    <div class="chips" id="chips">
+    <div class="chips">
       <button class="chip" onclick="quickAsk('Write a Python script that sorts a list and explain it')">💻 Give me code</button>
       <button class="chip" onclick="quickAsk('Explain quantum computing simply')">🧠 Teach me something</button>
       <button class="chip" onclick="quickAsk('Help me build a game in JavaScript')">🎮 Build a game</button>
@@ -385,13 +445,20 @@ input[type=text],input[type=range]{accent-color:var(--accent)}
   </div>
 </div>
 
+<!-- ============ PROXY ============ -->
+<div class="screen" id="proxy">
+  <iframe id="proxyFrame" src="about:blank"
+    sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"></iframe>
+</div>
+
 <!-- ============ DOCK ============ -->
 <nav id="dock" class="glass">
   <button class="dock-btn on" data-s="home" onclick="go('home')"><span class="dicon">⌂</span>Home</button>
   <button class="dock-btn" data-s="games" onclick="go('games')"><span class="dicon">🎮</span>Games</button>
   <button class="dock-btn" data-s="movies" onclick="go('movies')"><span class="dicon">🎬</span>Movies</button>
   <button class="dock-btn" data-s="ai" onclick="go('ai')"><span class="dicon">✦</span>AI</button>
-  <button class="dock-btn" onclick="openSettings()"><span class="dicon">⚙</span></button>
+  <button class="dock-btn" data-s="proxy" onclick="go('proxy')"><span class="dicon">🧭</span>Proxy</button>
+  <button class="dock-btn" id="settingsBtn" onclick="openSettings()"><span class="dicon">⚙</span></button>
 </nav>
 
 <!-- ============ PLAY MODAL ============ -->
@@ -400,11 +467,12 @@ input[type=text],input[type=range]{accent-color:var(--accent)}
     <div class="play-bar">
       <span class="live"></span>
       <span class="ttl" id="playTitle">Now Playing</span>
+      <button onclick="toggleFullScreen()" title="Fullscreen">⛶ Fullscreen</button>
       <button onclick="closePlay()">✕ Close</button>
     </div>
     <div style="position:relative;flex:1;display:flex">
       <div class="play-loading" id="playLoading"><div class="spinner"></div><div style="color:#888;font-size:13px">Loading…</div></div>
-      <iframe id="playFrame" allowfullscreen sandbox="allow-scripts allow-same-origin allow-forms allow-popups-to-escape-sandbox"></iframe>
+      <iframe id="playFrame" allowfullscreen sandbox="allow-scripts allow-same-origin allow-forms allow-fullscreen allow-popups-to-escape-sandbox"></iframe>
     </div>
   </div>
 </div>
@@ -413,7 +481,7 @@ input[type=text],input[type=range]{accent-color:var(--accent)}
 <div id="settingsModal" onclick="if(event.target===this)closeSettings()">
   <div class="settings-card glass">
     <h3>Settings</h3>
-    <div class="sub">Customize IGNITE OS — accent color, weather & particles.</div>
+    <div class="sub">Customize IGNITE OS — accent color, weather, particles & AI.</div>
 
     <div class="set-row">
       <div><div class="lbl">Accent Color</div><div class="hint">The tiny bit of orange — make it yours.</div></div>
@@ -431,10 +499,15 @@ input[type=text],input[type=range]{accent-color:var(--accent)}
     </div>
 
     <div class="set-row">
-      <div><div class="lbl">AI Model</div><div class="hint">Switch the brain behind IGNITE AI.</div></div>
+      <div><div class="lbl">AI Model</div><div class="hint">Which OpenAI model IGNITE AI uses.</div></div>
       <input class="set-input" id="modelInput" type="text" placeholder="model name">
     </div>
 
+    <div class="set-row">
+      <div><div class="lbl">Beginner Tour</div><div class="hint">Replay the welcome walkthrough.</div></div>
+      <button class="tour-btn" onclick="closeSettings();startTour()">▶ Replay</button>
+    </div>
+
     <div style="display:flex;gap:12px;margin-top:26px">
       <button class="nav-btn primary glass" style="flex:1;justify-content:center" onclick="saveSettings()">Save</button>
       <button class="nav-btn glass" style="flex:1;justify-content:center" onclick="closeSettings()">Cancel</button>
@@ -442,12 +515,27 @@ input[type=text],input[type=range]{accent-color:var(--accent)}
   </div>
 </div>
 
+<!-- ============ TOUR ============ -->
+<div id="tour">
+  <div class="dim"></div>
+  <div class="tour-spot" id="tourSpot"></div>
+  <div class="tour-card glass">
+    <div class="step-n" id="tourStepN">Step 1 of 5</div>
+    <h4 id="tourTitle"></h4>
+    <p id="tourText"></p>
+    <div class="tour-nav">
+      <div class="prog" id="tourProg"></div>
+      <button class="tour-btn" onclick="endTour()">Skip</button>
+      <button class="tour-btn next" id="tourNext" onclick="tourNext()">Next →</button>
+    </div>
+  </div>
+</div>
+
 <div id="toast"></div>
 
 <script>
 /* ================= DATA (links encoded — not exposed) ================= */
-const GAMES = [{id:'duck-math',name:'DUCK MATH',color:'#ffb26b',featured:true,u:'aHR0cHM6Ly91bnBrZy5jb20vaWduaXRlLWdvb2JlckAxLjEuNC9pbmRleC5odG1sIy9jbGFzcy9kcmlmdC1raW5n',cover:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRJFXWvY3bIWxbR2SZEnbZaVFRYqFzZJZlOo4SYkWOexg&s'},
-{id:'cookie-clicker',name:'Cookie Clicker',color:'#22d3ee',featured:false,u:'aHR0cHM6Ly91bnBrZy5jb20vZWRjdWJlLWNvb2tpZS1jbGlja2VyQDUuMC4wL2luZGV4Lmh0bWw=',cover:'https://i.imgur.com/3ZQ3Z3Z.png'},
+const GAMES = [{id:'cookie-clicker',name:'Cookie Clicker',color:'#22d3ee',featured:false,u:'aHR0cHM6Ly91bnBrZy5jb20vZWRjdWJlLWNvb2tpZS1jbGlja2VyQDUuMC4wL2luZGV4Lmh0bWw=',cover:'https://i.imgur.com/3ZQ3Z3Z.png'},
 {id:'recoil',name:'Recoil',color:'#ff6b1a',featured:false,u:'aHR0cHM6Ly9nZW5lcmljLWFscGFjYS0zMjUzMjEuZnJhbWVyLmFwcC8=',cover:'https://fancade.com/images/5E9F40DA7F9C9FA8.jpg'},
 {id:'retro-ball',name:'Retro Ball',color:'#a855f7',featured:false,u:'aHR0cHM6Ly9vYmplY3RzdG9yYWdlLnVzLWFzaGJ1cm4tMS5vcmFjbGVjbG91ZC5jb20vbi9pZHpneWZpN2F3d3IvYi9idWNrZXQtMjAyMzEwMDEtMTUxOC1yYjEuMC9vL2luZGV4Lmh0bWw=',cover:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfQEUbXopS95V30bru2UdgdystMD8ElzCDFzH6k6_pUQ&s'},
 {id:'drift-boss',name:'Drift Boss',color:'#3b82f6',featured:false,u:'aHR0cHM6Ly93d3cubWF0aHBsYXlncm91bmQuY29tL2RyaWZ0LWJvc3MtdjMvaW5kZXguaHRtbA==',cover:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMW_L-ZhbnvWj1lwNrWeAGDaK0rG0lCw52zSIsTfTmWNZ9oOVhXvQ_oJRA&s=10'},
@@ -466,16 +554,18 @@ const GAMES = [{id:'duck-math',name:'DUCK MATH',color:'#ffb26b',featured:true,u:
 {id:'bitlife',name:'Bitlife',color:'#34d399',featured:false,u:'aHR0cHM6Ly91bnBrZy5jb20vZWRjdWJlLWJpdGxpZmVANS4wLjAvaW5kZXguaHRtbA==',cover:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZdo5cBqkv1uAcfCofpC-WAViocRNLlysohwHMV2Lqzw&s=10'},
 {id:'tag',name:'Tag',color:'#facc15',featured:false,u:'aHR0cHM6Ly91bnBrZy5jb20vZWRjdWJlLXRhZ0AxLjAuMC9pbmRleC5odG1s',cover:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFwGQ9vG6ZifxDpWHtuu8oSzYqll79xZ9rW_KwPwzCdA&s'},
 {id:'block-blast',name:'Block Blast',color:'#a855f7',featured:false,u:'aHR0cHM6Ly91bnBrZy5jb20vZWRjdWJlLWJsb2NrLWJsYXN0QDUuMC4wL2luZGV4Lmh0bWw=',cover:'https://imgs.crazygames.com/block-puzzle-master_1x1/20250924025352/block-puzzle-master_1x1-cover?format=auto&quality=70&metadata=none'},
-{id:'cut-the-rope',name:'Cut the Rope',color:'#34d399',featured:false,u:'aHR0cHM6Ly91bnBrZy5jb20vZWRjdWJlLWN1dC10aGUtcm9wZUA1LjAuMC9pbmRleC5odG1s',cover:'https://play-lh.googleusercontent.com/2bTmHHM7DBMVe7fLh16Em-J-tVBMFGL2HJCxPAMNF7gAYIfU6EZoYG1__lQ0cvFMEyp3GU9CGijZzEB1qJHF'}];
+{id:'cut-the-rope',name:'Cut the Rope',color:'#34d399',featured:false,u:'aHR0cHM6Ly91bnBrZy5jb20vZWRjdWJlLWN1dC10aGUtcm9wZUA1LjAuMC9pbmRleC5odG1s',cover:'https://play-lh.googleusercontent.com/2bTmHHM7DBMVe7fLh16Em-J-tVBMFGL2HJCxPAMNF7gAYIfU6EZoYG1__lQ0cvFMEyp3GU9CGijZzEB1qJHF'},
+{id:'duck-math',name:'Duck Math',color:'#34d399',featured:true,u:'aHR0cHM6Ly91bnBrZy5jb20vaWduaXRlLWdvb2JlckAxLjEuNC9pbmRleC5odG1sIy9jbGFzcy9kcmlmdC1raW5n',cover:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRJFXWvY3bIWxbR2SZEnbZaVFRYqFzZJZlOo4SYkWOexg&s'}];
 const MOVIES = [{name:'Spiderman: Far From Home',u:'aHR0cHM6Ly9kcml2ZS5nb29nbGUuY29tL2ZpbGUvZC8xdDYyWVk1VjJXRnFQQTgwMWNERUN3dzFFUVlrNGZNbmsvcHJldmlldw==',poster:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjdXbHSbJUSaJdgj45vDisJUiPj1qljxkOPbfojU3M1w&s=10'},
 {name:'Spiderman: Homecoming',u:'aHR0cHM6Ly9kcml2ZS5nb29nbGUuY29tL2ZpbGUvZC8xaFVJeDA1RzNOX3VjZzhTd2RaSFJ0XzVNZHFMUVp0YWkvcHJldmlldw==',poster:'https://resizing.flixster.com/-XZAfHZM39UwaGJIFWKAE8fS0ak=/v3/t/assets/p12798844_p_v8_ao.jpg'},
 {name:'F1',u:'aHR0cHM6Ly9kcml2ZS5nb29nbGUuY29tL2ZpbGUvZC8xa196UkR0NFJuXzlGb3RZSlVmcmhKWjBaREtmd3FRazEvcHJldmlldw==',poster:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr2SgmDLkFhLGuF1CnP_xJv1stiKvK027DkN6m6wdqdg&s=10'},
 {name:'Obsession',u:'aHR0cHM6Ly9kcml2ZS5nb29nbGUuY29tL2ZpbGUvZC8xRkVOMTZMd001WnpUQlNiQnRrWTk1THJJemxzSFhGeDcvcHJldmlldw==',poster:'https://images.contentstack.io/v3/assets/blt13adb7e2033fcee5/blt5c8bcbfee5dade5c/6a2b47a8c284bac540ef3353/Obsession_keyart_poster_2000x3000.jpg?width=2560'}];
 const dec = s => atob(s);
+const PROXY_URL = dec('aHR0cHM6Ly9tb2JpbGUtc2VydmljZS0zODYzMTEuZnJhbWVyLmFwcC8=');
 const AI_KEY = "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";
 
 /* ================= SETTINGS ================= */
-const DEFAULTS = {accent:"#ff6b1a", city:"", particles:140, model:"gpt-4o-mini"};
+const DEFAULTS = {accent:"#ff6b1a", city:"", particles:140, model:"gpt-4o"};
 let S = {...DEFAULTS, ...JSON.parse(localStorage.getItem("igniteos")||"{}")};
 const saveS = () => localStorage.setItem("igniteos", JSON.stringify(S));
 const applyAccent = () => document.documentElement.style.setProperty("--accent", S.accent);
@@ -485,10 +575,15 @@ function go(id){
   document.querySelectorAll(".screen").forEach(s=>s.classList.remove("active"));
   document.getElementById(id).classList.add("active");
   document.querySelectorAll(".dock-btn[data-s]").forEach(b=>b.classList.toggle("on", b.dataset.s===id));
+  if(id==="proxy"){
+    const pf = document.getElementById("proxyFrame");
+    if(!pf.src || pf.src==="about:blank") pf.src = PROXY_URL;
+  }
   if(id==="home") startParticles(); else stopParticles();
+  window.scrollTo(0,0); document.getElementById(id==='home'?'home':id).scrollTop = 0;
 }
 
-/* ================= PARTICLES (falling snow) ================= */
+/* ================= PARTICLES ================= */
 const cv = document.getElementById("particles"), ctx = cv.getContext("2d");
 let flakes = [], raf = null;
 function sizeCanvas(){ cv.width = innerWidth; cv.height = innerHeight; }
@@ -520,9 +615,19 @@ function hexA(h, a){
 function startParticles(){ if(!raf){ makeFlakes(); drawFlakes(); } }
 function stopParticles(){ cancelAnimationFrame(raf); raf = null; ctx.clearRect(0,0,cv.width,cv.height); }
 
-/* ================= ROTATING DESCRIPTION ================= */
+/* ================= TITLE letters ================= */
+document.querySelectorAll("#bigTitle .row").forEach((row, ri)=>{
+  [...row.dataset.txt].forEach((ch, i)=>{
+    const s = document.createElement("span");
+    s.className = "ch"; s.textContent = ch;
+    s.style.setProperty("--cd", (0.15 + ri*0.28 + i*0.055) + "s");
+    row.appendChild(s);
+  });
+});
+
+/* ================= ROTATOR ================= */
 const LINES = [
-  "21 hand-picked games. Zero loading pain.",
+  "20 hand-picked games. Zero loading pain.",
   "A private movie theater, right in your browser.",
   "An AI that codes, explains and builds with you.",
   "Liquid glass. Falling light. Pure black.",
@@ -544,11 +649,23 @@ setInterval(()=>{
   lines[li].classList.add("on");
 }, 3800);
 
+/* ================= HERO mouse parallax ================= */
+const hero = document.getElementById("hero");
+hero.addEventListener("mousemove", e=>{
+  const rx = (e.clientX/innerWidth - .5), ry = (e.clientY/innerHeight - .5);
+  hero.querySelectorAll(".os-badge,#bigTitle,.widget-row,.home-nav").forEach((el,i)=>{
+    const d = (i+1)*4;
+    el.style.transform = `translate(${-rx*d}px, ${-ry*d}px)`;
+  });
+});
+hero.addEventListener("mouseleave", ()=>{
+  hero.querySelectorAll(".os-badge,#bigTitle,.widget-row,.home-nav").forEach(el=>el.style.transform="");
+});
+
 /* ================= CLOCK ================= */
 setInterval(()=>{
-  const d = new Date();
   document.getElementById("clockVal").textContent =
-    d.toLocaleTimeString([], {hour:"2-digit", minute:"2-digit"});
+    new Date().toLocaleTimeString([], {hour:"2-digit", minute:"2-digit"});
 }, 1000);
 
 /* ================= BATTERY ================= */
@@ -564,7 +681,7 @@ setInterval(()=>{
   }catch(e){ document.getElementById("battVal").textContent = "N/A"; }
 })();
 
-/* ================= WEATHER (Open-Meteo, no key needed) ================= */
+/* ================= WEATHER ================= */
 const WMO = {0:"☀️",1:"🌤️",2:"⛅",3:"☁️",45:"🌫️",48:"🌫️",51:"🌦️",53:"🌦️",55:"🌧️",56:"🌧️",57:"🌧️",
   61:"🌧️",63:"🌧️",65:"🌧️",66:"🌧️",67:"🌧️",71:"🌨️",73:"🌨️",75:"🌨️",77:"🌨️",80:"🌦️",81:"🌧️",82:"⛈️",
   85:"🌨️",86:"🌨️",95:"⛈️",96:"⛈️",99:"⛈️"};
@@ -587,7 +704,7 @@ async function loadWeather(){
   }catch(e){ val.textContent = "Set city ⚙"; ic.textContent = "🌍"; }
 }
 
-/* ================= BUILD GAMES ================= */
+/* ================= BUILD GAMES GRID ================= */
 const gamesGrid = document.getElementById("gamesGrid");
 GAMES.forEach((g,i)=>{
   const t = document.createElement("div");
@@ -602,11 +719,12 @@ GAMES.forEach((g,i)=>{
 });
 document.getElementById("gameCount").textContent = GAMES.length + " titles · click to play";
 
-/* library marquee — two counter-scrolling rows, duplicated for seamless loop */
+/* library marquee rows */
 function buildRail(el, list){
-  [...list, ...list].forEach(g=>{
+  [...list, ...list].forEach((g,i)=>{
     const d = document.createElement("div");
     d.className = "rail-game"; d.style.setProperty("--gc", g.color);
+    d.style.setProperty("--fd", ((i%10)*0.35)+"s");
     d.innerHTML = `<img src="${g.cover}" alt="" loading="lazy" onerror="this.style.display='none'">`;
     d.title = g.name;
     d.onclick = ()=>openPlay(g.name, dec(g.u));
@@ -627,7 +745,7 @@ MOVIES.forEach((m,i)=>{
 });
 document.getElementById("movieCount").textContent = MOVIES.length + " now streaming";
 
-/* ================= PLAY MODAL (no new tabs, no exposed links) ================= */
+/* ================= PLAY MODAL ================= */
 const pm = document.getElementById("playModal"), pf = document.getElementById("playFrame"),
       pl = document.getElementById("playLoading");
 function openPlay(title, url){
@@ -636,16 +754,25 @@ function openPlay(title, url){
   pm.classList.add("open");
   pf.src = url;
   pf.onload = ()=>setTimeout(()=>pl.classList.add("gone"), 400);
-  document.body.style.overflow = "hidden";
 }
 function closePlay(){
+  if(document.fullscreenElement) document.exitFullscreen().catch(()=>{});
   pm.classList.remove("open");
   pf.src = "about:blank";
-  document.body.style.overflow = "";
 }
-addEventListener("keydown", e=>{ if(e.key==="Escape"){ closePlay(); closeSettings(); } });
+function toggleFullScreen(){
+  const shell = pm.querySelector(".play-shell");
+  if(document.fullscreenElement){ document.exitFullscreen().catch(()=>{}); return; }
+  if(shell.requestFullscreen) shell.requestFullscreen().catch(()=>toast("Fullscreen blocked by browser"));
+  else toast("Fullscreen not supported");
+}
+document.addEventListener("fullscreenchange", ()=>{
+  const btn = document.querySelector("#playModal .play-bar button[onclick='toggleFullScreen()']");
+  if(btn) btn.innerHTML = document.fullscreenElement ? "🗗 Exit Full" : "⛶ Fullscreen";
+});
+addEventListener("keydown", e=>{ if(e.key==="Escape"){ closePlay(); closeSettings(); endTour(); } });
 
-/* ================= SETTINGS UI ================= */
+/* ================= SETTINGS ================= */
 const COLORS = ["#ff6b1a","#ff3b30","#ff9500","#ffd60a","#34c759","#00c7be","#32ade6","#7d7aff","#bf5af2","#ff375f"];
 const sw = document.getElementById("swatches");
 COLORS.forEach(c=>{
@@ -674,17 +801,55 @@ function toast(t){
   clearTimeout(el._t); el._t = setTimeout(()=>el.classList.remove("on"), 2200);
 }
 
+/* ================= TOUR ================= */
+const TOUR_STEPS = [
+  {t:"#bigTitle", title:"Welcome to IGNITE OS ✦", text:"This is your command center. Everything runs right here in the browser — snow falls, glass glows, and your whole library lives one click away."},
+  {t:"#widgetRow", title:"Live widgets", text:"Real-time weather, your battery ring, and the clock — all in liquid glass. Set your city later in Settings (the ⚙ button)."},
+  {t:"#librarySec", title:"The Game Library", text:"All 20 games scroll past automatically — two rows, opposite directions. Hover to pause, click any icon and it starts instantly. No links, no new tabs."},
+  {t:"#dock", title:"The Dock", text:"Jump between Home, Games Hub, Movie Theater and IGNITE AI anytime. The ✦ button opens your AI assistant."},
+  {t:"#settingsBtn", title:"Make it yours", text:"Tap the gear to change the accent color, weather city, snow density, and the AI model. That's it — you're ready. Have fun!"}
+];
+let tIdx = 0;
+const tourEl = document.getElementById("tour"), spot = document.getElementById("tourSpot");
+function startTour(){
+  if(!document.getElementById("home").classList.contains("active")) go("home");
+  document.getElementById("home").scrollTop = 0;
+  tourEl.classList.add("open"); tIdx = 0; showStep();
+}
+function showStep(){
+  const s = TOUR_STEPS[tIdx];
+  document.getElementById("tourStepN").textContent = `Step ${tIdx+1} of ${TOUR_STEPS.length}`;
+  document.getElementById("tourTitle").textContent = s.title;
+  document.getElementById("tourText").textContent = s.text;
+  document.getElementById("tourNext").textContent = tIdx===TOUR_STEPS.length-1 ? "Finish ✦" : "Next →";
+  const prog = document.getElementById("tourProg");
+  prog.innerHTML = TOUR_STEPS.map((_,i)=>`<i class="${i<=tIdx?'on':''}"></i>`).join("");
+  const el = document.querySelector(s.t);
+  el.scrollIntoView({block:"center", behavior:"smooth"});
+  setTimeout(()=>{
+    const r = el.getBoundingClientRect();
+    spot.style.cssText = `left:${r.left-14}px;top:${r.top-14}px;width:${r.width+28}px;height:${r.height+28}px;display:block`;
+  }, 350);
+}
+function tourNext(){
+  if(tIdx === TOUR_STEPS.length-1){ endTour(); return; }
+  tIdx++; showStep();
+}
+function endTour(){
+  tourEl.classList.remove("open");
+  spot.style.display = "none";
+  localStorage.setItem("igniteos_toured", "1");
+}
+
 /* ================= AI ================= */
 const chatLog = document.getElementById("chatLog");
 const history = [];
 function addMsg(text, who){
   const d = document.createElement("div");
   d.className = "msg " + who;
-  if(who==="bot"){
-    d.innerHTML = '<div class="who">IGNITE AI</div>' + renderBot(text);
-  } else d.textContent = text;
+  if(who==="bot") d.innerHTML = '<div class="who">IGNITE AI</div>' + renderBot(text);
+  else d.textContent = text;
   chatLog.appendChild(d); chatLog.scrollTop = chatLog.scrollHeight;
-  return d;
 }
 function renderBot(text){
   const parts = text.split(/```(\w*)\n?([\s\S]*?)(?:```|$)/g);
@@ -716,6 +881,26 @@ chatLog.addEventListener("click", e=>{
   }
 });
 function quickAsk(q){ document.getElementById("aiInput").value = q; sendMsg(); }
+
+async function askOpenAI(model, q){
+  const res = await fetch("https://api.openai.com/v1/chat/completions", {
+    method:"POST",
+    headers:{ "Content-Type":"application/json", "Authorization":"Bearer " + AI_KEY },
+    body: JSON.stringify({
+      model,
+      messages: [
+        {role:"system", content:"You are IGNITE AI, a super-smart, friendly assistant inside IGNITE OS. You are excellent at coding, explanations, math, creative writing, game ideas and problem solving. Always format code in triple backticks with the language name. Be concise but complete."},
+        ...history.slice(-10),
+        {role:"user", content:q}
+      ]
+    })
+  });
+  const data = await res.json().catch(()=>({}));
+  if(!res.ok) throw {status:res.status, msg:data.error?.message || ("HTTP " + res.status)};
+  if(!data.choices?.[0]?.message?.content) throw {status:res.status, msg:"Unexpected response shape"};
+  return data.choices[0].message.content;
+}
+
 async function sendMsg(){
   const inp = document.getElementById("aiInput"), q = inp.value.trim();
   if(!q) return;
@@ -724,27 +909,26 @@ async function sendMsg(){
   tp.className = "msg bot typing"; tp.innerHTML = "<i></i><i></i><i></i>";
   chatLog.appendChild(tp); chatLog.scrollTop = chatLog.scrollHeight;
   try{
-    const res = await fetch("https://api.openai.com/v1/chat/completions", {
-      method:"POST",
-      headers:{ "Content-Type":"application/json", "Authorization":"Bearer " + AI_KEY },
-      body: JSON.stringify({
-        model: S.model,
-        messages: [
-          {role:"system", content:"You are IGNITE AI, a super-smart, friendly assistant inside IGNITE OS. You are excellent at coding, explanations, math, creative writing, game ideas and problem solving. Always format code in triple backticks with the language name. Be concise but complete."},
-          ...history.slice(-10),
-          {role:"user", content:q}
-        ]
-      })
-    });
-    const data = await res.json();
+    let reply, lastErr;
+    const tries = [S.model, "gpt-4o", "gpt-4o-mini", "gpt-3.5-turbo"].filter((v,i,a)=>a.indexOf(v)===i);
+    for(const m of tries){
+      try{ reply = await askOpenAI(m, q); if(m!==S.model) toast(`Auto-switched to ${m}`); break; }
+      catch(e){
+        lastErr = e;
+        const notModelIssue = e.status===401 || e.status===403 || e.status===429;
+        if(notModelIssue || tries.indexOf(m)===tries.length-1) throw e;
+      }
+    }
     tp.remove();
-    if(!res.ok || !data.choices) throw new Error(data.error?.message || "API error");
-    const reply = data.choices[0].message.content;
     history.push({role:"user",content:q},{role:"assistant",content:reply});
     addMsg(reply, "bot");
   }catch(err){
     tp.remove();
-    addMsg("⚠️ Couldn't reach the AI right now. Check the API key / model in Settings, or try again. (" + esc(err.message||"") + ")", "bot");
+    let hint = "";
+    if(err.status===401) hint = "The API key was rejected (401). Double-check it in the code.";
+    else if(err.status===429) hint = "Rate limit hit (429) — wait a moment and retry.";
+    else if(err.status===404) hint = "Model not found (404) — set a valid model in Settings.";
+    addMsg(`⚠️ AI error: ${esc(err.msg||err.message||"unknown")}\n${hint}`, "bot");
   }
 }
 document.getElementById("aiInput").addEventListener("keydown", e=>{ if(e.key==="Enter") sendMsg(); });
@@ -752,6 +936,7 @@ document.getElementById("aiInput").addEventListener("keydown", e=>{ if(e.key==="
 /* ================= BOOT ================= */
 applyAccent(); startParticles(); loadWeather();
 addMsg("Hey! I'm IGNITE AI ✦ I'm great at a lot of things — coding, explaining, brainstorming, math, you name it. Ask me anything, and if you want code just say so — I'll wrap it in a neat copyable block.", "bot");
+if(!localStorage.getItem("igniteos_toured")) setTimeout(startTour, 900);
 </script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "class-studys",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "IGNITE OS — Advanced proxy-enabled gaming platform with comprehensive filter bypass system",
   "main": "index.html",
   "files": [