.scene{
  container:scene / inline-size;
  position:relative;
  --c-carole:#1B9E6B;
  --c-thibault:#7B5CE0;
  --c-alba:#E08A2E;
  --scene-ease:cubic-bezier(.45,0,.2,1);
  --sl-bg:#FFFFFF;
  --sl-card:#F2F5F9;
  --sl-text:#2F353E;
  --sl-text-2:#484F5D;
  --sl-text-3:#626B7D;
  --sl-border:#E1E5EB;
  --sl-stroke:#D3D9E2;
  --sl-accent:#0040DE;
  --sl-accent-soft:#EEF3FE;
  --sl-bar:#0040DE;
  --sl-bar-prev:#B5C7FB;
  --sl-metric-accent:#0040DE;
  --sl-shadow:0 1px 3px rgba(20,30,50,.12), 0 8px 24px rgba(20,30,50,.10);
}
@media (prefers-color-scheme: dark){
  .scene{
    --sl-bg:#151A22;
    --sl-card:#2A313D;
    --sl-text:#F2F5F9;
    --sl-text-2:#D3D9E2;
    --sl-text-3:#A6AEBC;
    --sl-border:#333B47;
    --sl-stroke:#3A4250;
    --sl-accent:#6B8AF7;
    --sl-accent-soft:rgba(107,138,247,.18);
    --sl-bar:#6B8AF7;
    --sl-bar-prev:rgba(107,138,247,.38);
    --sl-metric-accent:#6B8AF7;
    --sl-shadow:0 0 0 1px rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.45);
  }
}

.win{
  position:relative; overflow:hidden; border-radius:max(14px, 3cqw);
  background:var(--ui-surface); border:1px solid var(--ui-border); box-shadow:var(--shadow-raised);
}
.sk{ display:block; width:var(--w, 100%); height:.8cqw; border-radius:.4cqw; background:var(--ui-surface-2); flex-shrink:0; }

.win-top{ display:flex; align-items:center; gap:1.4cqw; height:5.4cqw; padding:0 1.8cqw; }
.win-logo{ width:2.2cqw; height:2.2cqw; }
.win-deck{ font-family:var(--font-regular); font-size:1.3cqw; color:var(--ui-text); white-space:nowrap; }
.win-top-end{ margin-left:auto; display:flex; align-items:center; gap:1.4cqw; }
.win-avatars{ display:flex; align-items:center; }
.win-avatar{
  position:relative; width:2.6cqw; height:2.6cqw; border-radius:50%;
  display:flex; align-items:center; justify-content:center; line-height:1; text-align:center;
  background:var(--c); color:#FFFFFF; font-family:var(--font-regular); font-size:1.05cqw;
  border:max(1.5px, .2cqw) solid var(--ui-surface); box-sizing:content-box;
  box-shadow:0 1px 3px rgba(20,30,50,.18), 0 2px 8px rgba(20,30,50,.10);
}
.win-avatar + .win-avatar{ margin-left:-.8cqw; }
.win-avatar--alba{ transform:scale(0); margin-left:-3cqw !important; transition:transform .35s cubic-bezier(.3,1.5,.5,1), margin-left .35s var(--scene-ease); }
.s5a .win-avatar--alba{ transform:scale(1); margin-left:-.8cqw !important; }
.win-share{
  display:flex; align-items:center; height:2.8cqw; padding:0 1.3cqw; border-radius:.9cqw;
  background:var(--ui-accent); color:#FFFFFF; font-family:var(--font-display); font-size:1.1cqw;
}

.win-body{ display:flex; background:var(--ui-surface); }
.win-rail{
  width:12cqw; flex-shrink:0; display:flex; flex-direction:column; gap:1.2cqw; padding:1.8cqw 1.6cqw;
  background:var(--ui-surface);
}
.win-thumb{
  position:relative; display:flex; flex-direction:column; gap:.5cqw; aspect-ratio:16/9; padding:.9cqw;
  border-radius:.6cqw; background:var(--sl-bg); border:1px solid var(--sl-border);
  --ui-surface-2:var(--sl-card);
}
.win-thumb .sk{ height:.55cqw; }
.win-thumb.is-active{ outline:.22cqw solid var(--ui-accent); outline-offset:.25cqw; }
.thumb-mini{ position:absolute; inset:0; container-type:inline-size; overflow:hidden; border-radius:inherit; background:var(--sl-bg); }
.win-thumb-cards{ flex:1; display:flex; gap:.4cqw; margin-top:.2cqw; }
.win-thumb-cards > span{ flex:1; border-radius:.35cqw; background:var(--sl-card); }

.thumb-presence{ position:absolute; right:.45cqw; bottom:.45cqw; display:flex; align-items:center; gap:.25cqw; }
.thumb-av{
  width:1.9cqw; height:1.9cqw; border-radius:50%; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; line-height:1;
  background:var(--c); color:#FFFFFF; font-family:var(--font-regular); font-size:.95cqw;
  box-shadow:0 0 0 .15cqw var(--sl-bg);
  transition:width .35s var(--scene-ease), margin .35s var(--scene-ease), transform .35s var(--scene-ease), opacity .3s ease;
}
.s3x .thumb-av--carole-out{ width:0; margin-left:-.25cqw; transform:translateY(1.4cqw) scale(.5); opacity:0; transition-delay:.5s; }
.thumb-av--carole-in{ transform:translateY(-1.6cqw) scale(.5); opacity:0; }
.s3x .thumb-av--carole-in{ transform:none; opacity:1; transition-delay:.8s; }
.thumb-av--alba{ width:0; margin-right:-.25cqw; transform:scale(0); }
.s5a .thumb-av--alba{ width:1.9cqw; margin-right:0; transform:none; transition-timing-function:var(--scene-ease), var(--scene-ease), cubic-bezier(.3,1.5,.5,1), ease; }
.win-stage{
  flex:1; min-width:0; display:flex; align-items:center; justify-content:center; padding:3.6cqw;
  background:var(--ui-canvas); border-top:1px solid var(--ui-border);
}
.win-rail + .win-stage{ border-left:1px solid var(--ui-border); border-top-left-radius:max(12px, 2.4cqw); }

@container scene (max-width:520px){
  .win-rail{ display:none; }
  .win-stage{ padding:3cqw; }
  .win-rail + .win-stage{ border-left:0; border-top-left-radius:0; }
}

.scene-slide{
  container:slide / inline-size;
  position:relative; width:100%; aspect-ratio:16/9;
  background:var(--sl-bg); border-radius:max(8px, 2cqw); box-shadow:var(--sl-shadow);
}
.scene-shot{ position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; object-fit:cover; }

.standin{
  position:absolute; inset:0; display:flex; flex-direction:column; padding:2.5cqw;
  font-family:var(--font-sans); color:var(--sl-text);
}
.standin-head{ height:6.56cqw; flex-shrink:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:.7cqw; padding-bottom:1.25cqw; }
.standin-tag{ padding:.2cqw .7cqw; border-radius:.35cqw; background:var(--sl-accent-soft); color:var(--sl-accent); font-family:var(--font-regular); font-size:.94cqw; }
.standin-title{ position:relative; margin:0; font-family:var(--font-display); font-size:2.9cqw; line-height:1.1; letter-spacing:-.01em; white-space:nowrap; }
.standin-body{ flex:1; min-height:0; display:grid; grid-template-columns:2fr 1fr; gap:1.25cqw; }
.standin-card{ position:relative; display:flex; flex-direction:column; border-radius:1.25cqw; padding:1.67cqw; background:var(--sl-card); }
.standin-kpis{ display:flex; flex-direction:column; gap:1.25cqw; }
.standin-metric{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3cqw;
  padding:1.9cqw 1cqw; border-radius:1.25cqw; background:var(--sl-card); text-align:center;
}
.metric-value{ font-family:var(--font-display); font-size:3.54cqw; line-height:1.1; color:var(--sl-accent); }
.metric-label{ font-family:var(--font-display); font-size:1.67cqw; line-height:1.25; color:var(--sl-text); }
.metric-desc{ font-family:var(--font-display); font-size:1.67cqw; line-height:1.25; color:var(--sl-text-3); }
.standin-metric--accent{ background:var(--sl-metric-accent); }
.standin-metric--accent .metric-value, .standin-metric--accent .metric-label{ color:#FFFFFF; }
.standin-metric--accent .metric-desc{ color:rgba(255,255,255,.85); }

.chart-head{ display:flex; align-items:center; justify-content:space-between; }
.chart-title{ font-family:var(--font-regular); font-size:1.3cqw; }
.chart-legend{ display:flex; gap:1cqw; font-family:var(--font-regular); font-size:1.05cqw; color:var(--sl-text-3); }
.lg{ display:inline-flex; align-items:center; gap:.4cqw; }
.lg::before{ content:''; width:.8cqw; height:.8cqw; border-radius:.2cqw; background:currentColor; }
.lg--cur::before{ background:var(--sl-bar); }
.lg--prev::before{ background:var(--sl-bar-prev); }
.lg--prev{ opacity:0; transition:opacity .4s ease; }
.chart-plot{
  flex:1; min-height:0; display:flex; align-items:flex-end; gap:3cqw; margin-top:2.6cqw; padding:0 2cqw;
  border-bottom:1px solid var(--sl-stroke);
}
.bar-group{ flex:1; height:100%; display:flex; align-items:flex-end; justify-content:center; gap:.7cqw; }
.bar{ position:relative; height:calc(var(--v) * 100%); border-radius:.6cqw .6cqw 0 0; }
.bar::before{
  content:attr(data-value); position:absolute; left:50%; bottom:100%; transform:translate(-50%, -.45cqw);
  font-family:var(--font-regular); font-size:1.05cqw; color:var(--sl-text-2); white-space:nowrap;
}
.bar--cur{ width:11cqw; background:var(--sl-bar); transition:width .6s var(--scene-ease); }
.bar--prev{ background:var(--sl-bar-prev); width:0; margin-right:-.7cqw; transform:scaleY(.2); transform-origin:bottom; transition:width .6s var(--scene-ease), margin-right .6s var(--scene-ease), transform .6s .15s var(--scene-ease); }
.bar--prev::before{ opacity:0; transition:opacity .3s ease; }
.chart-x{ display:flex; gap:3cqw; padding:.7cqw 2cqw 0; }
.chart-x > span{ flex:1; text-align:center; font-family:var(--font-regular); font-size:1.05cqw; color:var(--sl-text-3); }

.s8 .bar--cur{ width:5.4cqw; }
.s8 .bar--prev{ width:5.4cqw; margin-right:0; transform:none; }
.s8 .bar--prev::before, .s8 .lg--prev{ opacity:1; transition-delay:.5s; }

.standin-title .typed{ white-space:pre; }
.c-text .typed{ white-space:pre-wrap; }
.c-mention:empty{ display:none; }


.caret{ display:none; position:relative; width:2px; height:1em; margin-left:1px; vertical-align:-.12em; border-radius:1px; background:var(--c); }
.caret--carole{ --c:var(--c-carole); }
.caret--thibault{ --c:var(--c-thibault); }
.caret-flag{
  position:absolute; left:0; bottom:calc(100% - 3px);
  width:clamp(15px, 1.9cqw, 22px); height:clamp(15px, 1.9cqw, 22px); border-radius:50% 50% 50% 0;
  display:grid; place-items:center; background:var(--c); color:#FFFFFF;
  font-family:var(--font-regular); font-size:clamp(8px, .95cqw, 11px); letter-spacing:0; line-height:1;
}
.s2 .caret--carole{ display:inline-block; }
.s3e .caret--carole{ display:none; }
.s5t .caret--thibault{ display:inline-block; }
.s6 .caret--thibault{ display:none; }

@property --rot{ syntax:'<angle>'; inherits:true; initial-value:0deg; }
.cursor{
  --cw:clamp(18px, 2.4cqw, 26px); --rot:0deg;
  position:absolute; z-index:6; left:var(--x0); top:var(--y0); opacity:0; pointer-events:none;
  transition:left 1.1s var(--scene-ease), top 1.1s var(--scene-ease), opacity .3s ease, --rot .3s ease;
}
.cursor[data-cursor-path]{ transition-duration:.65s, .65s, .3s, .3s; }
.cursor svg{
  display:block; width:var(--cw); height:auto; overflow:visible; fill:var(--c); stroke:#FFFFFF; stroke-width:1;
  transform:rotate(var(--rot)); transform-origin:top left;
}
.cursor-label{
  position:absolute; top:calc(var(--cw) * .8); left:calc(var(--cw) * .55); white-space:nowrap;
  padding:max(3px, .3cqw) max(8px, .75cqw); border-radius:max(6px, .6cqw); background:var(--c); color:#FFFFFF;
  font-family:var(--font-regular); font-size:clamp(10px, 1.2cqw, 13px); box-shadow:0 2px 6px rgba(20,30,50,.22);
}
@keyframes cursor-press-a{ 40%{ transform:rotate(var(--rot, 0deg)) scale(.85); } }
@keyframes cursor-press-b{ 40%{ transform:rotate(var(--rot, 0deg)) scale(.85); } }
.cursor--carole{ --x0:106%; --y0:34%; }
.cursor--thibault{ --x0:58%; --y0:112%; }
.cursor--alba{ --x0:108%; --y0:84%; }

.scene-slide .cursor{ --cw:clamp(18px, 3.1cqw, 26px); }
.scene-slide .cursor-label{ padding:max(3px, .4cqw) max(8px, 1cqw); border-radius:max(6px, .8cqw); font-size:clamp(10px, 1.55cqw, 13px); }

.s1 .cursor--carole{ left:14.5%; top:12.5%; opacity:1; transition-duration:.75s, .75s, .3s, .3s; }
.s2 .cursor--carole svg{ animation:cursor-press-a .3s ease; }
.s2 .cursor--carole{ left:42.5%; opacity:0; transition:left 0s .5s, top 0s .5s, opacity .2s ease .3s; }
.s3e .cursor--carole{ opacity:1; transition:left 1.1s var(--scene-ease), top 1.1s var(--scene-ease), opacity .3s ease; }
.s3m .cursor--carole{ left:47%; top:23%; }
.s3x .cursor--carole{ left:112%; top:34%; opacity:0; transition:left 1.2s var(--scene-ease), top 1.2s var(--scene-ease), opacity .4s ease .8s; }
.s4 .cursor--thibault{ left:38%; top:54%; opacity:1; }
.s5 .cursor--thibault{ left:64.5%; top:18%; transition-duration:.65s, .65s, .3s, .3s; }
.s5c .cursor--thibault svg{ animation:cursor-press-a .3s ease; }
.s5t .cursor--thibault{ opacity:0; }
.s5a .cursor--alba{ left:90%; top:70%; opacity:1; }
.s7m .cursor--alba{ left:27%; top:72%; }
.s8 .cursor--alba svg{ animation:cursor-press-a .3s ease; }

.comment-pin{
  position:absolute; z-index:4; left:65%; top:16.1%;
  width:clamp(16px, 2.2cqw, 24px); height:clamp(16px, 2.2cqw, 24px);
  display:grid; place-items:center; border-radius:50% 50% 50% 0; border:2px solid var(--sl-bg);
  background:var(--c); color:#FFFFFF; font-family:var(--font-regular); font-size:clamp(8px, .95cqw, 11px);
  box-shadow:0 2px 6px rgba(20,30,50,.3);
  transform:translate(-50%, -50%) rotate(-45deg) scale(0); transition:transform .35s cubic-bezier(.3,1.6,.5,1);
}
.s5c .comment-pin{ transform:translate(-50%, -50%) rotate(0deg) scale(1); }

.comment-card{
  position:absolute; z-index:5; left:67%; top:21%; width:clamp(168px, 34cqw, 250px);
  padding:max(8px, .9cqw); border-radius:8px; background:var(--ui-surface); border:1px solid var(--ui-border);
  box-shadow:var(--shadow-popover);
  font-family:var(--font-sans); font-size:clamp(9px, 1.1cqw, 12px); line-height:1.4; color:var(--ui-text);
  opacity:0; transform:translateY(6px) scale(.97); transform-origin:top left;
  transition:opacity .3s ease .2s, transform .35s var(--scene-ease) .2s;
}
.s5c .comment-card{ opacity:1; transform:none; }
.c-msg{ display:flex; gap:max(6px, .7cqw); align-items:flex-start; }
.c-av{
  width:clamp(16px, 2cqw, 22px); height:clamp(16px, 2cqw, 22px); border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; background:var(--c); color:#FFFFFF; font-family:var(--font-regular); font-size:.85em; line-height:1;
}
.c-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.c-head{ display:flex; align-items:baseline; gap:6px; }
.c-author{ font-family:var(--font-regular); }
.c-date{ font-size:.85em; color:var(--ui-muted); }
.c-mention{ color:var(--ui-accent); background:var(--ui-accent-soft); border-radius:4px; padding:0 3px; white-space:nowrap; }

.c-typing{
  display:flex; align-items:center; gap:6px; height:0; overflow:hidden; opacity:0;
  font-size:.9em; color:var(--ui-muted); transition:height .3s ease, opacity .3s ease, margin .3s ease;
}
.c-typing-dots{ display:inline-flex; gap:2px; }
.c-typing-dots i{ width:4px; height:4px; border-radius:50%; background:var(--c-alba); animation:scene-dot 1s ease-in-out infinite; }
.c-typing-dots i:nth-child(2){ animation-delay:.15s; }
.c-typing-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes scene-dot{ 0%, 60%, 100%{ transform:none; opacity:.4; } 30%{ transform:translateY(-2px); opacity:1; } }
.s6 .c-typing{ height:1.6em; opacity:1; margin-top:max(6px, .7cqw); }
.s7 .c-typing{ height:0; opacity:0; margin-top:0; }

.c-reply{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--scene-ease); }
.c-reply-inner{ min-height:0; overflow:hidden; }
.c-reply .c-msg{ margin-top:max(6px, .7cqw); padding-top:max(6px, .7cqw); border-top:1px solid var(--ui-border); opacity:0; transition:opacity .3s ease .15s; }
.s7 .c-reply{ grid-template-rows:1fr; }
.s7 .c-reply .c-msg{ opacity:1; }

@container slide (max-width:480px){
  .comment-card{ left:auto; right:1.5%; top:24%; width:min(64%, 220px); }
}

.scene--panel .win-body{ position:relative; height:60cqw; }
.scene--panel .win-stage{ flex-direction:column; align-items:stretch; justify-content:flex-start; padding:3cqw 3cqw 2cqw; }
.scene--panel .scene-slide{ flex-shrink:0; margin:auto 0; }

.win-modes{
  flex-shrink:0; align-self:center; display:flex; gap:.4cqw; margin-top:1.6cqw; padding:.4cqw;
  border:1px solid var(--ui-border); border-radius:1.4cqw; background:var(--ui-surface); box-shadow:var(--shadow-sm);
}
.win-mode{ width:4cqw; height:4cqw; display:grid; place-items:center; border-radius:1cqw; color:var(--ui-muted); }
.win-mode .icon{ font-size:1.9cqw; }
.win-mode.is-active{ background:var(--ui-accent-soft); color:var(--ui-accent); }

.win-panel{
  position:relative; width:29cqw; flex-shrink:0; background:var(--ui-canvas);
  border-top:1px solid var(--ui-border); border-right:1px solid var(--ui-border); border-top-right-radius:max(12px, 2.4cqw);
}
.win-panel-inner{
  position:absolute; inset:2.2cqw 2cqw 2.2cqw 0; display:flex; flex-direction:column; overflow:hidden;
  border-radius:max(10px, 2cqw); background:var(--ui-surface); box-shadow:var(--shadow-sm);
  font-family:var(--font-sans); font-size:max(10.5px, 1.25cqw); line-height:1.45; color:var(--ui-text);
}
.win-panel-head{
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:.85em 1.1em; border-bottom:1px solid var(--ui-border);
  font-family:var(--font-display); font-size:1.05em;
}
.win-panel-dots{ display:flex; gap:.2em; }
.win-panel-dots i{ width:.28em; height:.28em; border-radius:50%; background:var(--ui-muted); }

.win-icons{
  width:5cqw; flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:2.3cqw;
  padding:2.4cqw 0; background:var(--ui-surface); color:var(--ui-muted);
}
.win-icons .icon{ font-size:1.8cqw; }
.win-icons .is-active{ color:var(--ui-accent); }
.win-icons-dot{ position:relative; display:flex; }
.win-icons-dot::after{
  content:''; position:absolute; top:-.3cqw; right:-.5cqw; width:.8cqw; height:.8cqw; border-radius:50%;
  background:var(--ui-accent); box-shadow:0 0 0 .15cqw var(--ui-surface);
}
.win-icons-omega{
  width:2cqw; height:2cqw; background:currentColor;
  -webkit-mask:url("../assets/logo/logo-ai-regular.svg") center / contain no-repeat;
  mask:url("../assets/logo/logo-ai-regular.svg") center / contain no-repeat;
}
.win-icons-omega.is-active{ -webkit-mask:none; mask:none; background:url("../assets/logo/logo-ai.svg") center / contain no-repeat; }

@container scene (max-width:560px){
  .scene--panel .win-body{ height:max(230px, 78cqw); }
  .scene--panel .win-icons, .scene--panel .win-modes{ display:none; }
  .scene--panel .win-stage{ padding:2.5cqw; }
  .scene--panel .win-panel{ width:46.5cqw; border-right:0; border-top-right-radius:0; }
  .scene--panel .win-panel-inner{ inset:3cqw 3.5cqw 3cqw 0; font-size:9px; border-radius:10px; }
}


.op-chat{
  position:relative; flex:1; min-height:0; overflow:hidden; padding:1em 1.1em .4em;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 1em);
  mask-image:linear-gradient(to bottom, transparent 0, #000 1em);
}
.op-thread{ display:flex; flex-direction:column; gap:1.2em; }
.op-logo{ display:block; flex-shrink:0; width:1.5em; height:1.5em; background:url("../assets/logo/logo-ai.svg") center / contain no-repeat; }
.op-idle{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8em;
  padding:0 1.5em; text-align:center; color:var(--ui-muted); transition:opacity .3s ease;
}
.op-idle .op-logo{ width:2.4em; height:2.4em; }
.o4 .op-idle{ opacity:0; }

@keyframes op-in{ from{ opacity:0; transform:translateY(.5em); } to{ opacity:1; transform:none; } }
@keyframes op-sent{ from{ opacity:0; transform:translateY(1.6em) scale(.97); } to{ opacity:1; transform:none; } }
.op-user{ display:none; justify-content:flex-end; transform-origin:right bottom; }
.o4 .op-user{ display:flex; animation:op-sent .5s cubic-bezier(.2,.8,.2,1); }
.op-bubble{ max-width:88%; padding:.55em .75em; border-radius:.8em; background:var(--ui-surface-2); }

.op-ai{ display:none; flex-direction:column; gap:.5em; }
.o5 .op-ai{ display:flex; animation:op-in .35s var(--scene-ease); }
.op-activity{ display:flex; align-items:center; gap:.4em; font-size:.92em; color:var(--ui-muted); }
.op-activity .icon{ font-size:.8em; }
.op-steps{ display:flex; flex-direction:column; gap:.55em; }
.op-step{ position:relative; display:none; align-items:flex-start; gap:.6em; color:var(--ui-muted); }
.o5 .op-step--1, .o5b .op-step--2, .o6 .op-step--3, .o6b .op-step--4{ display:flex; animation:op-in .3s var(--scene-ease); }
.op-dot, .op-check{ flex-shrink:0; width:1em; height:1em; margin-top:.22em; }
.op-dot{ position:relative; }
.op-dot::before{ content:''; position:absolute; inset:.2em; border-radius:50%; background:var(--ui-muted); animation:op-pulse-dot 1.4s ease-in-out infinite; }
@keyframes op-pulse-dot{ 0%, 100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.55); opacity:.35; } }
.op-check{ display:none; color:var(--ui-muted); }
.op-step > span{
  background-image:linear-gradient(90deg, var(--ui-muted), var(--ui-border-strong) 50%, var(--ui-muted));
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; animation:op-shimmer 1.6s linear infinite;
}
@keyframes op-shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
.o5b .op-step--1 .op-dot, .o6 .op-step--2 .op-dot, .o6b .op-step--3 .op-dot, .o7 .op-step--4 .op-dot{ display:none; }
.o5b .op-step--1 .op-check, .o6 .op-step--2 .op-check, .o6b .op-step--3 .op-check, .o7 .op-step--4 .op-check{ display:block; }
.o5b .op-step--1 > span, .o6 .op-step--2 > span, .o6b .op-step--3 > span, .o7 .op-step--4 > span{
  animation:none; background:none; color:inherit; -webkit-text-fill-color:currentColor;
}
.o6 .op-step--2, .o6b .op-step--3, .o7 .op-step--4{ color:var(--ui-text); }
.op-step::before{ content:''; position:absolute; left:.5em; top:1.55em; bottom:-.5em; width:1px; background:var(--ui-border); opacity:0; }
.o5b .op-step--1::before, .o6 .op-step--2::before, .o6b .op-step--3::before{ opacity:1; }
.op-final{ display:none; margin:.3em 0 0; padding-top:.7em; border-top:1px solid var(--ui-border); }
.o7 .op-final{ display:block; animation:op-in .4s var(--scene-ease); }
.op-final p, .op-final ul{ margin:0; }
.op-final ul{ margin-top:.45em; padding-left:1.2em; list-style:disc; }
.op-final li + li{ margin-top:.3em; }
.op-final-more{ display:none; margin-top:.6em !important; }
.o7b .op-final-more{ display:block; animation:op-in .4s var(--scene-ease); }
.op-foot{ display:flex; align-items:center; min-height:1.5em; }
.op-foot{ padding-bottom:.4em; }
.op-foot .op-logo{ width:1.3em; height:1.3em; }
.o5 .op-foot .op-logo{ animation:op-pulse-logo 1.3s ease-in-out infinite; }
.o7 .op-foot .op-logo{ animation:none; }
@keyframes op-pulse-logo{ 0%, 100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.85); opacity:.5; } }

.op-composer{
  flex-shrink:0; margin:1em .55em .6em; padding:.55em .55em .4em;
  border:1px solid var(--ui-border); border-radius:1em; background:var(--ui-surface);
  transition:border-color .2s ease;
}
.o1 .op-composer{ border-color:var(--ui-border-strong); transition-delay:.6s; }
.o1c .op-composer{ border-color:var(--ui-accent); transition-delay:0s; }
.o8 .op-composer{ border-color:var(--ui-border); }
.op-input{ display:block; min-height:2.9em; padding:.2em .3em 0; overflow:hidden; }
.op-placeholder{ display:inline-block; max-width:100%; vertical-align:top; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ui-muted); }
.o2 .op-placeholder{ display:none; }
.o4 .op-placeholder{ display:inline-block; }
.o4 .op-input .typed{ display:none; }
.op-caret{ display:none; width:1.5px; height:1.15em; margin:0 -1.5px 0 0; vertical-align:-.22em; background:var(--ui-accent); animation:scene-blink 1.1s steps(1) infinite; }
@keyframes scene-blink{ 50%{ opacity:0; } }
.o1c .op-caret{ display:inline-block; }
.o8 .op-caret{ display:none; }
.op-input .typed{ white-space:pre-wrap; }
.op-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2em; }
.op-attach, .op-send{ width:2.3em; height:2.3em; display:grid; place-items:center; border-radius:.8em; }
.op-attach{ color:var(--ui-muted); font-size:1.05em; }
.op-send{ background:var(--ui-accent); color:#FFFFFF; opacity:.4; transition:opacity .2s ease, transform .15s ease, background .15s ease; }
.op-send .icon{ font-size:.95em; }
.o2 .op-send{ opacity:1; }
.o3 .op-send{ background:var(--ui-accent-hover); transition-delay:.6s; }
.o3c .op-send{ transform:scale(.9); transition-delay:0s; }
.o4 .op-send{ transform:none; opacity:.4; background:var(--ui-accent); }

.mix-grid{ flex:1; min-height:0; display:flex; flex-direction:column; margin-top:1.3cqw; }
.mix-row{
  position:relative; flex:1; display:grid; grid-template-columns:30% 1fr 1fr; align-items:center;
  border-top:1px solid var(--sl-stroke); font-family:var(--font-regular); font-size:1.75cqw; color:var(--sl-text);
  transition:border-color .4s ease;
}
.mix-row--head{ flex:0 0 auto; padding-bottom:.8cqw; border-top:0; font-size:1.3cqw; color:var(--sl-text-3); transition:opacity .3s ease; }
.mix-cell{ text-align:right; padding-right:1.2cqw; transition:opacity .3s ease; }
.mix-bar{
  position:absolute; left:30%; top:50%; height:50%; width:0; transform:translateY(-50%);
  border-radius:0 .6cqw .6cqw 0; background:var(--sl-bar);
  transition:width .6s var(--scene-ease) calc(var(--i) * 90ms), background-color .45s ease;
}
.mix-bar::after{
  content:attr(data-value); position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:.8cqw;
  white-space:nowrap; font-family:var(--font-regular); font-size:1.5cqw; color:var(--sl-text-2);
  opacity:0; transition:opacity .3s ease;
}
@keyframes scene-ai-pulse{ 0%, 100%{ opacity:.3; } 50%{ opacity:.75; } }
.o5b .mix-grid{ animation:scene-ai-pulse 1.1s ease-in-out infinite; }
.o6 .mix-grid{ animation:none; }
.o6 .mix-cell, .o6 .mix-row--head{ opacity:0; }
.o6 .mix-row{ border-color:transparent; }
.o6 .mix-bar{ width:calc(var(--v) * 48%); }
.o6 .mix-bar::after{ opacity:1; transition-delay:calc(.45s + var(--i) * 90ms); }
.o6b .mix-row:not(.mix-row--top) .mix-bar{ background-color:var(--sl-bar-prev); }
.o6b .mix-row--top .mix-label, .o6b .mix-row--top .mix-bar::after{ font-family:var(--font-display); color:var(--sl-accent); }
.mix-title{ display:grid; }
.mix-title > span{ grid-area:1 / 1; transition:opacity .35s ease; }
.mix-title-new{ opacity:0; font-family:var(--font-display); }
.o7 .mix-title-old{ opacity:0; }
.o7 .mix-title-new{ opacity:1; }

.ai-review{
  position:absolute; z-index:5; left:65%; top:16.1%; display:flex; gap:2px;
  padding:max(3px, .3cqw); border-radius:max(7px, .65cqw); background:var(--ui-surface); box-shadow:var(--shadow-popover);
  font-family:var(--font-sans); font-size:clamp(9px, 1.9cqw, 12px); line-height:1; white-space:nowrap;
  opacity:0; transform:translate(-100%, calc(-100% - 1cqw - 6px)); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.o7 .ai-review{ opacity:1; transform:translate(-100%, calc(-100% - 1cqw)); transition-delay:.35s; }
.o9 .ai-review{ opacity:0; transition-delay:.15s; }
.ai-review-btn{ display:flex; align-items:center; height:2.3em; padding:0 .85em; border-radius:.55em; transition:background .15s ease, transform .12s ease; }
.ai-review-btn--ignore{ color:var(--ui-muted); }
.ai-review-btn--accept{ color:var(--ui-accent); font-family:var(--font-regular); }
.o8 .ai-review-btn--accept{ background:var(--ui-surface-2); transition-delay:.6s; }
.o9 .ai-review-btn--accept{ transform:scale(.94); transition-delay:0s; }

.cursor--omega{ --x0:104%; --y0:94%; }
.o1 .cursor--omega{ opacity:1; }
.o2 .cursor--omega{ opacity:0; }
.o3 .cursor--omega{ opacity:1; }
.o1c .cursor--omega svg{ animation:cursor-press-a .3s ease; }
.o3c .cursor--omega svg{ animation:cursor-press-b .3s ease; }
.o9 .cursor--omega svg{ animation:cursor-press-a .3s ease; }

@container slide (max-width:480px){
  .ai-review, .o7 .ai-review{ transform:translate(calc(-100% - 1.2cqw), 1.2cqw); }
}
@container slide (max-width:300px){
  .ai-review, .o7 .ai-review{ left:50%; top:100%; transform:translate(-50%, 8px); padding:2px; border-radius:6px; font-size:8px; }
}


.standin--feature .standin-head{ height:8.4cqw; padding-bottom:2.2cqw; }
.standin-body--feature{ grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-rows:repeat(2, minmax(0,1fr)); }

.focus-card{
  grid-row:span 2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.67cqw;
  padding:2.19cqw; border-radius:1.25cqw; background:var(--sl-card); text-align:center;
}
.focus-card-logo{
  width:7.29cqw; height:7.29cqw; flex-shrink:0; display:grid; place-items:center; border-radius:1.25cqw;
  background:var(--sl-accent); color:#FFFFFF;
}
.focus-card-logo .icon{ font-size:3.33cqw; }
.focus-card-titles{ display:flex; flex-direction:column; gap:.1cqw; width:100%; }
.focus-card-title{ font-family:var(--font-sans); font-weight:300; font-size:1.67cqw; line-height:2.08cqw; color:var(--sl-text); }
.focus-card-subtitle{ font-family:var(--font-display); font-size:1.25cqw; line-height:1.46cqw; color:var(--sl-text); }
.focus-card-divider{ width:5.21cqw; height:1px; flex-shrink:0; background:var(--sl-text-2); }
.focus-card-description{ font-family:var(--font-sans); font-weight:300; font-size:1.46cqw; line-height:1.88cqw; color:var(--sl-text-2); }

.feature-card{
  position:relative; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:1.04cqw;
  padding:1.25cqw; border-radius:1.25cqw; background:var(--sl-card); text-align:left;
}
.feature-icon{ width:2.5cqw; height:2.5cqw; flex-shrink:0; display:grid; place-items:center; border-radius:.83cqw; color:var(--sl-accent); }
.feature-icon .icon{ font-size:2.5cqw; }
.feature-description{ flex:1; min-height:0; font-family:var(--font-sans); font-weight:300; font-size:1.25cqw; line-height:1.67cqw; color:var(--sl-text); }
.feature-divider{ width:100%; height:1px; flex-shrink:0; background:var(--sl-border); }
.feature-title{ padding-bottom:.42cqw; font-family:var(--font-display); font-size:1.25cqw; line-height:1.67cqw; color:var(--sl-accent); white-space:nowrap; }

.scene--review .comment-pin{ transform:translate(-50%, -50%) scale(1); transition:transform .3s cubic-bezier(.3,1.6,.5,1), box-shadow .3s ease, opacity .3s ease; }
.r4 .rv-pin--a{ transform:translate(-50%, -50%) scale(1.3); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent), 0 2px 6px rgba(20,30,50,.3); }
.r5c .rv-pin--a{ transform:translate(-50%, -50%) scale(0); opacity:0; }

@container slide (max-width:360px){
  .scene--review .comment-pin{ width:12px; height:12px; border-width:1.5px; font-size:7px; }
}

.rv-field{
  position:relative; display:inline-flex; margin:0 -.3cqw; padding:0 .3cqw; border-radius:.3cqw;
  outline:2px solid transparent; outline-offset:2px; transition:outline-color .3s ease;
}
.rv-after{ display:none; }
.r4 .rv-before{ display:none; }
.r4 .rv-after{ display:inline; }
.r4 .rv-field{ outline-color:var(--sl-accent); }
.r5c .rv-field{ outline-color:transparent; transition-delay:.25s; }
.rv-w{
  display:inline-block; opacity:0; transform:translateY(.5em);
  background:var(--ui-ai-gradient) no-repeat; background-size:var(--gw, 100%) 100%; background-position:calc(-1 * var(--gx, 0px)) 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:opacity .34s ease, transform .34s cubic-bezier(.2,.8,.2,1), color .6s ease;
}
.r4 .rv-w{ opacity:1; transform:none; }
.r4 .rv-w:nth-child(2){ transition-delay:.12s, .12s, 0s; }
.r5c .rv-w{ color:var(--sl-accent); transition-delay:.35s; }
.r6 .rv-w{ background-image:none; }

.r3c .feature-card--a > *{ animation:scene-ai-pulse 1.1s ease-in-out infinite; }
.r4 .feature-card--a > *{ animation:none; }

.cr-bar{
  position:absolute; z-index:5; left:50%; bottom:calc(100% + 1.2cqw); display:flex; align-items:center; gap:2px;
  padding:max(3px, .3cqw); border:2px solid transparent; border-radius:max(7px, .65cqw);
  background:var(--ui-surface); box-shadow:var(--shadow-popover);
  font-family:var(--font-sans); font-size:clamp(9px, 1.8cqw, 12px); line-height:1; white-space:nowrap;
  opacity:0; transform:translate(-50%, 10px); pointer-events:none; transition:opacity .22s ease, transform .22s ease;
}
.r4 .cr-bar{ opacity:1; transform:translate(-50%, 0); animation:cr-bar-pulse .9s ease-in-out .25s 1; }
.r5c .cr-bar{ opacity:0; transform:translate(-50%, 10px); transition-delay:.15s; }
@keyframes cr-bar-pulse{
  0%, 100%{ border-color:transparent; }
  50%{ border-color:color-mix(in srgb, var(--ui-accent) 35%, transparent); box-shadow:var(--shadow-popover), 0 0 0 3px color-mix(in srgb, var(--ui-accent) 12%, transparent); }
}
.cr-bar-btn{ display:flex; align-items:center; height:2.3em; padding:0 .85em; border-radius:.55em; transition:background .15s ease, transform .12s ease; }
.cr-bar-ignore{ color:var(--ui-muted); }
.cr-bar-accept{ color:var(--ui-accent); font-family:var(--font-regular); }
.r5 .cr-bar-accept{ background:var(--ui-surface-2); transition-delay:.6s; }
.r5c .cr-bar-accept{ transform:scale(.94); transition-delay:0s; }
@container slide (max-width:360px){
  .cr-bar{ bottom:calc(100% + 6px); padding:2px; border-radius:6px; font-size:8px; }
}

.rv-body{ flex:1; min-height:0; display:flex; flex-direction:column; gap:.7em; padding:.8em 1em 0; }
.rv-tabs{ position:relative; flex-shrink:0; display:flex; padding:.22em; border-radius:.6em; background:var(--ui-surface-2); }
.rv-tabs-thumb{
  position:absolute; top:.22em; bottom:.22em; left:.22em; width:calc(50% - .22em); border-radius:.42em;
  background:var(--ui-surface); box-shadow:0 2px 2px rgba(20,30,50,.12); transition:transform .25s var(--scene-ease);
}
.rv-tab{ position:relative; flex:1; padding:.3em 0; text-align:center; font-size:.95em; color:var(--ui-muted); transition:color .2s ease; }
.rv-tab--active{ color:var(--ui-text); }
.r6 .rv-tab--resolved{ color:var(--ui-text-2); transition-delay:.6s; }
.r6c .rv-tabs-thumb{ transform:translateX(100%); }
.r6c .rv-tab--active{ color:var(--ui-muted); }
.r6c .rv-tab--resolved{ color:var(--ui-text); transition-delay:0s; }

.rv-filters{ position:relative; z-index:2; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; }
.rv-new, .rv-filter-btn{
  position:relative; display:inline-flex; align-items:center; gap:.45em; height:2.2em; padding:0 .7em;
  border:1px solid var(--ui-border); border-radius:.6em; font-size:.9em; transition:background .15s ease;
}
.rv-new .icon{ font-size:.95em; }
.rv-filter-btn{ color:var(--ui-muted); }
.rv-filter-btn .icon{ font-size:.85em; }
.rv-filter-btn .rv-caret-down{ font-size:.7em; }
.r1 .rv-filter-btn{ background:var(--ui-surface-2); transition-delay:.6s; }
.r1c .rv-filter-btn{ background:var(--ui-surface-2); transition-delay:0s; }
.r2c .rv-filter-btn{ background:transparent; }
.rv-filter-dot{
  position:absolute; top:-.35em; right:-.35em; width:.7em; height:.7em; border-radius:50%;
  background:var(--ui-accent); box-shadow:0 0 0 2px var(--ui-surface); transform:scale(0); transition:transform .3s cubic-bezier(.3,1.6,.5,1);
}
.r2c .rv-filter-dot{ transform:scale(1); }
.rv-menu{
  position:absolute; right:0; top:calc(100% + .35em); display:flex; flex-direction:column; min-width:11em; padding:.3em;
  border:1px solid var(--ui-border); border-radius:.7em; background:var(--ui-surface); box-shadow:var(--shadow-popover);
  opacity:0; transform:translateY(-.3em); transition:opacity .18s ease, transform .18s ease; pointer-events:none;
}
.r1c .rv-menu{ opacity:1; transform:none; }
.r2c .rv-menu{ opacity:0; transform:translateY(-.3em); transition-delay:.15s; }
.rv-opt{ display:flex; align-items:center; justify-content:space-between; gap:1em; padding:.45em .6em; border-radius:.45em; transition:background .15s ease; }
.rv-opt .icon{ font-size:.85em; color:var(--ui-accent); }
.rv-opt--me .icon{ opacity:0; }
.r2 .rv-opt--me{ background:var(--ui-surface-2); transition-delay:.6s; }
.r2c .rv-opt--all .icon{ opacity:0; }
.r2c .rv-opt--me .icon{ opacity:1; }

.rv-list{ position:relative; flex:1; min-height:0; overflow:hidden; }
.rv-item{ display:grid; grid-template-rows:1fr; opacity:1; transition:grid-template-rows .4s var(--scene-ease), opacity .3s ease, margin .4s var(--scene-ease); }
.rv-item + .rv-item{ margin-top:.8em; }
.rv-clip{ min-height:0; overflow:hidden; }
.rv-item--resolved{ grid-template-rows:0fr; opacity:0; margin-top:0 !important; }
.r2c .rv-item--other{ grid-template-rows:0fr; opacity:0; margin-top:0; }
.r5c .rv-item--a{ grid-template-rows:0fr; opacity:0; transition-delay:.35s; }
.r6c .rv-item--resolved{ grid-template-rows:1fr; opacity:1; }

.rv-entry{ position:relative; display:flex; flex-direction:column; border:1px solid var(--ui-border); border-radius:.7em; padding:.8em; transition:border-color .2s ease, box-shadow .2s ease; }
.r4 .rv-item--a .rv-entry{ border-color:var(--ui-accent); box-shadow:inset 0 0 0 1px var(--ui-accent); }
.rv-ctx, .rv-quote{ font-size:.88em; color:var(--ui-muted); }
.rv-quote{ margin-bottom:.35em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rv-head{ display:flex; align-items:center; gap:.6em; margin-bottom:.5em; }
.rv-av{
  width:2.3em; height:2.3em; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:var(--c); color:#FFFFFF; font-family:var(--font-regular); font-size:.9em; line-height:1;
}
.rv-who{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.rv-author{ font-family:var(--font-regular); }
.rv-date{ font-size:.8em; color:var(--ui-muted); }
.rv-mention{ color:var(--ui-accent); background:var(--ui-accent-soft); border-radius:4px; padding:0 3px; }
.rv-resolve{
  position:absolute; top:.45em; right:.45em; width:1.8em; height:1.8em; display:grid; place-items:center;
  border-radius:.45em; background:var(--ui-surface); color:var(--ui-muted); opacity:0; transition:opacity .15s ease, background .15s ease;
}
.rv-resolve > .icon{ grid-area:1 / 1; font-size:1.05em; }
.rv-resolve.is-resolved{ opacity:1; color:var(--ui-accent); }

.rv-empty{
  position:absolute; left:0; right:0; top:1.5em; margin:0; text-align:center; font-size:.92em; color:var(--ui-muted);
  opacity:0; transition:opacity .3s ease;
}
.r5c .rv-empty{ opacity:1; transition-delay:.7s; }
.r6c .rv-empty{ opacity:0; transition-delay:0s; }

.rv-footer{ flex-shrink:0; display:grid; grid-template-rows:1fr; border-top:1px solid var(--ui-border); transition:grid-template-rows .35s var(--scene-ease), opacity .3s ease; }
.rv-ai-btn{
  position:relative; min-height:0; overflow:hidden; display:grid; place-items:center; margin:.8em 0 .9em; height:2.5em;
  border-radius:.7em; background:var(--ui-accent); color:#FFFFFF; font-family:var(--font-display); font-size:.95em;
  transition:opacity .15s ease, transform .12s ease;
}
.rv-ai-btn > *{ grid-area:1 / 1; }
.rv-ai-spin{ font-size:1.1em; opacity:0; }
.r3 .rv-ai-btn{ opacity:.9; transition-delay:.6s; }
.r3c .rv-ai-btn{ opacity:1; transform:scale(.97); transition-delay:0s; }
.r3c .rv-ai-label{ opacity:0; }
.r3c .rv-ai-spin{ opacity:1; animation:rv-spin .9s linear infinite; }
.r4 .rv-ai-btn{ transform:none; }
.r4 .rv-ai-label{ opacity:1; }
.r4 .rv-ai-spin{ opacity:0; animation:none; }
@keyframes rv-spin{ to{ transform:rotate(360deg); } }
.r5c .rv-footer{ grid-template-rows:0fr; opacity:0; transition-delay:.6s; }
.r5c .rv-ai-btn{ margin:0; }

.cursor--review{ --x0:104%; --y0:40%; }
.r1 .cursor--review{ opacity:1; }
.cursor--review .cursor-label{ transition:left .3s ease, transform .3s ease; }
.r1 .cursor--review{ --rot:90deg; }
.r1 .cursor--review .cursor-label{ left:calc(var(--cw) * -.55); transform:translateX(-100%); }
.r2 .cursor--review{ --rot:0deg; }
.r2 .cursor--review .cursor-label{ left:calc(var(--cw) * .55); transform:none; }
.r6 .cursor--review{ --rot:90deg; }
.r6 .cursor--review .cursor-label{ left:calc(var(--cw) * -.55); transform:translateX(-100%); }
.r7 .cursor--review{ --rot:0deg; }
.r7 .cursor--review .cursor-label{ left:calc(var(--cw) * .55); transform:none; }
.r1c .cursor--review svg{ animation:cursor-press-a .3s ease; }
.r2c .cursor--review svg{ animation:cursor-press-b .3s ease; }
.r3c .cursor--review svg{ animation:cursor-press-a .3s ease; }
.r5c .cursor--review svg{ animation:cursor-press-b .3s ease; }
.r6c .cursor--review svg{ animation:cursor-press-a .3s ease; }

.scene--final{
  width:100%;
  --shadow-modal-scene:0 24px 64px rgba(20,30,50,.32), 0 2px 8px rgba(20,30,50,.12);
  --shadow-toast-scene:0 8px 24px rgba(20,30,50,.22), 0 1px 3px rgba(20,30,50,.12);
}
@media (prefers-color-scheme: dark){
  .scene--final{
    --shadow-modal-scene:0 0 0 1px rgba(255,255,255,.08), 0 24px 64px rgba(0,0,0,.6);
    --shadow-toast-scene:0 0 0 1px rgba(255,255,255,.1), 0 10px 28px rgba(0,0,0,.6);
  }
}
.scene--final .win-top{ position:relative; z-index:3; }
.scene--final .bar--cur{ width:5.4cqw; }
.scene--final .bar--prev{ width:5.4cqw; margin-right:0; transform:none; }
.scene--final .bar--prev::before, .scene--final .lg--prev{ opacity:1; }

.scene--final .win-share{ transition:opacity .15s ease, transform .12s ease; }
.f5 .win-share{ opacity:.9; transition-delay:.6s; }
.f5c .win-share{ opacity:1; transform:scale(.95); transition-delay:0s; }
.f6 .win-share{ transform:none; }

.fn-more-wrap{ position:relative; display:flex; }
.fn-more{ width:2.8cqw; height:2.8cqw; display:grid; place-items:center; border-radius:.8cqw; color:var(--ui-muted); transition:background .15s ease; }
.fn-more .icon{ font-size:1.5cqw; }
.f1 .fn-more{ background:var(--ui-surface-2); transition-delay:.6s; }
.f2c .fn-more{ background:transparent; transition-delay:0s; }
.fn-menu{
  position:absolute; right:0; top:calc(100% + 6px); display:flex; flex-direction:column; padding:.5em;
  border:1px solid var(--ui-border); border-radius:.7em; background:var(--ui-surface); box-shadow:var(--shadow-popover);
  font-family:var(--font-sans); font-size:max(9px, 1.1cqw); line-height:1.2; color:var(--ui-text); white-space:nowrap;
  opacity:0; transform:translateY(-4px); transition:opacity .18s ease, transform .18s ease;
}
.f1c .fn-menu{ opacity:1; transform:none; }
.f2c .fn-menu{ opacity:0; transform:translateY(-4px); transition-delay:.12s; }
.fn-item{ display:flex; align-items:center; gap:.75em; padding:.72em .9em; border-radius:.55em; transition:background .15s ease; }
.fn-icon{ width:1.25em; height:1.25em; display:grid; place-items:center; }
.fn-icon > .icon{ grid-area:1 / 1; font-size:1.15em; transition:opacity .1s ease; }
.fn-icon-solid{ opacity:0; }
.fn-divider{ height:1px; margin:.35em 0; background:var(--ui-border); }
.f2 .fn-item--tpl{ background:var(--ui-surface-2); transition-delay:.6s; }
.f2 .fn-item--tpl .fn-icon > .icon{ opacity:0; transition-delay:.6s; }
.f2 .fn-item--tpl .fn-icon > .fn-icon-solid{ opacity:1; }

.fn-overlay{
  position:absolute; inset:0; z-index:4; display:grid; place-items:center; padding:3cqw;
  background:rgba(20,24,32,.45); opacity:0; transition:opacity .25s ease;
}
.fm-modal{
  width:min(100%, 33.8em); display:flex; flex-direction:column; overflow:hidden;
  border-radius:1.23em; background:var(--ui-surface); box-shadow:var(--shadow-modal-scene);
  font-family:var(--font-sans); font-size:max(9px, 1.3cqw); line-height:1.3; color:var(--ui-text); white-space:nowrap;
  transform:translateY(14px) scale(.98); transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.f2c .fn-overlay--name, .f5c .fn-overlay--share{ opacity:1; }
.f2c .fn-overlay--name .fm-modal, .f5c .fn-overlay--share .fm-modal{ transform:none; }
.f4c .fn-overlay--name{ opacity:0; transition-delay:.2s; }
.f4c .fn-overlay--name .fm-modal{ transform:translateY(14px) scale(.98); transition-delay:.2s; }

.fm-head{ display:flex; align-items:center; justify-content:space-between; padding:1.2em 1.54em; }
.fm-title{ font-family:var(--font-regular); font-size:1.23em; }
.fm-close{ display:grid; place-items:center; width:1.78em; height:1.78em; margin-right:-.4em; font-size:1.38em; line-height:1; color:var(--ui-muted); }
.fm-body{ display:flex; flex-direction:column; gap:1.23em; padding:.6em 1.54em 1.54em; }
.fm-foot{ display:flex; justify-content:flex-end; gap:.62em; padding:1.08em 1.54em; }
.fm-field{ position:relative; display:block; min-width:0; }
.fm-label{
  position:absolute; z-index:1; left:.69em; top:0; transform:translateY(-50%); padding:0 .3em;
  background:var(--ui-surface); font-size:.77em; line-height:1; color:var(--ui-muted); transition:color .2s ease;
}
.fm-input, .fm-select{
  display:flex; align-items:center; gap:.62em; height:3.23em; padding:0 .69em; overflow:hidden;
  border:1px solid var(--ui-border); border-radius:.62em; transition:border-color .2s ease;
}
.fm-row{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:.92em; }
.fm-select-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.fm-select .icon{ font-size:.7em; color:var(--ui-muted); }
.fm-dot{ width:.77em; height:.77em; flex-shrink:0; border-radius:50%; background:var(--md-color-teal-700); }
.fm-btn{
  display:inline-flex; align-items:center; gap:.77em; height:2.62em; padding:0 .92em;
  border:1px solid var(--ui-border); border-radius:.92em; background:var(--ui-surface); color:var(--ui-text);
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.fm-btn .icon{ font-size:1.1em; }
.fm-btn--primary{ border-color:var(--ui-accent); background:var(--ui-accent); color:#FFFFFF; font-family:var(--font-display); }
.fn-caret{ display:none; width:1px; height:1.15em; margin-left:1px; background:var(--ui-text); animation:scene-blink 1.1s steps(1) infinite; }

.f3c .fn-name .fm-input{ border-color:var(--ui-accent); }
.f3c .fn-name .fm-label{ color:var(--ui-accent); }
.fn-val-old{ border-radius:2px; transition:background .15s ease; }
.f3c .fn-val-old{ background:color-mix(in srgb, var(--ui-accent) 22%, transparent); }
.f3t .fn-val-old{ display:none; }
.fn-name .typed{ white-space:pre; }
.f3t .fn-name .fn-caret{ display:inline-block; }
.f4 .fn-name .fn-caret{ display:none; }
.f4 .fn-save{ background:#0033B3; border-color:#0033B3; transition-delay:.6s; }
.f4c .fn-save{ transform:scale(.95); transition-delay:0s; }

.fs-titles{ display:flex; flex-direction:column; gap:.15em; min-width:0; }
.fs-deck{ font-size:.92em; color:var(--ui-text-2); }
.fs-body{ gap:0; padding-top:.3em; }
.fs-invite-row{ display:flex; align-items:flex-start; gap:.62em; }
.fs-box{
  position:relative; flex:1; min-width:0; display:flex; align-items:center; gap:.46em; min-height:3.23em;
  padding:.31em 7.4em .31em .62em; border:1px solid var(--ui-border); border-radius:.62em; transition:border-color .2s ease;
}
.f6c .fs-box{ border-color:var(--ui-accent); }
.f9 .fs-box{ border-color:var(--ui-border); }
.fs-input{ flex:1; min-width:0; display:flex; align-items:center; height:2.46em; overflow:hidden; }
.fs-placeholder{ color:var(--ui-muted); overflow:hidden; text-overflow:ellipsis; }
.f6t .fs-placeholder{ display:none; }
.f8c .fs-placeholder{ display:inline; }
.fs-input .typed{ white-space:pre; }
.f7c .fs-input .typed{ display:none; }
.f6t .fs-input .fn-caret{ display:inline-block; }
.f7c .fs-input .fn-caret{ display:none; }
.fs-role{
  position:absolute; top:50%; right:.46em; transform:translateY(-50%); display:flex; align-items:center; gap:.3em;
  height:2.3em; padding:0 .46em; border-radius:.46em; font-size:.92em; color:var(--ui-muted);
}
.fs-role .icon{ font-size:.75em; }
.fs-av{
  width:2.15em; height:2.15em; flex-shrink:0; display:grid; place-items:center; border-radius:50%;
  background:var(--c); color:#FFFFFF; font-family:var(--font-regular); font-size:.92em; line-height:1;
}
.fs-chip{
  display:none; align-items:center; gap:.4em; padding:.15em .35em .15em .15em; border-radius:999px;
  background:var(--ui-surface-2); font-size:.85em;
}
.fs-chip .fs-av{ width:1.7em; height:1.7em; font-size:.85em; }
.fs-chip > .icon{ font-size:.75em; color:var(--ui-muted); }
.f7c .fs-chip{ display:inline-flex; animation:op-in .25s ease; }
.f8c .fs-chip{ display:none; }
.fs-dd{
  position:absolute; z-index:3; left:-1px; right:-1px; top:calc(100% + 4px); padding:.46em;
  border:1px solid var(--ui-border); border-radius:.62em; background:var(--ui-surface); box-shadow:var(--shadow-popover);
  opacity:0; transform:translateY(-3px); transition:opacity .18s ease, transform .18s ease;
}
.fs-dd-row{ display:flex; align-items:center; gap:.77em; padding:.5em .62em; border-radius:.46em; transition:background .15s ease; }
.fs-dd-row .fs-av{ width:2em; height:2em; }
.f6d .fs-dd{ opacity:1; transform:none; }
.f7 .fs-dd-row{ background:var(--ui-surface-2); transition-delay:.6s; }
.f7c .fs-dd{ opacity:0; transform:translateY(-3px); transition-delay:.1s; }
.fs-invite{ height:3.23em; padding:0 1.38em; border-color:var(--ui-border); background:var(--ui-border); color:var(--ui-muted); }
.f7c .fs-invite{ border-color:var(--ui-accent); background:var(--ui-accent); color:#FFFFFF; }
.f8 .fs-invite{ border-color:#0033B3; background:#0033B3; transition-delay:.6s; }
.f8c .fs-invite{ transform:scale(.95); transition-delay:0s; }
.f9 .fs-invite{ transform:none; border-color:var(--ui-border); background:var(--ui-border); color:var(--ui-muted); }

.fs-access{ display:flex; flex-direction:column; margin-top:1.23em; }
.fs-access-row, .fs-member-row{ display:flex; align-items:center; gap:.77em; padding:.62em; border-radius:.62em; }
.fs-access-icon{ width:2.15em; height:2.15em; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:var(--ui-surface-2); color:var(--ui-muted); }
.fs-access-icon .icon{ font-size:.92em; }
.fs-access-label, .fs-member-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.fs-access-row > .icon{ font-size:.85em; color:var(--ui-muted); }
.fs-members{ display:flex; flex-direction:column; }
.fs-member{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .4s var(--scene-ease), opacity .3s ease; }
.fs-member-clip{ min-height:0; overflow:hidden; }
.fs-member--new{ grid-template-rows:0fr; opacity:0; }
.f8c .fs-member--new{ grid-template-rows:1fr; opacity:1; transition-delay:.3s; }
.fs-seg{ position:relative; display:inline-flex; gap:.3em; padding:.23em; border-radius:.62em; background:var(--ui-surface-2); }
.fs-seg > span:not(.fs-seg-thumb){ position:relative; width:2.15em; height:1.9em; display:grid; place-items:center; color:var(--ui-muted); }
.fs-seg > .is-active{ color:var(--ui-text) !important; }
.fs-seg .icon{ font-size:1em; }
.fs-seg-thumb{ position:absolute; top:.23em; bottom:.23em; left:.23em; width:2.15em; border-radius:.38em; background:var(--ui-surface); box-shadow:0 2px 2px rgba(20,30,50,.16); }
.fs-seg--editor .fs-seg-thumb{ transform:translateX(calc(100% + .3em)); }
.fs-foot{ justify-content:flex-start; }

.fn-toasts{ position:absolute; z-index:5; top:1.2cqw; right:1.2cqw; pointer-events:none; }
.fn-toast{
  position:absolute; top:0; right:0; display:flex; align-items:center; gap:.77em; padding:.77em .8em .77em 1.08em;
  border-radius:.92em; background:var(--ui-surface); box-shadow:var(--shadow-toast-scene);
  font-family:var(--font-sans); font-size:max(9px, 1.3cqw); color:var(--ui-text); white-space:nowrap;
  opacity:0; transform:translateX(calc(100% + 3cqw)); transition:opacity .3s ease, transform .3s ease;
}
.fn-toast > .icon{ font-size:1.23em; color:var(--md-color-teal-700); }
.fn-toast-x{ display:grid; place-items:center; width:1.85em; height:1.85em; color:var(--ui-muted); }
.fn-toast-x .icon{ font-size:.85em; }
.f4c .fn-toast--tpl{ opacity:1; transform:none; transition-delay:.35s; }
.f5c .fn-toast--tpl{ opacity:0; transform:translateX(calc(100% + 3cqw)); transition-delay:0s; }
.f8c .fn-toast--share{ opacity:1; transform:none; transition-delay:.35s; }

.cursor--final{ --x0:104%; --y0:60%; z-index:7; }
.f1 .cursor--final{ opacity:1; }
.f1 .cursor--final{ --rot:90deg; }
.f1 .cursor--final .cursor-label{ left:auto; right:calc(var(--cw) * 1.55); }
.f3 .cursor--final{ --rot:0deg; }
.f3 .cursor--final .cursor-label{ left:calc(var(--cw) * .55); right:auto; }
.f3t .cursor--final{ opacity:0; }
.f4 .cursor--final{ opacity:1; }
.f6t .cursor--final{ opacity:0; }
.f7 .cursor--final{ opacity:1; }
.f1c .cursor--final svg{ animation:cursor-press-a .3s ease; }
.f2c .cursor--final svg{ animation:cursor-press-b .3s ease; }
.f3c .cursor--final svg{ animation:cursor-press-a .3s ease; }
.f4c .cursor--final svg{ animation:cursor-press-b .3s ease; }
.f5c .cursor--final svg{ animation:cursor-press-a .3s ease; }
.f6c .cursor--final svg{ animation:cursor-press-b .3s ease; }
.f7c .cursor--final svg{ animation:cursor-press-a .3s ease; }
.f8c .cursor--final svg{ animation:cursor-press-b .3s ease; }

@container scene (max-width:560px){
  .scene--final .win-body{ height:max(300px, 84cqw); }
  .scene--final .win-avatars{ display:none; }
  .fn-more-group{ display:none; }
  .fn-overlay{ padding:10px; }
}

.scene--hero, .scene--brief, .sy-root{
  --hero-from:#F2F5F9; --hero-to:#CFE0FB; --hero-fg:#0040DE;
}
@media (prefers-color-scheme: dark){
  .scene--hero, .scene--brief, .sy-root{ --hero-from:#1E2430; --hero-to:rgba(107,138,247,.28); --hero-fg:#6B8AF7; }
}
.hf{
  container:hf / inline-size; position:relative; width:100%; overflow:hidden;
  border:1px solid var(--ui-border); border-radius:max(12px, 1.3cqw); background:var(--ui-surface); box-shadow:var(--shadow-soft);
}
.hf--deck{ aspect-ratio:16/9; display:flex; flex-direction:column; }
@keyframes hf-shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

.hf--brief{ display:flex; flex-direction:column; padding:0 7% 6%; isolation:isolate; }
.hf--brief::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--lp-home); transition:opacity .6s ease; }
.hb2c .hf--brief::before{ opacity:0; }
.hb-chat{
  flex:1 1 0; min-height:0; display:flex; flex-direction:column; justify-content:flex-start;
  padding-top:6cqw; overflow:hidden; transition:opacity .5s ease .4s;
  font-family:var(--font-sans); font-size:max(7.5px, 4.6cqw); line-height:1.45; color:var(--ui-text);
}
.hb-spacer{ flex:1 1 0; transition:flex-grow .6s cubic-bezier(.22,1,.36,1); }
.hb2c .hb-spacer{ flex-grow:0; }
.hb-hello{ flex-shrink:0; display:grid; grid-template-rows:1fr; transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1); }
.hb-hello-clip{
  min-height:0; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:4.5cqw; padding-bottom:4.5cqw;
  transition:opacity .28s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.hb2c .hb-hello{ grid-template-rows:0fr; }
.hb2c .hb-hello-clip{ opacity:0; transform:translateY(-12px) scale(.98); }
.hb-greeting{ font-family:var(--font-display); font-size:max(12px, 8.6cqw); line-height:1.1; color:var(--ui-text-2); text-align:center; }
.hb-box{
  position:relative; flex-shrink:0; display:block; min-height:max(96px, 56cqw); padding:4.5cqw 4.5cqw 17cqw;
  border:1px solid var(--ui-border); border-radius:max(8px, 4cqw);
  background:var(--lp-glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  font-family:var(--font-sans); font-size:max(8px, 5cqw); line-height:1.45; color:var(--ui-text); text-align:left;
  transition:border-color .2s ease, background .2s ease, min-height .5s cubic-bezier(.22,1,.36,1), padding .5s cubic-bezier(.22,1,.36,1);
}
.hb-placeholder{ color:var(--ui-muted); }
.hb-placeholder--chat{ display:none; }
.hb-box .typed{ white-space:pre-wrap; }
.hb-caret{ display:none; width:1px; height:1.1em; margin-left:1px; vertical-align:-.2em; background:var(--ui-text); animation:scene-blink 1.1s steps(1) infinite; }
.hb-send{
  position:absolute; right:3.5cqw; bottom:3.5cqw; width:2.4em; height:2.4em; display:grid; place-items:center;
  border-radius:.9em; background:var(--ui-border); color:var(--ui-muted); font-size:max(8px, 5cqw);
  transition:background .2s ease, color .2s ease, transform .12s ease;
}
.hb-send .icon{ font-size:1em; }
.hb1 .hb-box{ border-color:var(--ui-border-strong); transition-delay:.6s; }
.hb1c .hb-box{ border-color:var(--ui-accent); background:var(--ui-surface); transition-delay:0s; }
.hb1c .hb-caret{ display:inline-block; }
.hb1t .hb-placeholder{ display:none; }
.hb1t .hb-send{ background:var(--ui-accent); color:#FFFFFF; }
.hb2 .hb-send{ background:var(--ui-accent-hover); transition-delay:.6s; }
.hb2c .hb-send{ transform:scale(.9); transition-delay:0s; }
.hb2c .hb-caret, .hb2c .hb-box .typed{ display:none; }
.hb2c .hb-placeholder--chat{ display:inline; }
.hb2c .hb-box{ min-height:max(44px, 25cqw); padding-bottom:13cqw; border-color:var(--ui-border); }
.hb3 .hb-send{ transform:none; background:var(--ui-border); color:var(--ui-muted); }
.hb-msg--user, .hb-msg--user .hb-msg-clip{ display:flex; justify-content:flex-end; }
.hb-bubble{
  display:block; max-width:88%; padding:.55em .75em; border-radius:.8em; background:var(--ui-surface-2);
  opacity:0; transform:translateY(5cqw) scale(.94); transform-origin:bottom right;
  transition:opacity .3s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.hb2c .hb-bubble{ opacity:1; transform:none; transition-delay:.45s; }
.hb-msg--ai{ display:grid; grid-template-rows:0fr; margin-top:0; transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1), margin-top .45s ease; }
.hb-msg--ai .hb-msg-clip{ min-height:0; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; }
.hb3 .hb-msg--ai{ grid-template-rows:1fr; margin-top:4cqw; }
.hb-row{ display:flex; align-items:flex-start; gap:.55em; color:var(--ui-muted); }
.hb-row-icon{ width:1em; height:1.45em; flex-shrink:0; display:grid; place-items:center; }
.hb-row-icon > *{ grid-area:1 / 1; transition:opacity .2s ease; }
.hb-dot{ width:.62em; height:.62em; border-radius:50%; background:var(--ui-border-strong); animation:hb-dot 1.4s ease-in-out infinite; }
@keyframes hb-dot{ 0%, 100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.55); opacity:.35; } }
.hb-check{ font-size:.95em; opacity:0; }
.hb-row-label{ display:grid; }
.hb-row-label > span{ grid-area:1 / 1; transition:opacity .2s ease; }
.hb-row-wait{
  background-image:linear-gradient(90deg, var(--ui-muted), var(--ui-border) 50%, var(--ui-muted)); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:hf-shimmer 1.6s linear infinite;
}
.hb-row-done{ opacity:0; }
.hb3d .hb-dot, .hb3d .hb-row-wait{ opacity:0; animation:none; }
.hb3d .hb-check, .hb3d .hb-row-done{ opacity:1; }
.hb-answer{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1); }
.hb-answer-clip{ min-height:0; overflow:hidden; padding-top:.45em; }
.hb3d .hb-answer{ grid-template-rows:1fr; }
.hb-w{ display:inline-block; opacity:0; transform:translateY(.45em); transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.hb3d .hb-w{ opacity:1; transform:none; transition-delay:calc(var(--i) * 40ms + .15s); }
.hb-ai-icon{ width:1.35em; height:1.35em; margin-top:.55em; }
.hb3 .hb-ai-icon{ animation:hb-ai-pulse 1.3s ease-in-out infinite; }
.hb3d .hb-ai-icon{ animation:none; }
@keyframes hb-ai-pulse{ 0%, 100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.85); opacity:.5; } }
.scene--hero.is-resetting .hb-chat{ opacity:0; transition:opacity .4s ease; }

.hf--plan{ display:flex; flex-direction:column; font-family:var(--font-sans); color:var(--ui-text); }
.hp-list, .hp-foot{ font-size:max(7px, 4.3cqw); }
.hp-head{ flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:5cqw 5cqw 3.5cqw; font-family:var(--font-regular); font-size:max(8px, 5.2cqw); }
.hp-tools{ display:flex; gap:.7em; color:var(--ui-muted); font-size:.62em; }
.hp-list{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; gap:2.4cqw; padding:0 5cqw; overflow:hidden; counter-reset:hp; }
.hp-list::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:7cqw; background:linear-gradient(transparent, var(--ui-surface)); }
.hp-skel{ position:absolute; inset:0 5cqw auto; display:flex; flex-direction:column; gap:2.4cqw; opacity:0; transition:opacity .3s ease; }
.hp-skel i{
  height:15cqw; border-radius:max(6px, 3cqw);
  background:linear-gradient(90deg, var(--ui-surface-2) 30%, var(--ui-border) 50%, var(--ui-surface-2) 70%); background-size:200% 100%;
  animation:hf-shimmer 1.4s linear infinite;
}
.hb3 .hp-skel{ opacity:1; transition-delay:.2s; }
.hp1 .hp-skel{ opacity:0; transition-delay:0s; }
.hp-card{
  position:relative; display:flex; gap:2.6cqw; padding:2.6cqw 3cqw; flex-shrink:0;
  border:1px solid var(--ui-border); border-radius:max(6px, 3cqw); background:var(--ui-surface);
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.hb3 .hp-card{ opacity:0; transform:translateY(6px); }
.hp1 .hp-card{ opacity:1; transform:none; transition-delay:calc(var(--i) * 160ms); }
.hp-card--hero{ background:color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface)); }
.hp-card--content{ counter-increment:hp; }
.hp-num{
  width:1.6em; height:1.6em; flex-shrink:0; display:grid; place-items:center; border-radius:.4em;
  background:var(--ui-surface-2); color:var(--ui-text-2); font-size:.85em;
}
.hp-card--content .hp-num::before{ content:counter(hp); }
.hp-num .icon{ font-size:.9em; }
.hp-card--hero .hp-num{ background:transparent; color:var(--ui-accent); }
.hp-fields{ min-width:0; display:flex; flex-direction:column; gap:.15em; }
.hp-badge{ font-size:.68em; letter-spacing:.05em; text-transform:uppercase; color:var(--ui-accent); }
.hp-title{ font-family:var(--font-regular); line-height:1.25; }
.hp-summary{ font-size:.85em; line-height:1.3; color:var(--ui-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-foot{ flex-shrink:0; display:flex; flex-direction:column; gap:3cqw; padding:3.5cqw 5cqw 5cqw; border-top:1px solid var(--ui-border); transition:opacity .3s ease; }
.hb3 .hp-foot{ opacity:0; }
.hp1 .hp-foot{ opacity:1; transition-delay:.9s; }
.hp-notes{ display:flex; align-items:center; gap:.6em; font-size:.85em; color:var(--ui-text-2); white-space:nowrap; overflow:hidden; }
.hp-check{ width:1.1em; height:1.1em; flex-shrink:0; border:1px solid var(--ui-border-strong); border-radius:.25em; }
.hp-generate{
  display:grid; place-items:center; height:2.6em; border-radius:.8em; background:var(--ui-accent); color:#FFFFFF;
  font-family:var(--font-display); transition:background .15s ease, transform .12s ease;
}
.hp2 .hp-generate{ background:var(--ui-accent-hover); transition-delay:.6s; }
.hp2c .hp-generate{ transform:scale(.96); transition-delay:0s; }
.hd1 .hp-generate{ transform:none; background:var(--ui-accent); }

.hd-top{ flex-shrink:0; display:flex; align-items:center; gap:1.6cqw; height:7cqw; padding:0 2cqw; }
.hd-logo{ width:2.8cqw; height:2.8cqw; }
.hd-name{ display:grid; align-items:center; min-width:12cqw; font-family:var(--font-regular); font-size:max(8px, 1.9cqw); color:var(--ui-text); white-space:nowrap; }
.hd-name > *{ grid-area:1 / 1; transition:opacity .3s ease; }
.hd-name .sk{ width:10cqw; height:1.1cqw; opacity:0; }
.hp2c .hd-name .sk{ opacity:1; }
.hp2c .hd-name-text{ opacity:0; }
.hd1a .hd-name .sk{ opacity:0; }
.hd1a .hd-name-text{ opacity:1; }
.hd-share{ margin-left:auto; padding:.55em 1.2em; border-radius:.8em; background:var(--ui-accent); color:#FFFFFF; font-family:var(--font-display); font-size:max(7px, 1.5cqw); }
.hd-body{ flex:1; min-height:0; display:flex; }
.hd-rail{ width:16.5cqw; flex-shrink:0; display:flex; flex-direction:column; gap:1.5cqw; padding:1.2cqw 2.2cqw; overflow:hidden; }
.hd-thumb{
  position:relative; flex-shrink:0; display:flex; flex-direction:column; gap:.6cqw; aspect-ratio:16/9; padding:.9cqw;
  border:1px solid var(--ui-border); border-radius:.9cqw; background:var(--sl-bg); overflow:hidden;
  transition:box-shadow .25s ease;
}
.hd-thumb > *{ transition:opacity .35s ease; }
.hd-thumb::after{
  content:''; position:absolute; inset:0; z-index:1; opacity:0; transition:opacity .35s ease;
  background:linear-gradient(90deg, var(--ui-surface-2) 30%, var(--ui-border) 50%, var(--ui-surface-2) 70%); background-size:200% 100%;
  animation:hf-shimmer 1.4s linear infinite;
}
.hd-thumb--cover{ background-image:linear-gradient(160deg, var(--hero-from), var(--hero-to)); }
.hd-thumb .sk{ height:.7cqw; }
.hd-thumb-title{ width:55%; height:1cqw; margin:auto 0; border-radius:.5cqw; background:var(--hero-fg); }
.hd-thumb-cards{ flex:1; display:flex; gap:.5cqw; }
.hd-thumb-cards > span{ flex:1; border-radius:.35cqw; background:var(--sl-card); }
.hp2c .hd-thumb::after{ opacity:1; }
.hp2c .hd-thumb > *{ opacity:0; }
.hd1a .hd-thumb::after{ opacity:0; transition-delay:calc(var(--i) * 250ms); }
.hd1a .hd-thumb > *{ opacity:1; transition-delay:calc(var(--i) * 250ms + .15s); }
.hd-thumb--2{ box-shadow:0 0 0 2px var(--ui-accent); }
.hp2c .hd-thumb--1{ box-shadow:0 0 0 2px var(--ui-accent); }
.hp2c .hd-thumb--2{ box-shadow:none; }
.hd2 .hd-thumb--2{ box-shadow:0 0 0 1px var(--ui-border-strong); transition-delay:.6s; }
.hd2c .hd-thumb--1{ box-shadow:none; }
.hd2c .hd-thumb--2{ box-shadow:0 0 0 2px var(--ui-accent); transition-delay:0s; }
.hd-stage{
  flex:1; min-width:0; display:flex; align-items:center; justify-content:center;
  background:var(--ui-canvas); border-top:1px solid var(--ui-border); border-left:1px solid var(--ui-border);
  border-top-left-radius:max(10px, 2.4cqw);
}
.hd-slide{ display:block; width:76cqw; flex-shrink:0; }
.cover-mini{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; gap:.8cqw;
  padding:19cqw 10.5cqw 0; border-radius:inherit;
  background-color:var(--sl-bg); background-image:linear-gradient(160deg, var(--hero-from) 0%, var(--hero-to) 100%);
}
.cover-mini-title{ font-family:var(--font-display); font-size:5cqw; line-height:5.4cqw; color:var(--hero-fg); white-space:pre; }
.cover-mini-sub{ font-family:var(--font-sans); font-weight:300; font-size:1.9cqw; line-height:2.4cqw; color:var(--sl-text-2); }
.hd-cover{ opacity:0; transition:opacity .35s ease; }
.hd-cover-line{ display:flex; align-items:center; min-height:5.4cqw; }
.hd-cover-caret{ display:none; width:.25cqw; height:4.6cqw; margin-left:.2cqw; background:var(--hero-fg); animation:scene-blink 1.1s steps(1) infinite; }
.hd-cover-sub{ opacity:0; transition:opacity .4s ease; }
.hd1t .hd-cover{ opacity:1; }
.hd1t .hd-cover-caret{ display:block; }
.hd1a .hd-cover-caret{ display:none; }
.hd1a .hd-cover-sub{ opacity:1; }
.hd-skel{
  position:absolute; inset:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-rows:auto 1fr;
  gap:1.5cqw; padding:3cqw; opacity:0; transition:opacity .35s ease;
}
.hd-skel i{
  border-radius:1cqw; background:linear-gradient(90deg, var(--sl-card) 30%, var(--sl-border) 50%, var(--sl-card) 70%);
  background-size:200% 100%; animation:hf-shimmer 1.4s linear infinite;
}
.hd-skel i:first-child{ grid-column:1 / -1; width:45%; height:3.2cqw; margin-top:3cqw; }
.hp2c .hd-skel{ opacity:1; transition-delay:.15s; }
.hd1t .hd-skel{ opacity:0; transition-delay:0s; }
.hd-slide2{ position:absolute; inset:0; transition:opacity .4s ease; }
.hp2c .hd-slide2{ opacity:0; transition-duration:.25s; }
.hd2c .hd-slide2{ opacity:1; transition-duration:.4s; }
.hd2c .hd-cover{ opacity:0; }
.scene--hero .bar--cur{ width:5.4cqw; }
.scene--hero .bar--prev{ width:5.4cqw; margin-right:0; transform:none; }
.scene--hero .bar--prev::before, .scene--hero .lg--prev{ opacity:1; }

@media (max-width:760px){
  .hd-top{ height:14cqw; gap:3cqw; padding:0 4cqw; }
  .hd-logo{ width:6cqw; height:6cqw; }
  .hd-name{ min-width:24cqw; font-size:max(9px, 4.4cqw); }
  .hd-name .sk{ width:22cqw; height:2.4cqw; }
  .hd-share{ font-size:max(8px, 3.6cqw); }
  .hd-body{ flex-direction:column-reverse; }
  .hd-rail{ width:auto; flex-direction:row; gap:3cqw; padding:3cqw 4cqw 4cqw; }
  .hd-thumb{ width:26cqw; gap:1.2cqw; padding:1.8cqw; border-radius:2cqw; }
  .hd-thumb .sk{ height:1.4cqw; }
  .hd-thumb-title{ height:2cqw; }
  .hd-stage{ border-left:0; border-top-left-radius:0; border-bottom:1px solid var(--ui-border); }
  .hd-slide{ width:88cqw; }
}

.cursor--hero{ --x0:16%; --y0:108%; --cw:clamp(16px, 1.9cqw, 24px); }
.cursor--hero .cursor-label{ padding:max(3px, .3cqw) max(8px, .7cqw); border-radius:max(6px, .5cqw); font-size:clamp(10px, 1.05cqw, 13px); }
@media (max-width:760px){
  .cursor--hero{ --cw:24px; }
  .cursor--hero .cursor-label{ padding:4px 9px; border-radius:7px; font-size:12.5px; }
}
.hb1 .cursor--hero{ opacity:1; }
.hb1t .cursor--hero{ opacity:0; }
.hb2 .cursor--hero{ opacity:1; }
.hb1c .cursor--hero svg{ animation:cursor-press-a .3s ease; }
.hb2c .cursor--hero svg{ animation:cursor-press-b .3s ease; }
.hp2c .cursor--hero svg{ animation:cursor-press-a .3s ease; }
.hd2c .cursor--hero svg{ animation:cursor-press-b .3s ease; }

.sy-body{ transition:opacity .5s ease .2s; }
.sy-root.is-resetting .sy-body{ opacity:0; transition:opacity .4s ease; }
.sy-track{ --gap:clamp(12px, 1.6vw, 22px); position:relative; }
.sy-flow{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:var(--gap); margin:0; padding:0; list-style:none; }

.sy-step{
  position:relative; display:flex; flex-direction:column; gap:16px; padding:8px 8px 20px;
  border-radius:18px; background:var(--ui-surface); border:1px solid var(--ui-border); box-shadow:var(--shadow-sm);
  opacity:.5; transition:opacity .5s ease, transform .5s var(--lp-ease), box-shadow .5s var(--lp-ease);
}
.sy1 .sy-step--1, .sy2 .sy-step--2, .sy3 .sy-step--3, .sy4 .sy-step--4, .sy5 .sy-step--5{ opacity:1; }
.sy1:not(.sy2) .sy-step--1,
.sy2:not(.sy3) .sy-step--2,
.sy3:not(.sy4) .sy-step--3,
.sy4:not(.sy5) .sy-step--4,
.sy5:not(.sy6) .sy-step--5{ transform:translateY(-6px); box-shadow:var(--shadow-raised); }

.sy-meta{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:0 8px; }
.sy-num{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  font-family:var(--font-regular); font-size:11px; color:var(--ui-text-2);
  background:var(--ui-surface); border:1px solid var(--ui-border-strong);
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.sy2 .sy-step--1 .sy-num, .sy3 .sy-step--2 .sy-num, .sy4 .sy-step--3 .sy-num,
.sy5 .sy-step--4 .sy-num, .sy6 .sy-step--5 .sy-num{ background:var(--ui-accent-soft); border-color:transparent; color:var(--ui-accent); }
.sy1:not(.sy2) .sy-step--1 .sy-num,
.sy2:not(.sy3) .sy-step--2 .sy-num,
.sy3:not(.sy4) .sy-step--3 .sy-num,
.sy4:not(.sy5) .sy-step--4 .sy-num,
.sy5:not(.sy6) .sy-step--5 .sy-num{ background:var(--ui-accent); border-color:var(--ui-accent); color:#FFFFFF; }
.sy-text{ font-family:var(--font-light); font-size:clamp(14px, 1.15vw, 16px); line-height:1.45; color:var(--lp-body); text-wrap:pretty; }
.sy-text strong{ font-family:var(--font-regular); font-weight:400; color:var(--ui-text); }

.sy-arrow{
  position:absolute; z-index:1; top:50%; left:calc(100% + var(--gap) / 2); transform:translate(-50%, -50%);
  font-size:12px; color:var(--ui-text-2); opacity:.6; transition:color .3s ease, opacity .3s ease;
}
.sy2 .sy-step--1 .sy-arrow, .sy3 .sy-step--2 .sy-arrow, .sy4 .sy-step--3 .sy-arrow, .sy5 .sy-step--4 .sy-arrow{ color:var(--ui-accent); opacity:1; }

.sy-loop{
  position:relative; display:block; height:clamp(36px, 4vw, 52px); margin:0 calc(10% - .4 * var(--gap));
  border:2px solid var(--ui-border-strong); border-top:0; border-radius:0 0 22px 22px;
}
.sy-loop-fill{
  position:absolute; inset:0 -2px -2px; border:2px solid var(--ui-accent); border-top:0; border-radius:inherit;
  clip-path:inset(-10px -10px -10px 100%);
}
.sy-loop::before, .sy-loop-fill::before{
  content:''; position:absolute; top:0; left:-5.5px; width:9px; height:9px;
  border:2px solid var(--ui-border-strong); border-right:0; border-bottom:0; transform:rotate(45deg);
}
.sy-loop-fill::before{ border-color:var(--ui-accent); }
.sy6 .sy-loop-fill{ clip-path:inset(-10px); transition:clip-path 1.2s cubic-bezier(.5,0,.3,1); }
.sy-loop-label{
  position:relative; z-index:1; display:flex; align-items:center; gap:10px; width:fit-content; max-width:100%;
  margin:-22px auto 0; padding:10px 18px; border-radius:999px;
  background:var(--ui-surface); border:1px solid var(--ui-border); box-shadow:var(--shadow-sm);
  font-family:var(--font-regular); font-size:15px; line-height:20px; color:var(--ui-text);
}
.sy-loop-label .icon{ font-size:14px; color:var(--ui-accent); }
.sy6 .sy-loop-label{ background:var(--ui-accent); border-color:var(--ui-accent); color:#FFFFFF; transition:background .35s ease .5s, border-color .35s ease .5s, color .35s ease .5s; }
.sy6 .sy-loop-label .icon{ color:#FFFFFF; transform:rotate(360deg); transition:color .35s ease .5s, transform 1s var(--lp-ease) .5s; }

.sy-vis{
  container-type:inline-size; position:relative; display:block; aspect-ratio:16/10; overflow:hidden;
  border-radius:12px; background:var(--ui-surface-2);
}
.sy-vis i, .sy-vis b{ display:block; }

.sy-vis--story{ display:flex; flex-direction:column; justify-content:center; padding:0 9%; }
.sy-o + .sy-o{ margin-top:4.5cqw; }
.sy-o{
  display:flex; align-items:center; gap:4cqw; height:15cqw; padding:0 4.5cqw; flex-shrink:0;
  border-radius:3.5cqw; background:var(--sl-bg); border:1px solid var(--sl-border);
  opacity:0; transform:translateY(5cqw);
}
.sy-o i{ width:7cqw; height:7cqw; border-radius:50%; background:var(--sl-accent-soft); flex-shrink:0; }
.sy-o:first-child i{ background:var(--sl-accent); }
.sy-o b{ width:var(--w); height:3cqw; border-radius:2cqw; background:var(--sl-stroke); }
.sy1 .sy-o{ opacity:1; transform:none; transition:opacity .4s ease calc(var(--i) * .15s), transform .55s var(--lp-ease) calc(var(--i) * .15s); }

.sy-vis--ai{ display:flex; flex-direction:column; justify-content:center; padding:0 9%; }
.sy-ai-head{ display:flex; align-items:flex-start; gap:4cqw; }
.sy-ai-head img{ width:9cqw; height:9cqw; flex-shrink:0; }
.sy-ai-lines{ flex:1; display:flex; flex-direction:column; gap:3cqw; padding-top:1.4cqw; }
.sy-ai-lines b{ width:var(--w); height:3cqw; border-radius:2cqw; background:var(--ui-ai-gradient); transform:scaleX(0); transform-origin:left; }
.sy2 .sy-ai-lines b{ transform:none; transition:transform .6s var(--lp-ease) calc(.1s + var(--i) * .2s); }
.sy-ai-deck{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:3cqw; margin-top:7cqw; }
.sy-ai-deck i{
  aspect-ratio:16/10; padding:0 18%; display:flex; align-items:center;
  border-radius:2cqw; background:var(--sl-bg); border:1px solid var(--sl-border);
  opacity:0; transform:scale(.6);
}
.sy-ai-deck i::after{ content:''; width:100%; height:1.6cqw; border-radius:1cqw; background:var(--sl-stroke); }
.sy-ai-deck i:first-child{ background-image:linear-gradient(160deg, var(--hero-from), var(--hero-to)); }
.sy-ai-deck i:first-child::after{ background:var(--hero-fg); }
.sy2 .sy-ai-deck i{ opacity:1; transform:none; transition:opacity .3s ease calc(.6s + var(--i) * .12s), transform .45s cubic-bezier(.34,1.56,.64,1) calc(.6s + var(--i) * .12s); }

.sy-vis--ds, .sy-vis--collab, .sy-vis--lib{ display:grid; place-items:center; }
.sy-slide{
  position:relative; display:flex; flex-direction:column; gap:4.5cqw; width:78cqw; aspect-ratio:16/9; padding:6cqw;
  border-radius:3cqw; background:var(--sl-bg); border:1px solid var(--sl-border); box-shadow:var(--sl-shadow);
}
.sy-slide-title{ width:46%; height:3.6cqw; border-radius:2cqw; background:var(--sl-text); flex-shrink:0; }
.sy-vis--ds .sy-slide-title{ transform:translateX(6cqw); }
.sy3 .sy-vis--ds .sy-slide-title{ transform:none; transition:transform .5s var(--lp-ease) .35s; }
.sy-ds-body{ flex:1; display:grid; }
.sy-ds-grid, .sy-ds-guides{ grid-area:1 / 1; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:3cqw; }
.sy-ds-grid i{ border-radius:2cqw; background:var(--sl-card); transform:translate(var(--dx), var(--dy)) rotate(var(--r)) scale(var(--s)); }
.sy-ds-grid i:nth-child(1){ --dx:-1.5cqw; --dy:4cqw; --r:-8deg; --s:.82; }
.sy-ds-grid i:nth-child(2){ --dx:1cqw; --dy:-2.5cqw; --r:6deg; --s:1.08; background:var(--sl-accent-soft); }
.sy-ds-grid i:nth-child(3){ --dx:2.5cqw; --dy:3cqw; --r:-4deg; --s:.9; }
.sy3 .sy-ds-grid i{ transform:none; transition:transform .6s cubic-bezier(.34,1.3,.64,1) calc(.45s + var(--i) * .1s); }
.sy-ds-guides i{ border:1px dashed var(--sl-accent); border-radius:2cqw; opacity:0; }
.sy3 .sy-ds-guides i{ animation:sy-guide 1.7s ease forwards; }
@keyframes sy-guide{ 0%{ opacity:0; } 20%, 60%{ opacity:1; } 100%{ opacity:0; } }

.sy-lib{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4cqw; width:74cqw; }
.sy-t{
  position:relative; display:flex; flex-direction:column; justify-content:center; gap:2.4cqw; aspect-ratio:16/9; padding:0 12%;
  border-radius:2.5cqw; background:var(--sl-bg); border:1px solid var(--sl-border);
}
.sy-t b{ height:2.2cqw; border-radius:1.2cqw; background:var(--sl-stroke); }
.sy-t b + b{ width:70%; }
.sy-t--cover{ background-image:linear-gradient(160deg, var(--hero-from), var(--hero-to)); }
.sy-t--cover b{ width:60%; background:var(--hero-fg); }
.sy-t--chart{ flex-direction:row; align-items:flex-end; justify-content:center; gap:3cqw; padding:0 0 3.5cqw; }
.sy-t--chart b, .sy-t--chart b + b{ width:4cqw; height:var(--h); border-radius:.8cqw .8cqw 0 0; background:var(--sl-bar); }
.sy-t--slot{ padding:0; background:none; border:1px dashed var(--sl-stroke); }
.sy-t--new{ position:absolute; inset:-1px; padding:0 12%; opacity:0; transform:scale(.6); }
.sy4:not(.sy5) .sy-t--pick{ border-color:var(--sl-accent); box-shadow:0 0 0 1px var(--sl-accent); transform:translateY(-1.5cqw); transition:transform .4s var(--lp-ease) .3s, box-shadow .3s ease .3s, border-color .3s ease .3s; }
.sy5 .sy-t--pick{ transition:transform .4s var(--lp-ease), box-shadow .3s ease, border-color .3s ease; }
.sy7 .sy-t--new{ opacity:1; transform:none; transition:opacity .3s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }

.sy-co-lines{ display:flex; flex-direction:column; gap:2.6cqw; }
.sy-co-lines b{ width:var(--w); height:2.4cqw; border-radius:1.3cqw; background:var(--sl-stroke); }
.sy-pin{
  position:absolute; right:9%; bottom:12%; width:9cqw; height:9cqw; display:grid; place-items:center;
  border-radius:50% 50% 50% 0; background:var(--c-alba); color:#FFFFFF;
  font-family:var(--font-regular); font-size:4.4cqw; line-height:1;
  opacity:0; transform:scale(.4); transform-origin:bottom left;
}
.sy5 .sy-pin{ opacity:1; transform:none; transition:opacity .25s ease 1s, transform .45s cubic-bezier(.34,1.56,.64,1) 1s; }
.sy-cur{ position:absolute; z-index:1; left:var(--x0); top:var(--y0); opacity:0; }
.sy-cur--1{ --x0:-6%; --y0:78%; --x1:24%; --y1:52%; }
.sy-cur--2{ --x0:104%; --y0:10%; --x1:56%; --y1:24%; }
.sy-cur svg{ display:block; width:max(10px, 6.5cqw); height:auto; overflow:visible; fill:var(--c); stroke:#FFFFFF; stroke-width:1; }
.sy-cur span{
  position:absolute; top:max(8px, 5.2cqw); left:max(6px, 3.6cqw); white-space:nowrap;
  padding:.5cqw 2cqw; border-radius:1.6cqw; background:var(--c); color:#FFFFFF;
  font-family:var(--font-regular); font-size:max(9px, 4.4cqw); line-height:1.35;
}
.sy5 .sy-cur{ left:var(--x1); top:var(--y1); opacity:1; transition:left .9s var(--scene-ease), top .9s var(--scene-ease), opacity .3s ease; }
.sy5 .sy-cur--2{ transition-delay:.25s; }

@media (max-width:980px){
  .sy-track{ max-width:560px; margin:0 auto; padding-right:30px; }
  .sy-flow{ grid-template-columns:minmax(0,1fr); grid-auto-rows:1fr; }
  .sy-step{ flex-direction:row; align-items:center; gap:16px; padding:8px 16px 8px 8px; }
  .sy1:not(.sy2) .sy-step--1,
  .sy2:not(.sy3) .sy-step--2,
  .sy3:not(.sy4) .sy-step--3,
  .sy4:not(.sy5) .sy-step--4,
  .sy5:not(.sy6) .sy-step--5{ transform:translateX(-4px); }
  .sy-vis{ width:min(42%, 190px); flex-shrink:0; }
  .sy-meta{ padding:0; }
  .sy-arrow{ top:calc(100% + var(--gap) / 2); left:calc(8px + min(20%, 95px)); transform:translate(-50%, -50%) rotate(90deg); }
  .sy-loop{
    position:absolute; right:0; top:calc(10% - .4 * var(--gap)); bottom:calc(10% - .4 * var(--gap));
    width:30px; height:auto; margin:0; border:2px solid var(--ui-border-strong); border-left:0; border-radius:0 18px 18px 0;
  }
  .sy-loop-fill{ inset:-2px -2px -2px 0; border:2px solid var(--ui-accent); border-left:0; clip-path:inset(100% -10px -10px -10px); }
  .sy-loop::before, .sy-loop-fill::before{ top:-5.5px; left:0; transform:rotate(-45deg); }
  .sy-loop-label{ margin-top:24px; }
}
@media (max-width:480px){
  .sy-step{ gap:12px; padding-right:12px; }
  .sy-num{ position:absolute; left:14px; top:14px; z-index:1; width:20px; height:20px; font-size:10px; }
  .sy-loop-label{ gap:8px; padding:9px 14px; font-size:14px; }
}

.scene--brief .bf-body{
  position:relative; display:block; height:max(380px, 62cqw); overflow:hidden;
  font-family:var(--font-sans); font-size:max(11px, 1.62cqw); line-height:1.45; color:var(--ui-text);
  transition:opacity .5s ease .5s;
}
.bf-root.is-resetting .bf-body{ opacity:0; transition:opacity .4s ease; }
.bf-body::before{ content:''; position:absolute; inset:0; background:var(--lp-home); transition:opacity .6s ease; }
.bf2c .bf-body::before{ opacity:0; }

.scene--brief .win-top{ position:relative; }
.bf-back, .bf-home-logo{ position:absolute; left:1.8cqw; top:50%; transform:translateY(-50%); transition:opacity .3s ease; }
.bf-back{
  display:flex; align-items:center; gap:.5em; opacity:0;
  font-family:var(--font-sans); font-size:max(11px, 1.45cqw); color:var(--ui-muted);
}
.bf2c .bf-home-logo{ opacity:0; }
.bf2c .bf-back{ opacity:1; }
.bf-back .icon{ font-size:.9em; }
.bf-top-deck{ display:flex; align-items:center; gap:1.4cqw; opacity:0; transition:opacity .3s ease; }
.bf-deck-name{ display:grid; align-items:center; }
.bf-deck-name > *{ grid-area:1 / 1; transition:opacity .3s ease; }
.bf-deck-text{ opacity:0; }
.bf11c .bf-back{ opacity:0; }
.bf11c .bf-top-deck{ opacity:1; transition-delay:.25s; }
.bf12a .bf-deck-name .sk{ opacity:0; }
.bf12a .bf-deck-text{ opacity:1; }

.bf-disc{
  position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0fr);
  transition:grid-template-columns .6s var(--scene-ease), opacity .3s ease;
}
.bf7 .bf-disc{ grid-template-columns:minmax(0,.82fr) minmax(0,1fr); }
.bf11c .bf-disc{ opacity:0; }
.bf-chat{ position:relative; min-width:0; overflow:hidden; display:flex; flex-direction:column; padding:1.3em 1.6em 1.3em; }
.bf-msgs{ flex:1 1 0; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:1em; }
.bf-spacer{ flex:1 1 0; transition:flex-grow .6s cubic-bezier(.22,1,.36,1); }
.bf2c .bf-spacer{ flex-grow:0; }
.bf-hello{ flex-shrink:0; display:grid; grid-template-rows:1fr; transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1); }
.bf-hello-clip{
  min-height:0; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:.9em; padding:.2em 0 1.2em;
  transition:opacity .28s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.bf2c .bf-hello{ grid-template-rows:0fr; }
.bf2c .bf-hello-clip{ opacity:0; transform:translateY(-12px) scale(.98); }
.bf-greeting{ font-family:var(--font-display); font-size:2.1em; line-height:1.1; color:var(--ui-text-2); }
.bf-msg--user{ display:flex; justify-content:flex-end; }
.bf-bubble{
  max-width:88%; padding:.6em .8em; border-radius:.8em; background:var(--ui-surface-2);
  opacity:0; transform:translateY(1.2em) scale(.96); transform-origin:bottom right;
  transition:opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.bf2c .bf-bubble{ opacity:1; transform:none; }
.bf-msg--ai{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--scene-ease); }
.bf-clip{ min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:.55em; }
.bf2c .bf-msg--ai{ grid-template-rows:1fr; transition-delay:.35s; }
.bf-progress{ display:flex; flex-direction:column; gap:.55em; }
.bf-fold{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--scene-ease); }
.bf-fold-clip{ min-height:0; overflow:hidden; }
.bf6c .bf-fold--qa{ grid-template-rows:1fr; }
.bf6c .bf-fold--row2{ grid-template-rows:1fr; transition-delay:.35s; }
.bf7d .bf-fold--answer{ grid-template-rows:1fr; }
.bf-row{ display:flex; align-items:flex-start; gap:.6em; color:var(--ui-muted); }
.bf-row-icon{ width:1em; height:1.45em; flex-shrink:0; display:grid; place-items:center; }
.bf-row-icon > *{ grid-area:1 / 1; transition:opacity .2s ease; }
.bf-dot{ width:.62em; height:.62em; border-radius:50%; background:var(--ui-border-strong); animation:hb-dot 1.4s ease-in-out infinite; }
.bf-check{ font-size:.95em; opacity:0; }
.bf-row-label{ display:grid; }
.bf-row-label > span{ grid-area:1 / 1; transition:opacity .2s ease; }
.bf-row-wait{
  background-image:linear-gradient(90deg, var(--ui-muted), var(--ui-border) 50%, var(--ui-muted)); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:hf-shimmer 1.6s linear infinite;
}
.bf-row-done{ opacity:0; }
.bf3 .bf-row--1 .bf-dot, .bf3 .bf-row--1 .bf-row-wait, .bf7d .bf-row--2 .bf-dot, .bf7d .bf-row--2 .bf-row-wait{ opacity:0; animation:none; }
.bf3 .bf-row--1 .bf-check, .bf3 .bf-row--1 .bf-row-done, .bf7d .bf-row--2 .bf-check, .bf7d .bf-row--2 .bf-row-done{ opacity:1; }
.bf-qa{
  display:flex; flex-direction:column; gap:.55em; margin:.1em 0 .1em 1.6em; padding:.6em .75em;
  border:1px solid var(--ui-border); border-radius:.6em; background:var(--ui-surface-2);
}
.bf-qa-row{ display:flex; flex-direction:column; gap:.1em; }
.bf-qa-q{ color:var(--ui-muted); }
.bf-answer{ margin:.2em 0 0; }
.bf-w{ display:inline-block; opacity:0; transform:translateY(.45em); transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.bf7d .bf-w{ opacity:1; transform:none; transition-delay:calc(var(--i) * 40ms + .2s); }
.bf-ai-icon{ width:1.35em; height:1.35em; }
.bf2c .bf-ai-icon{ animation:hb-ai-pulse 1.3s ease-in-out infinite; }
.bf3 .bf-ai-icon{ animation:none; }
.bf6c .bf-ai-icon{ animation:hb-ai-pulse 1.3s ease-in-out infinite; }
.bf7d .bf-ai-icon{ animation:none; }

.bf-composer{ flex-shrink:0; align-self:center; width:80%; display:flex; flex-direction:column; gap:.6em; transition:width .6s cubic-bezier(.22,1,.36,1); }
.bf2c .bf-composer{ width:100%; }
.bf-input{
  position:relative; display:block; min-height:3.1em; padding:.8em 3.6em .8em .8em;
  border:1px solid var(--ui-border); border-radius:.75em; background:var(--lp-glass);
  transition:border-color .2s ease, background .2s ease, min-height .5s cubic-bezier(.22,1,.36,1), padding .5s cubic-bezier(.22,1,.36,1);
}
.bf-placeholder--home{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf1c .bf-placeholder--home{ white-space:normal; }
.bf-placeholder{ color:var(--ui-muted); }
.bf-placeholder--chat{ display:none; }
.bf-input .typed{ white-space:pre-wrap; }
.bf-caret{ display:none; width:1px; height:1.1em; margin-left:1px; vertical-align:-.2em; background:var(--ui-text); animation:scene-blink 1.1s steps(1) infinite; }
.bf-send{
  position:absolute; right:.4em; bottom:.4em; width:2.3em; height:2.3em; display:grid; place-items:center;
  border-radius:.85em; background:var(--ui-border); color:var(--ui-muted);
  transition:background .2s ease, color .2s ease, transform .12s ease, bottom .4s ease, right .4s ease;
}
.bf-send .icon{ font-size:.95em; }
.bf1 .bf-input{ border-color:var(--ui-border-strong); transition-delay:.6s; }
.bf1c .bf-input{ min-height:8.5em; padding-bottom:3em; border-color:var(--ui-accent); background:var(--ui-surface); transition-delay:0s; }
.bf1c .bf-send{ bottom:.75em; right:.75em; }
.bf1c .bf-caret{ display:inline-block; }
.bf1t .bf-placeholder{ display:none; }
.bf1t .bf-send{ background:var(--ui-accent); color:#FFFFFF; }
.bf2 .bf-send{ background:var(--ui-accent-hover); transition-delay:.6s; }
.bf2c .bf-send{ transform:scale(.9); transition-delay:0s; }
.bf2c .bf-input .typed, .bf2c .bf-caret{ display:none; }
.bf2c .bf-placeholder--chat{ display:inline; }
.bf2c .bf-input{ min-height:5.4em; border-color:var(--ui-border); }
.bf3 .bf-send{ transform:none; background:var(--ui-border); color:var(--ui-muted); }
.bf3 .bf-input{ min-height:3.1em; padding-bottom:.8em; }
.bf3 .bf-send{ bottom:.4em; right:.4em; }
.bf7 .bf-input{ min-height:5.4em; padding-bottom:3em; }
.bf7 .bf-send{ bottom:.75em; right:.75em; }
.bf-qs{ display:none; }
.bf3 .bf-qs{ display:grid; }
.bf7 .bf-qs{ display:none; }
.bf-qs > *{ grid-area:1 / 1; }
.bf-question{
  display:none; flex-direction:column; gap:.1em; padding:.65em; border:1px solid var(--ui-accent); border-radius:.75em;
  background:var(--ui-surface); opacity:0; visibility:hidden;
}
.bf3 .bf-question{ display:flex; }
.bf7 .bf-question{ display:none; }
.bf3 .bf-question--1{ animation:bf-q-in .3s ease .2s both; }
.bf4c .bf-question--1{ animation:bf-q-out .25s ease .15s both; }
.bf4c .bf-question--2{ animation:bf-q-in .3s ease .35s both; }
.bf5c .bf-question--2{ animation:bf-q-out .25s ease .15s both; }
.bf5c .bf-recap{ animation:bf-q-in .3s ease .35s both; }
.bf6c .bf-recap{ animation:bf-q-out .25s ease .15s both; }
@keyframes bf-q-in{ from{ opacity:0; transform:translateY(.5em); visibility:visible; } to{ opacity:1; transform:none; visibility:visible; } }
@keyframes bf-q-out{ from{ opacity:1; visibility:visible; } to{ opacity:0; transform:translateY(-.4em); visibility:hidden; } }
.bf-q-head{ display:flex; align-items:center; gap:.55em; margin-bottom:.35em; }
.bf-q-step{ flex-shrink:0; padding:.1em .5em; border-radius:.35em; background:var(--ui-accent-soft); color:var(--ui-accent); font-size:.78em; line-height:1.4; }
.bf-q-text{ font-family:var(--font-display); }
.bf-opt{ display:flex; align-items:center; gap:.6em; padding:.38em; border-radius:.5em; transition:background .15s ease; }
.bf-opt-num{
  width:1.55em; height:1.55em; flex-shrink:0; display:grid; place-items:center; border-radius:.45em;
  background:var(--ui-surface-2); color:var(--ui-muted); font-size:.85em; transition:background .15s ease, color .15s ease;
}
.bf-opt-label{ flex:1; min-width:0; }
.bf-opt-badge{ flex-shrink:0; padding:.05em .5em; border-radius:.35em; background:var(--ui-accent-soft); color:var(--ui-accent); font-size:.75em; }
.bf-q-actions{ display:flex; align-items:center; justify-content:flex-end; gap:.5em; margin-top:.4em; color:var(--ui-muted); font-size:.92em; }
.bf-q-prev{ margin-right:auto; display:inline-flex; align-items:center; gap:.4em; }
.bf-q-prev .icon{ font-size:.8em; }
.bf-q-prev.is-disabled{ opacity:.35; }
.bf-q-skip{ padding:0 .4em; }
.bf4 .bf-opt--q1a, .bf5 .bf-opt--q2a{ background:var(--ui-surface-2); transition-delay:.6s; }
.bf4c .bf-opt--q1a, .bf5c .bf-opt--q2a{ background:var(--ui-accent-soft); transition-delay:0s; }
.bf4c .bf-opt--q1a .bf-opt-num, .bf5c .bf-opt--q2a .bf-opt-num{ background:var(--ui-accent); color:#FFFFFF; }
.bf-recap-title{ font-family:var(--font-regular); margin-bottom:.3em; }
.bf-recap-row{ display:flex; flex-direction:column; gap:.05em; padding:.35em .4em; border-radius:.5em; }
.bf-recap-q{ font-size:.9em; color:var(--ui-muted); }
.bf-recap-a{ display:flex; align-items:center; gap:.45em; font-family:var(--font-regular); }
.bf-recap-a .icon{ font-size:.75em; color:var(--ui-muted); }
.bf-recap-send{
  align-self:flex-end; margin-top:.4em; padding:.5em 1em; border-radius:.6em; background:var(--ui-accent); color:#FFFFFF;
  font-family:var(--font-display); transition:background .15s ease, transform .12s ease;
}
.bf6 .bf-recap-send{ background:var(--ui-accent-hover); transition-delay:.6s; }
.bf6c .bf-recap-send{ transform:scale(.95); transition-delay:0s; }

.bf-outline{ min-width:0; overflow:hidden; border-left:1px solid transparent; transition:border-color .3s ease; }
.bf7 .bf-outline{ border-left-color:var(--ui-border); }
.bf-outline-in{ height:100%; min-width:21em; display:flex; flex-direction:column; padding:1.3em 1.5em; }
.bf-outline-head{ flex-shrink:0; display:flex; align-items:center; justify-content:space-between; margin-bottom:.7em; font-family:var(--font-regular); font-size:1.2em; }
.bf-outline-tools{ display:flex; gap:.7em; color:var(--ui-muted); font-size:.6em; }
.bf-list{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; gap:.45em; padding:0 2px; overflow:hidden; counter-reset:bf; }
.bf-list::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1.6em; background:linear-gradient(transparent, var(--ui-surface)); pointer-events:none; z-index:5; }
.bf-skel{ position:absolute; inset:0 2px auto; display:flex; flex-direction:column; gap:.45em; opacity:0; transition:opacity .3s ease; }
.bf-skel i{
  height:3em; border-radius:.65em;
  background:linear-gradient(90deg, var(--ui-surface-2) 30%, var(--ui-border) 50%, var(--ui-surface-2) 70%); background-size:200% 100%;
  animation:hf-shimmer 1.4s linear infinite;
}
.bf7 .bf-skel{ opacity:1; transition-delay:.35s; }
.bf7d .bf-skel{ opacity:0; transition-delay:0s; }
.bf-card{
  position:relative; flex-shrink:0; display:flex; gap:.7em; padding:.55em .75em;
  border:1px solid var(--ui-border); border-radius:.65em; background:var(--ui-surface);
  opacity:0; transform:translateY(.5em);
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease;
}
.bf7d .bf-card{ opacity:1; transform:none; transition-delay:calc(var(--i) * 110ms); }
.bf8 .bf-card{ transition-delay:0s; }
.bf-card--hero{ background:color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface)); }
.bf-card--content{ counter-increment:bf; }
.bf-card--new{ counter-increment:none; }
.bf10c .bf-card--new{ counter-increment:bf; }
.bf8m .bf-card--c3{ counter-increment:none; }
.bf-num{
  width:1.55em; height:1.55em; flex-shrink:0; display:grid; place-items:center; border-radius:.4em;
  background:var(--ui-surface-2); color:var(--ui-text-2); font-size:.85em;
}
.bf-card--content .bf-num::before{ content:counter(bf); }
.bf-num .icon{ font-size:.9em; }
.bf-card--hero .bf-num{ background:transparent; color:var(--ui-accent); }
.bf-fields{ min-width:0; flex:1; display:flex; flex-direction:column; gap:.1em; }
.bf-badge{ font-size:.68em; letter-spacing:.05em; text-transform:uppercase; color:var(--ui-accent); }
.bf-title{ font-family:var(--font-regular); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf-summary{ font-size:.86em; line-height:1.3; color:var(--ui-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf-gap{ position:relative; z-index:3; height:0; margin-top:-.45em; }
.bf-gap-in{
  position:absolute; left:0; right:0; top:.225em; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; gap:.5em;
  opacity:0; transition:opacity .2s ease;
}
.bf-gap-in > i{ flex:0 1 4em; height:1px; background:var(--ui-accent); }
.bf-add, .bf-merge{ flex-shrink:0; display:grid; place-items:center; background:var(--ui-accent); color:#FFFFFF; box-shadow:0 2px 6px rgba(20,30,50,.12); transition:background .15s ease, transform .12s ease; }
.bf-add{ width:1.75em; height:1.75em; border-radius:50%; }
.bf-add .icon{ font-size:.75em; }
.bf-merge{ padding:.25em .75em; border-radius:.45em; font-size:.82em; }
.bf8 .bf-gap--b .bf-gap-in, .bf10 .bf-gap--a .bf-gap-in{ opacity:1; transition-delay:.45s; }
.bf8 .bf-merge--b, .bf10 .bf-add--a{ background:var(--ui-accent-hover); transition-delay:.6s; }
.bf8c .bf-merge--b, .bf10c .bf-add--a{ transform:scale(.92); transition-delay:0s; }
.bf8c .bf-gap--b .bf-gap-in, .bf10c .bf-gap--a .bf-gap-in{ opacity:0; transition-delay:.2s; }
.bf-card::after{ content:''; position:absolute; inset:-1px; border-radius:inherit; background:var(--ui-surface-2); opacity:0; pointer-events:none; }
.bf8c .bf-card--c2::after, .bf8c .bf-card--c3::after{ animation:bf-merging 1.1s ease-in-out infinite; }
.bf8m .bf-card--c2::after, .bf8m .bf-card--c3::after{ animation:none; opacity:0; }
@keyframes bf-merging{ 0%, 100%{ opacity:.95; } 50%{ opacity:.45; } }
.bf-fold--c3{ grid-template-rows:1fr; transition:grid-template-rows .4s var(--scene-ease), margin-top .4s var(--scene-ease), opacity .3s ease; }
.bf8m .bf-fold--c3{ grid-template-rows:0fr; margin-top:-.45em; opacity:0; }
.bf-v2{ display:none; border-radius:4px; transition:background .3s ease; }
.bf8m .bf-v1{ display:none; }
.bf8m .bf-v2{ display:inline; }
.bf-mw{
  display:inline-block; opacity:0; transform:translateY(.45em);
  background:var(--ui-ai-gradient) no-repeat; background-size:var(--gw, 100%) 100%; background-position:calc(-1 * var(--gx, 0px)) 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), color .5s ease;
}
.bf8m .bf-mw{ opacity:1; transform:none; transition-delay:calc(var(--i) * 70ms), calc(var(--i) * 70ms), 0s; }
.bf8r .bf-mw{ color:var(--ui-accent); }
.bf9 .bf-mw{ background-image:none; }
.bf8r .bf-v2{ background:color-mix(in srgb, var(--ui-accent) 10%, transparent); }
.bf9c .bf-title .bf-mw{ color:var(--ui-text); }
.bf9c .bf-summary .bf-mw{ color:var(--ui-muted); }
.bf9c .bf-v2{ background:transparent; }
.bf-review{
  position:absolute; z-index:4; left:50%; bottom:calc(100% + .45em); display:flex; gap:2px; padding:.25em;
  border-radius:.6em; background:var(--ui-surface); box-shadow:var(--shadow-popover); white-space:nowrap;
  opacity:0; transform:translate(-50%, 6px); transition:opacity .22s ease, transform .22s ease;
}
.bf8r .bf-review{ opacity:1; transform:translate(-50%, 0); }
.bf9c .bf-review{ opacity:0; transform:translate(-50%, 6px); transition-delay:.15s; }
.bf-review-btn{ display:flex; align-items:center; height:2.1em; padding:0 .8em; border-radius:.45em; transition:background .15s ease, transform .12s ease; }
.bf-review-ignore{ color:var(--ui-muted); }
.bf-accept{ color:var(--ui-accent); font-family:var(--font-regular); }
.bf9 .bf-accept{ background:var(--ui-surface-2); transition-delay:.6s; }
.bf9c .bf-accept{ transform:scale(.94); transition-delay:0s; }
.bf-new{ display:grid; grid-template-rows:0fr; margin-top:-.45em; transition:grid-template-rows .4s var(--scene-ease), margin-top .4s var(--scene-ease); }
.bf-new-clip{ min-height:0; overflow:hidden; padding:1px; margin:-1px; }
.bf10c .bf-new{ grid-template-rows:1fr; margin-top:0; }
.bf10c .bf-card--new{ border-color:var(--ui-accent); box-shadow:0 0 0 1px var(--ui-accent); }
.bf11 .bf-card--new{ border-color:var(--ui-border); box-shadow:none; }
.bf-ph{ color:var(--ui-muted); }
.bf-card--new .typed{ white-space:pre; }
.bf10t .bf-card--new .bf-title .bf-ph, .bf10s .bf-card--new .bf-summary .bf-ph{ display:none; }
.bf-field-caret{ display:none; width:1px; height:1.05em; margin-left:1px; vertical-align:-.18em; background:var(--ui-text); animation:scene-blink 1.1s steps(1) infinite; }
.bf10c .bf-field-caret--t{ display:inline-block; }
.bf10s .bf-field-caret--t{ display:none; }
.bf10s .bf-field-caret--s{ display:inline-block; }
.bf11 .bf-field-caret--s{ display:none; }
.bf-outline-foot{ flex-shrink:0; display:flex; flex-direction:column; gap:.65em; margin-top:.7em; padding-top:.8em; border-top:1px solid var(--ui-border); opacity:0; transition:opacity .3s ease; }
.bf7d .bf-outline-foot{ opacity:1; transition-delay:.8s; }
.bf-notes{ display:flex; align-items:center; gap:.55em; font-size:.9em; color:var(--ui-text-2); white-space:nowrap; }
.bf-checkbox{ width:1.1em; height:1.1em; flex-shrink:0; border:1px solid var(--ui-border-strong); border-radius:.25em; }
.bf-generate{
  display:grid; place-items:center; height:2.5em; border-radius:.7em; background:var(--ui-accent); color:#FFFFFF;
  font-family:var(--font-display); transition:background .15s ease, transform .12s ease;
}
.bf11 .bf-generate{ background:var(--ui-accent-hover); transition-delay:.6s; }
.bf11c .bf-generate{ transform:scale(.96); transition-delay:0s; }

.bf-editor{
  position:absolute; inset:0; display:flex; opacity:0; visibility:hidden;
  transition:opacity .45s ease, visibility 0s linear .45s;
}
.bf11c .bf-editor{ opacity:1; visibility:visible; transition-delay:.25s, 0s; }
.bf-thumb::after{
  content:''; position:absolute; inset:0; border-radius:inherit; transition:opacity .35s ease;
  background:linear-gradient(90deg, var(--ui-surface-2) 30%, var(--ui-border) 50%, var(--ui-surface-2) 70%); background-size:200% 100%;
  animation:hf-shimmer 1.4s linear infinite;
}
.bf-thumb > *{ opacity:0; transition:opacity .35s ease; }
.bf12a .bf-thumb::after{ opacity:0; transition-delay:calc(var(--i) * 220ms); }
.bf12a .bf-thumb > *{ opacity:1; transition-delay:calc(var(--i) * 220ms + .15s); }
.bf-thumb--cover{ outline:.22cqw solid var(--ui-accent); outline-offset:.25cqw; }
.bf-thumb--end{ justify-content:center; background-image:linear-gradient(160deg, var(--hero-from), var(--hero-to)); }
.bf-thumb-bar{ width:55%; height:.7cqw; border-radius:.35cqw; background:var(--hero-fg); }
.bf-cover{ opacity:0; transition:opacity .35s ease; }
.bf-cover-line{ display:flex; align-items:center; min-height:5.4cqw; }
.bf-cover-caret{ display:none; width:.25cqw; height:4.6cqw; margin-left:.2cqw; background:var(--hero-fg); animation:scene-blink 1.1s steps(1) infinite; }
.bf-cover-sub{ opacity:0; transition:opacity .4s ease; }
.bf12t .bf-cover{ opacity:1; }
.bf12t .bf-cover-caret{ display:block; }
.bf12a .bf-cover-caret{ display:none; }
.bf12a .bf-cover-sub{ opacity:1; }
.bf11c .bf-skel-slide{ opacity:1; transition-delay:.3s; }
.bf12t .bf-skel-slide{ opacity:0; transition-delay:0s; }

.cursor--bf{ --x0:104%; --y0:80%; }
.bf1 .cursor--bf{ opacity:1; }
.bf1t .cursor--bf{ opacity:0; }
.bf2 .cursor--bf{ opacity:1; }
.bf10t .cursor--bf{ opacity:0; }
.bf11 .cursor--bf{ opacity:1; }
.bf1c .cursor--bf svg{ animation:cursor-press-a .3s ease; }
.bf2c .cursor--bf svg{ animation:cursor-press-b .3s ease; }
.bf4c .cursor--bf svg{ animation:cursor-press-a .3s ease; }
.bf5c .cursor--bf svg{ animation:cursor-press-b .3s ease; }
.bf6c .cursor--bf svg{ animation:cursor-press-a .3s ease; }
.bf8c .cursor--bf svg{ animation:cursor-press-b .3s ease; }
.bf9c .cursor--bf svg{ animation:cursor-press-a .3s ease; }
.bf10c .cursor--bf svg{ animation:cursor-press-b .3s ease; }
.bf11c .cursor--bf svg{ animation:cursor-press-a .3s ease; }

@container scene (max-width:560px){
  .scene--brief .bf-body{ height:max(400px, 112cqw); }
  .bf7 .bf-disc{ grid-template-columns:minmax(0,0fr) minmax(0,1fr); }
  .bf7 .bf-chat{ visibility:hidden; transition:visibility 0s linear .3s; }
  .bf-chat{ padding:1.1em 1.2em; }
  .bf-outline-in{ min-width:0; padding:1.1em 1.2em; }
}

.st-root{ --n:2; --m:2; }
.st-root.st3c{ --n:4; }
.standin--struct .standin-head{ height:8.4cqw; padding-bottom:2.2cqw; }
.st-grid{ position:relative; flex:1; min-height:0; --g:1.25cqw; }
.st-card{
  position:absolute; z-index:1;
  --cw:calc((100% - (var(--n) - 1) * var(--g)) / var(--n));
  --ch:calc((100% - (var(--m) - 1) * var(--g)) / var(--m));
  left:calc(var(--ci) * (var(--cw) + var(--g))); top:calc(var(--ri) * (var(--ch) + var(--g)));
  width:var(--cw); height:var(--ch);
  opacity:0; transform:translateY(1.4cqw);
  transition:left .6s var(--scene-ease), top .6s var(--scene-ease), width .6s var(--scene-ease), height .6s var(--scene-ease),
    opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), background .3s ease, outline-color .2s ease;
  outline:.2cqw solid transparent; outline-offset:.3cqw;
}
.st-card--1{ --ci:0; --ri:0; }
.st-card--2{ --ci:1; --ri:0; }
.st-card--3{ --ci:0; --ri:1; }
.st-card--4{ --ci:1; --ri:1; }
.st3c .st-card--3{ --ci:2; --ri:0; }
.st3c .st-card--4{ --ci:3; --ri:0; }
.st-card--5{ --ci:0; --ri:1; }
.st-card--6{ --ci:1; --ri:1; }
.st-card--7{ --ci:2; --ri:1; }
.st-card--8{ --ci:3; --ri:1; }
.st1 .st-card{ opacity:1; transform:none; transition-delay:calc(var(--k) * 110ms); }
.st1 .st-card--new{ opacity:0; transform:scale(.7); }
.st5c .st-card--5, .st6c .st-card--6, .st7c .st-card--7, .st8d .st-card--8{ opacity:1; transform:none; animation:st-card-pop .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes st-card-pop{ 0%{ opacity:0; transform:scale(.7); } 55%{ opacity:1; transform:scale(1.04); } 100%{ opacity:1; transform:none; } }
.st-overlay{
  position:absolute; inset:0; z-index:0; display:grid; gap:var(--g); pointer-events:none;
  grid-template-columns:repeat(var(--n), minmax(0,1fr)); grid-template-rows:repeat(var(--m), minmax(0,1fr));
  opacity:0; transition:opacity .3s ease;
}
.st-overlay i{ border:max(1px, .12cqw) dashed color-mix(in srgb, var(--sl-accent) 55%, transparent); border-radius:1.25cqw; background:color-mix(in srgb, var(--sl-accent) 5%, transparent); }
.st-overlay i:nth-child(n+5){ display:none; }
.st3c .st-overlay i:nth-child(n+5){ display:block; }
.st-overlay i{ transition:background .2s ease, border-color .2s ease; }
.st1g .st-overlay{ opacity:1; }
.st1h .st-overlay{ opacity:0; }
.st2c .st-overlay{ opacity:1; }
.st9c .st-overlay{ opacity:0; }
.st8m .st-cell-8{ background:color-mix(in srgb, var(--sl-accent) 18%, transparent); border-style:solid; }
.st8d .st-cell-8{ background:color-mix(in srgb, var(--sl-accent) 5%, transparent); border-style:dashed; }
.st9 .st-card--1{ outline-color:color-mix(in srgb, var(--ui-accent) 45%, transparent); transition-delay:.6s; }
.st9c .st-card--1{ outline-color:var(--ui-accent); transition-delay:0s; }
.st10c .st-card--1{ background:var(--sl-metric-accent); }
.st-card .feature-icon, .st-card .feature-description, .st-card .feature-title{ transition:color .3s ease; }
.st10c .st-card--1 .feature-icon, .st10c .st-card--1 .feature-description, .st10c .st-card--1 .feature-title{ color:#FFFFFF; }
.st10c .st-card--1 .feature-divider{ background:rgba(255,255,255,.35); }
.st-card .typed{ white-space:pre; }
.st11t .st-title-old{ display:none; }

.st-panel{ width:0; overflow:hidden; transition:width .6s var(--scene-ease); }
.st2c .st-panel{ width:29cqw; }
.st-root .win-icons{ position:relative; }
.st-root .win-icons::before{
  --r:max(12px, 2.4cqw);
  content:''; position:absolute; z-index:2; top:0; right:100%; width:var(--r); height:var(--r); pointer-events:none;
  background:radial-gradient(circle at 0 100%, transparent calc(var(--r) - 1px), var(--ui-border) calc(var(--r) - 1px), var(--ui-border) var(--r), var(--ui-surface) var(--r));
}
.st-head{ display:grid; }
.st-head > span{ grid-area:1 / 1; transition:opacity .25s ease; }
.st-head-comps, .st-head-props{ opacity:0; }
.st4c .st-head-layout{ opacity:0; }
.st4c .st-head-comps{ opacity:1; }
.st9c .st-head-comps{ opacity:0; }
.st9c .st-head-props{ opacity:1; }
.st-panel-body{ position:relative; flex:1; min-height:0; }
.st-pane{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:.55em; padding:.9em 1.1em; overflow:hidden;
  transition:opacity .25s ease, visibility 0s linear 0s;
}
.st-pane--comps, .st-pane--props{ opacity:0; visibility:hidden; }
.st4c .st-pane--layout{ opacity:0; visibility:hidden; transition:opacity .2s ease, visibility 0s linear .2s; }
.st4c .st-pane--comps{ opacity:1; visibility:visible; transition-delay:.15s; }
.st9c .st-pane--comps{ opacity:0; visibility:hidden; transition:opacity .2s ease, visibility 0s linear .2s; }
.st9c .st-pane--props{ opacity:1; visibility:visible; transition-delay:.15s; }
.st-search{
  flex-shrink:0; display:flex; align-items:center; gap:.55em; height:2.4em; padding:0 .7em;
  border:1px solid var(--ui-border); border-radius:.6em; color:var(--ui-muted); font-size:.92em; white-space:nowrap; overflow:hidden;
}
.st-search .icon{ font-size:.85em; }
.st-tiles{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.7em .6em; }
.st-tile{ display:flex; flex-direction:column; gap:.35em; min-width:0; }
.st-tile-prev{
  display:grid; place-items:center; aspect-ratio:4/3; padding:.5em; overflow:hidden; border:1px solid var(--ui-border); border-radius:.6em;
  background:var(--ui-surface-2); transition:border-color .2s ease, box-shadow .2s ease;
}
.st-tile-prev picture, .st-ghost picture{ display:contents; }
.st-tile-prev img{ display:block; width:auto; height:auto; max-width:100%; max-height:100%; }
.st-tile-name{ font-size:.82em; color:var(--ui-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-tile-prev{ transform-origin:50% 50%; }
.st5 .st-tile--feature .st-tile-prev{ border-color:var(--ui-accent); box-shadow:0 0 0 1px var(--ui-accent); transition-delay:.6s; }
.st9 .st-tile--feature .st-tile-prev{ border-color:var(--ui-border); box-shadow:none; transition-delay:0s; }
.st5c .st-tile--feature .st-tile-prev{ animation:st-tile-press-a .3s ease; }
.st6c .st-tile--feature .st-tile-prev{ animation:st-tile-press-b .3s ease; }
.st7c .st-tile--feature .st-tile-prev{ animation:st-tile-press-a .3s ease; }
.st8g .st-tile--feature .st-tile-prev{ animation:st-tile-press-b .3s ease; }
@keyframes st-tile-press-a{ 40%{ transform:scale(.94); } }
@keyframes st-tile-press-b{ 40%{ transform:scale(.94); } }
.st-ghost{
  position:absolute; left:calc(var(--cw) * .6); bottom:calc(var(--cw) * .15); width:max(64px, 9cqw); aspect-ratio:4/3;
  display:grid; place-items:center; padding:.3em; border-radius:.5em; background:var(--ui-surface); box-shadow:var(--shadow-popover);
  opacity:0; transform:rotate(-3deg) scale(.9); transition:opacity .15s ease;
}
.st-ghost img{ width:100%; height:100%; object-fit:contain; }
.st8g .st-ghost{ opacity:.95; }
.st8d .st-ghost{ opacity:0; }
.st-prev{
  flex-shrink:0; display:grid; gap:3px; aspect-ratio:16/9; padding:.6em; border:1px solid var(--ui-border); border-radius:.7em;
  background:var(--ui-surface-2); grid-template-columns:repeat(var(--n), minmax(0,1fr)); grid-template-rows:.35fr repeat(var(--m), minmax(0,1fr));
}
.st-prev i{ background:var(--ui-surface); border:1px solid var(--ui-border); border-radius:3px; animation:st-cell-in .3s ease; }
@keyframes st-cell-in{ from{ opacity:0; transform:scale(.9); } }
.st-prev i:nth-child(n+7){ display:none; }
.st3c .st-prev i:nth-child(n+7){ display:block; }
.st4c .st-prev i:nth-child(n+9){ display:none; }
.st-block-label{ margin-top:.3em; font-size:.75em; letter-spacing:.03em; text-transform:uppercase; color:var(--ui-muted); }
.st-row{ display:flex; align-items:center; justify-content:space-between; gap:.8em; font-family:var(--font-regular); font-size:.95em; }
.st-seg{ --i:var(--i0); position:relative; flex-shrink:0; display:flex; gap:3px; padding:3px; border-radius:.55em; background:var(--ui-surface-2); }
.st-seg-thumb{
  position:absolute; top:3px; bottom:3px; border-radius:.38em; background:var(--ui-surface); box-shadow:0 2px 2px rgba(20,30,50,.16);
  --bw:calc((100% - 6px - (var(--count) - 1) * 3px) / var(--count));
  left:calc(3px + var(--i) * (var(--bw) + 3px)); width:var(--bw); transition:left .2s ease;
}
.st-seg-btn{ position:relative; z-index:1; flex:1; display:grid; place-items:center; padding:.28em .4em; border-radius:.38em; color:var(--ui-muted); font-size:.92em; transition:color .18s ease; }
.st-seg-btn.is-active{ color:var(--ui-text); font-family:var(--font-regular); }
.st-seg-btn .icon{ font-size:.85em; }
.st-seg--mini .st-seg-btn{ flex:0 0 2.1em; }
.st-seg--wide .st-seg-btn{ flex:0 0 3em; }
.st3 .st-col-4, .st10 .st-style-accent{ color:var(--ui-text); transition-delay:.6s; }
.st3c .st-seg--cols{ --i:3; }
.st3c .st-col-2.is-active{ color:var(--ui-muted); font-family:inherit; }
.st3c .st-col-4{ font-family:var(--font-regular); transition-delay:0s; }
.st10c .st-seg--style{ --i:2; }
.st10c .st-seg--style .is-active{ color:var(--ui-muted); }
.st10c .st-style-accent{ transition-delay:0s; }
.st-fold{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .4s var(--scene-ease), opacity .3s ease, margin .4s var(--scene-ease); }
.st-fold-clip{ min-height:0; overflow:hidden; }
.st-swatches{ display:flex; gap:.8em; padding:.2em .15em; }
.st-swatches i{ width:1.05em; height:1.05em; border-radius:50%; background:var(--sw); outline:2px solid transparent; outline-offset:2px; }
.st-swatches i.is-active{ outline-color:var(--ui-accent); }
.st-section{ margin-top:.25em; font-size:.72em; letter-spacing:.03em; text-transform:uppercase; color:var(--ui-muted); }
.st-span-row{ display:flex; gap:.6em; margin-top:.35em; }
.st-span{
  position:relative; flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:space-between; height:2.5em; padding:0 .35em;
  border:1px solid var(--ui-border); border-radius:.6em;
}
.st-span b{ width:1.5em; text-align:center; font-weight:normal; font-size:1.15em; line-height:1; }
.st-span-label, .st-field-label{
  position:absolute; left:.65em; top:0; transform:translateY(-50%); padding:0 .25em;
  background:var(--ui-surface); font-size:.72em; line-height:1; color:var(--ui-muted); transition:color .2s ease;
}
.st-field{ position:relative; display:block; margin-top:.45em; padding:.65em .7em .55em; border:1px solid var(--ui-border); border-radius:.6em; transition:border-color .2s ease; }
.st-field-value{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-field--desc .st-field-value{ white-space:normal; color:var(--ui-text-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.st-field .typed{ white-space:pre; }
.st-field-old{ border-radius:2px; transition:background .15s ease; }
.st-field-caret{ display:none; width:1px; height:1.1em; margin-left:1px; vertical-align:-.2em; background:var(--ui-text); animation:scene-blink 1.1s steps(1) infinite; }
.st11 .st-field--title{ border-color:var(--ui-border-strong); transition-delay:.6s; }
.st11c .st-field--title{ border-color:var(--ui-accent); transition-delay:0s; }
.st11c .st-field--title .st-field-label{ color:var(--ui-accent); }
.st11c .st-field-old{ background:color-mix(in srgb, var(--ui-accent) 22%, transparent); }
.st11t .st-field-caret{ display:inline-block; }
.st12 .st-field-caret{ display:none; }

.cursor--st{ --x0:104%; --y0:70%; }
.st2 .cursor--st{ opacity:1; }
.st11t .cursor--st{ opacity:0; }
.st12 .cursor--st{ opacity:1; }
.cursor--st .cursor-label{ transition:left .3s ease, transform .3s ease; }
.st2 .cursor--st{ --rot:90deg; }
.st2 .cursor--st .cursor-label{ left:calc(var(--cw) * -.55); transform:translateX(-100%); }
.st5 .cursor--st{ --rot:0deg; }
.st5 .cursor--st .cursor-label{ left:calc(var(--cw) * .55); transform:none; }
.st10 .cursor--st{ --rot:90deg; }
.st10 .cursor--st .cursor-label{ left:calc(var(--cw) * -.55); transform:translateX(-100%); }
.st12 .cursor--st{ --rot:0deg; }
.st12 .cursor--st .cursor-label{ left:calc(var(--cw) * .55); transform:none; }
.st8g .cursor--st{ transition-duration:.5s, .5s, .3s, .3s; }
.st9 .cursor--st{ transition-duration:.65s, .65s, .3s, .3s; }
.st2c .cursor--st svg{ animation:cursor-press-a .3s ease; }
.st3c .cursor--st svg{ animation:cursor-press-b .3s ease; }
.st4c .cursor--st svg{ animation:cursor-press-a .3s ease; }
.st5c .cursor--st svg{ animation:cursor-press-b .3s ease; }
.st6c .cursor--st svg{ animation:cursor-press-a .3s ease; }
.st7c .cursor--st svg{ animation:cursor-press-b .3s ease; }
.st8g .cursor--st svg{ animation:cursor-press-a .3s ease; }
.st9c .cursor--st svg{ animation:cursor-press-b .3s ease; }
.st10c .cursor--st svg{ animation:cursor-press-a .3s ease; }
.st11c .cursor--st svg{ animation:cursor-press-b .3s ease; }
.st-icon{ display:flex; transition:color .15s ease; }
.st2 .st-icon--layout{ color:var(--ui-text); transition-delay:.6s; }
.st2c .st-icon--layout{ color:var(--ui-accent); transition-delay:0s; }
.st4 .st-icon--comps{ color:var(--ui-text); transition-delay:.6s; }
.st4c .st-icon--layout{ color:inherit; }
.st4c .st-icon--comps{ color:var(--ui-accent); transition-delay:0s; }
.st9c .st-icon--comps{ color:inherit; }
.st9c .st-icon--props{ color:var(--ui-accent); }

@container scene (max-width:560px){
  .st2c .st-panel{ width:46.5cqw; }
}

.scene--home, .scene--kc{ --hero-from:#F2F5F9; --hero-to:#CFE0FB; --hero-fg:#0040DE; }
@media (prefers-color-scheme: dark){
  .scene--home, .scene--kc{ --hero-from:#1E2430; --hero-to:rgba(107,138,247,.28); --hero-fg:#6B8AF7; }
}
.scene--home .k-body{ position:relative; display:block; height:62cqw; overflow:hidden; font-family:var(--font-sans); color:var(--ui-text); }
.ka-page{ position:absolute; left:0; right:0; top:0; display:flex; flex-direction:column; padding:3cqw 3.5cqw; transition:transform .8s var(--scene-ease); }
.ka-title{ font-family:var(--font-display); font-size:max(11px, 2.3cqw); line-height:1.2; margin-bottom:1.6cqw; }
.ka-tpls{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:2cqw; margin-bottom:3.4cqw; }
.ka-tpl, .ka-deck{ display:flex; flex-direction:column; gap:.8cqw; min-width:0; transition:opacity .35s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.ka-thumb{ position:relative; display:block; flex-shrink:0; aspect-ratio:16/9; border:1px solid var(--ui-border); border-radius:1.2cqw; overflow:hidden; background:var(--sl-bg); transition:border-color .2s ease, box-shadow .2s ease; }
.ka-name{ font-family:var(--font-regular); font-size:max(9px, 1.55cqw); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ka-meta{ font-size:max(8px, 1.3cqw); color:var(--ui-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ka-info{ display:flex; flex-direction:column; gap:.2cqw; min-width:0; padding-right:2.4cqw; }
.ka-star{ position:absolute; right:.3cqw; bottom:.6cqw; color:var(--ui-muted); font-size:max(9px, 1.4cqw); display:flex; }
.ka-bar{ display:flex; align-items:center; justify-content:space-between; gap:2cqw; margin-bottom:2cqw; }
.ka-pills{ display:flex; gap:.6cqw; font-size:max(8.5px, 1.35cqw); color:var(--ui-text-2); }
.ka-pills > span{ padding:.4em .9em; border-radius:999px; border:1px solid var(--ui-border); white-space:nowrap; }
.ka-pills > .is-active{ background:var(--ui-pill-active); color:var(--ui-pill-active-fg); border-color:transparent; }
.ka-search{
  display:flex; align-items:center; gap:.6em; width:30cqw; min-width:0; height:2.4em; padding:0 .8em; overflow:hidden;
  border:1px solid var(--ui-border); border-radius:.7em; font-size:max(8.5px, 1.35cqw); color:var(--ui-muted); white-space:nowrap; transition:border-color .2s ease;
}
.ka-search .icon{ flex-shrink:0; font-size:.9em; }
.ka-search .typed{ order:1; color:var(--ui-text); white-space:pre; }
.ka-caret{ order:2; display:none; width:1px; height:1.1em; margin-left:-.55em; background:var(--ui-text); animation:scene-blink 1.1s steps(1) infinite; }
.ka-search-ph{ order:3; overflow:hidden; text-overflow:ellipsis; }
.ka-grid{ position:relative; aspect-ratio:100/40.2; }
.ka-deck{ position:absolute; width:23.5%; height:47.5%; left:calc(var(--c) * 25.5%); top:calc(var(--r) * 52.5%); transition:left .6s var(--scene-ease), top .6s var(--scene-ease), opacity .35s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.ka-deck--1{ --c:0; --r:0; } .ka-deck--2{ --c:1; --r:0; } .ka-deck--3{ --c:2; --r:0; }
.ka-deck--4{ --c:3; --r:0; } .ka-deck--5{ --c:0; --r:1; } .ka-deck--6{ --c:1; --r:1; }
.scene--ka .ka-tpl, .scene--ka .ka-deck{ opacity:0; transform:translateY(1.2cqw); }
.ka1 .ka-tpl{ opacity:1; transform:none; transition-delay:calc(var(--i) * 130ms); }
.ka2 .ka-page{ transform:translateY(-11cqw); }
.ka2d .ka-deck{ opacity:1; transform:none; transition-delay:calc(var(--i) * 120ms); }
.ka3 .ka-search{ border-color:var(--ui-border-strong); transition-delay:.6s; }
.ka3c .ka-search{ border-color:var(--ui-accent); transition-delay:0s; }
.ka3c .ka-caret{ display:inline-block; }
.ka3t .ka-search-ph{ display:none; }
.ka3t .ka-caret{ margin-left:0; }
.ka4 .ka-deck{ transition-delay:0s; }
.ka4 .ka-deck.is-other{ opacity:0; transform:scale(.92); }
.ka4 .ka-deck--3{ --c:1; }
.ka4 .ka-deck--6{ --c:2; --r:0; }
.ka5 .ka-deck--1 .ka-thumb{ border-color:var(--ui-accent); box-shadow:var(--shadow-soft); transition-delay:.6s; }
.cursor--ka{ --x0:104%; --y0:70%; }
.ka3 .cursor--ka{ opacity:1; }
.ka3t .cursor--ka{ opacity:0; }
.ka5 .cursor--ka{ opacity:1; }
.ka3c .cursor--ka svg{ animation:cursor-press-a .3s ease; }

.kb-tpl--exec .ka-thumb{ transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.kb1 .kb-tpl--exec .ka-thumb{ border-color:var(--ui-accent); box-shadow:var(--shadow-soft); transform:translateY(-2px); transition-delay:.6s; }
.kb-overlay{ position:absolute; inset:0; z-index:4; display:grid; place-items:center; padding:3cqw; background:rgba(20,24,32,.45); opacity:0; transition:opacity .25s ease; }
.kb1c .kb-overlay{ opacity:1; }
.kb3c .kb-overlay{ opacity:0; transition-delay:.1s; }
.kb-modal{
  width:min(100%, 76cqw); display:flex; flex-direction:column; overflow:hidden; border-radius:max(10px, 1.6cqw);
  background:var(--ui-surface); box-shadow:0 24px 64px rgba(20,30,50,.32), 0 2px 8px rgba(20,30,50,.12);
  font-size:max(9.5px, 1.45cqw); line-height:1.35; transform:translateY(14px) scale(.98); transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.kb1c .kb-modal{ transform:none; }
.kb-head{ display:flex; align-items:center; justify-content:space-between; padding:.9em 1.2em; font-family:var(--font-regular); font-size:1.1em; }
.kb-x{ color:var(--ui-muted); font-size:1.3em; line-height:1; }
.kb-body{ display:flex; flex-direction:column; gap:.7em; padding:0 1.2em 1.2em; }
.kb-title-row{ display:flex; align-items:center; gap:.6em; }
.kb-title{ font-family:var(--font-display); font-size:1.3em; margin-right:.2em; }
.kb-tag{ padding:.15em .6em; border-radius:.4em; background:var(--ui-surface-2); color:var(--ui-text-2); font-size:.82em; }
.kb-desc{ color:var(--ui-text-2); }
.kb-use{ align-self:flex-start; padding:.55em 1em; border-radius:.7em; background:var(--ui-accent); color:#FFFFFF; font-family:var(--font-display); transition:background .15s ease, transform .12s ease; }
.kb3 .kb-use{ background:var(--ui-accent-hover); transition-delay:.6s; }
.kb3c .kb-use{ transform:scale(.95); transition-delay:0s; }
.kb-carousel{ position:relative; --kb-slide:70%; --kb-bleed:1.2em; margin:1.3em calc(-1 * var(--kb-bleed)) 0; }
.kb-carousel::before, .kb-carousel::after{
  content:''; position:absolute; top:0; bottom:0; z-index:1; width:calc(15% + var(--kb-bleed)); pointer-events:none; transition:opacity .28s ease;
}
.kb-carousel::before{ left:0; background:linear-gradient(to right, var(--ui-surface) 35%, color-mix(in srgb, var(--ui-surface) 72%, transparent) 70%, transparent); opacity:0; }
.kb-carousel::after{ right:0; background:linear-gradient(to left, var(--ui-surface) 35%, color-mix(in srgb, var(--ui-surface) 72%, transparent) 70%, transparent); }
.kb2c .kb-carousel::before{ opacity:1; }
.kb-nav{
  position:absolute; z-index:2; top:calc(50% - 1em); transform:translateY(-50%); width:2.3em; height:2.3em; display:grid; place-items:center;
  border:1px solid var(--ui-border); border-radius:50%; background:var(--ui-surface); color:var(--ui-text); box-shadow:var(--shadow-popover); transition:background .15s ease, opacity .2s ease;
}
.kb-nav .icon{ font-size:.8em; }
.kb-prev{ left:.4em; opacity:0; }
.kb-next{ right:.4em; }
.kb2 .kb-next{ background:var(--ui-surface-2); transition-delay:.6s; }
.kb2c .kb-prev{ opacity:1; }
.kb-window{ display:block; overflow:hidden; padding:2px var(--kb-bleed); }
.kb-track{ display:flex; gap:.8em; transition:transform .45s var(--scene-ease); }
.kb2c .kb-track{ transform:translateX(calc(50% - 1.5 * var(--kb-slide) - .8em)); }
.kb-slide{ flex:0 0 var(--kb-slide); display:flex; flex-direction:column; gap:.35em; }
.kb-slide-frame, .kb-thumb{ position:relative; display:flex; flex-direction:column; gap:.6em; aspect-ratio:16/9; padding:.9em; border:1px solid var(--sl-border); border-radius:.7em; background:var(--sl-bg); overflow:hidden; }
.kb-slide-frame .sk, .kb-thumb .sk{ height:.6em; }
.kb-slide-frame .win-thumb-cards{ gap:.6em; margin-top:.3em; }
.kb-slide-frame .win-thumb-cards > span{ border-radius:.45em; }
.kb-slide-num{ font-size:.78em; color:var(--ui-muted); text-align:center; }
@container scene (max-width:560px){
  .kb-overlay{ padding:2cqw; }
  .kb-modal{ width:min(100%, 90cqw); font-size:8px; }
  .kb-desc{ display:none; }
  .kb-carousel{ --kb-slide:64%; margin-top:.9em; }
}
.tpl-body{ flex:1; min-height:0; display:grid; gap:1.25cqw; }
.tpl-body--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.tpl-body--split{ grid-template-columns:2fr 1fr; }
.tpl-col{ display:flex; flex-direction:column; gap:1.25cqw; min-height:0; }
.tpl-sk{ display:block; width:var(--w, 100%); height:1.25cqw; border-radius:.62cqw; flex-shrink:0; background:color-mix(in srgb, var(--sl-text) 11%, transparent); }
.tpl-sk--strong{ height:1.6cqw; background:color-mix(in srgb, var(--sl-text) 16%, transparent); }
.tpl-sk--soft{ background:color-mix(in srgb, var(--sl-text) 7%, transparent); }
.tpl-sk--value{ height:3.2cqw; border-radius:.9cqw; background:color-mix(in srgb, var(--sl-accent) 38%, transparent); }
.tpl-sk--accent{ height:1.4cqw; background:color-mix(in srgb, var(--sl-accent) 45%, transparent); }
.tpl-lines{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.9cqw; }
.tpl-metric{ gap:.9cqw; padding:1.6cqw 1.2cqw; }
.standin-metric--accent .tpl-sk{ background:rgba(255,255,255,.45); }
.standin-metric--accent .tpl-sk--value{ background:rgba(255,255,255,.85); }
.tpl-chart{ gap:0; }
.tpl-chart .chart-plot{ gap:2cqw; margin-top:2cqw; padding:0 1.4cqw; }
.tpl-chart .bar--cur{ width:4.6cqw; }
.tpl-feature .tpl-lines{ gap:.8cqw; }
.tpl-list{ grid-template-rows:repeat(3, minmax(0,1fr)); }
.tpl-item{ display:flex; align-items:center; gap:1.8cqw; padding:0 2cqw; border-radius:1.25cqw; background:var(--sl-card); }
.tpl-num{
  width:3.6cqw; height:3.6cqw; flex-shrink:0; display:grid; place-items:center; border-radius:1cqw;
  background:var(--sl-accent-soft); color:var(--sl-accent); font-family:var(--font-display); font-size:1.7cqw;
}
.tpl-timeline{ position:relative; grid-template-columns:repeat(4, minmax(0,1fr)); align-items:start; padding-top:3cqw; }
.tpl-timeline::before{ content:''; position:absolute; left:1cqw; right:0; top:calc(3cqw + .9cqw); height:.25cqw; background:var(--sl-border); }
.tpl-step{ position:relative; display:flex; flex-direction:column; gap:1.1cqw; }
.tpl-dot{ width:2cqw; height:2cqw; border-radius:50%; background:var(--sl-accent); box-shadow:0 0 0 .5cqw var(--sl-accent-soft); }
.tpl-month{ font-family:var(--font-display); font-size:1.6cqw; line-height:1.2; color:var(--sl-text); }
.tpl-step-card{ display:flex; flex-direction:column; gap:.9cqw; padding:1.6cqw; border-radius:1.25cqw; background:var(--sl-card); }
.kb-editor{ position:absolute; inset:0; z-index:3; display:flex; background:var(--ui-surface); opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s; }
.kb3c .kb-editor{ opacity:1; visibility:visible; transition-delay:.3s, 0s; }
.kb-thumb{ padding:.9cqw; border-radius:.6cqw; gap:.5cqw; }
.kb-thumb .sk{ height:.55cqw; }
.kb-thumb--cover{ outline:.22cqw solid var(--ui-accent); outline-offset:.25cqw; }
.kb-cover-line{ display:flex; align-items:center; min-height:5.4cqw; border-radius:.4cqw; outline:1px dashed transparent; outline-offset:.6cqw; transition:outline-color .2s ease; }
.kb-cover-old{ border-radius:.3cqw; transition:background .15s ease; }
.kb-slide-main .typed{ white-space:pre; }
.kb-cover-caret{ display:none; width:.25cqw; height:4.6cqw; margin-left:.2cqw; background:var(--hero-fg); animation:scene-blink 1.1s steps(1) infinite; }
.kb4 .kb-cover-line{ outline-color:color-mix(in srgb, var(--ui-accent) 50%, transparent); transition-delay:.6s; }
.kb4c .kb-cover-old{ background:color-mix(in srgb, var(--ui-accent) 22%, transparent); }
.kb4c .kb-cover-caret{ display:block; }
.kb4t .kb-cover-old{ display:none; }
.cursor--kb{ --x0:104%; --y0:75%; }
.kb1 .cursor--kb{ opacity:1; }
.kb4t .cursor--kb{ opacity:0; }
.kb1c .cursor--kb svg{ animation:cursor-press-a .3s ease; }
.kb2c .cursor--kb svg{ animation:cursor-press-b .3s ease; }
.kb3c .cursor--kb svg{ animation:cursor-press-a .3s ease; }
.kb4c .cursor--kb svg{ animation:cursor-press-b .3s ease; }

.standin--kc{ --g:1.25cqw; }
.kc-head{ position:relative; height:11cqw; padding-bottom:var(--g); }
.kc-title-cell{ height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:.7cqw; padding-bottom:.4cqw; }
.kc-metrics{ position:absolute; top:0; right:0; bottom:var(--g); width:calc((100% - var(--g)) / 2); }
.kc-grid{ position:relative; flex:1; min-height:0; }
.kc-card, .kc-cell{
  position:absolute; top:0; --span:1;
  --cw:calc((100% - 2 * var(--g)) / 3);
  left:calc(var(--ci) * (var(--cw) + var(--g)));
  width:calc(var(--span) * var(--cw) + (var(--span) - 1) * var(--g)); height:100%;
  transition:left .42s var(--scene-ease), transform .2s ease, box-shadow .2s ease, opacity .3s ease;
}
.kc-card--nps{ --ci:0; } .kc-card--csat{ --ci:1; } .kc-card--delay{ --ci:2; }
.kc-card--chart{ --ci:0; --span:2; } .kc-card--donut{ --ci:2; }
.kc-cell--1{ --ci:0; } .kc-cell--6{ --ci:2; }
.kc-cell{ border-radius:1.25cqw; }
.kc-cell--6{ border:max(1px, .12cqw) dashed color-mix(in srgb, var(--sl-accent) 50%, transparent); background:color-mix(in srgb, var(--sl-accent) 4%, transparent); }
.kc-metrics .standin-metric{ gap:.1cqw; padding:.6cqw .5cqw; border-radius:1cqw; }
.kc-metrics .metric-value{ font-size:2.4cqw; }
.kc-metrics .metric-label{ font-size:1.1cqw; }
.kc-metrics .metric-desc{ max-width:100%; font-size:.95cqw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kc-card--chart .chart-plot{ gap:2.2cqw; padding:0 1.6cqw; margin-top:3cqw; }
.kc-card--chart .bar--cur{ width:5.6cqw; }
.kc-card--chart .chart-x{ gap:2.2cqw; padding:.7cqw 1.6cqw 0; }
.kc-card--donut{ display:flex; flex-direction:column; gap:1cqw; opacity:0; transform:scale(.92); }
.kc-donut-body{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2cqw; }
.kc-ring{
  width:15cqw; height:15cqw; flex-shrink:0; border-radius:50%;
  background:conic-gradient(var(--sl-bar) 0 48%, var(--sl-bar-prev) 48% 80%, var(--sl-stroke) 80% 100%);
  -webkit-mask:radial-gradient(circle, transparent 54%, #000 55%); mask:radial-gradient(circle, transparent 54%, #000 55%);
  transform:rotate(-120deg) scale(.6); opacity:0; transition:transform .6s var(--scene-ease), opacity .3s ease;
}
.kc-legend{ display:flex; flex-direction:column; gap:.6cqw; font-family:var(--font-regular); font-size:1.05cqw; color:var(--sl-text-2); white-space:nowrap; }
.kc-legend > span{ display:flex; align-items:center; gap:.5cqw; }
.kc-legend > span::before{ content:''; width:.8cqw; height:.8cqw; border-radius:.2cqw; background:var(--c); }
.kc2 .kc-card--csat{ box-shadow:0 0 0 .2cqw color-mix(in srgb, var(--ui-accent) 45%, transparent); transition-delay:0s, 0s, .5s, 0s; }
.kc2g .kc-card--csat{ z-index:3; transform:scale(1.03) rotate(-1deg); box-shadow:var(--sl-shadow); }
.kc2m .kc-card--csat{ --ci:0; }
.kc2m .kc-card--nps{ --ci:1; }
.kc2d .kc-card--csat{ transform:none; box-shadow:none; }
.kc3 .kc-tile--donut .st-tile-prev{ border-color:var(--ui-accent); box-shadow:0 0 0 1px var(--ui-accent); transition-delay:.35s; }
.kc3d .kc-tile--donut .st-tile-prev{ border-color:var(--ui-border); box-shadow:none; transition-delay:0s; }
.kc3g .kc-ghost{ opacity:.95; }
.kc3d .kc-ghost{ opacity:0; }
.kc3m .kc-cell--6{ background:color-mix(in srgb, var(--sl-accent) 18%, transparent); border-style:solid; }
.kc3d .kc-cell--6{ opacity:0; }
.kc3d .kc-card--donut{ opacity:1; transform:none; }
.kc3d .kc-ring{ opacity:1; transform:none; transition-delay:.15s; }
.cursor--kc{ --x0:104%; --y0:70%; }
.kc2 .cursor--kc{ opacity:1; transition-duration:.42s, .42s, .3s, .3s; }
.kc2g .cursor--kc svg{ animation:cursor-press-a .3s ease; }
.kc3g .cursor--kc svg{ animation:cursor-press-b .3s ease; }

.is-resetting .cursor,
.is-resetting .comment-pin,
.is-resetting .comment-card,
.is-resetting .caret,
.is-resetting .typed,
.is-resetting .op-user,
.is-resetting .op-ai,
.is-resetting .ai-review,
.is-resetting .cr-bar,
.is-resetting .fn-overlay,
.is-resetting .fn-toast{ opacity:0; transition:opacity .4s ease; }
[data-scene]:not(.is-live) *, [data-scene]:not(.is-live) *::before, [data-scene]:not(.is-live) *::after{ animation-play-state:paused !important; }
.is-seeking, .is-seeking *, .is-seeking *::before, .is-seeking *::after{ transition:none !important; }

@media (prefers-reduced-motion: reduce){
  .scene *, .scene *::before, .scene *::after{ transition:none !important; animation:none !important; }
}