*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bar-h: 52px;--notes-w: 240px;--chrome-h: 40px;--gap: 16px;--pad: 20px;--radius: 14px;--win-radius: 12px;--bg: #ffffff;--border: rgba(255,255,255,.08);--accent: #7c6cfa;--text: #111111;--muted: #888}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;height:100dvh;overflow:hidden;display:flex;flex-direction:column}#bar{height:var(--bar-h);flex-shrink:0;display:flex;align-items:center;padding:0 20px;gap:12px;background:transparent;z-index:100;position:relative}.logo{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-right:8px;cursor:pointer;transition:color .18s}.logo:hover{color:var(--text)}.nav-tabs{display:flex;gap:6px;flex:1}.tab{padding:6px 18px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;transition:all .18s ease;white-space:nowrap}.tab:hover{color:var(--text);background:#ffffff0f}.tab.active{background:var(--accent);color:#fff}.bar-actions{display:flex;gap:8px;margin-left:auto}.icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s}.icon-btn:hover{color:var(--text);background:#ffffff0f}.icon-btn.active{color:var(--accent);border-color:var(--accent)}#stage{flex:1;overflow-y:scroll;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:none}#stage::-webkit-scrollbar{display:none}.slide{height:calc(100dvh - var(--bar-h));scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;flex-shrink:0}#home-slide{background:var(--bg);flex-direction:column;gap:48px}.home-heading{text-align:center}.home-heading h1{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}.home-heading p{font-size:12px;color:#fff3}.cards-row{display:flex;gap:28px}.project-card{display:flex;flex-direction:column;gap:14px;cursor:pointer}.card-preview{width:380px;height:238px;border-radius:12px;overflow:hidden;border:none;position:relative;background:transparent;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.project-card:hover .card-preview{transform:translateY(-4px);box-shadow:0 16px 48px #0009,0 0 0 1px var(--accent);border-color:var(--accent)}.card-preview iframe{position:absolute;top:0;left:0;width:1440px;height:960px;border:none;transform-origin:top left;transform:scale(calc(380/1440));pointer-events:none}.card-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:12px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.project-card:hover .card-overlay{opacity:1;background:#7c6cfa14}.enter-btn{display:flex;align-items:center;gap:6px;padding:9px 20px;border-radius:20px;background:var(--accent);color:#fff;font-size:13px;font-weight:500;box-shadow:0 4px 20px #7c6cfa80;transform:translateY(4px);opacity:0;transition:transform .2s ease,opacity .2s ease}.project-card:hover .enter-btn{transform:translateY(0);opacity:1}.card-info{display:flex;align-items:center;justify-content:space-between;padding:0 2px}.card-name{font-size:14px;font-weight:600;color:var(--text)}.card-num{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.06em}.site-slide{padding:var(--pad)}.browser-win{display:flex;flex-direction:column;border-radius:var(--win-radius);overflow:hidden;box-shadow:0 0 0 1px #ffffff06,0 6px 20px #0000002e,0 2px 6px #0000001a;background:#fff;width:calc((100vw - var(--pad)*2 - 120px) * .9);height:calc((100dvh - var(--bar-h) - var(--pad)*2) * .9)}.win-chrome{height:var(--chrome-h);background:#f0f0f0;display:flex;align-items:center;padding:0 14px;gap:10px;flex-shrink:0;border-bottom:1px solid rgba(0,0,0,.08)}.traffic-lights{display:flex;gap:6px;margin-right:4px}.dot{width:12px;height:12px;border-radius:50%}.dot-r{background:#ff5f57}.dot-y{background:#febc2e}.dot-g{background:#28c840}.url-bar{flex:1;max-width:320px;margin:0 auto;height:22px;background:#00000012;border-radius:6px;display:flex;align-items:center;padding:0 10px;gap:6px}.url-bar svg{opacity:.4;flex-shrink:0;color:#333}.url-text{font-size:11px;color:#00000080;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.win-body{flex:1;overflow:hidden;position:relative}.win-body iframe{position:absolute;top:0;left:0;width:1440px;border:none;transform-origin:top left}.screenshot-slide{gap:var(--gap);padding:var(--pad)}.screenshot-frame{flex-shrink:1;border-radius:var(--win-radius);overflow:hidden;box-shadow:0 0 0 1px #ffffff1a,0 24px 80px #000000b3,0 8px 24px #0006;max-width:calc(100vw - var(--pad)*2 - var(--notes-w) - var(--gap) - 80px);max-height:calc(100dvh - var(--bar-h) - var(--pad)*2);line-height:0}.screenshot-frame img{display:block;max-width:100%;max-height:calc(100dvh - var(--bar-h) - var(--pad)*2);width:auto;height:auto}.notes-panel{flex-shrink:0;width:var(--notes-w);height:calc(100dvh - var(--bar-h) - var(--pad)*2);background:#121216e6;backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 40px #0006;display:flex;flex-direction:column;overflow:hidden}.panel-header{padding:14px 16px 10px;display:flex;align-items:center;border-bottom:1px solid var(--border);flex-shrink:0}.panel-title{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.panel-body{padding:16px;flex:1;overflow-y:auto}.placeholder-line{height:10px;border-radius:5px;background:#ffffff0f;margin-bottom:10px}.placeholder-line:nth-child(2){width:80%}.placeholder-line:nth-child(3){width:65%;margin-bottom:20px}.placeholder-line:nth-child(5){width:88%}.placeholder-line:nth-child(6){width:72%}.placeholder-line:nth-child(7){width:55%}.placeholder-tag{display:inline-block;height:24px;width:60px;border-radius:6px;background:#ffffff0f;margin:12px 4px 0 0}.placeholder-tag:nth-child(2){width:48px}.placeholder-tag:nth-child(3){width:72px}#slide-nav{position:fixed;bottom:24px;right:24px;display:flex;align-items:center;gap:8px;z-index:200}.nav-btn{width:24px;height:24px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .15s;padding:0}.nav-btn:hover{opacity:.6}.nav-btn:disabled{opacity:.2;cursor:default;pointer-events:none}#prev-btn,#era-prev-btn{color:#aaa}#next-btn,#era-next-btn{color:#111}.nav-counter{font-size:12px;color:var(--muted);padding:0 4px;letter-spacing:.04em;min-width:36px;text-align:center}#airclay-overlay,#eralooper-overlay,#dottypo-overlay,#more-overlay{position:fixed;inset:var(--bar-h) 0 0 0;background:var(--bg);z-index:50;opacity:0;pointer-events:none;transition:opacity .4s ease}#airclay-overlay.visible,#dottypo-overlay.visible,#eralooper-overlay.visible,#more-overlay.visible{opacity:1;pointer-events:all}.more-slide{padding:0 40px;align-items:center;justify-content:center}.more-layout{display:flex;flex-direction:column;width:90%;max-width:1200px;gap:24px;justify-content:center;align-items:stretch}.more-top{display:flex;gap:20px;flex:0 0 auto;align-items:stretch;width:100%;transform:scale(1.1);transform-origin:top center;margin-bottom:10%}.more-browser{flex:0 0 47%;aspect-ratio:16 / 10;display:flex;flex-direction:column;border-radius:var(--win-radius);overflow:hidden;background:#fff}.more-browser .win-body{flex:1;min-height:0}.more-img-box{flex:1;border-radius:var(--win-radius);background:#f0f0f0;overflow:hidden;display:flex;align-items:center;justify-content:center}.more-img-box img{width:100%;height:100%;object-fit:cover;display:block}.more-info{flex:0 0 auto;display:flex;flex-direction:column;gap:5px}.more-num{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}.more-title{font-size:26px;font-weight:700;color:var(--text);line-height:1.15;margin:0}.more-author{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:.04em}.more-desc{font-size:13px;line-height:1.75;color:#444;max-width:860px;margin-top:4px}[contenteditable]:focus{outline:2px solid #f0d266;border-radius:4px;outline-offset:3px}[contenteditable]:hover{cursor:text}.era-stage{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:none;position:relative}.era-stage::-webkit-scrollbar{display:none}.era-slide{height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:var(--pad)}.era-content-slide{padding:40px 80px;background:var(--bg);align-items:flex-start;flex-direction:column;justify-content:center}.era-label{font-size:13px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:#c9a800;margin-bottom:10px}.era-title{font-size:32px;font-weight:600;color:var(--text);line-height:1.2;margin-bottom:20px;max-width:820px}.era-desc{font-size:13px;line-height:1.6;color:#444;max-width:740px;margin-bottom:10px}.era-players-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;width:100%}.era-player-card{padding:16px 20px;border:1px solid rgba(0,0,0,.07);border-radius:12px;background:#fafafa}.era-player-era{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#c9a800;margin-bottom:4px}.era-player-name{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px}.era-player-desc{font-size:12px;line-height:1.7;color:#555}.era-features-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;max-width:960px;width:100%}.era-feature-item{padding:12px 16px;border:1px solid rgba(0,0,0,.07);border-radius:10px;background:#fafafa}.era-feature-name{font-size:12px;font-weight:700;color:var(--text);margin-bottom:4px}.era-feature-desc{font-size:11px;line-height:1.55;color:#666}.era-img-placeholder{flex:1;aspect-ratio:16 / 10;border-radius:10px;background:#f0f0f0;border:1.5px dashed #ccc}.era-stage-label{font-size:13px;font-weight:700;color:#c9a800;margin-bottom:10px;letter-spacing:.02em}.era-stage-desc{font-size:14px;line-height:1.8;color:#555}.era-nav{position:absolute;bottom:24px;right:24px;display:flex;align-items:center;gap:8px;z-index:60}#fs-hint{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(20px);background:#1a1a1ee6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-size:12px;color:var(--muted);pointer-events:none;opacity:0;transition:all .3s ease;z-index:300}#fs-hint.show{opacity:1;transform:translate(-50%) translateY(0)}