/* Detail preview boundary: exact preview rules retained during cascade-equivalent migration. */
.work-detail-preview{
  isolation:isolate;
}
.work-detail-preview::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  box-shadow:inset 0 0 90px rgba(0,0,0,.18);
}

/* VIDEO */
.detail-video-stage{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 72% 28%,rgba(242,224,177,.18),transparent 18%),
    linear-gradient(145deg,#171b20,#080a0d 68%);
}
.detail-video-frame{
  position:absolute;
  inset:9% 8% 11%;
  overflow:hidden;
  border:1px solid rgba(238,233,216,.11);
  border-radius:16px;
  background:linear-gradient(135deg,#22272d,#0c0f12);
}
.detail-video-frame::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    conic-gradient(from 120deg,transparent 0 32%,rgba(242,224,177,.18) 40%,transparent 50% 100%);
  animation:detailVideoSweep 8s linear infinite;
}
.detail-video-frame::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:62px;height:62px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.26);
  transform:translate(-50%,-50%);
  box-shadow:inset 0 0 0 18px rgba(255,255,255,.018);
}
.detail-video-time{
  position:absolute;
  left:18px;right:18px;bottom:15px;
  height:1px;
  background:rgba(255,255,255,.08);
}
.detail-video-time i{
  display:block;
  width:38%;height:100%;
  background:rgba(238,228,200,.58);
  animation:detailVideoTime 5s ease-in-out infinite alternate;
}
@keyframes detailVideoSweep{to{transform:rotate(360deg)}}
@keyframes detailVideoTime{to{width:76%}}

/* Video detail preview — the native video is the only preview content. */
#workDetailCard[data-project="video"] .work-detail-preview{
  background:#000;
  display:grid;
  place-items:center;
}
#workDetailCard[data-project="video"] .work-detail-preview::after{
  box-shadow:none;
}
.detail-video-only{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}


/* VIDEO PRODUCTION HARNESS — production pipeline preview */
.detail-harness-stage{
  --vh-bg:#f2f5f5;
  --vh-surface:rgba(255,255,255,.88);
  --vh-soft:rgba(255,255,255,.66);
  --vh-line:rgba(38,66,70,.13);
  --vh-line-strong:rgba(38,66,70,.24);
  --vh-text:#17262a;
  --vh-muted:#66797e;
  --vh-faint:#91a0a4;
  --vh-cyan:#2c9d97;
  --vh-green:#5ea878;
  --vh-blue:#5b88b8;
  --vh-violet:#7f77b8;
  --vh-orange:#c98952;
  position:absolute;
  inset:0;
  padding:3.2%;
  color:var(--vh-text);
  background:
    radial-gradient(circle at 10% 8%,rgba(44,157,151,.08),transparent 24%),
    radial-gradient(circle at 88% 88%,rgba(91,136,184,.07),transparent 24%),
    var(--vh-bg);
  overflow:hidden;
}
.detail-harness-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(42,78,82,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(42,78,82,.035) 1px,transparent 1px);
  background-size:27px 27px;
  pointer-events:none;
}
.detail-harness-app{
  position:relative;
  z-index:1;
  height:100%;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:9px;
}
.detail-harness-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.detail-harness-brand small,
.detail-harness-eyebrow,
.detail-harness-stage-label,
.detail-harness-foot{
  display:block;
  font-size:8.6px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--vh-muted);
}
.detail-harness-brand h3{
  margin:3px 0 0;
  font-size:26px;
  line-height:1;
  letter-spacing:-.04em;
  font-weight:680;
}
.detail-harness-brand p{
  margin:6px 0 0;
  max-width:430px;
  font-size:10.2px;
  line-height:1.45;
  color:var(--vh-muted);
}
.detail-harness-metrics{
  display:flex;
  gap:6px;
}
.detail-harness-metric{
  min-width:72px;
  padding:8px 9px;
  border:1px solid var(--vh-line);
  border-radius:10px;
  background:var(--vh-soft);
  text-align:right;
}
.detail-harness-metric b{
  display:block;
  font-size:15px;
  line-height:1;
  color:var(--vh-cyan);
}
.detail-harness-metric span{
  display:block;
  margin-top:4px;
  font-size:7.2px;
  letter-spacing:.08em;
  color:var(--vh-muted);
  text-transform:uppercase;
}
.detail-harness-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:4px;
  padding:7px;
  border:1px solid var(--vh-line);
  border-radius:11px;
  background:var(--vh-surface);
  overflow:hidden;
}
.detail-harness-track::before{
  content:"";
  position:absolute;
  left:18px;right:18px;top:50%;
  height:1px;
  background:linear-gradient(90deg,var(--vh-cyan),var(--vh-green),var(--vh-blue),var(--vh-violet));
  opacity:.2;
}
.detail-harness-track::after{
  content:"";
  position:absolute;
  top:50%;left:4%;
  width:7px;height:7px;
  margin-top:-3px;
  border-radius:50%;
  background:var(--vh-cyan);
  box-shadow:0 0 14px rgba(44,157,151,.45);
  animation:harnessPacket 12s cubic-bezier(.45,.05,.55,.95) infinite;
}
.detail-harness-track-step{
  position:relative;
  z-index:1;
  min-width:0;
  padding:5px 3px;
  border:1px solid transparent;
  border-radius:7px;
  background:color-mix(in srgb,var(--vh-surface) 84%,transparent);
  text-align:center;
  animation:harnessStep 12s ease-in-out infinite;
}
.detail-harness-track-step:nth-child(2){animation-delay:.95s}
.detail-harness-track-step:nth-child(3){animation-delay:1.9s}
.detail-harness-track-step:nth-child(4){animation-delay:2.85s}
.detail-harness-track-step:nth-child(5){animation-delay:3.8s}
.detail-harness-track-step:nth-child(6){animation-delay:4.75s}
.detail-harness-track-step:nth-child(7){animation-delay:5.7s}
.detail-harness-track-step:nth-child(8){animation-delay:6.65s}
.detail-harness-track-step:nth-child(9){animation-delay:7.6s}
.detail-harness-track-step:nth-child(10){animation-delay:8.55s}
.detail-harness-track-step b{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:8.1px;
  font-weight:680;
  letter-spacing:.03em;
}
.detail-harness-track-step span{
  display:block;
  margin-top:2px;
  font-size:6.5px;
  color:var(--vh-faint);
}
.detail-harness-main{
  min-height:0;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:9px;
}
.detail-harness-panel{
  position:relative;
  min-width:0;
  min-height:0;
  border:1px solid var(--vh-line);
  border-radius:13px;
  background:var(--vh-surface);
  overflow:hidden;
}
.detail-harness-control{
  padding:11px;
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:8px;
}
.detail-harness-project{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.detail-harness-project h4{
  margin:2px 0 0;
  font-size:13px;
  line-height:1.15;
  font-weight:680;
}
.detail-harness-project p{
  margin:4px 0 0;
  font-size:8.1px;
  color:var(--vh-muted);
}
.detail-harness-chip{
  flex:none;
  padding:4px 7px;
  border:1px solid rgba(44,157,151,.28);
  border-radius:999px;
  color:var(--vh-cyan);
  background:rgba(44,157,151,.07);
  font-size:7px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.detail-harness-state-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
}
.detail-harness-state{
  padding:7px;
  border:1px solid var(--vh-line);
  border-radius:8px;
  background:var(--vh-soft);
}
.detail-harness-state small{
  display:block;
  font-size:6.8px;
  letter-spacing:.08em;
  color:var(--vh-muted);
  text-transform:uppercase;
}
.detail-harness-state b{
  display:block;
  margin-top:3px;
  font-size:8.7px;
  font-weight:660;
}
.detail-harness-state.pass b{color:var(--vh-green)}
.detail-harness-state.gate b{color:var(--vh-orange)}
.detail-harness-state.ready b{color:var(--vh-blue)}
.detail-harness-gates{
  min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.detail-harness-gate,
.detail-harness-change{
  padding:8px;
  border:1px solid var(--vh-line);
  border-radius:9px;
  background:var(--vh-soft);
}
.detail-harness-gate b,
.detail-harness-change b{
  display:block;
  font-size:8.8px;
  font-weight:680;
}
.detail-harness-gate p,
.detail-harness-change p{
  margin:4px 0 0;
  font-size:7.2px;
  line-height:1.45;
  color:var(--vh-muted);
}
.detail-harness-gate-actions{
  margin-top:7px;
  display:flex;
  gap:5px;
}
.detail-harness-gate-actions span{
  padding:4px 6px;
  border:1px solid var(--vh-line);
  border-radius:6px;
  font-size:6.8px;
  color:var(--vh-muted);
}
.detail-harness-gate-actions span:first-child{
  color:var(--vh-green);
  border-color:rgba(94,168,120,.3);
  background:rgba(94,168,120,.07);
  animation:harnessApprove 12s ease-in-out infinite;
}
.detail-harness-change strong{
  display:block;
  margin-top:7px;
  padding:5px 6px;
  border-radius:6px;
  background:rgba(201,137,82,.08);
  color:var(--vh-orange);
  font-size:7px;
  line-height:1.35;
  font-weight:620;
}
.detail-harness-remote{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding-top:7px;
  border-top:1px solid var(--vh-line);
}
.detail-harness-remote b{
  font-size:8px;
  font-weight:650;
}
.detail-harness-remote span{
  font-size:7.1px;
  color:var(--vh-green);
}
.detail-harness-output{
  padding:10px;
  display:grid;
  grid-template-rows:auto auto auto;
  align-content:start;
  align-self:start;
  gap:7px;
}
.detail-harness-output-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.detail-harness-output-head b{
  font-size:9.8px;
  font-weight:680;
}
.detail-harness-output-head span{
  font-size:7px;
  color:var(--vh-green);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.detail-harness-screen{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  min-height:0;
  border:1px solid rgba(78,119,127,.25);
  border-radius:9px;
  overflow:hidden;
  background:#061014;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.01);
}
.detail-harness-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#02080b;
}
.detail-harness-video:focus{outline:none}
.detail-harness-scene{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  opacity:0;
  transform:scale(1.015);
  animation:harnessScene 15s ease-in-out infinite;
}
.detail-harness-scene:nth-child(2){animation-delay:5s}
.detail-harness-scene:nth-child(3){animation-delay:10s}
.detail-harness-screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 72%,rgba(1,7,10,.18));
}

.detail-harness-output-meta{
  min-height:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
}
.detail-harness-output-meta div{
  padding:7px;
  border:1px solid var(--vh-line);
  border-radius:8px;
  background:var(--vh-soft);
}
.detail-harness-output-meta small{
  display:block;
  font-size:6.5px;
  letter-spacing:.08em;
  color:var(--vh-cyan);
}
.detail-harness-output-meta b{
  display:block;
  margin-top:2px;
  font-size:8px;
  font-weight:660;
}
.detail-harness-output-meta span{
  display:block;
  margin-top:2px;
  font-size:6.4px;
  color:var(--vh-muted);
}

.detail-harness-output-info{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  padding-top:2px;
}
.detail-harness-output-info span{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 8px;
  border:1px solid var(--vh-line);
  border-radius:999px;
  background:var(--vh-soft);
  color:var(--vh-muted);
  font-size:7.8px;
  letter-spacing:.07em;
  white-space:nowrap;
}
.detail-harness-player{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:7px;
}
.detail-harness-play{
  width:20px;height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--vh-line-strong);
  color:var(--vh-cyan);
  font-size:7px;
}
.detail-harness-progress{
  height:2px;
  border-radius:999px;
  background:var(--vh-line);
  overflow:hidden;
}
.detail-harness-progress i{
  display:block;
  width:18%;height:100%;
  background:linear-gradient(90deg,var(--vh-cyan),var(--vh-green));
  animation:harnessProgress 15s linear infinite;
}
.detail-harness-player span{
  font-size:7px;
  color:var(--vh-muted);
  white-space:nowrap;
}
.detail-harness-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.detail-harness-foot strong{
  color:var(--vh-text);
  font-size:8px;
  font-weight:660;
  letter-spacing:.01em;
  text-transform:none;
}
.detail-harness-foot span{
  text-align:right;
  white-space:nowrap;
}
@keyframes harnessPacket{
  0%,4%{left:4%;background:var(--vh-cyan)}
  12%{left:13%}
  24%{left:25%;background:var(--vh-green)}
  36%{left:37%}
  48%{left:49%;background:var(--vh-blue)}
  60%{left:61%}
  72%{left:73%;background:var(--vh-violet)}
  84%,92%{left:93%;background:var(--vh-green)}
  100%{left:4%;background:var(--vh-cyan)}
}
@keyframes harnessStep{
  0%,15%,100%{border-color:transparent;background:color-mix(in srgb,var(--vh-surface) 84%,transparent)}
  5%,10%{border-color:rgba(44,157,151,.22);background:rgba(44,157,151,.07)}
}
@keyframes harnessApprove{
  0%,47%,100%{box-shadow:none}
  52%,61%{box-shadow:0 0 0 3px rgba(94,168,120,.08);background:rgba(94,168,120,.13)}
}
@keyframes harnessScene{
  0%,4%{opacity:0;transform:scale(1.015)}
  9%,28%{opacity:1;transform:scale(1)}
  33%,100%{opacity:0;transform:scale(.995)}
}
@keyframes harnessProgress{from{width:5%}to{width:100%}}
html[data-theme="dark"] .detail-harness-stage{
  --vh-bg:#071015;
  --vh-surface:rgba(12,24,30,.93);
  --vh-soft:rgba(16,31,38,.78);
  --vh-line:rgba(126,165,174,.14);
  --vh-line-strong:rgba(126,165,174,.26);
  --vh-text:#e7f0f2;
  --vh-muted:#80959b;
  --vh-faint:#5f7379;
  --vh-cyan:#45b8ae;
  --vh-green:#73bd8e;
  --vh-blue:#78a4d2;
  --vh-violet:#9a91d3;
  --vh-orange:#d79a61;
  background:
    radial-gradient(circle at 10% 8%,rgba(45,169,157,.1),transparent 24%),
    radial-gradient(circle at 88% 88%,rgba(80,127,177,.085),transparent 24%),
    #071015;
}
html[data-theme="dark"] .detail-harness-stage::before{
  background-image:
    linear-gradient(rgba(126,165,174,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,165,174,.035) 1px,transparent 1px);
}
html[data-theme="light"] .detail-harness-stage{color-scheme:light}

/* VIDEO HARNESS — readability pass */
.detail-harness-brand small,
.detail-harness-eyebrow,
.detail-harness-stage-label{font-size:9.8px}
.detail-harness-brand h3{font-size:28px}
.detail-harness-brand p{font-size:11.4px}
.detail-harness-metric b{font-size:17px}
.detail-harness-metric span{font-size:8.3px}
.detail-harness-track-step b{font-size:9.4px}
.detail-harness-track-step span{font-size:7.6px}
.detail-harness-project h4{font-size:14.4px}
.detail-harness-project p{font-size:9.2px}
.detail-harness-chip{font-size:8px}
.detail-harness-state small{font-size:7.8px}
.detail-harness-state b{font-size:10px}
.detail-harness-gate b,
.detail-harness-change b{font-size:10px}
.detail-harness-gate p,
.detail-harness-change p{font-size:8.3px}
.detail-harness-gate-actions span{font-size:7.8px}
.detail-harness-change strong{font-size:8px}
.detail-harness-remote b{font-size:9.1px}
.detail-harness-remote span{font-size:8.1px}
.detail-harness-output-head b{font-size:11px}
.detail-harness-output-head span{font-size:8px}
.detail-harness-output-meta small{font-size:7.5px}
.detail-harness-output-meta b{font-size:9.3px}
.detail-harness-output-meta span{font-size:7.4px}
.detail-harness-play{font-size:8px}
.detail-harness-player span{font-size:8px}
.detail-harness-foot{font-size:9.3px}
.detail-harness-foot strong{font-size:9.3px}


/* VIDEO HARNESS — structural rebalance: equal visual weight */
.detail-harness-app{
  grid-template-rows:auto auto auto 1fr;
  align-content:stretch;
}
.detail-harness-main{
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:stretch;
}
.detail-harness-control{
  padding:10px;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:7px;
  align-content:stretch;
}
.detail-harness-state-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:4px;
}
.detail-harness-state{
  min-width:0;
  padding:6px 5px;
}
.detail-harness-state small{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.detail-harness-state b{
  white-space:nowrap;
}
.detail-harness-gates{
  min-height:0;
  height:100%;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.detail-harness-gate,
.detail-harness-change{
  min-height:0;
  height:100%;
  padding:8px;
}
.detail-harness-gate p,
.detail-harness-change p{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.detail-harness-output{
  height:auto;
  align-self:stretch;
  padding:10px;
  display:grid;
  grid-template-rows:auto auto auto;
  gap:8px;
  align-content:start;
}
.detail-harness-screen{
  width:100%;
  aspect-ratio:16/9;
}
.detail-harness-output-info{
  justify-content:center;
  padding-top:0;
}
.detail-harness-foot{
  align-self:end;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:center;
}
.detail-harness-foot strong,
.detail-harness-foot span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.detail-harness-foot span{
  text-align:right;
}

@media(max-width:860px){
  .detail-harness-stage{padding:4.5%;overflow:auto}
  .detail-harness-head{flex-direction:column}
  .detail-harness-metrics{width:100%}
  .detail-harness-metric{flex:1;text-align:left}
  .detail-harness-track{grid-template-columns:repeat(5,1fr)}
  .detail-harness-main{grid-template-columns:1fr}
  .detail-harness-output{min-height:0}
  .detail-harness-foot{align-items:flex-start;flex-direction:column}
  .detail-harness-foot span{text-align:left;white-space:normal}
}

/* MUSIC */
.detail-music-stage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 43%,rgba(238,228,200,.13),transparent 26%),
    radial-gradient(circle at 26% 70%,rgba(222,232,236,.035),transparent 20%),
    linear-gradient(180deg,rgba(255,255,255,.014),transparent);
}
.detail-music-orbit{
  position:absolute;
  left:50%;top:42%;
  width:min(36vw,310px);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(238,233,216,.065);
  transform:translate(-50%,-50%);
}
.detail-music-orbit::before{
  content:"";
  position:absolute;
  width:7px;height:7px;
  border-radius:50%;
  left:50%;top:-4px;
  background:#ddd5bd;
  box-shadow:0 0 18px rgba(238,228,200,.35);
  animation:detailMusicOrbit 7s linear infinite;
  transform-origin:0 calc(min(36vw,310px) / 2 + 4px);
  animation-play-state:paused;
}
.detail-music-stage.is-playing .detail-music-orbit::before{
  animation-play-state:running;
}
@keyframes detailMusicOrbit{to{transform:rotate(360deg)}}

/* Unframed — desktop orbit size refinement */
@media(min-width:861px){
  .detail-music-orbit{
    width:280px;
  }
  .detail-music-orbit::before{
    transform-origin:0 144px;
  }
  .detail-music-lyrics{
    top:42%;
    transform:translateY(-50%);
  }
}

.detail-music-track-label{
  position:absolute;
  top:12%;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  text-align:center;
  pointer-events:none;
}
.detail-music-track-label small{
  display:block;
  color:#666c68;
  font-size:7px;
  letter-spacing:.22em;
}
.detail-music-track-label strong{
  display:block;
  margin-top:8px;
  color:#d4d1c8;
  font-size:13px;
  font-weight:500;
  letter-spacing:.06em;
}

.detail-music-wave{
  position:absolute;
  left:8%;
  right:8%;
  bottom:26%;
  z-index:4;
  height:112px;
  display:flex;
  gap:2px;
  align-items:flex-end;
  justify-content:center;
  cursor:pointer;
  isolation:isolate;
}
.detail-music-wave::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.04) 10%,
    rgba(255,255,255,.11) 50%,
    rgba(255,255,255,.04) 90%,
    transparent
  );
}
.detail-music-wave::after{
  content:"";
  position:absolute;
  left:4%;
  right:4%;
  bottom:-10px;
  height:38px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(36,196,255,.16),
    rgba(60,115,255,.16) 17%,
    rgba(120,70,255,.16) 34%,
    rgba(255,56,183,.18) 52%,
    rgba(255,94,57,.17) 68%,
    rgba(255,196,44,.16) 84%,
    rgba(96,225,90,.16)
  );
  filter:blur(22px);
  opacity:1;
  pointer-events:none;
}
.detail-music-wave i{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:5px;
  height:calc(6px + var(--amp) * 92px);
  border-radius:999px 999px 3px 3px;
  background:linear-gradient(
    180deg,
    var(--bar-top, rgba(88,212,255,.98)),
    var(--bar-bottom, rgba(57,152,255,.86))
  );
  opacity:.18;
  transform-origin:center bottom;
  transition:
    opacity .16s ease,
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease,
    height .2s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
  filter:saturate(.98);
}
.detail-music-wave:hover i{
  opacity:.40;
}
.detail-music-wave i.is-played{
  opacity:1;
  box-shadow:
    0 0 14px color-mix(in srgb, var(--bar-top) 36%, transparent),
    0 0 30px color-mix(in srgb, var(--bar-top) 18%, transparent);
  filter:saturate(1.24) brightness(1.08);
}
.detail-music-stage.is-playing .detail-music-wave i{
  animation:detailSpectrumPulse 1.15s ease-in-out infinite;
  animation-delay:var(--d,0s);
}
.detail-music-stage.is-playing .detail-music-wave i.is-played{
  transform:scaleY(1.12);
}
@keyframes detailSpectrumPulse{
  0%,100%{ transform:scaleY(.88); }
  50%{ transform:scaleY(1.10); }
}

.detail-music-controls{
  position:absolute;
  left:8%;
  right:8%;
  bottom:8%;
  z-index:5;
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:15px;
  align-items:center;
}
.detail-music-play{
  appearance:none;
  border:1px solid rgba(238,233,216,.13);
  border-radius:999px;
  height:34px;
  background:rgba(255,255,255,.018);
  color:#c9c6bd;
  font:inherit;
  font-size:8px;
  letter-spacing:.14em;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.detail-music-play:hover{
  border-color:rgba(238,228,200,.30);
  background:rgba(238,228,200,.035);
  color:#efede6;
}
.detail-music-progress{
  position:relative;
  height:18px;
  cursor:pointer;
}
.detail-music-progress::before{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:1px;
  background:rgba(255,255,255,.10);
}
.detail-music-progress i{
  position:absolute;
  left:0;top:50%;
  height:1px;
  width:var(--progress,0%);
  background:rgba(238,228,200,.70);
  box-shadow:0 0 8px rgba(238,228,200,.14);
}
.detail-music-time{
  min-width:79px;
  color:#6e7470;
  font-size:8px;
  letter-spacing:.09em;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.detail-music-audio{
  display:none;
}

@media(max-width:860px){
  .detail-music-wave{
    left:5%;
    right:5%;
    bottom:28%;
    gap:2px;
    height:88px;
  }
  .detail-music-controls{
    left:5%;
    right:5%;
    bottom:8%;
    grid-template-columns:58px 1fr;
  }
  .detail-music-time{
    grid-column:2;
    margin-top:-8px;
  }
}


.detail-music-lyrics{
  position:absolute;
  left:10%;
  right:10%;
  top:40%;
  height:150px;
  z-index:6;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  pointer-events:none;
}
.detail-music-lyrics::before{
  content:"LYRICS · SYNCED";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  color:#505652;
  font-size:6px;
  letter-spacing:.20em;
  white-space:nowrap;
}
.detail-music-lyric{
  max-width:92%;
  margin:4px 0;
  color:#5f6561;
  font-size:9px;
  line-height:1.55;
  letter-spacing:.02em;
  opacity:.42;
  transform:translateY(0) scale(.97);
  transition:
    color .28s ease,
    opacity .28s ease,
    transform .34s cubic-bezier(.2,.7,.2,1),
    font-size .28s ease;
  pointer-events:auto;
  cursor:pointer;
}
.detail-music-lyric:hover{
  color:#aaaEaa;
  opacity:.82;
}
.detail-music-lyric.is-current{
  margin:7px 0;
  color:#e4e0d6;
  font-size:14px;
  font-weight:500;
  opacity:1;
  transform:scale(1);
  text-shadow:0 0 18px rgba(238,228,200,.10);
}
.detail-music-lyric.is-empty{
  cursor:default;
  opacity:.18;
}

.detail-music-wave{
  bottom:26%;
  height:112px;
}

.detail-music-controls{
  bottom:8%;
}

@media(max-width:860px){
  .detail-music-lyrics{
    left:6%;
    right:6%;
    top:22%;
    height:136px;
  }
  .detail-music-lyric{
    font-size:8px;
  }
  .detail-music-lyric.is-current{
    font-size:12px;
  }
  .detail-music-wave{
    bottom:24%;
    height:88px;
    gap:3px;
  }
  .detail-music-controls{
    bottom:7%;
  }
}

/* MEMORA */
.detail-memora-stage{
  position:absolute;
  inset:0;
  padding:2.9% 2.9% 2.7%;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0)),
    radial-gradient(circle at 20% 12%,rgba(193,192,255,.09),transparent 22%),
    #eef1f7;
}
.detail-memora-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(118,131,177,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(118,131,177,.08) 1px,transparent 1px);
  background-size:28px 28px;
  opacity:.46;
  pointer-events:none;
}
.detail-memora-stage > *{
  position:relative;
  z-index:1;
}
.detail-memora-app{
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:12px;
  height:100%;
}
.detail-memora-card,
.detail-memora-stat,
.detail-memora-panel,
.detail-memora-domain,
.detail-memora-flowstep{
  border:1px solid rgba(173,181,215,.32);
  border-radius:16px;
  background:rgba(255,255,255,.84);
  box-shadow:
    0 10px 25px rgba(106,117,166,.08),
    inset 0 1px 0 rgba(255,255,255,.48);
}
.detail-memora-hero{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(215px,.85fr);
  gap:12px;
}
.detail-memora-head{
  padding:16px 18px 14px;
}
.detail-memora-head small,
.detail-memora-kicker,
.detail-memora-section small,
.detail-memora-flowtitle,
.detail-memora-domain small,
.detail-memora-footnote{
  display:block;
  color:#7b80c7;
  font-size:7px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.detail-memora-head h3{
  margin:10px 0 0;
  color:#1a1f33;
  font-size:42px;
  line-height:.95;
  letter-spacing:-.05em;
  font-weight:800;
}
.detail-memora-head p{
  margin:6px 0 0;
  color:#6b70ba;
  font-size:11px;
  font-weight:700;
}
.detail-memora-search{
  margin-top:16px;
  height:30px;
  border:1px solid rgba(190,196,225,.62);
  border-radius:11px;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 10px 0 12px;
  color:#8a8eb4;
  font-size:8px;
}
.detail-memora-search b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:27px;
  height:18px;
  border-radius:7px;
  color:#8187ab;
  background:#f1f3fa;
  font-size:7px;
}
.detail-memora-focus{
  padding:15px 16px 14px;
  background:linear-gradient(180deg,rgba(244,241,255,.92),rgba(241,239,252,.86));
}
.detail-memora-focus h4{
  margin:6px 0 0;
  color:#232849;
  font-size:14px;
  line-height:1.35;
  font-weight:800;
}
.detail-memora-focus p{
  margin:8px 0 0;
  color:#666d89;
  font-size:8px;
  line-height:1.6;
}
.detail-memora-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:11px;
  min-width:74px;
  height:24px;
  padding:0 11px;
  border-radius:9px;
  border:1px solid rgba(123,128,199,.5);
  color:#737acd;
  background:#fff;
  font-size:8px;
  font-weight:800;
}
.detail-memora-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.detail-memora-stat{
  padding:12px 6px 11px;
  text-align:center;
}
.detail-memora-stat b{
  display:block;
  color:#3550c8;
  font-size:22px;
  line-height:1;
  font-weight:800;
}
.detail-memora-stat span{
  display:block;
  margin-top:5px;
  color:#7b80a5;
  font-size:8px;
  font-weight:700;
}
.detail-memora-main{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.95fr);
  gap:12px;
  min-height:0;
}
.detail-memora-left,
.detail-memora-right{
  display:grid;
  gap:12px;
  min-height:0;
}
.detail-memora-left{grid-template-rows:1.05fr .92fr}
.detail-memora-right{grid-template-rows:.95fr 1.02fr}
.detail-memora-panel{
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.detail-memora-panelhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px 10px;
}
.detail-memora-panelhead h5{
  margin:2px 0 0;
  color:#202643;
  font-size:14px;
  line-height:1.15;
  font-weight:800;
}
.detail-memora-panelhint{
  color:#a2a7da;
  font-size:10px;
  font-weight:800;
}
.detail-memora-list{padding:0 14px 10px; display:grid; gap:0}
.detail-memora-item{
  padding:9px 0;
  border-top:1px solid rgba(196,202,229,.62);
}
.detail-memora-item:first-child{border-top:0}
.detail-memora-item b{
  display:block;
  color:#1f243a;
  font-size:10px;
  line-height:1.45;
  font-weight:700;
}
.detail-memora-item span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:4px;
  color:#8c91ad;
  font-size:8px;
  font-weight:700;
}
.detail-memora-item span em{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-style:normal;
}
.detail-memora-item span i{
  font-style:normal;
}
.detail-memora-tag{
  display:inline-flex;
  align-items:center;
  padding:0 8px;
  height:18px;
  border-radius:999px;
  background:#fff3e8;
  color:#d09a6e;
  font-size:7px;
  font-weight:800;
}
.detail-memora-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;
  padding:0 14px 12px;
}
.detail-memora-metrics b{
  display:block;
  color:#615ddf;
  font-size:20px;
  line-height:1;
  font-weight:800;
}
.detail-memora-metrics span{
  display:block;
  margin-top:4px;
  color:#7e84a1;
  font-size:7px;
  line-height:1.4;
  font-weight:700;
}
.detail-memora-note{
  margin:0 14px 13px;
  padding-top:9px;
  border-top:1px solid rgba(196,202,229,.62);
  color:#666c87;
  font-size:8px;
  line-height:1.6;
}
.detail-memora-link{
  margin-top:7px;
  color:#706fdf;
  font-weight:800;
}
.detail-memora-insights,
.detail-memora-reading{
  padding:0 14px 12px;
  display:grid;
  gap:8px;
}
.detail-memora-insight,
.detail-memora-readingitem{
  padding-top:8px;
  border-top:1px solid rgba(196,202,229,.62);
}
.detail-memora-insight:first-child,
.detail-memora-readingitem:first-child{border-top:0}
.detail-memora-insight b,
.detail-memora-readingitem b{
  display:block;
  color:#242a44;
  font-size:9px;
  line-height:1.55;
  font-weight:700;
}
.detail-memora-insight span,
.detail-memora-readingitem span{
  display:block;
  margin-top:4px;
  color:#7f85a3;
  font-size:7px;
  line-height:1.55;
}
.detail-memora-domains{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.detail-memora-domain{
  padding:13px 12px 12px;
}
.detail-memora-domain h6{
  margin:8px 0 0;
  color:#4f5fd4;
  font-size:10px;
  line-height:1.45;
  font-weight:800;
}
.detail-memora-domain p{
  margin:6px 0 0;
  color:#7e84a0;
  font-size:7px;
  line-height:1.55;
}
.detail-memora-domain b{
  display:block;
  margin-top:9px;
  color:#20263f;
  font-size:8px;
  font-weight:800;
}
.detail-memora-flow{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:9px;
}
.detail-memora-flowstep{
  position:relative;
  padding:11px 10px 10px;
}
.detail-memora-flowstep::after{
  content:"→";
  position:absolute;
  right:-10px;
  top:50%;
  transform:translateY(-50%);
  color:#6b79d7;
  font-size:12px;
  font-weight:700;
}
.detail-memora-flowstep:last-child::after{display:none}
.detail-memora-flowstep b{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;height:22px;
  border-radius:50%;
  background:#ff9a2e;
  color:#fff;
  font-size:10px;
  font-weight:800;
}
.detail-memora-flowstep:nth-child(1) b,
.detail-memora-flowstep:nth-child(5) b{background:#4f87e3}
.detail-memora-flowstep:nth-child(4) b{background:#f18a1e}
.detail-memora-flowstep h6{
  margin:8px 0 0;
  color:#22304e;
  font-size:9px;
  line-height:1.35;
  font-weight:800;
}
.detail-memora-flowstep p{
  margin:5px 0 0;
  color:#79809d;
  font-size:7px;
  line-height:1.45;
}
@media(max-width:860px){
  .detail-memora-stage{padding:4.5%}
  .detail-memora-app{grid-template-rows:auto auto auto auto;gap:10px}
  .detail-memora-hero,
  .detail-memora-main,
  .detail-memora-domains,
  .detail-memora-flow{grid-template-columns:1fr}
  .detail-memora-stats{grid-template-columns:repeat(2,1fr)}
  .detail-memora-left,
  .detail-memora-right{grid-template-rows:auto}
  .detail-memora-head h3{font-size:32px}
  .detail-memora-flowstep::after{display:none}
}

/* AI RADAR — daily signal processing pipeline */
.detail-radar-stage{
  --radar-bg:#f2f5f4;
  --radar-surface:rgba(255,255,255,.88);
  --radar-surface-soft:rgba(255,255,255,.62);
  --radar-line:rgba(42,65,60,.12);
  --radar-line-strong:rgba(42,65,60,.22);
  --radar-text:#23302d;
  --radar-muted:#71807c;
  --radar-faint:#98a39f;
  --radar-green:#4b7b6c;
  --radar-cyan:#4f8190;
  --radar-blue:#647fa8;
  --radar-violet:#8176a8;
  position:absolute;
  inset:0;
  padding:3.3%;
  color:var(--radar-text);
  background:
    radial-gradient(circle at 12% 8%,rgba(75,123,108,.09),transparent 23%),
    radial-gradient(circle at 88% 86%,rgba(100,127,168,.07),transparent 24%),
    var(--radar-bg);
  overflow:hidden;
}
.detail-radar-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(54,81,74,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(54,81,74,.035) 1px,transparent 1px);
  background-size:25px 25px;
  pointer-events:none;
}
.detail-radar-app{
  position:relative;
  z-index:1;
  height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:9px;
}
.detail-radar-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}
.detail-radar-brand small,
.detail-radar-status small,
.detail-radar-section-label,
.detail-radar-foot{
  display:block;
  font-size:6.7px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--radar-muted);
}
.detail-radar-brand h3{
  margin:3px 0 1px;
  font-size:24px;
  line-height:1;
  letter-spacing:-.035em;
  font-weight:650;
}
.detail-radar-brand p{
  margin:5px 0 0;
  max-width:390px;
  font-size:7.8px;
  line-height:1.45;
  color:var(--radar-muted);
}
.detail-radar-status{
  min-width:114px;
  padding:8px 10px;
  border:1px solid var(--radar-line);
  border-radius:10px;
  background:var(--radar-surface-soft);
  text-align:right;
}
.detail-radar-status b{
  display:block;
  margin-top:3px;
  font-size:10px;
  font-weight:650;
  color:var(--radar-green);
}
.detail-radar-body{
  min-height:0;
  display:grid;
  grid-template-columns:.78fr 1.48fr 1.08fr;
  gap:9px;
}
.detail-radar-card{
  position:relative;
  min-width:0;
  min-height:0;
  border:1px solid var(--radar-line);
  border-radius:13px;
  background:var(--radar-surface);
  box-shadow:0 10px 28px rgba(41,59,54,.045);
  overflow:hidden;
}
.detail-radar-sources{
  padding:12px;
  display:flex;
  flex-direction:column;
}
.detail-radar-source-list{
  margin-top:9px;
  display:grid;
  gap:7px;
}
.detail-radar-source{
  position:relative;
  padding:8px 8px 8px 25px;
  border:1px solid var(--radar-line);
  border-radius:9px;
  background:var(--radar-surface-soft);
  animation:radarSourcePulse 9.6s ease-in-out infinite;
}
.detail-radar-source:nth-child(2){animation-delay:.55s}
.detail-radar-source:nth-child(3){animation-delay:1.1s}
.detail-radar-source:nth-child(4){animation-delay:1.65s}
.detail-radar-source::before{
  content:"";
  position:absolute;
  left:9px;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border-radius:50%;
  background:var(--radar-green);
  box-shadow:0 0 0 4px rgba(75,123,108,.08);
}
.detail-radar-source b{
  display:block;
  font-size:8.8px;
  font-weight:620;
}
.detail-radar-source span{
  display:block;
  margin-top:2px;
  font-size:6.2px;
  color:var(--radar-muted);
}
.detail-radar-capture{
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid var(--radar-line);
}
.detail-radar-capture b{
  display:block;
  font-size:9px;
  font-weight:620;
}
.detail-radar-capture span{
  display:block;
  margin-top:3px;
  font-size:6.3px;
  line-height:1.35;
  color:var(--radar-muted);
}
.detail-radar-pipe{
  padding:11px 12px;
}
.detail-radar-pipe::before{
  content:"";
  position:absolute;
  left:27px;
  top:43px;
  bottom:17px;
  width:1px;
  background:linear-gradient(var(--radar-green),var(--radar-cyan),var(--radar-blue),var(--radar-violet));
  opacity:.28;
}
.detail-radar-pipe::after{
  content:"";
  position:absolute;
  left:24px;
  top:44px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--radar-green);
  box-shadow:0 0 12px rgba(75,123,108,.45);
  animation:radarPacket 9.6s cubic-bezier(.45,.05,.55,.95) infinite;
}
.detail-radar-steps{
  margin-top:7px;
  display:grid;
  gap:4px;
}
.detail-radar-step{
  position:relative;
  padding:6px 7px 6px 29px;
  border:1px solid transparent;
  border-radius:8px;
  transition:.3s ease;
  animation:radarStepGlow 9.6s ease-in-out infinite;
}
.detail-radar-step:nth-child(2){animation-delay:1.35s}
.detail-radar-step:nth-child(3){animation-delay:2.7s}
.detail-radar-step:nth-child(4){animation-delay:4.05s}
.detail-radar-step:nth-child(5){animation-delay:5.4s}
.detail-radar-step:nth-child(6){animation-delay:6.75s}
.detail-radar-step em{
  position:absolute;
  left:5px;
  top:7px;
  width:15px;
  height:15px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--radar-bg);
  border:1px solid var(--radar-line-strong);
  color:var(--radar-muted);
  font-size:5.8px;
  font-style:normal;
  font-weight:700;
}
.detail-radar-step b{
  display:inline-block;
  font-size:7.8px;
  letter-spacing:.05em;
  font-weight:700;
}
.detail-radar-step > span{
  margin-left:5px;
  font-size:6.1px;
  color:var(--radar-muted);
}
.detail-radar-dedup{
  margin-top:4px;
  display:flex;
  gap:3px;
  flex-wrap:wrap;
}
.detail-radar-dedup i{
  padding:2px 4px;
  border-radius:4px;
  background:rgba(100,127,168,.08);
  color:var(--radar-muted);
  font-size:5.4px;
  font-style:normal;
}
.detail-radar-dedup i.drop{
  text-decoration:line-through;
  opacity:.38;
}
.detail-radar-dedup i.keep{
  color:var(--radar-green);
  background:rgba(75,123,108,.1);
}
.detail-radar-translate{
  margin-top:4px;
  padding:4px 6px;
  border-radius:6px;
  background:rgba(129,118,168,.06);
  font-size:5.8px;
  line-height:1.4;
  color:var(--radar-muted);
}
.detail-radar-translate strong{
  color:var(--radar-text);
  font-weight:600;
}
.detail-radar-output{
  display:grid;
  grid-template-rows:1.15fr .85fr;
  gap:9px;
}
.detail-radar-result{
  padding:11px;
}
.detail-radar-result-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.detail-radar-result-head b{
  font-size:9px;
  font-weight:680;
}
.detail-radar-result-head span{
  font-size:5.8px;
  letter-spacing:.08em;
  color:var(--radar-green);
}
.detail-radar-story{
  padding:7px 0;
  border-top:1px solid var(--radar-line);
}
.detail-radar-story:first-of-type{margin-top:7px}
.detail-radar-story small{
  display:block;
  font-size:5.6px;
  letter-spacing:.08em;
  color:var(--radar-cyan);
}
.detail-radar-story b{
  display:block;
  margin-top:2px;
  font-size:7.3px;
  line-height:1.35;
  font-weight:600;
}
.detail-radar-story p{
  margin:2px 0 0;
  font-size:5.8px;
  line-height:1.35;
  color:var(--radar-muted);
}
.detail-radar-brief{
  display:flex;
  flex-direction:column;
}
.detail-radar-brief blockquote{
  margin:8px 0 0;
  padding:8px 9px;
  border-left:2px solid var(--radar-violet);
  background:rgba(129,118,168,.055);
  color:var(--radar-muted);
  font-size:6.2px;
  line-height:1.5;
}
.detail-radar-brief-tags{
  margin-top:auto;
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}
.detail-radar-brief-tags span{
  padding:3px 5px;
  border:1px solid var(--radar-line);
  border-radius:999px;
  font-size:5.5px;
  color:var(--radar-muted);
}
.detail-radar-foot{
  padding-top:1px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.detail-radar-foot strong{
  color:var(--radar-text);
  font-size:6.8px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:none;
}
.detail-radar-foot span{
  text-align:right;
  white-space:nowrap;
}

/* AI Radar readability pass — enlarge preview typography only */
.detail-radar-brand small,
.detail-radar-status small,
.detail-radar-section-label,
.detail-radar-foot{
  font-size:8.5px;
}
.detail-radar-brand p{
  font-size:10.2px;
}
.detail-radar-status b{
  font-size:12.4px;
}
.detail-radar-source b{
  font-size:11.2px;
}
.detail-radar-source span{
  font-size:8.2px;
}
.detail-radar-capture b{
  font-size:11.2px;
}
.detail-radar-capture span{
  font-size:8.2px;
}
.detail-radar-step em{
  font-size:7.4px;
}
.detail-radar-step b{
  font-size:10.2px;
}
.detail-radar-step > span{
  font-size:8px;
}
.detail-radar-dedup i{
  font-size:7.1px;
}
.detail-radar-translate{
  font-size:7.8px;
}
.detail-radar-result-head b{
  font-size:11.2px;
}
.detail-radar-result-head span{
  font-size:7.6px;
}
.detail-radar-story small{
  font-size:7.4px;
}
.detail-radar-story b{
  font-size:9.6px;
}
.detail-radar-story p{
  font-size:7.8px;
}
.detail-radar-brief blockquote{
  font-size:8.1px;
}
.detail-radar-brief-tags span{
  font-size:7.1px;
}
.detail-radar-foot strong{
  font-size:8.7px;
}

@keyframes radarSourcePulse{
  0%,12%,100%{transform:translateX(0);border-color:var(--radar-line)}
  5%{transform:translateX(2px);border-color:rgba(75,123,108,.38)}
}
@keyframes radarPacket{
  0%,6%{top:44px;background:var(--radar-green)}
  16%{top:21%;background:var(--radar-green)}
  32%{top:35%;background:var(--radar-cyan)}
  48%{top:49%;background:var(--radar-cyan)}
  64%{top:64%;background:var(--radar-blue)}
  80%,88%{top:80%;background:var(--radar-violet)}
  100%{top:44px;background:var(--radar-green)}
}
@keyframes radarStepGlow{
  0%,13%,100%{background:transparent;border-color:transparent}
  5%,9%{background:rgba(75,123,108,.065);border-color:rgba(75,123,108,.16)}
}
html[data-theme="dark"] .detail-radar-stage{
  --radar-bg:#08100f;
  --radar-surface:rgba(13,24,22,.92);
  --radar-surface-soft:rgba(17,29,27,.78);
  --radar-line:rgba(137,172,162,.12);
  --radar-line-strong:rgba(137,172,162,.22);
  --radar-text:#dce8e4;
  --radar-muted:#788f88;
  --radar-faint:#5f726c;
  --radar-green:#6da18f;
  --radar-cyan:#69a0ae;
  --radar-blue:#7f9bc2;
  --radar-violet:#9a8cc4;
  background:
    radial-gradient(circle at 12% 8%,rgba(74,129,109,.1),transparent 24%),
    radial-gradient(circle at 88% 86%,rgba(105,128,178,.075),transparent 24%),
    #08100f;
}
html[data-theme="dark"] .detail-radar-stage::before{
  background-image:
    linear-gradient(rgba(130,168,156,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(130,168,156,.035) 1px,transparent 1px);
}
html[data-theme="dark"] .detail-radar-card{
  box-shadow:0 12px 30px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.012);
}
html[data-theme="light"] .detail-radar-stage{color-scheme:light}
@media(max-width:860px){
  .detail-radar-stage{padding:4.5%}
  .detail-radar-body{grid-template-columns:1fr;overflow:auto}
  .detail-radar-output{grid-template-rows:auto auto}
  .detail-radar-foot{align-items:flex-start;flex-direction:column}
  .detail-radar-foot span{text-align:left;white-space:normal}
}

/* AI Radar — make the act of filtering, not the information list, the visual. */
.detail-radar-app.is-signal-filter{width:min(100%,1040px);margin:auto;gap:clamp(14px,1.8vw,24px)}
.is-signal-filter .detail-radar-filter-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.is-signal-filter .detail-radar-filter-head small,
.is-signal-filter .detail-radar-filter-state,
.is-signal-filter .detail-radar-filter-steps,
.is-signal-filter .detail-radar-fragments > p,
.is-signal-filter .detail-radar-filter-result > p,
.is-signal-filter .detail-radar-signal-status,
.is-signal-filter .detail-radar-signal-source span,
.is-signal-filter .detail-radar-filter-foot{font-size:9px;letter-spacing:.15em;color:var(--radar-muted)}
.is-signal-filter .detail-radar-filter-head h3{margin:5px 0 0;font-size:clamp(27px,3vw,39px);line-height:1;letter-spacing:-.045em}
.is-signal-filter .detail-radar-filter-state{display:flex;align-items:center;gap:7px;padding-bottom:3px;white-space:nowrap}
.is-signal-filter .detail-radar-filter-state i{width:6px;height:6px;border-radius:50%;background:var(--radar-green);box-shadow:0 0 0 4px rgba(75,123,108,.1);animation:radarFilterPulse 3.6s ease-in-out infinite}
.is-signal-filter .detail-radar-filter{position:relative;min-height:0;overflow:hidden}
.is-signal-filter .detail-radar-filter-field{position:relative;min-height:clamp(365px,38vw,480px);border-top:1px solid var(--radar-line-strong);border-bottom:1px solid var(--radar-line-strong);overflow:hidden;background:radial-gradient(circle at 50% 52%,color-mix(in srgb,var(--radar-green) 8%,transparent),transparent 29%)}
.is-signal-filter .detail-radar-filter-field::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.94%,var(--radar-line) 50%,transparent 50.06%);opacity:.7;pointer-events:none}
.is-signal-filter .detail-radar-filter-routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.is-signal-filter .detail-radar-filter-routes path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.is-signal-filter .detail-radar-filter-routes .is-noise{stroke:var(--radar-line-strong);stroke-width:1;stroke-dasharray:2 8;opacity:.62}
.is-signal-filter .detail-radar-filter-routes .is-pass{stroke:var(--radar-green);stroke-width:1.25;stroke-dasharray:3 7;animation:radarRouteFlow 4.8s linear infinite}
.is-signal-filter .detail-radar-filter-routes .is-output{stroke:var(--radar-cyan);stroke-width:1;stroke-dasharray:3 8;opacity:.72;animation:radarRouteFlow 4.8s linear -1.6s infinite}
.is-signal-filter .detail-radar-filter-steps{position:absolute;z-index:1;top:8%;left:50%;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;transform:translateX(-50%);font-size:7px;white-space:nowrap}
.is-signal-filter .detail-radar-filter-steps i{width:18px;height:1px;background:var(--radar-line-strong)}
.is-signal-filter .detail-radar-fragments{position:absolute;z-index:2;top:19%;bottom:9%;left:4%;width:34%;color:var(--radar-muted)}
.is-signal-filter .detail-radar-fragments > p{margin:0;color:var(--radar-muted);font-size:8px}
.is-signal-filter .detail-radar-fragments > p b{margin-left:6px;color:var(--radar-green);font-weight:650}
.is-signal-filter .detail-radar-fragments .is-source,
.is-signal-filter .detail-radar-fragments .is-rejection{position:absolute;display:block;width:max-content;max-width:95%;font-size:9px;line-height:1.3}
.is-signal-filter .detail-radar-fragments .is-source{padding:5px 7px;border-left:1px solid var(--radar-line-strong);animation:radarFragmentDrift 8s ease-in-out infinite}
.is-signal-filter .detail-radar-fragments .one{top:18%;left:4%;animation-delay:-.5s}
.is-signal-filter .detail-radar-fragments .two{top:36%;left:13%;animation-delay:-2s}
.is-signal-filter .detail-radar-fragments .three{top:54%;left:1%;animation-delay:-3.5s}
.is-signal-filter .detail-radar-fragments .four{top:70%;left:15%;animation-delay:-5s}
.is-signal-filter .detail-radar-fragments .five{top:84%;left:6%;animation-delay:-6.5s}
.is-signal-filter .detail-radar-fragments .is-rejected{color:var(--radar-faint);opacity:.48;text-decoration:line-through;text-decoration-color:var(--radar-violet)}
.is-signal-filter .detail-radar-fragments .is-rejection{color:var(--radar-faint);font-size:7px;letter-spacing:.1em;opacity:.65}
.is-signal-filter .detail-radar-fragments .duplicate{top:59%;left:53%}
.is-signal-filter .detail-radar-fragments .weak{top:78%;left:45%}
.is-signal-filter .detail-radar-filter-core{position:absolute;z-index:3;top:54%;left:50%;display:grid;place-items:center;width:clamp(166px,20vw,244px);aspect-ratio:1;transform:translate(-50%,-50%)}
.is-signal-filter .detail-radar-filter-core::before,
.is-signal-filter .detail-radar-filter-core::after{content:"";position:absolute;border:1px solid var(--radar-line-strong);border-radius:50%}
.is-signal-filter .detail-radar-filter-core::before{inset:0;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 65%)}
.is-signal-filter .detail-radar-filter-core::after{inset:9%;border-style:dashed;opacity:.75;animation:radarCoreRotate 18s linear infinite}
.is-signal-filter .detail-radar-filter-core-ring{position:absolute;inset:20%;border:1px solid color-mix(in srgb,var(--radar-green) 65%,var(--radar-line));border-radius:50%;box-shadow:0 0 0 14px color-mix(in srgb,var(--radar-green) 5%,transparent),0 0 40px color-mix(in srgb,var(--radar-cyan) 12%,transparent);animation:radarCoreBreathe 4.6s ease-in-out infinite}
.is-signal-filter .detail-radar-filter-core-window{position:relative;z-index:1;display:grid;place-items:center;width:33%;aspect-ratio:1;border:1px solid var(--radar-cyan);border-radius:50%;background:color-mix(in srgb,var(--radar-surface) 84%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--radar-cyan) 25%,transparent)}
.is-signal-filter .detail-radar-filter-core-window small{font-size:6px;letter-spacing:.13em;color:var(--radar-muted);transform:translateY(4px)}
.is-signal-filter .detail-radar-filter-core-window b{font-size:20px;line-height:1;color:var(--radar-text);font-weight:600}
.is-signal-filter .detail-radar-filter-core-window span{font-size:6px;letter-spacing:.15em;color:var(--radar-green);transform:translateY(-4px)}
.is-signal-filter .detail-radar-filter-core > p{position:absolute;bottom:-8%;margin:0;color:var(--radar-faint);font-size:7px;line-height:1.6;letter-spacing:.12em;text-align:center}
.is-signal-filter .detail-radar-filter-core > p strong{color:var(--radar-green);font-weight:600}
.is-signal-filter .detail-radar-filter-result{position:absolute;z-index:2;top:16%;right:5%;width:clamp(230px,28%,300px)}
.is-signal-filter .detail-radar-filter-result > p{margin:0;color:var(--radar-muted);font-size:8px}
.is-signal-filter .detail-radar-signal-status{display:block;margin-top:18px;color:var(--radar-green);font-size:8px}
.is-signal-filter .detail-radar-filter-result h4{display:grid;gap:2px;margin:8px 0 0;font-size:clamp(18px,1.62vw,23px);line-height:1.3;letter-spacing:-.04em;font-weight:540}
.is-signal-filter .detail-radar-filter-result h4 span{color:var(--radar-muted)}
.is-signal-filter .detail-radar-filter-result h4 strong{color:var(--radar-text);font-weight:620;white-space:nowrap}
.is-signal-filter .detail-radar-signal-source{display:grid;gap:6px;margin-top:20px;padding-top:10px;border-top:1px solid var(--radar-line)}
.is-signal-filter .detail-radar-signal-source b{color:var(--radar-cyan);font-size:9px;font-weight:650}
.is-signal-filter .detail-radar-filter-foot{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.is-signal-filter .detail-radar-filter-foot span{padding:5px 7px;border:1px solid var(--radar-line);border-radius:999px}
.is-signal-filter .detail-radar-filter-foot span:first-child{margin-right:auto;border:0;padding-left:0;color:var(--radar-muted)}
html[data-theme="dark"] .is-signal-filter .detail-radar-filter-field{background:radial-gradient(circle at 50% 52%,rgba(79,151,132,.085),transparent 29%)}
@keyframes radarFilterPulse{50%{opacity:.38;transform:scale(.76)}}
@keyframes radarRouteFlow{to{stroke-dashoffset:-50}}
@keyframes radarFragmentDrift{50%{transform:translateX(5px);opacity:.72}}
@keyframes radarCoreRotate{to{transform:rotate(360deg)}}
@keyframes radarCoreBreathe{50%{transform:scale(.93);opacity:.68}}
@media(prefers-reduced-motion:reduce){.is-signal-filter .detail-radar-filter-state i,.is-signal-filter .detail-radar-filter-routes .is-pass,.is-signal-filter .detail-radar-filter-routes .is-output,.is-signal-filter .detail-radar-fragments .is-source,.is-signal-filter .detail-radar-filter-core::after,.is-signal-filter .detail-radar-filter-core-ring{animation:none}}

/* AI Radar reference composition — raw signals flow into one quiet filter aperture. */
.detail-radar-stage{
  --radar-bg:#f4f1ea;
  --radar-surface:rgba(255,255,255,.18);
  --radar-line:rgba(63,119,104,.16);
  --radar-line-strong:rgba(63,119,104,.26);
  --radar-text:#202624;
  --radar-muted:#8d9691;
  --radar-faint:#adb5b1;
  --radar-accent:#3f7768;
  --radar-accent-2:#4f8190;
  position:absolute;
  inset:0;
  padding:0;
  color:var(--radar-text);
  background:var(--radar-bg);
  overflow:hidden;
}
.detail-radar-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(63,119,104,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,119,104,.028) 1px,transparent 1px);
  background-size:42px 42px;
  pointer-events:none;
}
.detail-radar-app.is-reference-filter{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
}
.is-reference-filter .detail-radar-filter-head{
  position:absolute;
  left:4.5%;
  right:4.5%;
  top:5%;
  z-index:10;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.is-reference-filter .detail-radar-brand b{
  display:block;
  font:700 12px/1 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.16em;
}
.is-reference-filter .detail-radar-brand b span{color:var(--radar-accent)}
.is-reference-filter .detail-radar-brand small,
.is-reference-filter .detail-radar-filter-mini,
.is-reference-filter .detail-radar-filter-label,
.is-reference-filter .detail-radar-filter-foot{
  font:9px/1 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.is-reference-filter .detail-radar-brand small{
  display:block;
  margin-top:7px;
  color:var(--radar-muted);
  font-size:7px;
  letter-spacing:.1em;
}
.is-reference-filter .detail-radar-filter-mini{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  color:var(--radar-muted);
  font-size:7px;
  white-space:nowrap;
  text-align:center;
}
.is-reference-filter .detail-radar-filter{
  position:absolute;
  inset:0;
  min-height:0;
  overflow:hidden;
}
.is-reference-filter .detail-radar-filter-field{
  position:absolute;
  inset:0;
  min-height:0;
  overflow:hidden;
  background:transparent;
}
.is-reference-filter .detail-radar-filter-label{
  position:absolute;
  z-index:10;
  top:18%;
  color:#777f7a;
  font-size:7px;
}
.is-reference-filter .detail-radar-filter-label-incoming{left:6%}
.is-reference-filter .detail-radar-filter-label-kept{right:7%;color:var(--radar-accent)}
.is-reference-filter .detail-radar-filter-label b{margin-left:7px;color:var(--radar-accent);font-weight:600}
.is-reference-filter .detail-radar-filter-routes{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  pointer-events:none;
}
.is-reference-filter .detail-radar-filter-routes path{
  fill:none;
  stroke:var(--radar-line-strong);
  stroke-width:1.15;
  stroke-dasharray:4 9;
  opacity:.8;
  vector-effect:non-scaling-stroke;
}
.is-reference-filter .detail-radar-flow-layer{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 38%,rgba(0,0,0,.88) 41%,rgba(0,0,0,.48) 45%,transparent 49%);
  mask-image:linear-gradient(90deg,#000 0%,#000 38%,rgba(0,0,0,.88) 41%,rgba(0,0,0,.48) 45%,transparent 49%);
}
.is-reference-filter .detail-radar-flow-item{
  position:absolute;
  left:5%;
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:39%;
  white-space:nowrap;
  color:#7f8883;
  font-size:10px;
  line-height:1;
  opacity:0;
  will-change:transform,opacity;
  animation:radarReferenceDrift var(--radar-flow-duration) cubic-bezier(.25,.12,.18,.98) infinite;
}
.is-reference-filter .detail-radar-flow-item i,
.is-reference-filter .detail-radar-kept-signal > i{
  display:block;
  width:1px;
  height:26px;
  flex:0 0 auto;
  background:var(--radar-line-strong);
}
.is-reference-filter .detail-radar-flow-item strong{color:#68726d;font-weight:600}
.is-reference-filter .detail-radar-flow-item em{
  margin-left:9px;
  color:var(--radar-faint);
  font:7px/1 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.1em;
  font-style:normal;
}
.is-reference-filter .detail-radar-flow-item.is-rejected,
.is-reference-filter .detail-radar-flow-item.is-rejected strong{
  color:var(--radar-faint);
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
.is-reference-filter .detail-radar-flow-item.one{top:28%;--radar-flow-duration:11s;animation-delay:-7.2s}
.is-reference-filter .detail-radar-flow-item.two{top:40%;--radar-flow-duration:12.4s;animation-delay:-3.1s}
.is-reference-filter .detail-radar-flow-item.three{top:53%;--radar-flow-duration:10.8s;animation-delay:-8.9s}
.is-reference-filter .detail-radar-flow-item.four{top:64%;--radar-flow-duration:13.2s;animation-delay:-1.8s}
.is-reference-filter .detail-radar-flow-item.five{top:75%;--radar-flow-duration:11.8s;animation-delay:-5.7s}
.is-reference-filter .detail-radar-filter-zone{
  position:absolute;
  left:50%;
  top:54%;
  z-index:5;
  width:clamp(170px,28%,230px);
  aspect-ratio:1;
  border:1px solid rgba(63,119,104,.20);
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle,transparent 0 32%,rgba(63,119,104,.07) 32.5% 33%,transparent 33.5% 59%,rgba(63,119,104,.055) 59.5% 60%,transparent 60.5%),
    rgba(255,255,255,.18);
  box-shadow:0 0 34px rgba(63,119,104,.06);
}
.is-reference-filter .detail-radar-filter-zone::before,
.is-reference-filter .detail-radar-filter-zone::after{
  content:"";
  position:absolute;
  border-radius:50%;
  transition:.35s ease;
}
.is-reference-filter .detail-radar-filter-zone::before{inset:20%;border:1px solid rgba(63,119,104,.28)}
.is-reference-filter .detail-radar-filter-zone::after{inset:34%;border:1px solid var(--radar-accent-2);background:rgba(255,255,255,.55)}
.is-reference-filter .detail-radar-scan{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  width:46%;
  height:46%;
  overflow:hidden;
  transform-origin:0 0;
  animation:radarReferenceScan 5s linear infinite;
}
.is-reference-filter .detail-radar-scan::before{
  content:"";
  position:absolute;
  inset:0;
  background:conic-gradient(from 265deg at 0 0,rgba(63,119,104,.16),rgba(63,119,104,0) 34deg,transparent 35deg);
}
.is-reference-filter .detail-radar-filter-core{
  position:absolute;
  left:50%;
  top:50%;
  z-index:6;
  display:block;
  width:44%;
  min-height:0;
  transform:translate(-50%,-50%);
  text-align:center;
}
.is-reference-filter .detail-radar-filter-core small{display:none}
.is-reference-filter .detail-radar-filter-core b{
  display:block;
  margin:10px 0 7px;
  color:var(--radar-text);
  font-size:clamp(20px,3vw,27px);
  line-height:1;
  font-weight:650;
}
.is-reference-filter .detail-radar-filter-core em{
  color:var(--radar-accent);
  font:8px/1 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.16em;
  font-style:normal;
}
.is-reference-filter .detail-radar-filter-caption{
  position:absolute;
  left:50%;
  top:76%;
  z-index:7;
  transform:translateX(-50%);
  color:#959d98;
  font:7px/1.45 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.12em;
  text-align:center;
  white-space:nowrap;
}
.is-reference-filter .detail-radar-filter-caption strong{display:block;color:var(--radar-accent);font-weight:600}
.is-reference-filter .detail-radar-kept-signal{
  position:absolute;
  right:7%;
  z-index:7;
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:26%;
  padding-left:11%;
  opacity:.72;
  transition:.38s ease;
}
.is-reference-filter .detail-radar-kept-signal > i{height:34px;background:rgba(63,119,104,.35)}
.is-reference-filter .detail-radar-kept-signal small{
  display:block;
  margin-bottom:7px;
  color:var(--radar-accent);
  font:7px/1 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.12em;
}
.is-reference-filter .detail-radar-kept-signal b{font-size:clamp(10px,1.25vw,13px);line-height:1.3;font-weight:620}
.is-reference-filter .detail-radar-kept-signal::before{content:"";position:absolute;left:0;top:50%;width:8%;height:1px;background:var(--radar-line-strong)}
.is-reference-filter .detail-radar-kept-signal.signal-one{top:30%}
.is-reference-filter .detail-radar-kept-signal.signal-two{top:47%}
.is-reference-filter .detail-radar-kept-signal.signal-three{top:65%}
.is-reference-filter .detail-radar-kept-signal.signal-one,
.is-reference-filter .detail-radar-kept-signal.signal-three{animation:radarReferenceSignal 9s ease-in-out infinite}
.is-reference-filter .detail-radar-kept-signal.signal-two{animation:radarReferenceSignal 9s ease-in-out -3s infinite}
.is-reference-filter .detail-radar-filter-foot{
  position:absolute;
  left:5%;
  right:5%;
  bottom:4%;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px 12px;
  flex-wrap:wrap;
  border-top:1px solid rgba(35,47,42,.10);
  padding-top:11px;
  color:var(--radar-muted);
  font-size:7px;
  letter-spacing:.08em;
}
.is-reference-filter .detail-radar-filter-foot span{white-space:nowrap}
.is-reference-filter .detail-radar-filter-foot strong{color:var(--radar-text);font-weight:600}
.is-reference-filter .detail-radar-filter-foot .detail-radar-filter-summary{color:var(--radar-accent)}
.is-reference-filter .detail-radar-filter-foot .detail-radar-filter-summary strong{color:inherit;font-size:10px}
html[data-theme="dark"] .detail-radar-stage{
  --radar-bg:#0d1513;
  --radar-surface:rgba(255,255,255,.05);
  --radar-line:rgba(137,172,162,.16);
  --radar-line-strong:rgba(137,172,162,.28);
  --radar-text:#dce8e4;
  --radar-muted:#83978f;
  --radar-faint:#61746d;
  --radar-accent:#72a894;
  --radar-accent-2:#70a4b2;
  background:var(--radar-bg);
}
html[data-theme="dark"] .detail-radar-stage::before{background-image:linear-gradient(rgba(130,168,156,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(130,168,156,.035) 1px,transparent 1px)}
html[data-theme="dark"] .is-reference-filter .detail-radar-filter-zone::after{background:rgba(13,24,22,.68)}
html[data-theme="dark"] .is-reference-filter .detail-radar-filter-foot{border-color:rgba(137,172,162,.16)}
@keyframes radarReferenceDrift{
  0%{transform:translate3d(0,0,0) scale(.985);opacity:0}
  10%{opacity:.88}
  62%{transform:translate3d(24%,6px,0) scale(1);opacity:.78}
  84%{transform:translate3d(42%,0,0) scale(.97);opacity:.35}
  100%{transform:translate3d(54%,0,0) scale(.92);opacity:0}
}
@keyframes radarReferenceScan{to{transform:rotate(360deg)}}
@keyframes radarReferenceSignal{0%,100%{opacity:.58}50%{opacity:1;transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){
  .is-reference-filter .detail-radar-flow-item,
  .is-reference-filter .detail-radar-scan,
  .is-reference-filter .detail-radar-kept-signal{animation:none;opacity:.72}
}

/* AI Radar reference demo — selector prefixes only; geometry and motion match ai-radar-preview-v16.html. */
.detail-radar-app.is-reference-filter,.detail-radar-app.is-reference-filter .detail-radar-reference-preview{width:100%;height:100%}
.detail-radar-app.is-reference-filter .detail-radar-reference-preview{position:relative;overflow:hidden;border:1px solid rgba(35,47,42,.10);background:linear-gradient(rgba(63,119,104,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(63,119,104,.028) 1px,transparent 1px),#f4f1ea;background-size:42px 42px;color:#202624;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.detail-radar-app.is-reference-filter .head{position:absolute;left:4.5%;right:4.5%;top:5%;display:flex;align-items:flex-start;z-index:10}
.detail-radar-app.is-reference-filter .brand{font:700 12px/1 "SFMono-Regular",Consolas,monospace;letter-spacing:.16em}.detail-radar-app.is-reference-filter .brand span{color:#3f7768}
.detail-radar-app.is-reference-filter .mini{position:absolute;left:50%;top:0;transform:translateX(-50%);font:9px/1 "SFMono-Regular",Consolas,monospace;letter-spacing:.12em;color:#8d9691;text-align:center;white-space:nowrap}
.detail-radar-app.is-reference-filter .section-label{position:absolute;font:9px/1 "SFMono-Regular",Consolas,monospace;letter-spacing:.18em;color:#777f7a;z-index:10}.detail-radar-app.is-reference-filter .incoming-label{left:6%;top:18%}.detail-radar-app.is-reference-filter .incoming-label b{color:#3f7768;margin-left:8px}.detail-radar-app.is-reference-filter .signals-label{right:7%;top:18%;color:#3f7768}
.detail-radar-app.is-reference-filter svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.detail-radar-app.is-reference-filter .trail{fill:none;stroke:#d8e0dc;stroke-width:1.15;stroke-dasharray:4 9;opacity:.8}.detail-radar-app.is-reference-filter .trail.mobile-trail{display:none}
.detail-radar-app.is-reference-filter .flow-layer{position:absolute;inset:0;z-index:3;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 38%,rgba(0,0,0,.88) 41%,rgba(0,0,0,.48) 45%,transparent 49%);mask-image:linear-gradient(90deg,#000 0%,#000 38%,rgba(0,0,0,.88) 41%,rgba(0,0,0,.48) 45%,transparent 49%)}
.detail-radar-app.is-reference-filter .flow-item{position:absolute;display:flex;align-items:center;gap:10px;white-space:nowrap;color:#7f8883;font-size:12px;line-height:1;opacity:0;will-change:transform,opacity;animation:driftToRadar var(--dur) cubic-bezier(.25,.12,.18,.98) forwards}.detail-radar-app.is-reference-filter .flow-item .tick{width:1px;height:26px;background:#c8d3ce;flex:0 0 auto}.detail-radar-app.is-reference-filter .flow-item strong{font-weight:600;color:#68726d}.detail-radar-app.is-reference-filter .flow-item.dead{color:#b2b8b5}.detail-radar-app.is-reference-filter .flow-item.dead strong,.detail-radar-app.is-reference-filter .flow-item.dead .main{color:#adb3b0;text-decoration:line-through;text-decoration-thickness:1px}.detail-radar-app.is-reference-filter .flow-item .reason{margin-left:11px;font:8px/1 "SFMono-Regular",Consolas,monospace;letter-spacing:.12em;color:#abb1ae}
@keyframes driftToRadar{0%{transform:translate3d(0,0,0) scale(.985);opacity:0}10%{opacity:.92}62%{transform:translate3d(var(--mx),var(--my),0) scale(1);opacity:.82}84%{transform:translate3d(var(--px),var(--py),0) scale(.97);opacity:.42}100%{transform:translate3d(var(--tx),var(--ty),0) scale(.92);opacity:0}}
.detail-radar-app.is-reference-filter .filter-zone{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:230px;height:230px;border-radius:50%;border:1px solid rgba(63,119,104,.20);background:radial-gradient(circle,transparent 0 32%,rgba(63,119,104,.07) 32.5% 33%,transparent 33.5% 59%,rgba(63,119,104,.055) 59.5% 60%,transparent 60.5%),rgba(255,255,255,.18);box-shadow:0 0 34px rgba(63,119,104,.06);z-index:5}.detail-radar-app.is-reference-filter .filter-zone::before{content:"";position:absolute;inset:45px;border-radius:50%;border:1px solid rgba(63,119,104,.28);transition:.35s ease}.detail-radar-app.is-reference-filter .filter-zone::after{content:"";position:absolute;inset:78px;border-radius:50%;border:1px solid #4f8190;background:rgba(255,255,255,.55);transition:.35s ease}.detail-radar-app.is-reference-filter .filter-zone.processing{animation:zonePulse .72s ease-in-out 2}.detail-radar-app.is-reference-filter .filter-zone.processing::before{inset:38px;border-color:rgba(63,119,104,.48)}.detail-radar-app.is-reference-filter .filter-zone.processing::after{inset:72px;box-shadow:0 0 24px rgba(79,129,144,.15)}
@keyframes zonePulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.035)}}
.detail-radar-app.is-reference-filter .scan{position:absolute;left:50%;top:50%;width:105px;height:105px;transform-origin:0 0;animation:scan 5s linear infinite;overflow:hidden;z-index:2}.detail-radar-app.is-reference-filter .filter-zone.processing .scan{animation-duration:1.2s}.detail-radar-app.is-reference-filter .scan::before{content:"";position:absolute;inset:0;background:conic-gradient(from 265deg at 0 0,rgba(63,119,104,.16),rgba(63,119,104,0) 34deg,transparent 35deg)}@keyframes scan{to{transform:rotate(360deg)}}
.detail-radar-app.is-reference-filter .filter-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:6;width:100px}.detail-radar-app.is-reference-filter .filter-core small{display:none}.detail-radar-app.is-reference-filter .filter-core b{display:block;margin:10px 0 7px;font-size:27px;line-height:1}.detail-radar-app.is-reference-filter .filter-core em{font:8px/1 "SFMono-Regular",Consolas,monospace;letter-spacing:.16em;color:#3f7768;font-style:normal}
.detail-radar-app.is-reference-filter .process-chip{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);z-index:7;width:155px;padding:7px 10px;text-align:center;border-radius:999px;border:1px solid rgba(63,119,104,.14);background:rgba(244,241,234,.88);backdrop-filter:blur(6px);font:8px/1 "SFMono-Regular",Consolas,monospace;letter-spacing:.09em;color:#77817c;opacity:0;transition:.2s ease;pointer-events:none}.detail-radar-app.is-reference-filter .process-chip.show{opacity:1;transform:translate(-50%,-94px)}.detail-radar-app.is-reference-filter .process-chip.pass{color:#3f7768;border-color:rgba(63,119,104,.28)}.detail-radar-app.is-reference-filter .process-chip.reject{color:#9da4a0}
.detail-radar-app.is-reference-filter .filter-caption{position:absolute;left:50%;top:76%;transform:translateX(-50%);font:8px/1.45 "SFMono-Regular",Consolas,monospace;letter-spacing:.12em;text-align:center;color:#959d98;z-index:7}.detail-radar-app.is-reference-filter .filter-caption b{display:block;color:#3f7768;font-weight:600}
.detail-radar-app.is-reference-filter .signal-item{position:absolute;right:7%;width:26%;display:flex;gap:10px;align-items:flex-start;z-index:7;transition:.38s ease;opacity:.58;padding-left:60px}.detail-radar-app.is-reference-filter .signal-item .tick{width:1px;height:34px;background:rgba(63,119,104,.35);flex:0 0 auto;transition:.3s ease}.detail-radar-app.is-reference-filter .signal-item>div{margin-left:0}.detail-radar-app.is-reference-filter .signal-item .meta{font:8px/1 "SFMono-Regular",Consolas,monospace;letter-spacing:.12em;color:#3f7768;margin-bottom:7px}.detail-radar-app.is-reference-filter .signal-item .title{font-size:13px;line-height:1.3;font-weight:620}.detail-radar-app.is-reference-filter .signal-item.hit{opacity:1;transform:translateX(4px)}.detail-radar-app.is-reference-filter .signal-item.hit .tick{background:#3f7768;box-shadow:0 0 10px rgba(63,119,104,.20)}.detail-radar-app.is-reference-filter .s1{top:30%}.detail-radar-app.is-reference-filter .s2{top:47%}.detail-radar-app.is-reference-filter .s3{top:65%}
.detail-radar-app.is-reference-filter .signal-particle{position:absolute;width:7px;height:7px;border-radius:50%;background:#3f7768;box-shadow:0 0 0 5px rgba(63,119,104,.08);z-index:8;pointer-events:none;opacity:0}.detail-radar-app.is-reference-filter .signal-particle.fly{animation:signalFly .9s cubic-bezier(.3,.05,.2,1) forwards}@keyframes signalFly{0%{transform:translate(0,0) scale(.65);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.85);opacity:.15}}
.detail-radar-app.is-reference-filter .reject-ring{position:absolute;left:50%;top:54%;width:18px;height:18px;border-radius:50%;border:1px solid rgba(140,150,145,.45);transform:translate(-50%,-50%) scale(.4);opacity:0;z-index:8;pointer-events:none}.detail-radar-app.is-reference-filter .reject-ring.show{animation:rejectFade .7s ease-out forwards}@keyframes rejectFade{0%{transform:translate(-50%,-50%) scale(.4);opacity:.7}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}
.detail-radar-app.is-reference-filter .footer{position:absolute;left:5%;right:5%;bottom:4%;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(35,47,42,.10);padding-top:11px;font:8px/1 "SFMono-Regular",Consolas,monospace;color:#8d9691;letter-spacing:.1em;z-index:10}.detail-radar-app.is-reference-filter .footer b{color:#202624;font-weight:600}.detail-radar-app.is-reference-filter .footer .summary{color:#3f7768}
@media(prefers-reduced-motion:reduce){.detail-radar-app.is-reference-filter .flow-item,.detail-radar-app.is-reference-filter .scan,.detail-radar-app.is-reference-filter .signal-particle,.detail-radar-app.is-reference-filter .reject-ring{animation:none!important}}

  .detail-lifeos-demo-stage{
    --page:#171a1c;
    --paper:#f4f1eb;
    --surface:rgba(255,255,255,.72);
    --ink:#242725;
    --muted:#818984;
    --line:#c9cec8;
    --green:#4f8d6e;
    --green-soft:#e8f1e8;
    --orange:#bf7b42;
    --orange-soft:#f5ecdf;
    --blue:#50768a;
    --purple:#876f89;
    --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
    --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  }

  .detail-lifeos-demo-stage,.detail-lifeos-demo-stage *{box-sizing:border-box}
  .detail-lifeos-demo-stage{margin:0;min-height:100%;background:var(--page)}
  .detail-lifeos-demo-stage{
    display:grid;
    place-items:center;
    min-height:100vh;
    padding:32px;
    color:var(--ink);
    font-family:var(--sans);
  }

  .detail-lifeos-demo-preview{
    position:relative;
    width:min(1440px,100%);
    aspect-ratio:16/9;
    min-height:680px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.15);
    border-radius:34px;
    background:
      linear-gradient(rgba(72,83,77,.045) 1px,transparent 1px),
      linear-gradient(90deg,rgba(72,83,77,.045) 1px,transparent 1px),
      radial-gradient(circle at 14% 12%,rgba(79,141,110,.09),transparent 24%),
      radial-gradient(circle at 86% 80%,rgba(191,123,66,.08),transparent 25%),
      var(--paper);
    background-size:64px 64px,64px 64px,auto,auto,auto;
    box-shadow:0 36px 100px rgba(0,0,0,.35);
  }

  .detail-lifeos-demo-preview::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    box-shadow:inset 0 0 70px rgba(76,65,54,.07);
  }

  .detail-lifeos-demo-masthead{
    position:absolute;
    z-index:4;
    top:5.8%;
    left:5.3%;
    right:5.3%;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
  }

  .detail-lifeos-demo-brand small,
  .detail-lifeos-demo-status,
  .detail-lifeos-demo-node-index,
  .detail-lifeos-demo-lane-title,
  .detail-lifeos-demo-footer{
    font-family:var(--mono);
    text-transform:uppercase;
    letter-spacing:.14em;
  }

  .detail-lifeos-demo-brand small{
    display:block;
    margin-bottom:8px;
    color:var(--green);
    font-size:12px;
    font-weight:700;
  }

  .detail-lifeos-demo-brand h1{
    margin:0;
    color:var(--ink);
    font-family:var(--sans);
    font-size:34px;
    line-height:1;
    letter-spacing:-.04em;
    font-weight:700;
    text-shadow:none;
  }

  .detail-lifeos-demo-brand p{
    margin:10px 0 0;
    color:var(--muted);
    font-size:14px;
  }

  .detail-lifeos-demo-status{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--muted);
    background:rgba(255,255,255,.45);
    font-size:10px;
  }

  .detail-lifeos-demo-status i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 5px rgba(79,141,110,.12);
    animation:detailLifeosPulse 2.4s ease-in-out infinite;
  }

  .detail-lifeos-demo-flow{
    position:absolute;
    z-index:2;
    inset:17% 4.5% 9%;
  }

  .detail-lifeos-demo-connectors{
    position:absolute;
    z-index:0;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
  }

  .detail-lifeos-demo-connectors > path{
    fill:none;
    stroke:#969d98;
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
  }

  .detail-lifeos-demo-connectors .active{
    stroke:var(--green);
    stroke-width:1.7;
    stroke-dasharray:3 9;
    animation:detailLifeosRoute 1.8s linear infinite;
  }

  .detail-lifeos-demo-connectors .project-route{stroke:var(--orange)}
  .detail-lifeos-demo-connectors .feedback{
    stroke:var(--purple);
    stroke-dasharray:4 8;
    opacity:.62;
    animation:detailLifeosRoute 2.4s linear infinite reverse;
  }

  .detail-lifeos-demo-connectors text{
    font-family:var(--mono);
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
  }

  .detail-lifeos-demo-connectors .yes{fill:var(--green)}
  .detail-lifeos-demo-connectors .no{fill:var(--orange)}

  .detail-lifeos-demo-node,
  .detail-lifeos-demo-decision,
  .detail-lifeos-demo-lane,
  .detail-lifeos-demo-merge{
    position:absolute;
    z-index:1;
  }

  .detail-lifeos-demo-node{
    display:flex;
    align-items:center;
    gap:13px;
    min-height:72px;
    padding:12px 18px;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--surface);
    box-shadow:0 10px 28px rgba(57,52,45,.06);
  }

  .detail-lifeos-demo-node::before{
    content:"";
    flex:0 0 auto;
    width:10px;
    height:10px;
    border:2px solid currentColor;
    border-radius:50%;
    box-shadow:0 0 0 6px color-mix(in srgb,currentColor 10%,transparent);
  }

  .detail-lifeos-demo-node-copy{min-width:0}

  .detail-lifeos-demo-node-index{
    display:block;
    margin-bottom:5px;
    color:currentColor;
    font-size:8px;
    font-weight:700;
  }

  .detail-lifeos-demo-node strong{
    display:block;
    color:var(--ink);
    font-size:15px;
    line-height:1.25;
  }

  .detail-lifeos-demo-node span:last-child{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:10px;
  }

  .detail-lifeos-demo-capture{
    top:0;
    left:50%;
    width:260px;
    color:var(--blue);
    transform:translateX(-50%);
  }

  .detail-lifeos-demo-decision{
    top:14.5%;
    left:50%;
    width:188px;
    height:104px;
    display:grid;
    place-items:center;
    padding:18px 30px;
    color:var(--ink);
    text-align:center;
    transform:translateX(-50%);
  }

  .detail-lifeos-demo-decision::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:114px;
    height:114px;
    border:1px solid #7e847f;
    background:rgba(255,255,255,.64);
    transform:translate(-50%,-50%) rotate(45deg);
    box-shadow:0 9px 24px rgba(57,52,45,.05);
  }

  .detail-lifeos-demo-decision > div{position:relative;z-index:1}
  .detail-lifeos-demo-decision small{
    display:block;
    margin-bottom:5px;
    color:var(--muted);
    font:700 8px/1 var(--mono);
    letter-spacing:.12em;
  }
  .detail-lifeos-demo-decision strong{font-size:14px;line-height:1.4}

  .detail-lifeos-demo-lane{
    top:39%;
    width:35%;
    height:32%;
    padding:24px 20px 18px;
    border:1px solid color-mix(in srgb,currentColor 28%,transparent);
    border-radius:22px;
    background:color-mix(in srgb,currentColor 5%,rgba(255,255,255,.46));
  }

  .detail-lifeos-demo-lane-direct{left:6%;color:var(--green)}
  .detail-lifeos-demo-lane-project{right:6%;color:var(--orange)}

  .detail-lifeos-demo-lane-title{
    position:absolute;
    top:-10px;
    left:20px;
    padding:3px 9px;
    background:var(--paper);
    color:currentColor;
    font-size:9px;
    font-weight:700;
  }

  .detail-lifeos-demo-lane-content{
    display:grid;
    grid-template-columns:1fr 28px 1fr;
    align-items:center;
    height:100%;
  }

  .detail-lifeos-demo-lane-project .detail-lifeos-demo-lane-content{grid-template-columns:1fr 24px 1fr 24px 1fr}

  .detail-lifeos-demo-lane .detail-lifeos-demo-node{
    position:relative;
    width:100%;
    min-height:92px;
    padding:12px;
    color:currentColor;
    background:rgba(255,255,255,.7);
  }

  .detail-lifeos-demo-lane .detail-lifeos-demo-node::before{width:8px;height:8px;box-shadow:none}
  .detail-lifeos-demo-lane .detail-lifeos-demo-node strong{font-size:13px}

  .detail-lifeos-demo-arrow{
    color:currentColor;
    font:18px/1 var(--mono);
    text-align:center;
    animation:detailLifeosNudge 1.8s ease-in-out infinite;
  }

  .detail-lifeos-demo-merge{
    left:50%;
    bottom:0;
    display:grid;
    grid-template-columns:220px 38px 220px;
    align-items:center;
    color:var(--purple);
    transform:translateX(-50%);
  }

  .detail-lifeos-demo-merge .detail-lifeos-demo-node{
    position:relative;
    width:100%;
    color:var(--purple);
  }

  .detail-lifeos-demo-footer{
    position:absolute;
    z-index:3;
    left:5.3%;
    right:5.3%;
    bottom:3.2%;
    display:flex;
    justify-content:space-between;
    padding-top:12px;
    border-top:0;
    color:var(--muted);
    font-size:9px;
  }

  .detail-lifeos-demo-footer b{color:var(--ink)}

  @keyframes detailLifeosRoute{to{stroke-dashoffset:-36}}
  @keyframes detailLifeosPulse{50%{opacity:.45;transform:scale(.78)}}
  @keyframes detailLifeosNudge{50%{transform:translateX(3px)}}

  @media (prefers-reduced-motion:reduce){
    .detail-lifeos-demo-stage,.detail-lifeos-demo-stage *,.detail-lifeos-demo-stage *::before,.detail-lifeos-demo-stage *::after{animation:none!important}
  }

  @media (max-width:860px){
    .detail-lifeos-demo-stage{display:block;padding:0;background:var(--paper)}
    .detail-lifeos-demo-preview{
      width:100%;
      min-height:100vh;
      aspect-ratio:auto;
      overflow:visible;
      border:0;
      border-radius:0;
      box-shadow:none;
      background-size:40px 40px,40px 40px,auto,auto,auto;
    }

    .detail-lifeos-demo-masthead{
      position:relative;
      inset:auto;
      display:block;
      padding:30px 22px 18px;
    }

    .detail-lifeos-demo-brand small{font-size:9px}
    .detail-lifeos-demo-brand h1{font-size:28px}
    .detail-lifeos-demo-brand p{max-width:290px;font-size:12px;line-height:1.6}
    .detail-lifeos-demo-status{position:absolute;top:30px;right:22px;padding:8px 10px;font-size:8px}

    .detail-lifeos-demo-flow{
      position:relative;
      inset:auto;
      display:flex;
      flex-direction:column;
      gap:16px;
      padding:14px 22px 80px;
    }

    .detail-lifeos-demo-connectors{display:none}
    .detail-lifeos-demo-node,.detail-lifeos-demo-decision,.detail-lifeos-demo-lane,.detail-lifeos-demo-merge,.detail-lifeos-demo-capture{
      position:relative;
      inset:auto;
      width:100%;
      height:auto;
      transform:none;
    }

    .detail-lifeos-demo-flow > .detail-lifeos-demo-capture{order:1}
    .detail-lifeos-demo-flow > .detail-lifeos-demo-decision{order:2;margin:4px 0 10px}
    .detail-lifeos-demo-flow > .detail-lifeos-demo-lane-direct{order:3}
    .detail-lifeos-demo-flow > .detail-lifeos-demo-lane-project{order:4}
    .detail-lifeos-demo-flow > .detail-lifeos-demo-merge{order:5}

    .detail-lifeos-demo-flow > .detail-lifeos-demo-capture::after,
    .detail-lifeos-demo-decision::after,
    .detail-lifeos-demo-lane::after{
      content:"↓";
      position:absolute;
      left:50%;
      bottom:-21px;
      color:#9ca29e;
      font:15px/1 var(--mono);
      transform:translateX(-50%);
    }

    .detail-lifeos-demo-decision{
      min-height:112px;
      padding:26px 60px;
    }

    .detail-lifeos-demo-decision::before{
      top:50%;
      left:50%;
      width:88px;
      height:88px;
      transform:translate(-50%,-50%) rotate(45deg);
    }
    .detail-lifeos-demo-decision strong{font-size:13px}

    .detail-lifeos-demo-lane{
      padding:25px 14px 14px;
      border-radius:18px;
    }

    .detail-lifeos-demo-lane-title{left:14px}
    .detail-lifeos-demo-lane-content,
    .detail-lifeos-demo-lane-project .detail-lifeos-demo-lane-content{
      grid-template-columns:1fr;
      gap:8px;
    }

    .detail-lifeos-demo-lane .detail-lifeos-demo-node{min-height:70px}
    .detail-lifeos-demo-arrow{transform:rotate(90deg)}
    @keyframes detailLifeosNudge{50%{transform:rotate(90deg) translateX(3px)}}

    .detail-lifeos-demo-merge{
      grid-template-columns:1fr;
      gap:8px;
      margin-top:4px;
    }

    .detail-lifeos-demo-merge .detail-lifeos-demo-arrow{order:2}
    .detail-lifeos-demo-merge .detail-lifeos-demo-node:last-child{order:3}

    .detail-lifeos-demo-footer{
      left:22px;
      right:22px;
      bottom:24px;
      font-size:7px;
      gap:16px;
    }
  }

  @media (max-width:420px){
    .detail-lifeos-demo-status span{display:none}
    .detail-lifeos-demo-node{padding:11px 14px}
    .detail-lifeos-demo-footer span:last-child{text-align:right}
  }

/* LIFE OS — use the draft flow composition inside the detail preview. */
#workDetailCard[data-project="lifeos"]{
  border:0;
  box-shadow:none;
}
#workDetailCard[data-project="lifeos"] .work-detail-preview{
  border:0;
  border-radius:34px;
  background:#f4f1eb;
}
.detail-lifeos-demo-stage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  padding:clamp(12px,3.2%,32px);
  overflow:hidden;
  background:var(--paper);
}
.detail-lifeos-demo-preview{
  min-height:0;
  max-height:100%;
  border:0;
  box-shadow:none;
}
#workDetailCard[data-project="lifeos"] .work-detail-preview::after{
  box-shadow:none;
}
@media(min-width:861px){
  #workDetailCard[data-project="lifeos"] .detail-lifeos-demo-stage{
    display:block;
    padding:0;
  }
  #workDetailCard[data-project="lifeos"] .detail-lifeos-demo-preview{
    width:100%;
    height:100%;
    min-height:0;
    max-height:none;
    aspect-ratio:auto;
  }
  #workDetailCard[data-project="lifeos"] .detail-lifeos-demo-flow{
    inset:22% 4.5% 5%;
  }
  #workDetailCard[data-project="lifeos"] .detail-lifeos-demo-decision{
    top:25%;
    width:168px;
    height:92px;
    padding:14px 22px;
  }
  #workDetailCard[data-project="lifeos"] .detail-lifeos-demo-decision::before{
    top:50%;
    left:50%;
    width:104px;
    height:104px;
    transform:translate(-50%,-50%) rotate(45deg);
  }
  #workDetailCard[data-project="lifeos"] .detail-lifeos-demo-lane{
    top:44%;
    width:44%;
    height:32%;
    padding:20px 10px 10px;
  }
  #workDetailCard[data-project="lifeos"] .detail-lifeos-demo-lane-direct{left:1%}
  #workDetailCard[data-project="lifeos"] .detail-lifeos-demo-lane-project{right:1%}
  #workDetailCard[data-project="lifeos"] .detail-lifeos-demo-lane-content{
    grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);
  }
  #workDetailCard[data-project="lifeos"] .detail-lifeos-demo-lane-project .detail-lifeos-demo-lane-content{
    grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr);
  }
  #workDetailCard[data-project="lifeos"] .detail-lifeos-demo-lane .detail-lifeos-demo-node{
    min-width:0;
    min-height:80px;
    gap:7px;
    padding:8px 6px;
  }
  #workDetailCard[data-project="lifeos"] .detail-lifeos-demo-lane .detail-lifeos-demo-node-index{
    margin-bottom:4px;
    font-size:7px;
    letter-spacing:.08em;
  }
  #workDetailCard[data-project="lifeos"] .detail-lifeos-demo-lane .detail-lifeos-demo-node strong{
    font-size:11px;
    line-height:1.2;
  }
  #workDetailCard[data-project="lifeos"] .detail-lifeos-demo-lane .detail-lifeos-demo-node span:last-child{
    margin-top:3px;
    font-size:8px;
    line-height:1.25;
  }
  #workDetailCard[data-project="lifeos"] .detail-lifeos-demo-merge{
    grid-template-columns:200px 32px 200px;
  }
  #workDetailCard[data-project="lifeos"] .detail-lifeos-demo-merge .detail-lifeos-demo-node{
    min-height:64px;
    padding:8px 12px;
  }
}
@media(max-width:860px){
  .detail-lifeos-demo-stage{
    position:relative;
    inset:auto;
    width:100%;
    height:100%;
    min-height:100%;
    padding:0;
    overflow:visible;
  }
  .detail-lifeos-demo-preview{
    min-height:100%;
    max-height:none;
  }
}

/* ECHOLINE */
.detail-echo-stage{
  position:absolute;
  inset:0;
  padding:3.8% 3.8% 3.6%;
  background:
    radial-gradient(circle at 26% 18%,rgba(238,228,200,.08),transparent 18%),
    radial-gradient(circle at 76% 12%,rgba(180,214,255,.06),transparent 22%),
    linear-gradient(145deg,#12161b,#080a0d);
}
.detail-echo-app{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(238,233,216,.09);
  border-radius:18px;
  background:linear-gradient(180deg,#edf1f5,#e7edf4 72%,#e4ebf2 100%);
  box-shadow:
    0 20px 70px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.42);
  color:#1e2c43;
}
.detail-echo-app::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 22%);
}
.detail-echo-header{
  display:grid;
  grid-template-columns:minmax(190px,.78fr) minmax(0,1.35fr) auto;
  gap:14px;
  align-items:start;
  padding:14px 16px 10px;
}
.detail-echo-brand small{
  display:block;
  color:#7486a0;
  font-size:7px;
  letter-spacing:.22em;
  font-weight:700;
}
.detail-echo-brand strong{
  display:block;
  margin-top:5px;
  color:#15233a;
  font-size:26px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.05em;
}
.detail-echo-actions{
  display:grid;
  grid-template-columns:repeat(4,max-content);
  justify-content:start;
  gap:8px;
  min-width:0;
}
.detail-echo-pill,
.detail-echo-chip,
.detail-echo-ghost,
.detail-echo-mini,
.detail-echo-cta,
.detail-echo-submit,
.detail-echo-cancel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  white-space:nowrap;
  font-family:inherit;
  box-sizing:border-box;
}
.detail-echo-pill{
  height:32px;
  padding:0 14px;
  border:1px solid rgba(124,145,171,.34);
  color:#4f637d;
  background:rgba(255,255,255,.52);
  font-size:8px;
  font-weight:700;
}
.detail-echo-pill.is-fill,
.detail-echo-cta{
  border-color:#8fa82a;
  color:#fbfff2;
  background:#91ab25;
}
.detail-echo-cta{
  height:32px;
  padding:0 16px;
  align-self:start;
  font-size:9px;
  font-weight:700;
}
.detail-echo-shell{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  padding:0 16px 16px;
}
.detail-echo-player{
  flex:0 0 auto;
  border:1px solid rgba(159,179,202,.28);
  border-radius:17px;
  background:rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38);
  padding:13px 15px 12px;
}
.detail-echo-file{
  display:flex;
  align-items:center;
  gap:9px;
  color:#6f8098;
  font-size:8px;
  font-weight:700;
}
.detail-echo-file b{
  color:#24344e;
  font-size:10px;
}
.detail-echo-trackline{
  margin-top:10px;
  display:grid;
  grid-template-columns:38px 1fr 38px;
  gap:8px;
  align-items:center;
  color:#6e8098;
  font-size:8px;
  font-variant-numeric:tabular-nums;
}
.detail-echo-track{
  position:relative;
  height:9px;
}
.detail-echo-track::before{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  transform:translateY(-50%);
  height:6px;
  border-radius:999px;
  background:#434a54;
}
.detail-echo-track i{
  position:absolute;
  left:0;top:50%;
  transform:translateY(-50%);
  width:var(--echo-progress,34%);
  height:6px;
  border-radius:999px;
  background:#98af27;
  animation:detailEchoProgress 6.2s ease-in-out infinite alternate;
}
.detail-echo-track i::after{
  content:"";
  position:absolute;
  right:-4px;top:50%;
  width:11px;height:11px;
  border-radius:50%;
  transform:translateY(-50%);
  background:#8ea91f;
  box-shadow:0 0 0 3px rgba(152,175,39,.16);
}
@keyframes detailEchoProgress{to{width:86%}}
.detail-echo-controls{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.detail-echo-chip{
  min-width:52px;
  height:27px;
  padding:0 12px;
  border:1px solid rgba(137,156,178,.42);
  color:#52657f;
  background:#f7f9fb;
  font-size:8px;
  font-weight:700;
}
.detail-echo-chip.is-fill{
  border-color:#8fa82a;
  background:#91ab25;
  color:#fbfff2;
}
.detail-echo-chip.is-soft{
  border-color:#b3c08a;
  background:#ebf2d4;
  color:#7a8c1d;
}
.detail-echo-hint{
  margin-left:auto;
  color:#8090a8;
  font-size:7px;
  font-weight:600;
}
.detail-echo-speed,
.detail-echo-offset{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.detail-echo-label{
  color:#6e8097;
  font-size:7px;
  font-weight:800;
}
.detail-echo-mini,
.detail-echo-ghost{
  height:24px;
  padding:0 10px;
  border:1px solid rgba(137,156,178,.42);
  background:#f8fafc;
  color:#51657d;
  font-size:7px;
  font-weight:700;
}
.detail-echo-mini.is-active{
  border-color:#adc053;
  background:#edf4d2;
  color:#839717;
}
.detail-echo-ghost.is-disabled{
  opacity:.46;
}
.detail-echo-grid{
  margin-top:12px;
  flex:1;
  min-height:0;
  height:auto;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:12px;
}
.detail-echo-panel{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(159,179,202,.28);
  border-radius:16px;
  background:rgba(255,255,255,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38);
}
.detail-echo-panelhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 14px 10px;
  color:#70839c;
  font-size:8px;
  font-weight:700;
}
.detail-echo-panelhead b{
  display:block;
  margin-top:5px;
  color:#1f2f47;
  font-size:14px;
  font-weight:800;
}
.detail-echo-lesson{
  padding:6px 14px 0;
}
.detail-echo-sentence-cn{
  color:#1e2d43;
  font-size:18px;
  line-height:1.35;
  font-weight:500;
}
.detail-echo-sentence-en{
  margin-top:7px;
  color:#1c2c44;
  font-size:14px;
  line-height:1.35;
  font-weight:700;
}
.detail-echo-divider{
  margin:12px 14px 0;
  height:1px;
  background:rgba(164,181,200,.34);
}
.detail-echo-mode{
  padding:11px 14px 12px;
}
.detail-echo-modehead{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#70839c;
  font-size:7px;
  font-weight:700;
}
.detail-echo-mode p{
  margin:6px 0 0;
  color:#3d4f68;
  font-size:8px;
  line-height:1.65;
  font-weight:700;
}
.detail-echo-textarea{
  margin-top:10px;
  height:52px;
  border:1px solid rgba(137,156,178,.42);
  border-radius:12px;
  background:#f4f6f9;
  padding:10px 12px;
  color:#8a97aa;
  font-size:9px;
}
.detail-echo-bottomactions{
  margin-top:8px;
  display:flex;
  gap:8px;
}
.detail-echo-submit,
.detail-echo-cancel{
  height:26px;
  padding:0 14px;
  font-size:8px;
  font-weight:800;
}
.detail-echo-submit{
  border:1px solid #b7c58d;
  color:#fbfff2;
  background:#bac88f;
}
.detail-echo-cancel{
  border:1px solid #a2b54c;
  color:#7b8d1a;
  background:#eef4d7;
}
.detail-echo-list,
.detail-echo-hardlist{
  border-top:1px solid rgba(164,181,200,.28);
}
.detail-echo-list{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
.detail-echo-listrow,
.detail-echo-hardrow{
  padding:9px 12px;
  display:grid;
  grid-template-columns:26px 1fr;
  gap:8px;
  border-top:1px solid rgba(164,181,200,.24);
}
.detail-echo-listrow:first-child,
.detail-echo-hardrow:first-child{
  border-top:0;
}
.detail-echo-listrow em,
.detail-echo-hardrow em{
  font-style:normal;
  color:#7d90a7;
  font-size:7px;
  font-weight:800;
}
.detail-echo-listrow b,
.detail-echo-hardrow b{
  display:block;
  color:#3d4f68;
  font-size:9px;
  line-height:1.5;
  font-weight:700;
}
.detail-echo-listrow span,
.detail-echo-hardrow span{
  display:block;
  margin-top:4px;
  color:#70839c;
  font-size:7px;
  font-weight:700;
}
.detail-echo-listrow.is-active{
  background:#dde5ef;
}
.detail-echo-sidebottom{
  flex:0 0 132px;
  min-height:132px;
  background:rgba(255,255,255,.16);
  border-top:1px solid rgba(164,181,200,.26);
  overflow:hidden;
}
@media(max-width:860px){
  .detail-echo-stage{padding:4.5%}
  .detail-echo-header{
    grid-template-columns:1fr;
    gap:10px;
    padding:12px 12px 8px;
  }
  .detail-echo-brand strong{font-size:22px}
  .detail-echo-actions{
    grid-template-columns:repeat(2,max-content);
    justify-content:flex-start;
  }
  .detail-echo-shell{padding:0 12px 12px}
  .detail-echo-player{padding:11px 12px}
  .detail-echo-controls{gap:8px}
  .detail-echo-hint{display:none}
  .detail-echo-grid{
    grid-template-columns:1fr;
    height:auto;
    gap:10px;
  }
  .detail-echo-panel{min-height:0}
  .detail-echo-sentence-cn{font-size:16px}
  .detail-echo-sentence-en{font-size:13px}
  .detail-echo-listrow,
  .detail-echo-hardrow{padding:10px 12px}
}


/* =========================================================
   ECHOLINE PREVIEW — exact reference demo from echoline-preview-v6.html
   ========================================================= */
.detail-echo-demo,
.detail-echo-demo *{
  box-sizing:border-box;
}

.detail-echo-demo{
  --echo-bg:#f4f1ea;
  --echo-text:#202624;
  --echo-muted:#8b938f;
  --echo-faint:#b5bcb8;
  --echo-line:rgba(32,38,36,.12);
  --echo-accent:#3f7768;
  --echo-accent-2:#4f8190;
  width:100%;
  height:100%;
  aspect-ratio:16/9;
  min-width:0;
  min-height:0;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(32,38,36,.10);
  background:
    linear-gradient(rgba(63,119,104,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,119,104,.026) 1px,transparent 1px),
    var(--echo-bg);
  background-size:42px 42px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--echo-text);
}

.detail-echo-demo-top{
  position:absolute;
  left:5%;
  right:5%;
  top:5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.detail-echo-demo-brand{
  font:700 12px/1 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.16em;
}
.detail-echo-demo-brand span{color:var(--echo-accent)}

.detail-echo-demo-mode{
  font:9px/1 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.14em;
  color:var(--echo-muted);
}

.detail-echo-demo-sentence-meta{
  position:absolute;
  left:8%;
  top:17%;
  font:9px/1 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.15em;
  color:var(--echo-muted);
}
.detail-echo-demo-sentence-meta b{color:var(--echo-accent);font-weight:600}

.detail-echo-demo-loop-badge{
  position:absolute;
  right:8%;
  top:16%;
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 10px;
  border:1px solid var(--echo-line);
  border-radius:999px;
  background:rgba(255,255,255,.30);
  font:9px/1 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.11em;
  color:var(--echo-muted);
}

.detail-echo-demo-loop-icon{
  width:15px;
  height:15px;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid rgba(63,119,104,.48);
  position:relative;
}
.detail-echo-demo-loop-icon::after{
  content:"";
  position:absolute;
  width:4px;
  height:4px;
  right:-1px;
  top:1px;
  border-top:1px solid var(--echo-accent);
  border-right:1px solid var(--echo-accent);
  transform:rotate(35deg);
}
.detail-echo-demo-loop-copy{
  display:flex;
  align-items:center;
  line-height:15px;
}

.detail-echo-demo-focus{
  position:absolute;
  left:50%;
  top:28%;
  transform:translateX(-50%);
  width:76%;
  text-align:center;
}

.detail-echo-demo-hint{
  font:9px/1 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.16em;
  color:var(--echo-accent);
  margin-bottom:14px;
}

.detail-echo-demo-subtitle{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:26px;
  line-height:1.35;
  font-weight:600;
  letter-spacing:-.025em;
  transition:.35s ease;
}

/* The site hero also styles h1; keep the reference subtitle at its own scale. */
.detail-echo-demo .detail-echo-demo-subtitle{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:26px;
  line-height:1.35;
  font-weight:600;
  letter-spacing:-.025em;
}

.detail-echo-demo-subtitle.is-hidden{
  color:transparent;
  text-shadow:0 0 9px rgba(32,38,36,.15);
  user-select:none;
}

.detail-echo-demo-subtitle.is-revealed{
  color:var(--echo-text);
  text-shadow:none;
}

.detail-echo-demo-subtitle .soft{color:#8f9692}

.detail-echo-demo-wave-wrap{
  position:absolute;
  left:15%;
  right:15%;
  top:46%;
  height:64px;
}

.detail-echo-demo-wave{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  opacity:.72;
}

.detail-echo-demo-wave .bar{
  width:2px;
  border-radius:3px;
  background:#aab7b1;
  animation:detailEchoDemoPulse 1.7s ease-in-out infinite;
  animation-delay:var(--d);
}

.detail-echo-demo-wave .bar.a{height:9px}
.detail-echo-demo-wave .bar.b{height:18px}
.detail-echo-demo-wave .bar.c{height:28px}
.detail-echo-demo-wave .bar.d{height:14px}
.detail-echo-demo-wave .bar.e{height:35px}
.detail-echo-demo-wave .bar.f{height:22px}
.detail-echo-demo-wave .bar.g{height:12px}
.detail-echo-demo-wave .bar.h{height:31px}
.detail-echo-demo-wave .bar.i{height:17px}
.detail-echo-demo-wave .bar.j{height:25px}

@keyframes detailEchoDemoPulse{
  0%,100%{transform:scaleY(.72);opacity:.48}
  50%{transform:scaleY(1.06);opacity:.9}
}

.detail-echo-demo-track{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:#ced7d2;
}

.detail-echo-demo-range{
  position:absolute;
  left:21%;
  width:46%;
  bottom:-2px;
  height:5px;
  border-radius:999px;
  background:rgba(63,119,104,.15);
}

.detail-echo-demo-range::before,
.detail-echo-demo-range::after{
  content:"";
  position:absolute;
  top:-3px;
  width:1px;
  height:11px;
  background:rgba(63,119,104,.48);
}
.detail-echo-demo-range::before{left:0}
.detail-echo-demo-range::after{right:0}

.detail-echo-demo-playhead{
  position:absolute;
  bottom:-5px;
  left:21%;
  width:1px;
  height:11px;
  background:var(--echo-accent);
  animation:detailEchoDemoPlaySentence 5s linear infinite;
}

@keyframes detailEchoDemoPlaySentence{
  0%{left:21%;opacity:0}
  4%{opacity:1}
  96%{opacity:1}
  100%{left:67%;opacity:0}
}

.detail-echo-demo-repeat{
  position:absolute;
  left:50%;
  top:58.5%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:13px;
  font:9px/1 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.12em;
  color:var(--echo-muted);
}

.detail-echo-demo-repeat strong{
  font-size:20px;
  color:var(--echo-text);
  font-weight:600;
  letter-spacing:0;
  min-width:22px;
  text-align:center;
}

.detail-echo-demo-repeat .is-current{color:var(--echo-accent)}

.detail-echo-demo-dictation{
  position:absolute;
  left:14%;
  right:14%;
  top:67%;
  height:124px;
  border-top:1px solid var(--echo-line);
  padding-top:16px;
}

.detail-echo-demo-dictation-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

.detail-echo-demo-dictation-title{
  font:9px/1 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.16em;
  color:var(--echo-accent);
}

.detail-echo-demo-state{
  font:8px/1 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.12em;
  color:var(--echo-muted);
}

.detail-echo-demo-input-line{
  position:relative;
  min-height:39px;
  padding-bottom:11px;
  border-bottom:1px solid rgba(32,38,36,.15);
  font-size:18px;
  line-height:1.4;
  letter-spacing:-.015em;
}

.detail-echo-demo-typed{
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  width:0;
  border-right:1px solid var(--echo-accent);
}

.detail-echo-demo-typed.is-typing{
  animation:detailEchoDemoTypeText 4.6s steps(49,end) forwards;
}

@keyframes detailEchoDemoTypeText{
  from{width:0}
  to{width:78%}
}

.detail-echo-demo-typed .wrong{
  color:#7f8984;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:4px;
}

.detail-echo-demo-footer{
  position:absolute;
  left:5%;
  right:5%;
  bottom:4%;
  border-top:1px solid var(--echo-line);
  padding-top:10px;
  display:flex;
  justify-content:space-between;
  font:8px/1 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.1em;
  color:var(--echo-muted);
}
.detail-echo-demo-footer b{color:var(--echo-text);font-weight:600}
.detail-echo-demo-footer-copy{text-align:right}

@media(max-width:860px){
  .detail-echo-demo{
    border-color:rgba(32,38,36,.10);
  }
  .detail-echo-demo-brand{font-size:8px;letter-spacing:.13em}
  .detail-echo-demo-mode{font-size:6px;letter-spacing:.08em}
  .detail-echo-demo-sentence-meta{font-size:6px;letter-spacing:.10em}
  .detail-echo-demo-loop-badge{
    gap:5px;
    padding:4px 6px;
    font-size:6px;
    letter-spacing:.07em;
  }
  .detail-echo-demo-loop-icon{width:10px;height:10px}
  .detail-echo-demo-loop-icon::after{width:3px;height:3px}
  .detail-echo-demo-hint{font-size:6px;letter-spacing:.10em;margin-bottom:8px}
  .detail-echo-demo-subtitle{font-size:14px;line-height:1.25}
  .detail-echo-demo .detail-echo-demo-subtitle{font-size:14px;line-height:1.25}
  .detail-echo-demo-wave-wrap{left:11%;right:11%;height:40px}
  .detail-echo-demo-wave{gap:2px}
  .detail-echo-demo-wave .bar{width:1px}
  .detail-echo-demo-wave .bar.a{height:6px}
  .detail-echo-demo-wave .bar.b{height:11px}
  .detail-echo-demo-wave .bar.c{height:17px}
  .detail-echo-demo-wave .bar.d{height:9px}
  .detail-echo-demo-wave .bar.e{height:21px}
  .detail-echo-demo-wave .bar.f{height:13px}
  .detail-echo-demo-wave .bar.g{height:7px}
  .detail-echo-demo-wave .bar.h{height:19px}
  .detail-echo-demo-wave .bar.i{height:10px}
  .detail-echo-demo-wave .bar.j{height:15px}
  .detail-echo-demo-repeat{gap:6px;font-size:6px;letter-spacing:.08em}
  .detail-echo-demo-repeat strong{font-size:13px;min-width:15px}
  .detail-echo-demo-dictation{
    left:10%;
    right:10%;
    height:40px;
    padding-top:7px;
    border-top:0;
  }
  .detail-echo-demo-dictation-head{margin-bottom:7px}
  .detail-echo-demo-dictation-title{font-size:6px;letter-spacing:.10em}
  .detail-echo-demo-state{font-size:5.5px;letter-spacing:.05em}
  .detail-echo-demo-input-line{
    min-height:17px;
    padding-bottom:4px;
    font-size:9px;
    line-height:1.25;
  }
  .detail-echo-demo-footer{
    padding-top:5px;
    font-size:5.5px;
    letter-spacing:.06em;
  }
}