/* First-screen portfolio showcase. Existing case studies keep their own layout. */
:root{--showcase-muted:#aaaab9;--showcase-line:#2a2937;--showcase-ink:#f4f2fa;--showcase-accent:#bba2ff;--showcase-panel:#12121d}
nav .nav-inner{max-width:1240px}
nav .logo{text-decoration:none;display:flex;align-items:center;gap:0}
nav .logo small{font-size:10px;font-weight:500;letter-spacing:.12em;color:var(--showcase-muted);margin-left:16px;padding-left:16px;border-left:1px solid var(--showcase-line)}
nav .links a{color:var(--showcase-muted)}
nav .links a:hover{color:var(--showcase-ink)}
nav .links a:first-child{color:var(--showcase-ink)}
.showcase{max-width:1240px;margin:0 auto;padding:96px 28px 28px;position:relative;z-index:2;color:var(--showcase-ink)}
.showcase-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:28px}
.showcase-eyebrow{display:flex;align-items:center;gap:12px;font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--showcase-muted);margin-bottom:16px}
.showcase-eyebrow>span:first-child{width:7px;height:7px;background:var(--showcase-accent);display:inline-block}
.showcase-eyebrow .eyebrow-separator{color:#626070;margin:0 2px}
.showcase h1{font-size:clamp(34px,4.2vw,52px);font-weight:700;line-height:1.24;letter-spacing:-.045em}
.showcase h1>span{color:var(--showcase-accent)}
.showcase-intro{padding-bottom:4px;flex-shrink:0}
.showcase-intro p{font-size:13px;line-height:1.9;color:var(--showcase-muted)}
.showcase-intro>a{display:inline-flex;gap:24px;align-items:center;color:var(--showcase-ink);font-size:13px;font-weight:500;text-decoration:none;border-bottom:1px solid #656071;margin-top:20px;padding-bottom:7px}
.showcase-intro>a span{color:var(--showcase-accent);font-size:20px}
.showcase-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px}
.showcase-work{display:flex;flex-direction:column;min-width:0;border:1px solid var(--showcase-line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;background:var(--showcase-panel);position:relative;transition:border-color .2s,transform .2s}
.showcase-work:hover{border-color:#74618f;transform:translateY(-3px)}
.showcase-work-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;position:relative;z-index:2;font-size:10px;letter-spacing:.1em;color:#b8b3c7}
.showcase-status{font-size:10px;letter-spacing:.02em;border:1px solid #484051;border-radius:4px;padding:3px 8px;color:#d0c8df}
.showcase-featured{background:linear-gradient(145deg,#222033 0%,#15151f 58%)}
.showcase-qixu{margin:8px 28px 20px;background:#0e1118;border:1px solid #3a3a4b;border-radius:9px;overflow:hidden;box-shadow:0 16px 40px #0003;transform:perspective(1100px) rotateY(-3deg) rotateX(2deg);transition:transform .35s}
.showcase-featured:hover .showcase-qixu{transform:perspective(1100px) rotateY(0) rotateX(0)}
.showcase-appbar{height:40px;padding:0 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #292c38;font-size:13px}
.showcase-app-icon,.showcase-agent>span{display:grid;place-items:center;color:#d6c6ff;background:#423359;border:1px solid #64537e;border-radius:6px;font-size:12px;font-weight:700;width:24px;height:24px}
.showcase-app-caption{font-size:10px;color:#a3a5b7;margin-left:8px}
.showcase-app-dot{width:5px;height:5px;border-radius:50%;background:#91c6b2;margin-left:auto}
.showcase-app-body{display:grid;grid-template-columns:1.15fr 1fr}
.showcase-conversation{padding:16px;border-right:1px solid #292c38;min-width:0}
.showcase-ui-label{display:flex;justify-content:space-between;gap:8px;color:#a3a5b7;font-size:10px;margin-bottom:12px}
.showcase-ui-label>span{font-size:9px;color:#a3a5b7}
.showcase-message{background:#242333;border:1px solid #3a3748;border-radius:8px 8px 2px 8px;padding:10px;font-size:11px;color:#dedce7;line-height:1.9}
.showcase-agent{display:flex;gap:10px;margin-top:14px;line-height:1.5;align-items:flex-start}
.showcase-agent>span{flex-shrink:0;width:22px;height:22px;font-size:10px}
.showcase-agent strong{font-size:11px;font-weight:500;color:#d5c5f8}
.showcase-agent p{font-size:10px;color:#a3a5b7;margin-top:6px;line-height:1.9}
.showcase-input{border-top:1px solid #292c38;margin-top:16px;padding-top:10px;display:flex;justify-content:space-between;font-size:9px;color:#a3a5b7}
.showcase-workflow{padding:16px 14px;min-width:0}
.showcase-step{display:flex;gap:8px;align-items:center;margin-top:9px;background:#191e26;border:1px solid #303b44;padding:8px;border-radius:6px}
.showcase-step i{font-style:normal;font-size:9px;color:#a3a5b7}
.showcase-step>span{font-size:10px;color:#dddfea}
.showcase-step small{display:block;font-size:9px;color:#a3a5b7;margin-top:3px}
.showcase-step b{font-size:11px;font-weight:500;color:#a4d4bf;margin-left:auto}
.showcase-step.is-risk{background:#2b2227;border-color:#63444b}
.showcase-step.is-risk small,.showcase-step.is-risk b{color:#e6b0b7}
.showcase-loop{font-size:9px;color:#a3a5b7;text-align:center;margin-top:13px}
.showcase-work-info{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;z-index:2;padding:0 24px 20px;margin-top:auto}
.showcase-work-type{font-size:10px;color:var(--showcase-accent);letter-spacing:.06em;margin-bottom:9px}
.showcase-work h2{font-size:21px;font-weight:600;line-height:1.45;letter-spacing:-.025em}
.showcase-featured h2{font-size:25px}
.showcase-featured h2>span{display:block;font-size:18px;font-weight:500;letter-spacing:0;margin-top:4px}
.showcase-work-info p:not(.showcase-work-type){font-size:11px;color:var(--showcase-muted);margin-top:7px}
.showcase-arrow{flex-shrink:0;width:34px;height:34px;border:1px solid #575064;border-radius:50%;display:grid;place-items:center;font-size:19px;color:#d3c3f8;transition:background .2s,color .2s}
.showcase-work:hover .showcase-arrow{background:var(--showcase-accent);color:#15121d}
.showcase-side{display:grid;grid-template-rows:1.15fr 1fr;gap:20px;min-width:0}
.showcase-scope{background:#162023}
.showcase-scope .showcase-work-top{padding:16px 20px;color:#aec8c4}
.showcase-scope .showcase-status{border-color:#425857;color:#c3d7d3}
.showcase-scope-visual{margin:0 20px;height:101px;position:relative;overflow:hidden;border:1px solid #496162;border-radius:5px;background:#eaf0f4}
.showcase-scope-visual img{display:block;width:100%;height:auto;transform:translateY(-12%);opacity:.9}
.showcase-scope-visual>span{position:absolute;bottom:8px;right:8px;font-size:9px;color:#dbeee9;background:#172d2ef2;border:1px solid #48625e;border-radius:4px;padding:4px 8px}
.showcase-scope .showcase-work-info{padding:14px 20px 18px}
.showcase-scope .showcase-work-info p{color:#b8c6c4}
.showcase-film{background:#291e20;isolation:isolate;min-height:215px}
.showcase-film-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:-2;transition:transform .6s}
.showcase-film::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#15101480 0%,#15101425 30%,#151014e8 100%);z-index:-1}
.showcase-film:hover .showcase-film-image{transform:scale(1.04)}
.showcase-film .showcase-work-top{padding:16px 20px;color:#f1e8e1}
.showcase-film .showcase-status{border-color:#d9c5b580;background:#20171380;color:#f1e8e1}
.showcase-play{width:35px;height:35px;display:grid;place-items:center;align-self:center;border-radius:50%;border:1px solid #f5e8dba0;background:#261b1460;backdrop-filter:blur(4px);font-size:24px;line-height:1;margin:2px 0 14px;padding-left:2px}
.showcase-film .showcase-work-info{padding:0 20px 18px}
.showcase-film h2{font-size:18px}
.showcase-film .showcase-work-info p{color:#d6c8c1}
.showcase-film .showcase-arrow{color:#f5e8db;border-color:#d9c5b580}
.showcase-bottom{margin-top:24px;padding-top:19px;border-top:1px solid var(--showcase-line);display:flex;align-items:center;justify-content:space-between;gap:20px}
.showcase-bottom p{font-size:11px;color:#d0cbdc}
.showcase-bottom p>span{color:var(--showcase-muted);margin-left:9px}
.showcase-bottom>div{display:flex;align-items:center;gap:24px}
.showcase-bottom a,.showcase-bottom button{display:inline-flex;align-items:center;gap:9px;color:var(--showcase-muted);font:inherit;font-size:11px;text-decoration:none;background:none;border:0;cursor:pointer;padding:8px 0}
.showcase-bottom a:hover,.showcase-bottom button:hover{color:var(--showcase-ink)}
.showcase a:focus-visible,.showcase button:focus-visible,nav a:focus-visible{outline:2px solid var(--showcase-accent);outline-offset:5px}
[id]{scroll-margin-top:90px}
@media(max-width:1024px){
  .showcase{padding-top:100px}
  .showcase-heading{gap:20px}
  .showcase h1{font-size:44px}
  .showcase-intro p{font-size:11px}
  .showcase-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
  .showcase-qixu{margin:18px 16px 26px;transform:none}
  .showcase-conversation{padding:14px 12px}
  .showcase-workflow{padding:14px 10px}
  .showcase-app-body{grid-template-columns:1fr 1fr}
  .showcase-step{gap:6px;padding:10px 6px}
  .showcase-step i{display:none}
  .showcase-work-top,.showcase-work-info{padding-left:20px;padding-right:20px}
  .showcase-bottom>div{gap:16px}
}
@media(max-width:768px){
  nav .nav-inner{padding:0 24px}
  nav .links{display:flex;gap:18px}
  nav .links a:nth-child(n+3){display:none}
  nav .logo small{display:none}
  .showcase{padding:96px 24px 24px}
  .showcase-heading{align-items:flex-start;flex-direction:column;gap:20px;margin-bottom:28px}
  .showcase-eyebrow{margin-bottom:18px}
  .showcase h1{font-size:clamp(31px,5.8vw,44px)}
  .showcase-intro{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;flex-shrink:1}
  .showcase-intro p{font-size:12px}
  .showcase-intro>a{flex-shrink:0;margin-top:0;font-size:12px;gap:12px}
  .showcase-grid{grid-template-columns:1fr}
  .showcase-featured h2>span{display:inline;margin-left:10px;font-size:16px}
  .showcase-qixu{margin:8px 24px 24px}
  .showcase-app-body{grid-template-columns:1.15fr 1fr}
  .showcase-step i{display:block}
  .showcase-conversation,.showcase-workflow{padding:18px}
  .showcase-side{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:16px}
  .showcase-scope-visual{height:100px}
  .showcase-side .showcase-work-top{padding:14px;font-size:8px;gap:8px}
  .showcase-side .showcase-status{font-size:9px;padding:2px 5px}
  .showcase-side .showcase-work-info{padding:14px;gap:8px}
  .showcase-side h2{font-size:16px}
  .showcase-side .showcase-work-info p{font-size:10px}
  .showcase-scope-visual{margin:0 14px}
  .showcase-arrow{width:28px;height:28px;font-size:17px}
  .showcase-bottom{align-items:flex-start;flex-direction:column;gap:8px;margin-top:20px;padding-top:14px}
  .showcase-bottom>div{width:100%;justify-content:space-between;gap:8px}
}
@media(max-width:480px){
  nav .nav-inner{padding:0 20px}
  nav .links{gap:16px}
  nav .links a{font-size:12px}
  .showcase{padding:90px 20px 20px}
  .showcase h1{font-size:clamp(29px,7.6vw,36px)}
  .showcase-intro{display:block}
  .showcase-intro>a{margin-top:14px}
  .showcase-work-top{padding:16px}
  .showcase-qixu{margin:6px 12px 24px}
  .showcase-appbar{padding:0 12px}
  .showcase-app-caption{font-size:9px;margin-left:3px}
  .showcase-app-body{grid-template-columns:1fr}
  .showcase-conversation{padding:16px;border-right:0}
  .showcase-ui-label{margin-bottom:12px}
  .showcase-message{font-size:12px;padding:10px 12px}
  .showcase-agent{margin-top:14px}
  .showcase-agent p{font-size:11px}
  .showcase-input{margin-top:16px}
  .showcase-workflow{display:none}
  .showcase-featured .showcase-work-info{padding:0 16px 20px}
  .showcase-featured h2{font-size:24px}
  .showcase-featured h2>span{display:block;margin:4px 0 0;font-size:15px}
  .showcase-work-info p:not(.showcase-work-type){font-size:10px}
  .showcase-side{grid-template-columns:1fr;gap:16px}
  .showcase-scope-visual{height:120px}
  .showcase-side .showcase-work-top{padding:16px;font-size:10px}
  .showcase-side .showcase-work-info{padding:16px}
  .showcase-side h2{font-size:19px}
  .showcase-side .showcase-work-info p{font-size:11px}
  .showcase-film{min-height:240px}
  .showcase-play{margin:16px 0 24px}
  .showcase-bottom a,.showcase-bottom button{font-size:10px;gap:4px}
  .showcase-bottom p{font-size:10px}
  .showcase-bottom p>span{margin-left:4px}
}
@media(prefers-reduced-motion:reduce){
  .showcase *{animation:none!important;transition:none!important;transform:none!important}
}

/* A quieter persistent entry point beside the work. */
.chat-bubble{width:50px;height:50px;font-size:22px;bottom:24px;right:24px}
.chat-bubble .pulse-ring{display:none}
@media(max-width:480px){.chat-bubble{width:44px;height:44px;right:14px;bottom:14px;font-size:20px}}