.preview-shell { background: #101115; }
#loading-overlay { position:fixed; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; background:#101115; color:#fff; pointer-events:none; opacity:1; visibility:visible; transition:opacity 260ms ease,visibility 260ms ease; }
#loading-overlay.is-hidden { opacity:0; visibility:hidden; }
.loading-overlay-lottie { width:min(180px,24vw); height:min(180px,24vw); }
.loading-overlay-lottie svg { width:100% !important; height:100% !important; }
.loading-progress { position:relative; width:min(220px,44vw); height:7px; overflow:hidden; border:1px solid rgba(139,162,255,.32); border-radius:999px; background:rgba(63,70,115,.34); box-shadow:inset 0 0 8px rgba(0,0,0,.42),0 0 18px rgba(65,105,255,.12); }
.loading-progress-bar { width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#586cff 0%,#68c8ff 55%,#b9e9ff 100%); box-shadow:0 0 12px rgba(85,154,255,.9),0 0 22px rgba(88,108,255,.55); transition:width 180ms cubic-bezier(.22,.8,.32,1); }
#rive-canvas { touch-action: manipulation; }
#load-status { position: absolute; inset: 45% 0 auto; text-align: center; color: #ddd; pointer-events: none; z-index: 3; }
.error-message { z-index: 4; }
.rive-hit-button:disabled { pointer-events: none; }
#rive-diagnostics:not([hidden]) { position: fixed; left: 8px; top: 8px; z-index: 5; max-height: 35vh; overflow: auto; color: #caffdf; background: #000c; font: 11px monospace; pointer-events: none; }
/* Coordinates measured against the current 1920 × 1080 artboard. */
.hit-up { left:68.5%; top:24.4%; width:4.2%; height:6.6%; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.hit-down { left:68.5%; top:31.8%; width:4.2%; height:6.6%; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.hit-left { left:66.3%; top:28.1%; width:4.2%; height:6.6%; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.hit-right { left:70.7%; top:28.1%; width:4.2%; height:6.6%; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.hit-ai { left:66.1%; top:41.1%; width:9%; height:5%; border-radius:999px; }
.hit-intro { left:66.1%; top:48.3%; width:3.8%; height:4.6%; border-radius:999px; }
.hit-works { left:71.4%; top:48.3%; width:3.8%; height:4.6%; border-radius:999px; }
.hit-close { left:66.9%; top:71.1%; width:2.8%; height:5%; border-radius:50%; }
.show-hitboxes .rive-hit-button { background:#ff000040; outline:1px solid #ff0; }
#rive-ai-canvas { position:absolute; display:block; pointer-events:none; z-index:0; }
#screen-content { position:absolute; display:block; z-index:0; overflow:hidden; pointer-events:none; --screen-scale:1; --screen-hue:-7deg; --screen-saturation:1.22; }
#screen-content.is-intro-active { z-index:2; }
#screen-content.is-works-active + #rive-canvas { pointer-events:none; }
#screen-content.ai-chat-active { pointer-events:none; }
#screen-image { display:block; width:100%; height:100%; object-fit:fill; image-rendering:auto; will-change:transform,filter,clip-path; }
#screen-image[hidden] { display:none; }
#screen-intro-video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:fill; pointer-events:none; }
#screen-intro-video[hidden] { display:none; }
#screen-image, #screen-intro-video, #works-carousel, #ai-chat { filter:hue-rotate(var(--screen-hue)) saturate(var(--screen-saturation)); }
#ai-chat, #ai-chat-input-layer { font-family:'PingFang SC','Microsoft YaHei',sans-serif; }
#ai-chat { position:absolute; inset:0; overflow:hidden; color:#fff; pointer-events:none; }
#ai-chat-input-layer { position:absolute; z-index:3; overflow:hidden; pointer-events:none; --screen-scale:1; }
#ai-chat-input-layer[hidden] { display:none; }
#ai-chat-input-layer .ai-input-row { pointer-events:auto; }
.ai-chat-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.ai-header { position:absolute; z-index:1; top:6.04%; left:30.22%; display:none; align-items:center; gap:calc(var(--screen-scale, 1) * 12.72px); font-size:calc(var(--screen-scale, 1) * 25.44px); font-weight:600; line-height:1.4; white-space:nowrap; }
.ai-header-dot { width:calc(var(--screen-scale, 1) * 11.66px); height:calc(var(--screen-scale, 1) * 11.66px); border-radius:50%; background:#0ff; box-shadow:0 0 calc(var(--screen-scale, 1) * 10px) #0ff; }
.ai-header span:nth-child(2), .ai-header b { color:#0ff; }
.ai-header b { font-weight:600; }
.ai-header strong { font-weight:600; }
.ai-quota-status { display:none; position:absolute; z-index:2; top:6.8%; right:7.3%; color:rgba(255,255,255,.72); font-size:calc(var(--screen-scale, 1) * 13px); line-height:1.4; pointer-events:none; }
.ai-chat.is-dialogue .ai-quota-status:not([hidden]) { display:block; }
.ai-stage { position:absolute; inset:0; z-index:1; }
.ai-stage-art { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.ai-stage-dialogue { display:none; }
.ai-chat.is-dialogue .ai-stage-intro { display:none; }
.ai-chat.is-dialogue .ai-stage-dialogue { display:block; }
.ai-robot-placeholder { display:none; }
.ai-chat.is-dialogue .ai-header { display:flex; }
.ai-robot-placeholder { position:absolute; left:50%; top:18.54%; width:calc(var(--screen-scale, 1) * 185.5px); height:calc(var(--screen-scale, 1) * 185.5px); transform:translateX(-50%); }
.ai-robot-head { position:absolute; left:18%; top:29%; width:64%; height:47%; border:calc(var(--screen-scale, 1) * 4px) solid #91d9ff; border-radius:44% 44% 42% 42%; background:linear-gradient(145deg,#e8f7ff 0%,#74b4ff 46%,#485ce0 100%); box-shadow:inset 0 calc(var(--screen-scale, 1) * -7px) calc(var(--screen-scale, 1) * 12px) rgba(20,32,150,.35),0 calc(var(--screen-scale, 1) * 5px) calc(var(--screen-scale, 1) * 22px) rgba(0,216,255,.4); }
.ai-robot-head::before { content:""; position:absolute; inset:16% 17%; border-radius:42%; background:radial-gradient(circle at 50% 42%,#1ff7ff 0 5%,transparent 6%),linear-gradient(100deg,#14246a,#172d8e 48%,#0e1e65); box-shadow:inset 0 0 calc(var(--screen-scale, 1) * 10px) #00e5ff; }
.ai-robot-head i { position:absolute; z-index:1; top:42%; width:calc(var(--screen-scale, 1) * 12px); height:calc(var(--screen-scale, 1) * 20px); border-radius:50%; background:#f6ffff; box-shadow:0 0 calc(var(--screen-scale, 1) * 10px) #0ff; }
.ai-robot-head i:first-child { left:36%; }.ai-robot-head i:last-child { right:36%; }
.ai-robot-ear { position:absolute; top:37%; width:11%; height:29%; border-radius:50%; background:linear-gradient(90deg,#d5f3ff,#7086f4); box-shadow:0 0 calc(var(--screen-scale, 1) * 10px) rgba(89,224,255,.7); }
.ai-robot-ear-left { left:9%; }.ai-robot-ear-right { right:9%; }
.ai-robot-antenna { position:absolute; left:49%; top:8%; width:calc(var(--screen-scale, 1) * 8px); height:33%; border-radius:50%; background:linear-gradient(#b7ecff,#5681ee); transform:rotate(24deg); transform-origin:bottom; }
.ai-robot-antenna::after { content:""; position:absolute; left:50%; top:-8%; width:calc(var(--screen-scale, 1) * 19px); height:calc(var(--screen-scale, 1) * 19px); border-radius:50%; background:#9cdaff; box-shadow:0 0 calc(var(--screen-scale, 1) * 13px) #61caff; transform:translateX(-50%); }
.ai-welcome-header { position:absolute; z-index:1; top:6.04%; left:30.22%; display:flex; align-items:center; gap:calc(var(--screen-scale, 1) * 12.72px); font-size:calc(var(--screen-scale, 1) * 25.44px); font-weight:600; line-height:1.4; white-space:nowrap; }
.ai-welcome-header i { width:calc(var(--screen-scale, 1) * 11.66px); height:calc(var(--screen-scale, 1) * 11.66px); border-radius:50%; background:#0ff; box-shadow:0 0 calc(var(--screen-scale, 1) * 10px) #0ff; }
.ai-welcome-header span, .ai-welcome-header b { color:#0ff; }
.ai-welcome-header b, .ai-welcome-header strong { font-weight:600; }
#ai-welcome-lottie { position:absolute; z-index:1; left:36.5%; top:16%; width:27%; height:39%; pointer-events:none; }
#ai-welcome-lottie svg { width:100% !important; height:100% !important; }
.ai-welcome-copy { position:absolute; z-index:1; top:58.3%; left:50%; margin:0; transform:translateX(-50%); color:#fff; font-size:calc(var(--screen-scale, 1) * 25.44px); font-weight:500; line-height:1.4; text-align:center; white-space:nowrap; }
.ai-user-bubble { position:absolute; z-index:1; top:22.52%; left:58.22%; width:32.74%; min-height:10.04%; box-sizing:border-box; padding:calc(var(--screen-scale, 1) * 9.54px) calc(var(--screen-scale, 1) * 19.08px); display:flex; align-items:center; justify-content:center; border:calc(var(--screen-scale, 1) * 1.06px) solid rgba(255,255,255,.07); border-radius:calc(var(--screen-scale, 1) * 24.33px) 0 calc(var(--screen-scale, 1) * 24.33px) calc(var(--screen-scale, 1) * 24.33px); background:rgba(65,58,129,.94); backdrop-filter:blur(calc(var(--screen-scale, 1) * 3.71px)); font-size:calc(var(--screen-scale, 1) * 16.72px); line-height:1.585; white-space:nowrap; }
.ai-assistant-message { position:absolute; z-index:1; top:37.76%; left:10.06%; width:77.27%; display:flex; align-items:flex-start; gap:calc(var(--screen-scale, 1) * 19.3px); }
.ai-assistant-message > img { flex:0 0 auto; width:calc(var(--screen-scale, 1) * 41.53px); height:calc(var(--screen-scale, 1) * 41.53px); border-radius:50%; object-fit:cover; }
.ai-assistant-message > div { box-sizing:border-box; width:calc(var(--screen-scale, 1) * 471.7px); min-height:calc(var(--screen-scale, 1) * 93.72px); padding:calc(var(--screen-scale, 1) * 5.3px) calc(var(--screen-scale, 1) * 19.08px); display:flex; align-items:center; border:calc(var(--screen-scale, 1) * 1.06px) solid #00d4ff; border-radius:0 calc(var(--screen-scale, 1) * 24.33px) calc(var(--screen-scale, 1) * 24.33px) calc(var(--screen-scale, 1) * 24.33px); background:linear-gradient(90deg,#0011ff 24%,#5100ff 36%,#0066ff); box-shadow:inset 0 calc(var(--screen-scale, 1) * 4.24px) calc(var(--screen-scale, 1) * 15.48px) rgba(25,209,255,.71); font-size:calc(var(--screen-scale, 1) * 16.72px); font-weight:500; line-height:1.585; }
.ai-question-overlay, .ai-assistant-overlay { display:none; }
.ai-chat.is-dialogue .ai-question-overlay, .ai-chat.is-dialogue .ai-assistant-overlay { display:flex; }
.ai-thinking { position:absolute; z-index:2; top:68.96%; left:8.76%; width:10.54%; height:6.63%; pointer-events:none; user-select:none; }
.ai-thinking[hidden] { display:none; }
.ai-chat-disclosure { position:absolute; z-index:2; top:12.5%; left:8.76%; width:82.63%; margin:0; color:rgba(255,255,255,.86); font-size:max(11px,calc(var(--screen-scale, 1) * 14px)); line-height:1.2; text-align:center; pointer-events:none; }
.ai-input-row { position:absolute; z-index:2; left:8.76%; top:79.73%; width:82.63%; height:11.66%; box-sizing:border-box; padding:calc(var(--screen-scale, 1) * 12.6px) calc(var(--screen-scale, 1) * 18px); display:flex; align-items:center; border:calc(var(--screen-scale, 1) * 2.15px) solid #62d0ff; border-radius:calc(var(--screen-scale, 1) * 17.22px); background:rgba(30,35,127,.93); box-shadow:0 calc(var(--screen-scale, 1) * 4.3px) calc(var(--screen-scale, 1) * 10.76px) rgba(51,51,51,.12); transition:background .12s ease; }
.ai-input-row.is-filled { background:rgb(30,35,127); }
.ai-input-row input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:#fff; font:400 calc(var(--screen-scale, 1) * 16.58px)/1.4 'PingFang SC',sans-serif; }
.ai-input-row input::placeholder { color:#fff; opacity:.5; user-select:none; }
.ai-input-row button { flex:0 0 auto; width:calc(var(--screen-scale, 1) * 60px); height:calc(var(--screen-scale, 1) * 46.8px); border:0; background:url('assets/send-button.png') center/contain no-repeat; cursor:pointer; transform:translateX(calc(var(--screen-scale, 1) * 15px)); }
.ai-input-row button span { display:none; }
.ai-live-thread { position:absolute; z-index:1; left:6.5%; right:1.6%; top:18%; bottom:22%; display:none; overflow-x:hidden; overflow-y:auto; flex-direction:column; gap:calc(var(--screen-scale, 1) * 12px); padding:calc(var(--screen-scale, 1) * 8px) calc(var(--screen-scale, 1) * 16px) calc(var(--screen-scale, 1) * 8px) calc(var(--screen-scale, 1) * 8px); pointer-events:auto; user-select:text; -webkit-user-select:text; scrollbar-width:thin; scrollbar-color:rgba(103,220,255,.4) transparent; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 100%); }
#ai-chat-input-layer.is-dialogue .ai-live-thread { display:flex; }
.ai-live-thread::-webkit-scrollbar { width:calc(var(--screen-scale, 1) * 6.25px); }
.ai-live-thread::-webkit-scrollbar-track { background:transparent; }
.ai-live-thread::-webkit-scrollbar-thumb { border-radius:999px; background:rgba(103,220,255,.4); }
.ai-message-row { width:100%; display:flex; align-items:flex-start; gap:calc(var(--screen-scale, 1) * 12px); }
.ai-message-row.user { justify-content:flex-end; }
.ai-message-row.assistant { justify-content:flex-start; }
.ai-message-avatar { flex:0 0 auto; width:calc(var(--screen-scale, 1) * 41.53px); height:calc(var(--screen-scale, 1) * 41.53px); border-radius:50%; object-fit:cover; }
.ai-message { width:fit-content; max-width:72%; box-sizing:border-box; padding:calc(var(--screen-scale, 1) * 8px) calc(var(--screen-scale, 1) * 14px); border:calc(var(--screen-scale, 1) * 1.06px) solid #00d4ff; font-family:inherit; font-size:calc(var(--screen-scale, 1) * 16.72px); font-weight:500; line-height:1.5; overflow-wrap:anywhere; white-space:normal; }
.ai-message.user { margin-right:calc(var(--screen-scale, 1) * 20px); border-color:rgba(255,255,255,.15); border-radius:calc(var(--screen-scale, 1) * 18px) calc(var(--screen-scale, 1) * 18px) 0 calc(var(--screen-scale, 1) * 18px); background:rgba(77,69,146,.94); backdrop-filter:blur(calc(var(--screen-scale, 1) * 3.7px)); }
.ai-message.assistant { border-radius:0 calc(var(--screen-scale, 1) * 18px) calc(var(--screen-scale, 1) * 18px) calc(var(--screen-scale, 1) * 18px); background:linear-gradient(90deg,#0011ff 24%,#5100ff 36%,#0066ff); box-shadow:inset 0 calc(var(--screen-scale, 1) * 4px) calc(var(--screen-scale, 1) * 15px) rgba(25,209,255,.55); }
.ai-message.assistant .agent-project-link { color:#c8f9ff; font-weight:700; text-decoration:underline; text-decoration-color:rgba(200,249,255,.75); text-underline-offset:.18em; -webkit-tap-highlight-color:transparent; }
.ai-message.assistant .agent-project-link:focus-visible { outline:2px solid #c8f9ff; outline-offset:2px; border-radius:2px; }
#works-carousel { position:absolute; inset:0; overflow:hidden; opacity:0; pointer-events:none; }
#works-carousel.is-active { opacity:1; }
.works-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.works-title { position:absolute; z-index:4; top:12.29%; left:0; width:100%; color:#fff; font-family:'PingFang SC','Microsoft YaHei',sans-serif; font-size:calc(var(--screen-scale, 1) * 25.2px); font-weight:600; line-height:1.15; letter-spacing:0; text-align:center; text-shadow:0 2px 12px rgba(0,0,0,.22); }
.works-tags { position:absolute; z-index:4; top:83.1%; left:50%; display:flex; align-items:center; gap:calc(var(--screen-scale, 1) * 7px); transform:translateX(-50%); white-space:nowrap; }
.works-tags span { display:flex; align-items:center; justify-content:center; min-height:calc(var(--screen-scale, 1) * 34.9px); padding:calc(var(--screen-scale, 1) * 5.66px) calc(var(--screen-scale, 1) * 13.2px); border:calc(var(--screen-scale, 1) * 1.886px) solid #fff; border-radius:40px; color:#fff; font-family:'PingFang SC','Microsoft YaHei',sans-serif; font-size:calc(var(--screen-scale, 1) * 18.1px); font-weight:400; line-height:1; text-shadow:0 .4px 0 rgba(255,255,255,.54); }
.works-track { position:absolute; inset:0; }
.works-card { position:absolute; left:0; top:0; display:block; height:auto; transform-origin:center; transition:left 360ms cubic-bezier(.2,.75,.25,1), top 360ms cubic-bezier(.2,.75,.25,1), width 360ms cubic-bezier(.2,.75,.25,1), height 360ms cubic-bezier(.2,.75,.25,1), transform 360ms cubic-bezier(.2,.75,.25,1), opacity 360ms ease; opacity:.42; filter:saturate(.72) brightness(.7); will-change:left,top,width,height,transform,opacity; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.works-card video, .works-card img.ipad-alpha-fallback { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
#screen-content.is-works-active .works-card:not(.is-hidden) { pointer-events:auto; cursor:pointer; }
.works-card.is-hidden { opacity:0; filter:none; pointer-events:none; transform:scale(.72); transition:none; }
.works-card.is-center { z-index:3; left:26.283%; top:19.924%; width:48.051%; height:57.856%; transform:scale(.9); opacity:1; filter:none; }
.works-card.is-left { z-index:2; left:-24.099%; top:32.177%; width:43.683%; height:52.596%; transform:rotate(-15deg) scale(.9); }
.works-card.is-right { z-index:2; left:81.348%; top:32.177%; width:43.797%; height:52.596%; transform:rotate(15deg) scale(.9); }
#screen-content::before,
#screen-content::after { content:""; position:absolute; inset:-5%; pointer-events:none; opacity:0; mix-blend-mode:screen; }
#screen-content::before { background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,15,65,.72) 3px 5px,transparent 5px 8px),repeating-linear-gradient(90deg,rgba(0,235,255,.62) 0 3px,transparent 3px 11px); }
#screen-content::after { background:repeating-linear-gradient(0deg,rgba(255,255,255,.24) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(70,120,255,.42) 0 4px,transparent 4px 9px); }
#screen-content.pixel-out { animation: screen-glitch-out 220ms steps(5,end) forwards; }
#screen-content.pixel-out::before { opacity:1; animation: screen-glitch-bars 220ms steps(5,end) forwards; }
#screen-content.pixel-out::after { opacity:1; animation: screen-glitch-scan 220ms steps(5,end) forwards; }
#screen-content.pixel-in { animation: screen-glitch-in 320ms steps(7,end) forwards; }
#screen-content.pixel-in::before { opacity:1; animation: screen-glitch-bars-in 320ms steps(7,end) forwards; }
#screen-content.pixel-in::after { opacity:1; animation: screen-glitch-scan-in 320ms steps(7,end) forwards; }
@keyframes screen-glitch-out { 0% { opacity:1; transform:none; filter:none; clip-path:inset(0); } 25% { transform:translateX(-13px) skewX(3deg); filter:contrast(2.4) saturate(2.5) hue-rotate(-24deg); clip-path:inset(7% 0 63% 0); } 52% { transform:translateX(18px) skewX(-5deg); filter:contrast(3.1) saturate(3); clip-path:inset(40% 0 24% 0); } 78% { transform:translateX(-25px); filter:brightness(1.9) contrast(3.5); clip-path:inset(70% 0 3% 0); } 100% { opacity:.08; transform:translateX(10px); filter:blur(3px) contrast(3.2); clip-path:inset(0); } }
@keyframes screen-glitch-in { 0% { opacity:.08; transform:translateX(-18px); filter:blur(3px) contrast(3.2) saturate(3); clip-path:inset(60% 0 13% 0); } 24% { transform:translateX(20px) skewX(-5deg); clip-path:inset(16% 0 60% 0); } 50% { transform:translateX(-14px) skewX(3deg); filter:contrast(2.8) saturate(2.6); clip-path:inset(40% 0 27% 0); } 76% { transform:translateX(8px); filter:contrast(1.7) saturate(1.7); clip-path:inset(7% 0 7% 0); } 100% { opacity:1; transform:none; filter:none; clip-path:inset(0); } }
@keyframes screen-glitch-bars { 0% { transform:translateX(0); } 25% { transform:translateX(28px); } 50% { transform:translateX(-42px); } 75% { transform:translateX(34px); } 100% { transform:translateX(-9px); } }
@keyframes screen-glitch-bars-in { 0% { transform:translateX(-36px); } 28% { transform:translateX(42px); } 56% { transform:translateX(-25px); } 100% { opacity:0; transform:translateX(0); } }
@keyframes screen-glitch-scan { 0% { transform:translateY(0); } 35% { transform:translateY(-25px); } 68% { transform:translateY(34px); } 100% { opacity:.28; transform:translateY(0); } }
@keyframes screen-glitch-scan-in { 0% { transform:translateY(32px); } 45% { transform:translateY(-24px); } 100% { opacity:0; transform:translateY(0); } }
.rive-hit-button { z-index:1; }
.hit-enter { left:68.5%; top:57.8%; width:4.7%; height:8.6%; border-radius:50%; }
.show-transparency .preview-shell { background:repeating-conic-gradient(#c8c8c8 0% 25%,#fff 0% 50%) 0 0/32px 32px; }