:root { color-scheme: light; font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html, body { margin: 0; min-height: 100%; background: #fff; color: #050505; }
button { font: inherit; }
.stage { position: relative; min-height: 100svh; display: grid; place-items: center; padding: clamp(18px, 4vw, 64px); overflow: hidden; background:#071015; isolation:isolate; }
.ambient-fallback,.ambient-canvas { position:absolute; inset:0; width:100%; height:100%; }
.ambient-fallback { z-index:-2; background:#071015 url('./assets/visual-bg.webp') center/cover no-repeat; transform:scale(1.03); }
.ambient-canvas { z-index:-1; display:block; pointer-events:none; }
.portfolio { position: relative; width: min(1320px, 100%); height: min(760px, calc(100svh - clamp(36px, 8vw, 128px))); min-height: 560px; overflow: hidden; border: 12px solid rgba(255,255,255,.9); border-radius: 22px; background: #fafafa; isolation: isolate; box-shadow:0 28px 90px rgba(0,0,0,.34); }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(1); animation: hero-arrive 1.35s cubic-bezier(.2,.72,.2,1) both; }
.site-header { position: absolute; z-index: 2; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 40px 62px; font-size: 14px; animation: header-arrive .8s ease .45s both; }
.site-nav, .identity { display: flex; align-items: center; gap: 34px; }
.identity { gap: 30px; }
.identity strong { font-weight: 500; }
.ask-button { position: absolute; z-index: 4; left: 50%; bottom: 54px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; padding: 20px 34px; border: 0; border-radius: 999px; background: #fff; color: #050505; font-size: clamp(18px, 1.5vw, 26px); cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.08); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s, opacity .25s; animation: ask-arrive .72s cubic-bezier(.18,.85,.25,1) .85s both; }
.ask-button:hover { transform: translateX(-50%) translateY(-4px); box-shadow: 0 15px 40px rgba(0,0,0,.15); }
.ask-button.auto-nudge { animation: ask-nudge .78s cubic-bezier(.36,.07,.19,.97) both; transform-origin: 50% 70%; }
.ask-button svg { width: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.shade { position: absolute; z-index: 5; inset: 0; background: rgba(0,0,0,.36); opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.chat { position: absolute; z-index: 6; left: 50%; top: 50%; width: min(780px, calc(100% - 48px)); height: 70px; transform: translate(-50%, -36%) scale(.88); border-radius: 999px; background: #fff; opacity: 0; visibility: hidden; transition: opacity .28s ease, transform .55s cubic-bezier(.18,.85,.25,1), width .6s cubic-bezier(.18,.85,.25,1), height .6s cubic-bezier(.18,.85,.25,1), border-radius .5s ease, visibility 0s linear .55s; box-shadow: 0 25px 80px rgba(0,0,0,.18); }
.stage.chat-open .shade { opacity: 1; pointer-events: auto; }
.stage.chat-open .chat { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); transition-delay: 0s; }
.chat.has-conversation { width: min(720px, calc(100% - 48px)); height: min(580px, calc(100% - 56px)); border-radius: 26px; }
.stage.chat-open .ask-button { animation: none; opacity: 0; pointer-events: none; }
.chat-toolbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; opacity: 0; pointer-events: none; transition: opacity .25s ease .18s; }
.chat.has-conversation .chat-toolbar { opacity: 1; }
.history-tool, .minimize-tool { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #e5e5e5; border-radius: 50%; color: #777; background: #fff; }
.history-tool svg { width: 27px; height: 27px; }
.toolbar-right { display: flex; align-items: center; gap: 10px; }
.view-tools { display: flex; align-items: center; height: 48px; padding: 0 13px; border: 1px solid #e5e5e5; border-radius: 999px; color: #777; background: #fff; }
.view-tools svg { width: 27px; height: 27px; }
.view-tools i { width: 1px; height: 28px; margin: 0 12px; background: #e5e5e5; }
.minimize-tool svg { width: 24px; height: 24px; }
.history-tool svg, .view-tools svg, .minimize-tool svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: miter; }
.history-tool svg { stroke-linecap: round; stroke-linejoin: round; }
.conversation { height: calc(100% - 148px); overflow-y: auto; padding: 12px 24px 30px; scrollbar-width: thin; opacity: 0; pointer-events: none; transition: opacity .3s ease .22s; }
.chat.has-conversation .conversation { opacity: 1; pointer-events: auto; }
.empty-state { height: 100%; display: grid; place-items: center; color: #999; font-size: 15px; }
.composer { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 58px; display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid transparent; border-radius: 999px; background: #fff; transition: left .5s ease, right .5s ease, bottom .5s ease, border-color .25s, box-shadow .25s; }
.chat.has-conversation .composer { left: 14px; right: 14px; bottom: 14px; border-color: #e1e1e1; box-shadow: 0 3px 12px rgba(0,0,0,.08); }
.question-trigger { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 16px; border: 0; background: transparent; text-align: left; cursor: pointer; color: #555; }
.chevron { flex: 0 0 auto; width: 8px; height: 8px; margin: 0 5px 4px 12px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; }
.question-trigger[aria-expanded="true"] .chevron { margin-top: 5px; margin-bottom: 0; transform: rotate(225deg); }
.send-button { flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #000; color: #fff; font-size: 24px; cursor: pointer; transition: opacity .2s, transform .2s; }
.send-button:disabled { opacity: .14; cursor: default; }
.send-button:not(:disabled):hover { transform: translateY(-2px); }
.question-menu { position: absolute; left: 0; right: 0; bottom: 68px; padding: 8px; border: 1px solid #e3e3e3; border-radius: 18px; background: #fff; box-shadow: 0 16px 45px rgba(0,0,0,.14); }
.question-option { width: 100%; padding: 13px 14px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; }
.question-option:hover, .question-option:focus-visible { background: #f2f2f2; outline: none; }
.message-group { display: flex; flex-direction: column; gap: 24px; margin-bottom: 42px; }
.question-bubble { align-self: flex-end; max-width: 82%; padding: 10px 14px; border-radius: 999px; background: #000; color: #fff; font-size: 14px; line-height: 1.45; animation: bubble-in .38s cubic-bezier(.2,.8,.2,1) both; }
.answer { max-width: 84%; font-size: 16px; line-height: 1.75; letter-spacing: .01em; white-space: pre-wrap; }
.answer::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 3px; vertical-align: -.12em; background: #111; animation: blink .7s steps(1) infinite; }
.answer.done::after { display: none; }
.chat.busy .question-trigger, .chat.busy .send-button { pointer-events: none; opacity: .35; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes hero-arrive { from { opacity: 0; transform: scale(1.035); filter: grayscale(1) blur(7px); } to { opacity: 1; transform: scale(1); filter: grayscale(1) blur(0); } }
@keyframes header-arrive { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes ask-arrive { from { opacity: 0; transform: translate(-50%, 22px) scale(.88); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes ask-nudge {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  18% { transform: translateX(calc(-50% - 4px)) rotate(-1.8deg); }
  36% { transform: translateX(calc(-50% + 5px)) rotate(1.6deg); }
  54% { transform: translateX(calc(-50% - 3px)) rotate(-1.1deg); }
  72% { transform: translateX(calc(-50% + 2px)) rotate(.7deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-canvas { display:none; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}
@media (max-width: 720px) {
  .stage { padding: 0; }
  .portfolio { width: 100%; height: 100svh; min-height: 520px; border:0; border-radius: 0; }
  .hero-image { object-position: 58% center; }
  .site-header { padding: 24px 20px; font-size: 11px; }
  .site-nav { gap: 16px; }
  .identity { flex-direction: column; align-items: flex-end; gap: 3px; }
  .identity span { font-size: 10px; }
  .ask-button { bottom: 38px; padding: 16px 24px; }
  .chat { width: calc(100% - 28px); height: 66px; }
  .chat.has-conversation { width: calc(100% - 20px); height: min(680px, calc(100% - 28px)); border-radius: 22px; }
  .conversation { padding-inline: 16px; }
  .question-bubble { max-width: 92%; }
  .answer { max-width: 94%; font-size: 15px; }
  .question-menu { max-height: 47svh; overflow-y: auto; }
}

/* Embedded portfolio version: always fit the host's 16:9 showcase frame. */
html, body { width: 100%; height: 100%; overflow: hidden; }
.stage { width: 100%; height: 100svh; min-height: 0; padding: clamp(12px, 3.2vw, 40px); }
.portfolio { width: 100%; height: 100%; min-height: 0; }

body { position: fixed; inset: 0; }

/* Keep the original video frame, with its complete UI at 80% size. */
.portfolio { transform: scale(.8); transform-origin: center center; }

/* The embedded showcase uses the parent page's live scene through a transparent window. */
html.embedded-scene,html.embedded-scene body,html.embedded-scene .stage{background:transparent}
html.embedded-scene .ambient-fallback,html.embedded-scene .ambient-canvas{display:none!important}
html.embedded-scene .stage{display:flex;align-items:center;justify-content:center;padding:0}
html.embedded-scene .portfolio{flex:0 0 100%;width:100%;height:100%;max-width:none;margin:0;transform:translateY(2.8%) scale(.8);transform-origin:center center}
html.embedded-scene .hero-image,html.embedded-scene .site-header,html.embedded-scene .ask-button{animation:none}